AngularJS Built-in Search and Sort with PHP/MySQLi

Submitted by nurhodelta_17 on Tuesday, January 2, 2018 - 17:10.

Getting Started

I've used CDN for Bootstrap, Font-awesome and Angular JS so you need internet connection for them to work.

Creating our Database

First, we are going to create our database and insert sample data into it. 1. Open phpMyAdmin. 2. Click databases, create a database and name it as angular. 3. After creating a database, click the SQL and paste the below codes. See image below for detailed instruction.

CREATE TABLE `members` (
  `memid` int(11) NOT NULL AUTO_INCREMENT,
  `firstname` varchar(30) NOT NULL,
  `lastname` varchar(30) NOT NULL,
  `address` text NOT NULL,
PRIMARY KEY(`memid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `members` (`memid`, `firstname`, `lastname`, `address`) VALUES
(1, 'Neovic', 'Devierte', 'Silay City'),
(2, 'Julyn', 'Divinagracia', 'E.B. Magalona'),
(3, 'Gemalyn', 'Cepe', 'Bohol')

index.php

Next, we create our index which contains our table and search box in sorting our table data.

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="utf-8">
    <title>AngularJS Built-in Search and Sort with PHP/MySQLi</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
 
    <style type="text/css">
        .gray{
                color:gray;
        }
    </style>
</head>
<body ng-controller="memberdata">
<div class="container">
    <h1 class="page-header text-center">AngularJS Built-in Search and Sort with PHP/MySQLi</h1>
    <div class="row">
                <div class="col-md-8 col-md-offset-2">
                        <div class="row">
                                <div class="col-md-4 col-md-offset-8">
                                        <input type="text" ng-model="search" class="form-control" placeholder="Search">
                                </div>
                        </div>
                        <table class="table table-bordered table-striped" style="margin-top:10px;">
                                <thead>
                    <tr>
                        <th ng-click="sort('memid')">Member ID
                                <span class="pull-right">
                                        <i class="fa fa-sort gray" ng-show="sortKey!='memid'"></i>
                                        <i class="fa fa-sort" ng-show="sortKey=='memid'" ng-class="{'fa fa-sort-asc':reverse,'fa fa-sort-desc':!reverse}"></i>
                                </span>
                        </th>
                        <th ng-click="sort('firstname')">First Name
                                <span class="pull-right">
                                        <i class="fa fa-sort gray" ng-show="sortKey!='firstname'"></i>
                                        <i class="fa fa-sort" ng-show="sortKey=='firstname'" ng-class="{'fa fa-sort-asc':reverse,'fa fa-sort-desc':!reverse}"></i>
                                </span>
                        </th>
                        <th ng-click="sort('lastname')">Last Name
                                <span class="pull-right">
                                        <i class="fa fa-sort gray" ng-show="sortKey!='lastname'"></i>
                                        <i class="fa fa-sort" ng-show="sortKey=='lastname'" ng-class="{'fa fa-sort-asc':reverse,'fa fa-sort-desc':!reverse}"></i>
                                </span>
                        </th>
                        <th ng-click="sort('address')">Address
                                <span class="pull-right">
                                        <i class="fa fa-sort gray" ng-show="sortKey!='address'"></i>
                                        <i class="fa fa-sort" ng-show="sortKey=='address'" ng-class="{'fa fa-sort-asc':reverse,'fa fa-sort-desc':!reverse}"></i>
                                </span>
                        </th>
                    </tr>
                </thead>
                                <tbody>
                                        <tr ng-repeat="member in members|orderBy:sortKey:reverse|filter:search">
                                                <td>{{ member.memid }}</td>
                                                <td>{{ member.firstname }}</td>
                                                <td>{{ member.lastname }}</td>
                                                <td>{{ member.address }}</td>
                                        </tr>
                                </tbody>
                        </table>
                </div>
        </div>
</div>
<script src="angular.js"></script>
</body>
</html>

Notice that in our tbody in tr tag we have added filter:search. This will filter our table using search model which we have declared in our search box. That is the built-in search/filter of Angular JS.

angular.js

This is our Angular JS code which contains our script in fetching data from our api and our table sorting.

var app = angular.module('app', []);
app.controller('memberdata',function($scope, $http){
    $http.get("fetch.php").success(function(data){ 
        $scope.members = data; 
    });
 
    $scope.sort = function(keyname){
        $scope.sortKey = keyname;   
        $scope.reverse = !$scope.reverse;
    }
});

fetch.php

Lastly, this is our PHP API that fetches data from our database.

<?php
        $conn = new mysqli('localhost', 'root', '', 'angular');
        $output = array();
        $sql = "SELECT * FROM members";
        $query=$conn->query($sql);
        while($row=$query->fetch_array()){
                $output[] = $row;
        }
 
        echo json_encode($output);
?>

That ends this tutorial. Happy Coding :)

Add new comment

89 views