Concevoir une application AJAX et PHP

Objectifs

• Connaitre AJAX

É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

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>

• 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';
}
}
?>

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);
    }
  }
}

Composants d'ajax