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.

<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][/to_like]

19 comments

dido April 18, 2012 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 October 11, 2014 Reply
  
  itu file permission’a gan, pada file kcfinder/conf/config.php ada nilai array ‘disabled’ => true, //Setting permission diubah ke false
  - freddy January 14, 2015 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 February 23, 2015 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.
newbie April 18, 2012 Reply

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

nice tutorial !
cozz July 11, 2012 Reply

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

Mas Bro,, saya belum berhasil nih… saat klik tombol browse hasilnya

http://localhost/ci/index.php/asset/kcfinder/browse.php?type=images&CKEditor=editor&CKEditorFuncNum=2&langCode=en

Page Not Found
adin November 26, 2012 Reply

cara manggilnya gimana yaah??
saya coba ikuti tutorialnya tapi bingung cara ngambilnya..
adin November 27, 2012 Reply

udah bisa masuk ko tampilannya cuma text area yaah??
jack March 8, 2013 Reply

kok g bisa browse server ya
page not found
pdhal dah sama
green casafa April 29, 2013 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.. 😀
cocom January 20, 2014 Reply

klo boleh tau ini pake CI berapa ya??
Fêrdhîkâ Yûdîrâ June 12, 2014 Reply

Makasih mas.. 😀
arif April 10, 2015 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)
pelukis October 16, 2015 Reply

Kalo CI ver 2.1 berfungsi baik gan, tapi untuk versi 3 dah gak bisa, karena manajemen sessionnya dah beda.
budi aman prasetyo December 1, 2015 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
Mohammad Ghani February 11, 2016 Reply

Klo sudah di hosting, cara ngaturnya gmna? Thanks
catur March 6, 2018 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..