Tutorial PHP Pemula Part 25 : Cara Menggunakan Plugin DataTables Dengan PHP Dan MYSQLi
Tutorial PHP Pemula Part 25 : Cara Menggunakan Plugin Datatables Dengan PHP Dan MYSQLi - Hello everyone selamat datang kembali diwebsite saya belajarwithib.my.id, pada seri kali ini kita akan masih mempelajari Cara Menggunakan Plugin Datatables Dengan PHP Dan MYSQLi.
Sepertinya teman-teman sering mendengar DataTables ketika
sudah berhubungan dengan Data, Nah kebetulan Plugin DataTables ini dapat
membantu kamu dalam mengelolah Data yang ingin ditampilkan karena DataTables
ini menyediakan fitur seperti Sortir data, Pagination atau penomoran, Form
pencarian data dll. Sangat membantu sekali apa bila kamu menggunakan ini,
kebetulan sekali pada kesempatan kali ini saya akan membuat tutorial Cara Menggunakan Plugin Datatables Dengan
PHP Dan MYSQLi.
Cara Menginstal Plugin DataTables
Sebagai
langkah pertama kamu harus mengerti dulu bagaimana cara menginstal Plugin
DataTablesnya agar dapat bekerja didalam Web kamu, Disini ada dua cara yang
saya berikan untuk cara menginstalnya, yang pertama menggunakan CDN dan kedua
mendownload/Instal secara manual.
Sebelum itu silahkan download file nya dengan klik disini .
CDN
Jika kamu memakai CDN maka kamu harus
menggunakan Internet agar file dapat diakses. Contoh penggunaanya seperti
dibawah :
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>
Instal Manual
Jika Kamu
memilih untuk tidak menggunakan CDN, dan sebaliknya memiliki file yang
dihosting di server Kamu sendiri, atau jika Kamu ingin mengubah file sama
sekali, itu mudah untuk menggunakan DataTables.
Cukup Download
Filenya Disini untuk mengunduh versi terbaru DataTables.
Contoh penggunaanya seperti dibawah ini :
<link rel="stylesheet" type="text/css" href="assets/DataTables/datatables.css">
<script type="text/javascript" charset="utf8" src="assets/DataTables/datatables.js"></script>
Namun pada
tutorial ini saya akan menggunakan CDN sebagai contoh saja.
Cara Menggunakan Plugin DataTables
Cara
penggunaan DataTables sangatlah mudah, jika kamu sudah berhasil memanggil
Jquery, Plugin DataTables atau file yang diperlukan maka kamu hanya membuat
table lalu didalamnya ada ID khusus guna untuk trigged memunculkan
DataTablesnya dan dalam pembuatan tablenya kamu harus menggunakan tag <thead> untuk bagian kepala table dan
tag <tbody> untuk bagian badan table. Contoh sederhananya seperti dibawah
ini :
Buat file
dengan nama index.php lalu ketikanlah kode dibawah ini
Index.php
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<!-- DATATABLES CSS-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css">
<title>Cara Menggunakan Plugin DataTables Dengan PHP Dan MYSQLi - belajarwithib</title>
</head>
<body>
<div class="container">
<center><h2>Cara Menggunakan Plugin DataTables Dengan PHP Dan MYSQLi - belajarwithib</h2></center>
<table class="table mt-4" id="myTable">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Nama Siswa</th>
<th scope="col">Kelas</th>
<th scope="col">Jurusan</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>XII</td>
<td>RPL</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>XII</td>
<td>TKJ</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>XI</td>
<td>MP</td>
</tr>
<tr>
<td>4</td>
<td>Makmur</td>
<td>XII</td>
<td>AK</td>
</tr>
<tr>
<td>5</td>
<td>Samsul</td>
<td>XII</td>
<td>TKJ</td>
</tr>
</tbody>
</table>
</div>
<!-- JQUERY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- DATATABLES JS -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready( function () {
$('#myTable').DataTable();
} );
</script>
</body>
</html>
Jika sudah
maka hasilnya akan seperti dibawah ini :
Penjelasan Singkat
Nah pada
bagian <head> dan didalam <body> saya memberikan code dibawah ini
agar untuk memanggil filenya menggunakan CDN karena DataTables ini memerlukan
Jquery jadi saya juga memanggil Jquerynya menggunakan CDN.
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<!-- DATATABLES CSS-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css">
<!-- JQUERY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- DATATABLES JS -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>
Setelah itu saya memberikan fungsi kepada DataTablesnya sebagai sentuhan akhir.
<script type="text/javascript">
$(document).ready( function () {
$('#myTable').DataTable();
} );
</script>
Karena pada tag table ada atribut id yang berisi “myTable” jadi pada sentuhan akhirnya kita juga mengambil nilai id nya menggunakan jquery.
<table class="table mt-4" id="myTable">
Lalu bagaimana jika kita menggunakan PHP dan MYSQLi? Yuk simak kebawah!
Cara Menggunakan Plugin Datatables Dengan PHP Dan MYSQLi
Konsepnya
sama seperti kita memanggil data menggunakan dengan PHP. Langkah pertama
siapkan dulu databasenya dengan nama “belajarwithib” atau terserah saja dan
buat table dengan nama table “siswa” atau kamu bisa tiru seperti dibawah ini :
Jika sudah
kamu bisa memasukan data terserah apa itu yang penting ada data didalam
tablenya atau kamu bisa juga meniru seperti apa yang saya buat seperti dibawah
ini :
Atau salin
SQL dibawah ini sebagai insert datanya.
INSERT INTO `siswa` (`id_siswa`, `siswa_nama`, `siswa_kelas`, `siswa_jurusan`) VALUES (NULL, 'Mark', 'XII', 'RPL'), (NULL, 'Jacob', 'XII', 'TKJ'), (NULL, 'Larry', 'XI', 'MP'), (NULL, 'Makmur', 'XII', 'AK'), (NULL, 'Samsul', 'XII', 'TKJ');
Setelah berhasil membuat database dan tablenya, maka selanjutnya kamu buat lah file baru dengan nama index.php lalu ketikanlah code seperti dibawah ini :
Index.php
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<!-- DATATABLES CSS-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css">
<title>Cara Menggunakan Plugin DataTables Dengan PHP Dan MYSQLi - belajarwithib</title>
</head>
<body>
<div class="container">
<center><h2>Cara Menggunakan Plugin DataTables Dengan PHP Dan MYSQLi - belajarwithib</h2></center>
<table class="table mt-4" id="myTable">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Nama Siswa</th>
<th scope="col">Kelas</th>
<th scope="col">Jurusan</th>
</tr>
</thead>
<tbody>
<?php
$koneksi = mysqli_connect("localhost","root","","belajarwithib");
$no = 1;
$query = mysqli_query($koneksi,"SELECT * FROM siswa");
while ($row = mysqli_fetch_array($query)) {
?>
<tr>
<td><?php echo $no++; ?></td>
<td><?php echo $row['siswa_nama']; ?></td>
<td><?php echo $row['siswa_kelas']; ?></td>
<td><?php echo $row['siswa_jurusan']; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<!-- JQUERY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- DATATABLES JS -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready( function () {
$('#myTable').DataTable();
} );
</script>
</body>
</html>
Silahkan simpan file tersebut lalu jalankan diweb browser jika kamu benar atau berhasil menggunakannya Maka hasilnya akan seperti contoh yang sebelumnya.
File Mendukung Untuk Belajar
Download Source Code Hasil Belajar Cara Menggunakan Plugin DataTables Dengan PHP Dan MYSQLi