Integrasi Codeigniter 4 dengan Datatable Server Side

Pada tutorial kali ini kita akan mencoba untuk mengintegrasikan Codeigniter 4 dengan Datatable (Server Side). Codeigniter 4 merupakan versi terbaru dari codeigniter. Sangan berbeda dengan codeigniter 3. CodeIgniter 4 adalah versi kerangka kerja yang akan datang, dimaksudkan untuk digunakan dengan PHP 7.2 dan yang terbaru. Pengembangan sedang berlangsung, dan versi saat ini adalah v4.0.2.

Datatable
menurut website resminya DataTables adalah plug-in untuk pustaka Javascript jQuery. Ini adalah alat yang sangat fleksibel, dibangun di atas dasar peningkatan progresif, yang menambahkan semua fitur canggih ini ke tabel HTML apa pun.
Datatable Server Side merupakan Pemrosesan sisi server yang dapat digunakan untuk menampilkan kumpulan data besar. pada kesempatan kali ini kita akan coba menampilkan data ICD dengan jumlah row 12 ribuan lebih.

Sebelumnya penting kita ketahui terlebih dahulu Refrensi pada codeigniter4 agar dapat lebih memahami tutorial ini
Controller
https://codeigniter4.github.io/userguide/incoming/controllers.html
Incoming Request
https://codeigniter4.github.io/userguide/incoming/incomingrequest.html
Database
https://codeigniter4.github.io/userguide/database/examples.html

Oke langsung saja berikut caranya:

1. Download codeigniter4 https://codeigniter.com/download
2. Ekstrak codeigniter kedalam folder project contohnya “datatable”
3. Download datatable https://datatables.net/download/ dan ekstrak pada folder public codeigniter
4. Download dan ekstrak bootsrap, karena kita akan memakai template bootsrap.
Lihat artikel yang bersangkutan https://www.teknikkoding.com/javascript/integrasi-bootstrap-pada-jquery-datatable/
5. Download data table ICD https://dl.teknikkoding.com/tbl_icd.sql.zip

– Buat table tbl_icd contohnya sepeti berikut:

– Import data ICD

6. Setting database
Edit file Database.php di app\config\Database.php, Sesuaikan host,user,pass databasenya

7. Setting baseURL
Edit file App.php di app\config\App.php, Contohnya $baseURL = ‘http://localhost/datatable/’;

8. Membuat Controller Icd

Icd.php

<?php 
namespace App\Controllers;
use CodeIgniter\Controller;
use App\Models\Model_icd;
use Config\Services;

class Icd extends Controller{

public function index()
{
  echo view('icd');
}

public function ajax_list()
{
  $request = Services::request();
  $m_icd = new Model_icd($request);
  if($request->getMethod(true)=='POST'){
    $lists = $m_icd->get_datatables();
        $data = [];
        $no = $request->getPost("start");
        foreach ($lists as $list) {
            	$no++;
                $row = [];
                $row[] = $no;
                $row[] = $list->kode_icd;
                $row[] = $list->nama_icd;
                $data[] = $row;
    }

    $output = ["draw" => $request->getPost('draw'),
                        "recordsTotal" => $m_icd->count_all(),
                        "recordsFiltered" => $m_icd->count_filtered(),
                        "data" => $data];
        echo json_encode($output);
  }
}

}

9. Membuat model icd

Model_icd.php

<?php

namespace App\Models;
use CodeIgniter\HTTP\RequestInterface;
use CodeIgniter\Model;

class Model_icd extends Model {

protected $table = "tbl_icd";
protected $column_order = array('id_icd','kode_icd','nama_icd');
protected $column_search = array('nama_icd','kode_icd');
protected $order = array('id_icd' => 'desc');
protected $request;
protected $db;
protected $dt;

function __construct(RequestInterface $request){
   parent::__construct();
   $this->db = db_connect();
   $this->request = $request;
   $this->dt = $this->db->table($this->table);
}

private function _get_datatables_query(){
    $i = 0;
    foreach ($this->column_search as $item){
        if($this->request->getPost('search')['value']){ 
            if($i===0){
                $this->dt->groupStart();
                $this->dt->like($item, $this->request->getPost('search')['value']);
            }
            else{
                $this->dt->orLike($item, $this->request->getPost('search')['value']);
            }
            if(count($this->column_search) - 1 == $i)
                $this->dt->groupEnd();
        }
        $i++;
    }
     
    if($this->request->getPost('order')){
            $this->dt->orderBy($this->column_order[$this->request->getPost('order')['0']['column']], $this->request->getPost('order')['0']['dir']);
        } 
    else if(isset($this->order)){
        $order = $this->order;
        $this->dt->orderBy(key($order), $order[key($order)]);
    }
}

function get_datatables(){
    $this->_get_datatables_query();
    if($this->request->getPost('length') != -1)
    $this->dt->limit($this->request->getPost('length'), $this->request->getPost('start'));
    $query = $this->dt->get();
    return $query->getResult();
}

function count_filtered(){
    $this->_get_datatables_query();
    return $this->dt->countAllResults();
}

public function count_all(){
    $tbl_storage = $this->db->table($this->table);
    return $tbl_storage->countAllResults();
}

}

10. Membuat view Icd

icd.php

<!DOCTYPE html>
<html>
<head>
  <title>Demo icd</title>
  <link rel="stylesheet" type="text/css" href="<?php echo base_url("datatable/datatables.min.css");?>" />
  <link rel="stylesheet" type="text/css" href="<?php echo base_url("bootstrap/css/bootstrap.min.css");?>" />
  <!-- masukan jquery karena datatable adalah plugin jquery -->
  <script src="<?php echo base_url("jquery.min.js");?>"></script>
  <style type="text/css">
    .tengah {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 100vh;
    }
  </style>
</head>
<body>
<div class="tengah">
  <div class="container">
    <table id="myTable" class="table table-striped table-bordered table-hover">
      <thead><tr><td>No</td><td>Kode ICD</td><td>Nama ICD</td></tr></thead>
      <tbody>
      </tbody>
    </table>
  </div>
</div>
<script type="text/javascript">
$(document).ready( function () {
  var table = $('#myTable').DataTable({ 

    "processing": true,
    "serverSide": true,
    "order": [],

    "ajax": {
        "url": "<?php echo base_url('icd/ajax_list')?>",
        "type": "POST"
    },

    //optional
    "lengthMenu": [[5, 10, 25], [5, 10, 25]],

    "columnDefs": [
    { 
        "targets": [],
        "orderable": false,
    },
    ],

});
} );
</script>

<script src="<?php echo base_url("datatable/DataTables-1.10.20/js/jquery.dataTables.min.js");?>"></script>

<script src="<?php echo base_url("datatable/datatables.min.js");?>"></script>

</body>
</html>

Setelah semuanya selesai coba panggil url http://localhost/datatable/public/icd

coba demonya disini http://demo.teknikkoding.com/icd

 

Related posts

16 Thoughts to “Integrasi Codeigniter 4 dengan Datatable Server Side”

  1. Intan

    boleh share source codenya mas?

    1. admin

      Maaf mbak kodenya kan ada di postinganšŸ˜…

      1. intan

        saya copy paste di postingan error mas, katanya tidak bisa menemukan incoming request getPost di Modelnya, saya coba encode respon jsonnya tidak ketemu

        1. admin

          Errornya seperti apa pesannya pas dirunning (line berapa)??

  2. ahmad mursalim

    mas saya coba coba codingannya eror yg ada pesannya DataTables warning: table id=myTable – Ajax error. For more information about this error, please see http://datatables.net/tn/7 itu kenapa ya?

    1. admin

      bisa jadi urlnya salah atau respon servernya 505 Internal Error

  3. ahmad

    mas kok kodingannya eror pesannya DataTables warning: table id=myTable – Ajax error. For more information about this error, please see http://datatables.net/tn/7 itu kenapa ya

    1. admin

      bisa jadi retur responsenya 500 – Internal Error atau 404.. coba lihat dulu di console..

  4. aku

    Tutorialnya mantap. Integrasi Codeigniter 4 dengan Datatable Server Side denga tabel yang berelasi caranya gimana kak?

    1. admin

      Terimakasih..

      Untuk join tabel dapat dilakukan didalam model contohnya untuk postingan ini $this->dt->join(“tabel_a”,”tabel_a.kolum=tbl_icd.kolum”)

      1. Anggi

        di semua function model yang ada $this->dt kah mas? atau hanya di function _get_datatables_query()?

        1. admin

          Hanya di fungsi _get_datatables_query dan fungsi count_all saja.

  5. Dhie

    Terimakasih tutorialnya bro, saya terbiasa menggunakan CI3, begitu pakai CI4 rada susah, begitu baca tutorial ini berulang-ulang, akhirnya paham, sekali lagi terimakasih banyak bro

    1. admin

      Sama sama bro.. terimakasih sudah membaca

  6. mas kalau error dibagian
    $this->request->getPost(‘search’)[‘value’])

    getPostnya gk terbaca fungsinya mas..
    adakah solusi..??

    1. admin

      Apakah sudah dicoba memanggil servicenya? Contohnya $request=service(‘request’);

Leave a Comment