[CodeIgniter] Membuat File Manager dengan elFinder

Sembari menonton berita mengenai UAN yang acakadut, saya iseng-iseng mengintegrasikan elFinder pada CodeIgniter. elFinder sendiri sudah lama saya pakai pada aplikasi yang saya buat, tetapi elFinder yang untuk Yii Framework (extensions). Oleh sebab itu disini saya coba pasangkan elFinder pada CodeIgniter dan ternyata sama mudahnya :D

Pertama jangan lupa Anda download jQuery, jQuery UI dan elFinder itu sendiri, kemudian simpan dalam folder assets. Setelah itu buat sebuah controller, disini saya pakai welcome.php dan di isi dengan script berikut.

public function __construct()
{
    parent::__construct();
    $this->load->helper('url');
}
    
public function index()
{
    $this->load->view('welcome_message');
}
    
public function elfinder()
{
    require_once './assets/elfinder/php/elFinderConnector.class.php';
    require_once './assets/elfinder/php/elFinder.class.php';
    require_once './assets/elfinder/php/elFinderVolumeDriver.class.php';
    require_once './assets/elfinder/php/elFinderVolumeLocalFileSystem.class.php';
    
    $conn = new elFinderConnector(new elFinder(array(
        'roots'=>array(
            array(
                'driver'=>'LocalFileSystem',
                'path'=>'./myfile',
                'URL'=>base_url('myfile').'/',
            )
        )
    )));
    $conn->run();
}

Selanjutnya buat view dan disini saya memakai welcome_message.php dan tambahkan script berikut.

    <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/jquery-ui/css/base/jquery-ui.css'); ?>" />
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/elfinder/css/theme.css'); ?>" />
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/elfinder/css/elfinder.min.css'); ?>" />
    <script type="text/javascript" src="<?php echo base_url('assets/jquery-1.7.2.min.js'); ?>"></script>
    <script type="text/javascript" src="<?php echo base_url('assets/jquery-ui/js/jquery-ui.min.js'); ?>"></script>
    <script type="text/javascript" src="<?php echo base_url('assets/elfinder/js/elfinder.min.js'); ?>"></script>
    
    <script type="text/javascript">
        jQuery(document).ready(function(){
            jQuery('#elfinder-tag').elfinder({
                url: '<?php echo site_url('welcome/elfinder'); ?>',
            }).elfinder('instance');
        });
    </script>
</head>
<body>

<div id="container">
    <h1>CodeIgniter with elFinder <span style="float:right">Dida Nurwanda</span></h1>

    <div id="body">
        <div id="elfinder-tag"></div>
    </div>

    <p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p>
</div>

</body>
</html>

Nah loh, selesai deh. gampang kan dan jangan lupa di kembangkan dari segi keamanannya :D

Berikut penampakannya.