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.

Highcharts merupakan plugin yang cukup populer dalam penyajian grafik yang interaktif dan menarik. Highcharts menyediakan berbagai macam varian grafik seperti bar, line, pie, donut, gauge dan lain sebagainya. Dengan dokumentasi yang cukup lengkap, kita bisa dengan mudah menggunakan dan mengimplementasikannya. Jika anda penasaran, lebih jelasnya anda bisa mengunjungi situs resminya disini.

Membuat Grafik dengan Highcharts PHP dan Mysql

Langsung saja, tanpa basa basi lagi kita mulai ngoding dan membuat report dengan menggunakan Highcharts. Versi yang saya gunakan pada tutorial kali adalah  highcharts versi 5.0.7. Anda bisa download dari web resminya dan pasang pada aplikasi kita, jika anda mau menggunakan grafik berbentuk 3D, pasang juga asset highchart 3D nya.

Membuat Grafik dengan Highcharts PHP dan Mysql

Berikut adalah tabel yang saya gunakan yang akan di tampilkan di grafik, nama tabel nya tb_benchmark.

+------------+-------------+------+-----+---------+----------------+
| Field      | Type        | Null | Key | Default | Extra          |
+------------+-------------+------+-----+---------+----------------+
| id         | int(11)     | NO   | PRI | NULL    | auto_increment |
| framework  | varchar(50) | NO   |     | NULL    |                |
| nilai      | double      | NO   |     | NULL    |                |
| penggunaan | int(11)     | NO   |     | NULL    |                |
+------------+-------------+------+-----+---------+----------------+
4 rows in set (0,00 sec)

Data yang saya tampilkan juga hanya data dummy, berikut adalah recordnya.

mysql> select * from tb_benchmark;
+----+--------------+--------+------------+
| id | framework    | nilai  | penggunaan |
+----+--------------+--------+------------+
|  1 | Phalcon      | 822.96 |        100 |
|  2 | Slim         | 399.83 |        120 |
|  3 | Kohana       | 217.34 |         35 |
|  4 | Code Igniter | 187.78 |        200 |
|  5 | Silex        | 179.01 |         45 |
|  6 | Laravel      |  135.9 |        250 |
|  7 | Yii          |  123.5 |        225 |
|  8 | Fuel PHP     | 116.34 |         50 |
|  9 | Hazaar MVC   | 103.53 |        100 |
| 10 | Zend 1       | 103.02 |         10 |
| 11 | Cake PHP     |  54.97 |         15 |
| 12 | Nette        |  53.48 |         80 |
| 13 | Symfony 2    |  39.22 |         85 |
| 14 | Zend 2       |   36.1 |        110 |
+----+--------------+--------+------------+
14 rows in set (0,00 sec)

Ngoding

Setelah persiapan environment selesai, langkah selanjutnya kita mulai pengkodingan. Kita mulai dengan membuat koneksi dengan menggunakan mysqli.

$connect = mysqli_connect('localhost','root','agusbiji','blog');

Kemudian kita buat query untuk mengambil data dari tb_benchmark.

$sql = "SELECT * FROM tb_benchmark ORDER BY nilai DESC";
$result = $connect->query($sql);

Basic Bar Chart

Kita buat grafik pertama dengan tipe bar. Pertama-tama kita buat data yang akan di tampilkan pada grafik tersebut. Kita buat variabel array terlebih dahulu dengan menggunakan PHP.

<?php
$arrayFramework = array();
$arrayNilai = array();
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $arrayFramework[] = '"'.$row['framework'].'"';
        $arrayNilai[] = $row['nilai'];
    }
}
?>

Kemudian kita buat javascript untuk menampilkan basic bar chart, jangan lupa taruh variabel array php pada javascript ini.

$(function(){
  var chart = new Highcharts.Chart({
      chart: {
          renderTo: 'contohGrafikBar',
          type: 'bar',
      },
      title: {
          text: 'Data Benchmark Framework PHP'
      },
      xAxis: {
          categories: [<?= join($arrayFramework, ',') ?>],
          title: {
              text: null
          }
      },
      yAxis: {
          min: 0,
          title: {
              text: 'request / sec',
              align: 'high'
          },
          labels: {
              overflow: 'justify'
          }
      },
      tooltip: {
          valueSuffix: ' req / sec'
      },
      plotOptions: {
          bar: {
              dataLabels: {
                  enabled: true
              }
          }
      },
      legend: {
          layout: 'vertical',
          align: 'right',
          verticalAlign: 'top',
          x: -40,
          y: 80,
          floating: true,
          borderWidth: 1,
          backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
          shadow: true
      },
      credits: {
          enabled: false
      },
      series: [{
          name: 'Benchmark',
          data: [<?= join($arrayNilai, ',') ?>],
          color: '#FFB41A',
      }]
  });
});

Lalu kita buat element untuk merender grafik dari highchart.

<div class="row">
    <div class="col-lg-12">
 <div id="contohGrafikBar"></div>
    </div>
</div>

Berikut adalah tampilan grafik bar yang telah kita buat.

Membuat Grafik dengan Highcharts PHP dan Mysql

Pie Chart

Grafik kedua yang kita buat adalah pie chart. Seperti pada grafik pertama, kita definiskan dulu data yang akan kita pasang. Kita buat variabel array dengan menggunakan PHP.

<?php
$arrayPie = array();
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $arrayPie[] =  "["."'".$row['framework']."'".",".$row['penggunaan']."]";
    }
}
?>

Kemudian kita buat javascript untuk menampilkan pie chart, jangan lupa taruh variabel array php pada javascript ini.

$(function(){
  var chart = new Highcharts.Chart({
      chart: {
          renderTo: 'contohGrafikPie',
         	type: 'pie',
          options3d: {
              enabled: true,
              alpha: 45,
              beta: 0
          }
      },
      title: {
          text: 'Sample Penggunaan PHP Framework'
      },
      tooltip: {
          pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b><br>Penggunaan : <b>{point.y}</b>'
      },
      plotOptions: {
          pie: {
              allowPointSelect: true,
              cursor: 'pointer',
              depth: 35,
              dataLabels: {
                  enabled: true,
                  format: '{point.name}'
              }
          }
      },
      series: [{
          type: 'pie',
          name: 'Penggunaan Framework',
          data: [<?= join($arrayPie,",") ?>],
      }]
  });
 });

Lalu kita buat element untuk merender grafik dari highchart.

<div class="row">
    <div class="col-lg-12">
        <div id="contohGrafikPie"></div>
    </div>
</div>

Berikut adalah hasil tampilan untuk Pie chart yang sudah kita buat.

Membuat Grafik dengan Highcharts PHP dan Mysql

Cukup mudah bukan . untuk varian yang lain anda bisa mencobanya sendiri dan kreasikan sesuai keinginan anda. Semoga tulisan saya ini dapat bermanfaat, Terimakasih. Selamat mencoba .

Sumber : https://www.highcharts.com

The post Membuat Grafik dengan Highcharts PHP dan Mysql appeared first on Mr Agus.