Tutorial : connexion en AJAX avec JQuery et 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.

connexion en ajax avec JQuery et PHP

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 &ecirc;tes maintenant connect&eacute;.</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;\" />&nbsp;Erreur lors de la connexion, veuillez v&eacute;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 »…).

Ce contenu a été publié dans JQuery, PHP, avec comme mot(s)-clé(s) , , , , . Vous pouvez le mettre en favoris avec ce permalien.

39 reponses a Tutorial : connexion en AJAX avec JQuery et PHP

  1. sloomy dit :

    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)

  2. tensai_sendo dit :

    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 🙂

  3. agno dit :

    Bonjour, votre tuto est sympa mais je n’ai pas compris votre explication sur le « if (msg==1) ».
    Merci

  4. nas dit :

    salut…
    ta démo ne marche pas …

  5. nas dit :

    merde …me suis trompé de page …je voulais parler de l’autocompletion 😉
    ++

  6. shadow578 dit :

    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 ??

  7. ilyesn dit :

    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.

  8. fedora dit :

    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é

  9. Dieyna dit :

    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 ?
    …???

  10. Philippe dit :

    Merci pour ce petit tuto clair et simple qui m’a permis d’aborder l’Ajax sans trop souffrir 🙂

  11. jeremy dit :

    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é.

  12. Hello
    Merci pour ce tuto, je cherchais justement à traiter un renvoi de PHP vers jQuery… il me manquait le « echo ».

    Merci !
    J.

  13. monkada dit :

    Merci.
    Un tuto incontournable pour débuter, toutefois la remarque de jeremy avec IE reste toujours d’actualité.

  14. Bi0hazard dit :

    Il y a tout de même plus simple pour l’envoi du formulaire en ajax. Enfin, je sais pas si à l’époque de l’écriture du tuto, cette méthode existait. ^^’

    On peut sérialiser les données du formulaire, sans avoir à sélectionner tous les champs un par un…
    Suffit de faire :
    /* Pour avoir une chaine formatée des champs de notre formulaire : */
    var params = $.(« #monFormulaire »).serialize();

    /* Requête ajax en POST : */
    $.post(‘chemin/vers/la/page.php’, params, function(data) {
    /* On met ici notre traitement, qui est exécuté lorsque le serveur nous renvoie les données, data étant le résultat de la requête ajax */
    });

    Voilà, en espérant que ce sera utile !

  15. Ping : Tutorial : connexion en AJAX avec JQuery et PHP | Creation site Intenet et logiciel, web agency Lyon – Blog AVANIM

  16. Très bonne remarque Bi0hazard, c’est beaucoup plus simple en serialisant.

  17. Mahdi dit :

    Il y a une faille de sécurité, passage du mot de passe en clair !!!

  18. Yohann dit :

    Petit détail :
    $(« div#connexion »).html(« Vous êtes maintenant connecté. »);

    Il manque une balise div avec un id=connexion qui englobe tout le formulaire HTML présent pour afficher le message de confirmation.
    Mis a part ce détail excelent tuto !

  19. Mohammed dit :

    Excelent tuto !

    Mais une fois connecté et en rafraîchissement la page on aura des surprises.

    je crois qu’il manquait un truc de session non ?

  20. Ajhonson dit :

    C’est la meilleur façons de le faire ? ou travailler avec Json ?

  21. Julien dit :

    Effectivement il y a plusieurs problème avec le code ! voici une correction qui fonctionne :
    Page login.php:
    #

    J’ai mis des « # » devant chaque ligne pour éviter une interprétation du code par le serveur.
    Amusez vous bien maintenant …

  22. Cat121 dit :

    C’est effectivement une bonne base, associée aux explications de Bi0hazard ça fait un code très simple à comprendre et il ne reste plus qu’à adapter à l’utilisation 🙂

  23. Molive dit :

    Bonjour, il y a une léger erreur:
    il faut mettre if(msg== »1″) et non if(msg==1) pour que cela marche.

    Pour ceux qui s’interrogent, « msg » est la valeur retournée par echo (1 ou 0) dans login.php

  24. démo ne marche pas …

  25. Adepile dit :

    L’utilisation avec une base de données: table membres (id, login, pass):
    if(($_POST[login]==$membre[login])&&($_POST[pass]==$membre[pass]))
    //if(($_POST[‘login’]== »test »)&&($_POST[‘pass’]== »ajax »))
    {
    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
    }

  26. Adepile dit :

    Ne fonctionne pas

  27. Jean dit :

    Bonjour, l’erreur se trouve dans la page login.php, c’est une erreur lors du test des Post.
    D’abord, créez et configurez votre base avec la table « membres ». Ensuite, modifier la ligne de code suivante
    if(($_POST[‘login’]== »test »)&&($_POST[‘pass’]== »ajax »))
    par
    if(($_POST[login]==$membre[‘login’])&&($_POST[pass]==$membre[‘pass’]))
    et vous verrez que tout entre dans l’ordre.

    Bon tuto

  28. akf dit :

    Bonjour
    j’utilise $.post() pour ma connexion serveur,
    mon probleme est qu’avec une url http, ca fonctionne,
    mais si je veux utiliser une url securisée en https ca ne marche pas.
    une idée??

  29. phetsamone dit :

    Hi all,

    c’est cool ce programme, Est-ce que quelqu’un peux me conseillé quand je voudrais faire la déconnections s’il vous plait

  30. Anonymous dit :

    Hello all Ajax Developer !
    Venez récupérer un fichier source qui marche bien ici:
    http://blog.webwizo.com/wp-content/uploads/2011/05/login_jquery_ajax.zip
    Ne perdez pas votre temps à commenter ce site.
    Les erreurs sont crées volontairement afin de vous faire participer au MAX des commentaires et l’auteur de ce site pourra ainsi récupérer pleins de vos emails pour son propre business.
    Arrêtez de surfer pour des cons!

  31. Anonymous2 dit :

    tu parles anonymous mais ton code n’utilise pas php mysql il utilise des login et pass en dur donc… c pas sa encore une fois

  32. AlexnadreR dit :

    Bonjour,

    Tuto intéressant, il y à cependant quelques petits problèmes précédemment évoqués…

    Il faudrait également penser à remplacer l’extension mysql_connect par PDO ou Mysqli.

    😀

  33. farhat dit :

    comment je peux passer un variable comme ça mais on clic a lien de balise et non formulaire + bouton submit???

  34. Laurent dit :

    en français ça donne quoi ? Parce que c’est incompréhensible ce que tu demandes.

  35. walid dit :

    bonjour
    merci pour le tuto
    il y’a une erreur dans le fichier login.php
    voici le code
    si on utilise le test:
    if(($_POST[‘login’]== »test »)&&($_POST[‘pass’]== »ajax »))
    ————————————————————————

  36. walid dit :

    if(($_POST[‘login’]== »test »)&&($_POST[‘pass’]== »ajax »)){
    setcookie(« id », »test »);
    setcookie(« login », »ajax »);
    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}?>

  37. Ping : Time

  38. hp.perret@gmail.com dit :

    Bonjour,

    Sympa l’exemple, mais dommage que cela soit buggé

    Il manque les cotes dans le fichier login.php sur les deux variables $_POST, login et pass.

    if(($_POST[login]==$membre[login])&&($_POST[pass]==$membre[pass]))

    $_POST[‘login’] à la place de $_POST[login], La même pour le mot de passe

    Si on ne met pas les cotes, php cherche un constante.

    Avec cette petite modif, le script fonctionne à adapter selon les besoins de chacun.

    Patrice – Kojité informatique

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *