Utiliser jQuery AJAX avec php MySQL
Utiliser jQuery AJAX avec php MySQL
-
Objectifs
- Etre capable de créer et soumettre un formulaire ajax simple en PHP
- Etre capable de soumettre des données de formulaire dans la base de données MySQL
-
Présentation
- Ce tutoriel vous aide étape par étape pour créer ou soumettre un formulaire ajax en PHP avec MySQL.
- Nous allons explorer l’exemple jQuery AJAX avec php MySQL et comment envoyer une requête get AJAX en utilisant jQuery pour récupérer les données du serveur de base de données MySQL.
-
$.ajax() et ses paramètres
- Syntaxe ajax JQUERY:
- Lorsque l’on envoie une requête HTTP, on demande quelque chose au serveur. Dans ce cas de figure, il s’agit simplement du script côté serveur qui va aller chercher les commentaires dans la base de données et nous les retourner.
- Pour spécifier quelle est la ressource ciblée, il faut utiliser le paramètre url de $.ajax() :
- Le fichier PHP exécuté côté serveur s’appelle ressource.php. C’est un lien relatif, le fichier PHP se trouve donc dans le même répertoire que le fichier JavaScript, et le fichier HTML auquel il est lié.
- Ce code fonctionne, mais il ne fait rien sans ce qui suit.
- Pour envoyer des informations au serveur, il faut envoyer une requête de type GET :
- On peut faire passer des paramètres avec GET pour les utiliser côté serveur dans l’array $_GET.
- Pour cela, il faut utiliser le paramètre data :
- Pour cela, il faut utiliser le paramètre data :
- Spécifier maintenant le type de données à recevoir de PHP
-
Application
-
Énoncé
- On souhaite créer une application web utilisant la technologie Ajax, Jquery et PHP qui permet d’inscrire un utilisateur dans la base de données sans rechargement de page.
- L’inscription se réalise à travers un formulaire d’inscription comme le montre le schéma de la figure ci-contre.
- L’utilisateur doit respecter les contraintes suivantes :
- Remplir tous les champs (Un texte sera affiché en bas du formulaire indiquant si l’utilisateur à bien saisie tous les champs), le texte à afficher peut être "Veuillez remplir tous les champs avant d’envoyer le formulaire".
- Le nom et le Prénom doivent être séparés au moins par un espace, est composé de deux mots au moins.
- Le pesudo choisi ne doit pas être pris par un autre utilisateur et doit commencer par une lettre.
- L’adresse mail de l’utilisateur ne doit pas être pris par un autre utilisateur, ne sera pas contrôlée qu’au niveau HTML5 ( pour simplifier notre cas)
- Doit fournir un mot de passe fort qui répond aux critères suivants :
- Il doit comporter au moins huit caractères et au maximum douze caractères.
- Il ne doit pas contenir le nom d’utilisateur ou son prénom
- Il doit associer des lettres minuscules et majuscules, des chiffres et des caractères spéciaux
- L’utilisateur doit retaper son mot de passe pour pouvoir achever son inscription
- Le formulaire doit être crée avec bootstrap4, avec l’utilisation des classes
is-valid
etis-invalid
- Pour répondre à ces questions, vous aurez besoin des éditeurs PHP ,HTML, AJAX (Jquery) et d’une base de données MYSQ.
- Votre formulaire doit ressemble au schéma de la figure suivante :
- Utilisez l’événement
submit
de l’élément de formulaire, qui sera déclenché lorsqu’un utilisateur cliquera sur le bouton d’envoi, qui ne sera pas actif qu’une fois tous les champs sont valides. - Dans ce gestionnaire d’événements, lancez l’appel AJAX, qui soumet les données du formulaire au fichier "validationPHP.php" à l’aide de la méthode POST de manière synchrone (pour cet appel seulement).
- Et enfin, en fonction du succès ou de l’échec, vous devez un message de succès ou d’échec pour avertir l’utilisateur.
- Votre formulaire final doit ressemble au schéma de la figure suivante :
-
Solution
-
Création de la table utilisateurs
- Avant de créer la table utilisateurs nous devons créer la base de donnée en utilisant PhpMyAdmin
- Le nom de notre base de données sera : "gestiondesapprenants"
- Créer la table utilisateurs comme le montre le schémas suivant:
- Notre table ce compose de neuf champs :
- Un champ "cdeUser" de type " int" auto-incrémenté (en cochant la checkbox). Il sera unique pour chaque utilisateurs dans notre table.L’utilisateur ne connais pas ce numéro il est crée pour la gestion du table
- Un champ "prenomUtilisateur" de type "varchar" ayant une taille maximum de 200. La colonne contiendra le nom et le prénom de nos utilisateurs.
- Un champ "pseudo" de type "varchar" ayant une taille maximum de 25. La colonne contiendra le pseudo de nos utilisateurs.
- Un champ "emailUtilisateur" de type "varchar" ayant une taille maximum de 45. La colonne contiendra l’e-mail de nos utilisateurs.
- Un champ "motDePasse" de type "varchar" ayant une taille maximum de 255. Cette colonne contiendra le mot de passe de notre utilisateur qu’il aura choisi lors de son inscription, bien sur ne sera pas clair elle sera crypté, c’est pourqu’oi on a prévu une taille de 255.
- Un champ "dateCreatUser" de type "datetime" qui aura comme valeur par défaut "CURRENT_TIMESTAMP", qui correspond à la date actuelle. Cette valeur sera ajoutée directement lorsque notre utilisateur sera ajouté, lors de son inscription.
- Les trois champs qui reste ne seront pas traités dans cet exemple.
-
Le fichier HTML
- 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 "Nom prénom" obligatoire de type "text".
- Un champ "pseudo" obligatoire de type "email".
- Un champ "email" obligatoire de type "password".
- Un champ "Mot de passe" obligatoire de type "email".
- Un champ "Réécrire le mot de passe " obligatoire de type "email".
- Un bouton "S’inscrire" de type "submit".
- Pour le code HTML visitez la page suivante: Correction
-
Le fichier connexion.php
- Nous devons se connecter à la base de données avec un script PHP
-
Le fichier validationAJAX.js
- Le champs nom et prénom doit avoir au moins un espace et deux mots
- Pour calculer le nombre de mot que contient notre champ de type text, nous calculerons simplement le nombre d’espace entre chaque groupe de caractère. Pour éviter toute erreur, nous supprimerons les espaces du début et de fin pour ne pas les prendre en compte grâce à la fonction trim() :
- Pour contrôler le mot de passe, nous utilisons la fonction:
match
, qui permet d’obtenir un tableau des correspondances entre la chaîne courante et une expression rationnelle. - Pour le code JS visitez la page suivante: Correction
-
Le fichier validationPHP.php
- Pour le code PHP visitez la page suivante: Correction
<script>
$.ajax(<param>);
</script>
$("#identifiant").click(function(){
$.ajax({
url : 'ressource.php' // La ressource ciblée
});
});
$("#identifiant").click(function(){
$.ajax({
url : 'ressource.php' // La ressource ciblée
type : 'GET' // Le type de la requête HTTP, le type GET est le type que jQuery prend par défaut.
});
});
$("#identifiant").click(function(){
$.ajax({
url : 'ressource.php' // La ressource ciblée
type : 'GET' // Le type de la requête HTTP, le type GET est le type que jQuery prend par défaut.
data : 'variable=' + nom_variable;
});
});
$("#identifiant").click(function(){
$.ajax({
url : 'ressource.php' // La ressource ciblée
type : 'GET' // Le type de la requête HTTP, le type GET est le type que jQuery prend par défaut.Il peut
// être POST ou ....
data : 'variable=' + nom_variable;
dataType : 'html' // Le type de données à recevoir, On peut recevoir tout et n'importe quoi : du XML, du HTML, du texte, du JSON... (on
// utilisera ici du HTML)
});
});
var nombreMots = jQuery.trim($(this).val()).split(' ').length;
if($(this).val() === '') {
nombreMots = 0;
}