Application Web de gestion des sports

Il s'agit dans ce TP de mettre en œuvre une application Web standard, de type CRUD (Create/Read/Update/Delete) en reprenant la gestion des sports des précédents TP.

Création d'un projet Web

Téléchargement d'Apache Tomcat

Avant de commencer le TP, vous allez télécharger Apache Tomcat. Il s'agit d'un serveur HTTP capable d'exécuter du code Java. Il existe une version plus complète compatible avec tout Java/Jakarta EE, Apache Geronimo, mais la version Tomcat suffit pour le TP.

Téléchargez Apache Tomcat dans sa dernière version 10.0.27 sur cette page : https://archive.apache.org/dist/tomcat/tomcat-10/v10.0.27/bin/ . Pour Windows, téléchargez le fichier "apache-tomcat-10.0.27-windows-x64.zip". Décompressez cette archive quelque part sur votre disque.

La version d'Eclipse installée sur les machines des salles de TP est un peu ancienne et on ne peut pas prendre un Tomcat de version supérieure à 10.0.X. Les dernières versions stables sont 10.1.X que vous trouverez sur cette page : https://tomcat.apache.org/download-10.cgi

Création d'un projet Web sous Eclipse

Comme pour le TP précédent avec JPA, il y a deux solutions : soit utiliser Maven pour gérer les dépendances, soit passer par un projet classique en rajoutant les librairies (fichiers .jar) à la main. Utilisez Maven si cela avait bien fonctionné pour le précédent TP, sinon utilisez l'autre version.

Le début de la création du projet est commun :

Créez un nouveau projet Web dynamique : File -> New -> New Dynamic Web Projet (que vous trouverez dans la section Web en cliquant sur Others... si vous ne le voyez pas directement).
Dans la fenêtre qui s'ouvre, vous devez préciser le serveur Apache dans la liste "Target Runtime". Cliquez sur New Runtime..., sélectionnez Apache Tomcat v10.0 dans la liste puis Next. En cliquant sur Browse..., sélectionnez le répertoire où vous avez décompressé l'archive d'Apache Tomcat puis cliquez sur Finish.
De retour sur la fenêtre précédente, cliquez plusieurs fois sur Next et sur la dernière fenêtre, cochez la case Generate web.xml deployment descriptor, puis cliquez sur sur Finish.
Sélectionnez le projet dans l'explorateur d'Eclipse, faites un clic droit : Configure -> Convert to JPA project .... Dans la fenête qui suit, dans la liste JPA implementation/Type, choisissez Disable Library Configuration et cliquez sur Finish.
Faites un File -> New -> HTML File pour créer un fichier HTML que vous appelez "index.html". Mettez un texte entre les balises <body>. Ce fichier est celui qui est affiché au lancement de votre serveur Web.
Sélectionnez votre projet, faites un clic droit : Run As -> Run On Server. Dans la liste, sélectionnez "Apache Tomcat v10.0 Server" et cliquez sur Finish. Au bout de quelques secondes, normalement le navigateur Web par défaut est lancé et affiche le contenu de votre page "index.html".

Quelques explications sur l'arborescence du projet :

Il y a un répertoire de sources Java src/main/java. C'est là qu'est placé tout le code Java de votre application Web : les Servlets et toutes les autres classes comme celles permettant l'accès en JPA à la BDD ou le code métier.
Dans le répertoire src/main/java/META-INF, vous trouvez le fichier "persistence.xml" qui est le fichier de configuration JPA comme dans le TP précédent.
Plus bas dans l'arborescence, vous avez un nouvel affichage du répertoire "src". Quand vous l'ouvrez, vous avez une arborescence src/main/java/webapp. C'est dans ce répertoire que sont placés les fichiers HTML, JSP et feuilles de style CSS.
Dans ce répertoire il y a également un répertoire WEB-INF qui contient un fichier "web.xml" qui décrit la liste des Servlets de l'application Web (avec l'URL associée à la classe Java de chaque Servlet) ainsi qu'un répertoire "lib" qui contiendra les librairies que l'on veut déployer sur l'application Web (facultatif si on passe par Maven).

Il faut maintenant rajouter les librairies Java pour gérer l'accès JPA comme dans le premier TP ainsi que les librairies de composants Web. C'est là où vous choisissez entre la version Maven ou l'ajout à la main des fichiers JAR.

Version 1 : utilisation de Maven

Faites un clic droit sur le projet : Configure -> Convert to Maven Project et remplissez les champs comme dans le TP sur JPA. Notez au passage que Maven vous propose le type de package "war" : il s'agit d'une Web ARchive qui est le fichier de déploiement d'une application Web en Java.

Dans le fichier "pom.xml", rajoutez les dépendances du TP sur JPA et ensuite celles-ci :

<dependency>
<groupId>jakarta.servlet.jsp.jstl</groupId>
<artifactId>jakarta.servlet.jsp.jstl-api</artifactId>
<version>3.0.0</version>
</dependency>
<dependency>
<groupId>org.glassfish.web</groupId>
<artifactId>jakarta.servlet.jsp.jstl</artifactId>
<version>3.0.0</version>
</dependency>
<dependency>
<groupId>org.apache.taglibs</groupId>
<artifactId>taglibs-standard-jstlel</artifactId>
<version>1.2.5</version>
</dependency>

Version 2 : ajout des librairies à la main

Décompressez l'archive jars-Web.zip et créez une librairie (nommée par exemple "Web-JSTL") dans votre projet comme dans le TP sur JPA.

En addition de la création de cette librairie, il faut explicitement rajouter les fichiers JAR dans le répertoire src/main/java/webapp/WEB-INF/lib. Pour cela, ouvrez un explorateur de fichiers Windows, placez-vous dans le répertoire où sont les JAR, sélectionnez les tous et faites un copier (Ctrl-C). Ensuite revenez sous Eclipse, sélectionnez le répertoire lib dans l'arborescence et faites un coller (Paste après un clic droit ou Ctrl-V) pour y copier les fichiers. Placez également les fichiers JAR de l'archive du TP sur JPA.

Application de test JPA/Web

Si tout s'est bien passé, vous avez un projet Web fonctionnel ne faisant rien et dont il faut encore configurer l'accès JPA par rapport à votre base de données et ensuite vérifier avec du code Java (Servlet/JSP avec du JSTL) que l'on arrive à générer des pages HTML avec du contenu obtenu à partir de la base de données.

Pour configurer l'accès JPA, éditez le fichier "persistence.xml" et recopiez dedans le contenu du même fichier de votre projet JPA du précédent TP. Créez également un package "donnees" (ou "data" si vous n'aviez pas fini le précédent TP sur le passage des annotations des classes d'un package à l'autre) et recopiez-y les POJO de votre projet JPA.
Assurez-vous d'avoir des sportifs dans votre base de données avec des liens vers des disciplines dans la table "pratique", sinon, rajoutez-en.
Créez une Servlet en faisait New -> Servlet. Dans la première fenêtre, mettez "SportServlet" comme nom de classe puis cliquez sur Next. Dans le champ Name, mettez "Sports". Vous devez voir le texte "/Sports" dans la zone de texte URL mappings:. Cliquez sur Finish.
Editez la classe Java créée et recopiez-y le contenu du fichier SportServlet.java. Modifiez le code pour notamment faire les bons import Java de vos POJO (ligne 14) ainsi que pour utiliser le bon nom d'unité de persistance (ligne 21).
Copiez le fichier afficheSportifs.jsp dans le répertoire webapp. Modifiez le fichier pour que les noms des attributs correspondent au contenu de vos POJO :
- Ligne 20 et 30 : vérifiez le nom de la collection de disciplines dans un sportif.
- Ligne 31 : vérifiez le nom de l'attribut de type Sport dans une discipline.
Pour sauvegarder le fichier "afficheSportifs.jsp", faites un clic-droit sur le lien puis Sauvegarder sous. Ne l'ouvrez pas en cliquant dessus pour le sauvegarder ensuite, votre navigateur pourrait l'ouvrir comme une page HTML et en modifier le contenu à la sauvegarde ensuite.

Assurez-vous également que les getters et les setters ont un nom qui est cohérent avec celui des attributs dans vos POJO. Quand JSTL accède à un attribut "sport" dans une discipline, en pratique, il appelle la méthode "getSport()". Si vous aviez modifié vos POJO au niveau des noms des attributs mais sans modifier le nom des getters associés, vous aurez une erreur avec JSTL.
Editez le fichier "index.html" pour y placer le code HTML suivant :

<p><a href="Sports?operation=listeSportif">Afficher tous les sportifs</a></p>
Lancez votre application Web via un clic droit : Run -> Run on Server, sélectionnez le serveur Apache Tomcat 10 dans la liste et cliquez sur Finish. Dans la page HTML qui s'affiche, cliquez sur le lien "Afficher tous les sportifs" et au bout de quelques secondes, vous aurez tous les sportifs de la base avec leurs disciplines affichés comme dans le dernier transparent du cours sur les Servlet. Sinon, corrigez votre code.

Si tout fonctionne, au prochain lancement du serveur, cocher la case Always use this server when running this project pour ne plus voir apparaitre la fenêtre de sélection du serveur HTTP à utiliser.

Travail à réaliser

Il s'agit maintenant de rajouter des pages HTML, JSP et Servlets permettant de lire et de modifier le contenu de la base de données :

Créez une page HTML qui appelera une Servlet pour créer un nouveau sport. La page contiendra un formulaire avec une simple entrée de texte pour le nom du sport.
Créez une page HTML qui appelera une Servlet pour créer un nouveau sportif. La page contiendra un formulaire avec plusieurs champs à remplir.
Créez une page JSP qui affichera un formulaire de création de disciplines. Une liste déroulante contiendra les sports déjà existants. La page enverra le formulaire vers une Servlet qui créera la discipline avec le sport sélectionné.
Créez une page JSP qui affiche deux listes déroulantes : celle de toutes les disciplines et celle de tous les sportifs. Un bouton "Pratique" enverra une requête à une Servlet qui liera la discipline sélectionnée dans sa liste avec le sportif sélectionné dans la sienne.
En bonus, vous pouvez modifiez vos implémentations pour utiliser des requêtes AJAX dans les pages HTML pour éviter de recharger les pages HTML à chaque requête ou pour vérifier que des données n'existent pas déjà (par exemple, vérifier la non existence d'un sport avant de valider le formulaire de création d'un sport).

Pour réaliser les accès aux données, vous pouvez réutiliser votre code du package sportsDAO du précédent projet. Recopiez le dans votre projet Web. Créez d'autres classes avec des méthodes pour faire le lien entre les Servlets/JSP et la BDD pour éviter de mettre trop de code Java notamment directement dans les pages JSP.

Eric Cariou, dernière modification : 26/12/23