Posted inTechnology / Laravel / php / Programming / VueJs

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


Step 1: Include vuejs library

At first we need to include vuejs Latest library file.



(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.

Productname Name Email
 

Step 4: PHP Source Code

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

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 :

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.

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

Your email address will not be published. Required fields are marked *

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype