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

Par : James Hartmann James Hartmann
Hours Le kit de préparation mis à jour

exemples de programmes jsp

Dans ce tutoriel, je vous guiderai à travers le développementping Ce tutoriel présente des exemples de programmes utilisant JSP et implémentant l'architecture MVC.

Les exemples de programmes suivants seront développés :

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

Utilisation du formulaire d'inscription via JSP

Dans le formulaire d'inscription, nous aurons un formulaire pour remplir tous les détails qui contiendront le nom, le nom d'utilisateur, le mot de passe, l'adresse, le numéro de contact, etc.

Ce formulaire nous aidera à nous inscrire à l'application. Ils prennent toutes nos informations et les stockent dans un base de données ou cache.

Dans cet exemple, nous allons prendre «Guru Formulaire d’inscription comportant les champs suivants :

  1. Prénom
  2. Nom de famille
  3. Nom d'utilisateur ( Ou : Nom d'épouse )
  4. Mot de passe
  5. Adresse
  6. Téléphone

Après avoir rempli tous ces détails, nous avons le bouton Soumettre, en cliquant sur ce bouton, tous les détails seront stockés.

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: Ici, nous prenons un nom de formulaire qui a une action, c'est-à-dire le servlet vers lequel la demande sera traitée et le nom du servlet est guru_register.java. La demande sera traitée via la méthode POST.

Code Ligne 14-16: Ici, nous prenons le type d'entrée sous forme de texte et le nom est le prénom

Code Ligne 18-20: Ici, nous prenons le type d'entrée sous forme de texte et le nom est le nom de famille

Code Ligne 22-24: Ici, nous prenons le type d'entrée sous forme de texte et le nom est le nom d'utilisateur

Code Ligne 26-28: Ici, nous prenons le type d'entrée comme mot de passe (cela masquera le mot de passe une fois saisi) et le nom comme mot de passe.

Code Ligne 30-32: Ici, nous prenons le type d'entrée sous forme de texte et le nom comme adresse

Code Ligne 34-36: Ici, nous prenons le type d'entrée sous forme de texte et le nom comme contact

Code Ligne 37: Ici, nous prenons un bouton de type soumettre et la valeur est également soumettre. En cliquant sur ce bouton, l'action ira au servlet guru_register correspondant où toutes les valeurs des paramètres seront transmises dans la requête.

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: Ici, nous définissons guru_servlet qui étend HttpServlet.

Code Ligne 18: Cette action doPost() méthode qui sera appelée lorsque nous mentionnerons l’attribut POST in action dans le formulaire JSP ci-dessus.

Code Ligne 20-25: Ici, nous récupérons les valeurs de la requête, c'est-à-dire efirst_name, last_name, nom d'utilisateur, mot de passe, adresse et contact à l'aide de request.getParameter.

Code Ligne 27-32: Ici, nous prenons une condition dans laquelle nous vérifions l'un des paramètres extraits de la demande pour savoir s'ils sont vides ou non. Si l'un des paramètres est vide, il entrera dans cette condition ( first_name.isEmpty() || last_name.isEmpty || username.isEmpty || password.isEmpty || address.isEmpty || contact.isEmpty()) et nous avons pour récupérer l'objet RequestDispatcher à l'aide de l'objet request qui transmettra la demande à register_1.jsp. Ici, nous incluons également les objets de requête et de réponse.

Code Ligne 33-37: Ce cas s'exécutera lorsqu'un des paramètres n'est pas vide. Nous devrons récupérer l'objet requestDispatcher à l'aide de l'objet request qui transmettra la demande à register_2.jsp. Ici, nous transmettons les objets de demande et de réponse.

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: Ici, nous disons bienvenue à l'utilisateur. Cette JSP sera appelée lorsque tous les paramètres seront renseignés.

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

Utilisation du formulaire d'inscription via JSP

Utilisation du formulaire d'inscription via JSP

Sortie :

Lorsque nous cliquons sur register_1.jsp, nous obtiendrons un formulaire qui contiendra des détails tels que prénom, nom, nom d'utilisateur, mot de passe, adresse, contact. Tous les détails ont été remplis. Lorsque nous cliquons sur le bouton Soumettre, nous obtenons le message « Bienvenue utilisateur »

ARTICLES LIÉS

Formulaire de connexion et de déconnexion

Comme le formulaire d’inscription, nous aurons un formulaire de connexion et de déconnexion.

Dans cet exemple, nous avons pris le formulaire de connexion où nous avons deux champs « nom d'utilisateur » et « mot de passe » avec un bouton de soumission.

Lorsque nous cliquons sur le bouton Soumettre, 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: Ici, nous prenons un nom de formulaire qui a une action, c'est-à-dire que le servlet auquel il est passé est guru_login.java. La méthode par laquelle il passera son POST.

Code Ligne 13-16: Ici nous prenons un champ de saisie « username » qui est de type texte.

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

Code Ligne 22: Ici, nous prenons un bouton « soumettre » avec la valeur « Connexion » sur lequel nous cliquons puis il va au servlet guru_login où les deux champs sont pris en utilisant l'objet de requête.

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: Ici, nous importons les importations nécessaires dans le code.

Code Ligne 14: Ici, nous prenons le servlet guru_login qui étend HttpServlet.

Code Ligne 21: Ici nous utilisons doPost() méthode comme dans le formulaire que nous utilisons la méthode POST.

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

Code Ligne 25-29: De cette façon, nous prenons la condition « if » dans laquelle nous vérifions le nom d'utilisateur et le mot de passe s'ils sont vides ou non. Dans ce cas, s'il est vide, nous obtenons l'objet requestdispatcher qui est transmis à register_3.jsp avec les objets de requête et de réponse.

Code Ligne 30-34: Ceci sera exécuté si les deux ne sont pas vides, puis il transmettra la demande à register_4.jsp avec les objets de demande et de réponse.

Exemple 2 : 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 obtenons le paramètre « nom d'utilisateur » de l'objet de requête dans le nom d'utilisateur de l'objet chaîne.

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

Code Ligne 14: Ici, nous établissons un lien pour vous déconnecter du formulaire qui redirige vers register_3.jsp.

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

Sortie :

Ici, lorsque nous cliquons sur register_3.jsp, nous obtenons deux champs « nom d'utilisateur » et « mot de passe » avec un bouton de connexion.

Formulaire de connexion et de déconnexion

Après avoir cliqué sur le bouton de connexion, vous obtenez le message ci-dessous avec un bouton de déconnexion.

Formulaire de connexion et de déconnexion

Lorsque vous cliquez sur le bouton de déconnexion, vous revenez à la page de connexion

Formulaire de connexion et de déconnexion

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

Traitement des formulaires JSP :

Les formulaires sont la méthode courante dans le traitement Web. Nous devons envoyer des informations au serveur Web et ces informations.

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 séparées par un caractère ? ajouté à URL .
  • Il a également une limitation de taille et nous ne pouvons envoyer que 1024 caractères dans la demande.
  • Nous devons éviter d'envoyer un mot de passe et des informations sensibles via la méthode GET.

Méthode POST :

  • La méthode de publication est la méthode la plus fiable pour envoyer des informations au serveur.
  • Il envoie des informations sous forme de message séparé.
  • Il est envoyé sous forme de chaîne de caractères après ? dans le URL.
  • Il est couramment utilisé pour envoyer des informations sensibles.

JSP gère le traitement des données de formulaire en utilisant les méthodes suivantes :

  1. getParameter(): Il est utilisé pour obtenir la valeur du paramètre du formulaire.
  2. getParameterValues(): Il est utilisé pour renvoyer les multiples valeurs des paramètres.
  3. getParameterNames(): Il est utilisé pour obtenir les noms des paramètres.
  4. getInputStream(): Il permet de lire les données binaires envoyées par le client.

Exemple :

Dans cet exemple, nous avons pris un formulaire avec deux champs « nom d'utilisateur » et « mot de passe » avec 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: Ici, nous avons défini une forme à travers laquelle nous devons traiter l'action vers une autre JSP. Dans le paramètre d'action, nous ajoutons le JSP auquel il doit être traité 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 prenons des champs comme le nom d'utilisateur et le mot de passe qui sont des champs de texte, et nous obtenons la saisie de l'utilisateur.

Cette entrée peut être récupérée à l'aide de la méthode getParameter. En outre, nous avons un bouton de soumission avec le type de soumission qui nous aide à transmettre les valeurs des champs dans action_form_process.jsp.

Action_form_process.jsp

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

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

Traitement des formulaires JSP

Traitement des formulaires JSP

Sortie :

Lorsque nous exécutons action_form.jsp, nous obtenons un formulaire avec deux champs nom d'utilisateur et mot de passe et un bouton de soumission. Ensuite, après avoir entré le nom d'utilisateur et le mot de passe, nous pouvons cliquer sur soumettre, et il passe à la page suivante qui donne la sortie sous forme de page de traitement de formulaire avec un message de bienvenue.

Résumez cet article avec :