Membuat Tabel di Codeigniter dengan Ajax, jQuery, Bootstrap dan Datatables Responsive (Datatables Part 1)

Salam semangat buat rekan-rekan sekalian, dalam kesempatan ini saya akan berbagi pengetahuan  yang tidak begitu penting sih sebenarnya, Tapi sebagai permulaan (Pemanasan) tidak ada salahnya .
Oke langsung aja hal yang perlu kita siapakan diataranya :

1. Laptop (klo ga da pake HP aja kaya saya)
2. XAMPP (sebagai Apache Service & Database)
3. Framework Codeigniter 2.2.6 (updatenya)
4. Komponen Bootstrap V3.3.7
5. Komponen Datatables
6. Komponen jQuery
7. Editor Script (saya menggunakan Notepad++)

Oke, Kalo udah ready semua file pendukunya (udah diunduh) mari kita buat berScript ria mari kita lakukan :

Tahap 1 

untuk lagkah awalnya mari kita jalankan service XAMPP untuk Apache dan MySQL-nya, jika belum install XAMPP maka kamu harus install terlebih dahulu, baru kemudian jalankan service-nya, dan buatlah database.

Disni nama database yang digunakan terserah anda, namun saya membuat database dengan nama database  db_datatables, kemudian buatlah tabel dengan ketentuan seperti dibawah ini sebagai contoh saja :

CREATE TABLE IF NOT EXISTS `i_datatables` (
`INDEX` int(11) NOT NULL,
`KODE` varchar(15) NOT NULL,
`DESKRIPSI` varchar(50) NOT NULL,
`KETERANGAN` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1
AUTO_INCREMENT=1 ;

INSERT INTO `datatables`.`i_datatables` 
(`INDEX`, `KODE`, `DESKRIPSI`, `KETERANGAN`)
VALUES (NULL, 'BRG001','Sabun Colek', '100gr'),
(NULL, 'BRG002', 'Pasta Gigi', '50gr');

Tahap 2

Jika database telah dibuat maka langkah selanjutnya ekstrak framework codeigniter yang sebelumnya saya sebutkan diatas untuk di download, ektrak dan berilah nama folder hasil ekstrakan tadi dengan nama yang anda sukai, disini saya menggunakan nama datatables untuk mempermudah saja, kemudian ekstra juga file pendukung seperti jQuery, Bootstrap, dan Datatables yang sebelumnya telah diunduh, kemudian copykan folder-folder pendukung tadi ke dalam folder assets, folder asset ini kamu harus membuatnya terlebih dahulu, baru kemudian copy file pendukung tadi ke dalam folder assets, dan berikut susunan foldernya :

Datatables

|-application

|-assets

            |-jQuery

            |-Bootstrap

|-Datatables

|-system

Kemudian kita konfigurasi Frameworknya Codeigniter :

Setting Config : Buka file config.php (Datatables /application/config/config.php), kemudian cari dan ubah baris dengan ketentuan berikut :

$config['base_url'] = 'http://'.$_SERVER['HTTP_HOST'].'/datatables/';
$config['index_page'] = '';

Catatan : untuk konfigurasi yang saya gunakan ini harus disertakan dengan file  .htaccess, untuk membantu : berikut isi file .htaccess nya :

<IfModule mod_rewrite.c>

  RewriteEngine On

  RewriteBase /datatables/

  RewriteCond %{REQUEST_FILENAME} !-f

  RewriteCond %{REQUEST_FILENAME} !-d

  RewriteRule ^(.*)$ index.php?/$1 [QSA,L]

</IfModule>

<IfModule !mod_rewrite.c>

  # If we don't have mod_rewrite installed, all 404's

  # can be sent to index.php, and everything works as normal.

  # Submitted by: OphuzDarkIsnpiron

  ErrorDocument 404 /index.php

</IfModule>

Dan letakan file ini pada induk susunan folder (application, assets, system, .htaccess)

Setting database : Buka file database.php (Datatables /application/config/database.php), kemudian isikan konfigurasi sesuai dengan MySQLnya

'hostname' => 'localhost',

            'username' => 'root',

            'password' => '*******',

            'database' => 'db_datatables',

Setting routes: Buka file database.php (Datatables /application/config/ routes.php), kemudian isikan konfigurasi seperti berikut :

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

Setting autoload: Buka file database.php (Datatables /application/config/ autoload.php), kemudian isikan konfigurasi seperti berikut :

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

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

Nah, jika sudah mengatur konfigurasi nya mari kita buat untuk file MODEL, VIEW, dan CONTROLLER-nya.

Tahap 3

Di tahap 3 ini kita akan membuat 3 file, untuk file yang pertama kita buat dengan nama view_datatables.php yang kemudian kita simpan pada folder View (Datatables /application/view/view_datatables.php). berikut isi filenya :

<html>

<head>

<link rel="stylesheet" href="<?php echo base_url('assets/bootstrap/css/bootstrap.min.css')?>" />

<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/datatables/media/css/dataTables.bootstrap.min.css')?>">     

<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/datatables/extensions/Responsive/css/responsive.bootstrap.min.css')?>">

</head>

<body>

<div class="container">

<table id="tbl_contoh" class="table table-striped table-bordered" cellspacing="0" width="100%">

                <thead>

                                <tr>

                                                <th>#</th>

                                                <th>INDEX</th>

                                                <th>KODE</th>

                                                <th>DESKRIPSI</th>

                                                <th>KETERANGAN</th>

                                </tr>

                </thead>

                <tbody>

                </tbody>

</table>

</div>

<script src="<?php echo base_url('assets/jQuery/jquery-3.1.1.min.js')?>"></script>      

<script src="<?php echo base_url('assets/bootstrap/js/bootstrap.min.js')?>"></script>

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

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

<script src="<?php echo base_url('assets/datatables/extensions/Responsive/js/dataTables.responsive.min.js')?>"></script>

<script src="<?php echo base_url('assets/datatables/extensions/Responsive/js/responsive.bootstrap.min.js')?>"></script>

<script type="text/javascript">

$(document).ready(function(){

                var table;

                var table = $("#tbl_contoh").DataTable({

                                "dom": '<"top">frt<"bottom"ip><"clear">',

                                "processing": true, //Feature control the processing indicator.

                                "serverSide": true, //Feature control DataTables' server-side processing mode.

                                "order": [], //Initial no order.

                                responsive: true, //,

                                "ajax": {

                                                "url": "<?php echo site_url('datatables /daftar_barang')?>",

                                                "type": "POST"

                                }

                });

});

</script>

</body>

</html>

Berikutnya kita membuat file controllernya dengan nama Datatables.php lalu simpan ke folder controller (Datatables /application/controller/Datatables.php). dan ini isi filenya :

<?php

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

class Datatables extends CI_Controller {

                public function __construct() {

                parent::__construct();

                                $this->load->helper('url'); 

                                $this->load->model('datatables_model'); 

    }

                public function index()

                {

                                $data['title'] = "Datatables";

                                $this->load->view('view_datatables',$data);

                }

                public function daftar_barang()

    {

        $list = $this->datatables_model->get_datatables();

        $data = array();

        $no = $_POST['start'];

        foreach ($list as $dtBarang) {

            $no++;

            $row = array();

            $row[] = $no;

                                                $row[] = $dtBarang->INDEX;

            $row[] = $dtBarang->KODE;

                                                $row[] = $dtBarang->DESKRIPSI;

                                                $row[] = $dtBarang->KETERANGAN;

                                               

            $data[] = $row;

        }

        $output = array(

                        "draw" => $_POST['draw'],

                        "recordsTotal" => $this->datatables_model->count_all(),

                        "recordsFiltered" => $this->datatables_model->count_filtered(),

                        "data" => $data,

                );

        //output to json format

        echo json_encode($output);

    }

}

File yang ketiga adalah file modelnya, buata file dengan nama datatables_model.php dan simpan ke dalam folder model (Datatables /application/model/datatables_model.php). dan ini isi filenya :

<?php

class Datatables_model extends CI_Model {

                var $table                                                            = 'i_datatables';

                var $column_order = array(null,'INDEX','KODE','DESKRIPSI','KETERANGAN',null); //set column field database for datatable orderable

    var $column_search = array('KODE','DESKRIPSI','KETERANGAN'); //set column field database for datatable searchable

    var $order = array('KODE' => 'asc'); // default order

    function __construct() {

        parent::__construct();

                                $this->load->database();

    }

                /**/

               

               

                private function _get_datatables_query()

    {

                                $this->db->select('*'); 

                                $this->db->from('i_datatables');                              

                               

        $i = 0;

        foreach ($this->column_search as $item) // loop column

        {

            if($_POST['search']['value']) // if datatable send POST for search

            {

                

                if($i===0) // first loop

                {

                    $this->db->group_start(); // open bracket. query Where with OR clause better with bracket. because maybe can combine with other WHERE with AND.

                    $this->db->like($item, $_POST['search']['value']);

                }

                else

                {

                    $this->db->or_like($item, $_POST['search']['value']);

                }

                if(count($this->column_search) - 1 == $i) //last loop

                    $this->db->group_end(); //close bracket

            }

            $i++;

        }

        

        if(isset($_POST['order'])) // here order processing

        {

            $this->db->order_by($this->column_order[$_POST['order']['0']['column']], $_POST['order']['0']['dir']);

        }

        else if(isset($this->order))

        {

            $order = $this->order;

            $this->db->order_by(key($order), $order[key($order)]);

        }

    }

    function get_datatables()

    {

        $this->_get_datatables_query();

        if($_POST['length'] != -1)

        $this->db->limit($_POST['length'], $_POST['start']);

        $query = $this->db->get();

        return $query->result();

    }

    function count_filtered()

    {

        $this->_get_datatables_query();

        $query = $this->db->get();

        return $query->num_rows();

    }

    public function count_all()

    {

        $this->db->from($this->table);

        return $this->db->count_all_results();

    }

}

Nah, ketiga file ini lah yang akan berperan..., Oke setelah semuanya telah siap dan kita jalankan dibrowser dan ketikan . (localhost/datatables). Dan tunggu Part 2 nya