Tutorial : connexion en AJAX avec JQuery et PHP
tags : ajax, formulaire de connexion, html, JQuery, php
Pour ce premier tutorial AJAX, je propose un simple formulaire de connexion sans rafraichissement de la page. Ca permettra également d’introduire un peu de php sur le blog.
Il est possible d’essayer une démo (login : test, mot de passe : ajax) ou de télécharger la source de cette démo (fichier php et mise en forme css inclus). Tout le code affiché ici sera du code dépouillé de tout mise en forme.
Pour commencer, on va préparer le formulaire HTML servant à la connexion. Deux champs sont nécessaires : nom d’utilsateur et mot de passe. Il ne faut pas oublier de donner un id (ici « connexionForm ») au formulaire pour la gestion des évènements avec JQuery. J’ai également ajouté un span vide qui contiendra éventuellement un message d’erreur si le login ou le mot de passe n’est pas bon.
1 2 3 4 5 6 7 8 9 10 11 | <form name="connexionForm" id="connexionForm" action="#"><!-- début du formulaire de connexion --> <span id="erreur"></span><!-- span qui contiendra les éventuels messages d'erreur --> <label for="login">Nom d'utilisateur :</label> <input type="text" name="login" id="login" /><!-- champ pour le login --> <label for="pass">Mot de passe :</label> <input type="password" name="pass" id="pass" /><!-- champ pour le mot de passe --> <input type="submit" value="Je me connecte" class="bouton" /><!-- bouton de connexion --> </form><!-- fin du formulaire --> |
On passe ensuite à la partie JQuery. On commence par charger le framework dans le fichier html (entre les balises <head> et </head>).
1 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> |
A nous de jouer maintenant. L’appel en Ajax ne se fera qu’à la soumission du formulaire (avec l’événement « submit() », ligne 2).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | $(document).ready( function () { $("#connexionForm").submit( function() { // à la soumission du formulaire $.ajax({ // fonction permettant de faire de l'ajax type: "POST", // methode de transmission des données au fichier php url: "login.php", // url du fichier php data: "login="+$("#login").val()+"&pass="+$("#pass").val(), // données à transmettre success: function(msg){ // si l'appel a bien fonctionné if(msg==1) // si la connexion en php a fonctionnée { $("div#connexion").html("<span id=\"confirmMsg\">Vous êtes maintenant connecté.</span>"); // on désactive l'affichage du formulaire et on affiche un message de bienvenue à la place } else // si la connexion en php n'a pas fonctionnée { $("span#erreur").html("<img src=\"bomb.png\" style=\"float:left;\" /> Erreur lors de la connexion, veuillez vérifier votre login et votre mot de passe."); // on affiche un message d'erreur dans le span prévu à cet effet } } }); return false; // permet de rester sur la même page à la soumission du formulaire }); }); |
Enfin, il ne reste plus qu’à créer le fichier php (login.php) permettant de tester les paramètres de connexion en testant dans la base de données des membres, si le login et le mot de passe correspondent (ce code est ultra-simplifié, il n’est pas forcément très sécurisé 
). Si la connexion est validée, on créé un cookie (que l’on pourra tester par la suite avec la fonction « isset($_COOKIE[id]) » ).
Contenu du fichier login.php :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | // connexion avec la base de données $link = mysql_connect("localhost", "root", "") or die("Impossible de se connecter : " . mysql_error()); mysql_select_db("nomDeMaBase"); // on exécute maintenant la requete sql pour tester si les parametres de connexion sont ok $result = mysql_query("SELECT login, pass, id FROM membres WHERE login = '$_POST[login]' AND pass = '$_POST[pass]'"); $membre = mysql_fetch_assoc($result); if(($_POST[login]==$membre[login])&&($_POST[pass]==$membre[pass])) { setcookie("id",$membre[id]); // genere un cookie contenant l'id du membre setcookie("login",$membre[login]); // genere un cookie contenant le login du membre echo "1"; // on 'retourne' la valeur 1 au javascript si la connexion est bonne } else { echo "0"; // on 'retourne' la valeur 0 au javascript si la connexion n'est pas bonne } |
C’est tout pour le premier tutorial AJAX/JQuery/PHP. Cela permet un premier contact avec AJAX qui peut être facilement mis en place grâce à JQuery (on économise beaucoup de lignes de codes par rapport au « JavaScript normal »…).
catégorie :
Bonjour,
tuto bien sympa mais impossible de le faire marché en local avec mon wamp, j’ai toujours comme si je n’étais pas reconnu.
Dommage….
En passant : Protctection anti-spam (petite erreur d’ortho)
Il y a une legere erreur dans le code JS.
Elle se trouve au niveau de la fonction « success ».
Le probleme, c’est que si le login et le mdp sont valides, le JS chercher a verifier que « msg==1″.
Or dans login.php, le code ne l’indique pas.
Solution: dans le JS, enlever « if (msg==1) » sachant qu’il s’agit deja d’une fonction success en jquery et rajouter la fnction error de la meme facon pour le cas ou il y a un probleme de connexion.
J’espere avoir ete clair
Bonjour, votre tuto est sympa mais je n’ai pas compris votre explication sur le « if (msg==1) ».
Merci
salut…
ta démo ne marche pas …
merde …me suis trompé de page …je voulais parler de l’autocompletion
++
J’ai télécharger la démo, mais moi sa ne marche pas il me mets que j’ai une erreur de mot de passe a chaque fois…
tensai_sendo je n’est pas compris exactement ??
Salut, j’ai trouvé d’ou venez l’erreur. C’est dans la page login.php, c’est une erreur de syntaxe. En effet voici le code d’origine :
if(($_POST[login]==$membre[login])&&($_POST[pass]==$membre[pass]))
Et le code modifier qui fonctionne
if(($_POST['login']== »test »)&&($_POST['pass']== »ajax »))
Cause les l’apostrophe qui englobe login et pass oublié.
Sinon merci pour cette excellent tuto.
pour le vérification msg==1
le code php va retourner une echo ‘1′ si les login+pwd sont correct si non 0
c’est pour cela if fait ce traitement JS
@ilyesn : ce juste ce vous dites , il y a une erreur a cet coté
En ce qui me concerne,il marche pas,j’ai pensé comme certains au faite que c’est le test if msg==1 qui posait problème car dans mon cas il rentre direct dans le else même quand les login et pass sont corrects.Je ne vois pas.
Dites moi à quoi correspond data: « login= »+$(« #login »).val()+ »&pass= »+$(« #pass »).val() ? login…..&pass doivent être les noms des champs tels qu’ils sont définis dans la base ou bien ?
…???
Merci pour ce petit tuto clair et simple qui m’a permis d’aborder l’Ajax sans trop souffrir
bonjour,
j’ai un probleme avec ton code.
car lorsque je l’exectute sous firefox et sous safarie, tous ce passe bien.
Mais si je l’execute sous ie cela ne fonctionne pas au niveau des cookies.
c’est à dire que les cookies ne sont pas enregistré.
Hello
Merci pour ce tuto, je cherchais justement à traiter un renvoi de PHP vers jQuery… il me manquait le « echo ».
Merci !
J.