Blog
Tutorial Menggunakan Datatables Serverside Pada Codeigniter
Datatables adalah salah satu plugin jquery yang digunakan untuk menampilkan data dalam bentuk grid, selain menampilkan data, library ini juga akan otomatis menampilkan fitur lain yang sering digunakan seperti pencarian data, sorting data dan paging untuk menampilkan data dengan jumlah tertentu pada setiap halaman. sedangkan datatables serverside adalah sebuah konsep yang menginjek data json dalam dokument HTML sehingga proses menampilkan data menjadi lebih cepat.
Tutorial Cara Menggunakan Datatables ServerSide Pada Codeigniter
selain menggunakan class ssp.class.php yang merupakan bawaan datatatables untuk menggenerate data json yang akan ditampilkan pada konsep datatables serverside, sebenarnya ada cara yang lebih praktis yaitu menggunakan library bernama Ignited-Datatables yang ditulis oleh om Vincent Bambico, library Ignited-Datatables dibuat khusus untuk mengintegrasikan datatables serverside dengan framework codeigniter.
Membuat Database, Tabel Dan Insert Data Dummy
Sebelum masuk ke tahap ini, pastikanlah bahwa anda sudah selesai melakukan konfigurasi dasar dan konfigurasi database, langkah selanjutnya yang akan kita lakukan adalah membuat sebuah tabel yang akan kita gunakan untuk menyimpan data nantinya, silahkan buat sebuah tabel karyawan dengan struktur tabel seperti berikut :
atau jika anda ingin cepat, saya juga menyediakan Query SQL untuk membat struktur tabel seperti di atas, silahkan copy script ini dan jalankan untuk meng eksekusinya :
CREATE TABLE `karyawan` ( `id_karyawan` int(11) NOT NULL, `nama_lengkap` varchar(50) NOT NULL, `email` varchar(50) NOT NULL, `no_hp` varchar(13) NOT NULL, `foto` text NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; ALTER TABLE `karyawan` ADD PRIMARY KEY (`id_karyawan`);
Langkah selanjutnya kita akan menginput 1000 record ke tabel karyawan, dari pada input satu persatu lebih baik kita buat script yang akan menginsert 1000 data secara otomatis, silahkan buat sebuah file baru dengan nama Karyawan.php di dalam folder controller, lalu tulis lah script berikut :
<?php
Class karyawan extends CI_Controller{
function insert_dumy(){
// jumlah data yang akan di insert
$jumlah_data = 1000;
for ($i=1;$i<=$jumlah_data;$i++){
$data = array(
"nama_lengkap" => "Karyawan Ke-".$i,
"email" => "[email protected]",
"no_hp" => '089699935552',
"foto" => "foto-karyawan-$i.jpg");
$this->db->insert('karyawan',$data);
}
echo $i.' Data Berhasil Di Insert';
}
}
?>
selanjutnya kita akan memanggil fungsi tersebut, silahkan buka web browser dan masukan http://localhost/pos/index.php/karyawan/insert_dumy pada address bar browser untuk mengjalankan fungsi di atas, jika berhasil maka akan muncul informasi seperti dibawah, kemudian silahkan chek data pada tabel karyawan.
Cara Menggunakan Library Ignited-Datatables
Langkah selanjutnya adalah mengdownload library Ignited-Datatables, extrack file Ignited-Datatables-master.zip lalu pindahkan file Datatables.php ke folder library yang ada dibawah folder application, kemudian selanjutnya silahkan buat function baru dengan nama json dan silahkan tulis script berikut :
function json(){
$this->load->library('datatables');
$this->datatables->select('*');
$this->datatables->from('karyawan');
return print_r($this->datatables->generate());
}
sekarang waktunya melakukan pengujian apakah libray ini sudah bekerja dengan baik atau belum, cara nya silahkan akses http://localhost/pos/index.php/karyawan/json pada web browser, jika semua tahapan yang anda lakukan sudah benar maka akan muncul tampilan seperti ini :
Membuat View Untuk Menampilkan Data
Sebelum memuat view untuk menampilkan data nya, kita akan melakukan sedikit modifikasi dengan menambahkan method baru dengan nama index pada controller karyawan, method ini yang nantinya akan bertugas memanggil view nantinya, silahkan buka controller Karyawan dan tambahkan method ini :
function index(){
$this->load->view('pegawai');
}
Selanjutnya pada tahap ini kita akan membuat view untuk menampilkan data pegawai, dalam view ini anntinya kita akan menggunakan beberapa library dari external, dalam hal ini saya menggunakan CDN, jadi pastikan anda mempunya koneksi internet untuk melakukan pengujian nantinya, sekarang silahkan buat sebuah view dengan nama karyawan.php dan tulis script berikut :
<html>
<head>
<title>Belajaphp.net - Codeigniter Datatable</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h3>DATA KARYAWAN</h3>
<table id="table" class="display" cellspacing="0" width="100%">
<thead>
<tr><th>FOTO</th><th>NAMA</th><th>EMAIL</th><th>NO HP</th></tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
var save_method; //for save method string
var table;
$(document).ready(function() {
//datatables
table = $('#table').DataTable({
"processing": true, //Feature control the processing indicator.
"serverSide": true, //Feature control DataTables' server-side processing mode.
"order": [], //Initial no order.
// Load data for the table's content from an Ajax source
"ajax": {
"url": '<?php echo site_url('karyawan/json'); ?>',
"type": "POST"
},
//Set column definition initialisation properties.
"columns": [
{"data": "foto",width:170},
{"data": "nama_lengkap",width:100},
{"data": "email",width:100},
{"data": "no_hp",width:100}
],
});
});
</script>
</body>
</html>
sekarang silahkan masukan http://localhost/pos/karyawan pada address web browser anda, jika semua langkah yang anda lakukan sudah benar maka akan muncul tampilan seperti ini :
Menampilkan Gambar Dan Menabahkan Link
Proses untuk menampilkan data sebenarnya sudah selesai sampai disini, tapi mungkin anda penasaran bagaimana caranya kalau data yang ingin ditampilkan berupa gambar atau link, pada konsep Datatables Serverside baik menggunakan codeigniter atau PHP native, bagian yang perlu kita modifikasi adalah controller nya bukan di view nya, sekarang silahkan modifikasi method json menjadi seperti ini :
function json(){
$this->load->library('datatables');
$this->datatables->add_column('foto', '<img src="http://www.rutlandherald.com/wp-content/uploads/2017/03/default-user.png" width=20>', 'foto');
$this->datatables->select('nama_lengkap,email,no_hp');
$this->datatables->add_column('action', anchor('karyawan/edit/.$1','Edit',array('class'=>'btn btn-danger btn-sm')), 'id_pegawai');
$this->datatables->from('karyawan');
return print_r($this->datatables->generate());
}
seperti yang anda lihat, karna untuk field foto kita akan memberi perlakuan khusus, dimana data yang akan kita tampilkan nantinya adalah dalam bentuk gambar maka kita perlu memisahkan field foto dengan menggunakan method add_column, anda bisa menemukan informasi lengkap tentang method ini pada dokumentasi Ignited-Datatables. begitu juga untuk membuat link, kita menambahkan colum baru den membuat sebuah link untuk ditampilkan.
setelah semuanya selesai silahkan simpan, lalu kita akan melakukan modifikasi pada view nya, kita akan menambahkan kolom baru dengan nama ACTION pada tabel dan script JS untuk column untuk menampilkan kolom edit tadi, sekarang script viewnya jadi seperti ini :
<html>
<head>
<title>Belajaphp.net - Codeigniter Datatable</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h3>DATA KARYAWAN</h3>
<table id="table" class="display" cellspacing="0" width="100%">
<thead>
<tr><th>FOTO</th><th>NAMA</th><th>EMAIL</th><th>NO HP</th><th>ACTION</th></tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
var save_method; //for save method string
var table;
$(document).ready(function() {
//datatables
table = $('#table').DataTable({
"processing": true, //Feature control the processing indicator.
"serverSide": true, //Feature control DataTables' server-side processing mode.
"order": [], //Initial no order.
// Load data for the table's content from an Ajax source
"ajax": {
"url": '<?php echo site_url('karyawan/json'); ?>',
"type": "POST"
},
//Set column definition initialisation properties.
"columns": [
{"data": "foto",width:170},
{"data": "nama_lengkap",width:100},
{"data": "email",width:100},
{"data": "no_hp",width:100},
{"data": "action",width:100}
],
});
});
</script>
</body>
</html>
pastikan anda sudah melakukan save untuk menyimpan semua perubahan, lalu silahkan refresh pada halaman tadi, jika semua proses yang anda lakukan benar maka akan tampil seperti ini :
Kesimpulan
Dengan adanya library Ignited-Datatables membuat proses integrasi framework codeigniter dan datatables serverside processing menjadi lebih mudah, kelebihan lain dari konsep ini adalah proses menampilkan data menjadi lebih cepat, anda boleh melakukan perbandingan kecepatan menampilkan data dengan cara biasa dan cara ini. semoga artikel tutorial menampilkan data dengan codeigniter datatables serverside ini menambah wawasan ilmu anda.
