Display Data from Database using PHP AngularJS
In displaying data from database using AngularJS Framework, we still need PHP programming language. Because AngularJS is Front-end JavaScript Framework which display data after the reading of data is done by PHP in advance. The data displayed by AngularJS in JSON, therefore in the reading of data from database by PHP we must convert to JSON first.
The output or final result in this tutorial is shown in Figure 1 below
Step-by-Step Guide
1. Create databaseIn this tutorial we create database's name is
angularcrud, and table's namet is mahasiswa which has four fields are: no, nim, name and mahasiswa like the following sql code:
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;Then we add the data into the table like the code below:
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
In this file we will call some library files needed. The main library is the AngularJS library.
<!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>The output for this 2nd step is shown in Figure 2 below:
The code
ng-app="readApp" specifies that it is the root element of the AngularJS application where ReadApp is the module name of ng-ap.
The code of ng-controller = "DbController" is the part that manages data from an AngularJS. DbController is a method that will invoke the php file to request the data from the database.
ng-repeat is a directive that aims to display a value repeatedly, a kind of looping. The data in in database consists of two parts: data and database, where data serves as a "key" to retrieve its value, while the database is an object that stores the value of directive ng-repeat.3. Create file readController.js
In this file we will call the read.php file to perform the process of reading the data from the database, then returned to the 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
5. Create file read.php This file actually reads the data from the database, then returns the values to the readController.js file:
<?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);
?> 