Pour mener à bien ce petit exercice, commencez par créer un nouveau projet web nommé jstl_exo1. Référez-vous au premier chapitre de cette partie si vous avez encore des hésitations sur la démarche nécessaire. Configurez bien entendu ce projet en y intégrant la JSTL, afin de pouvoir utiliser nos chères balises dans nos pages JSP !
Une fois ceci fait, créez une première page JSP à la racine de votre application, sous le répertoire WebContent. Je vous en donne ici le contenu complet :
Code : JSP - initForm.jsp
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" /> <title>
Initialisation des données </title>
</head> <body>
<form method="post" action="initProcess.jsp"> <p>
<label for="nom">Entrez ici votre nom de famille :</label><br />
<input type="text" name="nom" id="nom" tabindex="10" /> </p>
<p>
<label for="prenom">Entrez ici votre prénom :</label><br /> <input type="text" name="prenom" id="prenom" tabindex="20" />
</p> <p>
<label for="pays">Dans quel(s) pays avez-vous déjà voyagé ?</label><br />
<select name="pays" id="pays" multiple="multiple"
tabindex="30">
<option value="France">France</option> <option value="Espagne">Espagne</option> <option value="Italie">Italie</option>
<option value="Royaume-uni">Royaume-Uni</option> <option value="Canada">Canada</option>
<option value="Etats-unis">Etats-Unis</option> <option value="Chine">Chine</option>
<option value="Japon">Japon</option> </select>
</p> <p>
<label for="autre">Entrez ici les autres pays que vous avez visités, séparés par une virgule :</label><br />
<textarea id="autre" name="autre" rows="2" cols="40"
tabindex="40" placeholder="Ex: Norvège, Chili, Nouvelle- Zélande"></textarea>
</p> <p>
<input type="submit" value="Valider" /> <input type="reset"
value="Remettre à zéro" /> </p>
</form> </body> </html>
Récapitulons rapidement la fonction de cette page : permettre à l'utilisateur de saisir son nom ; permettre à l'utilisateur de saisir son prénom ;
permettre à l'utilisateur de choisir les pays qu'il a visités parmi une liste de choix par défaut ; permettre à l'utilisateur de saisir d'autres pays qu'il a visité, en les séparant par une virgule. Voici le rendu, rempli avec des données de test :
Formulaire du TP Core.
Votre mission maintenant, c'est d'écrire la page initProcess.jsp qui va se charger de traiter les données saisies dans la page contenant le formulaire.
Nous n'avons pas encore étudié le traitement des formulaires en Java EE, mais ne paniquez pas. Ce que je vous demande de créer ici a pour unique objectif de vous faire manipuler la JSTL. En effet, vous savez que les données envoyées par le client sont accessibles à travers les paramètres de requêtes, avec la JSTL et les EL vous avez tout en main pour mettre en place ce petit exercice !
Ne vous inquiétez pas, nous apprendrons dans la partie suivante de ce cours comment gérer proprement les formulaires dans une application Java EE.
Le sujet est ici volontairement simple, et son utilité nulle. L'objectif est purement didactique ici, l'intérêt est de vous familiariser avec le développement de pages et la manipulations de données en utilisant la JSTL. Ne vous intéressez par conséquent pas aux détails de cette première page initForm.jsp, elle n'est là que pour servir de base à notre exercice.
Pour en revenir à l'exercice, je ne vous demande ici rien de bien compliqué. La page devra simplement afficher : 1. une liste récapitulant le nom de chaque champ du formulaire et les informations qui y ont été saisies ; 2. les nom et prénom saisis par l'utilisateur ;
3. une liste des pays visités par l'utilisateur.
Prenez le temps de chercher et de réfléchir, et on se retrouve ensuite pour la correction !
Correction
Ne vous jetez pas sur la correction sans chercher par vous-mêmes : cet exercice n'aurait alors plus aucun intérêt. Pour ceux d'entre vous qui peinent à voir par où partir, ou comment agencer tout cela, voilà en exemple le squelette de la page que j'ai réalisée, contenant seulement les commentaires expliquant les traitements à effectuer :
Secret (cliquez pour afficher)
Code : JSP
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>Traitement des données</title> </head>
<body> <p>
<b>Vous avez renseigné les informations suivantes :</b> </p>
<%-- Parcourt chaque paramètre de la requête --%> <%-- Affiche le nom de chaque paramètre. --%> <%-- Parcourt la liste des valeurs de chaque paramètre. --%>
<%-- Affiche chacune des valeurs --%> <p>
<b>Vous vous nommez :</b> </p>
<p>
<%-- Affiche les valeurs des paramètres nom et prenom --%> </p>
<p>
<b>Vous avez visité les pays suivants :</b> </p>
<p>
<%-- Teste l'existence du parametre pays. S'il existe on le traite,
si non on affiche un message par défaut.--%>
<%-- Teste l'existence du parametre autre. Si des données existent on les traite,
si non on affiche un message par défaut.--%> </p>
</body> </html>
Si vous étiez perdus, avec cette ébauche vous devriez avoir une meilleure idée de ce que j'attends de vous. Prenez votre temps, et n'hésitez pas à relire les chapitres précédents pour vérifier les points qui vous semblent flous !
Voici finalement la page que j'ai écrite. Comme je vous l'ai signalé plus tôt, ce n'est pas LA solution, c'est simplement une des manières de réaliser ce simple traitement :
Secret (cliquez pour afficher)
Code : JSP - initProcess.jsp
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>Traitement des données</title> </head>
<body> <p>
<b>Vous avez renseigné les informations suivantes :</b> </p>
<%-- Parcourt l'objet implicite paramValues, qui souvenez-vous est une Map,
pour traiter chaque paramètre de la requête --%> <c:forEach var="parametre" items="${ paramValues }"> <ul>
<%-- Affiche la clé de la Map paramValues,
qui correspond concrètement au nom du paramètre. --%> <li><b><c:out value="${ parametre.key }"/></b> :</li> <%-- Parcourt le tableau de String[] associé à la clé traitée,
qui correspond à la liste de ses valeurs. --%>
<c:forEach var="value" items="${ parametre.value }"> <%-- Affiche chacune des valeurs pour la clé donnée --%>
<c:out value="${ value }"/> </c:forEach>
</ul> </c:forEach> <p>
<b>Vous vous nommez :</b> </p>
<p>
<%-- Affiche les valeurs des paramètres nom et prenom en y accédant directement via l'objet implicite (une Map) param. On sait en effet qu'il n'y a qu'une valeur associée à chacun de ces 2 paramètres,
pas besoin d'utiliser paramValues ! --%>
<c:out value="${ param.nom }"/> <c:out value="${ param.prenom }"/>
</p> <p>
<b>Vous avez visité les pays suivants :</b> </p>
<p>
<%-- Teste l'existence du parametre pays. S'il existe on le traite,
si non on affiche un message par défaut.--%> <c:choose>
<c:when test="${ !empty paramValues.pays }">
<%-- Parcourt le tableau de valeurs associées au paramètre pays de la requête,
en utilisant l'objet implicite paramValues. En effet, c'est nécessaire ici puisque
le select permet de renvoyer plusieurs valeurs pour le seul paramètre nommé pays. --%>
<c:forEach var="pays" items="${ paramValues.pays }"> <c:out value="${ pays }"/><br/>
</c:forEach> </c:when> <c:otherwise>
Vous n' avez pas visité de pays parmi la liste proposée.<br/> </c:otherwise>
</c:choose>
<%-- Teste l'existence du parametre autre. Si des données existent on les traite,
<c:choose>
<c:when test="${ !empty param.autre }">
<%-- Parcourt les valeurs associées au paramètre autre de la requête,
en utilisant l'objet implicite param. En effet, toutes les valeurs sont ici concaténées
et transmises dans une seule chaîne de caractères, qu'on parcourt via la boucle forTokens ! --%>
<c:forTokens var="pays" items="${ param.autre }" delims=","> <c:out value="${ pays }"/><br/>
</c:forTokens> </c:when> <c:otherwise>
Vous n' avez pas visité d'autre pays.<br/> </c:otherwise>
</c:choose> </p> </body> </html>
Et voici le rendu avec les données de test :
Rendu du formulaire du TP Core.
J'ai utilisé ici des tests conditionnels et différentes boucles afin de vous faire pratiquer, et mis en jeu différents objets implicites. J'aurais par exemple très bien pu mettre en jeu des variables de scope pour stocker les informations récupérées depuis la requête. Si vous n'êtes pas parvenus à réaliser ce simple traitement de formulaire, vous devez identifier les points qui vous ont posé problème et revoir le cours plus attentivement !
Je n'irai pour le moment pas plus loin dans la pratique. De nombreuses balises ne sont pas intervenues dans cet exercice : ne vous inquiétez pas, vous aurez bien assez tôt l'occasion d'appliquer de manière plus exhaustive ce que vous avez découvert, dans les prochaines parties du cours. Soyez patients !
En attendant, n'hésitez pas à travailler davantage, à tenter de développer d'autres fonctionnalités de votre choix. Vous serez alors prêts pour étudier la bibliothèque xml de la JSTL, que je vous présente dans le chapitre suivant !