Cara Konfigurasi/Memasang CKEditor dan KCFinder di CodeIgniter

Written by Dika on 08 Jan 2015

Udah hampir seminggu sekolah nih, belajar masih belum formal.. dan besok hari jum'at yaw, arghhh remed belum selesai lagi.. kerjaan masih banyak, bentar lagi ujikom lagi.. tapi tenang, kalo ujikom sih kesukaan banget.. soalnya pelajaran di sekolah yang paling semangat ya pelajaran di lab :laughing:

Oh iya, mumpung sekarang dapet project dari kejaksaan negeri cimahi saya buat dulu konsep sama login nya dulu. dan sekarang baru kepikiran buat page admin nya dulu.. dan dalem page admin pasti bisa nge manage apa aja, tapi kalo sekarang saya sih bikin buat berita dulu.. biar menarik kita di dalam form berita ini di kasih plugin CKEditor sama KCFinder ni plugin banyak berguna nya bro, kaya text editor wordpress.. tapi beda jauh haha :v

Nih tampilan nya kaya gini broh :

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. Oh iya, untuk link cari aja di google, mandiri ya bro.. B-)

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 kcfinder.php. Ketikkan kode di bawah ini, ceritanya kita lagi ngebuat sebuah sistem login sederhana yang manfaatin session. Dimana ketika login kita akan menyisipkan session untuk mengubah konfigurasi security kcfinder menjadi false.

<?php
class Kcfinder extends CI_Controller {

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

	function index(){
		$this->load->view('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('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(); ?>kcfinder/login">
	<label>Username</label>
	<input type="text" name="username" />
	<label>Password </label>
	<input type="password" name="password" />
	<input type="submit" value="Masuk" />
</form>

<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.

<?php
	$_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 &amp; 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' => &amp;$_SESSION['ses_kcfinder'],
		//'_sessionLifetime' => 30,
		//'_sessionDir' => "/full/directory/path",

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

6. Jalan web via browser kesayangan ente bro, 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 blog yng pernah saya temui, mereka lupa mengubah konfigurasi dari false menjadi true, jadilah ada orang jahil yang bisa menerobos masuk ke file browse.php dan meng-upload file shell/atau menghapus data data yang ada di file browse.php. Akhirnya semua direktori dan file-file yang terdapat di dalam hostingan bisa ludes terhapus kasian kan :(.

Nih yng pengen file nya :D

Download

OK deh, sekian dulu postingan saya kali ini. Semoga bermanfaat buat ente ya bro. Kalo ada pertanyaan, jangan sungkan sungkan curat coret di komentar yaww.. B-) bay bay :*