PHP with Vue.js & MySQL: REST API CRUD Tutorial

PHP with Vue.js & MySQL: REST API CRUD Tutorial

In this post we will give you information about PHP with Vue.js & MySQL: REST API CRUD Tutorial. Hear we will give you detail about PHP with Vue.js & MySQL: REST API CRUD TutorialAnd how to use it also give you demo for it if it is necessary.

In this tutorial, we’ll build a RESTful CRUD application with PHP & MySQL in the backend and Vue.js in the frontend. We’ll also be using Axios for sending Ajax request to PHP from Vue.

The Vue.js library, Axios client and Ajax technology allows you to fetch and display data in your application without the need to refresh the whole page each time.

For database we’ll be using MySQL, the most popular database used by PHP developers.

Creating the MySQL Database

In your terminal, start the MySQL client using:

mysql -u root -p

Enter your password when prompted and hit Enter.

Next, create a database using the following SQL statement:

mysql> create database vuedb;

Next, create the following SQL table in your vuedb database:

mysql> use vuedb;mysql> CREATE TABLE 'contacts'('id' int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,  'name' varchar(100) NOT NULL,  'email' varchar(100) NOT NULL,  'city' varchar(100),  'country' varchar(100),  'job' varchar(100))ENGINE=InnoDB DEFAULT CHARSET=latin1;

PHP Vue.js MySQL

Create The PHP & MySQL CRUD App

Now, let’s create a PHP and MySQL CRUD application. Open a new terminal, navigate to your working directory then create a folder for your project:

$ cd ~/demos$ mkdir php-vuejs-crud

Next, navigate in your project’s folder and add an index.php file:

$ cd php-vuejs-crud$ touch index.php

Open the index.php file and add the following code:

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>PHP| MySQL | Vue.js | Axios Example</title><script src="https://cdn.jsdelivr.net/npm/vue"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script></head><body></body></html>

We first include Vue.js and Axios from their CDNs.

Next, in the body of the document, add a <table> to display fetched data:

<h1>Contact Management</h1><divid='vueapp'><tableborder='1'width='100%'style='border-collapse: collapse;'><tr><th>Name</th><th>Email</th><th>Country</th><th>City</th><th>Job</th></tr><trv-for='contact in contacts'><td>{{ contact.name }}</td><td>{{ contact.email }}</td><td>{{ contact.country }}</td><td>{{ contact.city }}</td><td>{{ contact.job }}</td></tr></table>

We use the v-for directive to iterate over the contacts array and display each contact.

Next, add a <form> tag:

</br><form><label>Name</label><inputtype="text"name="name"v-model="name"></br><label>Email</label><inputtype="email"name="email"v-model="email"></br><label>Country</label><inputtype="text"name="country"v-model="country"></br><label>City</label><inputtype="text"name="city"v-model="city"></br><label>Job</label><inputtype="text"name="job"v-model="job"></br><inputtype="button"@click="createContact()"value="Add"></form></div>

We use the v-model directive to bind the input fields to their corresponding variables in the Vue instance we’ll be creating next. And we use the @click event to bind the click event of the button to the createContact() method that will be defined in the Vue instance.

Next, add a <script> tag and create a Vue app:

<script>varapp=newVue({el:'#vueapp',data:{name:'',email:'',country:'',city:'',job:'',contacts:[]},mounted:function(){console.log('Hello from Vue!')this.getContacts()},methods:{getContacts:function(){},createContact:function(){},resetForm:function(){}}})</script></body></html>

We declared three methods, let’s implement them!

The getContacts() method gets contacts from the PHP endpoint using Axios:

getContacts:function(){axios.get('api/contacts.php').then(function(response){console.log(response.data);app.contacts=response.data;}).catch(function(error){console.log(error);});}

The createContact() methods creates a new contact in the MySQL database by sending a POST request with Axios and FormData:

createContact:function(){console.log("Create contact!")letformData=newFormData();console.log("name:",this.name)formData.append('name',this.name)formData.append('email',this.email)formData.append('city',this.city)formData.append('country',this.country)formData.append('job',this.job)varcontact={};formData.forEach(function(value,key){contact[key]=value;});axios({method:'post',url:'api/contacts.php',data:formData,config:{headers:{'Content-Type':'multipart/form-data'}}}).then(function(response){//handle successconsole.log(response)app.contacts.push(contact)app.resetForm();}).catch(function(response){//handle errorconsole.log(response)});}

The resetForm() method resets the form:

resetForm:function(){this.name='';this.email='';this.country='';this.city='';this.job='';}

Create an API Endpoint

Now, let’s create an endpoint that provides contacts data in a JSON format to our Vue frontend.

Create an api folder inside your project’s root folder:

$ mkdir api

Navigate inside the api folder and create a contacts.php file and add the following content:

<?php$host="localhost";$user="root";$password="YOUR_MYSQL_DB_PASSWORD";$dbname="vuedb";$id='';$con=mysqli_connect($host,$user,$password,$dbname);$method=$_SERVER['REQUEST_METHOD'];$request=explode('/',trim($_SERVER['PATH_INFO'],'/'));//$input = json_decode(file_get_contents('php://input'),true);if(!$con){die("Connection failed: ".mysqli_connect_error());}switch($method){case'GET':$id=$_GET['id'];$sql="select * from contacts".($id?" where id=$id":'');break;case'POST':$name=$_POST["name"];$email=$_POST["email"];$country=$_POST["country"];$city=$_POST["city"];$job=$_POST["job"];$sql="insert into contacts (name, email, city, country, job) values ('$name', '$email', '$city', '$country', '$job')";break;}// run SQL statement$result=mysqli_query($con,$sql);// die if SQL statement failedif(!$result){http_response_code(404);die(mysqli_error($con));}if($method=='GET'){if(!$id)echo'[';for($i=;$i<mysqli_num_rows($result);$i++){echo($i>?',':'').json_encode(mysqli_fetch_object($result));}if(!$id)echo']';}elseif($method=='POST'){echojson_encode($result);}else{echomysqli_affected_rows($con);}$con->close();

Finally, you can serve your PHP application using the following command from the root of your project:

$ php -S 127.0.0.1:8080

This is a screenshot of the application, after posting some data using the form:

PHP Vue.js REST API CRUD

For the same styling, add the following CSS:

Hope this code and post will helped you for implement PHP with Vue.js & MySQL: REST API CRUD Tutorial. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US