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

Cara Menggunakan Plugin DataTables Dengan PHP  Dan MYSQLi

­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 :

Cara Menggunakan Plugin DataTables Dengan PHP  Dan MYSQLi


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 :

Cara Menggunakan Plugin DataTables Dengan PHP  Dan MYSQLi


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 :

Cara Menggunakan Plugin DataTables Dengan PHP  Dan MYSQLi

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

 Semoga Bermanfaat!