Voici le code HTML de base du formulaire d'inscription que nous allons utiliser tout au long de cette partie : Code : JSP - /WEB-INF/inscription.jsp
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" /> <title>Inscription</title>
<link type="text/css" rel="stylesheet" href="form.css" /> </head>
<body>
<form method="post" action="inscription"> <fieldset>
<legend>Inscription</legend>
<p>Vous pouvez vous inscrire via ce formulaire.</p> <label for="email">Adresse email <span
class="requis">*</span></label>
<input type="text" id="email" name="email" value=""
size="20" maxlength="60" /> <br />
<label for="motdepasse">Mot de passe <span
class="requis">*</span></label>
<input type="password" id="motdepasse"
name="motdepasse" value="" size="20" maxlength="20" /> <br />
<label for="confirmation">Confirmation du mot de passe <span class="requis">*</span></label>
<input type="password" id="confirmation"
name="confirmation" value="" size="20" maxlength="20" /> <br />
<label for="nom">Nom d'utilisateur</label> <input type="text" id="nom" name="nom" value=""
size="20" maxlength="20" /> <br />
<input type="submit" value="Inscription"
class="sansLabel" /> <br /> </fieldset> </form> </body> </html>
Et voici le code de la feuille de style CSS accompagnant ce formulaire : Code : CSS - /form.css
/* Général --- --- */
body, p, legend, label, input {
font: normal 8pt verdana, helvetica, sans-serif; } fieldset { padding: 10px; border: 1px #0568CD solid; } legend { font-weight: bold; color: #0568CD; } /* Forms --- --- */
form label { float: left; width: 200px; margin: 3px 0px 0px 0px; } form input { margin: 3px 3px 0px 0px; border: 1px #999 solid; } form input.sansLabel { margin-left: 200px; } form .requis { color: #c00; }
Contrairement à la page JSP, la feuille de style ne doit pas être placée sous le répertoire /WEB-INF ! Eh oui, vous devez vous souvenir que ce répertoire a la particularité de cacher ce qu'il contient à l'extérieur :
dans le cas d'une page JSP c'est pratique, cela rend les pages inaccessibles directement depuis leur URL et nous permet de forcer le passage par une servlet.
dans le cas de notre feuille CSS par contre, c'est une autre histoire ! Car ce que vous ne savez peut-être pas encore, c'est qu'en réalité lorsque vous accédez à une page web sur laquelle est attachée une feuille de style, votre navigateur va dans les coulisses envoyer une requête GET au serveur pour récupérer silencieusement cette feuille, en se basant sur l'URL précisée dans la balise <link href="..." />. Et donc fatalement, si vous placez le fichier sous /WEB-INF la requête va échouer, puisque le fichier sera caché du public et ne sera pas accessible par une URL.
De toute manière, dans la très grande majorité des cas le contenu d'une feuille CSS est fixe, il ne dépend pas de codes dynamiques et ne nécessite pas de pré-traitements depuis une servlet comme nous le faisons jusqu'à présent pour nos pages JSP. Nous pouvons donc rendre nos fichiers CSS accessibles directement aux navigateurs en les plaçant dans un répertoire public de l'application.
En l'occurrence, ici je l'ai placée directement à la racine de notre application, désignée par le répertoire WebContent dans Eclipse. Retenez donc bien que tous les éléments fixes utilisés par vos pages JSP, comme les feuilles de style CSS, les feuilles de scripts Javascript ou encore les images, doivent être placés dans un répertoire public, et donc pas sous /WEB-INF. Avant de mettre en place la servlet, penchons-nous un instant sur les deux attributs de la balise <form>.
La méthode
Il est possible d'envoyer les données d'un formulaire par deux méthodes différentes :
get : les données transiteront par l'URL via des paramètres dans une requête HTTP GET. Je vous l'ai déjà expliqué, en raison des limitations de la taille d'une URL cette méthode est peu utilisée pour l'envoi de données.
post : les données ne transiteront cette fois pas par l'URL mais dans le corps d'une requête HTTP POST, l'utilisateur ne les verra donc pas dans la barre d'adresse de son navigateur.
Malgré leur invisibilité apparente, les données envoyées via la méthode POST restent aisément accessibles, et ne sont donc pas plus sécurisées qu'avec la méthode GET : nous devrons donc toujours vérifier la présence et la validité des paramètres avant de les utiliser. La règle d'or à suivre lorsqu'on développe une application web, c'est de ne jamais faire confiance à l'utilisateur.
Voilà donc pourquoi nous utiliserons la plupart du temps la méthode POST pour envoyer les données de nos formulaires. En l'occurrence, nous avons bien précisé <form method="post" ... > dans le code de notre formulaire.
L'attribut action de la balise <form> permet de définir la page à laquelle seront envoyées les données du formulaire. Puisque nous suivons le modèle MVC, vous devez savoir que l'étape suivant l'envoi de données par l'utilisateur est le contrôle.
Autrement dit, direction la servlet ! C'est donc l'URL permettant de joindre cette servlet, c'est-à-dire l'URL que vous allez spécifier dans sa déclaration dans le fichier web.xml, qui doit être précisée dans le champ action du formulaire. En l'occurrence, nous avons précisé <form ... action="inscription"> dans le code de notre formulaire, nous devrons donc associer l'URL /inscription à notre servlet dans le mapping du fichier web.xml.
Lançons-nous maintenant, et créons une servlet qui s'occupera de récupérer les données envoyées et de les valider.
La servlet
Voici le code de la servlet accompagnant la JSP qui affiche le formulaire : Code : Java - com.sdzee.servlets.Inscription
package com.sdzee.servlets; import java.io.IOException;
import javax.servlet.ServletException; import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class Inscription extends HttpServlet {
public static final String VUE = "/WEB-INF/inscription.jsp";
public void doGet( HttpServletRequest request, HttpServletResponse response ) throws ServletException, IOException{
/* Affichage de la page d'inscription */
this.getServletContext().getRequestDispatcher( VUE ).forward( request, response );
} }
Pour le moment, elle se contente d'afficher notre page JSP à l'utilisateur lorsqu'elle reçoit une requête GET de sa part. Bientôt, elle sera également capable de gérer la réception d'une requête POST, lorsque l'utilisateur enverra les données de son formulaire ! Avant d'attaquer le traitement des données, voici enfin la configuration de notre servlet dans le fichier web.xml :
Code : XML - /WEB-INF/web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app> <servlet> <servlet-name>Inscription</servlet-name> <servlet-class>com.sdzee.servlets.Inscription</servlet-class> </servlet> <servlet-mapping> <servlet-name>Inscription</servlet-name> <url-pattern>/inscription</url-pattern> </servlet-mapping> </web-app>
Souvenez-vous, l'adresse contenue dans le champ <url-pattern> est relative au contexte de l'application. Puisque nous avons nommé le contexte de notre projet pro, pour accéder à la JSP affichant le formulaire d'inscription il faut appeler l'URL suivante :
Code : URL
Vous devez si tout se passe bien visualiser le formulaire ci-dessous dans votre navigateur :
Formulaire d'inscription
Et voici sous forme d'un schéma ce que nous venons de réaliser :