Ini adalah tutorial bagaimana membuat aplikasi CRUD (Create-Read-Update-Delete) realtime dengan Codeigniter.

Jika Anda ingin membuat aplikasi realtime dengan Codeigniter.

Maka Anda berada di tempat yang tepat.

Pada tutorial ini, saya akan menjelaskan semua yang perlu Anda ketahui untuk mebuat aplikasi realtime dengan Codeigniter.

(Step-by-Step).

Mari kita mulai.

Demo:

 

Step #1. Persiapan

Untuk membuat aplikasi CRUD realtime dengan Codeigniter, inilah yang perlu Anda persiapkan:

1. Codeigniter

2. JQuery

3. Bootstrap

4. Composer

5. Pusher Channels App

Pada tutorial ini saya menggunakan Codeigniter v3.1.x, JQuery v3.4.x, Bootstrap v4.3.x, dan Composer v1.8.6.

 

Step #2. Membuat Database dan Table

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

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

CREATE DATABASE pos_db;

Selanjutnya pembuatan table.

Pada tutorial ini, hanya dibutuhkan satu table, yaitu table “product”.

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

CREATE TABLE product(
product_id INT PRIMARY KEY AUTO_INCREMENT,
product_name VARCHAR(100),
product_price INT
)ENGINE=INNODB;

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

 

Step #3. Installasi 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) Codeigniter yang telah di extract menjadi “crud”.

Pada tutorial ini, saya menggunakan XAMPP, jadi saya extraxt pada direktori:
“C:/xampp/htdocs”.

Perhatikan gambar berikut untuk lebih jelasnya:

 

Step #4. Konfigurasi Codeigniter

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

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' => 'pos_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 #5. Installasi Composer

Composer adalah dependency manager untuk PHP. Jika Anda pernah mencoba laravel sebelumnya.

Pasti Anda sudah tidak asing lagi dengan composer.

Untuk membuat aplikasi realtime dengan Codeigniter, anda harus menginstall composer.

Composer ini berfungsi untuk mendownload semua dependency yang Anda butuhkan untuk membuat aplikasi reatime dengan Codeigniter.

Untuk mendapatkan Composer, silahkan kunjungi link berikut:

https://getcomposer.org/download/

Jika Anda menggunakan windows, silahkan download dan install Composer-Setup.exe.

Jika installasi berhasil, silahkan buka Command Prompt atau Terminal.

Kemudian ketikan perintah:

composer -v

Maka akan terlihat hasilnya seperti gambar berikut:

Pada gambar diatas, terlihat bahwa saya menggunakan composer versi 1.8.6.

 

Step #6. Membuat Pusher Channels App

Untuk membuat aplikasi realtime dengan Codeigniter, kita membutuhkan komunikasi protocol WebSockets.

Adapun Websockets untuk PHP yaitu Ratchet WebSockets.

Akan tetapi, Ratchet WebSockets harus dijalankan melalui Command Line atau Terminal.

Sehingga WebSockets tidak dapat dijalankan melalui Shared Hosting.

Solusinya adalah menggunakan Pusher Channels.

Pusher akan menghandle semua komunikasi protocol WebSockets yang Anda butuhkan.

Sehingga aplikasi realtime yang Anda bangun dapat berjalan dengan baik di Share Hosting.

Untuk membuat Pusher Channels, silahkan Sign Up (mendaftar) di pusher.com

Setelah itu login akun pusher Anda, dan klik tombol Create New App.

Maka akan tampil tampilan seperti berikut:

Ketikan nama App, pilih Cluster, Jquery, dan PHP seperti gambar diatas.

Kemudian klik tombol Create my app.

Pada gambar diatas, ada beberapa key yang perlu Anda perhatikan.

Beralih ke tab App Keys untuk melihat keys:

Saya tidak menyarankan Anda untuk menggunakan App Keys yang saya gunakan.

Anda harus membuat App Keys Anda sendiri.

Karena App Keys yang saya gunakan terbatas untuk 100 koneksi perhari.

 

Step #7. Installasi Dependency

Untuk menginstall semua dependency yang dibutuhkan, dapat dilakukan dengan mudah menggunakan composer.

Buka Command Prompt atau Terminal, kemudian masuk direktori project Anda melalui Command Prompt atau Terminal dengan perintah cd (change directory).

Seperti gambar berikut:

Kemudian ketikan perintah berikut untuk menginstall dependency yang dibutuhkan:

composer require pusher/pusher-php-server

Kemudian enter, tunggu sampai semua installasi selesai.

Seperti gambar berikut:

Setelah itu, buka folder project Anda. Maka terdapat folder “vendor” seperti gambar berikut:

Kemudian Cut (Ctrl + X) folder vendor dan pastekan (Ctrl + V) pada folder “application/views” seperti gambar berikut:

 

Step #8. Controller

Buat sebuah file Controller dengan nama Product.php pada folder “application/controllers”

Kemudian ketikan kode berikut:

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

class Product extends CI_Controller{
    function __construct(){
        parent::__construct();
        $this->load->model('Product_model','product_model');
    }

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

    function get_product(){
        $data = $this->product_model->get_product()->result();
        echo json_encode($data);
    }

    function create(){
        $product_name = $this->input->post('product_name',TRUE);
        $product_price = $this->input->post('product_price',TRUE);
        $this->product_model->insert_product($product_name,$product_price);

        require_once(APPPATH.'views/vendor/autoload.php');
        $options = array(
            'cluster' => 'ap1',
            'useTLS' => true
        );
        $pusher = new PusherPusher(
            '7f77145cfef9f51109fe', //ganti dengan App_key pusher Anda
            '5e6f8e5d545cb32c1a3c', //ganti dengan App_secret pusher Anda
            '822517', //ganti dengan App_key pusher Anda
            $options
        );

        $data['message'] = 'success';
        $pusher->trigger('my-channel', 'my-event', $data);
    }

    function update(){
        $product_id = $this->input->post('product_id',TRUE);
        $product_name = $this->input->post('product_name',TRUE);
        $product_price = $this->input->post('product_price',TRUE);
        $this->product_model->update_product($product_id,$product_name,$product_price);

        require_once(APPPATH.'views/vendor/autoload.php');
        $options = array(
            'cluster' => 'ap1',
            'useTLS' => true
        );
        $pusher = new PusherPusher(
            '7f77145cfef9f51109fe', //ganti dengan App_key pusher Anda
            '5e6f8e5d545cb32c1a3c', //ganti dengan App_secret pusher Anda
            '822517', //ganti dengan App_key pusher Anda
            $options
        );

        $data['message'] = 'success';
        $pusher->trigger('my-channel', 'my-event', $data);
    }

    function delete(){
        $product_id = $this->input->post('product_id',TRUE);
        $this->product_model->delete_product($product_id);

        require_once(APPPATH.'views/vendor/autoload.php');
        $options = array(
            'cluster' => 'ap1',
            'useTLS' => true
        );
        $pusher = new PusherPusher(
            '7f77145cfef9f51109fe', //ganti dengan App_key pusher Anda
            '5e6f8e5d545cb32c1a3c', //ganti dengan App_secret pusher Anda
            '822517', //ganti dengan App_key pusher Anda
            $options
        );

        $data['message'] = 'success';
        $pusher->trigger('my-channel', 'my-event', $data);
    }
}

Penjelasan kode:

Pada controller Product.php terdapat beberapa function yaitu: function index, function get_product, function create, function update, dan function delete.

Function index, berfungsi untuk memanggil sebuah view bernama product_view dengan perintah:

$this->load->view('product_view');

Function get_product, berfungsi untuk mengambil data product dari database, kemudian di encode dalam format JSON Object.

Sehingga dapat digunakan untuk menampilkan data ke view melalui AJAX Request.

Function create, berfungsi untuk menyimpan data ke database yang dikirimkan ke model dengan kode berikut:

$product_name = $this->input->post('product_name',TRUE);
$product_price = $this->input->post('product_price',TRUE);
$this->product_model->insert_product($product_name,$product_price);

Kemudian, untuk membuat koneksi ke pusher agar menjadi relatime dengan kode berikut:

require_once(APPPATH.'views/vendor/autoload.php');
$options = array(
        'cluster' => 'ap1',
        'useTLS' => true
);
$pusher = new PusherPusher(
        '7f77145cfef9f51109fe', //ganti dengan App_key pusher Anda
        '5e6f8e5d545cb32c1a3c', //ganti dengan App_secret pusher Anda
        '822517', //ganti dengan App_key pusher Anda
        $options
);

$data['message'] = 'success';
$pusher->trigger('my-channel', 'my-event', $data);

Function update, berfungsi untuk mengupdate data ke database yang dikirimkan ke model.

Kemudian, buat koneksi ke pusher untuk membuatnya menjadi realtime seperti function create.

Function delete, berfungsi untuk menghapus data ke database yang dikirimkan ke model.

Kemudian, buat koneksi ke pusher untuk membuatnya menjadi realtime seperti function create dan function update.

 

Step #9. Model

Buat sebuah file Model dengan nama Product_model.php pada folder “application/models”.

Kemudian ketikan kode berikut:

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

class Product_model extends CI_Model{

    function get_product(){
        $query = $this->db->get('product');
        return $query;
    }

    function insert_product($product_name,$product_price){
        $data = array(
            'product_name' => $product_name,
            'product_price' => $product_price
        );
        $this->db->insert('product', $data);
    }

    function update_product($product_id,$product_name,$product_price){
        $this->db->set('product_name', $product_name);
        $this->db->set('product_price', $product_price);
        $this->db->where('product_id', $product_id);
        $this->db->update('product');
    }
    
    function delete_product($product_id){
        $this->db->delete('product', array('product_id' => $product_id));
    }
}

Penjelasan kode:

Pada model Product_model.php terdapat beberapa function yaitu: function get_product, function insert_product, function update_product, dan function delete_product.

Function get_product, berfungsi untuk mengambil semua data dari table product di database.

Function insert_product, berfungsi untuk menginput data product ke database.

Function update_product, berfungsi untuk mengupdate data product ke database.

Function delete_product, berfungsi untuk menghapus data product ke database.

 

Step #10. View

Buat sebuah file View dengan nama product_view.php pada folder “application/views”.

Kemudian ketikan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Product</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
            <h2 class="text-center">Real Time CRUD Codeigniter</h2>
            <button type="button" class="btn btn-primary mb-3" data-toggle="modal" data-target="#ModalAdd">Add New Product</button>
                <table id="mytable" class="table table-striped">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Product Name</th>
                            <th>Price</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody class="show_product">

                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Modal Add New Product -->
    <div class="modal fade" id="ModalAdd" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Add New Product</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label for="input1">Product Name</label>
                <input type="text" name="product_name" class="form-control name" id="input1" placeholder="Product Name">
            </div>
            <div class="form-group">
                <label for="input2">Product Price</label>
                <input type="text" name="product_price" class="form-control price" id="input2" placeholder="Product Price">
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary btn-save">Save</button>
        </div>
        </div>
    </div>
    </div>

    <!-- Modal Edit Product -->
    <div class="modal fade" id="ModalEdit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Edit Product</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label for="input1">Product Name</label>
                <input type="text" name="product_name" class="form-control name_edit" id="input1" placeholder="Product Name">
            </div>
            <div class="form-group">
                <label for="input2">Product Price</label>
                <input type="text" name="product_price" class="form-control price_edit" id="input2" placeholder="Product Price">
            </div>
        </div>
        <div class="modal-footer">
            <input type="hidden" name="product_id" class="id_edit">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary btn-edit">Edit</button>
        </div>
        </div>
    </div>
    </div>

    <!-- Modal Delete Product -->
    <div class="modal fade" id="ModalDelete" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Delete Product</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <div class="alert alert-info">
                Anda yakin mau menghapus data ini?
            </div>
        </div>
        <div class="modal-footer">
            <input type="hidden" name="product_id" class="product_id">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
            <button type="button" class="btn btn-primary btn-delete">Yes</button>
        </div>
        </div>
    </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
    <script src="https://js.pusher.com/4.4/pusher.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function(){
            // CALL FUNCTION SHOW PRODUCT
            show_product();

            // Enable pusher logging - don't include this in production
            Pusher.logToConsole = true;

            var pusher = new Pusher('7f77145cfef9f51109fe', {
                cluster: 'ap1',
                forceTLS: true
            });

            var channel = pusher.subscribe('my-channel');
            channel.bind('my-event', function(data) {
                if(data.message === 'success'){
                    show_product();
                }
            });

            // FUNCTION SHOW PRODUCT
            function show_product(){
                $.ajax({
                    url   : '<?php echo site_url("product/get_product");?>',
                    type  : 'GET',
                    async : true,
                    dataType : 'json',
                    success : function(data){
                        var html = '';
                        var count = 1;
                        var i;
                        for(i=0; i<data.length; i++){
                            html += '<tr>'+
                                    '<td>'+ count++ +'</td>'+
                                    '<td>'+ data[i].product_name +'</td>'+
                                    '<td>'+ data[i].product_price +'</td>'+
                                    '<td>'+
                                        '<a href="javascript:void(0);" class="btn btn-sm btn-info item_edit" data-id="'+ data[i].product_id +'" data-name="'+ data[i].product_name +'" data-price="'+ data[i].product_price +'">Edit</a>'+
                                        '<a href="javascript:void(0);" class="btn btn-sm btn-danger item_delete" data-id="'+ data[i].product_id +'">Delete</a>'+
                                    '</td>'+
                                    '</tr>';
                        }
                        $('.show_product').html(html);
                    }

                });
            } 

            // CREATE NEW PRODUCT
            $('.btn-save').on('click',function(){
                var product_name = $('.name').val();
                var product_price = $('.price').val();
                $.ajax({
                    url    : '<?php echo site_url("product/create");?>',
                    method : 'POST',
                    data   : {product_name: product_name, product_price: product_price},
                    success: function(){
                        $('#ModalAdd').modal('hide');
                        $('.name').val("");
                        $('.price').val("");
                    }
                });
            });
            // END CREATE PRODUCT

            // UPDATE PRODUCT
            $('#mytable').on('click','.item_edit',function(){
                var product_id = $(this).data('id');
                var product_name = $(this).data('name');
                var product_price = $(this).data('price');
                $('#ModalEdit').modal('show');
                $('.id_edit').val(product_id);
                $('.name_edit').val(product_name);
                $('.price_edit').val(product_price);
            });

            $('.btn-edit').on('click',function(){
                var product_id = $('.id_edit').val();
                var product_name = $('.name_edit').val();
                var product_price = $('.price_edit').val();
                $.ajax({
                    url    : '<?php echo site_url("product/update");?>',
                    method : 'POST',
                    data   : {product_id: product_id, product_name: product_name, product_price: product_price},
                    success: function(){
                        $('#ModalEdit').modal('hide');
                        $('.id_edit').val("");
                        $('.name_edit').val("");
                        $('.price_edit').val("");
                    }
                });
            });
            // END EDIT PRODUCT

            // DELETE PRODUCT
            $('#mytable').on('click','.item_delete',function(){
                var product_id = $(this).data('id');
                $('#ModalDelete').modal('show');
                $('.product_id').val(product_id);
            });

            $('.btn-delete').on('click',function(){
                var product_id = $('.product_id').val();
                $.ajax({
                    url    : '<?php echo site_url("product/delete");?>',
                    method : 'POST',
                    data   : {product_id: product_id},
                    success: function(){
                        $('#ModalDelete').modal('hide');
                        $('.product_id').val("");
                    }
                });
            });
            // END DELETE PRODUCT

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

Penjelasan kode:

Pada view product_view.php, saya menggunakan Bootstrap dan jQuery.

Saya menggunakan Bootstrap dan jQuery CDN (Content Delivery Network). Artinya file Bootstrap dan jQuery yang saya gunakan langsung di load melalui Internet.

Jika Anda mendownload Bootstrap dan jQuery seblumnya, Anda dapat memanggilnya seperti biasanya.

Pada view product_view.php, ada beberapa fungsi yang perlu Anda perhatikan dengan seksama:

#1. Menampilkan data product

function show_product(){
        $.ajax({
                url   : '<?php echo site_url("product/get_product");?>',
                type  : 'GET',
                async : true,
                dataType : 'json',
                success : function(data){
                        var html = '';
                        var count = 1;
                        var i;
                        for(i=0; i<data.length; i++){
                                html += '<tr>'+
                                                '<td>'+ count++ +'</td>'+
                                                '<td>'+ data[i].product_name +'</td>'+
                                                '<td>'+ data[i].product_price +'</td>'+
                                                '<td>'+
                                                        '<a href="javascript:void(0);" class="btn btn-sm btn-info item_edit" data-id="'+ data[i].product_id +'" data-name="'+ data[i].product_name +'" data-price="'+ data[i].product_price +'">Edit</a>'+
                                                        '<a href="javascript:void(0);" class="btn btn-sm btn-danger item_delete" data-id="'+ data[i].product_id +'">Delete</a>'+
                                                '</td>'+
                                                '</tr>';
                        }
                        $('.show_product').html(html);
                }

        });
}

Saya membuat sebuah function bernama show_product, function ini berfungsi untuk menampilkan data product ke dalam table yang memiliki class=”show_product”.

Function ini, saya panggil saat page selesai di render dengan fungsi:

show_product();

#2. Create New Product

$('.btn-save').on('click',function(){
        var product_name = $('.name').val();
        var product_price = $('.price').val();
        $.ajax({
                url    : '<?php echo site_url("product/create");?>',
                method : 'POST',
                data   : {product_name: product_name, product_price: product_price},
                success: function(){
                        $('#ModalAdd').modal('hide');
                        $('.name').val("");
                        $('.price').val("");
                }
        });
});

Kode diatas berfungsi untuk mengirimkan data ke function create yang terdapat pada Controller Product.php dengan method “POST” menggunakan fungsi AJAX.

#3. Update Product

$('#mytable').on('click','.item_edit',function(){
        var product_id = $(this).data('id');
        var product_name = $(this).data('name');
        var product_price = $(this).data('price');
        $('#ModalEdit').modal('show');
        $('.id_edit').val(product_id);
        $('.name_edit').val(product_name);
        $('.price_edit').val(product_price);
});

$('.btn-edit').on('click',function(){
        var product_id = $('.id_edit').val();
        var product_name = $('.name_edit').val();
        var product_price = $('.price_edit').val();
        $.ajax({
                url    : '<?php echo site_url("product/update");?>',
                method : 'POST',
                data   : {product_id: product_id, product_name: product_name, product_price: product_price},
                success: function(){
                        $('#ModalEdit').modal('hide');
                        $('.id_edit').val("");
                        $('.name_edit').val("");
                        $('.price_edit').val("");
                }
        });
});

Kode diatas berfungsi untuk mengirimkan data ke function update yang terdapat pada Controller Product.php dengan method “POST” menggunakan fungsi AJAX.

#4. Delete Product

$('#mytable').on('click','.item_delete',function(){
        var product_id = $(this).data('id');
        $('#ModalDelete').modal('show');
        $('.product_id').val(product_id);
});

$('.btn-delete').on('click',function(){
        var product_id = $('.product_id').val();
        $.ajax({
                url    : '<?php echo site_url("product/delete");?>',
                method : 'POST',
                data   : {product_id: product_id},
                success: function(){
                        $('#ModalDelete').modal('hide');
                        $('.product_id').val("");
                }
        });
});

Kode diatas berfungsi untuk mengirimkan data ke function delete yang terdapat pada Controller Product.php dengan method “POST” menggunakan fungsi AJAX.

#5. Pusher

Setiap kali proses Insert, update, dan delete yang kita lakukan di Controller Product.php, kita mengembalikan nilai message “success”.

Pada saat message “success”, kita ingin pusher membuat koneksi ke websockets dengan perintah berikut:

var pusher = new Pusher('7f77145cfef9f51109fe', {  //ganti dengan app_key pusher Anda
        cluster: 'ap1',  //ganti dengan cluster pusher Anda.
        forceTLS: true
});

var channel = pusher.subscribe('my-channel');
channel.bind('my-event', function(data) {
        if(data.message === 'success'){
                show_product(); //panggil function show_product saat message success
        }
}); 

Step #11. Testing

Untuk melakukan pengujian. Silahkan buka 2 browser yang berbeda, kemudian kunjungi URL berikut:

http://localhost/crud/index.php/product

Lakukan penambahan product, update product, dan delete product.

 

Kesimpulan:

Tutorial kali ini adalah tentang bagaimana membuat aplikasi web CRUD realtime dengan Codeigniter dan WebSockets.

Agar WebSockets berjalan dengan baik di share hosting, dibutuhkan pusher untuk menghandle semua komunikasi WebSockets yang dibutuhkan.

Sekarang Anda telah mengetahui bagaimana membuat aplikasi realtime dengan Codeigniter dan WebSockets.

Jadi, tunggu apalagi. Lets Coding!

Download source code