Cara Menggunakan jQuery DataTables dengan PHP dan MySQL
Salah satu teknologi yang paling umum digunakan untuk menampilkan data dalam format tabel di website adalah dengan menggunakan jQuery DataTables. Dalam tutorial ini, kita akan melihat bagaimana menggunakan jQuery DataTables dengan PHP dan MySQL untuk membuat tabel interaktif yang dapat diurutkan dan dicari.
Langkah-langkah
1. Unduh dan Ekstrak jQuery DataTables
Yang pertama harus kita lakukan adalah mengunduh dan mengekstrak file jQuery DataTables. Kita bisa mendownloadnya dari https://datatables.net/download/ yang sudah tersedia dengan format ZIP atau tarball. Setelah diekstrak, kita akan mendapatkan folder bernama “DataTables-1.10.18” yang berisi semua file yang diperlukan untuk menjalankan jQuery DataTables.
2. Set Up Database MySQL
Setelah kita mendownload dan mengekstrak file jQuery DataTables, hal selanjutnya adalah membuat database MySQL dan tabel untuk menampung data yang akan ditampilkan dalam format tabel dengan menggunakan jQuery DataTables. Kita bisa menggunakan MySQL Workbench atau phpMyAdmin untuk membuat database dan tabel.
Contohnya, kita akan membuat database dengan nama “contoh_db” dan tabel dengan nama “siswa” yang memiliki kolom-kolom seperti berikut:
id_siswa INT(11) PK nama_siswa VARCHAR(50) kelas_siswa VARCHAR(10) jurusan_siswa VARCHAR(50) alamat_siswa VARCHAR(100)
3. Buat koneksi Database MySQL dengan PHP
Setelah kita membuat database dan tabel, selanjutnya kita perlu membuat koneksi dari PHP ke MySQL untuk mendapatkan data dari tabel yang dibuat sebelumnya. Kita dapat menggunakan fungsi mysqli_connect() untuk membuat koneksi MySQL dengan PHP. Contoh koneksi MySQL dengan PHP seperti berikut:
<?php
$koneksi = mysqli_connect("localhost", "username", "password", "contoh_db");
// Check koneksi
if (mysqli_connect_errno())
echo "Koneksi MySQL gagal: " . mysqli_connect_error();
?>
Pada contoh di atas, kita membuat koneksi ke database MySQL “contoh_db” pada server localhost dengan username dan password tertentu. Jika koneksi gagal, maka akan muncul pesan error dengan kode mysqli_connect_errno().
4. Buat File PHP untuk Mengambil Data dari Database MySQL
Selanjutnya, kita akan membuat file PHP yang akan membuat query ke database MySQL dan mengambil data dari tabel yang sudah dibuat sebelumnya. Kita akan menggunakan fungsi mysqli_query() untuk membuat query dan fungsi mysqli_fetch_array() untuk mengambil data dari hasil query. Contoh file PHP untuk mengambil data siswa dari tabel “siswa” seperti berikut:
<?php
$koneksi = mysqli_connect("localhost", "username", "password", "contoh_db");
// Check koneksi
if (mysqli_connect_errno())
echo "Koneksi MySQL gagal: " . mysqli_connect_error();
$query = "SELECT * FROM siswa";
$result = mysqli_query($koneksi, $query);
mysqli_close($koneksi);
?>
Dalam contoh di atas, kita membuat query untuk mengambil semua data dari tabel “siswa” dan kemudian menjalankan query tersebut menggunakan mysqli_query(). Hasil query disimpan dalam variabel $result dan kemudian diproses menggunakan mysqli_fetch_array() untuk mengambil data yang ada dalam hasil query.
5. Tampilkan Data dalam Format Tabel dengan jQuery DataTables
Setelah kita berhasil mengambil data dari database MySQL, selanjutnya kita akan menampilkan data tersebut dalam format tabel menggunakan jQuery DataTables. Kita memerlukan file CSS dan JavaScript dari jQuery DataTables serta file CSS dan JavaScript dari Bootstrap untuk membuat tampilan tabel lebih menarik dan responsif.
Berikut adalah kode HTML dan JavaScript yang dapat digunakan untuk menampilkan data dalam format tabel dengan jQuery DataTables:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Menggunakan jQuery DataTables dengan PHP dan MySQL</title>
<!— Load CSS dari Bootstrap —>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<!— Load CSS dari jQuery DataTables —>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap.min.css" />
<!— Load JavaScript dari jQuery dan Bootstrap —>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!— Load JavaScript dari jQuery DataTables —>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap.min.js"></script>
<!— Panggil fungsi Datatables() untuk menampilkan data dalam format tabel —>
<script>
$(document).ready(function()
$('#example').DataTable();
);
</script>
</head>
<body>
<!— Tabel untuk menampilkan data siswa —>
<table id="example" class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Nama Siswa</th>
<th>Kelas Siswa</th>
<th>Jurusan Siswa</th>
<th>Alamat Siswa</th>
</tr>
</thead>
<tbody>
<?php
$koneksi = mysqli_connect("localhost", "username", "password", "contoh_db");
// Check koneksi
if (mysqli_connect_errno())
echo "Koneksi MySQL gagal: " . mysqli_connect_error();
$query = "SELECT * FROM siswa";
$result = mysqli_query($koneksi, $query);
$i = 1;
while ($row = mysqli_fetch_array($result))
echo "<tr>";
echo "<td>".$i."</td>";
echo "<td>".$row['nama_siswa']."</td>";
echo "<td>".$row['kelas_siswa']."</td>";
echo "<td>".$row['jurusan_siswa']."</td>";
echo "<td>".$row['alamat_siswa']."</td>";
echo "</tr>";
$i++;
mysqli_close($koneksi);
?>
</tbody>
</table>
</body>
</html>
Pada kode di atas, kita memanggil fungsi DataTable() pada bagian JavaScript untuk menampilkan data dalam format tabel. Kita juga menggunakan <table id="example"> untuk menandakan bahwa tabel ini akan diatur menjadi tabel interaktif oleh jQuery DataTables.
FAQ
Pertanyaan 1: Apa itu jQuery DataTables?
jQuery DataTables adalah plugin jQuery yang digunakan untuk menampilkan data dalam format tabel dengan fitur interaktif seperti pencarian, pengurutan, pemfilteran, dan sebagainya.
Jawaban:
jQuery DataTables sangat berguna dalam mempermudah pemrogram web dalam menampilkan data dalam format tabel dan memberikan interaksi yang beragam.
Pertanyaan 2: Apa itu MySQL?
MySQL adalah sistem manajemen basis data (DBMS) relasional yang bersifat open source. MySQL dirancang untuk mengatur, menyimpan, dan mengambil data dari sebuah database.
Jawaban:
MySQL sangat sering digunakan dalam pengembangan website dan program tertentu yang memerlukan database untuk menjalankan fungsinya, MySQL adalah salah satu pilihan open source DIbserver, namun juga dapat berbayar ketika digunakan pada commercial projects.
Video Tutorial
Berikut adalah video tutorial dari penggunaan jQuery DataTables dengan PHP dan MySQL:
