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

Dans ce tutoriel, nous allons développer des exemples de programmes avec JSP et en utilisant MVC architecture.

Following Des exemples de programmes seront développés –

Utilisation du formulaire d'inscription via JSP

Dans le formulaire d'inscription, nous aurons un formulaire pour remplir tous lestails qui contiendra 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 tous nos details et rangez-le dans un base de données ou cache.

Dans cet exemple, nous allons prendre le « Formulaire d'inscription du gourou » qui a le texte suivant.wing des champs:

  1. Prénom
  2. Nom
  3. Nom d'utilisateur
  4. Mot de Passe
  5. Adresse
  6. Numéro de téléphone

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

Registre_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 :

Ligne de code 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.

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

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

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

Ligne de code 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.

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

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

Ligne de code 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.

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 :

Ligne de code 14 : Ici, nous définissons guru_servlet qui étend HttpServlet.

Ligne de code 18 : Cette méthode d'action doPost() qui sera appelée lorsque nous mentionnerons POST dans l'attribut d'action ci-dessus Formulaire JSP.

Ligne de code 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.

Ligne de code 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.

Ligne de code 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.

Registre_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 :

Ligne de code 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 suivantwing sortie:

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 aura details comme prénom, nom, nom d'utilisateur, mot de passe, adresse, contact. Tous les details ont été comblés. Lorsque nous cliquons sur le bouton Soumettre, nous obtenons le message « Bienvenue utilisateur »

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.

Registre_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 :

Ligne de code 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.

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

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

Ligne de code 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 :

Ligne de code 5-9 : Ici, nous importons les importations nécessaires dans le code.

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

Ligne de code 21 : Ici, nous utilisons la méthode doPost() comme dans le formulaire, nous utilisons la méthode POST.

Ligne de code 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.

Ligne de code 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.

Ligne de code 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.

Registre_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 :

Ligne de code 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.

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

Ligne de code 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 suivantwing sortie:

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