TDM13 - Plateforme e-learning Moodle de l`INSA de Rouen
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.