Vérification en direct de la disponibilité des données d'entrée à l'aide de VueJS et du didacticiel PHP

Vérification en direct de la disponibilité des données d’entrée à l’aide de VueJS et du didacticiel PHP

Dans ce didacticiel, vous apprendrez à mettre en œuvre un Vérification en direct de la disponibilité des données d’entrée utilisant VueJS et PHP. Ce tutoriel vise à fournir aux étudiants en informatique et aux nouveaux programmeurs une référence pour la mise en œuvre d’une interaction en direct d’une application entre le côté client et le côté serveur en utilisant ledit Cadre JS et langage de programmation. J’ai fourni quelques extraits ci-dessous pour ce tutoriel. Un exemple de fichier de code source d’application Web qui illustre l’objectif de ce didacticiel est également fourni et téléchargeable gratuitement.

Comment fonctionne la vérification en direct de la disponibilité des données d’entrée ?

Vérification en direct de la disponibilité des données d’entrée est l’une des fonctionnalités efficaces d’une application Web. Certains développeurs préfèrent implémenter ce type de fonctionnalité dans certains de leurs formulaires de projet. Il permet aux utilisateurs finaux ou aux encodeurs de formulaire d’être immédiatement avertis si les données saisies dans le champ de texte spécifique nécessitant une valeur unique existent déjà. Grâce à cela, les utilisateurs finaux connaîtront immédiatement l’état de disponibilité des données, même si le formulaire n’a pas encore été soumis.

Comment implémenter ou créer une vérification en direct de la disponibilité des données d’entrée à l’aide de VueJS et PHP ?

La Vérification en direct de la disponibilité des données d’entrée fonctionnalité peut être réalisée de tant de manières en utilisant PHP et vue. Voici les méthodes, fonctions, propriétés et API suivantes de PHP et Vue qui peuvent aider à implémenter ladite fonctionnalité.

Javascript

Méthodes de vue
API de récupération JS
Modèles Vue
JS FormData

PHP

POO PHP MySQL
Instruction MySQL SELECT

Pour mieux comprendre comment utiliser les méthodes, fonctions, propriétés et API données de PHP et Vue ci-dessus pour implémenter une fonctionnalité de vérification en direct de la disponibilité des données d’entrée, consultez les extraits que j’ai fournis ci-dessous. Les extraits génèrent une application Web simple qui insère de nouveaux enregistrements d’employés dans la base de données.

Extraits

Base de données

L’extrait que j’ai fourni utilise un Base de données MySQL nommé dummy_db. La base de données contient les éléments suivants Schéma MySQL.

Connexion à la base de données

L’extrait suivant est un Fichier PHP nommé db-connect.php. Le script gère la connexion entre l’application et la base de données.

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

Interface de page de formulaire

L’extrait de code suivant contient le script de la page principale et l’exemple d’interface de formulaire. Enregistrez le fichier sous index.php.

<!DOCTYPE html>
    <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=" 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=" 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>
    <style>
        html, body{
            min-height:100%;
            width:100%;
        }
        tbody:empty:after{
            content:'No records found'
        }
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary bg-gradient">
            <a class="navbar-brand" href="./">Check Input Data Availability</a>
                <a href=" class="text-light fw-bolder h6 text-decoration-none" target="_blank">SourceCodester</a>
    </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">
            <div class="card rounded-0 shadow mb-3">
                    <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">
                                <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>
                                <input type="text" id="name" name="name" class="form-control form-control-sm rounded-0" required>
                                <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>
                                <label for="department" class="form-label">Department</label>
                                <input type="text" id="department" name="department" class="form-control form-control-sm rounded-0" required>
                                <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 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>

Javascript

L’extrait ci-dessous est un Javascript fichier contenant le script de lancement de la VueJS. Les méthodes de vérification de la disponibilité des données d’entrée et de la soumission du formulaire sont écrites dans l’extrait de code. Enregistrez-le sous 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')

Vérifier la disponibilité de l’API

Voici l’extrait d’un Fichier PHP qui contient le script PHP pour vérifier la disponibilité de la valeur d’entrée saisie de l’utilisateur final. Le script sera exécuté en utilisant le Voir les disponibilités() méthode sur le script Vue App. Le script sera également utilisé avant le processus d’insertion pour vérifier à nouveau la disponibilité avant d’exécuter l’insertion de données dans la base de données. Enregistrez-le sous 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){
            $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 > ){
                // 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
    $conn->close();
}
 
?>

API d’insertion de données

L’extrait suivant est Script PHP qui contient le script d’insertion des valeurs des données d’entrée du formulaire dans la base de données. Le script charge le checkAvailability.php fichier de validation de la disponibilité de la valeur d’entrée avant l’exécution de l’insertion. Enregistrez le fichier 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.";
 
    }
 
    // sanitizing input values
    foreach($_POST as $k => $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;
    }
 
}
 
$conn->close();

C’est ça! Vous pouvez maintenant tester l’exemple d’application Web de votre côté et voir s’il atteint l’objectif de ce didacticiel. J’ai également fourni le fichier zip du code source sur cet article. Vous pouvez le télécharger en cliquant sur le Bouton de téléchargement en dessous de cet article.

Instantanés

Voici quelques-uns des instantanés de la sortie de l’application.

Interface de formulaire

Message de disponibilité des données d’entrée (disponible)

Message de disponibilité des données d’entrée (existant)

Interface du formulaire avec les alertes

C’est la fin de ce tutoriel. J’espère Cela Vérification en direct de la disponibilité des données d’entrée à l’aide de VueJS et du didacticiel PHP vous aide avec ce que vous cherchez et que vous trouverez cela utile pour vos projets actuels et futurs.

Explorez plus sur ce site Web pour plus Tutoriels et Codes sources gratuits.