Cara Pasang Jquery Datatable di PHP & MYSQL Database

Halo teman teman semua, selamat datang di tutorial tutorial pemrogramman web Dumet School, kali ini kita akan belajar Cara Pasang Jquery Datatable di PHP & MYSQL Database, library Datatable ini adalah buatan dari JQeury, dimana fungsi nya untuk membuat data-data kita menjadi rapi di dalam sebuah table, yang mana table tersebut bisa kita urutkan, bisa kita search, dan sudah ada fungsi pagination di dalamnya. penasaran yuk kita praktekan saja teman teman.

sebelumnya kalian buat dulu tble dengan nama provinsi seperti yang saya buat berikut.

dan insert data provinsi berikut di sql kalian

INSERT INTO `provinsi` VALUES
  ('11', 'ACEH'),
  ('12', 'SUMATERA UTARA'),
  ('13', 'SUMATERA BARAT'),
  ('14', 'RIAU'),
  ('15', 'JAMBI'),
  ('16', 'SUMATERA SELATAN'),
  ('17', 'BENGKULU'),
  ('18', 'LAMPUNG'),
  ('19', 'KEPULAUAN BANGKA BELITUNG'),
  ('21', 'KEPULAUAN RIAU'),
  ('31', 'DKI JAKARTA'),
  ('32', 'JAWA BARAT'),
  ('33', 'JAWA TENGAH'),
  ('34', 'DI YOGYAKARTA'),
  ('35', 'JAWA TIMUR'),
  ('36', 'BANTEN'),
  ('51', 'BALI'),
  ('52', 'NUSA TENGGARA BARAT'),
  ('53', 'NUSA TENGGARA TIMUR'),
  ('61', 'KALIMANTAN BARAT'),
  ('62', 'KALIMANTAN TENGAH'),
  ('63', 'KALIMANTAN SELATAN'),
  ('64', 'KALIMANTAN TIMUR'),
  ('65', 'KALIMANTAN UTARA'),
  ('71', 'SULAWESI UTARA'),
  ('72', 'SULAWESI TENGAH'),
  ('73', 'SULAWESI SELATAN'),
  ('74', 'SULAWESI TENGGARA'),
  ('75', 'GORONTALO'),
  ('76', 'SULAWESI BARAT'),
  ('81', 'MALUKU'),
  ('82', 'MALUKU UTARA'),
  ('91', 'PAPUA BARAT'),
  ('94', 'PAPUA');

setelah itu kita buat file yang bernama data.php

<?php 

	$server = "localhost";
	$user 	= "dumet";
	$pass 	= "school";
	$dbname = "webmaster";

	$conn = mysqli_connect($server, $user, $pass, $dbname);
	if(!$conn){
		die("Connection Failed: " .mysqli_connect_error());
	}
	
	$provinsi = mysqli_query($conn, "SELECT * FROM provinsi");

 ?>

untuk koneksi sesuaikan dengan setingan database mysql kalian yah teman teman

setelah itu kita buat file dengan nama index.php

<?php include 'data.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Welcome </title>
	<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
	
</head>
<body>
	<div>
		<h1>JQuery Datatable</h1>
		<table id="myTable" class="display" width="100%">
			<thead>
				<tr>
					<th>Id Provinsi</th>
					<th>Nama Provinsi</th>
				</tr>
			</thead>
			<tbody>
				<?php foreach ($provinsi as $prov) { ?>
					<tr>
						<td width="20%"><?php echo $prov['id'] ?></td>
						<td width="80%"><?php echo $prov['nama_provinsi'] ?></td>
					</tr>
				<?php } ?>
			</tbody>
		</table>
	</div>
	<!-- file javascript di sini -->
</body>
</html>

setelah itu kalian buat script berikut sebelum penutup body

nah selesei sudah, tinggal kita jalankan teman teman.

seperti di atas tampilannya, coba kalian lakukan pencarian, misalnya saya akan mencara provinsi yang bernama jambi misalnya, maka hanya data jambi yang muncul di dalam tabel tersebut.

sekian tutorial Cara Pasang Jquery Datatable di PHP & MYSQL Database