Tutorial Cara membuat Datatables Serverside dengan PHP PDO & MySQL

Tutorial Cara membuat Datatables Serverside dengan PHP PDO & MySQL
20 Agustus 2022 14:07 Fauzan (Codekop) 1,239x
datatables php mysql phppdo

Halo sobat codekop.com, kali ini saya ingin membagi pengalaman di seri Datatables lagi yaitu cara membuat DataTables Serverside dengan PHP PDO & MySQL, dari kalian yang suka ngulik-ngulik website, khususnya pada backend development, kalian pasti cukup tau dengan DataTables, Ya Datatables merupakan library untuk menampilkan data dengan mengubah bentuk table, ke dalam fitur-fitur seperti search, filter, pagination, show perpage, sort by dan sebagainya.

Membuat tabel dengan library dataTables secara biasa tentu sudah sering kalian lakukan. Namun berbeda caranya jika dilakukan secara ServerSide dan pada php mysql.

Mengapa Harus Serverside ?

Karena jika data kalian masih sedikit yang harus load, maka biasanya gak ada masalah, tetapi jika data kalian yang sudah banyak, misal sudah ribuan, ratusan ribu atau jutaan, sering sekali mengalami kendala seperti tidak terload nya data, atau not responding pada browser karena banyak loop data yang di sajikan dalam 1 halaman. Hal ini membebankan server karena meload data terlalu lama, dan biasanya kadang data tersebut tidak terproses dengan baik.

Jadi solusi terbaik adalah datatables serverside processing.

Dengan melibatkan semua pemrosesan pada sisi server akan membuat sisi client menjadi ringan dan cepat. hal ini disebabkan data tidak diload secara keseluruhan dari database. Melainkan dilimit oleh sisi server sesuai dengan request yang dilkukan clientside. Dengan begitu, berapun jumlah record yang akan ditampilkan tidak ada lagi masalah terlihat, mengikuti request yang dilakukan clientside.

Sering saya pakai

Datatables serverside ini saya sering implementasikan pada beberapa project saya untuk menampung data-data yang besar dan kita tidak mungkin menampilkan semua data dari table yang jumlah ribuan, dikarenakan mempengaruhi performa web dan waktu eksekusi query.

Berikut ialah beberapa produksaya yang menggunakan dan mengimplementasi datatables serverside : https://www.codekop.com/subkat/premium  

BACA JUGA : Tutorial Cara membuat Datatables Serverside dengan CodeIgniter 4

Praktek :

1. Membuat Database MySQL

pertama-tama kita akan membuat database mysqlnya terlebih dahulu,  saya beri namanya dbnya tutorial_serverside atau copykan saya code dibawah ini simpan dengan nama dengan akhiran .sql lalu buat database pada phpmyadmin dan import :

-- phpMyAdmin SQL Dump
-- version 5.2.0
-- https://www.phpmyadmin.net/
--
-- Host: localhost
-- Generation Time: Aug 17, 2022 at 06:39 AM
-- Server version: 10.4.24-MariaDB
-- PHP Version: 8.1.6

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `tutorial_serverside`
--

-- --------------------------------------------------------

--
-- Table structure for table `artikel`
--

CREATE TABLE `artikel` (
  `id_artikel` int(11) NOT NULL,
  `judul` varchar(255) NOT NULL,
  `kategori` varchar(255) NOT NULL,
  `penulis` varchar(255) NOT NULL,
  `tgl_posting` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Dumping data for table `artikel`
--

INSERT INTO `artikel` (`id_artikel`, `judul`, `kategori`, `penulis`, `tgl_posting`) VALUES
(1, 'Pengenalan HTML', 'HTML', 'Joe Doe', '2020-01-11 02:06:12'),
(2, 'Pengenalan CSS', 'CSS', 'Joe Doe', '2020-01-11 00:00:00'),
(3, 'Pengenalan PHP', 'PHP', 'Joe Doe', '2020-01-11 02:06:12'),
(4, 'Pengenalan JavaScript', 'JS', 'Joe Doe', '2020-01-11 00:00:00'),
(5, 'Pengenalan MySQL', 'mysql', 'Joe Doe', '2020-01-11 00:00:00'),
(6, 'Advanced PHP', 'PHP', 'Joe Doe', '2020-01-11 00:00:00'),
(7, 'Pengenalan Vue JS', 'JS', 'Joe Doe', '2020-01-11 00:00:00'),
(8, 'Framework PHP', 'PHP', 'Joe Doe', '2020-01-11 00:00:00'),
(9, 'Basic CodeIgniter', 'PHP', 'Joe Doe', '2020-01-11 00:00:00');

-- --------------------------------------------------------

--
-- Table structure for table `kategori`
--

CREATE TABLE `kategori` (
  `id_kategori` int(11) NOT NULL,
  `nama_kategori` varchar(255) NOT NULL,
  `tgl_buat` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Dumping data for table `kategori`
--

INSERT INTO `kategori` (`id_kategori`, `nama_kategori`, `tgl_buat`) VALUES
(1, 'Tutorial', '2020-01-12 00:00:00'),
(2, 'Teknologi', '2020-01-12 00:00:00'),
(3, 'Database', '2020-01-12 00:00:00'),
(4, 'Pemrograman', '2020-01-12 00:00:00'),
(5, 'JavaScript', '2020-01-12 00:00:00'),
(6, 'Framework', '2020-01-12 00:00:00');

-- --------------------------------------------------------

--
-- Table structure for table `subkat`
--

CREATE TABLE `subkat` (
  `id_subkat` int(11) NOT NULL,
  `subkat` varchar(255) NOT NULL,
  `id_kategori` int(11) NOT NULL,
  `tgl_add` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Dumping data for table `subkat`
--

INSERT INTO `subkat` (`id_subkat`, `subkat`, `id_kategori`, `tgl_add`) VALUES
(1, 'HTML', 1, '2020-01-12 00:00:00'),
(2, 'CSS', 1, '2020-01-12 00:00:00'),
(3, 'PHP', 1, '2020-01-12 00:00:00'),
(4, 'JavaScript', 1, '2020-01-12 00:00:00'),
(5, 'Gojek', 2, '2020-01-12 00:00:00'),
(6, 'Grab', 2, '2020-01-12 00:00:00'),
(7, 'MySQL', 3, '2020-01-12 00:00:00'),
(8, 'MongoDB', 3, '2020-01-12 00:00:00'),
(9, 'PHP', 4, '2020-01-12 00:00:00'),
(10, 'Golang', 4, '2020-01-12 00:00:00'),
(11, 'Node JS', 4, '2020-01-12 00:00:00'),
(12, 'Phyton', 4, '2020-01-12 00:00:00'),
(13, 'Ruby', 4, '2020-01-12 00:00:00'),
(14, 'ASP', 4, '2020-01-12 00:00:00'),
(15, 'Vue JS', 5, '2020-01-12 00:00:00'),
(16, 'React JS', 5, '2020-01-12 00:00:00'),
(17, 'Angular JS', 5, '2020-01-12 00:00:00'),
(18, 'jQuery', 5, '2020-01-12 00:00:00'),
(19, 'CodeIgniter', 6, '2020-01-12 00:00:00'),
(20, 'Laravel', 6, '2020-01-12 00:00:00'),
(21, 'Symfony', 6, '2020-01-12 00:00:00'),
(22, 'Ruby On Rails', 6, '2020-01-12 00:00:00');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `artikel`
--
ALTER TABLE `artikel`
  ADD PRIMARY KEY (`id_artikel`);

--
-- Indexes for table `kategori`
--
ALTER TABLE `kategori`
  ADD PRIMARY KEY (`id_kategori`);

--
-- Indexes for table `subkat`
--
ALTER TABLE `subkat`
  ADD PRIMARY KEY (`id_subkat`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `artikel`
--
ALTER TABLE `artikel`
  MODIFY `id_artikel` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=10;

--
-- AUTO_INCREMENT for table `kategori`
--
ALTER TABLE `kategori`
  MODIFY `id_kategori` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7;

--
-- AUTO_INCREMENT for table `subkat`
--
ALTER TABLE `subkat`
  MODIFY `id_subkat` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=23;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

 

2. Membuat folder project dan file php 

pada langkah ini buat lah folder project kalian, kalau saya menamai serverside-php  dan mempunyai struktur folder dan file sebagai berikut :

   

Keterangan :

  • index.php sebagai halaman utama berisi tentang tampilan utama data dari table yang kita tampilkan
  • data.php yaitu file yang menghasilkan format api json data berdasarkan query yang dikirimkan 
  • config/db.php yaitu file koneksi yang menghubungkan php ke database mysql
  • config/Datatables.php yaitu sebuah function builder yang digunakan untuk menggenerate hasil json khusus format api yang dibaca datatables berdasarkan kondisi sql yang di kirim

3. Koneksi php ke MySQL

pada langkah ini kita akan membuat script koneksi php ke mysql, ke folder file config/db.php , berikut ialah scriptnya :

<?php
    $host   = 'localhost'; // atur host
    $user   = 'root'; // atur user database
    $pass   = '';   // atur pass database
    $dbname = 'tutorial_serverside'; // atur nama database

    $connectdb = new PDO("mysql:host=$host;dbname=$dbname", $user, $pass);

 

4. Membuat library function builder Datatables

nah sekarang pada langkah ini kita akan isi folder file config/Datatables.php, yaitu sebuah function builder yang digunakan untuk menggenerate hasil json khusus format api yang dibaca datatables berdasarkan kondisi sql yang di kirim

<?php 
/**
 *
 * @link       https://www.codekop.com/
 * @version    1.0.1
 * @copyright  Codekop Datatables Library (c) 2022
 *
 * File      : Datatables.php
 * author    : Fauzan Falah
 * E-mail    : fauzancodekop@gmail.com / fauzan1892@codekop.com
 *
 *
**/
class Datatables
{
    public function index()
    {
        echo "Hello World";
    }

    public function getQuery($conn, $query, $where, $isWhere, $cari)
    {
        // Ambil data yang di ketik user pada textbox pencarian
        $search = htmlspecialchars($_POST['search']['value']);
        // Ambil data limit per page
        $limit = preg_replace("/[^a-zA-Z0-9.]/", '', "{$_POST['length']}");
        // Ambil data start
        $start =preg_replace("/[^a-zA-Z0-9.]/", '', "{$_POST['start']}");
        // cari array data dari database
        $cari = implode(" LIKE '%".$search."%' OR ", $cari)." LIKE '%".$search."%'";
        // Untuk mengambil nama field yg menjadi acuan untuk sorting
        $order_field = $_POST['order'][0]['column'];
        // Untuk menentukan order by "ASC" atau "DESC"
        $order_ascdesc = $_POST['order'][0]['dir'];
        $order = " ORDER BY ".$_POST['columns'][$order_field]['data']." ".$order_ascdesc;

        if ($where != null) {
            $setWhere = array();
            foreach ($where as $key => $value) {
                $setWhere[] = $key."='".$value."'";
            }
            $fwhere = implode(' AND ', $setWhere);

            if (!empty($iswhere)) {
                $sql = $conn->prepare($query." WHERE  $iswhere AND ".$fwhere);
                $sql->execute();
            } else {
                $sql = $conn->prepare($query." WHERE ".$fwhere);
                $sql->execute();
            }
            $sql_count = $sql->rowCount();

            if (!empty($iswhere)) {
                $sql_data = $conn->prepare($query." WHERE $iswhere AND ".$fwhere." AND (".$cari.")".$order." LIMIT ".$limit." OFFSET ".$start);
                $sql_data->execute();
            } else {
                $sql_data = $conn->prepare($query." WHERE ".$fwhere." AND (".$cari.")".$order." LIMIT ".$limit." OFFSET ".$start);
                $sql_data->execute();
            }

            if (isset($search)) {
                if (!empty($iswhere)) {
                    $sql_cari =  $conn->prepare($query." WHERE $iswhere AND ".$fwhere." AND (".$cari.")");
                    $sql_cari->execute();
                } else {
                    $sql_cari =  $conn->prepare($query." WHERE ".$fwhere." AND (".$cari.")");
                    $sql_cari->execute();
                }
                $sql_filter_count = $sql_cari->rowCount();
            } else {
                if (!empty($iswhere)) {
                    $sql_filter = $conn->prepare($query." WHERE $iswhere AND ".$fwhere);
                    $sql_filter->execute();
                } else {
                    $sql_filter = $conn->prepare($query." WHERE ".$fwhere);
                    $sql_filter->execute();
                }
                $sql_filter_count = $sql_filter->rowCount();
            }
            $data = $sql_data->fetchAll();
        } else {
            if (!empty($iswhere)) {
                $sql = $conn->prepare($query." WHERE  $iswhere ");
                $sql->execute();
            } else {
                $sql = $conn->prepare($query);
                $sql->execute();
            }
            $sql_count = $sql->rowCount();

            if (!empty($iswhere)) {
                $sql_data = $conn->prepare($query." WHERE $iswhere AND (".$cari.")".$order." LIMIT ".$limit." OFFSET ".$start);
                $sql_data->execute();
            } else {
                $sql_data = $conn->prepare($query." WHERE (".$cari.")".$order." LIMIT ".$limit." OFFSET ".$start);
                $sql_data->execute();
            }

            if (isset($search)) {
                if (!empty($iswhere)) {
                    $sql_cari =  $conn->prepare($query." WHERE $iswhere AND (".$cari.")");
                    $sql_cari->execute();
                } else {
                    $sql_cari =  $conn->prepare($query." WHERE (".$cari.")");
                    $sql_cari->execute();
                }
                $sql_filter_count = $sql_cari->rowCount();
            } else {
                if (!empty($iswhere)) {
                    $sql_filter = $conn->prepare($query." WHERE $iswhere");
                    $sql_filter->execute();
                } else {
                    $sql_filter = $conn->prepare($query);
                    $sql_filter->execute();
                }
                $sql_filter_count = $sql_filter->rowCount();
            }

            $data = $sql_data->fetchAll();
        }
        $callback = array(
            'draw' => $_POST['draw'], // Ini dari datatablenya
            'recordsTotal' => $sql_count,
            'recordsFiltered'=> $sql_filter_count,
            'data'=> $data
        );
        return json_encode($callback); // Convert array $callback ke json
    }
}

 

5. Membuat query SQL

pada langkah ini kita akan coba menjalankan query sqlnya ,  lalu dieksekusi menggunakan library function builder Datatables, yang kita telah tambahkan, buka file data.php dan berikut ialah scriptnya :

<?php
    require 'config/db.php'; 
    require 'config/Datatables.php';
    $dataTables = new Datatables();

    // mengambil data dari database
    // sql query
    $query = "SELECT kategori.nama_kategori AS nama_kategori, subkat.* FROM subkat 
    JOIN kategori ON subkat.id_kategori = kategori.id_kategori";
    // $where  = array('nama_kategori' => 'Tutorial');
    $where  = null; 
    // jika memakai IS NULL pada where sql
    $isWhere = null;
    // $isWhere = 'artikel.deleted_at IS NULL';
    $search = array('nama_kategori','subkat','tgl_add');
    echo $dataTables->getQuery($connectdb, $query, $where, $isWhere, $search);
?>

Keterangan :

  • $query : menampilkan data dengan membuat query sql nya pada paramater ,
  • $search : untuk parameter kolom apa saja yang bisa di cari pada search datatables dengan bentuk array
  • $where : adalah untuk kondisi data yang ingin ditampilkan dengan bentuk array  jika tidak digunakan hanya tinggal di null bagian variabel $where
  • $isWhere : digunakan pada kasus table yang ingin memakai parameter where IS NULL, atau query where manual

6. Membuat table

pada langkah ini ialah kita membuat table pada file index.php menggunakan Datatables serverside menggunakan javascript dan tampilan bootstrap 4 :

<!doctype html>
<html lang="en">
    <head>
        <title>Datatables Server Side Tutorial</title>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS --><!-- BOOTSTRAP 4-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
        <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
        <!-- DATATABLES BS 4-->
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css" />
        <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.7/css/responsive.bootstrap4.min.css" />
        <!-- jQuery -->
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </head>
    <body>
        <nav class="navbar navbar-expand-sm navbar-dark bg-info">
            <div class="container">
                <a class="navbar-brand" href="#">Datatables PHP</a>
            </div>
        </nav>
        <div class="container mt-5 mb-5">
            <div class="card">
                <div class="card-header">
                    <h5> Data Menu</h5>
                </div>
                <div class="card-body">
                    <table class="table table-striped table-bordered" id="table-artikel-query">
                        <thead>
                            <tr>
                                <th> No. </th>
                                <th> Kategori </th>
                                <th> Sub Kategori </th>
                                <th> Aksi </th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
            <script>
                var tabel = null;
                $(document).ready(function() {
                    tabel = $('#table-artikel-query').DataTable({
                        "processing": true,
                        "responsive": true,
                        "serverSide": true,
                        "ordering": true, // Set true agar bisa di sorting
                        "order": [
                            [0, 'asc']
                        ], // Default sortingnya berdasarkan kolom / field ke 0 (paling pertama)
                        "ajax": {
                            "url": "data.php", // URL file untuk proses select datanya
                            "type": "POST",
                        },
                        "deferRender": true,
                        "aLengthMenu": [
                            [5, 10, 50],
                            [5, 10, 50]
                        ], // Combobox Limit
                        "columns": [
                            {"data": 'id_kategori',"sortable": false, 
                                render: function (data, type, row, meta) {
                                    return meta.row + meta.settings._iDisplayStart + 1;
                                }  
                            },
                            { "data": "nama_kategori" },  // Tampilkan kolom nama_kategori pada table kategori
                            { "data": "subkat" },  // Tampilkan kolom subkat pada table sub kategori
                            { "data": "id_kategori", // Tampilkan kolomid_kategori pada table kategori
                            "render": 
                                function( data, type, row, meta ) {
                                    return '<a href="show/'+data+'">Show</a>';
                                }
                            },
                        ],
                    });
                });
            </script>
        </div>
        <hr/>
            <center>
                Dibuat dengan <i class="fa fa-heart" style="color:red;"></i> Oleh 
                <a href="https://www.codekop.com/" target="_blank">Codekop</a> © <?= date('Y');?>
            </center>
        <br/>

        <!-- DATATABLES BS 4-->
        <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
        <script src="https://cdn.datatables.net/responsive/2.2.7/js/dataTables.responsive.min.js"></script>
        <script src="https://cdn.datatables.net/responsive/2.2.7/js/responsive.bootstrap4.min.js"></script>
    </body>
</html>

 

7. Jalankan Web 

untuk menjalankan web kita tinggal menuju url berdasarkan folder project yang kita buat di htdocs, http://localhost/serverside-php

8. Hasil

  Nah sudah selesai, mudah bukan ?, mari kita ganti datatables biasa php yang kita buat dengan looping, menjadi datatable serverside agar loadnya lebih ringan, Sekian tutorial kali ini, terima kasih sudah membaca, mohon maaf bila ada kekurangan, Selamat mencoba !.

Komentar
Postingan Terkait
Dasar-Dasar PHP Panduan Singkat
27 Agu 2024 19:45 369x
Dasar-Dasar PHP Panduan Singkat
Tutorial Cara membuat Datatables Serverside dengan PHP PDO & MySQL
20 Agu 2022 14:07 1.240x
Tutorial Cara membuat Datatables Serverside dengan PHP PDO & MySQL
Tutorial PHP : Cara Membuat Query Builder Class CRUD Sederhana dengan PHP
04 Jan 2020 11:26 2.912x
Tutorial PHP : Cara Membuat Query Builder Class CRUD Sederhana dengan PHP
Tutorial PHP : Cara Membuat Login dan CRUD OOP dengan PHP PDO dan MySQL
19 Jan 2021 23:16 26.120x
Tutorial PHP : Cara Membuat Login dan CRUD OOP dengan PHP PDO dan MySQL
Tutorial PHP - Cara Membuat Format Rupiah dengan PHP
09 Nov 2019 15:10 1.996x
Tutorial PHP - Cara Membuat Format Rupiah dengan PHP
Postingan Terpopuler
Tutorial PHP : Cara Membuat Login dan CRUD OOP dengan PHP PDO dan MySQL
19 Jan 2021 23:16 26.120x
Tutorial PHP : Cara Membuat Login dan CRUD OOP dengan PHP PDO dan MySQL
Membuat Laporan PDF dengan Dompdf di Codeigniter 3 tanpa Composer
18 Agu 2022 24.128x
Membuat Laporan PDF dengan Dompdf di Codeigniter 3 tanpa Composer
CI : Cara Mengatasi Error 404 Page Not Found CodeIgniter pada Server Hosting
16 Mar 2020 17:25 20.425x
CI : Cara Mengatasi Error 404 Page Not Found CodeIgniter pada Server Hosting
Tutorial CRUD CodeIgniter 4 Lengkap Untuk Pemula
04 Jun 2020 07:30 16.830x
Tutorial CRUD CodeIgniter 4 Lengkap Untuk Pemula
Tutorial Membuat Login menggunakan Password Hash dan Password Verify pada CodeIgniter 3
27 Feb 2022 04:29 15.009x
Tutorial Membuat Login menggunakan Password Hash dan Password Verify pada CodeIgniter 3
Tutorial Cara membuat Datatables Serverside dengan CodeIgniter 3
10 Jul 2021 09:38 14.965x
Tutorial Cara membuat Datatables Serverside dengan CodeIgniter 3
Tutorial HTML Part 19 : Membuat Layout Website Sederhana dengan HTML dan CSS
01 Mar 2021 06:58 8.265x
Tutorial HTML Part 19 : Membuat Layout Website Sederhana dengan HTML dan CSS
Tutorial Cara Membuat dan Menjalankan File PHP dengan XAMPP
09 Nov 2019 15:13 8.235x
Tutorial Cara Membuat dan Menjalankan File PHP dengan XAMPP
Iklan
diskon 20%