Cara Membuat Pagination Dengan AngularJS Dalam PHP MySQL

Hallo sahabat Dumet School, pada kesempatan kali ini kita akan belajar Membuat Pagination dengan AngularJS dalam PHP MySQL. Jadi kita akan menampilkan data dari table database MySQL, lalu jumlah data yang akan ditampilkan diberikan batasan sehingga membutuhkan pagination. Jadi untuk melihat data berikutnya dibutuhkan navigasi pagination, nah disini kita akan mengunakan AngularJS untuk membuatnya.Langkah Pertama Membuat Pagination dengan AngularJS dalam PHP MySQL:

Sahabat siapkan data yang akan ditampilkan daria database seperti contoh berikut ini

Langkah Kedua coba buat file index lalu ketikkan code dibawah ini

<!DOCTYPE html>
<html>
	<head>
		<title>Membuat Pagination Menggunakan AngularJS di PHP</title>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
        <script src="pagination.js"></script>
	</head>
	<body>
		<div class="container" ng-app="paginationApp" ng-controller="paginationController">
			<br />
			<h3 align="center">Membuat Pagination Menggunakan AngularJS di PHP</h3>
			<br />
			<div class="table-responsive">
				<table class="table table-striped table-bordered">
					<thead>
						<tr>
							<th>Nama</th>
							<th>No. Handphone</th>
						</tr>
					</thead>
					<tbody>
                                               //  yang akan ditampilkan 5 data per-page
						<tr dir-paginate="singleData in allData|itemsPerPage:5">
							<td>{{ singleData.murid_name }}</td>
							<td>{{ singleData.murid_phone }}</td>
						</tr>
					</tbody>
				</table>
			</div>

			<div align="center">
                                // maksimal 5 link yang aktif dalam pagination
				<dir-pagination-controls max-size="5" direction-links="true" boundary-links="true" >
				</dir-pagination-controls>
			</div>
		</div>
	</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Membuat Pagination Menggunakan AngularJS di PHP</title>

</head>

<body>

<br />

<h3 align="center">Membuat Pagination Menggunakan AngularJS di PHP</h3>

<br />

<thead>

<tr>

<th>No. Handphone</th>

</tr>

</thead>

<tbody>

// yang akan ditampilkan 5 data per-page

<td>{{ singleData.murid_name }}</td>

<td>{{ singleData.murid_phone }}</td>

</tr>

</tbody>

</table>

</div>

// maksimal 5 link yang aktif dalam pagination

<dir-pagination-controls max-size="5" direction-links="true" boundary-links="true" >

</dir-pagination-controls>

</div>

</body>

</html>

Langkah Ketiga kita harus membuat koneksi ke dalam database tentunya seperti code berikut

<?php


$connect = new PDO("mysql:host=localhost;dbname=belajar-php", "root", "");
$query = "SELECT * FROM tbl_murid ORDER BY murid_id ASC";
$statement = $connect->prepare($query);
if($statement->execute())
{
	while($row = $statement->fetch(PDO::FETCH_ASSOC))
	{
		$data[] = $row;
	}
	echo json_encode($data);
}

?>

<?php

$connect = new PDO("mysql:host=localhost;dbname=belajar-php", "root", "");

$query = "SELECT * FROM tbl_murid ORDER BY murid_id ASC";

$statement = $connect->prepare($query);

if($statement->execute())

{

while($row = $statement->fetch(PDO::FETCH_ASSOC))

{

$data[] = $row;

}

echo json_encode($data);

}

Jika sudah coba sekarang sahabat tambahkan script dari Javascript yang nanti akan berhubungan dengan link dari file pagination.js, silahkan ketik seperti dibawah ini

<script>
var pagination_app = angular.module('paginationApp', ['angularUtils.directives.dirPagination']);
pagination_app.controller('paginationController', function($scope, $http){
	$http.get('koneksi.php').success(function(data){
		$scope.allData = data;
	});
});
</script>

var pagination_app = angular.module('paginationApp', ['angularUtils.directives.dirPagination']);

pagination_app.controller('paginationController', function($scope, $http){

$http.get('koneksi.php').success(function(data){

$scope.allData = data;

});

</script>

Setelah selesai mengetikkan semua file diatas sekarang jalankan pada browser masing-masing apakah sudah sesuai seperti tampilan berikut:

Saya kira cukup pembahsaan kali ini tentangÂ Cara Membuat Pagination dengan AngularJS dalam PHP MySQL.Â semoga bermanfaat dan sampai jumpa dilain kesempatan. Selamat mencoba dan terima kasih

Facebook DUMET School

Konsultasi Gratis

Categories