Saltar al contenido

Ejemplos de programa JSP: formulario de registro e inicio de sesión

En este tutorial, vamos a desarrollar programas de muestra usando arquitectura JSP y MVC.

Los ejemplos de programas se desarrollarán sucesivamente:

Utilice un formulario de registro a través de JSP

En el formulario de Registro, tendremos un formulario para completar todos los detalles que incluirá nombre, usuario, contraseña, dirección, número de contacto, etc.

Este formulario nos ayudará a registrarnos para la aplicación. Toman todos nuestros datos y los almacenan en una base de datos o caché.

En este ejemplo, tomaremos un “formulario de registro de gurú” que tiene los siguientes campos:

  1. Nombre
  2. Apellido
  3. Nombre de usuario
  4. Contraseña
  5. Habla a
  6. Número de contacto

Después de haber completado todos estos datos, hemos agregado un botón, con solo hacer clic en ese botón se almacenarán todos los datos.

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>

Explicación del código:

Código de línea 11: Estamos tomando un nombre de formulario que tiene una acción, es decir, el servlet para el que se procesará la solicitud y el nombre del servlet es guru_register.java. La solicitud será procesada por el método POST.

Código de línea 14-16: Aquí asumimos un tipo de entrada ya que el nombre es texto y nombre

Código en línea 18-20: Aquí asumimos un tipo de entrada ya que el apellido es texto y nombre

Código de línea 22-24: Aquí asumimos el tipo de entrada como texto y nombre de usuario

Código en línea 26-28: Aquí tomamos un tipo de entrada como contraseña (esto incluye la contraseña cuando se escribe) y lo nombramos como contraseña

Código de línea 30-32: Aquí asumimos el tipo de entrada como texto y el nombre como dirección

Código en línea 34-36: Aquí asumimos el tipo de entrada como texto y el nombre como contacto

Código de línea 37: Aquí tomamos un botón de tipo de envío y también se ingresa un valor. Al hacer clic en este botón, la acción se llevará al servlet guru_register correspondiente donde se pasarán todos los valores de los parámetros en la solicitud.

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);
		}
	}

}

Explicación del código:

Código de línea 14: Aquí estamos definiendo guru_servlet que está expandiendo HttpServlet.

Código de línea 18: Este método se llamará doPost () cuando mencionemos un atributo POST en acción en el formulario JSP anterior.

Código de línea 20-25:Aquí obtenemos los valores de request, es decir, first_name, last_name, username, password, address y contact usando request.getParameter.

Código en línea 27-32: Aquí asumimos si mantenemos alguno de los parámetros obtenidos de la solicitud como si están vacíos o no. Si alguna parte del parámetro está vacía, entonces ingresará esta condición (first_name.isEmpty () || last_name.isEmpty || username.isEmpty || password.isEmpty || address.isEmpty || contact.isEmpty ()) y nosotros necesita recuperar un objeto RequestDispatcher utilizando un objeto de solicitud que reenviará la solicitud a register_1.jsp. También incluimos aquí elementos de solicitud y respuesta.

Código en línea 33-37: Este caso se ejecutará cuando ninguna parte del parámetro esté vacía. Necesitaremos obtener un objeto requestDispatcher usando un objeto request que reenviará la solicitud a register_2.jsp. Aquí estamos reenviando objetos de solicitud y respuesta.

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>

Explicación del código:

Línea de código 10: Aquí estamos dando la bienvenida al usuario. Esta JSP se llamará cuando se completen todos los parámetros.

Cuando ejecute el código anterior, obtendrá el siguiente resultado:

Producción:

Cuando hacemos clic en register_1.jsp, obtendremos un formulario que contiene detalles como nombre, apellido, nombre de usuario, contraseña, dirección, contacto. Se completaron todos los detalles. Cuando hacemos clic en el botón enviar, aparece el mensaje “Bienvenida del usuario”.

Formulario de inicio de sesión y cierre de sesión

Como un formulario de registro, tendremos un formulario de inicio de sesión y cierre de sesión.

En este ejemplo, tomamos un formulario de inicio de sesión con dos campos de “nombre de usuario” y “contraseña” con un botón de entrada.

Cuando hacemos clic en el botón enviar, recibimos un mensaje de bienvenida con un botón para cerrar sesión.

Cuando hacemos clic en el botón de cerrar sesión, regresamos al formulario de inicio de sesión.

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>

Explicación del código:

Línea de código 10:Aquí asumimos un nombre de formulario que tiene una acción, es decir, el servlet con el que se ejecutó es servu_login.java. El método por el cual POST.

Código de línea 13-16: Aquí asumimos un campo de entrada de “nombre de usuario” que es de tipo texto.

Código en línea 17-20: Aquí asumimos un campo de entrada de “contraseña” que es del tipo contraseña.

Código de línea 22: Aquí tomamos un botón “enviar” con el valor “Iniciar sesión” en el que hacemos clic y luego va al servlet guru_login donde ambos campos se toman usando un objeto solicitado.

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);
		}
	}

}

Explicación del código:

Código en línea 5-9: Aquí estamos importando importaciones esenciales en el código.

Código de línea 14: Aquí estamos tomando el servlet guru_login que extiende HttpServlet.

Código de línea 21: Aquí estamos usando el método doPost () como en el formulario estamos usando el método POST.

Código de línea 23-24: Aquí asumimos parámetros que utilizan el objeto de la aplicación, es decir, el nombre de usuario y la contraseña.

Código en línea 25-29: De esta manera, asumimos una condición “si” al verificar un nombre de usuario y contraseña, ya sea que estén vacíos o no. En este caso, si está vacío, obtendremos un objeto requestdispatcher que se reenviará a register_3.jsp con objetos de solicitud y respuesta.

Código de línea 30-34: Esto se ejecutará si ambos están vacíos, luego reenvíe la solicitud a register_4.jsp con los elementos de solicitud y respuesta.

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>

Explicación del código:

Código de línea 12: Aquí obtenemos un parámetro de “nombre de usuario” del objeto solicitado en la cadena nombre de usuario del objeto.

Código de línea 13: Aquí tenemos un mensaje de bienvenida con el nombre de usuario.

Código de línea 14: Vinculamos aquí para redirigir el formulario de referencia a register_3.jsp.

Cuando ejecute el código anterior, obtendrá el siguiente resultado:

Producción:

Aquí, cuando hacemos clic en register_3.jsp, obtenemos dos campos “nombre de usuario” y “contraseña” con un botón de inicio de sesión.

Después de hacer clic en el botón Iniciar sesión, aparecerá el siguiente mensaje con el botón Cerrar sesión.

Cuando hace clic en el botón de inicio de sesión, regresa a la página de inicio de sesión

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *