Tutorial DataTables Dengan PHP Dan MySQL – Datatables adalah sebuah library jquery yang memungkinkan kita untuk menampilkan data dalam bentuk tabel disertai dengan fitur paging, sorting dan searching secara otomatis. fitur fiur tersebut tentu sangat berguna bagi user dalam mengelola data pada aplikasi mereka.
Pada aplikasi ini kita akan belajar bagaimana menyajikan sebuah data dalam format tabel dengan bantuan library datatables dengan sumber data dari database MySQL dan bahasa pemograman PHP.
Membuat File Koneksi Ke Database
Pada langkah ini kita akan membuat sebuah file untuk menyimpan konfigurasi koneksi dari php ke web server, silahkan buat sebuah file baru dengan nama koneksi.php dan tulis script ini :
<?php
// host web server
$host = "localhost";
// username untuk mengakses database
$username = "root";
// password untuk mengakses database
$pass = "";
// database yang digunakan
$database = "tutorial";
// script untuk koneksi ke database
$koneksi = mysqli_connect($host,$username,$pass,$database);
?>Membuat Tabel Dan Mempersiapkan Data Dummy
Sekarang kita akan menggunakan tabel employees dari database yang bisa anda buat, kemudian silahkan import database tersebut menggunakan PHPMyaadmin, untuk struktur dari tabel employees sendiri adalah sebagai berikut :
Kemudian dibawah ini adalah beberapa contoh data dari tabel employees :
Menampilkan Data Dengan Library DataTables
Langkah selanjutnya kita akan membuat sebuah halaman untuk menampilkan data yang sudah kita siapkan tadi, silahkan buat sebuah file baru dengan nama datatables.php dan tulislah script berikut ini :
<!DOCTYPE html>
<html>
<head>
<title>Tutorial PHP Datatables Dengan PHP Dan MySQL</title>
<link rel="stylesheet" type="text/css" media="screen" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="tabel-data">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Job Title</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<?php
include 'koneksi.php';
$employee = mysqli_query($koneksi,"select * from employees");
while($row = mysqli_fetch_array($employee))
{
echo "<tr>
<td>".$row['firstName']."</td>
<td>".$row['lastName']."</td>
<td>".$row['jobTitle']."</td>
<td>".$row['email']."</td>
</tr>";
}
?>
</tbody>
<script>
$(document).ready(function(){
$('#tabel-data').DataTable();
});
</script>
</table>
</body>
</html>sekarang silahkan simpan file tersebut, kemudian silahkan buka web browser anda dan silahkan masukan http://localhost/login/datatables.php pada addres bar, jika semua langkah yang anda lakukan sudah benar maka akan muncul tampilan seperti dibawah ini :
Menggunakan Template Datatables Boostrap 4
Agar tampilan dari menjadi lebih menarik maka kita akan menggunakan themes boostrap pada datatables yang sudah kita buat tadi, cara nya sangat mudah karna kita hanya perlu menyisipkan
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" />
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
atau jika masih bingung, maka sekarang pada bagian head dari struktur dasar HTMLnya menjadi seperti ini :
<head>
<title>Tutorial PHP Datatables Dengan PHP Dan MySQL</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
</head>sekarang silahkan anda buka lagi file datatables.php dan hasilnya akan menjadi seperti dibawah ini :
Source Code Bridging BPJS dengan simrs tutorial php lengkap untuk bridging bpjs dengan simrs agag sulit kita dapatkan diinternet. Namun Read more
Tutorial Codeigniter Gratis Membangun Sistem Informasi Akademik Codeigniter adalah salah satu framework yang bisa digunakan untuk membuat aplikasi dengan menggunakan Read more
Download PHP Sistem Pakar Penyakit Manusia Berbasis Web Sistem pakar atau dalam bahasa Inggris disebut dengan Expert System adalah sebuah Read more
WhatsApp Messenger merupakan aplikasi pesan lintas platform yang memungkinkan kita bertukar pesan tanpa biaya SMS, karena WhatsApp Messenger menggunakan paket Read more