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.

Tabel yang saya gunakan adalah tabel propinsi dan kabupaten di Indonesia. Saya ingin membuat rekap data untuk menampilkan jumlah kabupaten dan kota pada tiap tiap propinsi. Untuk lebih jelasnya, silahkan simak penjelasan saya di bawah ini.

Belajar Membuat Tabel View di MySql

Saya menggunakan dua tabel dalam tutorial kali ini dengan Tabel kabupaten kota memiliki relasi dengan tabel propinsi. Untuk struktur tabelnya adalah sebagai berikut.

tb_propinsi

+--------------+-------------+------+-----+---------+-----------------------------+
| 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    |                             |
+--------------+-------------+------+-----+---------+-----------------------------+
5 rows in set (0,00 sec)

tb_kabupaten_kota

+-------------+--------------+------+-----+---------+----------------+
| Field       | Type         | Null | Key | Default | Extra          |
+-------------+--------------+------+-----+---------+----------------+
| kab_id      | int(11)      | NO   | PRI | NULL    | auto_increment |
| nama        | varchar(150) | NO   |     | NULL    |                |
| propinsi_id | int(11)      | NO   | MUL | NULL    |                |
| kab_kodya   | int(11)      | YES  |     | NULL    |                |
+-------------+--------------+------+-----+---------+----------------+
4 rows in set (0,00 sec)

Query

Langkah berikutnya saya membuat query untuk menampilan jumlah data kabupaten dan kota per propinsi. Untuk Query dan hasilnya sebagai berikut.

SELECT p.nama as nama_propinsi, 
(SELECT COUNT(kb.kab_id) FROM tb_kabupaten_kota kb WHERE kb.propinsi_id=p.propinsi_id) as total_kabupaten_kota
FROM tb_propinsi p

Hasil.

Belajar Membuat Tabel View di MySql

Membuat / Create Tabel View

Setelah query dirasa cukup dan benar, langkah selanjutnya kita buat tabel view. Untuk membuat tabel view query-nya sangatlah mudah.

CREATE VIEW nama_view AS query

Untuk sciptnya adalah sebagai berikut.

CREATE VIEW rekap_kabupaten_per_propinsi AS SELECT p.nama as nama_propinsi, 
(SELECT COUNT(kb.kab_id) FROM tb_kabupaten_kota kb WHERE kb.propinsi_id=p.propinsi_id) as total_kabupaten_kota
FROM tb_propinsi p

Setelah query di eksekusi, kita akan menemukan tabel view yang berhasil kita buat.

Belajar Membuat Tabel View di MySql

Kemudian kita select data dari tabel view tersebut, dan hasilnya adalah sebagai berikut.

Belajar Membuat Tabel View di MySql

Mengedit  / Update Tabel View

Untuk langkah selanjutnya saya akan mengupdate tabel view dengan menampilkan jumlah kabupaten dan kota per propinsi. Untuk mengupdate tabel view query nya sebagai berikut

CREATE OR REPLACE VIEW nama_view AS query

Untuk query lengkapnya sebagai berikut.

CREATE OR REPLACE VIEW rekap_kabupaten_per_propinsi AS SELECT p.nama as nama_propinsi, 
(SELECT COUNT(kb.kab_id) FROM tb_kabupaten_kota kb WHERE kb.propinsi_id=p.propinsi_id) as total_kabupaten_kota,
(SELECT COUNT(kb.kab_id) FROM tb_kabupaten_kota kb WHERE kb.propinsi_id=p.propinsi_id AND kab_kodya=1) as jml_kab,
(SELECT COUNT(kb.kab_id) FROM tb_kabupaten_kota kb WHERE kb.propinsi_id=p.propinsi_id AND kab_kodya=2) as jml_kodya
FROM tb_propinsi p

^{Keterangan : untuk kab_kodya dengan nilai 1 merupakan kabupaten, dan kab_kodya dengan nilai 2 merupakan kota.}

Kemudian kita eksekusi query nya.

Belajar Membuat Tabel View di MySql

Setelah Tabel view berhasil kita update, kemudian kita select data dari tabel virtual yang kita update tadi. Untuk hasilnya adalah sebagai berikut.

Belajar Membuat Tabel View di MySql

Menghapus / Delete Tabel View

Untuk menghapus tabel view query nya adalah sebagai berikut, DROP VIEW nama_view.

Belajar Membuat Tabel View di MySql

Tabel Virtual ini akan sangat membantu kita dalam membuat rekap dan tampilan data dari satu tabel atau lebih sesuai dengan yang kita inginkan. Kita tidak perlu membuat sebuah aplikasi terlebih dahulu untuk sebuah penyajian data yang di butuhkan dengan cepat. Kita hanya perlu melakukan query dan membuat tabel view dengan tampilan yang bisa kita sesuaikan. Sekian tutorial dan tulisan saya ini, semoga dapat bermanfaat. Terimakasih.

The post Belajar Membuat Tabel View di MySql appeared first on Mr Agus.