Modifier et supprimer des données avec AJAX et PHP

16 août 2020 , dnuvo , 1 Comment

Cet article est la transcription brute et en temps réel de l’article « Edit Delete DataTables record with AJAX and PHP » du site MakitWeb.

C’est à dire que je ne vais pas suivre le tuto puis faire mon petit article mais tout faire en même temps.

L’auteur commence par indiquer son plan :
Structure des données en base
Un peu de configuration
Les ressources à télécharger et les includes
HTML
PHP
jQuery
Le résulta final
Conclusion
Plutôt cool comme programme☺

On commence par la base de données composée d’une seule table

CREATE TABLE `users` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `name` varchar(80) NOT NULL, 
  `gender` varchar(10) NOT NULL,
  `city` varchar(80) NOT NULL,
  `email` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Hé ! on a pas le nom de la base !
Un tout petit peu plus loin il nous donne le contenu du fichier config.php dans lequel on voit que le nom de la base est ‘tutorial’ :

<?php

$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
  die("Connection failed: " . mysqli_connect_error());
}

Je teste tout de suite en appelant le fichier config.php dans l’url et je récupère l’erreur ‘Connection failed: Access denied for user ‘root’@’localhost’ (using password: NO)’.
Evidemment il faut que je mette le mot de passe dans la variable $password ☺
…
C’est tout bon. Plus d’erreur. J’aime bien tester le plus tôt possible pour ne pas me retrouver avec 10 erreurs en même temps.
La devise de tout bon développeur devrait être « petit à petit, l’oiseau fait son nid ! » ☺

La troisième partie nous propose de télécharger des ressources ou d’utiliser des CDN.
Nous trouverons très classiquement du Bootstrap et du jQuery.
Mais oh surprise (!) l’utilisation d’une « bibliothèque’ ou plugin nommé « DataTable » :

<!-- Datatable CSS -->
<link href='//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css' rel='stylesheet' type='text/css'>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >

<!-- jQuery Library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Bootstrap CSS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>

<!-- Datatable JS -->
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

Par curiosité je vais faire un tour sur le site https://datatables.net/ . Très impressionnant. Il semble que cette biblitohèque propose aussi de faire du CRUD. 
Mais restons concentré sur le tuto.
L'auteur ne donne pas le nom du fichier dans lequel coller le code. A priori cela devrait être index.php

A suivre le code complété :

<!doctype html>
<html>
<head>
   <title>Edit delete DataTables record with AJAX and PHP</title>

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <!-- Datatable CSS -->
   <link href='DataTables/datatables.min.css' rel='stylesheet' type='text/css'>

   <!-- Bootstrap CSS -->
   <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">

   <!-- jQuery Library -->
   <script src="jquery-3.5.1.min.js"></script>

   <!-- Bootstrap JS -->
   <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

   <!-- Datatable JS -->
   <script src="DataTables/datatables.min.js"></script>

</head>
<body >

   <div class='container'>

     <!-- Modal -->
     <div id="updateModal" class="modal fade" role="dialog">
       <div class="modal-dialog">

         <!-- Modal content-->
         <div class="modal-content">
           <div class="modal-header">
             <h4 class="modal-title">Update</h4>
             <button type="button" class="close" data-dismiss="modal">×</button> 
           </div>
           <div class="modal-body">
             <div class="form-group">
               <label for="name" >Name</label>
               <input type="text" class="form-control" id="name" placeholder="Enter name" required> 
             </div>
             <div class="form-group">
               <label for="email" >Email</label> 
               <input type="email" class="form-control" id="email" placeholder="Enter email"> 
             </div> 
             <div class="form-group">
               <label for="gender" >Gender</label>
               <select id='gender' class="form-control">
                 <option value='male'>Male</option>
                 <option value='female'>Female</option>
               </select> 
             </div> 
             <div class="form-group">
               <label for="city" >City</label> 
               <input type="text" class="form-control" id="city" placeholder="Enter city"> 
             </div>

           </div>
           <div class="modal-footer">
             <input type="hidden" id="txt_userid" value="0">
             <button type="button" class="btn btn-success btn-sm" id="btn_save">Save</button>
             <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Close</button>
           </div>
         </div>

       </div>
     </div>

     <!-- Table -->
     <table id='userTable' class='display dataTable' width='100%'>
       <thead>
         <tr>
           <th>Name</th>
           <th>Email</th>
           <th>Gender</th>
           <th>City</th>
           <th>Action</th>
         </tr>
       </thead>
     </table>

   </div>

</body>
</html>

Vient ensuite le source php traitant l'appel AJAX.
J'ai un peu la flemme de lire les explications ; j'aimerai bien savoir si ça fonctionne avant :
Nom du fichier : ajaxfile.php

<?php
include 'config.php';

$request = 1;
if(isset($_POST['request'])){
   $request = $_POST['request'];
}

// DataTable data
if($request == 1){
   ## Read value
   $draw = $_POST['draw'];
   $row = $_POST['start'];
   $rowperpage = $_POST['length']; // Rows display per page
   $columnIndex = $_POST['order'][0]['column']; // Column index
   $columnName = $_POST['columns'][$columnIndex]['data']; // Column name
   $columnSortOrder = $_POST['order'][0]['dir']; // asc or desc

   $searchValue = mysqli_escape_string($con,$_POST['search']['value']); // Search value

   ## Search 
   $searchQuery = " ";
   if($searchValue != ''){
      $searchQuery = " and (name like '%".$searchValue."%' or 
         email like '%".$searchValue."%' or 
         city like'%".$searchValue."%' ) ";
   }

   ## Total number of records without filtering
   $sel = mysqli_query($con,"select count(*) as allcount from users");
   $records = mysqli_fetch_assoc($sel);
   $totalRecords = $records['allcount'];

   ## Total number of records with filtering
   $sel = mysqli_query($con,"select count(*) as allcount from users WHERE 1 ".$searchQuery);
   $records = mysqli_fetch_assoc($sel);
   $totalRecordwithFilter = $records['allcount'];

   ## Fetch records
   $empQuery = "select * from users WHERE 1 ".$searchQuery." order by ".$columnName." ".$columnSortOrder." limit ".$row.",".$rowperpage;
   $empRecords = mysqli_query($con, $empQuery);
   $data = array();

   while ($row = mysqli_fetch_assoc($empRecords)) {

     // Update Button
     $updateButton = "<button class='btn btn-sm btn-info updateUser' data-id='".$row['id']."' data-toggle='modal' data-target='#updateModal' >Update</button>";

     // Delete Button
     $deleteButton = "<button class='btn btn-sm btn-danger deleteUser' data-id='".$row['id']."'>Delete</button>";

     $action = $updateButton." ".$deleteButton;

     $data[] = array(
       "name" => $row['name'],
       "email" => $row['email'],
       "gender" => $row['gender'],
       "city" => $row['city'],
       "action" => $action
     );
   }

   ## Response
   $response = array(
     "draw" => intval($draw),
     "iTotalRecords" => $totalRecords,
     "iTotalDisplayRecords" => $totalRecordwithFilter,
     "aaData" => $data
   );

   echo json_encode($response);
   exit;
}

// Fetch user details
if($request == 2){
   $id = 0;

   if(isset($_POST['id'])){
      $id = mysqli_escape_string($con,$_POST['id']);
   }

   $record = mysqli_query($con,"SELECT * FROM users WHERE id=".$id);

   $response = array();

   if(mysqli_num_rows($record) > 0){
      $row = mysqli_fetch_assoc($record);
      $response = array(
         "name" => $row['name'],
         "email" => $row['email'],
         "gender" => $row['gender'],
         "city" => $row['city'],
      );

      echo json_encode( array("status" => 1,"data" => $response) );
      exit;
   }else{
      echo json_encode( array("status" => 0) );
      exit;
   }
}

// Update user
if($request == 3){
   $id = 0;

   if(isset($_POST['id'])){
      $id = mysqli_escape_string($con,$_POST['id']);
   }

   // Check id
   $record = mysqli_query($con,"SELECT id FROM users WHERE id=".$id);
   if(mysqli_num_rows($record) > 0){
 
      $name = mysqli_escape_string($con,trim($_POST['name']));
      $email = mysqli_escape_string($con,trim($_POST['email']));
      $gender = mysqli_escape_string($con,trim($_POST['gender']));
      $city = mysqli_escape_string($con,trim($_POST['city']));

      if( $name != '' &amp;&amp; $email != '' &amp;&amp; $gender != '' &amp;&amp; $city != '' ){

         mysqli_query($con,"UPDATE users SET name='".$name."',email='".$email."',gender='".$gender."',city='".$city."' WHERE id=".$id);

         echo json_encode( array("status" => 1,"message" => "Record updated.") );
         exit;
      }else{
         echo json_encode( array("status" => 0,"message" => "Please fill all fields.") );
         exit;
      }

   }else{
      echo json_encode( array("status" => 0,"message" => "Invalid ID.") );
      exit;
   }
}

// Delete User
if($request == 4){
   $id = 0;

   if(isset($_POST['id'])){
      $id = mysqli_escape_string($con,$_POST['id']);
   }

   // Check id
   $record = mysqli_query($con,"SELECT id FROM users WHERE id=".$id);
   if(mysqli_num_rows($record) > 0){

      mysqli_query($con,"DELETE FROM users WHERE id=".$id);

      echo 1;
      exit;
   }else{
      echo 0;
      exit;
   }
}

Vient ensuite un gros bloc de code javascript. Rien n’indique ou le mettre.
Hum…j’imagine que c’est dans index.php. A priori au tout début puisque qu’on reconnait « $(document).ready… » .

$(document).ready(function(){

  // DataTable
  var userDataTable = $('#userTable').DataTable({
     'processing': true,
     'serverSide': true,
     'serverMethod': 'post',
     'ajax': {
        'url':'ajaxfile.php'
     },
     'columns': [
        { data: 'name' },
        { data: 'email' },
        { data: 'gender' },
        { data: 'city' },
        { data: 'action' },
     ]
  });

  // Update record
  $('#userTable').on('click','.updateUser',function(){
     var id = $(this).data('id');

     $('#txt_userid').val(id);

     // AJAX request
     $.ajax({
        url: 'ajaxfile.php',
        type: 'post',
        data: {request: 2, id: id},
        dataType: 'json',
        success: function(response){
           if(response.status == 1){

             $('#name').val(response.data.name);
             $('#email').val(response.data.email);
             $('#gender').val(response.data.gender);
             $('#city').val(response.data.city);

             userDataTable.ajax.reload();
           }else{
             alert("Invalid ID.");
           }
        }
     });

  });

  // Save user 
  $('#btn_save').click(function(){
     var id = $('#txt_userid').val();

     var name = $('#name').val().trim();
     var email = $('#email').val().trim();
     var gender = $('#gender').val().trim();
     var city = $('#city').val().trim();

     if(name !='' &amp;&amp; email != '' &amp;&amp; city != ''){

       // AJAX request
       $.ajax({
         url: 'ajaxfile.php',
         type: 'post',
         data: {request: 3, id: id,name: name, email: email, gender: gender, city: city},
         dataType: 'json',
         success: function(response){
            if(response.status == 1){
               alert(response.message);

               // Empty and reset the values
               $('#name','#email','#city').val('');
               $('#gender').val('male');
               $('#txt_userid').val(0);

               // Reload DataTable
               userDataTable.ajax.reload();

               // Close modal
               $('#updateModal').modal('toggle');
            }else{
               alert(response.message);
            }
         }
      });

    }else{
       alert('Please fill all fields.');
    }
  });

  // Delete record
  $('#userTable').on('click','.deleteUser',function(){
     var id = $(this).data('id');

     var deleteConfirm = confirm("Are you sure?");
     if (deleteConfirm == true) {
        // AJAX request
        $.ajax({
          url: 'ajaxfile.php',
          type: 'post',
          data: {request: 4, id: id},
          success: function(response){
             if(response == 1){
                alert("Record deleted.");

                // Reload DataTable
                userDataTable.ajax.reload();
             }else{
                alert("Invalid ID.");
             }
          }
        });
     } 

  });
});

Testons !!!
Patatras ; rien ne fonctionne. Même pas l'affichage. 
Il semble que les ressources externes ne soient pas chargées.
Après vérification je me rends compte que ce n'était pas des CDN mais des ressources qu'il fallait télécharger ...
La flemme. 
Je vais chercher les CDN. Il semble qu'il utilise Bootstap 4 et jQuery 3.5.

Voila ce que je met en place au niveau des CDN :

   <script
  src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
  integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
  crossorigin="anonymous"></script>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>


   <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
  
  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>

Mais rien ne fonctionne...

J'ajoute quelques données avec phpmyadmin...qui ne s'affichent pas.
Il s'agit donc du plugin Datatable qui ne fonctionne pas.

OK ; une bonne heure de perdue.
Bien sur je pourrais chercher d'ou vient (d'ou viennent) le ou les problèmes. Mais je n'ai pas envie de passer 2 heures sur un tuto qui aurait du m'apporter sur un plateau un source qui fonctionne. Afin d'être en confiance pour comprendre les explications.

La morale de cette histoire c'est que quand vous faite un tuto :
Procédez par étapes avec à chaque fois du code qui fonctionne.
Indiquez précisez dans quels fichiers coller le code.
Donnez le résultat final en téléchargement !

Je ne baisse pas les bras ; mais il faut trouver le temps.
Il faudra tester en premier le plugin magique Datatable et afficher des données. A suivre…☺

Modifier et supprimer des données avec AJAX et PHP

One Response

Leave a Reply

Articles récents

Commentaires récents

Archives

Catégories

Méta