Cara Join 2 Table pada Server-side Datatables Codeigniter 4
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
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.
<?phpnamespace 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'); }}?>Jangan lupa di save terus coba buka di browser, halaman http://localhost:8080/NAMA_FOLDER_PROJECT/kelas/json. Kalau sudah muncul datanya berarti aman, bisa lanjut ke langkah berikutnya.
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="https://www.alamkoding.web.id/2021/11/<?=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);}Kemudian ganti juga file View kelas-list.php pada baris kode berikut.
<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>Sekarang coba buka browser lagi, lalu refresh halamannya, apakah sudah muncul nama jurusannya? Kalau sudah hasilnya akan terlihat seperti ini.
Baik cukup sekian untuk Artikel kali ini, Semoga Bermanfaat ya. Kita lanjut lagi pada artikel selanjutnya sobat koding. Terima Kasih.
Komentar
Posting Komentar