In this article will show how to display and search a student record using AngularJS and PHP. The code is very easy to understand and use.
My email address are the following jakerpomperada@gmail.com and jakerpomperada@yahoo.com.
My mobile number here in the Philippines is 09173084360.
Thank you.
Sample Program Output
index.php
<html ng-app="fetch">
<head>
<title>AngularJS and PHP in AngularJS and PHP </title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
</head>
<body>
<br>
<style>
body {
font-family:arial;
font-weight:bold;
size:12px;
background-color:lightblue;
}
</style>
<div class="row">
<div class="container">
<h1>Student Record System in AngularJS and PHP</h1>
<br><br>
<div ng-controller="dbCtrl">
Type Student Name or ID Number Here
<br><br>
<input type="text" ng-model="searchFilter" class="form-control">
<br><br>
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Student Name</th>
<th>Course</th>
<th>Email Address</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="students in data | filter:searchFilter">
<td>{{students.student_id}}</td>
<td>{{students.name}}</td>
<td>{{students.course}}</td>
<td>{{students.email}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
<script>
var fetch = angular.module('fetch', []);
fetch.controller('dbCtrl', ['$scope', '$http', function ($scope, $http) {
$http.get("ajax.php")
.success(function(data){
$scope.data = data;
})
.error(function() {
$scope.data = "error in fetching data";
});
}]);
</script>
</html>
ajax.php
<?php
//database settings
$connect = mysqli_connect("localhost", "root", "", "school");
$result = mysqli_query($connect, "select * from students order by name ASC");
$data = array();
while ($row = mysqli_fetch_array($result)) {
$data[] = $row;
}
print json_encode($data);
?>
-- phpMyAdmin SQL Dump
-- version 4.6.5.2
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Jul 12, 2017 at 11:51 AM
-- Server version: 10.1.21-MariaDB
-- PHP Version: 5.6.30
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
--
-- Database: `school`
--
-- --------------------------------------------------------
--
-- Table structure for table `students`
--
CREATE TABLE `students` (
`id` int(11) NOT NULL,
`student_id` varchar(20) NOT NULL,
`name` varchar(200) NOT NULL,
`course` varchar(200) NOT NULL,
`email` varchar(200) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `students`
--
INSERT INTO `students` (`id`, `student_id`, `name`, `course`, `email`) VALUES
(1, '1', 'Bill Gates', 'BS Information Technology', 'bill_gates@yahoo.com.ph'),
(2, '2', 'Digong Duterte', 'BS LAW', 'digong@davao.gov.ph'),
(3, '3', 'Kobe Bryant', 'BS Managerial Accounting', 'kobe@la_lakers.com'),
(4, '4', 'Carina Tan', 'MS Information Technology', 'carina_tan@hotmail.com'),
(5, '5', 'Alma Duterte', 'MAED-IT', 'alma_duterte@lycos.com.ph'),
(6, '6', 'Baste Duterte', 'BS Marine Technology', 'baste@cnn.com.ph'),
(7, '7', 'Jake Pomperada', 'BS Computer Science', 'jakerpomperada@yahoo.com'),
(8, '8', 'Jacob Samuel Pomperada', 'BS Computer Engineering', 'jacob_samuel_pomperada@gmail.com'),
(9, '9', 'Ma. Junallie F. Pomperada,PH.D', 'BS Chemical Engineering', 'alliepomperada@yahoo.com.ph'),
(10, '10', 'Julianna Rae F. Pomperada', 'BS Business Management', 'iyapomperada@live.com');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `students`
--
ALTER TABLE `students`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `students`
--
ALTER TABLE `students`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=11;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
