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 »…).
Pas encore de billet sur le même sujet !
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.
Merci.
Un tuto incontournable pour débuter, toutefois la remarque de jeremy avec IE reste toujours d’actualité.
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 !
Ping : Tutorial : connexion en AJAX avec JQuery et PHP | Creation site Intenet et logiciel, web agency Lyon – Blog AVANIM
Très bonne remarque Bi0hazard, c’est beaucoup plus simple en serialisant.
Il y a une faille de sécurité, passage du mot de passe en clair !!!
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 !
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 ?
C’est la meilleur façons de le faire ? ou travailler avec Json ?
s71kyg http://fnYwlOpd2n9t4Vx6A3lbk.com
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 …
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
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
démo ne marche pas …
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
}
Ne fonctionne pas
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