Accueil > Master 1 > Applications Web > TP4 : templating JSP, Ajax, javascript

TP4 : templating JSP, Ajax, javascript

De $1

Première partie : étude d'un projet complet, templating avec JSP

Vous allez tout d'abord étudier un projet bien conçu, utilisant intelligemment des pages JSP, des Servlets, une architecture en couche. Il est nécessaire d'être sous Netbeans 6.8 ou supérieur en veersion entreprise, car le projet utilise à la fois glassfich v3 et le SGBD Derby du jdk 1.6.

Supports de cours :

  • jspmemo.pdf : petit document d'une page recto-verso avec l'essentiel à savoir sur les jsp, la jstl et el

Installation et exécution du projet

Récupération de l'archive du projet

  • Récupérez cette rachive : IGift.rar (1.9 Mo)
  • Desarchivez-là quelque part, par exemple là où se trouvent les autres projets netbeans.

Création d'une base de données pour le projet

Le projet va déployer une base de données dans le serveur Glassfish (nous verrons ça l'an prochain en détails), mais il est faut néanmoins la créer. Pour cela, aller dans l'onglet "Services" de netbeans :

Snap1.jpg

Vous appelerez la base "igift" et vous mettrez admin/admin comme login/password :

Snap2.jpg

Vous verrez, ensuite la base apparait dans la liste des connexions :

Snap3.jpg

Si vous ouvrez l'entrée en cliquant sur le + vous verrez que cette base ne contient pas de tables...

Ouverture du projet

Maintenant, ouvrez le projet igift avec netneans. Le projet s'appelle igift et vient avec une icone en forme de pyramide. Cochez à droite "ouvrir les projets requis" !

Snap4.jpg

Normalement trois projets s'ouvrent : un en forme de pyramide, c'est le projet "chapeau" qui contient les deux autres, un en forme de grain de café, c'est le projet qui contient les parties "métier", les modèles, les gestionnaires, etc. Nous verrons le détail de ce type de projet plus tard cette année et l'an prochain, et enfin un en forme de globe terrestre, c'est la partie web, c'est surtout celle-là qui nous intéresse !

Snap5.jpg

Exécution du projet

Il s'agit d'un site de e-commerce proposant des produits à la vente. Exécutez donc le projet pour le tester en faisant clic droit / exécuter sur le projet en forme de pyramide. Cela va prendre un peu de temps car il lance le serveur glassfish, il va créer les tables, les remplir avec des données de test etc...

 Snap7.jpg

Etude du code source de la partie métier et de la partie web

La partie métier utilise des composants EJB pour les "gestionnaires". Nous étudierons cette technologie en détail en M2, mais vous pouvez néanmoins regarder les fonctionnalités qui sont proposées par les différents packages. On distingue dans ce projet deux types de "gestionnaires", ceux qui sont spécialisés pour fournir des services sur les modèles, à la manière du gestionnaire d'utilisateurs du TP précédent. On les appelle des DAO pour "Data Access Objects". On retrouve les modèles dans le package "entity" car les classes entités sont un des noms que l'on donne aux "modèles" dans le jargon. Les classes entités de ce projet se "mappent" dans des tables et permettent de manière très simple de manipuler des données dans des SGBD. Nous étudierons également cette technologie en détail l'an prochain, les bases seront abordées cette année. On trouve dans le package "session" des gestionnaires composites, qui utilisent les différents DAO et parfois d'autres gestionnaires. Regardez par exemple le gestionnaire de Commandes ou le gestionnaire de produits. Ils utilisent les DAO "Category", "Product" etc.

Il est clair que de nombreuses choses dans l'implémentation de ces classes sont encore assez mystérieuses.... un peu de patience. Regardez surtout les fonctionnalités et surtout... la partie web ! Elle se trouve dans l'autre projet, celui avec une icône en forme de planète !

  1. Regardez comment s'enchainent les parties... On commence par la page d'accueil : index.jsp, regardez son contenu ! Pourquoi fait-on directement un appel à <c:redirect ...../> vers une Servlet ?
  2. La servlet renvoie immédiatement vers la page home.jsp après juste avoir mis la liste des catégories de produits et la liste des produits dans la session. Observez les <jsp:include ...> contenus dans home.jsp pour décorer la page. Les pages header.jsp et menu.jsp partagent la session et la reqûete http, elles ont donc accès à la liste des produits et des catégories. Observez comment menu.jsp affiche la liste des catégories en créant des liens <a href=...> vers d'autres servlets...
  3. Observez quand et où est incluse la feuille de style CSS qui fait la décoration, les rectangles bleus dégradés à bords arrondis, etc.
  4. Découvrez comment est géré le panier, les commandes, les inscriptions des utilisateurs.
  5. Le formulaire d'inscription utilise la librairie javascript Dojo pour valider le formulaire. Nous allons l'étudier dans de prochains TPs.

Bref, ce projet, réalisé par un groupe d'étudiants de M2, n'est peut-être pas le plus beau ou le plus complet, mais à mon avis il forme une excellent base de compréhension, dans sa partie web, pour apprendre à faire une application web en java de manière correcte.

Travail à faire : gestion de session par login et password

  1. Modifier la partie web de ce projet pour rajouter dans la banière du haut (dans le header.jsp) deux champs : login et password, ainsi qu'un bouton Ok
  2. Lorsqu'on entre un login et un password, et qu'on clique sur Ok on est redirigé vers la Servlet "LoadServlet", cette dernière doit détecter qu'elle a été appelée par la banière de login. Si le login et le password sont valides (par exemple "toto" et "toto"), la servlet doit stocker dans la session le fait que l'utilisateur courant est connecté. Elle fait son travail classique (récupérer la liste des produits et des catégories) et redirige vers home.jsp.
  3. Cependant, dans header.jsp on doit, si l'utilisateur est connecté proposer un lien "deconnexion" et ne pas afficher les champs de saisie login et password. Une fois déconnecté, on redirige vers la même Servlet qui rappelle home.jsp mais la banière doit cette fois-ci redemander le login et le password.

Deuxième partie : premiers pas en Ajax et en Javascript

Dans cette partie, vous allez acquérir les bases de la technologie Ajax et vous familiariser avec Javascript.

Support de cours :

  • les supports sont ceux du site javapassion.com, vous les récupèrerez en faisant les TPs. Pour les allergiques à l'anglais vous pouvez récupérer une version simplifiée en français du cours sur Ajax ici : cours5_ajax.pdf

Exercice numéro 1 : suivre le tutorial "les bases d'ajax"

Le premier TP vient d'un site contenant des tutoriaux fait par Sun Microsystems, et se base sur Netbeans, cependant les techniques étant simplement basées sur html et javascript, n'importe quel IDE peut faire l'affaire.

Vous pourrez faire fonctionner les exercices soit avec glassfish v3 (conseillé) ou tomcat.

  1. Support de cours (anglais) :  AJAXBasics.ppt
  2. Récupérez cette archive :  4257_ajaxbasics2.zip 
  3. Dezippez l'archive et ouvrez le fichier index.html
  4. Faites les exercices 0.1 et 0.2 (installer firebug le debugger javascript dans firefox, mette firefox comme browser par défaut dans netbeans),
  5. puis faites les exercices 1, 3, 4, et 5

Exercice numéro 2 : à terminer à la maison, suivre le tutorial "Les bases de javascript"

  1. Récupérez les supports de cours sur cette page : http://www.javapassion.com/ajaxcodecamp/#JavaScript_Basics 
  2. Récupérez l'archive : http://www.javapassion.com/handsonlabs/4263_ajaxjavascript.zip 
  3. faites les exercices de : http://www.javapassion.com/handsonlabs/ajaxjavascript 

 

Mots clés:
FichierTailleDateAttaché par 
 4257_ajaxbasics2.zip
Aucune description
10.18 Mo10:20, 16 Mar 2010MichelBuffaActions
 AJAXBasics.ppt Visualiser
Aucune description
604 Ko10:23, 16 Mar 2010MichelBuffaActions
 cours5_ajax.pdf
Aucune description
852.37 Ko05:39, 9 Mar 2010MichelBuffaActions
 IGift.rar
Aucune description
1912.08 Ko13:57, 8 Mar 2010MichelBuffaActions
 JavaScript.pdf
Aucune description
214.3 Ko08:49, 16 Mar 2011MichelBuffaActions
 jspmemo.pdf
Aucune description
75.71 Ko05:37, 9 Mar 2010MichelBuffaActions
Images (6)
Voir 1 - 6 sur 6 images | Voir tout
Aucune description
Snap7.jpg  Actions
Aucune description
Snap5.jpg  Actions
Aucune description
Snap4.jpg  Actions
Aucune description
Snap3.jpg  Actions
Aucune description
Snap2.jpg  Actions
Aucune description
Snap1.jpg  Actions
Commentaires (0)
Vous devez être connecté pour poster un commentaire.