Menampilkan Data dengan PHP, MySQL dan DataTables

Menampilkan Data dengan PHP, MySQL dan DataTables

PHP, Tutorial - 15 Jul 2014

DataTables merupakan plugin jQuery yang diperuntukkan untuk menampilkan data kedalam tabel secara interaktif. Berbagai fitur dapat Anda dapatkan hanya dengan memanfaatkan plugin ini. Diantaranya ialah fitur sortir data, pencarian data, pagination serta fitur lainnya yang bisa Anda gunakan. Untuk melihat lebih detail, silahkan cek demo dibawah.

Download
Demo

Langkah 1

Siapkan tabel dan data yang akan ditampilkan. Pada contoh berikut, kita akan menampilkan data karyawan. Maka buatlah tabel karyawan dengan field sebagai berikut :

CREATE TABLE `karyawan` (
 `id_karyawan` int(2) NOT NULL AUTO_INCREMENT,
 `nama` varchar(255) NOT NULL,
 `jk` enum('Pria','Wanita') NOT NULL,
 `jabatan` varchar(255) NOT NULL,
 `penempatan` varchar(255) NOT NULL,
 PRIMARY KEY (`id_karyawan`)
)

Kemudian, isikan dengan beberapa data. Anda dapat mengambil contoh yang sudah disiapkan pada link download diatas.

Baca Juga : Cara Membuat Database MySQL

Langkah 2

Buatlah koneksi ke database MySQL. Pada contoh berikut, koneksi database diletakkan pada file config.php.

<?php
   define("HOST", "localhost"); // Host database
   define("USER", "root"); // Usernama database
   define("PASSWORD", ""); // Password database
   define("DATABASE", "belajar"); // Nama database
 
   $condb = mysql_connect(HOST,USER,PASSWORD);
   $mysql = mysql_select_db(DATABASE,$condb);
?>

Langkah 3

Selanjutnya, buatlah sebuah file dengan nama index.php. File ini digunakan untuk menampilkan data karyawan dari database MySQL. Berikut perintahnya :

<table id="contoh">
  <thead>
   <tr>
        <th>No</th>
       <th>Nama Karyawan</th>
        <th>Jenis Kelamin</th>
        <th>Jabatan</th>
        <th>Penempatan</th>
   </tr>
 </thead>
 
  <tbody>
 <?php
  $no = 1;
  $query = mysql_query("SELECT * FROM karyawan ORDER BY nama ASC");
 while($data = mysql_fetch_array($query)){
   echo "<tr>";
    echo "<td>$no";
   echo "<td>$data[nama]</td>";
    echo "<td>$data[jk]</td>";
    echo "<td>$data[jabatan]</td>";
   echo "<td>$data[penempatan]</td>";
    echo "</tr>";
   $no++;
  }
 ?>
 </tbody>
</table>

Catatan :

Jangan lupa untuk memberi id pada tabel yang digunakan untuk menampilkan data. Pada contoh diatas tabel diberi id contoh. id tabel ini nantinya akan kita gunakan untuk menghubungkan tabel HTML dengan plugin DataTables.

Langkah 4

Agar tabel dapat terhubung dengan plugin DataTables download terlebih dahulu plugin DataTables. Setelah men-download dan meng-ekstrak plugin tersebut, ambil-lah 2 file pendukung yang ada di folder media. File tersebut ialah file jquery.dataTables.css yang ada di folder css dan file jquery.dataTables.js yang ada di folder js.

Kemudian, masukkan ke-2 file tersebut kedalam project web Anda. Karena kita menampilkan data pada file index.php maka hubungkan ke-2 file tersebut kedalam file index.php. Sebagai contoh :

<html>
<head>
<link rel="stylesheet" href="jquery.dataTables.css"> <!-- Memasukkan file jquery.dataTables.css -->
</head>
<body>
<table id="contoh">
 <thead>
   <tr>
        <th>No</th>
       <th>Nama Karyawan</th>
        <th>Jenis Kelamin</th>
        <th>Jabatan</th>
        <th>Penempatan</th>
   </tr>
 </thead>
 
  <tbody>
 <?php
  $no = 1;
  $query = mysql_query("SELECT * FROM karyawan ORDER BY nama ASC");
 while($data = mysql_fetch_array($query)){
   echo "<tr>";
    echo "<td>$no";
   echo "<td>$data[nama]</td>";
    echo "<td>$data[jk]</td>";
    echo "<td>$data[jabatan]</td>";
   echo "<td>$data[penempatan]</td>";
    echo "</tr>";
   $no++;
  }
 ?>
 </tbody>
</table>
<script src="jquery.dataTables.js"></script> <!-- Memasukkan file jquery.dataTables.js -->
</body>
</html>

Langkah 5

Dikarenakan plugin DataTables dibuat menggunakan jQuery, maka jangan lupa untuk memasukkan plugin jQuery pada file index.php serta tuliskan perintah berikut pada file index.php :

$(document).ready(function() {
    $('#contoh').dataTable(); // Menjalankan plugin DataTables pada id contoh. id contoh merupakan tabel yang kita gunakan untuk menampilkan data
} );

Kode akhir file index.php

<?php include('config.php');?>
<html>
<head>
<link rel="stylesheet" href="jquery.dataTables.css"> <!-- Memasukkan file jquery.dataTables.css -->
</head>
<body>
<table id="contoh">
  <thead>
   <tr>
        <th>No</th>
       <th>Nama Karyawan</th>
        <th>Jenis Kelamin</th>
        <th>Jabatan</th>
        <th>Penempatan</th>
   </tr>
 </thead>
 
  <tbody>
 <?php
  $no = 1;
  $query = mysql_query("SELECT * FROM karyawan ORDER BY nama ASC");
 while($data = mysql_fetch_array($query)){
   echo "<tr>";
    echo "<td>$no";
   echo "<td>$data[nama]</td>";
    echo "<td>$data[jk]</td>";
    echo "<td>$data[jabatan]</td>";
   echo "<td>$data[penempatan]</td>";
    echo "</tr>";
   $no++;
  }
 ?>
 </tbody>
</table>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <!-- Memasukkan plugin jQuery -->
<script src="jquery.dataTables.js"></script> <!-- Memasukkan file jquery.dataTables.js -->
<script>
$(document).ready(function() {
    $('#contoh').dataTable(); // Menjalankan plugin DataTables pada id contoh. id contoh merupakan tabel yang kita gunakan untuk menampilkan data
} );
</script>
</body>
</html>

Kesimpulan

Dengan plugin DataTables, menampilkan data dengan PHP dan MySQL kedalam bentuk tabel akan terlihat lebih baik. Dikerenakan berbagai fitur utama sudah tersedia. Diantaranya seperti sortir data, pencarian data, dan pagination. Semoga bermanfaat.

Baca Juga :
– Membuat Pencarian Facebook dengan jQuery dan PHP
– Membuat Dynamic Select Box Menggunakan jQuery dan Ajax
– Membuat Fitur Read More dengan PHP
– Membuat Laporan Excel dengan PHP dan MySQL




  • PHP Dasar
    PHP & MySQL
    Tutorial

  • Populer

  • Terbaru