Back

Concevoir une application AJAX et PHP

Le monde d’AJAX

  1. Objectifs

    • Connaitre AJAX
  2. Énoncé

    • Vous allez créer une application web AJAX nommée verifier dans laquelle l’utilisateur doit indiquer son adressmail et où le serveur renvoie des réponses pendant la saisie de l’utilisateur.
    • Pendant que l’utilisateur est en train de saisir son adresse mail, le serveur est appelé de façon synchrone, environ une fois par seconde, pour voir s’il reconnait l’adresse mail saisie. Cela explique pourquoi nous n’avons pas besoin d’un bouton, comme envoyer, pour avertir de la fin de la saisie. Cette méthode n’est pas adaptée à un mécanisme réel d’ouverture de session, mais elle convient parfaitement à la démonstration des possibilités d’AJAX
    • L’application consiste en trois fichiers:
      • index.html: est le premier fichier que l’utilisateur demande
      • verifier.js: est un fichier qui contient le code JavaScript chargé sur le client en même temps que index.html.Ce fichier prendra en charge les requêtes asynchrones au serveur lorsque la fonctionnalité coté serveur sera requise.
      • verifier.php: est un script PHP stocké sur le serveur, qui est appelé par le client au travers du code JavaScript de verifier.js



  3. Solution proposée

    • La table MySql
      • Créer la base de données "gestiondesapprenants" contenant la table "utilisateurs" à l’aide du fichier base_verifier.sql ci-dessous :
      •  -- phpMyAdmin SQL Dump
        -- version 4.8.5
        -- https://www.phpmyadmin.net/
        --
        -- Base de données :  `gestiondesapprenants`
        --
        -- --------------------------------------------------------
        --
        -- Structure de la table `utilisateurs`
        --
        DROP TABLE IF EXISTS `utilisateurs`;
        CREATE TABLE IF NOT EXISTS `utilisateurs` (
          `cdeUser` int(11) NOT NULL AUTO_INCREMENT,
          `emailUtilisateur` varchar(45) DEFAULT NULL,
          `motDePasse` varchar(255) DEFAULT NULL,
          `prenomUtilisateur` varchar(200) DEFAULT NULL,
          `dateCreatUser` datetime DEFAULT NULL,
          PRIMARY KEY (`cdeUser`)
        ) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=latin1;
        --
        -- Déchargement des données de la table `utilisateurs`
        --
        INSERT INTO `utilisateurs` (`cdeUser`, `emailUtilisateur`, `motDePasse`, `prenomUtilisateur`, `dateCreatUser`) VALUES
        (1, 'hajjjjjriadh@gmail.com', 'azerty', 'Riadh', '2020-11-11 00:00:00'),
        (6, 'hajjriadh@gmail.com', '$2y$10$RjqinG2Kk1EcbyTPrqOm3uzyl11zh1ZqXzLFpWJFPmBJs1C/owcW2', 'Riadh HAJJI', '2020-03-04 09:02:33');
        COMMIT;
        
    • Le Fichier HTML
      • <div class="container">
            <div class="col-lg-4">
            <h3>Inscription</h3>
            <form id="form_register" class="form-group">
                <input type="text" name="nomPrenom" placeholder="Prénom et nom" required class="form-control"/></br>
                <input type="email" name="email" placeholder="E-mail" required class="form-control"/></br>
                <input type="password" name="password" placeholder="Mot de passe" required class="form-control"/></br>
                <input type="submit" name="submit_register" value="S'inscrire" class="btn btn-primary"/>
            </form>
            </div>
        </div>
      • Dans un premier temps, nous allons créer le formulaire d’inscription pour un utilisateur. Il permettra à l’utilisateur d’ajouter ses informations dans notre base de données. Ce formulaire contiendra différents champs où l’utilisateur devra indiquer ses informations :
        • Un champ "nomPrenom" obligatoire de type "text".
        • Un champ "E-mail" obligatoire de type "email".
        • Un champ "Mot de passe" obligatoire de type "password".
        • Un champ "S’inscrire" de type "submit".
        • A noter : Il faut ajouter l’id dans la balise "form". En effet, on va en avoir besoin dans notre script AJAX.
    • Le script PHP
      • <?php
        // VERIFICATION EN LIVE DU PSEUDO
        // Etape 1 - CONNECION SQL
           include('connexion.php');
           $emailUtilisateur= $_POST['emailUtilisateur'];
             $response = $connexion->prepare("SELECT count(*)
            FROM utilisateurs
            WHERE emailUtilisateur = :emailUtil");
        $response->execute(array(
        'emailUtil' => $emailUtilisateur
        ));
        // Etape 2 - VERIFICATION
        if ($ligne = $response->fetch()) {
           //echo "ligneligne".$ligne[0];
        if ($ligne[0] == '1' || $ligne[0] > '1'){
            //echo 'Cette adresse email est déjà prise!';
        echo 'no';
        } else {
            //echo 'Cette adresse email est disponible.';
            echo 'yes';
        }
        }
        ?>

        Ce script va vérifier si le pseudo « pseudo » est libre, si oui il retourne “2”, si non la valeur retournée est alors “1”.

    • Le fichier verifier.js
      • 
        // stocke la référence à l'objet XMLHttpRequest
        var xmlHttp = createXmlHttpRequestObject(); 
        
        // Récupère l'objet XMLHttpRequest
        function createXmlHttpRequestObject() 
        {	
          //stocke la référence à l'objet XMLHttpRequest
          var xmlHttp;
         //si vous utilisez Internet Explorer 6 ou une version antérieure
          if(window.ActiveXObject)
          {
            try {
              xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e) {
              xmlHttp = false;
            }
          }
          // si vous utilisez Mozilla ou d'autres navigateurs
          else
          {
            try {
              xmlHttp = new XMLHttpRequest();
            }
            catch (e) {
              xmlHttp = false;
            }
          }
          // renvoie l'objet créé ou affiche un message d'erreur
          if (!xmlHttp)
        alert("Erreur lors de la création de l'objet XMLHttpRequest.");
          else 
            return xmlHttp;
        }
        
        // Faire une requête HTTP asynchrone en utilisant l'objet XMLHttpRequest
        function process()
        {
          // Continuer uniquement si l'objet xmlHttp n'est pas occupé
          if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
          {
            // Récupérer le nom tapé par l'utilisateur sur le formulaire
            name = encodeURIComponent(document.getElementById("myName").value);
            // exécuter la page verifier.php depuis le serveur
            xmlHttp.open("GET", "verifier.php?name=" + name, true);  
            // définir la méthode pour gérer les réponses du serveur
            xmlHttp.onreadystatechange = handleServerResponse;
            // faire la demande du serveur
            xmlHttp.send(null);
          }
          else
            //si la connexion est occupée, réessayez après une seconde  
            setTimeout('process()', 1000);
        }
        
        // fonction de rappel exécutée lorsqu'un message est reçu du serveur
        function handleServerResponse() 
        {
          // n'avancer que si la transaction est terminée
          if (xmlHttp.readyState == 4) 
          {
            // status of 200 indicates the transaction completed successfully
            if (xmlHttp.status == 200) 
            {
              // extraire le XML récupéré du serveur
              xmlResponse = xmlHttp.responseXML;
              // obtenir l'élément document (l'élément racine) de la structure XML
              xmlDocumentElement = xmlResponse.documentElement;
              // obtenir le message texte, qui est dans le premier enfant de
              // l'élément du document
              helloMessage = xmlDocumentElement.firstChild.data;
              // afficher les données reçues du serveur
              document.getElementById("divMessage").innerHTML = 
                                                    '' + helloMessage + '';
              // restart sequence
              setTimeout('process()', 1000);
            } 
            // Un statut HTTP différent de 200 signale une erreur
            else 
            {
              alert("Il y a eu un problème d'accès au serveur: " + xmlHttp.statusText);
            }
          }
        }
        
        
  4. Composants d’ajax

  5. Source:AJAX et PHP comment construire des applications web réactives Andra Hendrix, Bogdan Brinzarea



Riadh HAJJI

Abonnez vous à notre chaîne YouTube gratuitement