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 :
- Laptop (klo ga da pake HP aja kaya saya)
- XAMPP (sebagai Apache Service & Database)
- Framework Codeigniter 2.2.6 (updatenya)
- Komponen Bootstrap V3.3.7
- Komponen Datatables
- Komponen jQuery
- 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 OnRewriteBase /datatables/RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteRule ^(.*)$ 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: OphuzDarkIsnpironErrorDocument 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 :
<?phpdefined('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 formatecho 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 :
<?phpclass 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 orderablevar $column_search = array('KODE','DESKRIPSI','KETERANGAN'); //set column field database for datatable searchablevar $order = array('KODE' => 'asc'); // default orderfunction __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
No comments:
Post a Comment