Implementasi Datatable Serverside untuk Mempercepat Load Halaman pada PHP dan MySQL

Implementasi Datatable Serverside untuk Mempercepat Load Halaman pada PHP dan MySQL. Assalamualaikum, halo semuanya, jumpa lagi di sahretech. Setelah beberapa waktu yang lalu saya membagikan tutorial dasar cara menggunakan datatable, maka  pada tutorial kali ini saya akan membuat tutorial datatable lanjutan, yaitu datatable serverside. Bagiaman cara implementasinya, ikuti tutorialnya berikut ini ?

Datatable adalah sebuah plugin javascript yang menawarkan semua fitur tabel yang dibutuhkan dalam pembuatan sebuah aplikasi. Hadirnya datatable membuat programmer tidak perlu membuat fitur pencarian, pagination, ordering, dan fitur berapa maksimal jumlah data yang ditampilkan per-rownya. Implementasinya sangat mudah sekali, tutorialnya bisa kalian baca di link ini https://www.sahretech.com/2020/04/cara-membuat-pencarian-sorting-dan.html

Tetapi yang menjadi kendala saat menggunakan datatable yaitu, semua data akan di-load di satu halaman yang sama, saat kalian memiliki ratusan bahkan ribuan data, loading halaman pun menjadi lambat dan cara seperti ini jelas tidak efektif. Maka solusinya adalah menggunakan datatable serverside, konfigurasinya memang sedikit rumit bagi yang baru tahu, tapi tenang saja, saya akan mengulasnya dengan mudah. Berikut cara implementasi datatable serverside dengan php dan mysql.

Cara Menggunakan Datatable Serverside

• 1. Buat sebuah database dengan nama latihan, lalu buat sebuah tabel user di dalamnya dengan struktur seperti gambar di bawah ini. Dan jangan lupa untuk mengisi data dummy di dalamnya.

Struktur Tabel User

• 2. Buat sebuah folder baru di dalam htdocs, lalu beri nama serverside.
• 3. Buat sebuah file di dalam folder serverside dengan nama index.php. Lalu ikuti script-nya seperti di bawah ini.

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">

<!-- membuat tabel sederhana -->
<table id="example" class="display" border="1" style="width:100%">
    <thead>
        <tr>
            <th>No</th>
            <th>username</th>
            <th>password</th>
            <th>telpon</th>
            <th>alamat</th>
            <th>action</th>
        </tr>
    </thead>
</table>


<!-- import jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<!-- import jquery datatable -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>

<!-- script javascript untuk datatable -->
<script>
$(document).ready(function() {
    $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "data.php",
        "order": [[ 0, 'asc' ]],

        // membuat kolom
        "columns": [

            //untuk membuat data index
            { data: 'no', name:'id', render: function (data, type, row, meta) {
                  return meta.row + meta.settings._iDisplayStart + 1;
              }},

              //samakan data kolom sesuai dt di data.php
            { "data": 'username' },
            { "data": 'password' },
            { "data": 'notelp' },
            { "data": 'alamat' },
            { "data": 'aksi' },
        ]
    } );
} );
</script>

• 4. Buat sebuah file baru bernama data.php. Lalu ikuti script-nya seperti di bawah ini.

<?php
 
// DB table to use
$table = 'user';
 
// Table's primary key
$primaryKey = 'id';
 

// Array kolom basisdata akan dikirim kembali ke DataTables.
// The `db` parameter represents the column name in the database, while the `dt`
// 'db' mewakili parameter kolom database
// 'dt' adalah parameter yang akan ditampilkan di database pada index.php

$columns = array(
    array(  'db' => 'id', 'dt' => 'no' ),
    array(  'db' => 'username', 'dt' => 'username' ),
    array(  'db' => 'password',  'dt' => 'password' ),
    array(  'db' => 'notelp',   'dt' => 'notelp' ),
    array(  'db' => 'alamat',   'dt' => 'alamat' ),
    array(  'db' => 'id',
            'dt' => 'aksi',

            // kalo kalian mau bikin tombol edit pake 'formatter' => function($d, $row) {return ....}
            // kalian bisa custom dengan menggunakan class bootstrap untuk mempercantik tampilan
            'formatter' => function($d, $row) {
                return '<a href="edit?id='.$d.'">EDIT</a>';
            }
         ),
);
 
//melakukan koneksi ke database
$sql_details = array(
    'user' => 'root',
    'pass' => '',
    'db'   => 'latihan',
    'host' => 'localhost'
);

//code di bawah tidak perlu diedit

require( 'ssp.class.php' );
 
echo json_encode(
    SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);

• 5. Buat sebuah file baru dengan nama ssp.class.php. Lalu ikuti script-nya seperti di bawah ini. Khusus untuk file ini, tidak saya jelaskan karena sudah bawaan dari datatable-nya sama seperti cdn yang kita import, tidak perlu penjelasan, yang penting ngerti cara konfigurasi dan cara makenya.

<?php

/*
 * Helper functions for building a DataTables server-side processing SQL query
 *
 * The static functions in this class are just helper functions to help build
 * the SQL used in the DataTables demo server-side processing scripts. These
 * functions obviously do not represent all that can be done with server-side
 * processing, they are intentionally simple to show how it works. More complex
 * server-side processing operations will likely require a custom script.
 *
 * See http://datatables.net/usage/server-side for full details on the server-
 * side processing requirements of DataTables.
 *
 * @license MIT - http://datatables.net/license_mit
 */


// Please Remove below 4 lines as this is use in Datatatables test environment for your local or live environment please remove it or else it will not work
$file = $_SERVER['DOCUMENT_ROOT'].'/datatables/pdo.php';
if ( is_file( $file ) ) {
 include( $file );
}


class SSP {
 /**
  * Create the data output array for the DataTables rows
  *
  *  @param  array $columns Column information array
  *  @param  array $data    Data from the SQL get
  *  @return array          Formatted data in a row based format
  */
 static function data_output ( $columns, $data )
 {
  $out = array();

  for ( $i=0, $ien=count($data) ; $i<$ien ; $i++ ) {
   $row = array();

   for ( $j=0, $jen=count($columns) ; $j<$jen ; $j++ ) {
    $column = $columns[$j];

    // Is there a formatter?
    if ( isset( $column['formatter'] ) ) {
                    if(empty($column['db'])){
                        $row[ $column['dt'] ] = $column['formatter']( $data[$i] );
                    }
                    else{
                        $row[ $column['dt'] ] = $column['formatter']( $data[$i][ $column['db'] ], $data[$i] );
                    }
    }
    else {
                    if(!empty($column['db'])){
                        $row[ $column['dt'] ] = $data[$i][ $columns[$j]['db'] ];
                    }
                    else{
                        $row[ $column['dt'] ] = "";
                    }
    }
   }

   $out[] = $row;
  }

  return $out;
 }


 /**
  * Database connection
  *
  * Obtain an PHP PDO connection from a connection details array
  *
  *  @param  array $conn SQL connection details. The array should have
  *    the following properties
  *     * host - host name
  *     * db   - database name
  *     * user - user name
  *     * pass - user password
  *  @return resource PDO connection
  */
 static function db ( $conn )
 {
  if ( is_array( $conn ) ) {
   return self::sql_connect( $conn );
  }

  return $conn;
 }


 /**
  * Paging
  *
  * Construct the LIMIT clause for server-side processing SQL query
  *
  *  @param  array $request Data sent to server by DataTables
  *  @param  array $columns Column information array
  *  @return string SQL limit clause
  */
 static function limit ( $request, $columns )
 {
  $limit = '';

  if ( isset($request['start']) && $request['length'] != -1 ) {
   $limit = "LIMIT ".intval($request['start']).", ".intval($request['length']);
  }

  return $limit;
 }


 /**
  * Ordering
  *
  * Construct the ORDER BY clause for server-side processing SQL query
  *
  *  @param  array $request Data sent to server by DataTables
  *  @param  array $columns Column information array
  *  @return string SQL order by clause
  */
 static function order ( $request, $columns )
 {
  $order = '';

  if ( isset($request['order']) && count($request['order']) ) {
   $orderBy = array();
   $dtColumns = self::pluck( $columns, 'dt' );

   for ( $i=0, $ien=count($request['order']) ; $i<$ien ; $i++ ) {
    // Convert the column index into the column data property
    $columnIdx = intval($request['order'][$i]['column']);
    $requestColumn = $request['columns'][$columnIdx];

    $columnIdx = array_search( $requestColumn['data'], $dtColumns );
    $column = $columns[ $columnIdx ];

    if ( $requestColumn['orderable'] == 'true' ) {
     $dir = $request['order'][$i]['dir'] === 'asc' ?
      'ASC' :
      'DESC';

     $orderBy[] = '`'.$column['db'].'` '.$dir;
    }
   }

   if ( count( $orderBy ) ) {
    $order = 'ORDER BY '.implode(', ', $orderBy);
   }
  }

  return $order;
 }


 /**
  * Searching / Filtering
  *
  * Construct the WHERE clause for server-side processing SQL query.
  *
  * NOTE this does not match the built-in DataTables filtering which does it
  * word by word on any field. It's possible to do here performance on large
  * databases would be very poor
  *
  *  @param  array $request Data sent to server by DataTables
  *  @param  array $columns Column information array
  *  @param  array $bindings Array of values for PDO bindings, used in the
  *    sql_exec() function
  *  @return string SQL where clause
  */
 static function filter ( $request, $columns, &$bindings )
 {
  $globalSearch = array();
  $columnSearch = array();
  $dtColumns = self::pluck( $columns, 'dt' );

  if ( isset($request['search']) && $request['search']['value'] != '' ) {
   $str = $request['search']['value'];

   for ( $i=0, $ien=count($request['columns']) ; $i<$ien ; $i++ ) {
    $requestColumn = $request['columns'][$i];
    $columnIdx = array_search( $requestColumn['data'], $dtColumns );
    $column = $columns[ $columnIdx ];

    if ( $requestColumn['searchable'] == 'true' ) {
     if(!empty($column['db'])){
      $binding = self::bind( $bindings, '%'.$str.'%', PDO::PARAM_STR );
      $globalSearch[] = "`".$column['db']."` LIKE ".$binding;
     }
    }
   }
  }

  // Individual column filtering
  if ( isset( $request['columns'] ) ) {
   for ( $i=0, $ien=count($request['columns']) ; $i<$ien ; $i++ ) {
    $requestColumn = $request['columns'][$i];
    $columnIdx = array_search( $requestColumn['data'], $dtColumns );
    $column = $columns[ $columnIdx ];

    $str = $requestColumn['search']['value'];

    if ( $requestColumn['searchable'] == 'true' &&
     $str != '' ) {
     if(!empty($column['db'])){
      $binding = self::bind( $bindings, '%'.$str.'%', PDO::PARAM_STR );
      $columnSearch[] = "`".$column['db']."` LIKE ".$binding;
     }
    }
   }
  }

  // Combine the filters into a single string
  $where = '';

  if ( count( $globalSearch ) ) {
   $where = '('.implode(' OR ', $globalSearch).')';
  }

  if ( count( $columnSearch ) ) {
   $where = $where === '' ?
    implode(' AND ', $columnSearch) :
    $where .' AND '. implode(' AND ', $columnSearch);
  }

  if ( $where !== '' ) {
   $where = 'WHERE '.$where;
  }

  return $where;
 }


 /**
  * Perform the SQL queries needed for an server-side processing requested,
  * utilising the helper functions of this class, limit(), order() and
  * filter() among others. The returned array is ready to be encoded as JSON
  * in response to an SSP request, or can be modified if needed before
  * sending back to the client.
  *
  *  @param  array $request Data sent to server by DataTables
  *  @param  array|PDO $conn PDO connection resource or connection parameters array
  *  @param  string $table SQL table to query
  *  @param  string $primaryKey Primary key of the table
  *  @param  array $columns Column information array
  *  @return array          Server-side processing response array
  */
 static function simple ( $request, $conn, $table, $primaryKey, $columns )
 {
  $bindings = array();
  $db = self::db( $conn );

  // Build the SQL query string from the request
  $limit = self::limit( $request, $columns );
  $order = self::order( $request, $columns );
  $where = self::filter( $request, $columns, $bindings );

  // Main query to actually get the data
  $data = self::sql_exec( $db, $bindings,
   "SELECT `".implode("`, `", self::pluck($columns, 'db'))."`
    FROM `$table`
    $where
    $order
    $limit"
  );

  // Data set length after filtering
  $resFilterLength = self::sql_exec( $db, $bindings,
   "SELECT COUNT(`{$primaryKey}`)
    FROM   `$table`
    $where"
  );
  $recordsFiltered = $resFilterLength[0][0];

  // Total data set length
  $resTotalLength = self::sql_exec( $db,
   "SELECT COUNT(`{$primaryKey}`)
    FROM   `$table`"
  );
  $recordsTotal = $resTotalLength[0][0];

  /*
   * Output
   */
  return array(
   "draw"            => isset ( $request['draw'] ) ?
    intval( $request['draw'] ) :
    0,
   "recordsTotal"    => intval( $recordsTotal ),
   "recordsFiltered" => intval( $recordsFiltered ),
   "data"            => self::data_output( $columns, $data )
  );
 }


 /**
  * The difference between this method and the `simple` one, is that you can
  * apply additional `where` conditions to the SQL queries. These can be in
  * one of two forms:
  *
  * * 'Result condition' - This is applied to the result set, but not the
  *   overall paging information query - i.e. it will not effect the number
  *   of records that a user sees they can have access to. This should be
  *   used when you want apply a filtering condition that the user has sent.
  * * 'All condition' - This is applied to all queries that are made and
  *   reduces the number of records that the user can access. This should be
  *   used in conditions where you don't want the user to ever have access to
  *   particular records (for example, restricting by a login id).
  *
  *  @param  array $request Data sent to server by DataTables
  *  @param  array|PDO $conn PDO connection resource or connection parameters array
  *  @param  string $table SQL table to query
  *  @param  string $primaryKey Primary key of the table
  *  @param  array $columns Column information array
  *  @param  string $whereResult WHERE condition to apply to the result set
  *  @param  string $whereAll WHERE condition to apply to all queries
  *  @return array          Server-side processing response array
  */
 static function complex ( $request, $conn, $table, $primaryKey, $columns, $whereResult=null, $whereAll=null )
 {
  $bindings = array();
  $db = self::db( $conn );
  $localWhereResult = array();
  $localWhereAll = array();
  $whereAllSql = '';

  // Build the SQL query string from the request
  $limit = self::limit( $request, $columns );
  $order = self::order( $request, $columns );
  $where = self::filter( $request, $columns, $bindings );

  $whereResult = self::_flatten( $whereResult );
  $whereAll = self::_flatten( $whereAll );

  if ( $whereResult ) {
   $where = $where ?
    $where .' AND '.$whereResult :
    'WHERE '.$whereResult;
  }

  if ( $whereAll ) {
   $where = $where ?
    $where .' AND '.$whereAll :
    'WHERE '.$whereAll;

   $whereAllSql = 'WHERE '.$whereAll;
  }

  // Main query to actually get the data
  $data = self::sql_exec( $db, $bindings,
   "SELECT `".implode("`, `", self::pluck($columns, 'db'))."`
    FROM `$table`
    $where
    $order
    $limit"
  );

  // Data set length after filtering
  $resFilterLength = self::sql_exec( $db, $bindings,
   "SELECT COUNT(`{$primaryKey}`)
    FROM   `$table`
    $where"
  );
  $recordsFiltered = $resFilterLength[0][0];

  // Total data set length
  $resTotalLength = self::sql_exec( $db, $bindings,
   "SELECT COUNT(`{$primaryKey}`)
    FROM   `$table` ".
   $whereAllSql
  );
  $recordsTotal = $resTotalLength[0][0];

  /*
   * Output
   */
  return array(
   "draw"            => isset ( $request['draw'] ) ?
    intval( $request['draw'] ) :
    0,
   "recordsTotal"    => intval( $recordsTotal ),
   "recordsFiltered" => intval( $recordsFiltered ),
   "data"            => self::data_output( $columns, $data )
  );
 }


 /**
  * Connect to the database
  *
  * @param  array $sql_details SQL server connection details array, with the
  *   properties:
  *     * host - host name
  *     * db   - database name
  *     * user - user name
  *     * pass - user password
  * @return resource Database connection handle
  */
 static function sql_connect ( $sql_details )
 {
  try {
   $db = @new PDO(
    "mysql:host={$sql_details['host']};dbname={$sql_details['db']}",
    $sql_details['user'],
    $sql_details['pass'],
    array( PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION )
   );
  }
  catch (PDOException $e) {
   self::fatal(
    "An error occurred while connecting to the database. ".
    "The error reported by the server was: ".$e->getMessage()
   );
  }

  return $db;
 }


 /**
  * Execute an SQL query on the database
  *
  * @param  resource $db  Database handler
  * @param  array    $bindings Array of PDO binding values from bind() to be
  *   used for safely escaping strings. Note that this can be given as the
  *   SQL query string if no bindings are required.
  * @param  string   $sql SQL query to execute.
  * @return array         Result from the query (all rows)
  */
 static function sql_exec ( $db, $bindings, $sql=null )
 {
  // Argument shifting
  if ( $sql === null ) {
   $sql = $bindings;
  }

  $stmt = $db->prepare( $sql );
  //echo $sql;

  // Bind parameters
  if ( is_array( $bindings ) ) {
   for ( $i=0, $ien=count($bindings) ; $i<$ien ; $i++ ) {
    $binding = $bindings[$i];
    $stmt->bindValue( $binding['key'], $binding['val'], $binding['type'] );
   }
  }

  // Execute
  try {
   $stmt->execute();
  }
  catch (PDOException $e) {
   self::fatal( "An SQL error occurred: ".$e->getMessage() );
  }

  // Return all
  return $stmt->fetchAll( PDO::FETCH_BOTH );
 }


 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  * Internal methods
  */

 /**
  * Throw a fatal error.
  *
  * This writes out an error message in a JSON string which DataTables will
  * see and show to the user in the browser.
  *
  * @param  string $msg Message to send to the client
  */
 static function fatal ( $msg )
 {
  echo json_encode( array( 
   "error" => $msg
  ) );

  exit(0);
 }

 /**
  * Create a PDO binding key which can be used for escaping variables safely
  * when executing a query with sql_exec()
  *
  * @param  array &$a    Array of bindings
  * @param  *      $val  Value to bind
  * @param  int    $type PDO field type
  * @return string       Bound key to be used in the SQL where this parameter
  *   would be used.
  */
 static function bind ( &$a, $val, $type )
 {
  $key = ':binding_'.count( $a );

  $a[] = array(
   'key' => $key,
   'val' => $val,
   'type' => $type
  );

  return $key;
 }


 /**
  * Pull a particular property from each assoc. array in a numeric array, 
  * returning and array of the property values from each item.
  *
  *  @param  array  $a    Array to get data from
  *  @param  string $prop Property to read
  *  @return array        Array of property values
  */
 static function pluck ( $a, $prop )
 {
  $out = array();

  for ( $i=0, $len=count($a) ; $i<$len ; $i++ ) {
            if(empty($a[$i][$prop])){
                continue;
   }
   //removing the $out array index confuses the filter method in doing proper binding,
   //adding it ensures that the array data are mapped correctly
   $out[$i] = $a[$i][$prop];
  }

  return $out;
 }


 /**
  * Return a string from an array or a string
  *
  * @param  array|string $a Array to join
  * @param  string $join Glue for the concatenation
  * @return string Joined string
  */
 static function _flatten ( $a, $join = ' AND ' )
 {
  if ( ! $a ) {
   return '';
  }
  else if ( $a && is_array($a) ) {
   return implode( $join, $a );
  }
  return $a;
 }
}

• 6. Hidupkan webservice, lalu buka di browser kalian. Maka hasilnya akan tampak seperti gambar di bawah ini. Hasil akhirnya sangat sederhana, kalian bisa custom tabelnya menggunakan bootstrap atau template tertentu untuk mempercantik tampilan

Hasil akhir dari datatable

Penjelasan :

• 1. Untuk file index.php, saya tidak akan banyak menjelaskan karena kodingan di dalamnya umum, dan mudah dipahami
• 2. Untuk file data.php
• Buat variabel untuk menampung tabel dan primary key
• Buat data array, sesuaikan dengan format yang saya punya. yang perlu kalian ubah hanya db dan dtnya saja, db mempresentasikan kolom di dalam database, dan dt adalah parameter yang akan ditampilkan pada datatable di index.php
• Bila kalian ingin membuat tombol aksi, maka gunakkan formatter seperti script di atas. ubahlah script yang ada di dalam return. kalian bisa kreasikan dengan bootstrap untuk membuat tombol atau elemen lainnya.
• Buat koneksi ke database
• Beberapa koding di baris akhir tidak perlu diubah, ditonton aja.
• 3. Untuk file ssp.class.php tidak perlu diubah-ubah, sama kalain tontonin aja.

Bagaimana ribet atau mudah ?. Kalo mudah, langsung ganti datatable biasa kalian jadi datatable serverside biar loading halaman jadi lebih cepat. Sekian tutorial implementasi datatable serverside untuk mempercepat load halaman pada php dan mysql. Kurang lebihnya saya mohon maaf, bila ada pertanyaan, kritik dan saran silahkan tinggalkan di kolom komentar di bawah ini. Happy coding, dan sampai berjumpa di tutorial selanjutnya.