docTDM13 - Plateforme e-learning Moodle de l`INSA de Rouen
download 
Plainte Transcription
TDM13 - Plateforme e-learning Moodle de l`INSA de Rouen
TDM13 de Technologie Web: AJAX
ASI4 - INSA Rouen
correction
1
AJAX et PHP
1. Créez un formulaire qui affiche un ensemble de villes correspondant à un code postal (par exemple 76240)
à l’aide d’une requête AJAX, avec jQuery. Pour cela, vous utiliserez la base SQLITE cp.sqlite fournie,
qui a été créée avec la commande suivante : CREATE TABLE IF NOT EXISTS cp (cp TEXT KEY,
ville TEXT NOT NULL). Le script PHP (recherche.php) devant être appelé est également fourni.
Correction
index.html
<html>
<head>
<meta h t t p −e q u i v=" Content −Type " content=" t e x t / h t m l ; c h a r s e t=UTF−8" />
<s c r i p t s r c=" // a j a x . g o o g l e a p i s . com/ a j a x / l i b s / j q u e r y / 1 . 8 . 2 / j q u e r y . min . j s "></ s c r i p t>
<s c r i p t>
$( function () {
$ ( ’# c h e r c h e ’ ) . c l i c k ( f u n c t i o n ( ) {
$ ( ’# v i l l e s ’ ) . l o a d ( ’ r e c h e r c h e . php ’ , " cp="+$ ( ’# cp ’ ) . v a l ( ) ) ;
return f a l s e ;
}) ;
}) ;
</ s c r i p t>
</head>
<body>
<h1>R e c h e r c h e</h1>
<form>
Code p o s t a l : <input id=" cp " type=" t e x t " /><br/>
<button id=" c h e r c h e " >C h e r c h e v i l l e </ button><br/>
<h1> L i s t e d e s v i l l e s </h1>
<div id=" v i l l e s "></ div>
</form>
</body>
</html>
2. Créez un second formulaire (ainsi qu’un script PHP appelé par ce formulaire) pour que la liste des villes
apparaisse au fur et à mesure de la saisie du code postal. Si aucune ville n’existe, il faudra en informer
l’utilisateur. L’affichage se fera préférentiellement dans un champ <select>.
Correction
index2.html
<html>
<head>
<meta h t t p −e q u i v=" Content −Type " content=" t e x t / h t m l ; c h a r s e t=UTF−8" />
<s c r i p t s r c=" // a j a x . g o o g l e a p i s . com/ a j a x / l i b s / j q u e r y / 1 . 8 . 2 / j q u e r y . min . j s "></ s c r i p t>
<s c r i p t>
$( function () {
$ ( ’# cp ’ ) . k e y u p ( f u n c t i o n ( ) {
$ ( ’# v i l l e s ’ ) . l o a d ( ’ r e c h e r c h e 2 . php ’ , " cp="+$ ( ’# cp ’ ) . v a l ( ) ) ;
}) ;
}) ;
</ s c r i p t>
</head>
<body>
<h1>R e c h e r c h e</h1>
<form>
Code p o s t a l : <input id=" cp " type=" t e x t " /><br/>
V i l l e s :<br/>
<s e l e c t
s i z e=" 10 " id=" v i l l e s ">
<option value=" 00000 ">E n t r e z v o t r e CP</ option>
</ s e l e c t>
</form>
</body>
</html>
recherche2.php
<? php
h e a d e r ( ’ Content−Type : text /html ; charset=u t f −8 ’) ;
e r r o r _ r e p o r t i n g (E_ALL) ;
try
{
/∗ o u v e r t u r e de l a base ∗/
$db = new PDO( " s q l i t e : cp . s q l i t e " ) ;
/∗ e r r o r s −> e x c e p t i o n s ∗/
$db−> s e t A t t r i b u t e (PDO : : ATTR_ERRMODE, PDO : : ERRMODE_EXCEPTION) ;
/∗ r e q u e t e de c r e a t i o n ∗/
$ r e s u l t a t s =$db−>q u e r y ( ’ SELECT v i l l e FROM cp WHERE cp LIKE ’ . $db−>
q u o t e ($_GET[ ’ cp ’ ] . "%" ) ) ;
$ r e s u l t a t s −>s e t F e t c h M o d e (PDO : : FETCH_OBJ) ;
w h i l e ( $ l i g n e = $ r e s u l t a t s −>f e t c h ( ) )
{
e c h o ’<option value=" ’ . $ l i g n e −>cp . ’ "> ’ . $ l i g n e −> v i l l e . ’</ option
> ’;
$trouve = 1;
}
i f (! i s s e t ( $trouve ) ) {
e c h o ’<option value=" 00000 ">Non t r o u v é , c o r r i g e z v o t r e CP</
option> ’ ;
}
u n s e t ( $db ) ;
}
c a t c h ( PDOException $e )
{
e c h o $e−>g e t M e s s a g e ( ) ;
}
?>
2
AJAX et J2EE
Vous créerez une application J2EE contenant formulaire permettant à un visiteur de créer un compte utilisateur. Le compte est constitué d’un login et d’un mot de passe. Le bouton de validation du formulaire sera
désactivé tant que la vérification de la disponibilité du login ne sera pas positive. Cette vérification sera effectuée
en AJAX (en jQuery).
Le formulaire sera envoyé à une JSP qui ajoutera le couple Login/mdp à la BD.
NB : la vérification auprès de la BD sera ici effectuée par une Servlet simulant une connexion à la BD (classe
AccesBD.java fournie).
Correction
index.html
< !DOCTYPE html>
<html>
<head>
< t i t l e>L o g i n</ t i t l e>
<meta h t t p −e q u i v=" c o n t e n t −t y p e " content=" t e x t / h t m l ; c h a r s e t=u t f −8" />
<s c r i p t s r c=" // a j a x . g o o g l e a p i s . com/ a j a x / l i b s / j q u e r y / 1 . 8 . 2 / j q u e r y . min . j s "></ s c r i p t>
<s c r i p t>
$( function () {
$ ( ’# l o g i n ’ ) . k e y u p ( f u n c t i o n ( ) {
i f ( $ ( ’# l o g i n ’ ) . v a l ( )==" " ) {
$ ( ’#mdp ’ ) . a t t r ( ’ d i s a b l e d ’ , ’ d i s a b l e d ’ ) ;
$ ( ’# b o u t o n ’ ) . a t t r ( ’ d i s a b l e d ’ , ’ d i s a b l e d ’ ) ;
} else {
$ . p o s t ( " / L o g i n / s e r v l e t / t e s t L o g i n " , " l o g i n="+$ ( ’# l o g i n ’ ) . v a l ( ) , f u n c t i o n ( d a t a ,
sta tus , xhr ) {
i f ( s t a t u s == " e r r o r " ) {
a l e r t ( ’ erreur ’ + xhr . s t a t u s + " " + xhr . s t a t u s T e x t ) ;
} else {
i f ( d a t a=="OK" ) {
$ ( ’#mdp ’ ) . r e m o v e A t t r ( ’ d i s a b l e d ’ ) ;
$ ( ’# b o u t o n ’ ) . r e m o v e A t t r ( ’ d i s a b l e d ’ ) ;
} else {
$ ( ’#mdp ’ ) . a t t r ( ’ d i s a b l e d ’ , ’ d i s a b l e d ’ ) ;
};
}) ;
};
$ ( ’# b o u t o n ’ ) . a t t r ( ’ d i s a b l e d ’ , ’ d i s a b l e d ’ ) ;
};
}) ;
}) ;
</ s c r i p t>
</head>
<body>
<form a c t i o n=" a d d L o g i n . j s p " method="POST">
<l a b e l>L o g i n : </ l a b e l><input type=" t e x t " id=" l o g i n " name=" l o g i n " s i z e=" 30 "><br/>
<l a b e l>Mot de p a s s e : </ l a b e l><input type=" p a s s w o r d " id="mdp" name="mdp" s i z e=" 30 "
d i s a b l e d><br/>
<input id=" b o u t o n " type=" s u b m i t " value=" A j o u t e r " d i s a b l e d>
</form>
<hr/>
</body>
</html>
TestLogin.java
import
import
import
import
java . io . ∗ ;
javax . s e r v l e t . ∗ ;
javax . s e r v l e t . http . ∗ ;
bd . AccesBD ;
p u b l i c c l a s s TestLogin extends H t t p S e r v l e t {
p u b l i c void doPost ( H t t p S e r v l e t R e q u e s t requete , H t t p S e r v l e t R e s p o n s e reponse ) throws
S e r v l e t E x c e p t i o n , IOException {
String loginToTest = requete . getParameter ( " l o g i n " ) ;
}
}
reponse . setContentType ( " t e x t / html " ) ;
P r i n t W r i t e r o u t= r e p o n s e . g e t W r i t e r ( ) ;
i f ( AccesBD . t e s t L o g i n ( l o g i n T o T e s t ) )
o u t . p r i n t ( "NOK" ) ;
else
o u t . p r i n t ( "OK" ) ;
Correction
Remarques
1. Continuez à vérifier vos pages HTML et CSS sur le site du W3C (http://validator.w3.org/).
2. À l’issu de la séance, vous aurez accès à la correction de ce TDM au format PDF.
3. Le serveur asi-technoweb utilisé lors des sessions PHP est toujours à votre disposition. Pour plus
d’informations sur PHP : http://www.php.net/manual/fr/
4. Les applications J2EE nécessitent un serveur d’application web J2EE (ex : Tomcat ou JBoss). Un tel
serveur doit être installé en local sur votre machine en salle de TP, dans le répertoire /tmp. Au cours
de ce TP vous utiliserez WildFly dont vous pourrez récupérer l’archive dans le répertoire /nfs/uv/asi/.
Vérifiez bien que vos variables systèmes $JBOSS_HOME et $JAVA_HOME pointent vers les bons répertoires.
5. À l’issu de la séance, vous aurez accès à la correction de ce TDM au format PDF.
6. Déposez votre compte-rendu sur moodle sous la forme d’un fichier PDF de 2p. (1 feuille
recto-verso) nommé TDM13-NomPrenom.pdf, chez chacune des 2 personnes du binôme.
