DataTables adalah plug-in untuk jQuery Javascript library yang sangat fleksibel dan cukup canggih untuk menambah kontrol interaksi tabel HTML. Dengan fitur unggulan seperti fungsi pagination, filtering, sorting, scrolling, support jQuery UI ThemeRoller serta berbagai plug-in inc seperti Editor, TableTools, FixedColumns memudahkan kita untuk menggunakan fungsi-fungsi tersebut tanpa harus menulis coding PHP yang rumit dan panjang. Dan yang terpenting lagi DataTables ini bersifat free alias GRATIIIS.
Pada posting kali ini saya akan mencoba memberikan tutorial untuk Menggunakan DataTables untuk Menampilkan Data dengan PHP & MySQL. Sebelum mencoba praktek silahkan download DataTables terlebih dahulu di website resminya http://www.datatables.net/download/ dengan cara klik tombol Download DataTables v1.9.4 (versi terbaru saat posting ini di-publish).
Kemudian pastikan juga komputer anda sudah di-install aplikasi pengembang website php dan mysql seperti XAMPP yang saya gunakan pada tutorial ini yaitu XAMPP versi 1.8.1 dan anda juga dapat men-download di website resminya kalau belum punya http://www.apachefriends.org/en/xampp.html.
Baik, kalau semuanya sudah lengkap kita awali tutorial ini dengan tahapan sbb :
- Buat database dan tabel di MySQL dengan nama database db_datatables dan tabel tbl_datatables. Untuk mempermudah berikut saya berikan script untuk membuatnya dan anda tinggal copy di phpMyAdmin (download script)
- Buat folder di server localhost dengan nama datatables (C:\xampp\htdocs\datatables) dan buat juga folder di dalam datatables dengan nama Connections untuk menyimpan file koneksi dengan nama cn_datatables.php dan ketik script berikut :
<?php
$hostname_cn_datatables = "localhost";
$database_cn_datatables = "db_datatables";
$username_cn_datatables = "root";
$password_cn_datatables = "merdeka";
$cn_datatables = mysql_pconnect($hostname_cn_datatables,
$username_cn_datatables, $password_cn_datatables)
or trigger_error(mysql_error(),E_USER_ERROR);
?>
- Untuk menampilkan data tabel tbl_datatables buat file index.php dalam folder datatables dan ketik script berikut :
<?php require_once('Connections/cn_datatables.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
if (PHP_VERSION < 6) {
$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
}
$theValue = function_exists("mysql_real_escape_string") ?
mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
case "text":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "long":
case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL";
break;
case "double":
$theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
break;
case "date":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
break;
}
return $theValue;
}
}
mysql_select_db($database_cn_datatables, $cn_datatables);
$query_rs_datatables = "SELECT * FROM tbl_datatables";
$rs_datatables = mysql_query($query_rs_datatables, $cn_datatables) or die(mysql_error());
$row_rs_datatables = mysql_fetch_assoc($rs_datatables);
$totalRows_rs_datatables = mysql_num_rows($rs_datatables);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>family list</title>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<td>NO</td>
<td>NAMA</td>
<td>TMP. LAHIR</td>
<td>TGL. LAHIR</td>
<td>STATUS</th>
<td>KETERANGAN</td>
</tr>
<?php do { ?>
<tr>
<td><?php echo $row_rs_datatables['no']; ?></td>
<td><?php echo $row_rs_datatables['nama']; ?></td>
<td><?php echo $row_rs_datatables['tmp_lahir']; ?></td>
<td><?php echo $row_rs_datatables['tgl_lahir']; ?></td>
<td><?php echo $row_rs_datatables['status']; ?></td>
<td><?php echo $row_rs_datatables['keterangan']; ?></td>
</tr>
<?php } while ($row_rs_datatables = mysql_fetch_assoc($rs_datatables)); ?>
</table>
</body>
</html>
<?php
mysql_free_result($rs_datatables);
?>
Sampai disini coba buka browser dan ketik url http://localhost/datatables/ untuk melihat hasilnya
- Sekarang kita akan coba mempercantik tampilan data dengan memasang DataTables. Pertama buat folder di dalam datatables dengan nama media dan buat juga 2 folder di dalamnya dengan nama css dan js. Kemudian extract file DataTables-1.9.4.zip hasil download sebelumnya, copy-kan file demo_table_jui.css dalam DataTables-1.9.4\media\css\demo_table_jui.css dan folder ui-lightness dalam DataTables-1.9.4\examples\examples_support\themes\ui-lightness ke C:\xampp\htdocs\datatables\media\css, copy-kan juga file jquery.js dan jquery.dataTables.js dalam DataTables-1.9.4\media\js ke C:\xampp\htdocs\datatables\media\js.
- Untuk menggunakan DataTables dalam tutorial ini, buka kembali file index.php dan lakukan sedikit modifikasi dengan menambahkan script seperti gambar di bawah
Script untuk memanggil DataTablesScript untuk menggunakan DataTables
- Terakhir buka kembali browser dan ketik url http://localhost/datatables/ untuk melihat hasil akhir penggunaan DataTables dan tampilanya WOW KEREEEN.
Semoga Bermanfaat
Salam Edukasi dan TI
Rahmat Rahimi
No comments:
Post a Comment