Halo Semua sahabat codekop.com, kali ini saya ingin membagi pengalaman cara membuat DataTables Serverside dengan CodeIgniter 4, dari kalian yang suka ngulik-ngulik website, khususnya pada backend development, kalian pasti cukup tau dengan DataTables, Ya Datatables merupakan library untuk menampilkan data dengan mengubah bentuk table, ke dalam fitur-fitur seperti search, filter, pagination, show perpage, sort by dan sebagainya.
Membuat tabel dengan library dataTables secara biasa tentu sudah sering kalian lakukan. Namun berbeda caranya jika dilakukan secara ServerSide dan pada framework codeigniter.
Mengapa Harus Serverside ?
Karena jika data kalian masih sedikit yang harus load, maka biasanya gak ada masalah, tetapi jika data kalian yang sudah banyak, misal sudah ribuan, ratusan ribu atau jutaan, sering sekali mengalami kendala seperti tidak terload nya data, atau not responding pada browser karena banyak loop data yang di sajikan dalam 1 halaman. Hal ini membebankan server karena meload data terlalu lama, dan biasanya kadang data tersebut tidak terproses dengan baik.
Jadi solusi terbaik adalah datatables serverside processing.
Dengan melibatkan semua pemrosesan pada sisi server akan membuat sisi client menjadi ringan dan cepat. hal ini disebabkan data tidak diload secara keseluruhan dari database. Melainkan dilimit oleh sisi server sesuai dengan request yang dilkukan clientside. Dengan begitu, berapun jumlah record yang akan ditampilkan tidak ada lagi masalah terlihat, mengikuti request yang dilakukan clientside.
BACA JUGA : Tutorial Cara membuat Datatables Serverside dengan CodeIgniter 3
Nah langsung saya kita praktekan :
Pertama-tama anda harus punya dulu file CodeIgniter 4, langsung aja download codeigniter di www.codeigniter.com dan pilih versi 4.
1. Membuat Database
langkah ini anda buat databasenya saya beri namanya dbnya tutorial_serverside atau copykan saya code dibawah ini simpan dengan nama dengan akhiran .sql lalu buat database pada phpmyadmin dan import :
-- phpMyAdmin SQL Dump -- version 5.2.0 -- https://www.phpmyadmin.net/ -- -- Host: localhost -- Generation Time: Aug 17, 2022 at 06:39 AM -- Server version: 10.4.24-MariaDB -- PHP Version: 8.1.6 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; START TRANSACTION; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Database: `tutorial_serverside` -- -- -------------------------------------------------------- -- -- Table structure for table `artikel` -- CREATE TABLE `artikel` ( `id_artikel` int(11) NOT NULL, `judul` varchar(255) NOT NULL, `kategori` varchar(255) NOT NULL, `penulis` varchar(255) NOT NULL, `tgl_posting` datetime NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; -- -- Dumping data for table `artikel` -- INSERT INTO `artikel` (`id_artikel`, `judul`, `kategori`, `penulis`, `tgl_posting`) VALUES (1, 'Pengenalan HTML', 'HTML', 'Joe Doe', '2020-01-11 02:06:12'), (2, 'Pengenalan CSS', 'CSS', 'Joe Doe', '2020-01-11 00:00:00'), (3, 'Pengenalan PHP', 'PHP', 'Joe Doe', '2020-01-11 02:06:12'), (4, 'Pengenalan JavaScript', 'JS', 'Joe Doe', '2020-01-11 00:00:00'), (5, 'Pengenalan MySQL', 'mysql', 'Joe Doe', '2020-01-11 00:00:00'), (6, 'Advanced PHP', 'PHP', 'Joe Doe', '2020-01-11 00:00:00'), (7, 'Pengenalan Vue JS', 'JS', 'Joe Doe', '2020-01-11 00:00:00'), (8, 'Framework PHP', 'PHP', 'Joe Doe', '2020-01-11 00:00:00'), (9, 'Basic CodeIgniter', 'PHP', 'Joe Doe', '2020-01-11 00:00:00'); -- -------------------------------------------------------- -- -- Table structure for table `kategori` -- CREATE TABLE `kategori` ( `id_kategori` int(11) NOT NULL, `nama_kategori` varchar(255) NOT NULL, `tgl_buat` datetime NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; -- -- Dumping data for table `kategori` -- INSERT INTO `kategori` (`id_kategori`, `nama_kategori`, `tgl_buat`) VALUES (1, 'Tutorial', '2020-01-12 00:00:00'), (2, 'Teknologi', '2020-01-12 00:00:00'), (3, 'Database', '2020-01-12 00:00:00'), (4, 'Pemrograman', '2020-01-12 00:00:00'), (5, 'JavaScript', '2020-01-12 00:00:00'), (6, 'Framework', '2020-01-12 00:00:00'); -- -------------------------------------------------------- -- -- Table structure for table `subkat` -- CREATE TABLE `subkat` ( `id_subkat` int(11) NOT NULL, `subkat` varchar(255) NOT NULL, `id_kategori` int(11) NOT NULL, `tgl_add` datetime NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; -- -- Dumping data for table `subkat` -- INSERT INTO `subkat` (`id_subkat`, `subkat`, `id_kategori`, `tgl_add`) VALUES (1, 'HTML', 1, '2020-01-12 00:00:00'), (2, 'CSS', 1, '2020-01-12 00:00:00'), (3, 'PHP', 1, '2020-01-12 00:00:00'), (4, 'JavaScript', 1, '2020-01-12 00:00:00'), (5, 'Gojek', 2, '2020-01-12 00:00:00'), (6, 'Grab', 2, '2020-01-12 00:00:00'), (7, 'MySQL', 3, '2020-01-12 00:00:00'), (8, 'MongoDB', 3, '2020-01-12 00:00:00'), (9, 'PHP', 4, '2020-01-12 00:00:00'), (10, 'Golang', 4, '2020-01-12 00:00:00'), (11, 'Node JS', 4, '2020-01-12 00:00:00'), (12, 'Phyton', 4, '2020-01-12 00:00:00'), (13, 'Ruby', 4, '2020-01-12 00:00:00'), (14, 'ASP', 4, '2020-01-12 00:00:00'), (15, 'Vue JS', 5, '2020-01-12 00:00:00'), (16, 'React JS', 5, '2020-01-12 00:00:00'), (17, 'Angular JS', 5, '2020-01-12 00:00:00'), (18, 'jQuery', 5, '2020-01-12 00:00:00'), (19, 'CodeIgniter', 6, '2020-01-12 00:00:00'), (20, 'Laravel', 6, '2020-01-12 00:00:00'), (21, 'Symfony', 6, '2020-01-12 00:00:00'), (22, 'Ruby On Rails', 6, '2020-01-12 00:00:00'); -- -- Indexes for dumped tables -- -- -- Indexes for table `artikel` -- ALTER TABLE `artikel` ADD PRIMARY KEY (`id_artikel`); -- -- Indexes for table `kategori` -- ALTER TABLE `kategori` ADD PRIMARY KEY (`id_kategori`); -- -- Indexes for table `subkat` -- ALTER TABLE `subkat` ADD PRIMARY KEY (`id_subkat`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `artikel` -- ALTER TABLE `artikel` MODIFY `id_artikel` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=10; -- -- AUTO_INCREMENT for table `kategori` -- ALTER TABLE `kategori` MODIFY `id_kategori` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7; -- -- AUTO_INCREMENT for table `subkat` -- ALTER TABLE `subkat` MODIFY `id_subkat` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=23; COMMIT; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
2. Install CodeIgniter 4
Langkah berikut nya install CodeIgniternya ke htdocs jika menggunakan XAMPP lalu rename folder tersebut dengan nama serverside-ci4
3. Settings Database
Langkah ini kita setting database pada codeigniter4, pada file app/Config/Database.php :
'hostname' => 'localhost', 'username' => 'root', 'password' => '', 'database' => 'tutorial_serverside',
4. Membuat Library Datatables :
Setelah kita mensetting databasenya, kita akan membuat file library untuk function databasenya, buat file DataTables.php lalu kita simpan file tersebut dalam folder app/Libraries/DataTables.php, beserta code berikut ini :
<?php /** * * @link https://www.codekop.com/ * @version 1.0.2 * @copyright Codekop Datatables Library (c) 2022 * * File : Datatables.php * author : Fauzan Falah * E-mail : fauzancodekop@gmail.com / fauzan1892@codekop.com * * **/ namespace App\Libraries; class DataTables { public function __construct() { $this->db = \Config\Database::connect(); } public function BuildDatatables($query, $where, $isWhere, $cari) { $search = htmlspecialchars($_POST['search']['value']); // get data limit per page $limit = preg_replace("/[^a-zA-Z0-9.]/", '', "{$_POST['length']}"); // get data start $start = preg_replace("/[^a-zA-Z0-9.]/", '', "{$_POST['start']}"); $cari = implode(" LIKE '%".$search."%' OR ", $cari)." LIKE '%".$search."%'"; $order_field = $_POST['order'][0]['column']; $order_ascdesc = $_POST['order'][0]['dir']; $order = " ORDER BY ".$_POST['columns'][$order_field]['data']." ".$order_ascdesc; // where is not null if ($where != null) { $setWhere = array(); foreach ($where as $key => $value) { $setWhere[] = $key."='".$value."'"; } $fwhere = implode(' AND ', $setWhere); if (!empty($isWhere)) { $sql = $this->db->query($query." WHERE $isWhere AND ".$fwhere); } else { $sql = $this->db->query($query." WHERE ".$fwhere); } $sql_count = count($sql->getResultArray()); if (!empty($isWhere)) { $sql_data = $this->db->query($query." WHERE $isWhere AND ".$fwhere." AND (".$cari.")".$order." LIMIT ".$limit." OFFSET ".$start); } else { $sql_data = $this->db->query($query." WHERE ".$fwhere." AND (".$cari.")".$order." LIMIT ".$limit." OFFSET ".$start); } if (isset($search)) { if (!empty($isWhere)) { $sql_cari = $this->db->query($query." WHERE $isWhere AND ".$fwhere." AND (".$cari.")"); } else { $sql_cari = $this->db->query($query." WHERE ".$fwhere." AND (".$cari.")"); } $sql_filter_count = count($sql_cari->getResultArray()); } else { if (!empty($isWhere)) { $sql_filter = $this->db->query($query." WHERE $isWhere AND ".$fwhere); } else { $sql_filter = $this->db->query($query." WHERE ".$fwhere); } $sql_filter_count = count($sql_filter->getResultArray()); } $data = $sql_data->getResultArray(); } else { if (!empty($isWhere)) { $sql = $this->db->query($query." WHERE $isWhere"); } else { $sql = $this->db->query($query); } $sql_count = count($sql->getResultArray()); if (!empty($isWhere)) { $sql_data = $this->db->query($query." WHERE $isWhere AND (".$cari.")".$order." LIMIT ".$limit." OFFSET ".$start); } else { $sql_data = $this->db->query($query." WHERE (".$cari.")".$order." LIMIT ".$limit." OFFSET ".$start); } if (isset($search)) { if (!empty($isWhere)) { $sql_cari = $this->db->query($query." WHERE $isWhere AND (".$cari.")"); } else { $sql_cari = $this->db->query($query." WHERE (".$cari.")"); } $sql_filter_count = count($sql_cari->getResultArray()); } else { if (!empty($isWhere)) { $sql_filter = $this->db->query($query." WHERE $isWhere"); } else { $sql_filter = $this->db->query($query); } $sql_filter_count = count($sql_filter->getResultArray()); } $data = $sql_data->getResultArray(); } $callback = array( 'draw' => $_POST['draw'], 'recordsTotal' => $sql_count, 'recordsFiltered'=> $sql_filter_count, 'data'=> $data ); // $csrf_name = csrf_token(); // $csrf_hash = csrf_hash(); // $callback[$csrf_name] = $csrf_hash; echo json_encode($callback); // Convert array $callback ke json } }
Keterangan : untuk database ini kita menggunakan sql query secara langsung tanpa query builder bawaan codeigniternya.
5. Membuat Routes
Pada langkah ini kita di peruntukan untuk membuat routes manual, pada CodeIgniter v4.2.4, fungsi auto routes seperti versi 3 telah disabled pengembang, sebenarnya bisa di aktifkan kembali seperti versi 4 sebelumnya, tetapi saya lebih memilih untuk membuat routes manual seperti ini, tambahkan script dibawah ini pada file app/Config/Routes.php :
$routes->get('sample', 'Sample::index'); $routes->post('sample/data', 'Sample::data_sample');
6. Membuat Controller
pada langkah ini kita coba membuat controller untuk menjalankan fungsi-fungsi yang di gunakan untuk membuat table, buat controller pada file app/Controllers/Sample.php, lalu kita buat script controllernya :
<?php namespace App\Controllers; use App\Libraries\DataTables; class Sample extends BaseController { public function __construct() { $this->DataTables = new DataTables(); } public function index() { return view('table_view'); } public function data_sample() { // sql query $query = "SELECT kategori.nama_kategori AS nama_kategori, subkat.* FROM subkat JOIN kategori ON subkat.id_kategori = kategori.id_kategori"; // $where = array('nama_kategori' => 'Tutorial'); $where = null; // jika memakai IS NULL pada where sql $isWhere = null; // $isWhere = 'artikel.deleted_at IS NULL'; $search = array('nama_kategori','subkat','tgl_add'); echo $this->DataTables->BuildDatatables($query, $where, $isWhere, $search); } }
Keterangan :
Function data_sample() :
- $query : menampilkan data dengan membuat query sql nya pada paramater ,
- $search : untuk parameter kolom apa saja yang bisa di cari pada search datatables dengan bentuk array
- $where : adalah untuk kondisi data yang ingin ditampilkan dengan bentuk array jika tidak digunakan hanya tinggal di null bagian variabel $where
- $isWhere : digunakan pada kasus table yang ingin memakai parameter where IS NULL, atau query where manual
7. Membuat views
langkah ini kita akan membuat views untuk html tablenya dan script javascript untuk datatable nya, disini saya buat datatablesnya dengan Bootstrap 4, dan buat file pada app/Views/table_view.php, dan berikut scriptnya :
<!doctype html> <html lang="en"> <head> <title>Datatables Server Side Tutorial</title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --><!-- BOOTSTRAP 4--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css"> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <!-- DATATABLES BS 4--> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css" /> <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.7/css/responsive.bootstrap4.min.css" /> <!-- jQuery --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-expand-sm navbar-dark bg-info"> <div class="container"> <a class="navbar-brand" href="#">Datatables CodeIgniter</a> </div> </nav> <div class="container mt-5 mb-5"> <div class="card"> <div class="card-header"> <h5> Data Menu</h5> </div> <div class="card-body"> <table class="table table-striped table-bordered" id="table-artikel-query"> <thead> <tr> <th> No. </th> <th> Kategori </th> <th> Sub Kategori </th> <th> Aksi </th> </tr> </thead> <tbody></tbody> </table> </div> </div> <script> var tabel = null; $(document).ready(function() { tabel = $('#table-artikel-query').DataTable({ "processing": true, "responsive": true, "serverSide": true, "ordering": true, // Set true agar bisa di sorting "order": [ [0, 'asc'] ], // Default sortingnya berdasarkan kolom / field ke 0 (paling pertama) "ajax": { "url": "<?= site_url('sample/data');?>",// URL file untuk proses select datanya "type": "POST", // csrf datatable // "data": function(d) { // d.<?= csrf_token() ?> = hash; // } }, "deferRender": true, "aLengthMenu": [ [5, 10, 50], [5, 10, 50] ], // Combobox Limit "columns": [ {"data": 'id_kategori',"sortable": false, render: function (data, type, row, meta) { return meta.row + meta.settings._iDisplayStart + 1; } }, { "data": "nama_kategori" }, // Tampilkan kolom nama_kategori pada table kategori { "data": "subkat" }, // Tampilkan kolom subkat pada table sub kategori { "data": "id_kategori", // Tampilkan kolomid_kategori pada table kategori "render": function( data, type, row, meta ) { return '<a href="show/'+data+'">Show</a>'; } }, ], }); // csrf datatable // tabel.on('xhr.dt', function(e, settings, json, xhr) { // hash = json.<?= csrf_token() ?>; // $('#csrf_name_addusers').val(hash); // CSRF hash for add form // console.log(hash); // }); }); </script> </div> <hr/> <center> Dibuat dengan <i class="fa fa-heart" style="color:red;"></i> Oleh <a href="https://www.codekop.com/" target="_blank">Codekop</a> © <?= date('Y');?> </center> <br/> <!-- DATATABLES BS 4--> <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script> <script src="https://cdn.datatables.net/responsive/2.2.7/js/dataTables.responsive.min.js"></script> <script src="https://cdn.datatables.net/responsive/2.2.7/js/responsive.bootstrap4.min.js"></script> </body> </html>
8. Jalankan Web
untuk menjalankan web codeigniter 4 cukup buka terminal pada vs code anda lalu ketik
php spark serve
Lalu menuju URL : http://localhost:8080/sample
Selesai, sekian dulu tutorial kali ini, semoga bermanfaat terima kasih dan salam Coding !
* Temukan berbagai postingan dan produk yang kamu cari