Menampilkan data Mysql Dengan PHP dan Datatables

1.Tambahkan script Datatable

Untuk dapat menggunakan datatable, maka kita akan menggunakan css dan javascript dari datatable, adapun template yang akan kita gunakan dari materi sebelumnya, klo belum lihat bisa cek di artikel ini membuat halaman login dan logout dengan php mysql, kemudian copy kan css dari datatable di bagian header dan js di bagian footer, untuk lebih jelasnya liat contoh berikut

<?php
ob_start();
session_start(); //aktifkan pemeriksaan session 
if (empty($_SESSION['username'])) { 
	//cek apakah user yang mengakses halaman ini sudah mendapatkan session pengenal sewaktu login
	header('location:login.php'); //jika tidak, arahkan untuk login
}
?>
<!DOCTYPE html>
<html lang="id">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Administrator</title>
		<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
		<link href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">
......

Kemudian pada bagian footer tambahkan javascript dari datatable, untuk lebih jelasnya lihat kode berikut :

.........................
<!-- jQuery -->
		<script src="//code.jquery.com/jquery.js"></script>
		<script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
		<!-- Bootstrap JavaScript -->
		<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
		<script>
			$(document).ready( function () {
			    $('#myTable').DataTable();
			} );
		</script>
	</body>
</html>

2.Buat Query ke database

setelah semua property datatable di tambahkan maka sekarang kita lakukan query ke tabel user dengan contoh kode seperti di bawah ini :

<table id="myTable" class="display" style="width:100%">
					        <thead>
					            <tr>
					                <th>No</th>
					                <th>Username</th>
					                <th>Password</th>
					            </tr>
					        </thead>
					        <tbody>
					            <?php 
					            	include 'koneksi.php';
					            	$no=1;
					            	foreach ($db->query("SELECT * FROM user") as $list) {
					            		echo "<tr>
								                <td>$no</td>
								                <td>$list[username]</td>
								                <td>$list[password]</td>
								            </tr>";
								    $no++;
					            	}
					            ?>
					        </tbody>
					    </table>

3.Source Code Lengkap

Untuk source code lengkapnya bisa anda cek di bawah ini :

<?php
ob_start();
session_start(); //aktifkan pemeriksaan session 
if (empty($_SESSION['username'])) { 
	//cek apakah user yang mengakses halaman ini sudah mendapatkan session pengenal sewaktu login
	header('location:login.php'); //jika tidak, arahkan untuk login
}
?>
<!DOCTYPE html>
<html lang="id">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Administrator</title>
		<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
		<link href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">

	</head>
	<body>
		<div class="container">
			<nav class="navbar navbar-default" role="navigation">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="#">Home</a>
				</div>
			
				<div class="collapse navbar-collapse navbar-ex1-collapse">
					<ul class="nav navbar-nav navbar-right">
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">Action <b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="#">Profil</a></li>
								<li><a href="logout.php">Logout</a></li>
							</ul>
						</li>
					</ul>
				</div><!-- /.navbar-collapse -->
			</nav>
			<div class="panel panel-primary">
				  <div class="panel-heading">
						<h3 class="panel-title">Administrator Panel</h3>
				  </div>
				  <div class="panel-body">
				  		<!-- jika session pengenal ada tampilkan -->
						Selamat Datang <?php echo $_SESSION['username']; ?><hr>
						<table id="myTable" class="display" style="width:100%">
					        <thead>
					            <tr>
					                <th>No</th>
					                <th>Username</th>
					                <th>Password</th>
					            </tr>
					        </thead>
					        <tbody>
					            <?php 
					            	include 'koneksi.php';
					            	$no=1;
					            	foreach ($db->query("SELECT * FROM user") as $list) {
					            		echo "<tr>
								                <td>$no</td>
								                <td>$list[username]</td>
								                <td>$list[password]</td>
								            </tr>";
								    $no++;
					            	}
					            ?>
					        </tbody>
					    </table>
				  </div>
			</div>
		</div>
		
		<!-- jQuery -->
		<script src="//code.jquery.com/jquery.js"></script>
		<script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
		<!-- Bootstrap JavaScript -->
		<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
		<script>
			$(document).ready( function () {
			    $('#myTable').DataTable();
			} );
		</script>
	</body>
</html>

4.Download source code

Jika masih terjadi error dan masih penasaran, berikut saya sediakan link download untuk source code nya

Baca Juga :   Membuat Laporan Excel Dengan PHP
download

Nah demikianlah tutorial singkat dari saya, jika ada yang perlu ditanyakan jangan lupa komentar ya

Leave a Reply

Your email address will not be published. Required fields are marked *