********** Introduction **********
--------------- Définition ---------------
Ext est une bibliothèque Javascript permettant de construire des applications web interactives. C'était au départ une extension à la bibliothèque Javascript YUI de Yahoo, Ext peut maintenant être utilisée avec les bibliothèques Prototype, JQuery ou encore toute seule. Ext apporte un certain nombre de composants visuels d'une grande qualité comme des champs de formulaires avancés, des arbres, des tableaux, menu et barre d'outils, onglets, boites de dialogue. La version 2.0 est de sortie le 4 décembre 2007. Il s'agit d'une amélioration majeure de la bibliothèque.
Source : http://fr.wikipedia.org/wiki/Ext
--------------- Comment l’utiliser en HTML ---------------
Ensuite, deux fichiers seront impérativement appeler dans nos pages, à partir desquels, presque toutes les fonctionnalités pourront être utilisées (excepté l’Ajax avec les jquery, se trouvant dans un dossier annexe du Sdk, ou la bibliothèque scryptaculous permettant du design …)
Voici donc les lignes à rajouter
<script type="text/javascript" src="javascript/ext-base.js"></script>
<script type="text/javascript" src="javascript/ext-all.js"></script>
Ensuite, un design complet est fournit d’office dans le kit, il est donc préférable de copier le contenu des ressources d’ext jS ainsi que le CSS ext-all.css
<link type="text/css" rel="stylesheet" href="CSS/css/ext-all.css" />
<link type="text/css" rel="stylesheet" href="CSS/css/xtheme-gray.css" />
Ce second CSS concerne le design des popups du site
Ensuite, pour créer les fonctions désirées, référez vous au site http://extjs.com/deploy/dev/examples/samples.html
Qui fournit de nombreux exemples de l’utilisation d’extJS.
--------------- Comment interagir avec une base de données ---------------
Voici le point clé de ce tutoriel, en effet, très peu de documents sur internet relatent cette partie pourtant capitale dans l’utilisation d’extJS.
Dans notre exemple, nous allons créer une fenêtre de login, puis tester si l’utilisateur est enregistré dans la base de données. (voir chapitre 3)
Voici un lien pour télécharger directement les sources de ce tuto : http://cv.pierrehoffmann.free.fr/mini%20tuto%20extJS.rar
********** Procédure **********
--------------- 1ère étape : créer le fichier javascript login.js ---------------
Tout d’abord, créons notre formulaire à l’aide d’extJS
//Login, il s'agit d'un panel contenant le formulaire avec les champs login, password...
var login = new Ext.FormPanel({
id: 'login', //id de la fenêtre
frame: true, //pour que tous les items soient dans la même frame
autoWidth: true, //largeur de la fenêtre
autoHeight: true, //hauteur de la fenêtre
labelWidth: 110, //largeur des labels des champs
defaults: {width: 230}, //largeur des champs
labelAlign: 'right', //les labels s'aligneront a droite
bodyCfg: {tag:'center', cls:'x-panel-body'}, //on aligne tous les champs au milieu de la fenêtre
bodyStyle: 'padding:5p;margin:0px; ',
items: [{ //Ici, on affiche à la suite tous les champs que l'on veut mettre
xtype: 'textfield', // = champ de texte
fieldLabel: 'Adresse Email', // = label de description du champ
id: 'email',
name: 'email',
vtype: 'email', //Vérification type : met un masque d'adresse email sur ce champ
vtypeText: 'Votre adresse email doit être de la forme de "user@domain.com"',
//message si email non valide
allowBlank: false, //champ obligatoire pour poster le formulaire
blankText:"Veuillez saisir votre adresse email." //message si le champ n'est pas rempli
},{
xtype: 'textfield',
fieldLabel: 'Mot de passe',
id: 'pass',
name: 'pass',
allowBlank: false,
inputType: 'password',
blankText:"Veuillez saisir votre mot de passe."
},{
xtype:'checkbox',
boxLabel : ' ',
fieldLabel: 'Se souvenir de moi',
checked: true,
style: 'left:-104px;position:relative;',
name: 'save'
},{
xtype: 'button',
text: 'Se connecter',
handler: fct_submit //fonction à appeler lorsque l’on clique sur le bouton
},{
xtype: 'hidden', //Balise cachée afin de dire qu'il s'agit d'une connexion
id: 'connexion',
name: 'connexion'
},{
html: '<a class="lien" href="recup.php">Mot de passe oublié?</a>',
//dans les balises html: on peut mettre n'importe quel code html
bodyStyle:
{
paddingTop: '20px'
}
},{
html: '<a class="lien" href="inscrip.php">Créer un nouveau compte</a>'
}]
});
Voila notre formulaire créé. Afin de rendre le design plus attrayant, nous allons ajouter un nouveau panel contenant une status bar. Il s’agit d’une petite ligne en bas à gauche de la fenêtre affichant l’état de la connexion : « formulaire valide, connexion réussie, mot de passe incorrect … »
//Ce panel contiendra le panel précédent qui est le formulaire, sauf qu'en bas de celui ci figure la status bar, permettant d'afficher le status de la connexion (chargement ....)
var login_total = new Ext.Panel({
autoWidth: true, //largeur de la fenêtre
autoHeight: true, //hauteur de la fenêtre
layout: 'fit',
items: login, //On met dans ce panel le panel de login
bbar: new Ext.StatusBar({
id: 'form-statusbar',
defaultText: 'Prêt',
plugins: new Ext.ux.ValidationStatus({form:'login'})
})
});
Enfin, créons la fonction qui va instancier la fenêtre contenant ce panel
var win_login;
if(!win_login){ //Si la fenêtre de connexion n'existe pas, on la crée
win_login = new Ext.Window({
title: 'Authentification', //titre de la fenêtre
el:'popup_log_window',
//********* el = id du div dans le code html de la page qui contiendra la popup ! ************//
layout:'fit',
width:400,
autoHeight: true, //hauteur de la fenêtre
modal: true, //Grise automatiquement le fond de la page
closeAction:'hide',
plain: true,
items: login_total //On met dans cette fenêtre le panel précédent
});
}
function show_win_login(){
win_login.show();
}
Voila le résultat
Dernière chose à ajouter à ce fichier JavaScript : le code de la fonction à traiter lorsque l’on clique sur le bouton « Se connecter » :
Ext.QuickTips.init(); //nécessaire pour initialiser les infobulles d’erreur
Ext.form.Field.prototype.msgTarget = 'side'; //nécessaire pour initialiser les infobulles d’erreur
function fct_inscription(btn){
//Fonction pour rediriger l’utilisateur sur la même page où il se trouve.
location.replace = location.href ;
}
//Fonction appelée en cliquant sur submit du formulaire
function fct_submit() {
var sb = Ext.getCmp('form-statusbar'); //on instancie la statusbar en bas a gauche de la fenêtre
sb.showBusy('connexion ...'); //on y affiche un message de chargement
login.getEl().mask(); //on applique un masque gris sur la fenêtre nommée login
if (login.form.isValid()) { //si le formulaire dans login est valide
login.form.submit({ //similaire à la méthode post
url: 'log_post.php', //URL de la page sur laquelle on effectue la méthode post
method: 'POST',
reset: false, //pour ne pas reseter les formulaires en cas d'échec
//Si une erreur est survenue lors du POST
failure: function(result, action) {
//L'objet JSON vas rechercher dans lire le résultat du POST et le décoder
obj = Ext.util.JSON.decode(action.response.responseText);
//S'il s'agit d'une phrase générale on l'affiche(errors = type d'action ; reason : nom de l'action, on peut nommer cela comme on veut dans le formulaire post)
var message = obj.errors.reason;
//si le message n'inclue pas un ID précis d'un champ de notre formulaire, on affiche simplement un message d'erreur général dans notre status bar, et non a droite du champ concerné
if (message == undefined) message = obj.errors[0].msg;
sb.setStatus({ //On modifie le texte de notre status bar
text:'Erreur : '+ message,
iconCls:'',
clear: true
});
}, //fin de la fonction failure
//S'il n'y a pas eu d'erreur dans notre POST...
success: function(result, action) {
//Message de bienvenue
obj = Ext.util.JSON.decode(action.response.responseText);
var message = obj.msg.reason; //on recherche le message à afficher
sb.setStatus({
text:'Authentification réussie : '+ message,
iconCls:'',
clear: true
});
//msgbox affichant le message de connexion, puis redirige l'utilisateur s'il clique sur ok
Ext.MessageBox.alert('Bienvenue', message, fct_inscription);
} //fin de la fonction success
}); //fin du submit
} else { //Si le formulaire n'est pas valide, on change la phrase dans notre status bar
sb.setStatus({
text:'Erreur : Formulaire non valide.',
iconCls:'',
clear: true
});
}
login.getEl().unmask();
}
--------------- 2ème étape : implémenter le code HTML ---------------
Tout d’abord, il faut déclarer les fichiers javascript dans le head de la page.
<link type="text/css" rel="stylesheet" href="CSS/css/ext-all.css" />
<link type="text/css" rel="stylesheet" href="CSS/css/xtheme-gray.css" />
<script type="text/javascript" src="javascript/ext-base.js"></script>
<script type="text/javascript" src="javascript/ext-all.js"></script>
<script type="text/javascript" src="javascript/validationStatus.js"></script>
<script type="text/javascript" src="javascript/log.js"> </script>
Remarque : le fichier validationstatus.js est requis pour la statusbar.
Ensuite, il faut définir la balise sur laquelle la popup doit s’ouvrir au click :
<a href="javascript:show_win_login();">Lancer la popup</a>
(On Remarque qu’il suffit d’écrire l’id de la balise pour que l’événement onReady d’estJS le prenne en compte.)
Enfin, il faut préparer un div qui contiendra la popup de login, mais qui reste caché tant qu’on ne l’a pas activé:
<div id="popup_log" class="x-hidden">
<div id="popup_log_window"></div>
</div>
Remarque : Il faut que le div « popup_log_window » soit déclaré dans la balise « el » de la fenêtre win d’extJS.
Erreur lors de l’authentification : mauvais mot de passe
--------------- 3ème étape : Le code PHP ---------------
Ce fichier doit être un fichier PHP vide, ne contenant que les tests de POST que nous allons effectuer grâce à extJS.
Dans notre exemple se fichier se nomme log_post.php et est appelé dans la balise URL de la fonction POST.
<?php
///////Fichier servant à traiter le formulaire de login créé par extJS dans javascript/log_non_connecte.js et javascript/log_connecte.js ///////
session_start() //On initialise les sessions
if(isset($_POST['connexion'])) //S'il s'agit du POST du formulaire de connexion
{
$email = htmlentities($_POST['email'], ENT_QUOTES);
$pass = htmlentities($_POST['pass'], ENT_QUOTES);
$filename = $adrr."includes/my_sql.php"; //Classe de connexion à la bdd --> plus sécurisé, pratique et simple
if (file_exists($filename)) include($filename);
$maclasse = new my_sql();
$maclasse->query("SELECT * FROM membres WHERE login='".$email."'");
$maclasse->fetch_array();
if($maclasse->num_rows() == 0) //login non trouvé
{
//message d'erreur général : on met la raison de l'erreur sans préciser quel type de champ est a l'origine du problème
die("{success: false, errors: { reason: 'Authentification échouée. Veuillez réessayer.' }}");
}
else
{
if ($pass <> $maclasse->row['pass']) //pass incorrecte
{
//message d'erreur particulier car on sait quel champ est à l'origine du problème, et on note donc l'id
die("{success: false, errors: [{id:'pass', msg:'Votre mot de passe est incorrect'}]}");
}
elseif($maclasse->row['val']==0) //compte non activé
{
die("{success: false, errors: { reason: \"Vous devez valider votre compte avant de pouvoir l'utiliser.\" }}");
}
else
{
//On enregistre les info de l'utilisateur dans des cookies car elles ne peuvent pas être enregistrée en tant que variable de session pour le moment
$_SESSION['id'] = $maclasse->row['id'];
$_SESSION['nom'] = $maclasse->row['nom'];
$_SESSION['prenom'] = $maclasse->row['prenom'];
if (isset($_POST['save'])) //si l'utilisateur veut conserver les cookies
{
setcookie("id", $maclasse->row['id'], time()+365*60*3600);
setcookie("prenom", $maclasse->row['prenom'], time()+365*60*3600);
setcookie("nom", $maclasse->row['nom'], time()+365*60*3600);
}
//On concatène le prénom et le nom de l'utilisateur pour le message d'accueil
$msg = "Bienvenue ".$_SESSION['prenom']." ".$_SESSION['nom'].".";
die("{success: true, msg:{reason:'".$msg."'}}");
}
}
}
?>
Remarque : Dans cet exemple, j’ai utilisé une classe de connexion spécifique à la base de données, mais tout fonctionnerait avec des connexions normales.
Voila les vérifications de connexions effectuées, si la connexion est réussie, on écrit en dur sur la page le message d’authentification réussie, qui sera lu par extJS.
********** Annexe **********
Voici quelques informations supplémentaires utiles dans les formulaires d’extJS
xtype : différents types de champs : checkbox, combo, datefield, field, fieldset, form,hidden, htmleditor, numberfield, radio, textarea, textfield, timefield, trigger.
allowBlank : true / false
minLength : nombre
maxLength : nombre
vtype: différentes vérification : 'alpha','alphanum','email','url'
Tutoriel écrit par Pierre Hoffmann
phoffmann@exia-cesi.com
http://cv.pierrehoffmann.free.fr
Le 05 juillet 2008