Kursus Codeigniter Private Online | Menggunakan Summernote

Summernote merupakan sebuah library Javascript yang dapat membantu dalam membuat editor seperti CKEDITOR. Dalam summernote sendiri merupakan editor WYSIWYG (What You See Is What You Get), penasaran tidak materi ini dapat Anda pelajari di Kursus Codeigniter Private Online. Jadi WYSIWYG adalah sebagai aplikasi yang memberikan output atau tampilan sama seperti yang terlihat.

Summernote sendiri dengan UI sederhana sehingga sangat mudah dipakai, selain mengedit text bisa digunakan untuk mengupload gambar. Karena summernote ini merupakan text editor dengan pengkodean base64. Baiklah dalam kasus kali ini saya akan menggunakan Summernote untuk mengupload gambar yang nantinya agar tersimpan dalam suatu folder. Bagaimana cara penggunaan summernote pada codeigniter?

Langkah Pertama

Sahabat persiapakan terlebih dahulu yaitu file :

Codeigniter
Bootstrap
JQuery
Summernote

Pada artikel ini Kursus Codeigniter Private Online menggunakan Summernote yang bisa sahabat download disini. Dan buat folder baru pada project kalian yang berisi file bootstrap, jquery, dan summernote ,sahabat silahkan perhatikan rule folder yang akan dibuat berikut tampilannya:

Langkah Kedua

Sahabat jangan lupa untuk konfigurasi pada Codeigniter seperti berikut:

file Autoload.php

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

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

file Config.php

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

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

file Database.php

$active_group = 'default';
$query_builder = TRUE;
 
$db['default'] = array(
    'dsn'   => '',
    'hostname' => 'localhost',
    'username' => 'root', // username default
    'password' => '', // password default
    'database' => 'post', // sesuai database yg dibuat
    '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
);

$active_group = 'default';

$query_builder = TRUE;

$db['default'] = array(

'dsn' => '',

'hostname' => 'localhost',

'username' => 'root', // username default

'password' => '', // password default

'database' => 'post', // sesuai database yg dibuat

'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

);

Langkah Ketiga

Sahabat buat file Controller seperti code dibawah ini:

<?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['description'];
        $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';
        }
    }
}

<?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['description'];

$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';

}

Jika sudah langsung saja disimpan agar tidak lupa. Dan selanjutnya saya akan menjelaskan code yang ada di controller :

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(){

$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);

}

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

 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(){

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'];

}

Pada function upload_image berfungsi untuk mengupload image dari summernote yang di kirim melalu iAJAX Request. Image yang diupload akan tersimpan di folder “assets/images” yang sebelumnya telah di buat.

Selanjutnya ada fungsi delete_image berfungsi untuk menghapus image yang telah diupload melalui summernote seperti code dibawah ini.

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(){

$src = $this->input->post('src');

$file_name = str_replace(base_url(), '', $src);

if(unlink($file_name)){

echo 'File Delete Successfully';

}

Kursus privat Codeigniter Online kira cukup dalam pembahasan kali ini dan akan dilanjutkan pada artikel berikutnya, semoga bermanfaat.

Mau belajar Codeigniter bersama Dumet School Gratis? Mau Coba Kelas Gratis? Daftarkan diri anda untuk mendapatkan kelas gratis hubungi kami di 0819-9366-6688 atau via email ke info@dumetschool.com

Cara Menggunakan Summernote Pada Codeigniter

Langkah Pertama

Langkah Kedua

Langkah Ketiga

Facebook DUMET School

Konsultasi Gratis

Categories