Live Checking of Input Data Availability using VueJS and PHP Tutorial

Submitted by oretnom23 on Saturday, November 26, 2022 - 13:37.

In this tutorial, you will learn how to implement a Live Checking of Input Data Availability using VueJS and PHP. This tutorial aims to provide IT students and new programmers a reference for implementing a live interaction of an application between the client and server side using the said JS Framework and Programming Language. I have provided some snippets below for this tutorial. A sample web application source code file that demonstrates the objective of this tutorial is also provided and free to download.

How does Live Checking of Input Data Availability work?

Live Checking of Input Data Availability is one of the effective features of a web application. Some developers prefer to implement this kind of feature in some of their project forms. It allows the end-users or the form encoders to be notified right away if the data entered on the specific text field that requires a unique value is already existing. With this, end-users will know the availability status of the data immediately even if the form is not submitted yet.

How to implement or create a Live Checking of Input Data Availability using VueJS and PHP?

The Live Checking of Input Data Availability feature can be achieved in so many ways using PHP and Vue. Here are the following methods, functions, properties, and APIs of PHP and Vue that can help in implementing the said feature.

JavaScript

Vue methods
JS Fetch API
Vue Models
JS FormData

PHP

PHP MySQL OOP
MySQL SELECT Statement

To get a better understanding of how to use the given methods, functions, properties, and APIs of PHP and Vue above to implement a Live Checking of Input Data Availability feature, check out the snippets that I provided below. The snippets output a simple web application that inserts new employee records into the database.

Snippets

Database

The snippet that I provided uses a MySQL Database named dummy_db. The database has the following MySQL Schema.

    CREATE TABLE `employee_list` (
        `id` int(30) NOT NULL Primary Key AUTO_INCREMENT,
        `code` varchar(50) NOT NULL
        `name` varchar(250) NOT NULL
        `email` varchar(250) NOT NULL
        `department` varchar(250) NOT NULL
        `designation` varchar(250) NOT NULL
      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Database Connection

The following snippet is a PHP File named db-connect.php. The script handles the connection between the application and the database.

<?php
$host = "localhost";
$username = "root";
$pw = "";
$db_name = "dummy_db";
 
$conn = new mysqli($host, $username, $pw, $db_name);
 
if(!$conn){
    die("Database Connection Failed");
}

Form Page Interface

The following snippet contains the script of the main page and the sample form interface. Save the file as index.php.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Check Input Data Availability | PHP & Vue.JS</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/js/all.min.js" integrity="sha512-naukR7I+Nk6gp7p5TMA4ycgfxaZBJ7MO5iC3Fp6ySQyKFHOGfpkSZkYVWV5R7u7cfAicxanwYQ5D1e17EfJcMA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        html, body{
            min-height:100%;
            width:100%;
        }
        tbody:empty:after{
            content:'No records found'
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary bg-gradient">
        <div class="container">
            <a class="navbar-brand" href="./">Check Input Data Availability</a>
            <div>
                <a href="https://sourcecodester.com" class="text-light fw-bolder h6 text-decoration-none" target="_blank">SourceCodester</a>
            </div>
        </div>
    </nav>
    <div class="container-fluid px-5 my-3" id="SampleApp">
        <div class="col-lg-6 col-md-8 col-sm-12 mx-auto">
            <h3 class="text-center"><b>Live Checking of Input Data Availability using PHP and Vue</b></h3>
            <div class="d-flex w-100 justify-content-center">
                <hr class="w-50">
            </div>
            <div class="card rounded-0 shadow mb-3">
                <div class="card-body">
                    <div class="container-fluid">
                        <div class="alert alert-success rounded-0 mb-3" v-show="is_success">{{success_message}}</div>
                        <div class="alert alert-danger rounded-0 mb-3" v-show="is_error">{{error_message}}</div>
 
                        <form action="" id="sample-form" @submit="formSubmit">
                            <div class="mb-3">
                                <label for="code" class="form-label">Employee Code</label>
                                <input type="text" id="code" name="code" v-model="code" @keyup="checkAvailability('code')" maxLength="50" class="form-control form-control-sm rounded-0" required>
                                <div class="alert alert-danger rounded-0 mt-3" v-show="input_error.code.status">{{input_error.code.msg}}</div>
                                <div class="alert alert-success rounded-0 mt-3" v-show="input_success.code.status">{{input_success.code.msg}}</div>
                            </div>
                            <div class="mb-3">
                                <label for="name" class="form-label">Name</label>
                                <input type="text" id="name" name="name" class="form-control form-control-sm rounded-0" required>
                            </div>
                            <div class="mb-3">
                                <label for="email" class="form-label">Email</label>
                                <input type="text" id="email" name="email" v-model="email" @keyup="checkAvailability('email')" class="form-control form-control-sm rounded-0" required>
                                <div class="alert alert-danger rounded-0 mt-3" v-show="input_error.email.status">{{input_error.email.msg}}</div>
                                <div class="alert alert-success rounded-0 mt-3" v-show="input_success.email.status">{{input_success.email.msg}}</div>
                            </div>
                            <div class="mb-3">
                                <label for="department" class="form-label">Department</label>
                                <input type="text" id="department" name="department" class="form-control form-control-sm rounded-0" required>
                            </div>
                            <div class="mb-3">
                                <label for="designation" class="form-label">Desgination</label>
                                <input type="text" id="designation" name="designation" class="form-control form-control-sm rounded-0" required>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="card-footer py-1 text-center">
                    <button class="btn btn-primary rounded-pill col-lg-4 col-md-6 col-sm-12" form="sample-form">Save Employee</button>
                </div>
            </div>
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>

JavaScript

The snippet below is a JavaScript file that contains the script for initiating the VueJS. The methods of checking the input data availability and form submission are written in the snippet. Save it as app.js.

const { createApp } = Vue
 
/**
    * Create Vue App to the selected Element
    */
createApp({
    /**
        * Application Data
        */
    data() {
        return {
            is_error: false,
            is_success: false,
            success_message: "",
            error_message: "",
            code: '',
            email: '',
            input_error:{
                code:{status:false, msg:""},
                email:{status:false, msg:""}
            },
            input_success:{
                code:{status:false, msg:""},
                email:{status:false, msg:""}
            }
        }
 
    },
    /**
        * Application Methods
        */
    methods:{
 
 
        /**
            * Live Checking Input Data Availability Method
            * @param {string} input 
            */
        checkAvailability(input){
            if(this[input] == '' || this[input] == null){
                this.input_error[input] = {status:false, msg:""}
                this.input_success[input] = {status:false, msg:""}
                return false;
            }
 
            //Setting Form Data
            var fdata = new FormData();
                fdata.append(input,this[input])
                fdata.append("check_live",'true')
 
            //Request for cheching input availability
            fetch("checkAvailability.php",{
                method:'POST',
                body: fdata
            })
            .then(response => response.json())
            .then(data=>{
                if(!!data.status){
                    if(data.status == 'success'){
                        if(!!data.success){
                                //Return Success Message
                            Object.keys(data.success).map(k => {
                                this.input_success[k] = data.success[k]
                                this.input_error[k] = {status:false, msg: ''}
                            })
                        }
                        if(!!data.error){
                            //Return Error Message
                            Object.keys(data.error).map(k => {
                                this.input_error[k] = data.error[k]
                                this.input_success[k] = {status:false, msg: ''}
                            })
                        }
                    }
                }
            })
            .catch(error=>{
                console.error(error)
            })
        },
        formSubmit(e){
            e.preventDefault();
 
            //Submitted Form
            var form = e.target
 
            // Setting New Form Data
            var fdata = new FormData(form);
            
            // Chech some Availability Error before saving the record
            if(this.input_error.code.status || this.input_error.email.status){
                is_error = true
                error_message= "Some of the input data are already exists."
            }
 
 
            // Request for Saving the record
            fetch("saveEmployee.php",{
                method:'POST',
                body: fdata
            })
            .then(response => response.json())
            .then(data=>{
                if(!!data.status){
                    if(data.status == 'success'){
                        // If the request process is successful
                        form.reset();
                        this.is_success = true;
                        this.is_error = false;
                        this.code = "";
                        this.email = "";
                        if(!!data.msg){
                            this.success_message = data.msg
                        }
                        this.input_error={
                            code:{status:false, msg:""},
                            email:{status:false, msg:""}
                        },
                        this.input_success={
                            code:{status:false, msg:""},
                            email:{status:false, msg:""}
                        }
                    }else{
                        // If the request process has failed to continue
                        this.is_success = false;
                        if(!!data.error){
                            Object.keys(data.error).map(k => {
                                this.input_success[k] = {status:false, msg: ''}
                                this.input_error[k] = data.error[k]
                            })
                        }
                        if(!!data.msg){
                            this.is_error = true;
                            this.error_message = data.msg
                        }
                    }
                }
            })
            .catch(error=>{
                console.error(error)
            })
 
        }
    }
}).mount('#SampleApp')

Check Availability API

Here is the snippet of a PHP File that contains the PHP Script for checking the availability of the entered input value of the end user. The script will be executed using the checkAvailability() method on the Vue App script. The script will be used also before the insertion process to check the availability again before executing the insertion of data on the database. Save it as checkAvailability.php.

<?php
include_once('db-connect.php');
 
function check_availability(){
    global $conn;
    // Allowed fields to check
    $allowed_fields = ['code', 'email'];
    $response['status'] = 'success';
 
    /**
    * Dynamically checking the input data availablity
    */
    foreach($_POST as $k => $v){
        if(in_array($k, $allowed_fields)){
            $v = $conn->real_escape_string(trim($v));
 
            // SQL Statement
            $check_sql = "SELECT id FROM `employee_list` where `{$k}` = '{$v}' ";
            // SQL Query
            $check_qry = $conn->query($check_sql);
 
            if($check_qry->num_rows > 0){
                // If data does not exists yet
                $response['error'][$k]['status'] = 'true';
                $response['error'][$k]['msg'] = "The entered {$k} already exists.";
            }else{
                // If data already exists
                $response['success'][$k]['status'] = 'true';
                $response['success'][$k]['msg'] = "The entered {$k} is still avalailable.";
 
            }
        }
    }
    return $response;
}
 
if(isset($_POST['check_live']) && $_POST['check_live'] == 'true'){
    // If request was executed upon input keyup event
    echo json_encode(check_availability());
    $conn->close();
}
 
?>

Data Insertion API

The following snippet is PHP Script that contains the script for inserting the form's input data values on the database. The script loads the checkAvailability.php file for validating the input value availability before the execution of insertion. Save the file saveEmployee.php.

<?php 
require_once('db-connect.php');
require_once('checkAvailability.php');
 
if($_SERVER['REQUEST_METHOD'] == 'POST'){
    /**
        * Check input availability before saving
        */
    $input_check = check_availability();
    if(isset($input_check['error'])){
 
        // If some data already exists
        $input_check['status'] = 'error';
        $input_check['msg'] = "Some of the input data already exists.";
        echo json_encode($input_check);
        exit;
 
    }
 
    // sanitizing input values
    foreach($_POST as $k => $v){
        $$k = addslashes($conn->real_escape_string($v));
    }
 
    // Insert SQL Statement
    $sql = "INSERT INTO `employee_list`
            (`code`, `name`, `email`, `department`, `designation`)
            VALUES
            ('{$code}','{$name}','{$email}','{$department}','{$designation}')
            ";
 
 
    // Insert SQL Query
    $insert = $conn->query($sql);
    
    if($insert){
        // If insertion is successful
        $response['status'] = 'success';
        $response['msg'] = 'New Employee Data has been added successfully.';
    }else{
        // If insertion has failed
        $response['status'] = 'success';
        $response['msg'] = 'Employee Data has failed to insert. Error: '.$conn->error;
    }
 
    echo json_encode($response);
}
 
$conn->close();

That's it! You can now test the sample web application on your end and see if it achieves the objective of this tutorial. I have provided also the source code zip file on this article. You can download it by clicking the Download Button below this article.

Snapshots

Here are some of the snapshots of the application's output.

Form Interface

Input Data Availability Message (Available)

Input Data Availability Message (Existing)

Form's Interface with Alerts

That's the end of this tutorial. I hope this Live Checking of Input Data Availability using VueJS and PHP Tutorial helps you with what you are looking for and that you'll find this useful for your current and future projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding:)

Add new comment

428 views