er

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

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 :
 Listes à puces
 Tableaux
 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
2. 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

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

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

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

Figure 4 : tableau avec images

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

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>
< 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'>

3/3