Tutorial CodeIgniter : Cara Konfigurasi CKEditor dan KCFinder di CodeIgniter

Tugas kuliah dan pekerjaan mulai datang bersamaan dan seperti biasa mereka pasti main keroyokan. Jam begadang tampaknya harus ditambah lagi, seperti kata om RSW, ajaran tidur 2 jam per-hari tampaknya harus diterapkan lagi ;). Syukurlah tugas kuliah di semester ini berhubungan erat dengan topik skripsi yang akan saya ambil semester depan. Jadinya tak apalah sedikit kerja keras di semester ini, semester depan bisa ditambahkan sedikit lagi. Ngomong-ngomong soal pekerjaan, kemarin saya sempat menemui sedikit masalah pada text editor WYSIWYG CKEditor. Biasanya saya menggunakan text editor TinyMCE di setiap website yang saya buat, berhubung CKEditor banyak fitur tambahannya dan jadilah saya mencobanya. CKEditor ini saya gabungkan dengan KCFinder, sebuah file manager versi gratis dari CKFinder. CKEditor cukup mudah untuk dipasang, berbeda dengan KCFinder yang pastinya kita akan dipusingkan dengan konfigurasi path dan security-nya (saya juga mengalaminya :p). Baca-baca dokumentasi di website developer-nya ternyata masih kurang. Nah, di postingan kali ini saya coba untuk memberikan trik sederhana untuk CKEditor dan KCFinder di CodeIgniter.

1. Silahkan download terlebih dahulu file CKEditor dan KCFinder dari website resminya. Ekstrak dan copy file-file CKEditor dan KCFinder dengan susunan seperti di bawah ini.

2. Buka file config.js yang terdapat di dalam folder ckeditor dan ubah konfigurasinya dengan kode seperti di bawah ini :

CKEDITOR.editorConfig = function( config )
{
config.filebrowserBrowseUrl = '../asset/kcfinder/browse.php?type=files';
config.filebrowserImageBrowseUrl = '../asset/kcfinder/browse.php?type=images';
config.filebrowserFlashBrowseUrl = '../../asset/kcfinder/browse.php?type=flash';
config.filebrowserUploadUrl = '../../asset/kcfinder/upload.php?type=files';
config.filebrowserImageUploadUrl = '../../asset/kcfinder/upload.php?type=images';
config.filebrowserFlashUploadUrl = '../../asset/kcfinder/upload.php?type=flash';
};

3. Buat sebuah controller baru dengan nama file tes_kcfinder.php. Ketikkan kode di bawah ini, skenarionya kita akan membuat sebuah sistem login sederhana yang memanfaatkan session. Dimana ketika login kita akan menyisipkan session untuk mengubah konfigurasi security kcfinder menjadi false.

class Tes_Kcfinder extends CI_Controller {

	function __construct()
	{
		parent::__construct();
		session_start();
	}

	function index()
	{
		$this->load->view('tes-kcfinder/login');
	}
	function login()
	{
		$usr = $this->input->post('username');
		$pass = $this->input->post('password');
		if($usr=="admin" || $pass=="admin"){
			$_SESSION['ses_admin']="admin";
			$_SESSION['ses_kcfinder']=array();
			$_SESSION['ses_kcfinder']['disabled'] = false;
			$_SESSION['ses_kcfinder']['uploadURL'] = "../content_upload";
			$this->admin();
		}
		else { $this->index(); }
	}
	function admin()
	{
		$session=isset($_SESSION['ses_admin']) ? $_SESSION['ses_admin']:'';
		if($session==""){
			$this->login();
		}
		else { $this->load->view('tes-kcfinder/admin'); }
	}

	function logout()
	{
		session_destroy();
		$this->login();
	}
}

4. Disini kita membutuhkan 2 buah view, untuk halaman login dan halaman admin yang berisikan sebuah tampilan text editor CKEditor.

login.php

<form method="post" action="<?php echo base_url(); ?>tes_kcfinder/login">
<label>Username</label>
<input type="text" name="username" />
<label>Password </label>
<input type="password" name="password" />
<input type="submit" value="Masuk" />
</form>

admin.php

<script type="text/javascript" src="<?php echo base_url(); ?>asset/ckeditor/ckeditor.js"></script>
<textarea class="ckeditor" name="editor"></textarea>

5. Buka file config.php yang terdapat di dalam folder kcfinder dan ganti dengan konfigurasi di bawah ini. Di bawah ini saya ubah nama variabel session untuk keamanannya, serta pada variabel disabled saya berikan nilai true. Dimana ketika ada user yang mencoba mengakses file browse.php tanpa melalui login maka akan ditolak.

$_CONFIG = array(

    'disabled' => true,
    'denyZipDownload' => false,
    'denyUpdateCheck' => false,
    'denyExtensionRename' => false,

    'theme' => "oxygen",

    'uploadURL' => "upload",
    'uploadDir' => "",

    'dirPerms' => 0755,
    'filePerms' => 0644,

    'access' => array(

        'files' => array(
            'upload' => true,
            'delete' => true,
            'copy' => true,
            'move' => true,
            'rename' => true
        ),

        'dirs' => array(
            'create' => true,
            'delete' => true,
            'rename' => true
        )
    ),

    'deniedExts' => "exe com msi bat php phps phtml php3 php4 cgi pl",

    'types' => array(

        // CKEditor & FCKEditor types
        'files'   =>  "",
        'flash'   =>  "swf",
        'images'  =>  "*img",

        // TinyMCE types
        'file'    =>  "",
        'media'   =>  "swf flv avi mpg mpeg qt mov wmv asf rm",
        'image'   =>  "*img",
    ),

    'filenameChangeChars' => array(/*
        ' ' => "_",
        ':' => "."
    */),

    'dirnameChangeChars' => array(/*
        ' ' => "_",
        ':' => "."
    */),

    'mime_magic' => "",

    'maxImageWidth' => 0,
    'maxImageHeight' => 0,

    'thumbWidth' => 100,
    'thumbHeight' => 100,

    'thumbsDir' => ".thumbs",

    'jpegQuality' => 90,

    'cookieDomain' => "",
    'cookiePath' => "",
    'cookiePrefix' => 'KCFINDER_',

    // THE FOLLOWING SETTINGS CANNOT BE OVERRIDED WITH SESSION CONFIGURATION
    '_check4htaccess' => true,
    //'_tinyMCEPath' => "/tiny_mce",

    '_sessionVar' => &$_SESSION['ses_kcfinder'],
    //'_sessionLifetime' => 30,
    //'_sessionDir' => "/full/directory/path",

    //'_sessionDomain' => ".mysite.com",
    //'_sessionPath' => "/my/path",
);

6. Jalan aplikasi via browser kesayangan rekan-rekan, coba login dengan username dan password admin. Klik icon Image untuk mulai mencari atau meng-upload gambar.

Satu hal yang perlu diperhatikan dari file manager seperti KCFinder adalah permasalahan security-nya. Seperti kasus blog dosen saya yang lupa mengubah konfigurasi dari false menjadi true, jadilah ada orang jahil yang bisa menerobos masuk ke file browse.php dan meng-upload file shell. Akhirnya semua direktori dan file-file yang terdapat di dalam hostingan ludes terhapus :(. OK deh, sekian dulu postingan saya kali ini. Semoga bermanfaat untuk rekan-rekan yang sedang dibuat pusing oleh CKEditor maupun KCFinder.

Happy Blogging and Keep Coding

Cheerrrss….!!!!

[to_like]Download Aplikasi[/to_like]

19 comments

  1. dido Reply

    Mas Bro, saya coba tutorialnya, tp ada problem: ketika di klik browse server, tidak muncul malah ada alert “you don’t have permissions to browse server”: gimana solusinya? mohon pencerahannya… trims

    • agungphe Reply

      itu file permission’a gan, pada file kcfinder/conf/config.php ada nilai array ‘disabled’ => true, //Setting permission diubah ke false

      • freddy Reply

        gak bisa neh gan 🙁 mlah tetap not found gan 🙁

        wait deh semua folder itu di masukkan ke dalam folder oprek ya, baik aplication dan asset nya

        • ugy Reply

          file config.php di folder kcfinder/conf/ nilai arraynya ttp dibuat true.

          sementara method untuk login, daftarkan session utk kcfinder yg diset ke false, artinya saat dilakukan login, session kcfinder diset bernilai false sehingga folder dapat diakses ketika sudah dilakukan login.

  2. newbie Reply

    Bang, ada tutorial + materi tentang dasar dan penggunaan framework CI gak??? Kalo tutorial yg bawaan dari CI ane kurang ngerti…
    Thx

  3. cozz Reply

    Mav gan di luar dari topik..
    design webnya keren2,,
    boleh dong di share cara buat sama tehniknya trus tool apa aja..
    makasih

  4. adin Reply

    cara manggilnya gimana yaah??
    saya coba ikuti tutorialnya tapi bingung cara ngambilnya..

  5. green casafa Reply

    Saya coba sudah berhasil..
    Tapi kalo saya buat ngedit style / class pake menu source kok gak disa kesimpen ya gan..
    Mohon pencerahannya.. Thanks uda share.. 😀

  6. arif Reply

    gan, punya saya udah tak logout, tapi di akses paksa dari url kcfinder nya bisa, gmn gan?
    setting session kcfinder

    nb:cara diatas sudah saya praktekan tp tetep bisa kebuka kcfinder (tanpa login admin)

  7. pelukis Reply

    Kalo CI ver 2.1 berfungsi baik gan, tapi untuk versi 3 dah gak bisa, karena manajemen sessionnya dah beda.

  8. budi aman prasetyo Reply

    mas di kcfinder bisa upload video/swf gk?
    mohon pencerahannya mas

    mas saya download file diatas,, di email, sya ko belum ada link konfirmasi<<
    gmana mas

  9. catur Reply

    mas saya mau tanya, saya udah berhasil browse image saat di localhost, tp pada saat sy upload ke server website saya jadi tidak bisa browse image ke server malah muncul tulisan gini

    * @copyright 2010-2014 KCFinder Project
    * @license http://opensource.org/licenses/GPL-3.0 GPLv3
    * @license http://opensource.org/licenses/LGPL-3.0 LGPLv3
    * @link http://kcfinder.sunhater.com
    */

    require “core/bootstrap.php”;
    $browser = “kcfinder\browser”; // To execute core/bootstrap.php on older
    $browser = new $browser(); // PHP versions (even PHP 4)
    $browser->action();

    ?>

    gabisa ngebrowse server
    gimana ya mas mohon bantuannya..