JQuery, PHP, html, design... // arnaud-k : un blog de geek » formulaire de connexion http://blog.arnaud-k.fr Le blog JQuery, Html, Web Design Thu, 21 Apr 2011 08:10:17 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Tutorial : connexion en AJAX avec JQuery et PHP http://blog.arnaud-k.fr/2009/04/22/tutorial-connexion-en-ajax-avec-jquery-et-php/ http://blog.arnaud-k.fr/2009/04/22/tutorial-connexion-en-ajax-avec-jquery-et-php/#comments Wed, 22 Apr 2009 12:12:54 +0000 arnaud http://blog.arnaud-k.fr/?p=310

Lire la suite >>

]]>

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 »…).

Pas encore de billet sur le même sujet !

]]> http://blog.arnaud-k.fr/2009/04/22/tutorial-connexion-en-ajax-avec-jquery-et-php/feed/ 27