Cara Menggunakan Summernote di Codeigniter

Pada artikel ini, Anda akan belajar tentang cara menggunakan summernote di codeigniter. Summernote merupakan library JavaScript yang akan membantu kita membuat WYSIWYG editors online.

Summernote memiliki banyak sekali fitur diantaranya sebagai berikut.

• Paste gambar dari clipboard
• Simpan gambar langsung di konten field menggunakan pengkodean base64. Jadi Anda tidak perlu mengimplementasikan penanganan gambar sama sekali.
• Simple UI
• Mendukung integrasi Bootstrap 3, 4, dan 5

Langkah 1: Download Codeigniter

Pada langkah pertama kita perlu mendownload codeigniter 3. Atau jika Anda sudah punya project pada codeigniter 3 dan ingin menambahkan summernote pada project Anda, maka tidak perlu mendownload lagi. Jika Anda belum mempunyai file codeigniter 3 maka Anda bisa download melalui link ini.

Cara yang akan kita gunakan nantinya dapat dimplementasikan pada codeigniter 4 dan 3. Jadi jangan khawatir, silahkan pilih salah satu codeigniter yang akan ditambahkan summernote.

Langkah 2: Configurasi Awal

Selanjutnya, kita akan melakukan configurasi awal. Ada beberapa file yang nantinya akan kita ubah.

Untuk yang pertama buka file application/config/config.php dan ubah bagian $config[‘base_url’] menjadi link website Anda.

Selanjutnya buka file application/config/autoload.php dan tambahkan bagian libraries dan url seperti berikut.

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

Kemudian pada bagian application/config/database.php ubah username, password, dan database sesuai dengan account dbms Anda.

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

Terakhir, kita ubah default_controller pada bagaian application/config/routes.php menjadi berikut.

$route['default_controller'] = 'post';

Langkah 3: Membuat Database

Selanjutnya kita akan membuat database MySQL. Disini kita beri nama database menjadi blogspost_db. Lalu jalankan query berikut untuk membuat table article

CREATE TABLE `article` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(200) DEFAULT NULL,
  `contents` text DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=latin1

Langkah 4: Membuat Controller

Pada langkah ini kita akan membuat Controller baru dengan nama Post di application/controllers/Post.php dan copy/paste code berikut pada file controller yang baru Anda buat.

<?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);
		redirect('post')
	}

	//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';
		}
	}
}

Keterangan:

• Pada bagian __construct() kita akan memanggil model Post dan libray Upload. Model Post digunakan untuk menangani insert data ke dalam database. Sedangkan libray Upload untuk menangani gambar yang diupload oleh user.
• index() ini nantinya akan menampilkan form summernote.
• save() akan digunakan untuk menyimpan data yang telah diinput oleh user.
• upload_image() digunakan untuk menyimpan serta meng-compress gambar yang diupload melalui summernote.
• delete_image() digunakan untuk menghapus gambar.

Jangan lupa untuk membuat folder assets/images dibagian root codeigniter.

Langkah 5: Membuat Model

Disini kita akan membuat model di application/models/Post_model.php dan copy/paste code berikut pada file model barusan.

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

class Post_model extends CI_Model
{

	function insert_post($title, $contents)
	{
		$data = [
			'title'    => $title,
			'contents' => $contents
		];
		$this->db->insert('article', $data);
	}
}

Pada bagian model kita hanya membuat fungsi untuk menyimpan data saja.

Langkah 6: Membuat View

Langkah yang terakhir yaitu kita akan membuat tampilan di application/views/post_view.php dan copy/paster code berikut ini ke dalam file view Anda.

<!DOCTYPE html>
<html>

<head>
	<title>Post Article</title>
	<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.css" rel="stylesheet">
</head>

<body>
	<div class="container mt-5">
		<div class="row justify-content-md-center">
			<div class="col-md-8">
				<form action="<?= site_url('post/save'); ?>" method="post">
					<div class="form-group">
						<label>Title</label>
						<input type="text" name="title" class="form-control" placeholder="Title" value="<?= $post['title'] ?>" required>
					</div>
					<div class="form-group">
						<label>Contents</label>
						<textarea id="summernote" name="contents"><?= $post['contents'] ?></textarea>
					</div>
					<button type="submit" class="btn btn-primary">Submit</button>
				</form>
			</div>
		</div>
	</div>

	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.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: "<?= 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: "<?= site_url('post/delete_image') ?>",
					cache: false,
					success: function(response) {
						console.log(response);
					}
				});
			}

		});
	</script>
</body>

</html>

Sekarang Anda dapat membuka URL http://namadomain.com/ dan nantinya akan muncul editor summenote yang dapat upload image juga.