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 SQL INNER JOIN Query on Multiple Tables

<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 PHP jQuery Ajax Insert Update Delete using MySQLi

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.

Leave a Reply

avatar
  Subscribe  
Notify of