Questions Hub

Insert Data in PHP using Vue.js

by Niyander

Introduction: In this article, I’ll guide you through the process of seamlessly inserting data into a MySQL database using PHP and Vue.js. Follow these steps to integrate Vue.js with PHP and manage data insertion effortlessly.

Insert Data in PHP using Vue.js

Folder Structure:

Insert Data in PHP using Vue.js

 

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;

 

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 Insertion Script:

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

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

$name = mysqli_real_escape_string($link, $data->name);
$email = mysqli_real_escape_string($link, $data->email);
$message = mysqli_real_escape_string($link, $data->message);

    if($name!="" &&$email!="" && $message!="" ){
                $sql="INSERT INTO student (name, email, message)VALUES ('$name', '$email', '$message')";
                $run= mysqli_query($link,$sql);
                    if($run){
                        echo "Data Inserted";
                    }
                        else{
                            echo "error";
                        }
                
                } 
    else{
                echo "All fields required !";
            }
mysqli_close($link);
?>

 

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>
  
  <div class="mb-3">
    Name: <input type="email" class="form-control my-2" v-model="name">
    Email Address: <input type="email" class="form-control my-2" v-model="email">
    Message: <textarea class="form-control my-2" rows="3" v-model="message"></textarea>
    <button type="button" class="btn btn-primary mt-5" v-on:click="submitForm">Submit</button>
  </div>

</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 {
        name: null,
        email: null,
        message: null,
      }
    },
    
    methods: {
    
    /** 	THIS FUNCTION FOR INSERT DATA  **/
      submitForm() {
        axios.post('insert.php', {
            name: this.name,
            email: this.email,
            message: this.message
          })
          .then(response => {
            // Handle response if needed
            console.log(response.data);
            alert(response.data);
            this.name = null;
            this.email = null;
            this.message = null;
          })
          .catch(error => {
            // Handle error if needed
            console.error(error);
          });
      }

}

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

 

Conclusion:

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