Skip to main content

Vue.js CRUD Example Tutorial For Beginners

Today, We want to share with you Vue.js CRUD Example Tutorial For Beginners From Scratch.In this post we will show you Vue.js Update and Delete Data using PHP, hear for Vue.js Insert Update Delete records from PHP MySQL Database we will give you demo and example for implement.In this post, we will learn about PHP MySQL CRUD (Create, Read, Update, Delete) Operations using vue.js with an example.

Vue.js CRUD Example Tutorial For Beginners From Scratch

There are the Following The simple About Vue.js CRUD Example Tutorial For Beginners From Scratch Full Information With Example and source code.

As I will cover this Post with live Working example to develop PHP MySQL confirmation box before delete record using vuejs ajax, so the Insert Update and Delete records from PHP MySQL with Vue.js for this example is following below.

MySQL Database Table structure

products table

CREATE TABLE `products` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `productname` varchar(100) NOT NULL,
  `name` varchar(100) NOT NULL,
  `price` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

config.php

<?php

$host = "localhost";
$product = "root"; 
$password = "";
$dbname = "pakainfo";

$con = mysqli_connect($host, $product, $password,$dbname);
if (!$con) {
  die("Connection failed: " . mysqli_connect_error());
}

Step 1: Include vuejs library

At first we need to include vuejs Latest library file.

Also Read :  Vue.js Simple Login Script using PHP MySQLi Bootstrap

<script src="vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
(https://unpkg.com/axios/dist/axios.min.js).

Step 2: JavaScript/vuejs Source Code:

This file All the Data contains the following JavaScript/vuejs Source codes.

var app = new Vue({
  el: '#myapp',
  data: {
    products: "",
    productid: 0,
    productname: "",
    name: "",
    price: ""
  },
  methods: {
   allRecords: function(){
     axios.post('ajaxfile.php', {
       request: 1
     })
     .then(function (response) {
       app.products = response.data;
     })
     .catch(function (error) {
       console.log(error);
     });
 
   },
   addRecord: function(){

     if(this.productname != '' && this.name != '' && this.price != ''){
       axios.post('ajaxfile.php', {
         request: 2,
         productname: this.productname,
         name: this.name,
         price: this.price
       })
       .then(function (response) {

         // Fetch records
         app.allRecords();

         // Empty values
         app.productname = '';
         app.name = '';
         app.price = '';
 
         alert(response.data);
       })
       .catch(function (error) {
         console.log(error);
       });
     }else{
       alert('Fill all fields.');
     }
 
   },
   updateRecord: function(index,id){

     // Read value from Textbox
     var name = this.products[index].name;
     var price = this.products[index].price;

     if(name !='' && price !=''){
       axios.post('ajaxfile.php', {
         request: 3,
         id: id,
         name: name,
         price: price
       })
       .then(function (response) {
         alert(response.data);
       })
       .catch(function (error) {
         console.log(error);
       });
     }
   },
   deleteRecord: function(index,id){
 
     axios.post('ajaxfile.php', {
       request: 4,
       id: id
     })
     .then(function (response) {

       // Delete index from products
       app.products.splice(index, 1);
       alert(response.data);
     })
     .catch(function (error) {
       console.log(error);
     });
 
    } 
  },
  created: function(){
    this.allRecords();
  }
})

Step 3: HTML Source Code:

This file contains the following HTML Markup Source codes.

Also Read :  PHP How-to create Dynamic PDF Files using FPDF

<div id='myapp'>
 
  <table border='1' width='80%' style='border-collapse: collapse;'>
   <tr>
     <th>Productname</th>
     <th>Name</th>
     <th>Email</th>
     <th></th>
   </tr>

   <!-- product Add -->
   <tr>
     <td><input type='text' v-model='productname'></td>
     <td><input type='text' v-model='name'></td>
     <td><input type='text' v-model='price'></td>
     <td><input type='button' value='Add' @click='addRecord();'></td>
   </tr>

   <!-- product Update/Delete -->
   <tr v-for='(product,index) in products'>
     <td><input type='text' v-model='product.productname' ></td>
     <td><input type='text' v-model='product.name' ></td>
     <td><input type='text' v-model='product.price' ></td>
     <td><input type='button' value='Update' @click='updateRecord(index,product.id);'> 
     <input type='button' value='Delete' @click='deleteRecord(index,product.id)'></td>
   </tr>
  </table>
 
</div>

Step 4: PHP Source Code

Following PHP Source codes are used for Insert Update and Delete records from MySQL with Vue.js.

<?php
include "config.php";

$data = json_decode(file_get_contents("php://input"));

$request = $data->request;

// Fetch All product records
if($request == 1){
  $productData = mysqli_query($con,"select * from products order by id desc");

  $response = array();
  while($row = mysqli_fetch_assoc($productData)){
    $response[] = $row;
  }

  echo json_encode($response);
  exit;
}

// Add product record
if($request == 2){
  $productname = $data->productname;
  $name = $data->name;
  $price = $data->price;

  $userData = mysqli_query($con,"SELECT * FROM products WHERE productname='".$productname."'");
  if(mysqli_num_rows($userData) == 0){
    mysqli_query($con,"INSERT INTO products(productname,name,price) VALUES('".$productname."','".$name."','".$price."')");
    echo "Insert successfully";
  }else{
    echo "Productname already exists.";
  }

  exit;
}

//product Update record
if($request == 3){
  $id = $data->id;
  $name = $data->name;
  $price = $data->price;

  mysqli_query($con,"UPDATE products SET name='".$name."',price='".$price."' WHERE id=".$id);
 
  echo "product Update successfully";
  exit;
}

//product Delete record
if($request == 4){
  $id = $data->id;

  mysqli_query($con,"DELETE FROM products WHERE id=".$id);

  echo "product Delete successfully";
  exit;
}

Angular 6 CRUD Operations Application Tutorials

Read :

Also Read :  Simple Multi Step Form with validation Using AngularJS

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Vue.js CRUD Example Tutorial For Beginners From Scratch.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Web Developer

Hi, I’m Web developer, PHP developer.Pakainfo.com is the most popular Programming & Web Development blog. Our mission is to provide the best online resources on programming and web development.Any visitors of this site are free to browse our tutorials, live demos, Examples and download scripts.If you have a project that you want to get started, launch quickly, contact me. Email : [email protected]