PHP AngularJS Menampilkan Data dari Database MySQL
Dalam menampilkan data dari database dengan menggunakan framework AngularJS, kita tetap membutuhkan bahasa pemrograman PHP. Karena AngularJS merupakan Front-end framework JavaScript yang tugasnya menampilkan data setelah proses pembacaan data dilakukan oleh PHP. Format data yang ditampilkan oleh framework AngularJS berbentuk JSON, oleh karena itu di proses pembacaan data dari database oleh PHP harus kita konversi ke JSON terlebih dahulu.
Output atau hasil akhir dalam tutorial ini ditunjukkan oleh Gambar.1 dibawah ini :
Langkah-langkahnya
1. Create databaseDatabasenya diberinama
angularcrud, , kemudian untuk nama tabelnya diberinama mahasiswa yang memiliki empat field yaitu : no, nim, nama dan mahasiswa seperti kode sql berikut ini :CREATE TABLE IF NOT EXISTS `mahasiswa` (
`no` int(11) NOT NULL,
`nim` int(11) NOT NULL,
`nama` varchar(25) NOT NULL,
`jurusan` varchar(20) NOT NULL,
PRIMARY KEY (`nim`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;Kemudian kita tambahkan data ke dalam tabel tersebut seperti kode dibawah ini :
INSERT INTO `mahasiswa` (`no`, `nim`, `nama`, `jurusan`) VALUES
(1, 22008001, 'Alhadi', 'Teknik Informatika'),
(2, 32008001, 'Reza', 'Elektro'),
(3, 32008002, 'Desi', 'Elektro');2. Create file angular_read.html
Anda dapat memberikan nama file tersebut dengan nama lain, seperti index.html dsb. Dalam file ini kita akan memanggil beberapa file library yang dibutuhkan. Library yang terutama adalah library AngularJS.
Karena kita ingin mengimplementasikan tabelnya dengan bootstrap, bahkan seluruh interface yang kita gunakan menggunakan bootstrap, maka selain library AngularJS, kita juga memangil library bootstrap juga.
Kode dalam file angular_read.html :
<!DOCTYPE html>
<html ng-app="readApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="ilmu-detil.blogspot.com">
<title>Tutorial AngularJS Display Data</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/ilmudetil.css">
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery-1.11.3.min.js"></script>
<script src="assets/js/angular.min.js"></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
Pusat Ilmu Secara Detil</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class="clr1 active"><a href="index.html">Home</a></li>
<li class="clr2"><a href="">Programming</a></li>
<li class="clr3"><a href="">English</a></li>
</ul>
</div>
</div>
</div>
</br></br></br></br>
<div class="container" ng-controller="DbController">
<div class="row">
<div class="col-md-6">
<caption >Tabel.1 Data Mahasiswa</caption>
<div class="table-responsive">
<table class="table table-hover table-bordered">
<tr class="success">
<th>No.</th>
<th>NIM</th>
<th>Nama</th>
<th>Jurusan</th>
</tr>
<tr ng-repeat="data in database">
<td>{{data.no}}</td>
<td>{{data.nim}}</td>
<td>{{data.nama}}</td>
<td>{{data.jurusan}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- Bagian controller -->
<script src="readController.js"></script>
</body>
</html>
Output untuk langkah ke-2 ini ditunjukkan oleh Gambar.2 dibawah ini :
Kode
ng-app="readApp" memberitahukan AngularJS bahwa ini adalah elemen root dari aplikasi AngularJS. readApp merupakan nama modul dari ng-app. Kode
ng-controller="DbController" merupakan bagian yang mengelola data dari sebuah aplikasi AngularJS.DbController merupakan method yang nantinya akan memanggil file php untuk merequest hasil pembacaan data dari database.ng-repeat merupakan directive yang bertujuan menampilkan suatu nilai secara berulang, sejenis looping. Bagian data in database terdiri dari dua bagian :data dan database, dimana data berfungsi sebagai "key" untuk mengambil nilainya, sedangkan database merupakan object yang menyimpan nilai dari directive ng-repeat. 3. Create file readController.js
Dalam file ini kita akan memanggil file read.php untuk melakukan proses pembacaan data dari database, kemudian dikembalikan ke file readController.js
var crudApp = angular.module('readApp',[]);
crudApp.controller("DbController",['$scope','$http', function($scope,$http){
getMhs();
function getMhs()
{
$http.post('read.php').success(function(data){
$scope.database = data;
});
}
}]);4. Create file koneksi.php
Dalam file ini kita akan membangun koneksi ke database :
<?php
$con = mysqli_connect("localhost", "root", "", "angularcrud");
?>5. Create file read.php
File inilah yang sesungguhnya membaca data dari database, kemudian mengembalikan nilai-nilainya kepada file readController.js :
<?php
require_once 'koneksi.php';
$query = "SELECT * from mahasiswa";
$result = mysqli_query($con, $query);
$arr = array();
if(mysqli_num_rows($result) != 0) {
while($row = mysqli_fetch_assoc($result)) {
$arr[] = $row;
}
}
echo $json_info = json_encode($arr);
?> 
