Université Hassan 1er

Faculté des Sciences et Techniques

Département Mathématiques et Informatique
Filière GI : -2019/2020-

JEE et Framework
Travaux Pratiques

Professeur BALOUKI Youssef

Département Mathématiques et Informatique
 TP N˚1 de Java EE
Installation et prise en main de l’environnement de travail.

Objectifs
1. Installation de la distribution JEE de l'environnement de développement intégré (EDI) Eclipse.
2. Intégration et configuration du serveur Tomcat (version 9.x)
3. Se familiariser avec la perspective JEE de l'EDI Eclipse.
4. Création, configuration et déploiement d'un projet Web dynamique.

Travail à faire
Installation et configuration
1. Décompresser les fichiers eclipse-jee-xxx.zip et apache-tomcat-
9.0.x.zip dans le dossier c:\JEE
2. Parmi les perspectives disponibles dans eclipse, sélectionner la perspective Jee
3. Configuration du serveur Tomcat :
a. Ouvrir l’onglet server (Window/ show view/server)
b. Choisir Add new Server (version 9.X de Tomcat)

c. définir le chemin vers le dossier d’installation d’Eclipse

d. Démarrer le serveur

Création d'un projet

1. Depuis la barre de menu faire
new/Dynamic Web project

2. Saisir le nom du projet

3. Spécifier Tomcat 9 comme environnement
d'exécution cible
4. Spécifier la version 3.0 de l'API servlet
5. L'écran suivant sert à déterminer le dossier
des fichiers sources à compiler

2
6. Spécifier la racine du contexte du projet (Context Root). Celle ci définit l'URL à partir du quel nous
allons accéder au projet. L'URL du projet étant toujours de la forme
http://IPServ ur:Port/ContextRoot/. Dans notre cas l'URL du projet sera
http: /localhost:8080/TP1/

7. Définir le dossier qui va contenir les pages Web ainsi que les ressources statiques (images,
scripts, videos, etc...). Par défaut, ce dossier est nommé WebConent.
8. Le fichier Web.xml est le fichier de déploiement et de configuration.
9. Créer une page html dans le projet:
a. clic droit sur le noeud du projet puis new > HTML
b. nommer la page page1.html.
c. rajouter le message Bonjour tout le monde à la page.
10. Déploiement et exécution :
a. clic droit dans le code source de la page puis run as > run on server
b. sélectionner le serveur cible et valider
11. Test :
a. Vérifier que l'état du serveur est à [Started,Synchronised]
b. Vérifier que l'URL de la page est http://localhost:8080/TP1/page1.html
c. Exécuter la page depuis un navigateur externe (Chrome ou firefox)

3
 TP N˚2
Création d’un projet Web dynamique

Objectifs
1. Création et configuration d'une application J2EE.
2. Configuration d'une page d'accueil.
3. Génération d'une page Web dynamique.
4. Configuration et déploiement d'une Servlet.

Travail à faire
Reprendre le projet précédent.

Problématique 1 :
Pour accéder à notre page de page1.html, un utilisateur devrait connaitre son nom afin de pouvoir émettre
une requête vers l'URL http://localhost:8080/TP1/page1.html. Sans cette information la page ne pourrait pas être
consultée. Par contre, en général, pour accéder à un site Web comme google, nous utilisons l'URL
www.google.com sans spécifier le nom de la page demandée. La page ainsi reçue est nommée page d'accueil
ou page de bienvenu. La page de bienvenu est retournée à chaque utilisateur ayant émis une requête vers l'URL racine
d'une application Web. En ce qui concerne notre application, le recours à l'URL racine
http://localhost:8080/, génère une erreur du type Resource non trouvée de code 404.

Solution : Définition d'une page d'accueil.

Pour remédier à ce problème nous allons définir page1.html comme page d'accueil à partir du descripteur de
déploiement comme suit:
1. ouvrir le descripteur de déploiement (web.xml)dans le mode source, localiser la balise <welcome‐file‐list>.
Celle ci sert à définir une liste de pages d'accueil moyennant la balise fille <welcome‐file>.
2. supprimer les pages d'accueil définies par eclipse par défaut et spécifier la page page1.html comme page
d'accueil comme suit:
<welcome‐file‐list>
<welcome‐file>page1.html</welcome‐file>
</welcome‐file‐list>

3. Déployer l'application et vérifier que la page page1.html est définie comme page d'accueil en accédant à
l'URL racine de l'application.

4
Université Hassan 1er
Faculté des Sciences et Techniques
Département Mathématiques et Informatique
Filière : GI 2019/2020-

Problématique 2 : Génération dynamique d'un contenu html

La plateforme J2EE propose la technologie servlet pour créer des sites Web dynamiques. Les Servlets
sont des classes java, héritant de la classe HttpServlet et pouvant être sollicitées par des requêtes http
de types Get ou Post. Moyennant les Servlets, il est possible de générer un contenu html de façon
dynamique.

Travail à effectuer :
1. Créer une Servlet depuis le menu contextuel du projet:
a. effectuer new > Servlet
b. nommer la classe de la servlet Bonjour (champ class name)
c. cocher les méthodes doGet et doPost de la servlet. Ces
deux méthodes traitent respectivement les requêtes de types
Get et
Post.

2. Rajouter à la Servlet le code suivant :

response.setContentType("text/html");
PrintWriter p = response.getWriter();
p.print("Bonjour Servlet");

3. Exécuter la servlet par la commande start de

son menu contextuel.

la méthode response.setContentType("text/html")sert à spécifier le type de la réponse à générer.

Dans notre cas, le contenu à générer est constitué de texte et de html.
La méthode response.getWriter() permet d'obtenir un
objet de type PrintWriterservant à écrire le contenu dynamique
dans la page à générer moyennant sa méthode print.

Exercices:
1. Modifier la servlet Bonjour pour afficher un tableau de N
lignes et M colonnes
2. Modifier la servlet Bonjour pour qu'elle affiche la date
courante.
3. Modifier la servlet pour afficher les deux messages sur deux
lignes successives
4. Créer la servlet Moyennesaffichant les noms de N
étudiants ainsi que leurs moyennes.

5/21
Université Hassan 1er
Faculté des Sciences et Techniques
Département Mathématiques et Informatique
Filière : GI 2019/2020-

Remarques:
Utiliser la boucle for pour la génération de la liste des étudiants
Utiliser la méthode Math.random() pour générer les moyennes.

TP N˚3 : Génération d’un contenu Web dynamique

Objectifs
Création d'une application Web qui affiche les moyennes des étudiants. Cette application permettra de
réaliser les objectifs suivants.
1. Création et configuration d'une application J 2EE.
2. Utilisation d'une source de données dans une servlet.
3. Génération de pages Web dynamiques contenant les éléments suivants :
a. Listes à puces
b. Tableaux
c. Images
4. Configuration et dé ploiement d u projet.

Travail préliminaire
1. Créer u nouveau projet intitulé TP3.
2. Créer la classe Etudiant con tenant :
o les attributs cin (String), nom (String) et moyenne (double).
o un constructeur paramétré.
o les accesseurs et les mutateurs des attributs.
o la méthode equals comparant deux étudiants sur la base de leurs numéros de cin
3. Créer la classe GestionEtudiants contenant les membres suivants :
o un attribut statique de type Array List<Etudiant> nommé listeEtudiants.
o une méthode statique appelée getListeEtudiants permettant de retourner la liste des étudiants

Exercice 1 : Affichage simple

Créer la servlet AffichageEtudiants effectuant les traitements suivants:
1. récupération de la liste des étudiants
génération d'une page Web dynamique affichant les noms ainsi que les moyennes des étudiants
conformément à la figure 1.

Figure 1 : Affichage de la liste des étudiant

6/21
Université Hassan 1er
Faculté des Sciences et Techniques
Département Mathématiques et Informatique
Filière : GI 2019/2020-

Exercice 2 : Affichage dans un liste à puces

Modifier la servlet AffichageEtudiants de manière à afficher les étudiants sous f orme d'une liste à puces

 nom Etudiant1 cin 1 12.0

 nom Etudiant2 cin 2 14.0
 nom Etudiant3 cin 3 9.0
 nom Etudiant4 cin 4 15.0
 nom Etudiant5 cin 5 8.0
Figure 2: Affichage de la liste des étudiants

Exercice 3 : Affichage dans un tableau

Modifier la servlet AffichageEtudiants de manière à afficher les étudiants sous f orme d'un tableau contenant
les colonnes cin, nom et moyenne (Figure3).

Figure 3 : Affichage sous forme de tableau

Exercice 4 : Insertion d'image

1. Rajouter l'attribut image (String ) dans la classe Etudiant tout en modifiant le constructeur de la classe.
(ou bien avec une nouvelle classe qui hérite de la classe Etudiant)
2. Créer un répertoire nommé images dans le dossier
WebContent du projet.
3. Copier l es images des étudiants dans le répertoire images (une image par étudiant).
4. Passer l e nom du fichier de l'image comme paramètre du constructeur lors de l'instanciation des étudiants.
Exemple : new Etudiant("110","Alami",15.2,"im.jpg")
5. Modifier la servlet de manière à afficher l'image de chaque étudiant dans une nouvelle colonne (voir figure
4).
5. Fixer la taille des images à 40x4

7/21
Université Hassan 1er
Faculté des Sciences et Techniques
Département Mathématiques et Informatique
Filière : GI 2019/2020-

Figure 4 : tableau avec images

8/21
Université Hassan 1er
Faculté des Sciences et Techniques
Département Mathématiques et Informatique
Filière : GI 2019/2020-

Ex rcice 5 :
Modifier le code de la servle t de manière à :
1. colorer en rouge les lignes des étudiants aya nt une moyenne inférieure à 10
2. colorer en jaune les lignes des étudiants ayan t une moyenne supérieure ou égale à 10

Nom CIN Moyenne Photo

nom Etudiant1 cin 1 12.0

nom Etudiant2 cin 2 14.0

nom Etudiant3 cin 3 9.0

nom Etudiant4 cin 4 15.0

nom Etudiant5 cin 5 8.0

Figure 5 : coloration conditionnelle du fond

Annexes

liste non ordonnée en HTML :

<ul>
<li> item1 </li>
<li> item2 </li>

9/21
Université Hassan 1er
Faculté des Sciences et Techniques
Département Mathématiques et Informatique
Filière GI : -2019/2020-
< li> item3 </li>
</ul>

Tableau en HTML :
< table border=”1” >
< tr >
< td > Row 1, Column 1 < /td >
< td > Row 1, Column 2 < /td >
< / tr >
< tr >
< td > Row 2, Column 1 < /td >
< td > Row 2, Column 2 < /td >
< /tr >
< /table >
Utiliser la balise <th> pour les titres

Utilisation d es images :
< img src=’smile.gif ‘ alt=’Wrox Logo’ height=’40’ width=’40’ / >

Manipulation des couleurs du texte:

<font face='verdana' color==”#666666' size ='15' > ou
<font face='verdana' color='green' size ='15' >
Couleur de fond d’une ligne d’un tableau :
<tr style='background-color:yellow'>

TP N˚4 La redirection des requêtes

Objectifs
Maitriser la notion de redirection et les méthodes permettant de l'effectuer.

1 Introduction
Il est possible de rediriger le client vers une URL déterminée à l'aide de l'objet RequestDispatcher. Cette
technique s'effectue à travers le code suivant :

RequestDispatcher rd = getServletContext().getRequestDispatcher("/UrlDestination");
rd.forward(request, response);

Il est possible de compacter l'écriture précédente sous la forme :

getServletContext().getRequestDispatcher("/UrlDestination").forward(request, response);

Explication

 La méthode getServletContext permet à la servlet de communiquer avec son conteneur de servlets.

 La méthode getRequestDispatcher prend comme paramètre l'URL de la ressource vers laquelle
l'utilisateur sera redirigé.
 La méthode forward permet de passer la requête et la réponse de la servlet courante à une autre ressource.

10/21
Université Hassan 1er
Faculté des Sciences et Techniques
Département Mathématiques et Informatique
Filière GI : -2019/2020-

Exercice 1
3. Créer un nouveau projet
4. Créer une page HTML identification.html contenant un formulaire avec deux champs texte nommés
login et password avec un bouton de validation.
5. Créer une page HTML succes.html contenant la phrase identification réussie
6. Créer une page HTML echec.html contenant la phrase échec de l'identification
7. Créer la Servlet Identification qui traite le formulaire d'identification et qui implante la logique suivante :
Si le login est égal à "admin" et le mot de passe est égal à "admin" alors rediriger l'utilisateur vers
la page succes.html.
Sinon, rediriger la page echec.html.

Exercice 2 (Figure 1)
1. Créer un nouveau projet
2. Créer une page HTML identification.html contenant un formulaire avec
deux champs texte nommés login et password
un menu déroulant contenant les choix IM, CM et AV
un bouton de validation.

3. ‐ Créer la Servlet Identification qui traite le formulaire d'identification et qui implante la logique suivant :
a Si le login es t égal à "admin" et le mot de passe est égal à "admin", rediriger la requête vers la servlet
UtilisateurValide
b Sinon, rediriger la requête vers la servlet UtilisateurNonValide
2. Créer la servlet UtilisateurValide qui, selon la sélection effectuée, affiche le texte suivant:

bonjour, vous êtes dans la section {IM, CM, A V}.

3. Créer la servlet UtilisateurNonValide qui affiche le texte suivant suivi d' un lien hypertexte vers la
page d'identification:

Echec d'identification; vous avez saisi le login "XXXX" et le mot de passe "YYYY"

11/21
Université Hassan 1er
Faculté des Sciences et Techniques
Département Mathématiques et Informatique
Filière GI : -2019/2020-
Figure 1 : Illustration de l'exercice 2

TP5 : Gestion des formulaires

Objectifs
Se familiariser avec les API de traitement des formulaires dans un projet J2EE. Ceci passe par :

1. La création de formulaires comprenant les éléments

suivants:
a. La déclaration du formulaire. d. Les listes et menus déroulants.
b. Les champs de saisie de texte et de e. Les cases à cocher.
Les zones de saisie de texte
mots de passe. f. libre.
Les boutons d'envoi de
c. Les boutons radio. g. formulaire.
ww L'implémentation de Servlets capables de récupérer et de traiter le contenu d'un formulaire comprenant:
Des composants à retour simple (text, password, radio, textarea, select)
Des composants à retour multiple (checkbox)

Introduction
Les formulaires permettent aux développeurs de doter une page web d'éléments interactifs permettant le dialogue
avec les internautes. L'utilisateur saisit des données en remplissant des champs, en activant des boutons radio ou
des cases à cocher, en sélectionnant des options dans une liste de choix ou en cliquant sur des boutons. Un
formulaire peut être soumis en cliquant sur un bouton de type submit afin d'envoyer son contenu à un URL
capable de le traiter.

1 Création d'un formulaire

1.1 Déclaration d'un formulaire

Les formulaires sont délimités par la balise <FORM> ... </FORM> et contiennent obligatoirement l'attribut action
spécifiant l'URL d'envoi du formulaire et l'attribut method désignant la méthode d'envoi du formulaire qui pourrait
être soit get ou post. Dans une application J2EE, l'URL d'envoi peut être soit celui d'une servlet, soit celui d'une
page jsp. Voici un exemple d'un formulaire :

<form method="get" action="ServletTraitement">

................................................
</form>

1.2 Composants d'un formulaire

La balise FORM constitue permet de regrouper des éléments qui permettent à l'utilisateur de choisir ou de saisir les
informations à envoyer à l'URL indiqué dans l'attribut ACTION de la balise FORM par la méthode indiquée par
l'attribut METHOD. Les éléments à déclarer dans un formulaire devraient avoir un identifiant (attribut name)
permettant de récupérer leurs valeurs ensuite. Les éléments d'un formulaire peuvent être :

o Champs de saisie de texte : <input type="text" name="prenom">

12/21
Université Hassan 1er
Faculté des Sciences et Techniques
Département Mathématiques et Informatique
Filière GI : -2019/2020-
o Zone de texte libre : <TEXTAREA rows="3" name="commentaire">votre
commentaire</TEXTAREA>
o Liste : une liste permet à l'utilisateur de sélectionner un choix parmi ceux qui sont disponibles. La
liste (balise select) a un identifiant (attribut name) et regroupe un ensemble de choix (balise
option) ayant chacun une valeur prédéfinie (attribut value).

<SELECT name="niveau">
<OPTION VALUE="1IM">première année IM</OPTION>
<OPTION VALUE="2IM" selected="selected">deuxième année IM</OPTION>
<OPTION VALUE="3IM">troisième année IM</OPTION> <OPTION
VALUE="autre">Autre</OPTION>
</SELECT>

Boutons radios : il s'agit d'un bouton permettant un choix parmi plusieurs proposés (l'ensemble des boutons
radios relatifs à la même information devant porter le même attribut name pour être mutuellement exclusifs.
La paire nom/valeur du bouton radio sélectionné sera envoyée à l'URL de l'action.

Homme : <INPUT type="radio" name="sexe" value="M" checked>

Femme : <INPUT type="radio" name="sexe" value="F">

Cases à cocher: permettent d'effectuer des choix multiples en envoyant les valeurs des cases cochées.

<INPUT type="checkbox" name ="loisirs" value="lecture"> Lecture

<INPUT type="checkbox" name ="loisirs" value="sport">Sport
<INPUT type="checkbox" name ="loisirs" value="voyage">Voyage
Bouton d'envoi : est un bouton permettant d'envoyer le contenu du formulaire à l'URL défini dans l'attribut
action de la balise form.

<INPUT type="submit" value="Envoyer">

1.3 Codage des données

Lors de l'envoi du formulaire les données sont codées selon le type de la méthode d'envoi. Chaque élément du
formulaire est codé selon le format nom=valeur. Par exemple, si l'utilisateur a saisit dans le champ texte (déclaré
auparavant) la chaine Alami, alors cet élément sera codé sous la forme prenom=Alami.
Si le formulaire contient plusieurs éléments, leurs résultats seront concaténés et séparés par le caractère &

1. méthode get: la méthode get envoi le formulaire dans l'URL comme suit :

http://urlDeLApplication/action?name1=value1&name2=value2&.........&namen=valuen

2. méthode post: Le contenu des éléments du formulaire sont envoyées sous un format binaire, cachés
dans l'entête de la requête.

13/21
Université Hassan 1er
Faculté des Sciences et Techniques
Département Mathématiques et Informatique
Filière GI : -2019/2020-
2 API de traitement des formulaires
La méthode d'envoi du formulaire spécifie la méthode de la servlet qui sera invoquée. En effet, la méthode get
permet d'actionner la méthode doGet de la servlet tandis ce que le type post invoque la méthode doPost. Les
paramètres du formulaire sont envoyées dans un objet de type HttpServletRequest. Celui ci propose deux
méthodes pour la lecture des paramètres envoyés à partir d'un formulaire à savoir:

6. public String getParameter(String name) : permet de retourner la valeur d'un champ dont on
a passé le nom en argument. Cette méthode est utilisée pour récupérer la valeur d'un champ à une seule
valeur de retour.
7. public String[] getParameterValues(String name):cette méthode est utilisée pour récupérer la
ou les valeurs retournées par un champs à retour multiple (checkbox). Le tableau de retour contient les
valeurs des champs sélectionnés par l'utilisateur et est égal à null si aucun choix n'a été activé.

Remarques :

 Si le champ dont le nom est fourni aux méthodes précédentes n'existe pas, la valeur null est retournée.
 Si les paramètres envoyés par un formulaire sont générés automatiquement (formulaire dynamique), la
classe
HttpServletRequest propose la méthode Enumeration getParameterNames() permettant de récupérer les
noms des paramètres envoyés.

Travail à faire :
< Créer un nouveau projet intitulé TP4.
< Créer la page formulaire.html contenant un formulaire permettant à l'utilisateur de saisir son nom et
son prénom et de les envoyer moyennant la méthode get.
< Créer la servlet ServletTraitement effectuant les traitements suivants:
< Récupération du nom ainsi que du prénom de l'utilisateur.
génération d'une page dynamique affichant le message suivant : Bonjour prénom nom.
< Quels sont les changements à effectuer si l'on change la méthode d'envoi du formulaire à post.
< Quel est le résultat du click sur le lien hypertexte suivant :
<a href="ServletTraitement?prenom=Youssef&nom=Alami"> lien </a>
< Rajouter deux boutons radio à la page afin de permettre à l'utilisateur de spécifier son sexe (utiliser les
valeurs H et F pour homme et femme).
7. Modifier le code de la servlet ServletTraitement afin d'afficher le message Bonjour
{madame,monsieur} prénom nom selon la saisie de l'utilisateur.
8. Rajouter à la page html une liste permettant à l'utilisateur de spécifier sa fonction parmi (Etudiant, Ingénieur,
Enseignant, Retraité et autre.) tout en spécifiant le choix Etudiant comme un choix par défaut.
9. Modifier la servlet ServletTraitement afin d'afficher la fonction de l'utilisateur.
10. Rajouter au formulaire une liste de cases à cocher permettant à l'utilisateur de spécifier ses loisirs.
11. Rajouter le code nécessaire à la servlet afin d'afficher la liste des loisirs de l'utilisateur.

A vérifier / corriger

12. Tester les cas où l'utilisateur ne spécifie pas son sexe.

14/21
Université Hassan 1er
Faculté des Sciences et Techniques
Département Mathématiques et Informatique
Filière GI : -2019/2020-
13. Remédier au problème soit :
o en spécifiant un choix par défaut
o en traitant ce cas à part dans la servlet
14. Tester les cas où l'utilisateur ne spécifie pas ses loisirs.

Récapitulation
Objectifs
Création d'un projet rassemblant toutes les techniques déjà acquises à fin de résoudre des
problématiques complexes. Ces travaux regroupent les concepts suivants :
1. La génération d'un contenu dynamique
2. La gestion des formulaires
3. L'envoi de paramètres par des liens hypertextes
4. La redirection

Travail à faire : Reprendre le projet du TP3

Partie 1: Authentification de l'utilisateur

1. Rajouter une page d'identification appelée identification.html permettant à l'utilisateur de saisir
son login ainsi que son mot de passe.
2. Rajouter la servlet Identification qui redirige l'utilisateur vers la page d'affichage des étudiants si
le login et le mot de passe sont égaux ou à la page nommée echec.html sinon.
3. Rajouter le code nécessaire afin de rediriger l'utilisateur vers l'affichage des étudiants après l'insertion ou
la suppression d'un étudiant.

Partie 2 : Gestion de formulaires

1. Créer la page insertionEtudiant.html permettant à l'utilisateur de saisir toutes les données
nécessaires afin d'ajouter un étudiant.
2. Créer la servlet InsertionEtudiant qui
a. récupère les données saisies par l'utilisateur
b. crée le nouvel étudiant à partir des données fournies
c. rajoute l'étudiant à la source de données moyennant la classe GestionEtudiants
3. redirige l'utilisateur vers la page d'affichage des étudiants

Partie 3 : Envoi de paramètres

Problématique:

Nous désirons ajouter une nouvelle colonne au tableau des étudiants. Cette colonne devrait contenir un lien
hypertexte permettant de supprimer l'étudiant en question. Un clic sur le lien hypertexte devrait actionner une
servlet nommée SupprimerEtudiant qui, après avoir supprimé l'étudiant en utilisant la classe
GestionEtudiants, devrait rediriger l'utilisateur une nouvelle fois vers la servlet d'affichage.

Éléments de réponse

15/21
Université Hassan 1er
Faculté des Sciences et Techniques
Département Mathématiques et Informatique
Filière GI : -2019/2020-
1. La suppression de l'étudiant passe par la création d'une servlet nommée SupprimerEtudiant,
celle‐ ci devrait recevoir en entrée le cin de l'étudiant en question.
2. Les liens hypertextes devraient envoyer à la servlet le cin de l'étudiant donc ces derniers n'ont pas le
même URL puisqu'ils n'ont pas le même effet.
3. Les liens hypertextes devraient simuler l'envoi de paramètres analogiquement aux formulaires.

TP7 :Les pages JSP

Objectifs
1. Compréhension de l'intérêt et du rôle des JSP
2. Se familiariser avec la technologie JSP et ses API :

Les directives
Les expressions
Les déclarations
Les scriptlets
3. Intégration des JSPs dans un projet Web dynamique.

1 Introduction
Malgré l'utilité des servlets dans la réalisation de comportements dynamiques dans une application Web, le fait
d'écrire du code HTML dans des méthodes de type out.print() reste peu utilisable. En effet, en regroupant le
code relatif à logique applicative avec celui faisant référence à la présentation de l'information, les applications se
basant uniquement sur les servlets perdent en réutilisabilité et en maintenabilité. Pour celà, le framework J2EE
s'est enrichi d'une deuxième API à savoir les JSP ou les Java Server Pages.

Les pages jsp sont similaires aux pages html mais en diffèrent en trois points :
1. Les fichiers des pages jsp ont l'extension jsp
2. Les pages jsp peuvent regrouper des balises html avec du code java.
3. Le cycle de vie des pages jsp est géré par le moteur de servlets car elles nécessitent une étape de
transformation en une servlet puis d'une étape de compilation avant de pouvoir être exécutées.

2 Éléments d'une page JSP

Tous les éléments relatifs à la technologie jsp sont délimités par les tags <% et %>

2.1 Les déclarations

Une déclaration est écrite entre les tags <%! et %>. Ce tag est à déclarer des attributs ou des méthodes de
classe accessibles depuis toute la page jsp.

Exemple 1: déclaration d'une variable

<%! private String message = "Bonjour le monde" ;%>

16/21
Université Hassan 1er
Faculté des Sciences et Techniques
Département Mathématiques et Informatique
Filière GI : -2019/2020-

Exemple 2: déclaration d'une méthode

<%!
private void setMessage (String s) {
message = s ;
}%>
Exemple 3 : Affichage d'une variable moyenant une expression

<%= message %>

2.2 Les scriplets

C'est un bloc de code Java qui est placé dans la Servlet générée

Les scriplets sont placées entre les symboles <% et%> Tout code
java a accès :
 aux attribues et méthodes définis par le tag déclaration <%! … %>
 aux objets implicites que nous verrons plus loin.

2.3 Les expressions

Une expression est écrite entre les tags <%= et %>. Ce tag a pour effet d'afficher le contenu de l'expression
(chaine de caractères, variable, etc...) da ns la page. Ceci revient à faire appel à la méthode toString de
l'objet contenu dans l'expression.

2.4 Les directives

Une directive est une déclaration qui donne une valeur à un attribut prédéfini de la page. Cet attribut est ensuite
utilisé pour créer la servlet associée à cette page. Les directives contrôlent donc comme nt le moteur de servlets
doit générer la Servlet.

Elles sont placées entre les symboles <%@ et %>

Syntaxe : <%@ directive {attribut="valeur"} %>
Les directives les plu s importantes sont:
3. include : indique au compilateur d’inclure un autre fichier. C’est comme si le contenu du fichier à
inclure était directement copié dans le fichier courant.
< page : définit les attributs spécifiques à une page à travers des options

Exe mple 1: inclusion de page (html ou jsp) dans une jsp

<%@ include file="unAutreFichier"%>

Exe mple 2 : décl aration du type du cont enu de la page

<%@page contentType="text/html"%>

Exe mple 3 : Importation d'une classe java

<%@page import="java.util.*"%>

Figure 1 : Exemple 1

17/21
Université Hassan 1er
Faculté des Sciences et Techniques
Département Mathématiques et Informatique
Filière GI : -2019/2020-

2.5 Les variables implicites ou prédéfinies

Les objets implicites sont les objets présents dans la page jsp et qui sont utilisables directement
sans déclaration.
Ils sont identifiés par des noms de variables uniques :
< request : requête courante
o response : réponse courante
o session : session courante de l'utilisateur
o out : flot de sortie permettant l'écriture sur la réponse (moyennant la méthode print)

3 Exemples
3.1 Exemple 1
< Créer un nouveau projet appelé TP6:
< Ajouter une page jsp nommée exemple1.jsp
Rajouter le code suivant à la page la somme de 2 + 2 est <%= 2+2
3. exemple1.jsp : %>
4. Exécuter la page.

3.2 Exemple 2
12. Rajouter la page exemple2.jsp au projet précédent.
13. Copier les deux bouts de code suivants dans la page et faire l'exécution:

<h1>Affichage avec des expressions:</h1><br>
Protocol : <%= request.getProtocol() %><br>
Scheme : <%= request.getScheme() %><br>
ServerName:<%= request.getServerName() %><br>
ServerPort:<%= request.getServerPort() %><br>
RemoteAddr <%= request.getRemoteAddr() %><br>
RemoteHost<%= request.getRemoteHost() %><br>
Method : <%= request.getMethod() %><br>
<h1>Affichage avec des scriptlets: </h1> <br>
Protocol : <%out.println(request.getProtocol()); %><br>
Scheme : <%out.println(request.getScheme()); %><br>
ServerName<%out.println(request.getServerName()); %><br>
ServerPort<%out.println(request.getServerPort());%><br>
RemoteAddr <%out.println(request.getRemoteAddr());
%><br>
RemoteHost<% out.println(request.getRemoteHost());
%>

3.3 Exemple 3:
Créer une nouvelle page appelée exemple3.jsp contenant le code suivant:

<%!String[] tableau = {"ali","med","salah","ahmed"};

%> <% for(int i=0;i<tableau.length;i++){ %>
<%= tableau[i]%>
<br/>
<%}%>

4.Exercices :
1. Copier les classes Etudiant et GestionEtudiants dans un paquetage nommé mesClasses du
projet courant.
2. Copier le dossier images dans WebContent.
3. Créer la page affichageEtudiants.jsp qui :
a. importe les classes Etudiant, GestionEtudiants et java.util.ArrayList
b. déclare une variable appelée liste de type ArrayList<Etudiant>
18/21
Université Hassan 1er
Faculté des Sciences et Techniques
Département Mathématiques et Informatique
Filière GI : -2019/2020-
c. récupère la liste des étudiants et l'affecte à la variable liste
d. affiche les noms des étudiants
4. Modifier le code de la page pour afficher les étudiants dans un tableau.
5. Modifier le code de la page pour afficher les images dans une nouvelle colonne du tableau.

TP 8 Collaboration JSP‐Servlets
Objectifs
1. Compréhension de la technique de passage de paramètres entre les pages JSP et les Servlets
2. Se familiariser avec les méthodes :
void setAttribute(String attribute, Object
valeur)
Object getAttribute(String attribute)

1 Introduction
Le besoin de passer des paramètres aux pages JSP apparaît lorsqu’on veut afficher du contenu dynamique
provenant de source de données (base de données, fichiers, flux de données personnalisé …). Les servlets se
contentent donc de :

 Récupérer des données des sources.

 Traitement des données.
 Envoi ver s les pages clients pour formatage et affichage.

2 Syntaxe d’envoi de paramètres

L’envoi de paramètre s’effectue par le moyen du couple « clé » et « valeur ». La « clé » servant à identifier le
paramètre envoyé parmi d’autres et la « valeur » représente l’objet envoyé (String, int, int[] …). Ces attributs
sont stockés dans la requête http et sont récupérable par leurs clés.

Exemple d’envoi de paramètres dans une Servlet :

 Envoi de paramètre de type String : request.setAttribute(‘’nom’’,‘’ali’’) ;
 Envoi de paramètre de type int : request.setAttribute(‘’age’’, 18 ) ;
 Envoi de paramètre de type Personne : request.setAttribute(‘’personne’’, new Personne() ) ;

Exemple de récupération de paramètres dans une page JSP:

<% String monNom = (String)request.getAttribute(“nom”);%>
<% int monAge = (int)request.getAttribute(“age”);%>
<% String maPersonne = (Personne)request.getAttribute(“personne”);%>

19/21
Université Hassan 1er
Faculté des Sciences et Techniques
Département Mathématiques et Informatique
Filière GI : -2019/2020-
3 Exercic es
3.1 Exercice 1
Reprendre le code de l’exercice 1 du TP 6 et :

 Dans la Servlet Identification, transférer le login de l’utilisateur connecté dans la requête http et rediriger
vers la jsp « accueil.jsp »
 Afficher la phrase « Bonjour <utilisateur_connecté> dans la page « accueil.jsp »

3.2 Exercice 2
L'objectif de cet exercice est de développer une calculatrice permettant à l'utilisateur de saisir deux opérandes (entiers) et d e
sélectionne r l'opération à effectuer parmi l'addition, la multiplication, la division et la soustraction.
L'application est composée d e:

1. une page jsp appelée saisie.jsp contenant le formulaire de saisie.

2. une servlet nommée Calcul récupérant les opérandes saisis ainsi que l'opération choisie par l' utilisateur.
3. une page jsp appelée resultat.js p affichant le résultat de l'opération et un lien de retour vers la page saisie.jsp.

Travail demandé:
1. écrire le code du formulaire de l a page saisie.jsp contenant (voir les figures des illustrations):
a. Deux champs de saisie nommés operande1 et operande2 dans lesquels l'utilisateur pourra saisir les deux
entiers de l'opération.
b. Une liste déroulante (balise select) nommée opération contenant 4 choix (balise option) correspondant aux
opérations possibles (+, -, / et *).
c. Un bouton d e type submit permettant d'envoyer le contenu du formulaire à la servlet Calcul.
d. Un script js p permettant d'afficher un message d'erreur contenu dans un attribut nommé message reçu dans
l'objet request. L'attribut message est envoyé par la servlet calcul s'il y a eu une erreur dans le calcul précédent
(voir les messages d'erreur dans les illustrations des cas 2 et 3).
2. Ecrire le code de la méthode doGet de la servlet Calcul qui :
a. Récupère la saisie de l'utilisateur
b. Transforme le type des opérandes depuis le type String vers int (voir en annexe).
c. Calcule le résultat selon l'opération choisie par l'utilisateur.
d. Si un des champs des opérandes est vide ou s'il y a division par zéro, la servlet rajoute un message d'erreur dans
un attribut nommé message de l'objet request et renvoie l'utilisateur à la page saisie.jsp (voir les illustrations
des cas 2 et 3).
e. Sinon, si les saisies sont correctes la servlet en oie le résultat à la page resultat.jsp dans un attribut appelé
résultat (voir les figures de l'illustration 1).
3. Écrire le code de la page resultat.jsp permettant d'afficher le résultat déjà envoyé par la servlet Calcul sous le
format o perande1 opération op erande2 = resultat. Par exemple, si l'utilisateur avait saisi les opérandes 3 et
5 dans l e formulaire et choisi l'opération addition, alors la page resultat.jsp affiche 3 + 5 = 8.

Illustrations
Ci-dessous, tous les cas d'utilisation possibles sont illustrés.

Cas d'utilisation 1 : saisies correctes donc passage à la page résultat.jsp

20/21
Université Hassan 1er
Faculté des Sciences et Techniques
Département Mathématiques et Informatique
Filière GI : -2019/2020-
Cas d'utilisation 2 : Division par zéro donc retour à la page saisie.jsp avec un message d''erreur

Cas d'utilisation 3 : Champs vide donc retour à la page saisie.jsp avec un message d'erreur

21/21