Cara Integrasi CKeditor dengan KCfinder pada Codeigniter (FULL TUTORIAL)

Ini adalah tutorial tentang bagaimana mengintegrasikan ckeditor dengan kcfinder pada Codeigniter.

Jika ingin mengintegrasikan ckeditor dan kcfinder dengan codeigniter.

Maka sekarang Anda berada di tempat yang tepat.

Hari ini, saya akan sharing kepada Anda bagaimana mengintegrasikan ckeditor dan kcfinder dengan codeigniter.

Tidak hanya itu,

Saya juga akan sharing bagaimana agar file manager kcfinder tidak dapat di akses jika user belum login.

(Step-by Step)

Mari kita mulai.

Tonton video tutorial web berkualitas GRATIS di channel youtube saya:

Klik Disini.!

Step #1. Persiapan

Untuk mengintegrasikan ckeditor dan kcfinder dengan Codeigniter, inilah yang perlu Anda persiapkan:

1. Codeigniter

2. JQuery

3. CKeditor

4. KCfinder

5. Bootstrap (optional)

Pada tutorial ini saya menggunakan Codeigniter v3.1.11, JQuery v3.3.1, Bootstrap v4.3.x, CKeditor v4.13.0 dan KCfinder v2.51.

Step #2. Membuat Database dan Table

Buat database baru dengan nama “blog_db”.

Jika Anda membuat database dengan nama yang sama itu lebih baik.

Untuk membuat database “blog_db” pada MySQL, dapat dilakukan dengan mengeksekusi query berikut:

CREATE DATABASE blog_db;

Selanjutnya buat sebuah table baru pada database blog_db.

Pada tutorial ini, hanya dibutuhkan satu table, yaitu table “tbl_article”.

Untuk membuat table “tbl_article” dapat dilakukan dengan mengeksekusi query berikut:

CREATE TABLE tbl_article(
article_id INT PRIMARY KEY AUTO_INCREMENT,
article_title VARCHAR(200),
article_content TEXT,
article_created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
)ENGINE=INNODB;

Jika Anda masih bingung bagaimana membuat database dan table pada MySQL, saya sarank untuk mempelajari “Data Definition Language (DDL)” pada MySQL.

Step #3. Installasi Codeigniter

Extract Codeigniter yang telah Anda download sebelumnya pada direktori “C:/xampp/htdocs” jika Anda menggunakan XAMPP.

Atau pada direktori “C:/wamp/www” jika Anda menggunakan WAMPSERVER.

Kemudian rename (ganti nama) Codeigniter yang telah di extract menjadi “blog”.

Pada tutorial ini, saya menggunakan XAMPP, jadi saya extraxt pada direktori:
“C:/xampp/htdocs”.

Perhatikan gambar berikut untuk lebih jelasnya:

Selanjutnya, buat folder “assets” didalam folder “blog” sejajar dengan folder application dan system.

Seperti gambar berikut:

Assets folder

Setelah itu, masukkan file bootstrap, ckeditor, kcfinder, dan jquery yang telah di download sebelumnya ke dalam folder “assets” seperti gambar berikut:

Jika Anda bingung sampai step ini, tetaplah lanjutkan dan pelajari kembali pada source code yang saya sertakan pada akhir tutorial ini.

Step #4. Konfigurasi Codeigniter

Selanjutnya lakukan konfigurasi pada beberapa file berikut:

1. Autoload.php

Buka file autoload.php yang tedapat pada folder “application/config” dan temukan kode berikut:

$autoload['libraries'] = array();
$autoload['helper'] = array();

Kemudian atur menjadi seperti berikut:

$autoload['libraries'] = array('database');
$autoload['helper'] = array('url');

2. Config.php

Buka file config.php yang tedapat pada folder “application/config” dan temukan kode berikut:

$config['base_url'] = '';

Kemudian atur menjadi seperti berikut:

$config['base_url'] = 'http://localhost/blog/';

Note: jika webserver Anda menggunakan port, maka sertakan juga port yang Anda gunakan.

3. Database.php

Buka file database.php yang tedapat pada folder “application/config” dan temukan kode berikut:

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
        'dsn'   => '',
        'hostname' => 'localhost',
        'username' => '',
        'password' => '',
        'database' => '',
        'dbdriver' => 'mysqli',
        'dbprefix' => '',
        'pconnect' => FALSE,
        'db_debug' => (ENVIRONMENT !== 'production'),
        'cache_on' => FALSE,
        'cachedir' => '',
        'char_set' => 'utf8',
        'dbcollat' => 'utf8_general_ci',
        'swap_pre' => '',
        'encrypt' => FALSE,
        'compress' => FALSE,
        'stricton' => FALSE,
        'failover' => array(),
        'save_queries' => TRUE
);

Kemudian atur menjadi seperti berikut:

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
        'dsn'   => '',
        'hostname' => 'localhost',
        'username' => 'root',
        'password' => '',
        'database' => 'blog_db',
        'dbdriver' => 'mysqli',
        'dbprefix' => '',
        'pconnect' => FALSE,
        'db_debug' => (ENVIRONMENT !== 'production'),
        'cache_on' => FALSE,
        'cachedir' => '',
        'char_set' => 'utf8',
        'dbcollat' => 'utf8_general_ci',
        'swap_pre' => '',
        'encrypt' => FALSE,
        'compress' => FALSE,
        'stricton' => FALSE,
        'failover' => array(),
        'save_queries' => TRUE
);

Step #5. Integrasi CKeditor dengan KCfinder

Ini step yang paling penting.

#1. Buka file config.js yang terdapat pada folder “assets/ckeditor/config.js”.

Kemudian tambahkan kode berikut:

config.filebrowserBrowseUrl = 'http://localhost/assets/kcfinder/browse.php?type=files';
config.filebrowserImageBrowseUrl = 'http://localhost/assets/kcfinder/browse.php?type=images';
config.filebrowserFlashBrowseUrl = 'http://localhost/assets/kcfinder/browse.php?type=flash';
config.filebrowserUploadUrl = 'http://localhost/assets/kcfinder/upload.php?type=files';
config.filebrowserImageUploadUrl = 'http://localhost/assets/kcfinder/upload.php?type=images';
config.filebrowserFlashUploadUrl = 'http://localhost/assets/kcfinder/upload.php?type=flash';

Sehingga terlihat kode lengkap dari file config.js pada ckeditor seperti berikut:

CKEDITOR.editorConfig = function( config ) {

    config.filebrowserBrowseUrl = 'http://localhost/assets/kcfinder/browse.php?type=files';
    config.filebrowserImageBrowseUrl = 'http://localhost/assets/kcfinder/browse.php?type=images';
    config.filebrowserFlashBrowseUrl = 'http://localhost/assets/kcfinder/browse.php?type=flash';
    config.filebrowserUploadUrl = 'http://localhost/assets/kcfinder/upload.php?type=files';
    config.filebrowserImageUploadUrl = 'http://localhost/assets/kcfinder/upload.php?type=images';
    config.filebrowserFlashUploadUrl = 'http://localhost/assets/kcfinder/upload.php?type=flash';

    // Define changes to default configuration here.
    // For complete reference see:
    // https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html

    // The toolbar groups arrangement, optimized for two toolbar rows.
    config.toolbarGroups = [
        { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
        { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
        { name: 'links' },
        { name: 'insert' },
        { name: 'forms' },
        { name: 'tools' },
        { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'others' },
        '/',
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
        { name: 'styles' },
        { name: 'colors' },
        { name: 'about' }
    ];

    // Remove some buttons provided by the standard plugins, which are
    // not needed in the Standard(s) toolbar.
    config.removeButtons = 'Underline,Subscript,Superscript';

    // Set the most common block elements.
    config.format_tags = 'p;h1;h2;h3;pre';

    // Simplify the dialog windows.
    config.removeDialogTabs = 'image:advanced;link:advanced';
};

#2. Kemudian buka file config.php yang terdapat pada folder “assets/kcfinder/config.php” kemudian temukan kode berikut:

'disabled' => true,

Kemudian ubah menjadi seperti ini:

'disabled' => false,

#3. Untuk mencegah error pada php versi 7.2+, buka file “class_gd.php” yang terdapat pada folder “assets/kcfinder/lib/class_gd.php”.

Kemudian tambahkan function php berikut ini setelah kode buka php atau pada baris kedua:

function myeach(&$arr) {
    $key = key($arr);
    $result = ($key === null) ? false : [$key, current($arr), 'key' => $key, 'value' => current($arr)];
    next($arr);
    return $result;
}

Kemudian temukan kode berikut:

list($key, $width) = each($image);
list($key, $height) = each($image);

Lalu ubah menjadi seperti berikut:

list($key, $width) = myeach($image);
list($key, $height) = myeach($image);

Kemudian Simpan (CTRL+S).

Jika Anda bingung pada step ini, teruslah lanjutkan dan Anda bisa pelajari kembali pada source code yang saya sertakan pada akhir tutorial ini.

Step #6. Controller

Buat sebuah controller dengan nama Blog.php pada folder “application/controllers”.

Kemudian ketikan kode berikut:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Blog extends CI_Controller{
    function __construct(){
        parent::__construct();
    }

    function index(){
        // memanggil sebuah bernama blog_view 
        $this->load->view('blog_view');
    }
}

Step #7. View

Buat sebuah view dengan nama blog_view.php pada folder “application/views”.

Kemudian ketikan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Blog</title>
    <link rel="stylesheet" href="<?php echo base_url('assets/bootstrap/css/bootstrap.css');?>">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <form action="">
                    <textarea name="content" id="ckeditor" required></textarea>
                </form>
            </div>
        </div>
    </div>

    <script src="<?php echo base_url('assets/jquery/jquery-3.3.1.js');?>"></script>
    <script src="<?php echo base_url('assets/bootstrap/bootstrap.bundle.js');?>"></script>
    <script src="<?php echo base_url('assets/ckeditor/ckeditor.js');?>"></script>
    <script type="text/javascript">
        $(function () {
                CKEDITOR.replace('ckeditor',{
                    filebrowserImageBrowseUrl : '<?php echo base_url('assets/kcfinder/browse.php');?>',
                    height: '400px'             
                });
            });
    </script>
</body>
</html>

Sampai disini sebenarnya Anda telah berhasil mengintegrasikan CKeditor dan KCfinder dengan Codeigniter.

Hanya saja file manager KCfinder masih dapat diakses melalui URL ketika user belum login.

Step #8. Uji Coba

Untuk sementara, silahkan lakukan uji coba untuk memastikan tidak terdapat error.

Kunjungi URL berikut untuk uji coba:

http://localhost/blog/index.php/blog

Maka akan terlihat seperti berikut:

Klik icon image untuk mengupload image, maka akan tampil modal seperti berikut:

Kemudian klik tombol Browse Server, maka akan tampil file manager kcfinder seperti berikut:

Klik tombol upload untuk mengupload file image.

Pilih image yang akan di upload, kemudian klik tombol open.

Maka akan tampil seperti berikut:

Double klik pada image untuk memasukkan image ke ckeditor, maka akan tampil seperti gambar berikut:

Step #9. Mencegah User Mengupload Image tanpa Login

Ini penting.

Untuk mencegah user mengupload image tanpa login melalui kcfinder, dapat dilakukan dengan memberi session.

KCfinder, tidak dapat mengenali session bawaan Codeigniter.

Oleh sebab itu, Anda harus menggunakan PHP native session.

Untuk dapat menggunakan Session PHP native pada Codeigniter, bisa dilakukan dengan mudah dengan membuat library tambahan.

#1. Buat sebuah file dengan nama “Nativesession.php” pada folder “application/libraries”.

Kemudian ketikan kode berikut:

<?php 
if (!defined('BASEPATH')) exit('No direct script access allowed');

class Nativesession{
    public function __construct(){
        session_start();
    }
    // function untuk meng-set session
    public function set($key, $value){
        $_SESSION[$key] = $value;
    }
    // function untuk memanggil session
    public function get($key){
        return isset( $_SESSION[$key] ) ? $_SESSION[$key] : null;
    }
    // function untuk menghapus session
    public function delete($key){
        unset($_SESSION[$key]);
    }
}

#2. Buat sebuah controller lagi dengan nama “Login.php” pada folder “application/controllers”.

Kemudian ketikan kode berikut:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Login extends CI_Controller{
    function __construct(){
        parent::__construct();
        $this->load->library('Nativesession','nativesession');
    }

    function index(){
        $this->load->view('login_view');
    }

    function auth(){
        $username = $this->input->post('username',TRUE);
        $password = $this->input->post('password',TRUE);
        if($username == 'admin' && $password == 'admin'){
            // set native session jika username benar
            $this->nativesession->set('status', 'loggedin');
            // redirect ke halaman blog
            redirect('blog');
        }else{
            // redirect ke login jika username salah
            redirect('login');
        }
    }

    function logout(){
        $this->nativesession->delete('status');
        redirect('login');
    }
}

#3. Buat sebuah view dengan nama “login_view.php” pada folder “application/views”.

Kemudian ketikan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Login</title>
    <link rel="stylesheet" href="<?php echo base_url('assets/bootstrap/css/bootstrap.css');?>">
</head>
<body>
    <div class="container">
        <div class="row justify-content-md-center">
            <div class="col-md-4">
                <form action="<?php echo site_url('login/auth');?>" method="post">
                    <div class="form-group">
                        <label for="username">Username</label>
                        <input type="text" name="username" class="form-control" id="username" placeholder="Enter Username" required>
                    </div>
                    <div class="form-group">
                        <label for="password">Password</label>
                        <input type="password" name="password" class="form-control" id="password" placeholder="Enter Password" required>
                    </div>
                    <button type="submit" class="btn btn-success btn-block">Login</button>
                </form>
            </div>
        </div>
    </div>

    <script src="<?php echo base_url('assets/jquery/jquery-3.3.1.js');?>"></script>
    <script src="<?php echo base_url('assets/bootstrap/bootstrap.bundle.js');?>"></script>
</body>
</html>

#4. Edit view “blog_view.php” yang terdapat pada folder “application/views” menjadi seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Blog</title>
    <link rel="stylesheet" href="<?php echo base_url('assets/bootstrap/css/bootstrap.css');?>">
</head>
<body>
    <div class="container">
        <div class="row justify-content-md-center">
            <div class="col-md-8">
            <h3>ADD NEW ARTICLE</h3>
                <form action="<?php echo site_url('blog/publish');?>" method="post">
                    <div class="form-group">
                        <input type="text" name="title" class="form-control" placeholder="Title" required>
                    </div>
                    <div class="form-group">
                        <textarea name="content" id="ckeditor" required></textarea>
                    </div>
                    <button type="submit" class="btn btn-success">PUBLISH</button>
                </form>
            </div>
        </div>
    </div>

    <script src="<?php echo base_url('assets/jquery/jquery-3.3.1.js');?>"></script>
    <script src="<?php echo base_url('assets/bootstrap/bootstrap.bundle.js');?>"></script>
    <script src="<?php echo base_url('assets/ckeditor/ckeditor.js');?>"></script>
    <script type="text/javascript">
        $(function () {
                CKEDITOR.replace('ckeditor',{
                    filebrowserImageBrowseUrl : '<?php echo base_url('assets/kcfinder/browse.php');?>',
                    height: '400px'             
                });
            });
    </script>
</body>
</html>

#5. Edit Controller “Blog.php” yang terdapat pada folder “application/controllers” menjadi seperti berikut:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Blog extends CI_Controller{
    function __construct(){
        parent::__construct();
        // load libary native session
        $this->load->library('Nativesession','nativesession');
        // load model blog model
        $this->load->model('Blog_model','blog_model');
    }

    function index(){
        if($this->nativesession->get('status')=='loggedin'){ 
            $this->load->view('blog_view');
        }else{
            // redirect ke login jika session unset
            redirect('login');
        } 
    }

    // function publish article
    function publish(){
        $title = $this->input->post('title',TRUE);
        $content = $this->input->post('content',TRUE);
        $this->blog_model->publish_article($title, $content);
        $id = $this->db->insert_id();
        redirect('blog/show_article/'.$id);
    }
    
    // function show article
    function show_article(){
        $id = $this->uri->segment(3);
        $data = $this->blog_model->get_article_by_id($id);
        if($data->num_rows() > 0){
            $row = $data->row();
            $x['title']   = $row->article_title;
            $x['content'] = $row->article_content;
            $this->load->view('blog_show_view', $x);
        }else{
            echo "ID Not Found.";
        }
    }
}

#6. Buat sebuah satu view lagi dengan nama “blog_show_view.php” pada folder “application/views”.

Kemudian ketikan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><?php echo $title;?></title>
    <link rel="stylesheet" href="<?php echo base_url('assets/bootstrap/css/bootstrap.css');?>">
</head>
<body>
    <div class="container">
        <div class="row justify-content-md-center">
            <div class="col-md-8">
                <h2><?php echo $title;?></h2>
                <article><?php echo $content;?></article>
            </div>
        </div>
    </div>

    <script src="<?php echo base_url('assets/jquery/jquery-3.3.1.js');?>"></script>
    <script src="<?php echo base_url('assets/bootstrap/bootstrap.bundle.js');?>"></script>
</body>
</html>

#7. Kemudian buka file config.php yang terdapat pada folder “assets/kcfinder/config.php”

kemudian tambahkan kode berikut:

if(isset($_SESSION['status']) == 'loggedin'){
    $status = false;
}else{
    $status = true;
}

Kemudian ubah kode berikut:

'disabled' => false,

Menjadi:

'disabled' => $status,

Lalu Simpan (CTRL+S).

Sehingga terlihat kode lengkap dari file “config.php” pada kcfinder menjadi seperti berikut:

<?php

/** This file is part of KCFinder project
  *
  *      @desc Base configuration file
  *   @package KCFinder
  *   @version 2.51
  *    @author Pavel Tzonkov <pavelc@users.sourceforge.net>
  * @copyright 2010, 2011 KCFinder Project
  *   @license http://www.opensource.org/licenses/gpl-2.0.php GPLv2
  *   @license http://www.opensource.org/licenses/lgpl-2.1.php LGPLv2
  *      @link http://kcfinder.sunhater.com
  */

// IMPORTANT!!! Do not remove uncommented settings in this file even if
// you are using session configuration.
// See http://kcfinder.sunhater.com/install for setting descriptions

if(isset($_SESSION['status']) == 'loggedin'){
    $status = false;
}else{
    $status = true;
}

$_CONFIG = array(

    'disabled' => $status,  
    '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['KCFINDER'],
    //'_sessionLifetime' => 30,
    //'_sessionDir' => "/full/directory/path",

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

?>

#8. Uji Coba

Untuk melakukan uji coba, silahkan kunjungi URL berikut:

http://localhost/blog/assets/kcfinder/browse.php

kemudian jika terlihat alert seperti ini, maka user tidak dapat mengupload image tanpa login:

Kemudian kunjungi URL berikut untuk menguji aplikasi secara keseluruhan:

http://localhost/blog/index.php/login

Maka akan Tampil form login seperti berikut:

Kemudian masukkan username = admin dan password = admin, lalu klik login.

Maka akan tampil seperti berikut:

Masukkan titlenya, click icon image untuk mengupload image, dan ketikan artikel yang ingin di publish.

Seperti berikut:

Kemudian klik tombol PUBLISH.

Maka akan tampil seperti gambar berikut:

Kesimpulan:

Pembahasan kali ini adalah tentang bagaimana mengintegrasikan CKeditor dan KCfinder dengan Codeigniter.

Tidak hanya itu, Anda juga telah belajar bagaimana mencegah user mengupload image tanpa login dengan menggunakan session.

Anda juga telah belajar bagaimana menggunakan session PHP Native pada Codeigniter.

Jadi, Tunggu apalagi. Keep Coding!

PS: Jika Anda merasa tutorial ini bermanfaat, bebaskan diri Anda untuk membagikan ke sosial media favorit Anda.!

Download Source Code