Dua tahun yang lalu, saya mulai mengenal datatables. Datatables benar-benar mengagumkan.

Saya sendiri telah banyak mengerjakan project menggunakan datatables, karena simple, mudah, dan adanya fitur filter, show per-page, dan pagination.

Saya yakin anda sudah tidak asing lagi dengan datatables, itulah kenapa Anda membaca artikel ini.

Beberapa bulan yang lalu, saya mengerjakan project Point Of Sale (POS) menggunakan datatables dan codeigniter.

Semua berjalan baik pada awalnya, disaat data produk telah mencapai 12,000 record, masalah pun muncul. Data yang diload sangat lambat dan sering tidak merespon (not responding) pada browser.

Hal itu sangat menjengkelkan, saya yakin Anda juga pernah memiliki masalah yang sama.

Cukup bingung dengan masalah tersebut, saya hampir memutuskan untuk tidak menggunakan datatables dan beralih untuk membuat pagination bawaan codeigniter dan membuat filter (pencarian) sendiri.

Usut punya usut, saya menyadari sesuatu. Ternyata pagination bawaan codeigniter datanya di proses di sisi server (server-side processing).

Kemudian saya mulai menelusuri server-side processing dengan datatables. Akhirnya nemu juga. Memang terbukti load data 12,000 record jauh lebih cepat.

Beberapa bulan yang lalu saya telah menulis artikel tentang datatable server-side processing menggunakan codeigniter.

Akan tetapi, untuk membuat server-side processing menggunakan datatables masih harus menulis lebih banyak baris coding.

Merasa tidak puas dengan hal ini, akhirnya saya mencoba menelusuri lebih dalam lagi. Dan klimaks-nya saya menemukan sebuah library yang sangat bagus untuk datatables server-side processing yaitu ignited-datatables.

Ignited-datatables merupakan sebuah library untuk membuat datatables server-side processing tanpa perlu menuliskan kode program yang kompleks.

Ignited-datatables juga mudah untuk JOIN Table, format angka, render image, dll.

Beruntunglah anda menemukan artikel ini, karena saya akan mengupas tuntas bagaimana membuat CRUD (Create Read Update Delete) datatables server-side processing dari join table sekaligus format angka dengan framework codeigniter.

 

PERSIAPAN

Sebelum proses pembuatan, ada tahap yang tidak boleh anda lewatkan begitu saja. Yaitu tahap persiapan.

Apa saja yang perlu anda persiapkan?

Berikut listnya:

Codeiginter, jika anda belum memilikinya silahkan download di situs resminya www.codeigniter.com

Jquery, Jika anda belum memilikinya, silahkan download di situs resminya www.jquery.com

Bootstrap, bootstrap ini berfungsi untuk mempercantik tampilan. Jika anda belum memilikinya, silahkan download di situs resminya www.getbootstrap.com

Ignited-datatables, untuk mendownloadnya, silahkan download di github: https://github.com/IgnitedDatatables/Ignited-Datatables

Datatables, untuk mendownloadnya, silahkan download di official websiteya: https://datatables.net/

Bootstrap datatable, bootstrap datatable ini untuk style dari datatable. Tidak wajib, tapi penting untuk mempercantik tampilan datatable. Untuk mendownloadnya silahkan kunjungi link berikut: https://datatables.net/manual/styling/bootstrap

 

#1. Pembuatan Struktur Database dan Table

Berikutnya, yang perlu anda lakukan adalah pembuatan database dan struktur table.

Database, buat database dengan mengeksekusi query berikut:

CREATE DATABASE crud_ignited;

Pada query diatas, anda akan mendapatkan sebuah database dengan nama crud_ignited.

Table, buat dua table yaitu table kategori dan tabel barang.

Buat Tabel kategori dengan mengeksekusi query berikut:

CREATE TABLE kategori(
kategori_id INT PRIMARY KEY AUTO_INCREMENT,
kategori_nama VARCHAR(50)
)ENGINE INNODB;

Buat Tabel barang dengan mengeksekusi query berikut:

CREATE TABLE barang(
barang_kode VARCHAR(10) PRIMARY KEY,
barang_nama VARCHAR(100),
barang_harga DOUBLE,
barang_kategori_id INT,
FOREIGN KEY (barang_kategori_id) REFERENCES kategori (kategori_id) ON UPDATE CASCADE
)ENGINE INNODB;

 

#2. Installasi Codeigniter

Untuk menginstall codeigniter, silahkan extract codeigniter yang sudah di download sebelumnya ke folder www (jika menggunakan wampserver) atau htdocs (jika menggunakan XAMPP).

Kemudian rename (ganti nama) project codeigniter anda sesuai dengan project Anda. Disini saya memberi nama crud_ignited.

Setelah di extract, buat folder assets sejajar dengan folder application dan system, kemudian sertakan file bootstrap, datatables, dan jquery didalam folder assets. Sehingga terlihat struktur project kita seperti berikut:

 

Pada gambar diatas dapat dilihat, bahwa didalam folder assets terdapat folder css, fonts, images, dan js.

Didalam folder css, terdapat file bootstrap.css, dataTables.bootstrap.css, dan jquery.datatables.min.css.

Didalam folder js, terdapat file bootstrap.js, dataTables.bootstrap.js, jquery-2.1.4.min.js, dan jquery.datatables.min.js.

Sedangkan folder fonts dan images merupakan folder bawaan bootstrap.

 

#3. Konfigurasi Codeigniter

Buka application/config/autoload.php atur menjadi seperti berikut:

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

Buka application/config/config.php dan atur menjadi seperti berikut:

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

Terakhir buka application/config/database.php

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
        'dsn'   => '',
        'hostname' => 'localhost',
        'username' => 'root',
        'password' => '',
        'database' => 'crud_ignited', //sesuaikan dengan database anda!
        '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
);

Selanjutnya, Copy-kan file Datatables.php dari ignited-datatables ke folder application/libaries/.

Maka akan terlihat seperti gambar berikut:

 

 

#4. Buat model dengan nama Crud_model.php

Kemudian ketikan kode berikut:

<?php
class Crud_model extends CI_Model{

  function get_kategori(){ //ambil data kategori dari table kategori
    $hsl=$this->db->get('kategori');
    return $hsl;
  }
  function get_all_produk() { //ambil data barang dari table barang yang akan di generate ke datatable
        $this->datatables->select('barang_kode,barang_nama,barang_harga,kategori_id,kategori_nama');
        $this->datatables->from('barang');
        $this->datatables->join('kategori', 'barang_kategori_id=kategori_id');
        $this->datatables->add_column('view', '<a href="javascript:void(0);" class="edit_record btn btn-info btn-xs" data-kode="$1" data-nama="$2" data-harga="$3" data-kategori="$4">Edit</a>  <a href="javascript:void(0);" class="hapus_record btn btn-danger btn-xs" data-kode="$1">Hapus</a>','barang_kode,barang_nama,barang_harga,kategori_id,kategori_nama');
        return $this->datatables->generate();
  }
}

Pada model Crud_model terdapat dua function, yaitu function get_kategori() dan function get_all_produk().

Function get_kategori(), berfungsi untuk menampilkan data kategori ke dalam selectbox nantinya.

Function get_all_produk(), berfungsi untuk menampilkan data barang yang diambil dari hasil join antara tabel barang dan kategori.

 

#5. Buat Controller dengan nama Crud.php

Kemudian ketikan kode berikut:

<?php
class Crud extends CI_Controller{
  function __construct(){
    parent::__construct();
    $this->load->library('datatables'); //load library ignited-dataTable
    $this->load->model('crud_model'); //load model crud_model
  }
  function index(){
    $x['kategori']=$this->crud_model->get_kategori();
    $this->load->view('crud_view',$x);
  }

  function get_produk_json() { //data data produk by JSON object
    header('Content-Type: application/json');
    echo $this->crud_model->get_all_produk();
  }

  function simpan(){ //function simpan data
    $data=array(
      'barang_kode'     => $this->input->post('kode_barang'),
      'barang_nama'     => $this->input->post('nama_barang'),
      'barang_harga'    => $this->input->post('harga'),
      'barang_kategori_id' => $this->input->post('kategori')
    );
    $this->db->insert('barang', $data);
    redirect('crud');
  }

  function update(){ //function update data
    $kode=$this->input->post('kode_barang');
    $data=array(
      'barang_nama'     => $this->input->post('nama_barang'),
      'barang_harga'    => $this->input->post('harga'),
      'barang_kategori_id' => $this->input->post('kategori')
    );
    $this->db->where('barang_kode',$kode);
    $this->db->update('barang', $data);
    redirect('crud');
  }

  function delete(){ //function hapus data
    $kode=$this->input->post('kode_barang');
    $this->db->where('barang_kode',$kode);
    $this->db->delete('barang');
    redirect('crud');
  }

}

Pada controller Crud diatas terdapat lima function, yaitu function index(), function get_produk_json(), function simpan(), function update(), dan function delete().

Function index(), berfungsi untuk menampilkan sebuah dengan nama crud_view sekaligus membawa data kategori yang di simpan dalam array.

Function get_produk_json(), berfungsi untuk menampilkan data barang dari hasil join antara tabel barang dan tabel kategori, kemudian di rubah kedalam format JSON (Javascript Object Notation) Object.

Function simpan(), berfungsi untuk menyimpan data kedalam tabel barang dari form.

Function update(), berfungsi untuk mengkoreksi / update data barang dari database.

Function delete(), berfungsi untuk menghapus record (baris) pada table barang dari database.

 

#6. Buat View dengan nama crud_view.php

Kemudian ketikan kode berikut:

<html lang="id">
<head>
        <meta charset="utf-8">
        <title>Crud dengan ignited datatables pada CodeIgniter</title>
  <link href="<?php echo base_url().'assets/css/bootstrap.css'?>" rel="stylesheet" type="text/css"/>
        <link href="<?php echo base_url().'assets/css/jquery.datatables.min.css'?>" rel="stylesheet" type="text/css"/>
  <link href="<?php echo base_url().'assets/css/dataTables.bootstrap.css'?>" rel="stylesheet" type="text/css"/>
</head>
<body>
  <div class="container">
    <h2>Product List</h2>
                <button class="btn btn-success" data-toggle="modal" data-target="#myModalAdd">Add New</button>
    <table class="table table-striped" id="mytable">
      <thead>
        <tr>
          <th>Product Code</th>
          <th>Product Name</th>
          <th>Price</th>
          <th>Category</th>
          <th>Action</th>
        </tr>
      </thead>
    </table>
  </div>

        <!-- Modal Add Produk-->
          <form id="add-row-form" action="<?php echo base_url().'index.php/crud/simpan'?>" method="post">
             <div class="modal fade" id="myModalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                   <div class="modal-content">
                       <div class="modal-header">
                           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                           <h4 class="modal-title" id="myModalLabel">Add New</h4>
                       </div>
                       <div class="modal-body">
                           <div class="form-group">
                               <input type="text" name="kode_barang" class="form-control" placeholder="Kode Barang" required>
                           </div>
                                                                                 <div class="form-group">
                               <input type="text" name="nama_barang" class="form-control" placeholder="Nama Barang" required>
                           </div>
                                                                                 <div class="form-group">
                               <select name="kategori" class="form-control" placeholder="Kode Barang" required>
                                                                                                          <?php foreach ($kategori->result() as $row) :?>
                                                                                                                        <option value="<?php echo $row->kategori_id;?>"><?php echo $row->kategori_nama;?></option>
                                                                                                                <?php endforeach;?>
                                                                                                 </select>
                           </div>
                                                                                 <div class="form-group">
                               <input type="text" name="harga" class="form-control" placeholder="Harga" required>
                           </div>

                       </div>
                       <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="submit" id="add-row" class="btn btn-success">Save</button>
                       </div>
                                </div>
                </div>
             </div>
         </form>

         <!-- Modal Update Produk-->
          <form id="add-row-form" action="<?php echo base_url().'index.php/crud/update'?>" method="post">
             <div class="modal fade" id="ModalUpdate" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                   <div class="modal-content">
                       <div class="modal-header">
                           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                           <h4 class="modal-title" id="myModalLabel">Update Produk</h4>
                       </div>
                       <div class="modal-body">
                           <div class="form-group">
                               <input type="text" name="kode_barang" class="form-control" placeholder="Kode Barang" required>
                           </div>
                                                                                 <div class="form-group">
                               <input type="text" name="nama_barang" class="form-control" placeholder="Nama Barang" required>
                           </div>
                                                                                 <div class="form-group">
                               <select name="kategori" class="form-control" placeholder="Kode Barang" required>
                                                                                                          <?php foreach ($kategori->result() as $row) :?>
                                                                                                                        <option value="<?php echo $row->kategori_id;?>"><?php echo $row->kategori_nama;?></option>
                                                                                                                <?php endforeach;?>
                                                                                                 </select>
                           </div>
                                                                                 <div class="form-group">
                               <input type="text" name="harga" class="form-control" placeholder="Harga" required>
                           </div>

                       </div>
                       <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="submit" id="add-row" class="btn btn-success">Update</button>
                       </div>
                                </div>
                </div>
             </div>
         </form>

         <!-- Modal Hapus Produk-->
          <form id="add-row-form" action="<?php echo base_url().'index.php/crud/delete'?>" method="post">
             <div class="modal fade" id="ModalHapus" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                   <div class="modal-content">
                       <div class="modal-header">
                           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                           <h4 class="modal-title" id="myModalLabel">Hapus Produk</h4>
                       </div>
                       <div class="modal-body">
                               <input type="hidden" name="kode_barang" class="form-control" placeholder="Kode Barang" required>
                                                                                                 <strong>Anda yakin mau menghapus record ini?</strong>
                       </div>
                       <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="submit" id="add-row" class="btn btn-success">Hapus</button>
                       </div>
                                </div>
                </div>
             </div>
         </form>

<script src="<?php echo base_url().'assets/js/jquery-2.1.4.min.js'?>"></script>
<script src="<?php echo base_url().'assets/js/bootstrap.js'?>"></script>
<script src="<?php echo base_url().'assets/js/jquery.datatables.min.js'?>"></script>
<script src="<?php echo base_url().'assets/js/dataTables.bootstrap.js'?>"></script>

<script>
        $(document).ready(function(){
                // Setup datatables
                $.fn.dataTableExt.oApi.fnPagingInfo = function(oSettings)
      {
          return {
              "iStart": oSettings._iDisplayStart,
              "iEnd": oSettings.fnDisplayEnd(),
              "iLength": oSettings._iDisplayLength,
              "iTotal": oSettings.fnRecordsTotal(),
              "iFilteredTotal": oSettings.fnRecordsDisplay(),
              "iPage": Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength),
              "iTotalPages": Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength)
          };
      };

      var table = $("#mytable").dataTable({
          initComplete: function() {
              var api = this.api();
              $('#mytable_filter input')
                  .off('.DT')
                  .on('input.DT', function() {
                      api.search(this.value).draw();
              });
          },
              oLanguage: {
              sProcessing: "loading..."
          },
              processing: true,
              serverSide: true,
              ajax: {"url": "<?php echo base_url().'index.php/crud/get_produk_json'?>", "type": "POST"},
                        columns: [
                                                                                                {"data": "barang_kode"},
                                                                                                {"data": "barang_nama"},
                                                                                                //render harga dengan format angka
                        {"data": "barang_harga", render: $.fn.dataTable.render.number(',', '.', '')},
                        {"data": "kategori_nama"},
                        {"data": "view"}
                  ],
                        order: [[1, 'asc']],
          rowCallback: function(row, data, iDisplayIndex) {
              var info = this.fnPagingInfo();
              var page = info.iPage;
              var length = info.iLength;
              $('td:eq(0)', row).html();
          }

      });
                        // end setup datatables
                        // get Edit Records
                        $('#mytable').on('click','.edit_record',function(){
            var kode=$(this).data('kode');
                                                var nama=$(this).data('nama');
                                                var harga=$(this).data('harga');
                                                var kategori=$(this).data('kategori');
            $('#ModalUpdate').modal('show');
            $('[name="kode_barang"]').val(kode);
                                                $('[name="nama_barang"]').val(nama);
                                                $('[name="harga"]').val(harga);
                                                $('[name="kategori"]').val(kategori);
      });
                        // End Edit Records
                        // get Hapus Records
                        $('#mytable').on('click','.hapus_record',function(){
            var kode=$(this).data('kode');
            $('#ModalHapus').modal('show');
            $('[name="kode_barang"]').val(kode);
      });
                        // End Hapus Records

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

Pada view diatas dapat dilihat diantara tag script terdapat baris komentar setup datatables sampai dengan end setup datatables.

Kode tersebut berfungsi untuk menampilkan data dari json object dari function get_produk_json(), kemudian menampilkannya ke tabel dengan id=”mytable”.

Untuk lebih lengkapnya perhatikan komentar-komentar yang telah saya sertakan di baris coding.

 

#7. Testing

Anda dapat menguji apakah aplikasi crud berjalan dengan sebagaimana mestinya.

Silahkan panggil controller crud pada URL seperti url berikut:

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

jika berjalan dengan baik maka akan tampil seperti gambar berikut:

 

KESIMPULAN

Pembahasan kali ini adalah tentang bagaimana membuat aplikasi CRUD (Create Read Update Delete) dengan ignited-datatables menggunakan framework PHP codeigniter.

Ignited-datatables merupakan sebuah library yang di fungsikan untuk mempermudah pembuatan server-side processing pada datatables.

Server-side processing merupakan metode untuk mempercepat load data yang banyak dari database.

Dengan server-side processing dapat meningkatkan kualitas User Experience (UX).

Download Source