Exemples de programmes JSP : formulaire d'inscription et de connexion

⚡ Résumé intelligent

Les exemples de programmes JSP présentés ici construisent trois modules : un formulaire d’inscription, un formulaire de connexion et de déconnexion, et une page de traitement de formulaire. Chacun relie une vue JSP à un contrôleur de servlet afin que la séparation MVC reste visible pour les débutants.

(I.e. Flux d'inscription : Register_1.jsp collecte six champs et les envoie au servlet guru_register, qui redirige vers une page de succès uniquement lorsque tous les champs sont remplis.
☑️ Connexion et déconnexion : Register_3.jsp envoie les identifiants à guru_login ; Register_4.jsp accueille l'utilisateur et le redirige vers la page de connexion pour se déconnecter.
✅ Rôles MVC : Les pages JSP font office de vue, le servlet de contrôleur, et RequestDispatcher déplace la requête entre eux.
🧪 Traitement des formulaires : Les méthodes getParameter(), getParameterValues(), getParameterNames() et getInputStream() lisent les données soumises dans une JSP ou une servlet.
️ GET versus POST : GET ajoute des valeurs encodées à la URL et sa longueur est limitée ; la méthode POST transmet des valeurs dans le corps de la requête, ce qui convient aux mots de passe.
⚠️ Note de version : Ces listes importent javax.servlet, elles fonctionnent donc sur Tomcat 9 ou antérieur ; Tomcat 10 et versions ultérieures nécessitent les packages jakarta.servlet.

Ces exemples pratiques montrent comment développer des programmes d'exemple avec JSP et comment implémenter l'architecture MVC autour de ces programmes. Trois modules sont construits successivement :

Formulaire d'inscription
Formulaire de connexion et de déconnexion
Formulaire JSP

Comment créer un formulaire d'inscription en JSP

Dans un formulaire d'inscription, nous avons un formulaire à remplir avec toutes les informations, notamment le nom, le nom d'utilisateur, le mot de passe, l'adresse, le numéro de téléphone, etc.

Ce formulaire nous permet de nous inscrire à l'application. Il recueille toutes nos informations et les stocke dans un système. base de données ou cache.

Dans cet exemple, nous allons prendre le «Guru « Formulaire d’inscription », qui comporte les champs suivants :

Prénom
Nom de famille
Nom d'utilisateur ( Ou : Nom d'épouse )
Mot de passe
Adresse
Téléphone

Une fois tous ces détails renseignés, nous disposons d'un bouton « Soumettre » ; en cliquant sur ce bouton, toutes les informations sont envoyées au servlet.

Exemple 1 : Register_1.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Guru Registration Form</title>
</head>
<body>
<h1>Guru Register Form</h1>
<form action="guru_register" method="post">
			<table style="with: 50%">
				<tr>
					<td>First Name</td>
					<td><input type="text" name="first_name" /></td>
				</tr>
				<tr>
					<td>Last Name</td>
					<td><input type="text" name="last_name" /></td>
				</tr>
				<tr>
					<td>UserName</td>
					<td><input type="text" name="username" /></td>
				</tr>
					<tr>
					<td>Password</td>
					<td><input type="password" name="password" /></td>
				</tr>
				<tr>
					<td>Address</td>
					<td><input type="text" name="address" /></td>
				</tr>
				<tr>
					<td>Contact No</td>
					<td><input type="text" name="contact" /></td>
				</tr></table>
			<input type="submit" value="Submit" /></form>
</body>
</html>

Explication du code :

Code Ligne 11: Nous utilisons ici un formulaire qui comporte une action, à savoir la servlet à laquelle la requête sera soumise ; cette servlet se nomme guru_register.java. La requête sera traitée via la méthode POST.

Code Ligne 14-16: Ici, le type d'entrée est du texte et le nom est first_name.

Code Ligne 18-20: Ici, le type d'entrée est du texte et le nom est last_name.

Code Ligne 22-24: Ici, le type d'entrée est du texte et le nom est « username ».

Code Ligne 26-28: Ici, nous prenons comme type d'entrée « mot de passe » (cela masque le mot de passe pendant sa saisie) et comme nom « mot de passe ».

Code Ligne 30-32: Ici, le type d'entrée est du texte et le nom est une adresse.

Code Ligne 34-36: Ici, le type d'entrée est du texte et le nom est un contact.

Code Ligne 37: Nous utilisons ici un bouton de type « Envoyer » dont la valeur est également « Envoyer ». En cliquant sur ce bouton, l'action est redirigée vers le servlet guru_register correspondant, où toutes les valeurs des paramètres sont transmises dans la requête.

À noter: l'attribut de table dans Code La ligne 12 se lit style="with: 50%"La propriété CSS correcte est width, la liste est donc reproduite exactement telle que publiée, mais le tableau ne sera pas dimensionné tant que cette faute de frappe n'aura pas été corrigée dans votre propre copie.

Exemple 2: Guru_register.java

package demotest;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class guru_register
 */
public class guru_register extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    
     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		String first_name = request.getParameter("first_name");
		String last_name = request.getParameter("last_name");
		String username = request.getParameter("username");
		String password = request.getParameter("password");
		String address = request.getParameter("address");
		String contact = request.getParameter("contact");
		
		if(first_name.isEmpty() || last_name.isEmpty() || username.isEmpty() || 
				password.isEmpty() || address.isEmpty() || contact.isEmpty())
		{
			RequestDispatcher req = request.getRequestDispatcher("register_1.jsp");
			req.include(request, response);
		}
		else
		{
			RequestDispatcher req = request.getRequestDispatcher("register_2.jsp");
			req.forward(request, response);
		}
	}

}

Explication du code :

Code Ligne 14: Nous définissons ici le servlet guru_register, qui étend HttpServlet.

Code Ligne 18: Il s'agit de la méthode doPost(), qui est appelée lorsque nous spécifions POST comme attribut de méthode dans le formulaire JSP ci-dessus.

Code Ligne 20-25: Ici, nous récupérons les valeurs de la requête, à savoir first_name, last_name, username, password, address et contact, en utilisant request.getParameter.

Code Ligne 27-32: Nous utilisons ici une condition « si » pour vérifier si l'un des paramètres récupérés de la requête est vide. Si c'est le cas, le contrôle entre dans cette condition (first_name.isEmpty() || last_name.isEmpty() || username.isEmpty() || password.isEmpty() || address.isEmpty() || contact.isEmpty()) et nous récupérons un objet RequestDispatcher à partir de l'objet requête, qui renvoie la requête à register_1.jsp. Nous incluons également ici les objets requête et réponse.

Code Ligne 33-37: Cette branche s'exécute lorsqu'aucun paramètre n'est vide. Nous récupérons un objet RequestDispatcher à partir de l'objet requête, qui transmet la requête à register_2.jsp. Ici, nous transmettons les objets requête et réponse.

La différence entre les deux branches est importante : include() exécute register_1.jsp et renvoie le contrôle au servlet, tandis que forward() La requête est transmise à register_2.jsp et ne revient pas.

Exemple 3 : Register_2.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Guru Success Page</title>
</head>
<body>
           <a><b>Welcome User!!!!</b></a>
</body>
</html>

Explication du code :

Code Ligne 10: Nous affichons ici le message de bienvenue. Cette page JSP est appelée lorsque tous les paramètres sont renseignés.

Lorsque vous exécutez le code ci-dessus, vous obtenez le résultat suivant.

Sortie :

La page d'inscription affiche les six champs étiquetés avec un seul bouton « Soumettre », comme indiqué ci-dessous.

Une fois tous les champs remplis et après avoir cliqué sur « Soumettre », guru_register redirige vers register_2.jsp et la page de confirmation apparaît.

Lorsque nous cliquons sur register_1.jsp, un formulaire s'affiche avec les champs prénom, nom, nom d'utilisateur, mot de passe, adresse et coordonnées. Une fois tous les champs remplis et le bouton « Envoyer » cliqué, le message « Bienvenue ! » apparaît.

Comment créer un formulaire de connexion et de déconnexion en JSP

Comme pour le formulaire d'inscription, nous allons maintenant créer un formulaire de connexion et de déconnexion.

Dans cet exemple, nous avons utilisé un formulaire de connexion comportant deux champs, « nom d'utilisateur » et « mot de passe », et un bouton de soumission.

Lorsque nous cliquons sur le bouton « Envoyer », nous recevons un message de bienvenue avec un bouton de déconnexion.

Lorsque nous cliquons sur le bouton de déconnexion, nous revenons au formulaire de connexion.

Exemple 1 : Register_3.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Guru Login Form</title>
</head>
<body>
<form action="guru_login" method="post">
		<table style="with: 50%">

			<tr>
				<td>UserName</td>
				<td><input type="text" name="username" /></td>
			</tr>
				<tr>
				<td>Password</td>
				<td><input type="password" name="password" /></td>
			</tr>
		</table>
		<input type="submit" value="Login" /></form>
</body>
</html>

Explication du code :

Code Ligne 10: Nous utilisons ici un formulaire dont l'action est la servlet guru_login.java. La méthode de transmission des données est POST.

Code Ligne 13-16: Nous utilisons ici un champ de saisie « nom d’utilisateur », qui est de type texte.

Code Ligne 17-20: Nous utilisons ici un champ de saisie « mot de passe », qui est de type mot de passe.

Code Ligne 22: Nous utilisons ici un bouton « Soumettre » dont la valeur est « Connexion ». En cliquant dessus, le contrôle est transféré au servlet guru_login, où les deux champs sont lus à l'aide de l'objet requête.

Exemple 2: Guru_login.java (servlet)

package demotest;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class guru_login
 */
public class guru_login extends HttpServlet {

    public guru_login() {
        super();
        // TODO Auto-generated constructor stub
    }

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		String username = request.getParameter("username");
		String password = request.getParameter("password");
		if(username.isEmpty() || password.isEmpty() )
		{
			RequestDispatcher req = request.getRequestDispatcher("register_3.jsp");
			req.include(request, response);
		}
		else
		{
			RequestDispatcher req = request.getRequestDispatcher("register_4.jsp");
			req.forward(request, response);
		}
	}

}

Explication du code :

Code Ligne 5-9: Nous importons ici les classes nécessaires dans le code.

Code Ligne 14: Nous déclarons ici le servlet guru_login, qui étend HttpServlet.

Code Ligne 21: Nous utilisons ici la méthode doPost(), car le formulaire utilise la méthode POST.

Code Ligne 23-24: Ici, nous lisons les paramètres à l'aide de l'objet requête, c'est-à-dire le nom d'utilisateur et le mot de passe.

Code Ligne 25-29: Nous utilisons ainsi une condition « si » qui vérifie si le nom d'utilisateur et le mot de passe sont vides. Si l'un des deux est vide, nous obtenons un objet RequestDispatcher qui renvoie le contrôle à register_3.jsp avec les objets de requête et de réponse.

Code Ligne 30-34: Cette branche s'exécute si les deux valeurs ne sont pas vides ; elle transmet ensuite la requête à register_4.jsp avec les objets requête et réponse.

Exemple 3 : Register_4.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Guru Logged In</title>
</head>
<body>
	<table style="with: 50%">
	<tr><td>
	<% String username = request.getParameter("username"); %>
<a>Welcome   <% out.println(username); %> User!!!! You have logged in.</a></td></tr>
<tr></tr><tr><td></td><td></td><td><a href="register_3.jsp"><b>Logout</b></a></td></tr>
</table>
</body>
</html>

Explication du code :

Code Ligne 12: Ici, nous récupérons le paramètre « username » de l’objet requête et le stockons dans l’objet chaîne de caractères username. Cela fonctionne car la fonction forward() conserve intactes la requête d’origine, et donc ses paramètres.

Code Ligne 13: Ici, nous avons un message de bienvenue avec le nom d'utilisateur.

Code Ligne 14: Voici le lien de déconnexion, qui renvoie l'utilisateur à register_3.jsp.

Lorsque vous exécutez le code ci-dessus, vous obtenez le résultat suivant.

Sortie :

L'ouverture du fichier register_3.jsp affiche les deux champs d'identification et un bouton de connexion.

Après avoir cliqué sur le bouton Connexion, vous recevrez le message ci-dessous ainsi qu'un lien Déconnexion.

Cliquer sur le lien « Déconnexion » vous ramène à la page de connexion affichée ici.

À noter: Cet exemple ne compare que les valeurs vides ; par conséquent, tout nom d’utilisateur non vide est accepté. En production, l’authentification doit être vérifiée auprès d’un système de stockage de données et les mots de passe doivent être hachés, jamais stockés en clair.

Traitement du formulaire JSP à l'aide de getParameter()

Les formulaires sont la méthode courante de collecte de données pour le traitement web. Il faut envoyer des informations au serveur web, puis les récupérer côté serveur.

Il existe deux méthodes couramment utilisées pour envoyer et récupérer des informations au serveur Web.

Méthode GET :

Il s'agit de la méthode par défaut pour transmettre les informations du navigateur au serveur Web.
Il envoie les informations encodées ajoutées à la page URL, séparés par un caractère ?.
Il existe également une limite de taille ; la recommandation classique est d’environ 1024 caractères par requête, bien que la limite réelle soit fixée par le navigateur et le serveur plutôt que par la spécification HTTP.
Il convient d'éviter d'envoyer des mots de passe et des informations sensibles via la méthode GET.

Méthode POST :

La méthode POST est la méthode la plus fiable pour envoyer des informations au serveur.
Il envoie les informations sous forme de corps de message séparé plutôt que dans la barre d'adresse.
Parce que les valeurs n'apparaissent jamais après le ? dans le URLElles ne sont pas stockées dans l'historique du navigateur ni dans les journaux d'accès au serveur.
Il est couramment utilisé pour transmettre des informations sensibles.

JSP gère le traitement des données de formulaire à l'aide des méthodes suivantes :

getParameter() : utilisé pour obtenir la valeur d'un seul paramètre de formulaire.
getParameterValues() : utilisé pour renvoyer les multiples valeurs d'un paramètre.
getParameterNames() : utilisé pour obtenir les noms de tous les paramètres.
getInputStream() : utilisé pour lire les données binaires envoyées par le client.

Exemple :

Dans cet exemple, nous avons utilisé un formulaire comportant deux champs, « nom d’utilisateur » et « mot de passe », et un bouton de soumission.

Action_form.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Guru Form</title>
</head>
<body>
<form action="action_form_process.jsp" method="GET">
UserName: <input type="text" name="username">
<br />
Password: <input type="text" name="password" />
<input type="submit" value="Submit" />
</form>
</body>
</html>

Action_form_process.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>

<h1>Form Processing</h1>

<p><b>Welcome User:</b>
   <%= request.getParameter("username")%>
</p>

</body>
</html>

Explication du code : Action_form.jsp

Code Ligne 10: Nous avons ici défini un formulaire dont l'action est traitée par un autre. JSPDans l'attribut action, nous ajoutons la page JSP à laquelle le formulaire doit être soumis via la méthode GET.

Ici, nous utilisons la méthode GET pour transmettre les informations, c'est-à-dire le nom d'utilisateur et le mot de passe.

Code Ligne 11-14: Ici, nous utilisons des champs comme le nom d'utilisateur et le mot de passe, qui sont des champs de texte, et nous récupérons les données saisies par l'utilisateur.

Ces données peuvent être récupérées à l'aide de la méthode getParameter. Un bouton « Envoyer » permet également de transmettre les valeurs des champs à action_form_process.jsp.

Action_form_process.jsp

Code Ligne 14: Ici, nous récupérons les valeurs des champs de saisie de action_form.jsp en utilisant la méthode getParameter de l'objet requête.

Lorsque nous exécutons le code ci-dessus, nous obtenons le résultat suivant.

Sortie :

Action_form.jsp affiche d'abord le formulaire à deux champs présenté ci-dessous.

Après la soumission, action_form_process.jsp affiche le nom d'utilisateur lu avec getParameter().

Lorsque nous exécutons action_form.jsp, un formulaire s'affiche avec deux champs : nom d'utilisateur et mot de passe, ainsi qu'un bouton « Envoyer ». Après avoir saisi ces informations, nous cliquons sur « Envoyer », et la requête est traitée par la page suivante, qui affiche la page de traitement du formulaire avec un message de bienvenue.

Note de version : Les deux servlets ci-dessus importent javax.servlet, ce qui est correct pour Tomcat 9 et les versions antérieures. Jakarta EE 9 a renommé l'API ; par conséquent, sur Tomcat 10 et versions ultérieures, toute importation de javax.servlet devient jakarta.servlet, ou l'application doit être convertie avec l'outil de migration Apache Tomcat pour Jakarta EE.

FAQ

Ces listes concernent Tomcat 9 et les versions antérieures, où l'API se trouve dans javax.servlet. Jakarta EE 9 ayant renommé l'espace de noms, Tomcat 10 et les versions ultérieures nécessitent l'importation de jakarta.servlet et une recompilation, ou l'utilisation de l'outil de migration Tomcat.

Ne stockez jamais cette donnée en clair. Hachez-la avec un algorithme lent et salé comme BCrypt ou Argon2 avant de l'enregistrer dans la base de données, et comparez les hachages lors de la connexion. Le servlet d'exemple vérifie uniquement les valeurs vides ; le hachage doit donc être ajouté.

La fonction `include()` exécute la ressource cible et rend le contrôle au servlet appelant ; les deux résultats s'affichent donc. La fonction `forward()` transmet la requête complète à la cible et ne revient jamais ; le servlet n'a donc pas nécessairement validé la réponse au préalable.

Les pages JSP constituent la vue, la servlet est le contrôleur qui lit les paramètres et détermine la destination des requêtes, et une base de données ou une couche de beans fournit le modèle. RequestDispatcher assure la liaison entre le contrôleur et la vue.

Les assistants IA peuvent rédiger des branches de validation, repérer les vérifications de valeurs nulles manquantes dans `getParameter()`, suggérer des bibliothèques de hachage et expliquer la pile d'exécution. trace. Considérez chaque suggestion comme une ébauche : vérifiez la version de l’API Servlet et testez le code généré avant la mise en production.ping le

Copilot excelle dans la gestion du code répétitif, comme les stubs doPost, la lecture des paramètres et les appels au dispatcher. Il utilise souvent par défaut d'anciennes importations javax.servlet ; vérifiez donc l'espace de noms, la logique de validation et la gestion des exceptions.ping de toute entrée utilisateur qu'il produit.

Ajoutez une couche JDBC à la servlet : ouvrez une connexion mutualisée, utilisez un PreparedStatement pour l’insertion ou la recherche d’informations d’identification, et fermez les ressources dans un bloc finally. Évitez d’inclure du code SQL dans la JSP afin que la vue reste purement informative.

En effet, guru_login vérifie uniquement si les champs sont vides. Un nom d'utilisateur ou un mot de passe vide entraîne la réaffichage de la page de connexion au lieu de la rediriger, ce qui constitue une simple mesure de validation et non une véritable authentification.

Exemples de programmes JSP : formulaire d'inscription et de connexion

Comment créer un formulaire d'inscription en JSP

Comment créer un formulaire de connexion et de déconnexion en JSP

Traitement du formulaire JSP à l'aide de getParameter()

Méthode GET :

Méthode POST :

FAQ

Résumez cet article avec :

Enregistrez-vous pour recevoir le bulletin d'informations