AngularJS Search with PHP/MySQLi

Submitted by nurhodelta_17 on Saturday, December 30, 2017 - 12:09.

Getting Started

I've used CDN for Bootstrap and Angular JS in this tutorial so you need internet connection for them to work.

Creating our Database

First, we're gonna create our database and insert sample data to be used in this tutorial. 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 that contains our table that we are going to search and our search input.

<!DOCTYPE html>
<html >
<head>
        <title>AngularJS Search with PHP/MySQLi</title>
        <meta charset="utf-8">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
</head>
<body ng-app="app" ng-controller="search" ng-init="fetch()">
<div class="container">
        <h1 class="page-header text-center">AngularJS Search 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" class="form-control" ng-keyup="search()" ng-model="keyword">
                                </div>
                        </div>
                        <table class="table table-bordered table-striped" style="margin-top:10px;">
                                <thead>
                                        <th>Firstname</th>
                                        <th>Lastname</th>
                                        <th>Address</th>
                                </thead>
                                <tbody>
                                        <tr ng-repeat="member in members">
                                                <td>{{ member.firstname }}</td>
                                                <td>{{ member.lastname }}</td>
                                                <td>{{ member.address }}</td>
                                        </tr>
                                        <tr ng-show="fail">
                                                <td colspan="3" class="text-center">Member not Found</td> 
                                        </tr>
                                </tbody>
                        </table>
                </div>
        </div>
</div>
<script src="angular.js"></script>
</body>
</html>

angular.js

This contains our angular js code which contains our fetch and search function.

var app = angular.module('app', []);
app.controller('search', function($scope, $http){
        $scope.fetch = function(){
                $http.get('fetch.php')
                .success(function(data){
                        $scope.members = data;
                });
 
        }
 
        $scope.search = function(){
                $http.post(
            "search.php", {
                'keyword': $scope.keyword,
            }
        ).success(function(data) {
                $scope.members = data;
                if(data==''){
                        $scope.fail = true;     
                }
                else{
                        $scope.fail = false;    
                }
        });
        }       
});

fetch.php

This is our PHP code in fetching 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);
?>

search.php

Lastly, this is our PHP code for our search.

<?php
        $conn = new mysqli('localhost', 'root', '', 'angular');
 
        $data = json_decode(file_get_contents("php://input"));
        $output = array();
 
        $sql = "SELECT * FROM members WHERE firstname LIKE '%$data->keyword%' OR lastname LIKE '%$data->keyword%' OR address LIKE '%$data->keyword%'";
        $query=$conn->query($sql);
        while($row=$query->fetch_array()){
                $output[] = $row;
        }
 
        echo json_encode($output);
?>

That ends this tutorial. Happy Coding :)

Add new comment

188 views