Sederhana.co.id Semua Serba Sederhana
Halo Sobat Sederhana, kali ini kita akan membahas tentang cara sederhana untuk menggunakan Server Side Datatables pada aplikasi CodeIgniter. Datatables adalah sebuah plugin yang sangat berguna untuk membuat tabel interaktif dengan fitur-fitur seperti sorting, searching, dan pagination. Namun, jika kita memiliki data yang sangat banyak, maka menggunakan datatables biasa bisa menjadi sangat lambat dan memakan banyak resource. Oleh karena itu, diperlukan teknik server-side processing untuk membuat datatables bekerja lebih cepat.
Persiapan
Sebelum kita mulai, pastikan bahwa kamu sudah memiliki instalasi CodeIgniter yang lengkap dan sudah familiar dengan cara membuat controller, model, dan view. Selain itu, kita juga akan menggunakan library Datatables untuk CodeIgniter, sehingga pastikan kamu sudah mendownload dan menginstalnya.
Langkah 1 – Membuat Controller
Pertama-tama, kita perlu membuat sebuah controller yang akan mengambil data dari database dan melemparkannya ke view. Berikut adalah contoh kode untuk controller:
| File | Contents |
|---|---|
| application/controllers/Datatables.php | <?phpdefined(‘BASEPATH’) OR exit(‘No direct script access allowed’);class Datatables extends CI_Controller {public function __construct(){parent::__construct();$this->load->model(‘datatables_model’);}public function index(){$this->load->view(‘datatables’);}public function ajax_list(){$list = $this->datatables_model->get_datatables();$data = array();$no = $_POST[‘start’];foreach ($list as $dt) {$no++;$row = array();$row[] = $no;$row[] = $dt->name;$row[] = $dt->email;$row[] = $dt->phone;$data[] = $row;}$output = array(“draw” => $_POST[‘draw’],”recordsTotal” => $this->datatables_model->count_all(),”recordsFiltered” => $this->datatables_model->count_filtered(),”data” => $data,);echo json_encode($output);}} |
Jangan lupa untuk mengganti nama controller dan model dengan nama yang kamu gunakan untuk proyekmu.
Langkah 2 – Membuat Model
Selanjutnya, kita perlu membuat sebuah model yang akan melakukan query ke database dan me-return data dalam bentuk array. Berikut adalah contoh kode untuk model:
| File | Contents |
|---|---|
| application/models/Datatables_model.php | <?phpdefined(‘BASEPATH’) OR exit(‘No direct script access allowed’);class Datatables_model extends CI_Model {var $table = ‘customers’;var $column_order = array(‘name’, ‘email’, ‘phone’, null);var $column_search = array(‘name’, ‘email’, ‘phone’);var $order = array(‘id’ => ‘asc’);public function __construct(){parent::__construct();$this->load->database();}private function _get_datatables_query(){$this->db->from($this->table);$i = 0;foreach ($this->column_search as $item) {if ($_POST[‘search’][‘value’]) {if ($i === 0) {$this->db->group_start();$this->db->like($item, $_POST[‘search’][‘value’]);} else {$this->db->or_like($item, $_POST[‘search’][‘value’]);}if (count($this->column_search) – 1 == $i)$this->db->group_end();}$i++;}if (isset($_POST[‘order’])) {$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();}} |
Samakan nama tabel dan kolom dengan yang kamu gunakan di database.
Langkah 3 – Membuat View
Terakhir, kita perlu membuat sebuah view yang akan menampilkan tabel yang di-generate oleh plugin Datatables. Berikut adalah contoh kode untuk view:
| File | Contents |
|---|---|
| application/views/datatables.php | <!DOCTYPE html><html><head><title>Server Side Datatables</title><link href=”<?php echo base_url(‘assets/datatables/css/dataTables.bootstrap.css’); ?>” rel=”stylesheet”><script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script><script src=”<?php echo base_url(‘assets/datatables/js/jquery.dataTables.js’); ?>”></script><script src=”<?php echo base_url(‘assets/datatables/js/dataTables.bootstrap.js’); ?>”></script></head><body><div class=”container”><h1>Server Side Datatables</h1><hr><table id=”myTable” class=”table table-striped table-bordered”><thead><tr><th>No</th><th>Name</th><th>Email</th><th>Phone</th></tr></thead></table></div><script type=”text/javascript”>var table;$(document).ready(function() {table = $(‘#myTable’).DataTable({“processing”: true,”serverSide”: true,”ajax”: {“url”: “<?php echo site_url(‘datatables/ajax_list’); ?>>”,”type”: “POST”},”columnDefs”: [{“targets”: [ -1 ],”orderable”: false,},],”language”: {“sProcessing”: “Sedang memproses…”,”sLengthMenu”: “Tampilkan _MENU_ data”,”sZeroRecords”: “Tidak ditemukan data yang sesuai”,”sInfo”: “Menampilkan _START_ sampai _END_ dari _TOTAL_ data”,”sInfoEmpty”: “Menampilkan 0 sampai 0 dari 0 data”,”sInfoFiltered”: “(disaring dari _MAX_ total data)”,”sInfoPostFix”: “”,”sSearch”: “Cari:”,”sUrl”: “”,”oPaginate”: {“sFirst”: “Pertama”,”sPrevious”: “Sebelumnya”,”sNext”: “Selanjutnya”,”sLast”: “Terakhir”}}});});</script></body></html> |
Selanjutnya, kamu bisa menyesuaikan tampilan tabel sesuai kebutuhanmu. Pastikan juga kamu sudah menambahkan asset untuk Datatables ke folder assets-mu.
FAQ (Frequently Asked Questions)
1. Apa itu Server Side Datatables?
Server Side Datatables adalah teknik untuk membuat tabel interaktif dengan plugin Datatables pada aplikasi web yang data-datanya sangat banyak, sehingga memerlukan proses yang lebih cepat dan lebih ringan.
2. Apa keuntungan menggunakan Server Side Datatables?
Dengan menggunakan Server Side Datatables, kinerja aplikasi webmu akan menjadi lebih cepat dan lebih efisien karena datamu tidak di-load semua sekaligus melainkan hanya potongan-potongan ketika dibutuhkan.
3. Apa kelemahan menggunakan Server Side Datatables?
Kelemahan menggunakan Server Side Datatables adalah proses setup-nya yang sedikit lebih rumit dan memerlukan penulisan kode yang lebih banyak.
4. Apakah Server Side Datatables cocok untuk semua jenis aplikasi web?
Tidak. Jika aplikasi webmu hanya memiliki sedikit data atau data-datanya tidak memerlukan pengolahan yang cukup kompleks, maka tidak perlu menggunakan Server Side Datatables.
5. Apakah plugin Datatables tersedia untuk bahasa pemrograman selain PHP?
Ya. Plugin Datatables tersedia untuk banyak bahasa pemrograman seperti Java, Ruby, Python, dan lain-lain.
Penutup
Itulah cara sederhana untuk menggunakan Server Side Datatables pada aplikasi CodeIgniter. Dengan teknik ini, datamu akan di-load secara efisien dan kinerja aplikasi webmu akan menjadi lebih baik. Semoga bermanfaat dan sampai jumpa di artikel menarik lainnya!