We all know Real time searching feature is required functionality in any web based application or website. For this things, here in this post we will try to cover topic like How can we make Live Data search application by using Vue.js with PHP script and Mysql database. For example if you have build any enterprise level application in PHP and if you have use Vue.js then after that time you have to filter data then at that time live data search filter feature is used for search data without refresh of web page.
Now you have one question arise How to make Instant Ajax Search application with PHP and Vue. Then by using Vue.js library you can also make real time search application build by using ajax. In Vue.js library you can use Axios package for send Ajax request. So by using this package you can easily send Ajax request for build Live data search application with Vue JS and PHP script. Below you can find the step by step process for build VueJS Live search filter with PHP.
For use Vue.js with PHP script, first we need to include VueJS library file in file which you can find below.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue.js Live Data Search with PHP & Mysql</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
After this in HTML code part, we have to define one id attribute to any tag in which Vue.js can be used. If we have define id attribute then that inner HTML tag will be used by Vue.js library and outside HTML content will not be affect by Vue js.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue.js Live Data Search with PHP & Mysql</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="container" id="searchApp">
</div>
</body>
</html>
For make live search feature, first we have define textbox for enter search query. In textbox we have write v-model directive, by using this directive we can get the value of this textbox. And for instant search, here we have use @keyup directive. So, when we have type something then it will called fetchData() function for search data from mysql database using Vue.js and PHP.
<input type="text" class="form-control input-sm" placeholder="Search Data" v-model="query" @keyup="fetchData()" />
For display data on web page, here we have define one HTML table. For fill HTML table with data, here we have use v-for loop directive. At the time of searching of data and then it has not found data from Mysql database. So at that time we want to display no data found message on web page. For this here we have define one table row tag with no data found message, this tag will be visible if v-if="nodata" directive value is true, otherwise that message will not be display on web page.
<table class="table table-bordered table-striped">
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr v-for="row in allData">
<td>{{ row.first_name }}</td>
<td>{{ row.last_name }}</td>
</tr>
<tr v-if="nodata">
<td colspan="2" align="center">No Data Found</td>
</tr>
</table>
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue.js Live Data Search with PHP & Mysql</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="container" id="searchApp">
<br />
<h3 align="center">Vue.js Live Data Search with PHP & Mysql</h3>
<br />
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-md-9">
<h3 class="panel-title">Sample Data</h3>
</div>
<div class="col-md-3" align="right">
<input type="text" class="form-control input-sm" placeholder="Search Data" v-model="query" @keyup="fetchData()" />
</div>
</div>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr v-for="row in allData">
<td>{{ row.first_name }}</td>
<td>{{ row.last_name }}</td>
</tr>
<tr v-if="nodata">
<td colspan="2" align="center">No Data Found</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
var application = new Vue({
el:'#searchApp',
data:{
allData:'',
query:'',
nodata:false
},
methods: {
fetchData:function(){
axios.post('action.php', {
query:this.query
}).then(function(response){
if(response.data.length > 0)
{
application.allData = response.data;
application.nodata = false;
}
else
{
application.allData = '';
application.nodata = true;
}
});
}
},
created:function(){
this.fetchData();
}
});
</script>
For search data from Mysql database, here we have use PHP script. In this example here we have make action.php this file has been received Ajax request for search data from Mysql database.
In this file, first we have make database connection. After making database connection, it has been received data from Ajax request which has been send by using Axios package, so it has been received data in json format. So by using json_decode() function it has been converted into PHP array object.
Then after in this PHP scrilt file, it has check any search query has been received or not. If any search query has been received then it will filter data and send to Ajax request. But it has not received any search query then it will return all data to Ajax request. Below you ca find complete PHP script for search or filter mysql data.
action.php
<?php
//action.php
$connect = new PDO("mysql:host=localhost; dbname=testing", "root", "");
$received_data = json_decode(file_get_contents("php://input"));
$data = array();
if($received_data->query != '')
{
$query = "
SELECT * FROM tbl_sample
WHERE first_name LIKE '%".$received_data->query."%'
OR last_name LIKE '%".$received_data->query."%'
ORDER BY id DESC
";
}
else
{
$query = "
SELECT * FROM tbl_sample
ORDER BY id DESC
";
}
$statement = $connect->prepare($query);
$statement->execute();
while($row = $statement->fetch(PDO::FETCH_ASSOC))
{
$data[] = $row;
}
echo json_encode($data);
?>
This is complete step by step process for building Live data search application by using Vue.js with PHP script. So, try this code in your own computer and test it, it is working or not and have you learn something new from our web tutorial or not.
Thank you it is very interesting !
ReplyDeleteits good
ReplyDelete