AngularJS Search Suggestion with PHP/MySQLi and UI-Router

Submitted by nurhodelta_17 on Tuesday, January 16, 2018 - 19:18.

Getting Started

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

Creating our Database

First, we're gonna create our MySQL Database where we get our data. 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'),
(4, 'Tintin ', 'Demapanag', 'Talisy City'),
(5, 'Tintin ', 'Devierte', 'Silay City');

index.html

This is the main view of our app.

<!DOCTYPE html>
<html ng-app="app">
<head>
        <title>AngularJS Search Suggestion 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.5.7/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
        <style type="text/css">
                .sug-list{
                    background-color: #4CAF50; 
                    border: 1px solid #FFFFFF; 
                    color: #FFFFFF; 
                    padding: 10px 24px; 
                    cursor: pointer; 
                    width: 100%;
                    display: block;
                        margin-top:1px;
                }
                .sug-list:not(:last-child) {
                border-bottom: none; 
                }
                .sug-list a {
                        text-decoration:none;
                        color: #FFFFFF;
                }
                .no-sug{
                    background-color: #4CAF50; 
                    border: 1px solid #FFFFFF; 
                    color: #FFFFFF; 
                    padding: 10px 24px;  
                    width: 100%;
                    display: block;
                        margin-top:1px;
                }
        </style>  
</head>
<body>
<div class="container">
        <h1 class="page-header text-center">AngularJS Search Suggestion with PHP/MySQLi</h1>
        <div ui-view></div>
</div>
<script src="app.js"></script>
</body>
</html>

app.js

This is the main angular js script of our app.

var app = angular.module('app', ['ui.router']);
 
app.config(function($stateProvider, $urlRouterProvider) {
    
    $urlRouterProvider.otherwise('/home');
    
    $stateProvider
        
        .state('home', {
            url: '/home',
            templateUrl: 'home.html',
            controller: 'homeCtrl'
        })
        
        .state('member', {
            url: '/member/{member:json}',
            params: {member: null},
            templateUrl: 'member.html',
            controller: 'memberCtrl'
        })  
});
 
app.controller('homeCtrl', function($scope, $http) {
    $scope.hasMember = false;
    $scope.noMember = false;
 
    $scope.fetch = function(){
        $http.get('fetch.php').success(function(data){
            $scope.memberLists = data;
        });
    }
 
    $scope.search = function(){
        if($scope.keyword == ''){
           $scope.hasMember = false;
            $scope.noMember = false;
        }
        else{
            $http.post('search.php', {
                'keyword': $scope.keyword
            })
            .success(function(data){
                if(data.length > 0){
                    $scope.members = data;
                    $scope.hasMember = true;
                    $scope.noMember = false;
                }
                else{
                    $scope.noMember = true;
                    $scope.hasMember = false;
                }
            });
        }
    }
});
 
app.controller('memberCtrl', function($scope, $stateParams) {
    $scope.details = $stateParams.member;
});

fetch.php

This is our PHP api that fetches data from our MySQL database.

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

home.html

As per our ui-router this is treated as our index view.

<div class="row">
        <div class="col-sm-6 col-sm-offset-1" ng-init="fetch()">
                <h3>Member List</h3>
                <table class="table table-bordered table-striped">
                        <thead>
                                <tr>
                                        <th>Member ID</th>
                                        <th>Firstname</th>
                                        <th>Lastname</th>
                                        <th>Address</th>
                                </tr>
                        </thead>
                        <tbody>
                                <tr ng-repeat="memberList in memberLists">
                                        <td>{{ memberList.memid }}</td>
                                        <td>{{ memberList.firstname }}</td>
                                        <td>{{ memberList.lastname }}</td>
                                        <td>{{ memberList.address }}</td>
                                </tr>
                        </tbody>
                </table>
        </div>
        <div class="col-sm-4">
                <input type="text" class="form-control" ng-model="keyword" ng-keyup="search()" placeholder="Search for Firstname, Lastname or Address"> 
                <div ng-repeat="member in members" ng-show="hasMember" class="sug-list">
                        <a ui-sref="member({member: member})">{{ member.firstname + ' ' + member.lastname }}</a>
                </div>
                <div ng-show="noMember" class="no-sug">
                        No Suggestion Found
                </div>
        </div>
</div>

search.php

This is our PHP api that searches our MySQL database and returning the search match.

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

member.html

Lastly, this is where we view the details of our clicked search result.

<h2 class="text-center">Member Details</h1>
<div class="col-sm-4 col-sm-offset-4">
<h3>Member ID: {{ details.memid }}</h3>
<h3>Firstname: {{ details.firstname }}</h3>
<h3>Lastname: {{ details.lastname }}</h3>
<h3>Address: {{ details.address }}</h3>
 
<button type="button" ui-sref="home" class="btn btn-primary">Back</button>

That ends this tutorial. Happy Coding :)

Add new comment

88 views