Questions Hub

Delete Data in PHP using Vue.js

by Niyander

Introduction:  In this article, I’ll guide you through the process of effortlessly deleting data from a MySQL database using PHP and Vue.js. By following these steps, you’ll seamlessly integrate Vue.js with PHP and efficiently manage data deletion in your web applications.

 

Delete Data in PHP using Vue.js

Folder Structure:

 

Follow these steps to set up your environment:

  1. Access http://localhost/phpmyadmin/ via your web browser.
  2. Create a new database named “vue_data“.
  3. Execute the provided SQL query within the “vue_data” database:
CREATE TABLE `student` (
`id` INT(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
`name` TEXT NOT NULL,
`email` TEXT NOT NULL,
`message` TEXT NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

 

Add Data to Database:

Insert the following data into the “student” table:

INSERT INTO `student` (`id`, `name`, `email`, `message`) VALUES
(1, 'sachin', '[email protected]', 'hey i am sachin'),
(2, 'ankit', '[email protected]', 'hey ankit'),
(3, 'tina', '[email protected]', 'hey i am tina'),
(4, 'Rohit', '[email protected]', 'Hello i am rohit');

 

Creating Configuration File:

  1. Create a file named config.php.
  2. Paste the following code into config.php:
<?php
/* Database credentials. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_NAME', 'vue_data');
 
/* Attempt to connect to MySQL database */
$link = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
 
// Check connection
if($link === false){
    die("ERROR: Could not connect. " . mysqli_connect_error());
}
?>

 

Creating Fetch Script:

  1. Create a file named fetch.php.
  2. Paste the provided code into fetch.php:
<?php  
//Database 
require "config.php"; 

 $output = array();  
 $query = "SELECT * FROM student";  
 $result = mysqli_query($link, $query);  
   
      while($row = mysqli_fetch_array($result))  
      {  
           $output[] = $row;  
      }  
      echo json_encode($output);  
  
 ?>

 

Creating Delete Script:

  1. Create a file named delete.php.
  2. Paste the provided code into fetch.php:
<?php  
 //delete.php  
 require "config.php";
 $data = json_decode(file_get_contents("php://input")); 
    
      $id = $data->id;  
      $query = "DELETE FROM student WHERE id='$id'";  
      if(mysqli_query($link, $query))  
      {  
           echo 'Data Deleted';  
      }  
      else  
      {  
           echo 'Error';  
      }    
 ?>

 

Creating HTML & Vue.js Code:

  1. Create a file named index.html.
  2. Paste the provided code into index.html:
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

  <title>Vue js CRUD</title>
</head>
<body>


<!-- INSERT DATA FORM -->

<div class="container my-5" id="app" style="width:660px;">
  <h1 class="text-center">Vue js CRUD</h1>

<!-- DISPLAY DATA HERE -->
  <h1>Data Records</h1>
  <table class="table">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">NAME</th>
        <th scope="col">EMAIL</th>
        <th scope="col">MESSAGE</th>
        <th scope="col">Update</th>
        <th scope="col">Delete</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="student in students" :key="student.id">
        <th>{{ student.id }}</th>
        <td>{{ student.name }}</td>
        <td>{{ student.email }}</td>
        <td>{{ student.message }}</td>
        <td><button type="button" class="btn btn-warning btn-sm" v-on:click="update(student.id)" data-bs-toggle="modal" data-bs-target="#exampleModal">Update</button></td>
        <td><button type="button" class="btn btn-danger btn-sm" v-on:click="deletee(student.id)">Delete</button></td>
      </tr>
    </tbody>
  </table>


</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <!-- Include Axios library -->
<script>
  const app = Vue.createApp({
    data() {
      return {
        students: [],
      }
    },
    mounted() {
      this.fetchData();
    },
    methods: {

//** Fetch All Data **//      
      fetchData() {
        axios.get('fetch.php')
          .then(response => {
            this.students = response.data;
          })
          .catch(error => {
            console.error('Error fetching data:', error);
          });
      },

//** Delete Single Data **//         
      deletee(id) {
          if (confirm("Do you want to delete this data ?") == true) {
                              axios.post('delete.php', {
                                id: id
                              })
                              .then(response => {
                                console.log(response.data);
                                this.fetchData(); // Refresh student records after successful deletion
                              })
                              .catch(error => {
                                console.error('Error deleting data:', error);
                              });
              } else {
                console.log("You canceled!");
              }
        }
      
}

  });
  app.mount('#app');
</script>
</body>
</html>

 

Conclusion:

By following these steps, you’ve learned how to seamlessly delete data from a MySQL database using Vue.js and PHP. Implementing this approach will enable you to efficiently manage data deletion in your web applications.