TP1: Applications Web

Workshop e-Business
ISMIN 3A P2015
TP1 : Applications Web
Ce TP suppose que les éléments suivants ont été installés :
netbeans en version 8 (8.0.2)
glassfish en version 4 (4.1)
tomcat en version 8 (8.0.15)
Les phrases en rouge sont des questions, qui pourront constituer des sources d’inspiration...
Comme indiqué dans le cours, une JSP (Java Server Page) contient à la fois la présentation (HTML) et les
scriptlets permettant la génération dynamique de la réponse à une requête HTTP. Lors de son traitement
par le « Web Container », une servlet sera générée qui sera ensuite compilée et exécutée.
 Création de l’application.
1. Dans le menu File, choisissez New Project… Une fenêtre s’affiche dans laquelle il faut sélectionner Java
Web puis Web Application, puis cliquez sur Next Dans Project Name tapez TP1 (en fait, ce nom est
libre) puis cliquez sur Next. Vérifiez que GlassFish et Java EE 6 soient bien positionnés et cliquez sur
Finish.
2. Notez l’arborescence qui a été créée, et comparez avec l’arborescence physique sur le disque. Est-ce
que les répertoires Web Pages, Source Packages… existent ?
Cliquez à droite sur le projet et choisissez Run. Vous devriez voir apparaître la page dans le navigateur.
 Modification de l’application
1. Ouvrez le fichier index.jsp, si ce n’est pas le cas. Retrouvez les directives JSP : elles sont encadrées par
<% et %>. Les noms des directives peuvent être listés en cliquant dans la directive et en tapant CTRL
Espace.
2. Modifiez la page afin de reproduire l’image ci-dessous.
TP1 – Web Applications
Page 1
© Philippe Lalevée, 2015
Workshop e-Business
ISMIN 3A P2015
3. Pour faciliter l’édition, utilisez la palette, en tapant CTRL 8 (ou dans le menu Windows). Par exemple,
pour insérer un formulaire, déroulez le menu HTML Forms, puis faites glisser Form vers le lieu
d’insertion. Faites de même avec une Table, les Text Input et les Checkbox, et enfin un Button. Pour le
formulaire, vous donnerez comme action, le fichier reponse.jsp.
4. Ajouter le fichier reponse.jsp avec le menu New. Pour accéder aux champs du formulaire saisi, il faut
utiliser la variable request. En passant l’identifiant d’un champ (attribut name) à la méthode
getParameter, elle retournera sa valeur (String). Par exemple, request.getParameter("nom") retourne
le nom saisi dans le champ « Votre nom » si le champ a pour nom name, qu’il faut ensuite encadrer
avec <%= et %> pour placer la valeur retournée dans le texte HTML. Pour afficher tous les éléments
associés aux Checkbox, il faut d’abord qu’ils aient le même identifiant. De ce fait, ils seront retournés
sous forme d’un tableau de chaines de caractère, accessible avec la fonction getParameterValues. Voici
un exemple de scriptlet pour cela :
<ul>
<%
String [] auteurs = request.getParameterValues("auteur");
if (auteurs != null) {
for (int i=0; i<auteurs.length; i++) {
%>
<li> <%= auteurs[i] %>
<%
}
}
%>
</ul>
5. Testez l’application.
6. Remplacez les Checkbox par des Radio Button afin de positionner une seule valeur et testez.
 Insertion d’une Servlet et d’un Java Bean
Dans le modèle MVC, il est d’usage que les vues (View) soient gérées par des JSP, les composants métier
(Model) par des Java Beans et les contrôleurs (Controller) par des Servlets. Nous allons donc créer une
Servlet pour traiter le formulaire, c’est-à-dire récupérer les données des champs et les placer dans un Java
Bean, qui sera transmis à une page JSP pour l’affichage.
1. Ajouter une Servlet avec le menu New. Hormis son nom et le package, les valeurs par défaut sont OK.
2. Le code généré contient une méthode processRequest qui traite les requêtes de type GET et POST.
C’est dans cette méthode qu’il faudra ajouter le code du contrôleur : création d’un Java Bean qui
contiendra les données du formulaire et aiguillage vers la page JSP (la page reponse.jsp précédente).
3. Créez un Bean pour stocker les données du formulaire. Rappel : un Java Bean est une classe dont les
propriétés sont privées, possédant pour chacune d’elles une méthode publique get… et une méthode
publique set…. Ici, il faut une classe avec deux propriétés, une pour le nom et une pour le tableau
d’auteurs. Par exemple, si le nom est défini comme private String name, il faudra une méthode
public String getName() et public void setName(String name) ; notez le nom des méthodes avec la
première lettre de la propriété en majuscule.
4. Revenez dans la Servlet. Ajoutez la création du Bean et appelez les méthodes set, en utilisant les
méthodes getParameter… de la variable request pour leur passer les valeurs des propriétés.
5. Ajouter le Bean dans les attributs de la requête avec request.setAttribute(…). Pourquoi faut-il faire
cela ? Quelles sont les autres possibilités ?
6. Faites la redirection avec request.getRequestDispatcher, sur laquelle vous appellerez la méthode
forward avec cette request et la response. Expliquez ce qui se passe.
7. Modifiez l’action dans le formulaire (index.jsp) pour que cette Servlet soit appelée en mode POST.
8. Modifiez la page reponse.jsp de telle manière qu’elle prenne ses informations à partir du Bean. La
première chose à faire est de placer une directive jsp:usebean en utilisant la palette (menu JSP puis
TP1 – Web Applications
Page 2
© Philippe Lalevée, 2015
Workshop e-Business
ISMIN 3A P2015
Use Bean). L’Id est le nom de la variable qui sera associée au Bean dans la page. Vous choisirez request
comme Scope ; n’oubliez pas d’indiquer le nom du package dans le nom de la classe.
9. Pour accéder aux propriétés du Bean, vous pouvez utiliser jsp:getProperty pour insérer sa valeur dans
le texte HTML, ou dans les scriptlets, tout simplement la variable indiquée dans jsp:usebean et appeler
les méthodes get. Modifiez en conséquence.
10. Testez. Quelles sont les différences visibles, s’il y en a ?
 Sécurisation de l’accès
Pour sécuriser l’accès à une application Web, il existe plusieurs méthodes. La plus simple à mettre en
œuvre est celle basée sur HTTP (placer un fichier .htaccess dans le répertoire à protéger), mais elle
présente de nombreux inconvénients. Lesquels et pourquoi ?
Nous allons mettre en œuvre une sécurisation basée sur l’authentification par formulaire (form-based
authentication) gérée par le serveur d’application. Pour cela, il faut qu’une page de connexion soit activée
dès l’entrée dans le contexte à protéger.
1. Ajouter une page login.jsp avec le menu New. Placez-y un formulaire de type POST comprenant trois
éléments : un champ de type texte pour saisir le nom, un champ de type password pour saisir le mot
de passe et un bouton pour soumettre le formulaire. L’action associée au formulaire devra
obligatoirement être j_security_check ; le nom du champ texte devra obligatoirement être j_username
et le nom du champ mot de passe devra obligatoirement être j_password.
2. Ajouter une page login_error.jsp qui s’affichera en cas d’erreur de connexion. Il pourra être utile de
placer le même formulaire de connexion que celui de login.jsp. L’affichage de cette page sera fait
automatiquement par le serveur d’application.
3. Ajouter un fichier descripteur Web.xml (menu New Standard Deployment Descriptor). Cliquez sur
l’onglet Security et allez dans Login Configuration. Cliquez sur le bouton Form et mettez /login.jsp
dans le premier champ et /login_error.jsp dans le second. Ensuite dans Security Roles, ajoutez un rôle
admin et un rôle user. Enfin, dans Security Constraints, cliquez sur Add Security Constraint et placez
un Display Name comme « Pages d’administration » ; ensuite cliquez sur Add… et remplissez le
formulaire avec un nom (Resource Name) et une description. Dans URL Patterns, il faut indiquer la
zone à protéger, par exemple /admin/* (que nous créerons plus tard). Il faut ensuite cliquer sur Enable
Authentication constraint et placer admin créé précédemment dans Role Name(s).
4. Pour vérifier que la sécurisation fonctionne, créez un dossier admin dans le dossier Web Pages avec un
clic à droite puis menu New Folder (s’il n’apparait pas dans la liste, sélectionnez Other…). Dans ce
dossier admin, créez une page JSP (par exemple admin.jsp) dont le contenu importe peu.
5. Pour pouvoir créer des comptes (qui seront gérés par glassfish), il faut créer un descripteur glassfishweb.xml. Pour cela, cliquez à droite sur le projet et choisissez New Other ; dans la catégorie GlassFish,
choisissez Glassfish Descriptor. Les deux rôles admin et user sont déjà présents dans Security Role
Mapping. Pour le rôle admin, ajoutez un groupe (Groups Assigned…), par exemple appadmin.
6. La dernière chose à faire est d’ajouter des utilisateurs dans le groupe que nous venons de créer. Pour
cela, il faut ouvrir la console d’administration de glassfish : allez dans l’onglet Services/Servers et
cliquez à droite sur GlassFish Server… Démarrez le serveur s’il ne l’est pas. Ensuite, sélectionnez View
Domain Admin Console, que votre navigateur doit afficher. Allez dans Configurations/serverconfig/Sécurité/file. Cliquez sur Gérez les utilisateurs. Ajoutez un utilisateur en indiquant bien le
groupe, appadmin, créé au point précédent.
7. Pour tester, tapez l’URL http://localhost:8080/TP1/admin/admin.jsp (adaptez-la en fonction de vos
noms de pages.
TP1 – Web Applications
Page 3
© Philippe Lalevée, 2015
Workshop e-Business
ISMIN 3A P2015
 Consultation d’une base de données
Le serveur glassfish est livré avec une base de données de test, appelée sample, que nous allons utiliser
dans cet exercice directement. Créez un nouveau projet Java Web puis Web Application.
1. Il faut d’abord configurer l’application pour lui associer une source de données (datasource). Faites
new puis Standard Deployment Descriptor. Le fichier web.xml doit s’ouvrir automatiquement. Dans
l’onglet References, cliquer sur Add sous Resource References. Taper le nom jdbc/sample pour la base
de données de test fournie.
2. La bibliothèque de tag JSTL fourni le tag <sql:query>, qui effectue l’équivalent d’un SQL SELECT. Dans la
palette, ouvrez le menu Databases et faites glisser DB Query dans votre page. Dans la fenêtre qui
s’affiche, mettre allRows dans Variable Name, jdbc/sample dans Data Source et select name, city,
state FROM customer dans Query Statement. Netbeans a ajouté une ligne au début du fichier : à quoi
sert-elle ?
3. Insérer une table HTML à une ligne et deux colonnes avec la palette, dont les titres sont Ville et
Position. Pour connaitre le schéma de la base de données, utiliser l’onglet Services puis Databases.
4. Pour itérer sur les résultats obtenus du <sql:query> qui ont été placés dans la variable allRows, nous
allons utiliser le tag <c:foreach>, disponible dans la palette sous le nom JSTL For Each. Dans Collection,
placer ${allRows.rows} et dans Current Item… placer ligneCourante, qui contiendra une ligne du
résultat, dont chaque attribut sera une colonne de la table customer
À noter : la syntaxe ${} est utiliser pour placer une expression JSTL, qui sera évaluée à l’exécution de la
page. Le résultat du <sql:query> est en fait un JavaBean : expliquer son utilisation ici.
5. Placez le <tbody> de la table HTML entre <c:foreach> et </c:foreach>. Dans chaque <td>, placer un
accès à un champ de ligneCourante : ${ligneCourante.name}, ${ligneCourante.city} et
${ligneCourante.state}.
6. (Une autre possibilité plus rapide est d’utiliser DB Report de la palette : essayez !) Testez votre fichier.
 Mise à jour des données
1. Pour insérer des données dans une table, il suffit d’utiliser le tag <sql:update> obtenu avec DB Insert.
Placez les bonnes valeurs dans les champs, et insérez le tag avant le <sql:query>.
2. Avec DB Update et DB Delete, effectuez d’autres mises à jour et testez.
sample
Consultez les différentes tables de la base de données sample. En cliquant à droite sur le nom de la table
(après la connexion à cette base dans l’onglet Services, Databases/Java DB, et ensuite consultation de
jdbc:derby…/APP/Tables), vous pouvez accéder à son contenu. Essayez de retrouver de manière
informelle le schéma de la base de données.
Par groupe, écrivez des applications Web de gestion des clients : affichage d’un client particulier (par son
nom ou son identifiant) ; et de gestion de commandes, ce qui nécessitera sans doute de créer une nouvelle
table.
TP1 – Web Applications
Page 4
© Philippe Lalevée, 2015