Vue.js Live Data Search with PHP & Mysql

Webslesson

PHP, MySql, Jquery, AngularJS, Ajax, Codeigniter, Laravel Tutorial

Wednesday, 6 May 2020

Instant Ajax Search with PHP and Vue.js

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.

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.

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.

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.

  
 
First Name
 
Last Name
 
 
>
 
>
 
 
No Data Found
 
 
  

index.php

           
 
Vue.js Live Data Search with PHP & Mysql
 
 
 
 
 
Sample Data
 
 
 
 
 
 
 
 
 
First Name
 
Last Name
 
 
>
 
>
 
 
No Data Found
 
 
 
 
 
 
     

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

 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.

Источник

Integrating Vue.js with PHP

In this tutorial, we will explore how to integrate Vue.js with PHP to create a seamless development experience. We will learn the basics of Vue.js, how to set up a PHP backend, and how to connect the two using AJAX requests. By the end of this tutorial, you will be equipped with the knowledge required to create dynamic web applications using Vue.js and PHP.

Prerequisites

• Basic knowledge of PHP and JavaScript
• Node.js and npm installed on your local machine
• A text editor, such as Visual Studio Code or Sublime Text

Step 1: Setting Up Vue.js

First, we need to set up a new Vue.js project using the Vue CLI. To install the Vue CLI, open your terminal and run the following command:

Next, create a new Vue.js project with the following command:

vue create vue-php-integration

Navigate to the newly created project directory:

Now, install the Axios library for making HTTP requests:

Step 2: Setting Up PHP Backend

Create a new directory named backend in the root directory of your project. Inside the backend directory, create a new file named api.php . This file will contain our PHP code for handling requests from the Vue.js frontend.

Open api.php and add the following code:

 header('Content-Type: application/json'); header('Access-Control-Allow-Origin: *'); header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE'); // Your PHP code to handle requests will go here 

This code sets up CORS headers to allow requests from any origin and allows GET, POST, PUT, and DELETE request methods.

Step 3: Connecting Vue.js with PHP

Now that we have set up both the Vue.js frontend and PHP backend, it’s time to connect these two using AJAX requests. We will use the Axios library to make these requests.

Open the src/App.vue file in your Vue.js project and replace its content with the following:

This code creates a simple form to send a message to the PHP backend, and when the «Send Message» button is clicked, it sends an AJAX POST request to the api.php file using Axios.

Step 4: Handling Requests in PHP

Now that the Vue.js frontend is sending requests to the PHP backend, we need to handle these requests in the api.php file. Update the api.php file with the following code:

 header('Content-Type: application/json'); header('Access-Control-Allow-Origin: *'); header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE'); $data = json_decode(file_get_contents('php://input'), true); if (isset($data['message'])) < echo json_encode(['status' =>'success', 'message' => 'Message received: ' . $data['message']]); > else < echo json_encode(['status' =>'error', 'message' => 'No message received']); > 

This code reads the JSON data sent from the Vue.js frontend, checks if the ‘message’ field is set, and returns a JSON response indicating the success or failure of the operation.

Conclusion

By following this tutorial, you have successfully integrated Vue.js with a PHP backend. You can now use this knowledge to create dynamic web applications using Vue.js and PHP. Remember that you can also hire Vue.js developers from Reintech if you need assistance with your projects.

Are you an engineering manager tired of recruiting?

Checkout out how we can help you to focus on delivering technical excellence and growing your product by hiring remote developers and creating high-performing teams.

Glossary

AJAX

AJAX (Asynchronous JavaScript and XML) is a web development technique that enables web applications to send and receive data asynchronously from the server without refreshing the entire page. This results in a smoother and faster user experience, as only the required data is fetched or sent, reducing server load and bandwidth usage. AJAX is commonly used for features like live search, form submission, and dynamic content updates. For more information, visit the Mozilla Developer Network AJAX Guide.

axios

Axios is a popular JavaScript library for making HTTP requests. It works in both browser and Node.js environments, providing a simple and consistent API for sending requests and handling responses. Axios supports various HTTP methods, request/response interception, timeout and cancellation features, and automatic JSON data transformation. It also provides built-in protection against cross-site request forgery (XSRF) attacks.

To learn more about axios and its features, visit the official website or explore the GitHub repository.

PHP

PHP (Hypertext Preprocessor) is a widely-used open-source server-side scripting language that is well-suited for web development. PHP code is embedded within HTML files and executed on the server, generating HTML content that is sent to the client’s browser. PHP can be used to create dynamic web pages, interact with databases, handle user input, and perform various other server-side tasks.

Find out more about PHP at the official PHP website.

Vue.js

Vue.js is a progressive JavaScript framework for building user interfaces. It focuses on simplicity and flexibility, enabling developers to build scalable and maintainable applications with ease. Vue.js uses a component-based approach to build reusable UI components and offers a reactive data-binding system that automatically updates the view when the data changes. Some popular tools and libraries for working with Vue.js include Vue Router for routing, Vuex for state management, and Vue CLI for project scaffolding.

Источник