Belajar Pemrograman Framework Codeigniter 4

Artikel seputar pemrgoraman framework Codeigniter 4

CodeIgnter 4 : Implementasi dan Integrasi Menggunakan Datatable

04 Mar 2022 15:10
Dipost oleh Admin
621
0

Sobatcoding.com - Tutorial implementasi dan integrasi Datatable menggunakan Codeigniter 4

Pada artikel kali ini, kita akan mencoba implementasi dan integrasi data ke dalam Datatable menggunakan codeigniter 4. Pada kesempatan kali ini kita akan mencoba beberapa cara atau metode seperti basic installation, ajax source data (Menggunakan Ajax) dan server side integration.

Adapaun plugin jquery yang kita gunakan adalah Datatable. Kalian bisa membaca dokumen lengkapnya di link berikut ini https://datatables.net/manual/.

Langsung saja kita ikuti langkah-langkahnya berikut ini.

Basic Installation

Metode ini adalah metode yang paling mudah, karena kita hanya perlu memanggil simple function seperti berikut ini.

$(document).ready(function() {
    $('#namaTable').DataTable();
} );

Untuk contoh menggunakan database kita buat sebuah controller dan sebuah view seperti berikut:

<?php

namespace App\Controllers;

use App\Controllers\BaseController;
use App\Models\Artikel;

class DatatableController extends BaseController
{
    public function index()
    {
    
        $artikel = new Artikel();
        $data = [
            'artikel' => $artikel->findAll(),
        ];
        
        return view('table', $data);
    }
}

Untuk view kita buat sederhana seperti berikut:

<!DOCTYPE html>
 <html lang="id">
    <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>List Artikel</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        <!-- Datatable-->
        <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css" />

        <style>
            body {
                margin: 0;
                padding: 0;
                height: 100%;
            }
            section {
                width:100%;
                height:100%;
                display: block;
            }
        </style>
    </head>
    <body>
        <section>
            <div class="container">
                <h1 class="mt-5">Datatable Artikel</h1>
                <hr />
                <table id="dataTable" class="table table-hover table-bordered">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Judul</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php
                            foreach ($artikel as $index=>$row) {
                        ?>
                            <tr>
                                <td><?= $index+1; ?></td>
                                <td><?= $row['title']; ?></td>
                            </tr>
                        <?php
                            }
                        ?>
                    </tbody>
                </table>
               
            </div>
        </section>
    </body>
    
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js" ></script>
    <script>

        $(document).ready( function () {
            $('#dataTable').DataTable();
        } );

    </script>
 </html>

Kita buat sebuah route untuk akses ke halaman datatable seperti berikut :

$routes->get('/datatable', 'DatatableController::index');

Jalankan php spark serve. Hasil dari script di atas adalah seperti gambar berikut.

Datatable sobatcoding

Ajax Source Data

Jika kita menggunakan Ajax sebagai source data kita buat dahulu sebuah function dan route yang berfungsi menampilkan data dalam bentuk JSON. Perhatikan contoh berikut:

public function listData()
{
        $artikel = new Artikel();
        $data = $artikel->findAll();
        if(!empty($data))
        {
            foreach($data as $index=>$val)
            {
                $data[$index] = $val;
                $data[$index]['number'] = $index+1;
            }
        }
        return $this->response->setJSON(['data' => $data ]);
 }

Dari script di atas kita buat sebuah function listData yang berfungsi menampilkan data artikel ke dalam format JSON.

Kemudian kita tambahkan route baru seperti berikut:

$routes->get('/datatable/list-data', 'DatatableController::listData');

Untuk view kita rubah sedikit menjadi seperti berikut:

<!DOCTYPE html>
 <html lang="id">
    <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>List Artikel</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        <!-- Datatable-->
        <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css" />

        <style>
            body {
                margin: 0;
                padding: 0;
                height: 100%;
            }
            section {
                width:100%;
                height:100%;
                display: block;
            }
        </style>
    </head>
    <body>
        <section>
            <div class="container">
                <h1 class="mt-5">Datatable Artikel</h1>
                <hr />
                <table id="dataTable" class="table table-hover table-bordered">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Judul</th>
                        </tr>
                    </thead>
                    <tbody>
                        
                    </tbody>
                </table>
               
            </div>
        </section>
    </body>
    
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js" ></script>
    <script>

        $(document).ready( function () {
            $('#dataTable').DataTable( {
                "ajax": "<?= base_url('datatable/list-data') ?>",
                columns: [
                    { "data": "number", class: "text-left" },
                    { "data": "title" },
                ],
            } );
        } );

    </script>
 </html>

Untuk bagian ini sesuaikan dengan field yang kalian ingin tampilkan di datatable tersebut.

columns: [
                    { "data": "number", class: "text-left" },
                    { "data": "title" },
                ],

Server Side Integration

Kita tambahkan function di model Artikel seperti berikut:

public function getDatatable($limit=10, $offset=0, $search="")
    {
        $builder = $this->limit($limit, $offset);
        if( $search )
        {
            $builder->like('title', $search);
        }
        return $builder->get()->getResultArray();
    }

    public function getCount()
    {
        return $this->get()->getNumRows();
    }

    public function getFiltered($search="")
    {
        $builder = $this;
        if( $search )
        {
            $builder->like('title', $search);
        }
        return $builder->get()->getNumRows();
    }

Kita buat sebuah function baru di controller seperti berikut:

public function dataTable()
    {
        $artikel = new Artikel();
        $count = $artikel->getCount();
        $filtered = $artikel->getFiltered($this->request->getPost('search')['value']);
        $data = $artikel->getDatatable($this->request->getPost('length'), $this->request->getPost('start'), $this->request->getPost('search')['value']);
        $start = $this->request->getPost('start')+1;

        if(!empty($data))
        {
            foreach($data as $index=>$val)
            {
                $data[$index] = $val;
                $data[$index]['number'] = $start++;
            }
        }

        return $this->response->setJSON([
            "draw"=> $this->request->getPost('draw') ? $this->request->getPost('draw') : 1,
            "recordsTotal"=> $count,
            "recordsFiltered"=> $filtered,
            'data' => $data 
        ]);
    }

Untuk javascript kita update seperti berikut.

$(document).ready( function () {
            $('#dataTable').DataTable( {
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "url" : "<?= base_url('datatable/data') ?>",
                    "type": "POST"
                },
                columns: [
                    { "data": "number", class: "text-left" },
                    { "data": "title" },
                ],
            } );
        } );

Sekian tutorial kali ini. Jika teman-teman memiliki pertanyaan atau saran mengenai artikel ini, jangan ragu untuk meninggalkan komentar pada form di bawah ini.

Semoga bermanfaat.