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). 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 saya 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
|
1 2 |
$autoload['libraries'] = array('database'); $autoload['helper'] = array('url'); |
- file Config.php
|
1 |
$config['base_url'] = 'http://localhost/NamaFolder_project/'; |
- file Database.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
$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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<?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 :
|
1 2 3 4 5 6 7 8 9 10 |
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”.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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.
|
1 2 3 4 5 6 7 |
function delete_image(){ $src = $this->input->post('src'); $file_name = str_replace(base_url(), '', $src); if(unlink($file_name)){ echo 'File Delete Successfully'; } } |
Saya kira cukup dalam pembahasan kali ini dan akan dilanjutkan pada artikel berikutnya, semoga bermanfaat.
terima kasih