- rFactor
- rFactor Session Manager
- Classements des joueurs de la GameZone
- Colin Mac Rae 4 : Circuits - Voitures - Pilotes
- F1 Challenge : Circuits - Voitures - Pilotes
- Mario Kart Cube : Circuits - Voitures - Pilotes
- rFactor : Circuits - Voitures - Pilotes
- Richard Burns Rally : Circuits - Voitures - Pilotes
- Trackmania : Circuits - Voitures - Pilotes
- TrackMania Forever : Circuits - Voitures - Pilotes
- Trackmania Sunrise : Circuits - Voitures - Pilotes
- Historique des chronos
- Derniers chronos enregistrés
- Circuits rFactor les plus populaires
Détail du billet
- 1
15 JUIN 10 22:51 | Rubriques : Informatique | Billet public
Avec l'avènement du Web 2.0 et de ses fonctionnalités, l'ergonomie de nos sites web a radiqualement changé.
Nous allons étudier ici en détail la mise en place d'un formulaire de login en Ajax, basé sur la bibliothèque JQuery. Le formulaire de login de mon site fonctionne comme cela.
L'architecture
Le dispositif a besoin de 3 "briques" fonctionnelles :
- Le formulaire (HTML + CSS)
- Echange (bidirectionnel) de données entre le client et serveur (Javascript + JSON)
- Vérification du couple login/mot de passe (PHP + MySQL)
Pour simplifier, dans notre exemple, nous n'utiliserons pas de base MySQL mais nous vérifierons "en dur" les infos fournies par l'utilisateur.
Le formulaire (HTML + CSS)
On ne peut pas faire plus simple. Formulaire avec 2 champs et un bouton :
<div class="login">
<div id="msg_login"></div>
<form method="post" action="" id="formLogin">
<fieldset>
<label>Login</label><input type="text" name="login" size="20" class="input" id="login" /><br />
<label>Password</label><input type="password" name="password" size="20" class="input" id="password" /><br />
<input type="button" name="go" value="Envoyer" class="bouton" onclick="checkLogin()" />
</fieldset>
</form>
</div>
On se s'occupera pas du CSS associé car cela n'a pas d'utilité dans notre exemple
L'échange de données (Javascript + JSON)
L'envoi des infos saisies par l'utilisateur se fait par une fonction Javascript appelée lors du click sur le bouton "Envoyer". Cette fonction s'appuie sur la bibliothèque JQuery (http://jquery.com/). La fonction effectue un POST vers le script de vérification sur le serveur.
function checkLogin() {
1 $("#msg_login").html('<img src="/images/loading.gif" alt="" />');
2 login = $("#login").val();
3 password = $("#password").val();
4 $.ajax({
5 url:'/connexion.php',
6 type:'post',
7 cache:false,
8 dataType:'json',
9 data:{login:login, password:password},
10 success:function(data){
11 if(data.grant == "1") {
12 location.reload();
13 } else {
14 $("#msg_login").html('Erreur de connexion !');
15 $("#password").val('');
16 }
17 }
18 });
19}
Le fonctionnement de la fonction est relativement simple (quand on connait un minimum Jquery !).
Ligne 1 : on affiche un joli icône animé de chargement dans un DIV prévu à cet effet (id="msg_login").
Ligne 2 et 3 : on récupère dans des variables les valeurs des champs login et password
ligne 4 : appel AJAX
ligne 5 : script appelé
ligne 6 : méthode utilisée
ligne 7 : pas de cache sur le client
ligne 8 : la réponse attendue du serveur est de type JSON
ligne 9 : valeurs du POST
ligne 10 : définition de la fonction déclenchée en cas de succès du POST
Le serveur répond {"grant": "1"} ou {"grant": "0"} si l'authentification a réussi ou échoué.
ligne 11 : si grant vaut "1", on recharge la page courante (les variables de session authentifiées ont été déclarées côté serveur)
Ligne 14 : si grant vaut "0", on écrit "Erreur de connexion !" dans le DIV (id="msg_login").
Ligne 15 : on vide le champ password
Vérification du couple login/mot de passe (PHP + MySQL)
Voici le contenu du script (/connexion.php) appelé par la fonction Javascript
2 session_start();
3 $login = $_POST['login'];
4 $password = $_POST['password'];
5 // Normalement, vérification dans la base de données
6 // Dans notre exemple, on teste "en dur"
7 if ($login='ckerhousse' && $password='monpassword') {
8 $_SESSION['id'] = 3;
9 $_SESSION['nom'] = 'Kerhousse';
10 print '{"grant":"1"}';
11 } else {
12 print '{"grant":"0"}';
13 }
14 ?>
Le script est simplifié à l'extrême (donc inutilisable tel quel !). L'idée est que si les infos fournies par l'utilisateur sont correctes, on déclare les variables de session qui font que l'on affiche la version adéquate du site (non décrit dans notre exemple) et l'on renvoie en réponse {"grant":"1"}.
Dans le cas contraire on renvoie {"grant":"0"}
La fonction Javascript "checkLogin" fera le reste côté client (voir paragraphe au dessus) !
- 1
URL Trackback : http://christophe.kerhousse.free.fr/blog/index.php?action=afficherbillet&idbillet=108
0 commentaire(s) | Ajouter un commentaire