Sesuai dengan judul artikel ini, kenapa harus menggunakan Serverside Processing? DataTables ternyata menyediakan fitur dimana kita bisa mendapatkan data collection dengan menggunakan Ajax. Lalu keuntungan apa yang bisa kita dapatkan? Dengan menggunakan metode ini, aplikasi yang memiliki cukup banyak data, akan terasa ringan ketika di load. Kenapa hal ini bisa terjadi, karena data tidak akan di load sekaligus. Data akan diambil sedikit demi sedikit melalui Ajax sesuai dengan request yang diminta.

Tutorial Menggunakan DataTables dengan Serverside Processing PHP dan MySql

Pada tutorial ini, saya menggunakan DataTables versi 1.10.15. Anda bisa mendownload-nya dari Situs resminya disini https://datatables.net/. Setelah di download, kita siapkan environmentnya dengan memanggil assets DataTables dan taruh di layout. Berikut contoh pemasangan asset DataTables di aplikasi yang saya buat.

Tutorial Menggunakan DataTables dengan Serverside Processing PHP dan MySql

Kemudian sesuaikan pemasangan assets sesuai dengan lokasinya. Untuk DataTables versi 1.10.15, minimal JQuerynya adalah versi 1.7 .

Tutorial Menggunakan DataTables dengan Serverside Processing PHP dan MySql

Tutorial Menggunakan DataTables dengan Serverside Processing PHP dan MySql

Untuk tabel yang saya gunakan adalah tabel authors dengan struktur sebagai berikut.

+------------+--------------+------+-----+-------------------+----------------+
| Field      | Type         | Null | Key | Default           | Extra          |
+------------+--------------+------+-----+-------------------+----------------+
| id         | int(11)      | NO   | PRI | NULL              | auto_increment |
| first_name | varchar(50)  | NO   |     | NULL              |                |
| last_name  | varchar(50)  | NO   |     | NULL              |                |
| email      | varchar(100) | NO   | UNI | NULL              |                |
| birthdate  | date         | NO   |     | NULL              |                |
| added      | timestamp    | NO   |     | CURRENT_TIMESTAMP |                |
+------------+--------------+------+-----+-------------------+----------------+
6 rows in set (0,00 sec)

Ngoding

Setelah setting assets dan tabel selesai, kita buat file untuk menampilkan tabel dengan menggunakan DataTables. Saya membuat file dengan nama datatables.php, berikut adalah scriptnya.

<table id="tabelAuthor" class="table table-bordered table-hover">
    <thead>
        <tr>
	    <th>Nama Awal</th>
	    <th>Nama Akhir</th>
	    <th>Email</th>
	    <th>Tgl. Lahir</th>
	    <th>Action</th>
	</tr>
    </thead>
    <tbody>
	<tr>
	    <td>Nama Awal</td>
	    <td>Nama Akhir</td>
	    <td>Email</td>
	    <td>Tgl. Lahir</td>
	    <td></td>
        </tr>
    </tbody>
</table>

Perhatikan format penulisan tag tabel, harus menggunakan thead dan tbody. Pastikan id di tabel yang di buat, sama dengan inisialisasi id pada javascript. Setelah script HTML selesai, kita buat javascript untuk menginisialisasi DataTables dengan contoh sebagai berikut.

<script type="text/javascript">
	$(document).ready(function() {
	    var table = $('#tabelAuthor').DataTable( { 
	        "processing": true,
	        "serverSide": true,
	        "ajax": "action/dataTables.php",
	        "columnDefs": [ {
	            "targets": -1,
	            "data": null,
	            "defaultContent": "<button class='btn btn-success btn-xs tblEdit'>Edit / Delete</button>"
	        }]
	    });

	    $('#tabelAuthor tbody').on( 'click', '.tblEdit', function () {
	        var data = table.row( $(this).parents('tr') ).data();
	        window.location.href = "edit.php?id="+ data[4];
	    } );
	});
</script>

Saya tambahkan satu tombol dummy, yang bisa kita gunakan untuk action delete atau update record data. Pada javasript di atas, request ajax akan di arahkah ke file dataTables.php yang bertugas menghandle serverside processing. Berikut adalah script untuk dataTables.php .

<?php
$table = 'authors';
$primaryKey = 'id';

$columns = array(
    array( 'db' => 'first_name','dt' => 0 ),
    array( 'db' => 'last_name','dt' => 1 ),
    array( 'db' => 'email','dt' => 2 ),
    array( 'db' => 'birthdate', 'dt' => 3 ),
    array( 'db' => 'id', 'dt' => 4 ),
);
 
$sql_details = array(
    'user' => 'root',
    'pass' => 'agusbiji',
    'db'   => 'blog',
    'host' => 'localhost'
);
require('ssp.class.php');

echo json_encode(
    SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);

Penjelasan :

1. Variabel $table untuk mendefinisikan nama tabel.
2. Variabel $primaryKey untuk mendefinisikan primary key pada tabel yang digunakan.
3. Variabel $columns untuk mendefinisikan kolom apa saja yang akan di tampilkan pada datatables dengan key db untuk nama kolom dan key dt untuk index.
4. Variabel  $sql_details untuk mendefinisikan konfigurasi database.
5. require(‘ssp.class.php’) sebagai class yang di gunakan untuk mengolah data kembalian. File ini sudah sepaket dengan archieve yang kita download bersama assets datatables. Pada aplikasi yang saya buat, file ssp.class.php lokasinya saya pasang di tempat yang sama dengan dataTables.php .

Uji Coba

Setelah tahap kodingan, selanjutnya kita uji coba apakah berjalan sesuai dengan yang diinginkan. Berikut adalah tampilan awal untuk tabel yang sudah dipasangi DataTables.

Tutorial Menggunakan DataTables dengan Serverside Processing PHP dan MySql

Kemudian kita cek melalui debugger, apakah pengambilan data sudah menggunakan ajax.

Tutorial Menggunakan DataTables dengan Serverside Processing PHP dan MySql

Tutorial Menggunakan DataTables dengan Serverside Processing PHP dan MySql

Untuk fitur pencarian, pagination, dan sorting di datatables akan berjalan menggunakan ajax juga. Jika anda belum jelas, bisa lihat source code nya disini https://mragus.com/source-code/. Sekian tutorial saya ini, semoga bermanfaat. Selamat mencoba. Terimakasih.

The post Tutorial Menggunakan DataTables dengan Serverside Processing PHP dan MySql appeared first on Mr Agus.

Sesuai dari judul artikel ini, kenapa menggunakan request ajax. Secara normal kita bisa mendefinisikan terlebih dahulu sumber data yang akan dipasangkan pada select2 tersebut, untuk jumlah data yang sedikit tidak masalah. Tetapi bagaimana jika data yang akan dipasang berjumlah ribuan, atau puluhan ribu. Hal ini tentu akan membuat load halaman pada lokasi di select2 tersebut akan sangat berat. Jika kita menggunakan ajax, client akan mengirimkan sebuah request pada fungsi yang digunakan untuk memanggil sumber data disaat user melakukan pencarian di select2 tersebut. Hal ini tentunya akan membuat halaman yang di load  dan menjadi lebih ringan.

Membuat Dropdown Select2 dengan Request Ajax dan Php

Membuat Dropdown Select2 dengan Request Ajax dan Php

Langsung saja kita mulai untuk pengkodingannya, pertama tama kita download terlebih dahulu plugin select2 dari website resminya disini. Select2 yang saya gunakan adalah versi 4.0.3. Pasangkan javascript dan css pada layouts aplikasi kita.

Memasang javascript Select2 pada layout

Memasang css select2 pada layout

Struktur tabel yang saya gunakan tb_propinisi.

+--------------+-------------+------+-----+---------+-----------------------------+
| Field        | Type        | Null | Key | Default | Extra                       |
+--------------+-------------+------+-----+---------+-----------------------------+
| propinsi_id  | int(11)     | NO   | PRI | NULL    | auto_increment              |
| nama         | varchar(45) | NO   |     | NULL    |                             |
| dalam_negeri | tinyint(4)  | YES  |     | NULL    |                             |
| created_at   | datetime    | YES  |     | NULL    | on update CURRENT_TIMESTAMP |
| updated_at   | datetime    | YES  |     | NULL    |                             |
+--------------+-------------+------+-----+---------+-----------------------------+

Kemudian kita buat sebuah form yang berisi dropdown, serta javascript yang digunakan untuk menginisialisasi select2 dengan request ajax. Option yang saya gunakan pada plugin select2 tersebut :

1. Saya memberikan delay, sehingga request akan berjalan setelah 0.8 ms.
2. Minimum huruf yang harus di input adalah 3 huruf.
3. Saya tambahkan tombol untuk clear value pada select2 ini.

<script type="text/javascript">
    $(function(){
       $('.select2').select2({
           minimumInputLength: 3,
           allowClear: true,
           placeholder: 'masukkan nama propinsi',
           ajax: {
              dataType: 'json',
              url: 'action/daftarProvinsi.php',
              delay: 800,
              data: function(params) {
                return {
                  search: params.term
                }
              },
              processResults: function (data, page) {
              return {
                results: data
              };
            },
          }
      }).on('select2:select', function (evt) {
         var data = $(".select2 option:selected").text();
         alert("Data yang dipilih adalah "+data);
      });
 });
</script>
<div class="row">
 <div class="col-lg-4">
  <form class="form-group">
   <label>Contoh Select2 Ajax</label>
   <select name="kabupaten" class="form-control select2">
    <option value="">- pilih kabupaten -</option>
   </select>
  </form>
 </div>
</div>

Sehingga tampilannya adalah sebagai berikut.

Membuat Dropdown Select2 dengan Request Ajax dan Php

Buat file koneksi dengan menggunakan mysqli koneksi.php.

<?php
$connect = mysqli_connect('localhost','root','agusbiji','blog');
?>

Kemudian buat sebuah file php dengan nama daftarProvinsi.php yang berisi fungsi untuk menampilkan data daftar propinsi dari database. Berikut adalah contoh scriptnya.

<?php
if($_SERVER['REQUEST_METHOD']=="GET"){
 require '../core/koneksi.php';
 daftarPropinsi($_GET['search']);
}

function daftarPropinsi($search){
 global $connect;

 if ($connect->connect_error) {
     die("Koneksi Gagal: " . $conn->connect_error);
 }

 $sql = "SELECT * FROM tb_propinsi WHERE nama LIKE '%$search%' AND dalam_negeri=1 ORDER BY nama ASC";
 $result = $connect->query($sql);

 if ($result->num_rows > 0) {
     $list = array();
     $key=0;
     while($row = $result->fetch_assoc()) {
         $list[$key]['id'] = $row['propinsi_id'];
         $list[$key]['text'] = $row['nama']; 
     	$key++;
     }
     echo json_encode($list);
 } else {
     echo "hasil kosong";
 }
 $connect->close();
}

?>

Seperti yang bisa dilihat di atas, data yang akan kita kirimkan berupa array dengan key name id dan text, keyname ini sudah ditentukan di website resmi select2.

Testing Kode Select2

Setelah semua file sudah sesuai, kita coba untuk mengetes form tersebut. Saya akan memasukkan beberapa kata kunci pada pencarian di select2 ini. Dan Secara otomatis select2 akan menampilkan beberapa data yang relevan dengan kata kunci yang saya masukkan.

Membuat Dropdown Select2 dengan Request Ajax dan Php

Request Header

Kita juga bisa melihat request yang berjalan pada debugger.

Response

Mudah bukan , metode ini akan membuat load data pada form select2 menjadi lebih ringan untuk jumlah data yang banyak. Jika agan-agan membutuhkan source code, bisa cek link berikut https://mragus.com/source-code/. Semoga Tulisan saya ini dapat bermanfaat, tetap belajar dan selamat mencoba. Terimakasih.

The post Membuat Dropdown Select2 dengan Request Ajax dan Php appeared first on Mr Agus.