If you want to make Mysql Live data search feature in AngularJS with PHP, then in this post you can find step by step guide for how to use AngularJS with PHP for implement mysql live data search functionality. Live data search means you can search mysql table data by entering your search query in textbox, and based on that query script will search data in mysql table all column and it will filter table data and display on web without page refresh. Because here we have use AngularJS for create live data search functionality.
If you have use Mysql database for store records, and you have fetch records from mysql table and display on web page in HTML table. Now you want to search data from large amount of data and display filter result on web page. At that time if you have implement live data search feature in your application then it will reduce your search efforts. It will display live data on web page when you have start type in textbox and based on your type text it filter data according which you have type in textbox.
In some our previous web tutorial we have already publish post on Live data search using ajax jquery, codeigniter and even laravel framework also. But we have not make tutorial on Live data search using AngularJS. There many web developer has use AngularJS as front end instead of jQuery. So, If you are beginner level of AngularJS developer, who has use PHP as backend. Then this post will help you to learn how to make live database search application in AngularJS with PHP.
See Also
Source Code
Create Database
Run following script in your PHPMyAdmin, it will make customer table in your database.
--
-- Database: `testing`
--
-- --------------------------------------------------------
--
-- Table structure for table `tbl_customer`
--
CREATE TABLE `tbl_customer` (
`CustomerID` int(11) NOT NULL,
`CustomerName` varchar(250) NOT NULL,
`Gender` varchar(30) NOT NULL,
`Address` text NOT NULL,
`City` varchar(250) NOT NULL,
`PostalCode` varchar(30) NOT NULL,
`Country` varchar(100) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
--
-- Dumping data for table `tbl_customer`
--
INSERT INTO `tbl_customer` (`CustomerID`, `CustomerName`, `Gender`, `Address`, `City`, `PostalCode`, `Country`) VALUES
(1, 'Maria Anders', 'Female', 'Obere Str. 57', 'Berlin', '12209', 'Germany'),
(2, 'Ana Trujillo', 'Female', 'Avda. de la Construction 2222', 'Mexico D.F.', '5021', 'Mexico'),
(3, 'Antonio Moreno', 'Male', 'Mataderos 2312', 'Mexico D.F.', '5023', 'Mexico'),
(4, 'Thomas Hardy', 'Male', '120 Hanover Sq.', 'London', 'WA1 1DP', 'United Kingdom'),
(5, 'Paula Parente', 'Female', 'Rua do Mercado, 12', 'Resende', '08737-363', 'Brazil'),
(6, 'Wolski Zbyszek', 'Male', 'ul. Filtrowa 68', 'Walla', '01-012', 'Poland'),
(7, 'Matti Karttunen', 'Male', 'Keskuskatu 45', 'Helsinki', '21240', 'Finland'),
(8, 'Karl Jablonski', 'Male', '305 - 14th Ave. S. Suite 3B', 'Seattle', '98128', 'United States'),
(9, 'Paula Parente', 'Female', 'Rua do Mercado, 12', 'Resende', '08737-363', 'Brazil'),
(10, 'John Koskitalo', 'Male', 'Torikatu 38', 'Oulu', '90110', 'Finland'),
(39, 'Ann Devon', 'Female', '35 King George', 'London', 'WX3 6FW', 'United Kingdom'),
(38, 'Janine Labrune', 'Female', '67, rue des Cinquante Otages', 'Nantes', '44000', 'Finland'),
(37, 'Kathryn Segal', 'Female', 'Augsburger Strabe 40', 'Ludenscheid Gevelndorf', '58513', 'Germany'),
(36, 'Elizabeth Brown', 'Female', 'Berkeley Gardens 12 Brewery', 'London', 'WX1 6LT', 'United Kingdom'),
(30, 'Trina Davidson', 'Female', '1049 Lockhart Drive', 'Barrie', 'ON L4M 3B1', 'Canada'),
(31, 'Jeff Putnam', 'Male', 'Industrieweg 56', 'Bouvignies', '7803', 'Belgium'),
(32, 'Joyce Rosenberry', 'Female', 'Norra Esplanaden 56', 'HELSINKI', '380', 'Finland'),
(33, 'Ronald Bowne', 'Male', '2343 Shadowmar Drive', 'New Orleans', '70112', 'United States'),
(34, 'Justin Adams', 'Male', '45, rue de Lille', 'ARMENTIERES', '59280', 'France'),
(35, 'Pedro Afonso', 'Male', 'Av. dos Lusiadas, 23', 'Sao Paulo', '05432-043', 'Brazil'),
(100, 'Kathryn Segal', 'Female', 'Augsburger Strabe 40', 'Ludenscheid Gevelndorf', '58513', 'Germany'),
(101, 'Tonia Sayre', 'Female', '84 Haslemere Road', 'ECHT', 'AB32 2DY', 'United Kingdom'),
(102, 'Loretta Harris', 'Female', 'Avenida Boavista 71', 'SANTO AMARO', '4920-111', 'Portugal'),
(103, 'Sean Wong', 'Male', 'Rua Vito Bovino, 240', 'Sao Paulo-SP', '04677-002', 'Brazil'),
(104, 'Frederick Sears', 'Male', 'ul. Marysiuska 64', 'Warszawa', '04-617', 'Poland'),
(105, 'Tammy Cantrell', 'Female', 'Lukiokatu 34', 'HAMEENLINNA', '13250', 'Finland'),
(106, 'Megan Kennedy', 'Female', '1210 Post Farm Road', 'Norcross', '30071', 'United States'),
(107, 'Maria Whittaker', 'Female', 'Spresstrasse 62', 'Bielefeld Milse', '33729', 'Germany'),
(108, 'Dorothy Parker', 'Female', '32 Lairg Road', 'NEWCHURCH', 'HR5 5DR', 'United Kingdom'),
(109, 'Roger Rudolph', 'Male', 'Avenida Julio Saul Dias 78', 'PENAFIEL', '4560-470', 'Portugal'),
(110, 'Karen Metivier', 'Female', 'Rua Guimaraes Passos, 556', 'Sao Luis-MA', '65025-450', 'Brazil'),
(111, 'Charles Hoover', 'Male', 'Al. Tysiaclecia 98', 'Warszawa', '03-851', 'Poland'),
(112, 'Becky Moss', 'Female', 'Laivurinkatu 6', 'MIKKELI', '50120', 'Finland'),
(113, 'Frank Kidd', 'Male', '2491 Carson Street', 'Cincinnati', 'KY 45202', 'United States'),
(114, 'Donna Wilson', 'Female', 'Hallesches Ufer 69', 'Dettingen', '73265', 'Germany'),
(115, 'Lillian Roberson', 'Female', '36 Iolaire Road', 'NEW BARN', 'DA3 3FT', 'United Kingdom');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `tbl_customer`
--
ALTER TABLE `tbl_customer`
ADD PRIMARY KEY (`CustomerID`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `tbl_customer`
--
ALTER TABLE `tbl_customer`
MODIFY `CustomerID` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=116;
index.php
In this file you can find front-end HTML code and AngularJS code for make Live Data search.
<?php
//index.php
?>
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Live Data Search using PHP Mysql</title>
<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>
<style>
.form_style
{
width: 600px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container" ng-app="live_search_app" ng-controller="live_search_controller" ng-init="fetchData()">
<br />
<h3 align="center">AngularJS Live Data Search using PHP Mysql</h3>
<br />
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Search</span>
<input type="text" name="search_query" ng-model="search_query" ng-keyup="fetchData()" placeholder="Search by Customer Details" class="form-control" />
</div>
</div>
<br />
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Customer Name</th>
<th>Gender</th>
<th>Address</th>
<th>City</th>
<th>Postal Code</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in searchData">
<td>{{ data.CustomerName }}</td>
<td>{{ data.Gender }}</td>
<td>{{ data.Address }}</td>
<td>{{ data.City }}</td>
<td>{{ data.PostalCode }}</td>
<td>{{ data.Country }}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script>
var app = angular.module('live_search_app', []);
app.controller('live_search_controller', function($scope, $http){
$scope.fetchData = function(){
$http({
method:"POST",
url:"fetch.php",
data:{search_query:$scope.search_query}
}).success(function(data){
$scope.searchData = data;
});
};
});
</script>
fetch.php
In this PHP file, you can find PHP script for search or filter data in Mysql table or all data from mysql table. This script has received Ajax request for search data and send data in json format.
<?php
//fetch.php
$connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");
$form_data = json_decode(file_get_contents("php://input"));
$query = '';
$data = array();
if(isset($form_data->search_query))
{
$search_query = $form_data->search_query;
$query = "
SELECT * FROM tbl_customer
WHERE (CustomerName LIKE '%$search_query%'
OR Address LIKE '%$search_query%'
OR City LIKE '%$search_query%'
OR PostalCode LIKE '%$search_query%'
OR Country LIKE '%$search_query%')
OR Gender = '$search_query'
";
}
else
{
$query = "SELECT * FROM tbl_customer ORDER BY CustomerName ASC";
}
$statement = $connect->prepare($query);
if($statement->execute())
{
while($row = $statement->fetch(PDO::FETCH_ASSOC))
{
$data[] = $row;
}
echo json_encode($data);
}
?>
This is complete source of AngularJS Live data search using PHP and Mysql. If you have any query regarding this post, you can comment in comment box.
nice
ReplyDeleteLive Mysql Data Search using AngularJS with PHP
ReplyDeleteSIR IT WONT FETCH DATA IN THE ONLINE HOST SERVER ,IN LOCAL SERVER IT RUNS PERFECTLY
Thank you very much for this ! It help a lot!
ReplyDelete