Melanjutkan artikel sebelumnya tentang Cara Memasang Datatables Server-Side Processing pada CodeIgniter 4, kali ini saya akan lanjutkan bagaimana cara agar menampilkan table join pada server-side datatable codeigniter 4 ini.
Persiapan
Karena ini adalah tutorial lanjutan, maka sobat koding disarankan untuk mengikuti tutorial sebelumnya disini ya. Jika sudah, bisa kita lanjut.
Membuat Tabel Baru
Agar lebih mudah dipahami, kali ini kita akan menggunakan 2 tabel baru yang nantinya akan saling berhubungan. Silahkan dibuat dengan cara import kode berikut.
Tabel Jurusan
CREATE TABLE `jurusan` ( `id_jurusan` int(11) NOT NULL, `nama_jurusan` varchar(30) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; INSERT INTO `jurusan` (`id_jurusan`, `nama_jurusan`) VALUES (1, 'Sistem Informasi Akuntansi'), (2, 'Teknik Informatika'), (3, 'Broadcasting'), (4, 'Perhotelan'); ALTER TABLE `jurusan` ADD PRIMARY KEY (`id_jurusan`); ALTER TABLE `jurusan` MODIFY `id_jurusan` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;COMMIT;
Tabel Kelas
CREATE TABLE `kelas` ( `id_kelas` int(11) NOT NULL, `nama_kelas` varchar(30) NOT NULL, `id_jurusan` int(11) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; INSERT INTO `kelas` (`id_kelas`, `nama_kelas`, `id_jurusan`) VALUES (1, '12.1A.11', 1), (2, '12.1B.11', 1), (3, '12.1C.11', 1), (4, '12.1D.11', 1), (5, '12.2A.11', 1), (6, '12.2B.11', 1), (7, '12.2C.11', 1), (8, '12.2D.11', 1), (9, '12.3A.11', 1), (10, '12.3B.11', 1), (11, '12.3C.11', 1), (12, '12.3D.11', 1), (13, '12.1A.12', 2), (14, '12.1B.12', 2), (15, '12.1C.12', 2), (16, '12.1D.12', 2), (17, '12.2A.12', 2), (18, '12.2B.12', 2), (19, '12.2C.12', 2), (20, '12.2D.12', 2), (21, '12.3A.12', 2), (22, '12.3B.12', 2), (23, '12.3C.12', 2), (24, '12.3D.12', 2), (25, '12.1A.13', 3), (26, '12.1B.13', 3), (27, '12.1C.13', 3), (28, '12.1D.13', 3), (29, '12.2A.13', 3), (30, '12.2B.13', 3), (31, '12.2C.13', 3), (32, '12.2D.13', 3), (33, '12.3A.13', 3), (34, '12.3B.13', 3), (35, '12.3C.13', 3), (36, '12.3D.13', 3), (37, '12.1A.14', 4), (38, '12.1B.14', 4), (39, '12.1C.14', 4), (40, '12.1D.14', 4), (41, '12.2A.14', 4), (42, '12.2B.14', 4), (43, '12.2C.14', 4), (44, '12.2D.14', 4), (45, '12.3A.14', 4), (46, '12.3B.14', 4), (47, '12.3C.14', 4), (48, '12.3D.14', 4); ALTER TABLE `kelas` ADD PRIMARY KEY (`id_kelas`); ALTER TABLE `kelas` MODIFY `id_kelas` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=49;COMMIT;
Membuat Controller
Kita akan buat controller baru didalam folder app/Controllers/ dengan nama kelas.php. Silahkan diketik dulu aja ya hehe.
<?php namespace App\Controllers; use Irsyadulibad\DataTables\DataTables; class Kelas extends BaseController { public function json() { return DataTables::use('kelas') ->make(true); } public function index() { return view('kelas-list'); } } ?>
Membuat View
Selanjutnya kita buat juga viewnya untuk menampilkan datanya dalam bentuk tabel. Saya beri nama kelas-list.php. Ingat ya untuk buat view ada didalam folder app/Views/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Datatables Server-side</title> <link rel="stylesheet" href="<?=base_url();?>/plugin/datatables.min.css"> </head> <body> <table id="kelas" class="display" style="width:100%"> <thead> <tr> <th>No</th> <th>Nama Kelas</th> <th>Jurusan</th> <th>Aksi</th> </tr> </thead> </table> <script src="<?=base_url();?>/plugin/datatables.min.js"></script> <script type="text/javascript"> $('#kelas').DataTable({ processing: true, serverSide: true, ajax:{ url: '<?=base_url()?>/kelas/json' }, columns: [ {data: 'id_kelas'}, {data: 'nama_kelas'}, {data: 'id_jurusan'}, {data: 'id_kelas'} ], columnDefs: [{ "targets": 3, "render": function(data, type, row, meta) { return `<a href="#${row.id_kelas}" onclick="alert('Edit data id=${row.id_kelas}')"><button>Edit</button></a> | <a href="#${row.id_kelas}" onclick="alert('Delete data id=${row.id_kelas}')"><button>Hapus</button></a>`; } }] }); </script> </body> </html>
Bagaimana hasilnya?
"Bentarr.... lah kok nama jurusannya jadi angka min?"
Hehe, sabar dulu guys, jadi kita hanya perlu 1-2 step lagi untuk menampilkan nama jurusannya, jadi belum selesai sampai disini ya. Mari kita lanjutkan.
Finishing
Buka kembali controller Kelas.php. Tambahkan baris kode berikut pada function json().
public function json() { return DataTables::use('kelas') ->select('id_kelas, nama_kelas, id_jurusan, jurusan.nama_jurusan as jurusan') ->join('jurusan', 'id_jurusan', 'left') ->make(true); }
<script type="text/javascript"> $('#kelas').DataTable({ processing: true, serverSide: true, ajax:{ url: '<?=base_url()?>/kelas/json' }, columns: [ {data: 'id_kelas'}, {data: 'nama_kelas'}, {data: 'jurusan'}, {data: 'id_kelas'} ], columnDefs: [{ "targets": 3, "render": function(data, type, row, meta) { return `<a href="#${row.id_kelas}" onclick="alert('Edit data id=${row.id_kelas}')"><button>Edit</button></a> | <a href="#${row.id_kelas}" onclick="alert('Delete data id=${row.id_kelas}')"><button>Hapus</button></a>`; } }] }); </script>