Cara Join 2 Table pada Server-side Datatables Codeigniter 4

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

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.

<?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?

CI4 Datatables Server Side

“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.

CI4 Datatables Server Side Fix

Baik cukup sekian untuk Artikel kali ini, Semoga Bermanfaat ya. Kita lanjut lagi pada artikel selanjutnya sobat koding. Terima Kasih.

Komentar