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

Por: james hartman james hartman
Hours Actualizado

programas de ejemplo jsp

En este tutorial, lo guiaré a través del desarrollo de programas de muestra con JSP y la implementación de la arquitectura MVC en este tutorial.

Se desarrollarán los siguientes ejemplos de programas:

  • formulario de inscripción
  • Formulario de inicio de sesión y cierre de sesión
  • Formulario JSP

Usando el formulario de registro a través de JSP

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

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

En este ejemplo, vamos a tomar el “Formulario de registro de gurú” que tiene los siguientes campos:

  1. Nombre
  2. Apellido
  3. Nombre de usuario
  4. Contraseña
  5. Dirección
  6. Número de celular

Después de completar todos estos detalles tenemos el botón Enviar, al hacer clic en ese botón se almacenarán todos los detalles.

Ejemplo 1: Registro_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:

Línea de código 11: Aquí estamos tomando un nombre de formulario que tiene acción, es decir, el servlet al que se procesará la solicitud y el nombre del servlet es guru_register.java. La solicitud se procesará mediante el método POST.

Línea de código 14-16: Aquí tomamos el tipo de entrada como texto y el nombre es el nombre.

Línea de código 18-20: Aquí tomamos el tipo de entrada como texto y el nombre es apellido.

Línea de código 22-24: Aquí tomamos el tipo de entrada como texto y el nombre es nombre de usuario.

Línea de código 26-28: Aquí tomamos el tipo de entrada como contraseña (esto ocultará la contraseña cuando se escriba) y el nombre como contraseña.

Línea de código 30-32: Aquí tomamos el tipo de entrada como texto y el nombre como dirección.

Línea de código 34-36: Aquí tomamos el tipo de entrada como texto y el nombre como contacto.

Línea de código 37: Aquí estamos tomando un botón de tipo enviar y el valor también es enviar. Al hacer clic en este botón, la acción irá al servlet guru_register correspondiente donde se pasarán todos los valores de los parámetros en la solicitud.

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

}

Explicación del código:

Línea de código 14: Aquí definimos guru_servlet que extiende HttpServlet.

Línea de código 18: Esta acción doPost() método que se llamará cuando mencionemos el atributo POST en acción en el formulario JSP anterior.

Línea de código 20-25: Aquí obtenemos los valores de la solicitud, es decir, nombre_primero, apellido, nombre de usuario, contraseña, dirección y contacto mediante request.getParameter.

Línea de código 27-32: Aquí estamos tomando la condición if donde verificamos que cualquiera de los parámetros que se obtienen de la solicitud esté vacío o no. Si alguno de los parámetros está vacío, ingresará esta condición (first_name.isEmpty() || last_name.isEmpty || nombre de usuario.isEmpty || contraseña.isEmpty || dirección.isEmpty || contact.isEmpty()) y tenemos para recuperar el objeto RequestDispatcher utilizando el objeto de solicitud que reenviará la solicitud a Register_1.jsp. Aquí también incluimos objetos de solicitud y respuesta.

Línea de código 33-37: Este caso se ejecutará cuando alguno de los parámetros no esté vacío. Tendremos que buscar el objeto requestDispatcher utilizando el objeto de solicitud que reenviará la solicitud a Register_2.jsp. Aquí estamos reenviando objetos de solicitud y respuesta.

Ejemplo 3: Registro_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í decimos bienvenido usuario. Este JSP se llamará cuando se completen todos los parámetros.

Cuando ejecuta el código anterior, obtiene el siguiente resultado:

Usando el formulario de registro a través de JSP

Usando el formulario de registro a través de JSP

Salida:

Cuando hacemos clic en register_1.jsp, obtenemos un formulario que tendrá detalles como nombre, apellido, nombre de usuario, contraseña, dirección y contacto. Todos los detalles han sido completados. Cuando hacemos clic en el botón Enviar, obtenemos el mensaje "Bienvenido usuario".

ARTÍCULOS RELACIONADOS

Formulario de inicio y cierre de sesión

Al igual que el formulario de registro tendremos un formulario de inicio y cierre de sesión.

En este ejemplo, hemos tomado el formulario de inicio de sesión donde tenemos dos campos "nombre de usuario" y "contraseña" con un botón de enviar.

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 cerrar sesión, volvemos al formulario de inicio de sesión.

Ejemplo 1: Registro_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í estamos tomando un nombre de formulario que tiene acción, es decir, el servlet al que ha pasado es guru_login.java. El método a través del cual pasará su POST.

Línea de código 13-16: Aquí estamos tomando un campo de entrada "nombre de usuario" que es del tipo texto.

Línea de código 17-20: Aquí estamos tomando un campo de entrada "contraseña" que es del tipo contraseña.

Línea de código 22: Aquí estamos tomando 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 el objeto de solicitud.

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:

Línea de código 5-9: Aquí estamos importando las importaciones necesarias en el código.

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

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

Línea de código 23-24: Aquí tomamos parámetros utilizando el objeto de solicitud, es decir, nombre de usuario y contraseña.

Línea de código 25-29: De esta manera, estamos tomando la condición "si" en la que verificamos el nombre de usuario y la contraseña si están vacíos o no. En este caso, si está vacío, obtenemos el objeto requestdispatcher que reenvía a Register_3.jsp con los objetos de solicitud y respuesta.

Línea de código 30-34: Esto se ejecutará si ambos no están vacíos y luego reenviará la solicitud a Register_4.jsp con los objetos de solicitud y respuesta.

Ejemplo 2: Registro_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:

Línea de código 12: Aquí obtenemos el parámetro "nombre de usuario" del objeto de solicitud en el nombre de usuario del objeto de cadena.

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

Línea de código 14: Aquí vinculamos para cerrar sesión el formulario que redirige a Register_3.jsp.

Cuando ejecutas el código anterior obtienes el siguiente resultado:

Salida:

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.

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

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

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

Cuando haces clic en el botón de cerrar sesión, vuelves a la página de inicio de sesión.

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

Procesamiento de formularios JSP utilizando getParameter()

Procesamiento de formularios JSP:

Los formularios son el método común en el procesamiento web. Necesitamos enviar información al servidor web y esa información.

Hay dos métodos comúnmente utilizados para enviar y recibir información al servidor web.

OBTENER método:

  • Este es el método predeterminado para pasar información del navegador al servidor web.
  • Envía la información codificada separada por el carácter ? agregado a la página URL.
  • También tiene una limitación de tamaño y solo podemos enviar 1024 caracteres en la solicitud.
  • Debemos evitar enviar contraseñas e información confidencial a través del método GET.

Método de publicación:

  • El método de publicación es el método más confiable para enviar información al servidor.
  • Envía información como mensaje separado.
  • Se envía como una cadena de texto después de ?en la URL.
  • Se utiliza comúnmente para enviar información confidencial.

JSP maneja el procesamiento de datos de formulario mediante los siguientes métodos:

  1. getParameter(): Se utiliza para obtener el valor del parámetro del formulario.
  2. getParameterValues(): Se utiliza para devolver los múltiples valores de los parámetros.
  3. getParameterNames(): Se utiliza para obtener los nombres de los parámetros.
  4. getInputStream(): Se utiliza para leer los datos binarios enviados por el cliente.

Ejemplo:

En este ejemplo, hemos tomado un formulario con dos campos "nombre de usuario" y "contraseña" con un botón de enviar.

formulario_acción.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>

Explicación del código: Action_form.jsp

Línea de código 10: Aquí hemos definido una forma y a través de la cual hemos procesado la acción a alguna otra JSP. En el parámetro de acción, agregamos ese JSP al que debe procesarse mediante el método GET.

Aquí utilizamos el método GET para pasar la información, es decir, nombre de usuario y contraseña.

Línea de código 11-14: Aquí tomamos campos como nombre de usuario y contraseña, que son campos de texto, y obtenemos la entrada del usuario.

Esta entrada se puede recuperar utilizando el método getParameter. Además, tenemos un botón de envío con tipo de envío que nos ayuda a pasar los valores del campo a action_form_process.jsp.

Action_form_process.jsp

Línea de código 14: Aquí obtenemos los valores de los campos de entrada de action_form.jsp utilizando el método getParameter del objeto de solicitud.

Cuando ejecutamos el código anterior, obtenemos el siguiente resultado:

Procesamiento de formularios JSP

Procesamiento de formularios JSP

Salida:

Cuando ejecutamos action_form.jsp, obtenemos un formulario con dos campos de nombre de usuario y contraseña y un botón de enviar. Luego, después de ingresar el nombre de usuario y la contraseña, podemos hacer clic en enviar y se procesa en la página siguiente, que muestra el resultado como una página de procesamiento de formulario con un mensaje de bienvenida.

Boletín diario de Guru99

Empieza el día con las últimas y más importantes noticias sobre IA, entregadas ahora mismo.