Ini adalah tutorial bagaimana membuat upload image ke folder bukan base64 encode pada Summernote menggunakan Codeigniter.

Jika Anda ingin mengetahui:

Bagaimana mengupload image ke folder pada server bukan base64 encode pada summernote?

Maka, anda berada di tempat yang tepat.

Pada tutorial kali ini, saya akan sharing Step-by-Step bagaimana mengubah upload image base64 encode bawaan summernote menjadi upload image ke folder yang terdapat pada server.

Mari kita mulai.

Kenapa kita perlu mengupload image ke folder bukan base64?

Beberapa bulan yang lalu saya mencoba hal baru, yaitu menggunakan Summernote sebagai editor WYSIWYG (What You See Is What You Get) untuk project baru yang saya kembangkan.

Sebelumnya saya menggunakan CKEDITOR.

Akan tetapi, saya tertarik pada Summernote dikarenakan lebih simple dan style yang cocok dikombinasikan dengan Bootstrap.

Kemudian, problem pun muncul.

Summernote tidak mengupload image, melainkan mengubah image menjadi base64 secara default.

Akibatnya dapat membuat database membengkak drastis.

Satu image yang di upload akan di encode menjadi base64 sebanyak lebih dari 1.932.212 karakter.

Bisa dibayangkan jika Anda memiliki post artikel yang memiliki 15 image dalam satu posting.

Maka dapat dipastikan database Anda tidak dapat menampung jumlah karakter base64 tersebut.

Solusi terbaiknya adalah dengan mengupload image ke folder yang terdapat pada server.

Bagaimana caranya?

Mari kita mulai.

 

Step #1. Persiapan

Untuk membuat Summernote upload image ke folder pada Codeigniter, inilah yang perlu Anda persiapkan:

1. Codeigniter

2. JQuery

3. Bootstrap

4. Summernote

Pada tutorial ini saya menggunakan Codeigniter v3.1.x, JQuery v3.4.x, Bootstrap v4.3.x, dan Summernote v0.8.x.

 

Step #2. Membuat Database dan Table

Buat database baru dengan nama “blogpost_db”. Jika Anda membuat database dengan nama yang sama itu lebih baik.

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

CREATE DATABASE blogpost_db;

Selanjutnya pembuatan table. Pada tutorial kali ini kita hanya membutuhkan 1 table, yaitu: article.

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

CREATE TABLE article(
id INT PRIMARY KEY AUTO_INCREMENT,
title VARCHAR(200),
contents TEXT
)ENGINE=INNODB;

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

 

Step #3. Installasi dan Konfigurasi Codeigniter

Extract Codeigniter yang telah Anda download sebelumnya pada direktori “C:/wamp/www” jika Anda menggunakan WAMPSERVER.

Atau pada direktori “C:/xampp/htdocs” jika Anda menggunakan XAMPP.

Kemudian rename (ganti nama) menjadi “blog-post”.

Perhatikan gambar berikut untuk lebih jelasnya:

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

Seperti gambar berikut:

Setelah itu, Extract file Bootstrap yang telah di download sebelumnya ke dalam folder “assets” seperti gambar berikut:

Setelah itu, buat folder “images” dan folder “summernote”.

Seperti gambar berikut:

Kemudian extract file summernote yang telah didownload sebelumnya kedalam folder “assets/summernote”.

Seperti gambar berikut:

Selanjutnya, copykan file jquery kedalam folder “assets/js” seperti gambar berikut:

Jika Anda belum mendapatkan jquery, kunjungi URL berikut:

https://code.jquery.com/jquery-3.4.0.min.js

Select semua kode-nya (CTRL + A) dan copy lalu pastekan di notepad dan simpan dengan nama jquery-3.4.0.min.js.

 

Konfigurasi Codeigniter:

Selanjutnya lakukan konfigurasi pada 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-post/';

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' => 'blogpost_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 #4. Controller

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

Kemudian ketikan kode berikut:

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

class Post extends CI_Controller{
        
        function __construct(){
                parent::__construct();
                $this->load->model('Post_model','post_model');
                $this->load->library('upload');
        }

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

        function save(){
                $title = $this->input->post('title',TRUE);
                $contents = $this->input->post('contents',TRUE);
                $this->post_model->insert_post($title,$contents);
                $id = $this->db->insert_id();
                $result = $this->post_model->get_article_by_id($id)->row_array();
                $data['title'] = $result['title'];
                $data['contents'] = $result['contents'];
                $this->load->view('post_detail_view', $data);
        }

        //Upload image summernote
        function upload_image(){
                if(isset($_FILES["image"]["name"])){
                        $config['upload_path'] = './assets/images/';
                        $config['allowed_types'] = 'jpg|jpeg|png|gif';
                        $this->upload->initialize($config);
                        if(!$this->upload->do_upload('image')){
                                $this->upload->display_errors();
                                return FALSE;
                        }else{
                                $data = $this->upload->data();
                        //Compress Image
                        $config['image_library']='gd2';
                        $config['source_image']='./assets/images/'.$data['file_name'];
                        $config['create_thumb']= FALSE;
                    $config['maintain_ratio']= TRUE;
                    $config['quality']= '60%';
                    $config['width']= 800;
                    $config['height']= 800;
                    $config['new_image']= './assets/images/'.$data['file_name'];
                    $this->load->library('image_lib', $config);
                    $this->image_lib->resize();
                                echo base_url().'assets/images/'.$data['file_name'];
                        }
                }
        }

        //Delete image summernote
        function delete_image(){
                $src = $this->input->post('src');
                $file_name = str_replace(base_url(), '', $src);
                if(unlink($file_name))
        {
            echo 'File Delete Successfully';
        }
        }
}

Penjelasan kode:

#1. Function Construct

function __construct(){
        parent::__construct();
        $this->load->model('Post_model','post_model');
        $this->load->library('upload');
}

Function __construct berfungsi sebagai constructor, dimana pada function ini, kita memanggil model “Post_model” dan library “upload”.

Sehingga model “Post_model” dan library “upload” dapat digunakan di setiap function yang terdapat di dalam controller Post.

#2. Function Index

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

Function index merupakan function yang di panggil otomatis disaat controller Post di request.

Pada kasus ini, function index berfungsi untuk memanggil sebuah view yaitu “post_view”.

#3. Function Save

function save(){
        $title = $this->input->post('title',TRUE);
        $contents = $this->input->post('contents',TRUE);
        $this->post_model->insert_post($title,$contents);
        $id = $this->db->insert_id();
        $result = $this->post_model->get_article_by_id($id)->row_array();
        $data['title'] = $result['title'];
        $data['contents'] = $result['contents'];
        $this->load->view('post_detail_view', $data);
}

Function save merupakan function yang berfungsi untuk meng-insert data ke database yang kirimkan ke model.

Pada kasus ini, function save tidak hanya berfungsi untuk menyimpan data ke database, melainkan juga mengambil data yang telah di insert ke database kemudian menampilkannya ke view “post_detail_view”.

#4. Function Upload Image

function upload_image(){
        if(isset($_FILES["image"]["name"])){
                $config['upload_path'] = './assets/images/';
                $config['allowed_types'] = 'jpg|jpeg|png|gif';
                $this->upload->initialize($config);
                if(!$this->upload->do_upload('image')){
                        $this->upload->display_errors();
                        return FALSE;
                }else{
                        $data = $this->upload->data();
                //Compress Image
                $config['image_library']='gd2';
                $config['source_image']='./assets/images/'.$data['file_name'];
                $config['create_thumb']= FALSE;
            $config['maintain_ratio']= TRUE;
            $config['quality']= '60%';
            $config['width']= 800;
            $config['height']= 800;
            $config['new_image']= './assets/images/'.$data['file_name'];
            $this->load->library('image_lib', $config);
            $this->image_lib->resize();
                        echo base_url().'assets/images/'.$data['file_name'];
                }
        }
}

Function upload_image berfungsi untuk mengupload image dari summernote yang di kirim melalui AJAX Request.

Image yang diupload akan tersimpan di folder “assets/images” yang telah di buat sebelumnya.

Tidak hanya itu, image yang diupload juga di compress. Sehingga memungkinkan bagi user untuk mengupload image dengan resolusi tinggi.

#5. Function Delete Image

function delete_image(){
        $src = $this->input->post('src');
        $file_name = str_replace(base_url(), '', $src);
        if(unlink($file_name)){
        echo 'File Delete Successfully';
    }
}

Function delete_image berfungsi untuk menghapus image yang telah diupload melalui summernote.

 

Step #5. Model

Buat sebuah model dengan nama “Post_model.php” pada folder “application/models”.

Kemudian ketikan kode berikut:

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

class Post_model extends CI_Model{
        
        function insert_post($title,$contents){
                $data = array(
                        'title'    => $title,
                        'contents' => $contents
                );
                $this->db->insert('article',$data);
        }

        function get_article_by_id($id){
                $query = $this->db->get_where('article', array('id' =>  $id));
                return $query;
        }
}

Pada model “Post_model” terdapat dua function. Yaitu function insert_post dan function get_article_by_id.

Function insert_post berfungsi untuk meng-insert data ke database, sedangkan function get_article_by_id berfungsi untuk mengambil data dari database berdasarkan id untuk ditampilkan ke view.

 

Step #6. View (post_view)

Pada kasus ini kita membutuhkan 2 view. Yaitu “post_view” dan “post_detail_view”.

Pertama-tama buat view “post_view.php” pada folder “application/views”.

Kemudian ketikan kode berikut:

<!DOCTYPE html>
<html>
<head>
        <title>Post Article</title>
        <link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/css/bootstrap.css';?>">
        <link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/summernote/summernote-bs4.css';?>">
</head>
<body>
        <div class="container">
                <div class="row justify-content-md-center">
                        <div class="col-md-8">
                                <form action="<?php echo site_url('post/save');?>" method="post">
                                  <div class="form-group">
                                    <label>Title</label>
                                    <input type="text" name="title" class="form-control" placeholder="Title" required>
                                  </div>
                                  <div class="form-group">
                                    <label>Contents</label>
                                    <textarea id="summernote" name="contents"></textarea>
                                  </div>
                                  <button type="submit" class="btn btn-primary">Submit</button>
                                </form>
                        </div>
                </div>
        </div>

        <script type="text/javascript" src="<?php echo base_url().'assets/js/jquery-3.4.0.min.js';?>"></script>
        <script type="text/javascript" src="<?php echo base_url().'assets/js/bootstrap.bundle.js';?>"></script>
        <script type="text/javascript" src="<?php echo base_url().'assets/summernote/summernote-bs4.js';?>"></script>
        <script type="text/javascript">
                $(document).ready(function(){
                        $('#summernote').summernote({
                                height: "300px",
                                callbacks: {
                    onImageUpload: function(image) {
                                    uploadImage(image[0]);
                                },
                                onMediaDelete : function(target) {
                                deleteImage(target[0].src);
                            }
                                }
                        });

            function uploadImage(image) {
                            var data = new FormData();
                            data.append("image", image);
                            $.ajax({
                                url: "<?php echo site_url('post/upload_image')?>",
                                cache: false,
                                contentType: false,
                                processData: false,
                                data: data,
                                type: "POST",
                                success: function(url) {
                                $('#summernote').summernote("insertImage", url);
                                },
                                error: function(data) {
                                    console.log(data);
                                }
                            });
                        }

                        function deleteImage(src) {
                            $.ajax({
                                data: {src : src},
                                type: "POST",
                                url: "<?php echo site_url('post/delete_image')?>",
                                cache: false,
                                success: function(response) {
                                    console.log(response);
                                }
                            });
                        }

                });
                
        </script>
</body>
</html>

Penjelasan Kode:

Saya tidak akan menjelaskan bagian html-nya, karena saya yakin Anda telah akrab dengan kode html tersebut.

Saya akan menjelaskan bagian javascript-nya.

$('#summernote').summernote({
        height: "300px",
        callbacks: {
        onImageUpload: function(image) {
            uploadImage(image[0]);
        },
        onMediaDelete: function(target) {
            deleteImage(target[0].src);
        }
        }
});

Pada kode diatas, kita menginisialisasi summernote pada element yang memiliki id=”summernote”.

Yang terpenting Anda pahami adalah pada callbacks.

Pada callbacks terdapat dua function. Yaitu onImageUpload dan onMediaDelete.

Function onImageUpload, memanggil sebuah function yaitu function uploadImage, Sedangkan function onMediaDelete memanggil function deleteImage.

function uploadImage(image) {
    var data = new FormData();
    data.append("image", image);
    $.ajax({
        url: "<?php echo site_url('post/upload_image')?>",
        cache: false,
        contentType: false,
        processData: false,
        data: data,
        type: "POST",
        success: function(url) {
                $('#summernote').summernote("insertImage", url);
        },
        error: function(data) {
            console.log(data);
        }
    });
}

Function uploadImage berfungsi untuk mengupload image ke server melalui summernote dan menampilkannya kembali ke summernote.

Function ini memanggil function upload_image yang terdapat pada controller Post melalui Ajax Request untuk mengupload image.

function deleteImage(src) {
    $.ajax({
        data: {src : src},
        type: "POST",
        url: "<?php echo site_url('post/delete_image')?>",
        cache: false,
        success: function(response) {
            console.log(response);
        }
    });
}

Function deleteImage berfungsi untuk menghapus image yang telah diupload ke server.

Function ini memanggil function delete_image yang terdapat pada controller Post untuk menghapus image.

 

Step #7. View (post_detail_view)

Terakhir buat view “post_detail_view.php” pada folder “application/views”.

Kemudian ketikan kode berikut:

<!DOCTYPE html>
<html>
<head>
        <title><?php echo $title;?></title>
        <link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/css/bootstrap.css';?>">
</head>
<body>
        <div class="container">
                <div class="row justify-content-md-center">
                        <div class="col-md-8">
                                <h1><?php echo $title;?></h1>
                                <p><?php echo $contents;?></p>
                        </div>
                </div>
        </div>

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

View “post_detail_view” ini berfungsi untuk menampilkan data yang telah di insert ke database.

 

Step #8. Uji Coba

Untuk melakukan pengujian, buka browser Anda dan kunjungi url berikut:

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

Maka, akan tampil seperti gambar berikut:

Klik icon image untuk mengupload image ke server.

Disaat image berhasil diupload seperti diatas, maka image akan tersimpan di folder “assets/images”.

Seperti gambar berikut:

Untuk menghapus image pada summernote, klik icon “Remove Image”, maka image akan terhapus di folder “assets/images”.

Untuk menguji apakah semuanya berjalan dengan baik, silahkan input formnya dengan lengkap seperti berikut:

Kemudian klik tombol Submit.

Jika berjalan dengan baik, maka akan terlihat seperti gambar berikut:

 

Kesimpulan

Tutorial kali ini adalah tentang bagaimana mengubah upload image pada summernote dari base64 encode menjadi upload image ke folder yang terdapat pada server menggunakan Codeigniter.

Untuk mengubah base64 encode pada summernote menjadi upload image ke server, dapat dilakukan dengan AJAX Request yang di panggil malalui function callbacks pada summernote script.

Tidak hanya itu, Compress image library bawaan Codeigniter membuat semuanya sempurna.

Dengan demikian, upload image dapat menghandle image beresolusi tinggi yang diupload user.

Jadi, tunggu apalagi. Let’s Coding.!

Download Source Code