Insérer une suppression de mise à jour dans PHP en utilisant Ajax avec le code source

Posted on


Hé les gars, j’espère que tout va bien, j’ai récemment développé le projet simple à savoir Insérer une mise à jour, supprimer dans Php en utilisant Ajax. En gros, vous pouvez dire que l’opération grossière en PHP en utilisant Ajax. La mise à jour par insertion supprime la partie principale de toutes les applications, vous devez l’apprendre. Toute application que vous allez créer ou que vous souhaitez créer, vous devez ajouter ces éléments tels que Insérer une mise à jour Supprimer dans Php.

Mais, j’ai utilisé les tactiques Ajax qui vous aident à effectuer les opérations Insérer une mise à jour Supprimer en PHP en utilisant Ajax sans actualiser une page. Donc, la première chose dont vous avez besoin de connaître les fichiers de projet que nous utiliserons tels que Bootstrap pour concevoir le formulaire, jQuery pour effectuer la requête Ajax, et enfin nous utiliserons Php et MySQLi.

Insert-Update-Delete-in-PHP-Using-Ajax

Tout d’abord, nous devons télécharger le fichier CSS Bootstrap et également le fichier jQuery, une fois que nous avons téléchargé ces fichiers. Ensuite, nous devons les ajouter à notre projet. Une fois que vous l’avez ajouté, vous pourrez concevoir les formulaires.

Insérer la suppression de la mise à jour dans PHP en utilisant Ajax

Les gars, mentionnés ci-dessus, ont une vidéo dans une vidéo, vous apprendrez tout à partir de zéro Comment insérer une mise à jour Supprimer dans PHP en utilisant Ajax. Si vous avez besoin de la source, je mentionnerai étape par étape chaque fichier avec son nom, mais vous devez créer votre propre base de données avec la même table. Alors, commençons à comprendre chaque code de fichier.

Tu pourrais aussi aimer:

Opération Crud en Php en utilisant jQuery Ajax

Tout d’abord, vous devez créer une base de données et une table à l’intérieur de la table, vous devez créer trois colonnes, vous pouvez écrire tous les noms de colonne que vous aimez, mais vous devez utiliser les mêmes noms de colonne de base de données dans le code.




    
    
    
    
    
    
    
    
    Projet Ajax avec Php




Ci-dessus mentionné tout sur la conception du formulaire et également afficher le modal, mais vous devez télécharger et inclure le fichier CSS Bootstrap et le fichier jQuery, ci-dessous, j’ai mentionné le code jQuery dont vous avez besoin pour l’utiliser.

// Insert Record in the Database
function Insert_record()
{
   $(document).on('click','#btn_register',function()
   {
        var User = $('#UserName').val();
        var Email = $('#UserEmail').val();

        if(User == "" || Email=="")
        {
            $('#message').html('Please Fill in the Blanks ');
        }
        else
        {
            $.ajax(
                {
                    url : 'insert.php',
                    method: 'post',
                    data:{UName:User,UEmail:Email},
                    success: function(data)
                    {
                        $('#message').html(data);
                        $('#Registration').modal('show');
                        $('form').trigger('reset');
                        view_record();
                    }
                })
        }
        
   })

   $(document).on('click','#btn_close',function()
   {
       $('form').trigger('reset');
       $('#message').html('');
   })   
}

Le code mentionné ci-dessus est un code jQuery, vous devez l’utiliser pour transmettre des données avec Php Page, j’ai également mentionné le code Php qui vous aide à insérer l’enregistrement dans la base de données.

 // Insert Record Function
    function InsertRecord()
    {
        global $con;
        $UserName = $_POST['UName'];
        $UserEmail = $_POST['UEmail'];
        
        $query = " insert into user_record (UserName,UserEmail) values('$UserName','$UserEmail')";
        $result= mysqli_query($con,$query);

        if($result)
        {
            echo ' Your Record Has Been Saved in the Database';
        }
        else
        {
            echo ' Please Check Your Query ';
        }
    }

Ci-dessus mentionné, tout le code représente un formulaire de conception et insère un enregistrement dans la base de données à l’aide de Bootstrap, jQuery et également Php MyAdmin. Vous devez les organiser comme vous le souhaitez, si vous rencontrez un problème pour l’organiser, vous devez regarder ci-dessus le didacticiel vidéo qui vous aide à tout comprendre comme vous le souhaitez.

Lorsque vous avez terminé le processus d’insertion, vous devez afficher les données sur la page Web, à l’intérieur du index.php, J’ai mentionné la table div et attribué l’ID à savoir tableDonc, j’utiliserai cet identifiant pour afficher l’enregistrement de base de données dans le tableau HTML. Vous devez suivre les étapes ci-dessous.

Tout d’abord, nous devons travailler sur jQuery File pour transmettre les données avec Php Page, ci-dessous, j’ai mentionné le code simple jQuery qui nous aide à envoyer la requête avec la page Php en utilisant Ajax.

// Display Record
function view_record()
{
    $.ajax(
        {
            url: 'view.php',
            method: 'post',
            success: function(data)
            {
                data = $.parseJSON(data);
                if(data.status=='success')
                {
                    $('#table').html(data.html);
                }
            }
        })
}

J’ai mentionné le code jQuery, vous devez utiliser le même code pour envoyer la requête sur la page Php, à l’intérieur de la page jQuery Code have View.php. J’ai utilisé cette page, si vous voulez changer cela, vous pouvez le faire, mais vous devez créer la même page en Php qui est entrée dans le fichier jQuery.

 // Display Data Function
    function display_record()
    {
        global $con;
        $value = "";
        $value = '';
        $query = "select * from user_record ";
        $result = mysqli_query($con,$query);
        
        while($row=mysqli_fetch_assoc($result))
        {
            $value.= ' ';
        }
        $value.='
User ID User User User Email Edit Delete
'.$row['ID'].' '.$row['UserName'].' '.$row['UserEmail'].'
'; echo json_encode(['status'=>'success','html'=>$value]); }

Une fois que vous suivez les codes mentionnés ci-dessus, vous pouvez insérer l’enregistrement dans la base de données et vous pouvez également afficher l’enregistrement de la base de données sur la page Web. L’étape suivante dont vous avez besoin pour obtenir l’enregistrement particulier à partir du tableau HTML, dans le tableau HTML, j’ai inclus les balises Button dans la balise Button, j’ai mentionné l’attribut à savoir data-id dans l’ID de données que j’ai attribué à la colonne de base de données, à savoir ID.

L’identifiant est très important pour obtenir un enregistrement particulier. Donc, vous devez utiliser la même chose pour obtenir l’enregistrement de la table. J’ai mentionné ci-dessous le code jQuery qui vous aide à obtenir l’enregistrement particulier dans la page HTML, mais vous devez créer Modal.

Donc, la première chose que vous devez inclure à l’intérieur du code mentionné ci-dessous index.php page, le code ci-dessous nous aide à afficher le modal, une fois le modal apparu, nous pourrons alors récupérer l’enregistrement de la table dans le modal.

 
     

Vous devez coller le code dans le index.php page, une fois que vous avez ajouté cela, vous devez inclure le code jQuery mentionné ci-dessous. Le code jQuery nous aide à afficher le Modal et également à obtenir un enregistrement particulier dans le Modal.

//Get Particular Record
function get_record()
{
    $(document).on('click','#btn_edit',function()
    {
        var ID = $(this).attr('data-id');
        $.ajax(
            {
                url: 'get_data.php',
                method: 'post',
                data:{UserID:ID},
                dataType: 'JSON',
                success: function(data)
                {
                   $('#Up_User_ID').val(data[0]);
                   $('#Up_UserName').val(data[1]);
                   $('#Up_UserEmail').val(data[2]);
                   $('#update').modal('show');
                   
                }
                
            })
    })
}

Enfin, vous devez utiliser Php pour obtenir l’enregistrement particulier dans Modal, vous devez donc utiliser le code mentionné ci-dessous. Cela nous aide à afficher l’enregistrement particulier dans Modal.

    // Get Particular Record
    function get_record()
    {
        global $con;
        $UserID = $_POST['UserID'];
        $query = "select * from user_record where ID='$UserID'";
        $result = mysqli_query($con,$query);

        while($row=mysqli_fetch_assoc($result))
        {
            $User_data = "";
            $User_data[0]=$row['ID'];
            $User_data[1]=$row['UserName'];
            $User_data[2]=$row['UserEmail'];
        }
        echo json_encode($User_data);
    }

Une fois que vous affichez l’enregistrement particulier dans le modal, vous pourrez alors effectuer l’opération à savoir Mettre à jour l’enregistrement. Donc, la première chose dont vous avez besoin pour obtenir la valeur de Modal Dans les champs de texte de saisie Modal, vous devez utiliser le code jQuery mentionné ci-dessous pour obtenir l’enregistrement et envoyer la requête Ajax dans la page Php.

// Update Record 
function update_record()
{
    
    $(document).on('click','#btn_update',function()
    {
        var UpdateID = $('#Up_User_ID').val();
        var UpdateUser = $('#Up_UserName').val();
        var UpdateEmail = $('#Up_UserEmail').val();

        if(UpdateUser=="" || UpdateEmail=="")
        {
            $('#up-message').html('please Fill in the Blanks');
            $('#update').modal('show');
        }
        else
        {
            $.ajax(
                {
                    url: 'update.php',
                    method: 'post',
                    data:{U_ID:UpdateID,U_User:UpdateUser,U_Email:UpdateEmail},
                    success: function(data)
                    {
                        $('#up-message').html(data);
                        $('#update').modal('show');
                        view_record();
                    }
                })
        }
        
    })
}

Ensuite, vous devez utiliser Php pour effectuer l’opération telle que Mettre à jour l’enregistrement, ci-dessous, j’ai mentionné le code qui nous aide à mettre à jour l’enregistrement sans actualiser une page.

// Update Function
    function update_value()
    {
        global $con;
        $Update_ID = $_POST['U_ID'];
        $Update_User =$_POST['U_User'];
        $Update_Email = $_POST['U_Email'];

        $query = "update user_record set UserName='$Update_User', UserEmail='$Update_Email' where ID='$Update_ID '";
        $result = mysqli_query($con,$query);
        if($result)
        {
            echo ' Your Record Has Been Updated ';
        }
        else
        {
            echo ' Please Check Your Query ';
        }
    }

Enfin, nous devons effectuer la dernière opération telle que Supprimer l’enregistrement, nous devons donc travailler dessus. Tout d’abord, vous devez inclure ci-dessous la mention du code HTML dans Index.php qui nous aident à afficher le Modal. Vous avez besoin

  
    

Ensuite, nous devons utiliser jQuery pour envoyer la requête dans la page Php et nous devons obtenir l’ID, j’ai mentionné l’ID à l’intérieur de la page view.php. Vous pouvez commander maintenant, nous devons cibler le data-id1 attribut pour obtenir l’ID d’enregistrement particulier. Une fois que nous avons obtenu l’ID d’enregistrement particulier, nous pourrons alors effectuer l’opération.

// Delete Function
function delete_record()
{
    $(document).on('click','#btn_delete',function()
    {
        var Delete_ID = $(this).attr('data-id1');
        $('#delete').modal('show');

        $(document).on('click','#btn_delete_record',function()
        {
            $.ajax(
                {
                    url: 'delete.php',
                    method: 'post',
                    data:{Del_ID:Delete_ID},
                    success: function(data)
                    {
                        $('#delete-message').html(data).hide(5000);
                        view_record();
                    }
                })
        })
    })
}

Enfin, nous devons utiliser Php pour supprimer l’enregistrement, j’ai mentionné le code Php, vous devez le coller avec votre fichier php. Ensuite, vous pouvez facilement supprimer l’enregistrement de la base de données à l’aide de jQuery Ajax.

    function delete_record()
    {
        global $con;
        $Del_Id = $_POST['Del_ID'];
        $query = "delete from user_record where ID='$Del_Id' ";
        $result = mysqli_query($con,$query);

        if($result)
        {
            echo ' Your Record Has Been Delete ';
        }
        else
        {
            echo ' Please Check Your Query ';
        }
    }

Donc, j’ai inclus chaque fichier et aussi chaque code qui vous aide à effectuer les opérations Insérer une mise à jour Supprimer en PHP en utilisant Ajax. Si vous rencontrez un problème pour comprendre cela, vous devez regarder mon didacticiel vidéo qui vous aide à tout comprendre à partir de zéro avec partiellement. Si vous avez besoin de code source, vous pouvez le télécharger pour cliquer sur le bouton mentionné ci-dessous maintenant.

Les gars, j’ai fait un tutoriel sur l’insertion de la suppression des mises à jour en PHP en utilisant Ajaxuery Ajax, j’espère que vous avez appris quelque chose de nouveau. Donc, si vous aimez cela, partagez le didacticiel sur les sites Web de partage social et abonnez-vous à ma chaîne YouTube pour obtenir des mises à jour sur ma chaîne YouTube. Bonne journée :).



Telecharger ici

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *