Cara Menggunakan Summernote Pada Codeigniter Part2

Melanjutkan dari artikel sebelumnya Cara Menggunakan Summernote Pada Codeigniter. Dalam pembahasan sebelumnya kita sudah membuat sebuah database, file controller dan selanjutnya kita akan membuat file model serta view. Baiklah langsung saja ikutin step by step cara membuatnya:

Langkah Pertama

Buat file model lalu beri nama â€œPost_model.phpâ€ bisa ikuti code berikut ini

<?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,
            'description' => $contents
        );
        $this->db->insert('tb_post',$data);
    }
 
    function get_article_by_id($id){
        $query = $this->db->get_where('tb_post', array('id' =>  $id));
        return $query;
    }
}

<?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,

'description' => $contents

);

$this->db->insert('tb_post',$data);

}

function get_article_by_id($id){

$query = $this->db->get_where('tb_post', array('id' => $id));

return $query;

}

Pada code Model diatas terdapat fungsi insert_post digunakan untuk melakukan perintah insert data ke database dan get_article_by_id berfungsi untuk mengambil data berdasarkan “id” yang nanti akan ditampilkan ke view.

Langkah Kedua

Langkah selanjutnya membuat view atau tampilan, baiklah dalam kasus ini kita kan membuat 2 view diantaranya untuk melakukan insert beri nama â€œpost_viewâ€Â data kemudian untuk menampilkan detail data beri nama â€œpost_detail_viewâ€

oke lanjut buat file post_view dengan mengetikkan code berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Cara Menggunakan Summernote Pada CodeIgniter</title>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/css/bootstrap.min.css';?>">
    <link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/dist/summernote-bs4.css';?>">
</head>
<body>
    <div class="container bg-light">
        <div class="row justify-content-md-center mt-5 py-5">
            <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/dist/summernote-bs4.js';?>"></script>
    <script type="text/javascript">
// menginisialisasi summernote dengan element id="summernote"
        $(document).ready(function(){
            $('#summernote').summernote({
                height: "300px",
                callbacks: {
                    onImageUpload: function(image) {
                        uploadImage(image[0]);
                    },
                    onMediaDelete : function(target) {
                        deleteImage(target[0].src);
                    }
                }
            });
 // untuk melakukan upload dan menampilkan kembali 
            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>

<!DOCTYPE html>

<html>

<head>

<title>Cara Menggunakan Summernote Pada CodeIgniter</title>

</head>

<body>

<form action="<?php echo site_url('post/save');?>" method="post">

<label>Title</label>

</div>

<label>Contents</label>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

// menginisialisasi summernote dengan element id="summernote"

$(document).ready(function(){

$('#summernote').summernote({

height: "300px",

callbacks: {

onImageUpload: function(image) {

uploadImage(image[0]);

onMediaDelete : function(target) {

deleteImage(target[0].src);

}

});

// untuk melakukan upload dan menampilkan kembali

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>

kemudian membuat file post_detail_view ketikkan seperti code dibawah ini :

<!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>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</body>

</html>

Apabila sudah membuat semua file lalu simpan, kemudian jalankan pada browser maka akan mendapatkan tampilan seperti berikut ini :

Saya kira cukup pembahasan artikel tentang Cara Menggunakan Summernote Pada Codeigniter. semoga bermanfaat dan terima kasih

Cara Menggunakan Summernote Pada Codeigniter Part2

Langkah Pertama

Langkah Kedua

Facebook DUMET School

Konsultasi Gratis

Categories