Login en Java web y MySQL – N capas (JSP’s y Servlets) Parte 4 – 4

Por /

📂 Archivo técnico

Este contenido lo publiqué en un blog anterior durante mis primeros proyectos. Hoy lo conservo aquí como referencia y ejemplo práctico para quienes quieran reforzar la lógica de programación.

Login en java web

Esta es la parte 4 y última de esta serie de publicaciones. La parte 3 puedes encontrarla en este link:

https://blog.luisguisado.cloud/login-java-web-usuario-password-conexion-base-datos-mysql-n-capas-parte3

Continuaremos mejorando la aplicación web y dándole los retoques finales a este login en java web.

Agregando la librería jquery y bootstrap

Incluiremos la librería jquery 3.5.1. Para ello debemos incluir la etiqueta script especificando en el atributo src la url de su ubicación. Utilizaremos una cdn

				
					<script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js»></script>

En cuanto a bootstrap, incluiremos las hojas de estilos y la librería javascript:

  • CSS:
  • JS:
				
					<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
				
			
				
					<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

La librería css de bootstrap se incluye en el <head> mientras que las librerías javascript se agregan antes del cierre del tag <body>.

Luego de la inclusión de estas dos librerías mencionadas, la aplicación se verá de forma distinta:

Archivo style.css para la personalización de los estilos

Vamos a mejorar los estilos de nuestro login. Para ello, además de usar las clases propias de bootstrap añadiremos nuestros estilos personalizados. Hacemos clic derecho en la carpeta css  (la cual se encuentra dentro de WebContent o dentro de src/main/webapp) y elegimos new / File.. 

El nombre del archivo a crear es style.css

Estas son las reglas de estilos que debes copiar y pegar dentro del archivo style.css

				
					#alertLogin {
	margin-top: 10px;
}

.form-container {
    transform: translate(-50%, 50%);
    left: 50%;
    position: absolute;
    width: 60%;
    padding: 30px;
    background: #eee;
    max-width: 500px;
}

.form-control {
    height: 50px;
    margin: 0;
    padding: 0 20px;
    vertical-align: middle;
    background: #f8f8f8;
    border: 3px solid #ddd;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 50px;
    color: #888;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -o-transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
}

Modificando index.jsp

También vamos a modificar la página index.jsp utilizando clases de bootstrap para darle estilos a los cuadros de texto, botón y divs. A continuación se muestra el código completo de la página index.jsp con la inclusión de las librerías jquery, bootstrap y los estilos personalizados:

				
					<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Inicio de Sesión</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
	<div class="container">
		<div class="form-container">
			<h2><span class="ez-toc-section" id="Inicio-de-Sesion"></span>Inicio de Sesión<span class="ez-toc-section-end"></span></h2>
			<form id="formLogin" action="usuario" method="post">
				<input type="hidden" name="tipo" value="iniciarSesion" />
			 	<div class="form-group">
			 		<label for="nombre">Usuario</label>
			 		<input type="text" class="form-control" name="nombre" placeholder="Nombre de usuario" />
				</div>
				<div class="form-group">
			 		<label for="clave">Clave</label>
			 		<input type="password" class="form-control" name="clave" placeholder="Contraseña" />
				</div>
				
				<button type="submit" class="btn btn-success btn-block btn-lg">Iniciar sesión</button>
				<div>
					<p>
						<%
							String resultado = (String)request.getAttribute("mensaje");
							String mensaje = "";
							if (resultado != null) {
								mensaje = resultado;
							}
						%>
						<%=mensaje %>
					</p>
				</div>
			</form>
		</div>
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>

Ahora la página se verá mucho más elegante.

Mejorando el mensaje de error

El mensaje de error para login fallido se imprime con código Java el cual se incrusta mediante scriptlets. Como ya hemos visto, la lógica de este scriptlet consiste en acceder al valor del atributo «mensaje» y si este es diferente de nulo, imprimirlo en pantalla. 

Vamos a hacer la misma lógica pero utilizando una etiqueta condicional if, la cual forma parte de la librería core JSTL.

Uso de la JSTL Core

Vamos a descargarnos la librería JSTL desde este enlace: https://mvnrepository.com/artifact/javax.servlet/jstl/1.2

Buscamos el link «jar» y lo descargamos.

Luego, copiamos el jar descargado dentro de la carpeta WEB-INF/lib de nuestro proyecto Java web.

Ahora, para empezar a usar los tags es necesario añadir la directiva taglib en todas las páginas jsp donde nos haga falta. En nuestro caso la vamos a usar en index.jsp.  Es importante indicar que en esta directiva hay dos partes: la uri y el prefix (prefijo). El prefijo que estamos usando, por una cuestión de costumbre, es «c» de «core».

				
					<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

Ahora, ya que contamos con la librería core JSTL cargada en la página, vamos a usar dos tipos de tags: set y if (con el prefijo «c»)

Con el tag set declaramos una variable llamada mensaje y le asignamos un valor mediante el uso del lenguaje de expresiones EL. El valor asignado es requestScope.mensaje, es decir, el mensaje guardado como atributo dentro del objeto request (este valor es asignado desde el fragmento de código java (scriptlet)  dentro de la página validar.jsp).

Con el tag if evaluamos una condición, si es verdadero, se ejecuta lo que se encuentra dentro. En nuestro caso, si se cumple la condición de que la variable mensaje es vacío o nulo, se imprimirá el valor del mensaje.

En la siguiente imagen se muestra el código equivalente: A la izquierda usando scriptlets y a la derecha usando la JSTL y EL.

Hasta el momento, el código de la página index.jsp queda como sigue:

				
					<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Inicio de Sesión</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
	<div class="container">
		<div class="form-container">
			<h2><span class="ez-toc-section" id="Inicio-de-sesion"></span>Inicio de sesión<span class="ez-toc-section-end"></span></h2>
			<form id="formLogin" action="usuario" method="post">
				<input type="hidden" name="tipo" value="iniciarSesion" />
				<div class="form-group">
					<label for="nombre">Usuario</label>
					<input type="text" class="form-control" name="nombre" placeholder="Nombre de usuario" />
				</div>
				
				<div class="form-group">
					<label for="clave">Clave</label>
					<input type="password" class="form-control" name="clave" placeholder="Contraseña" />
				</div>
				
				<button type="submit" class="btn btn-success btn-block btn-lg">Iniciar sesión</button>
				<div>
					<p>
						<c:set var="mensaje" value="${requestScope.mensaje}" />
						<c:if test="${not empty mensaje}">
							${mensaje}
						</c:if>
					</p>
				</div>
			</form>
		</div>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>

Y para mejorar de manera visual el mensaje de error mostrado, usaremos un componente de bootstrap llamado alert.

Basta hacer algunos ajustes al código html donde se muestra el mensaje de error como se ve a continuación:

Finalmente la página index.jsp quedaría como sigue:

				
					
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Inicio de Sesión</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
	<div class="container">
		<div class="form-container">
			<h2><span class="ez-toc-section" id="Inicio-de-sesion-2"></span>Inicio de sesión<span class="ez-toc-section-end"></span></h2>
			<form id="formLogin" action="usuario" method="post">
				<input type="hidden" name="tipo" value="iniciarSesion" />
				<div class="form-group">
					<label for="nombre">Usuario</label>
					<input type="text" class="form-control" name="nombre" placeholder="Nombre de usuario" />
				</div>
				
				<div class="form-group">
					<label for="clave">Clave</label>
					<input type="password" class="form-control" name="clave" placeholder="Contraseña" />
				</div>
				
				<button type="submit" class="btn btn-success btn-block btn-lg">Iniciar sesión</button>
				<c:set var="mensaje" value="${requestScope.mensaje}" />
				<c:if test="${not empty mensaje}">
					<div id="alertLogin" class="alert alert-danger alert-dismissible fade in">
						${mensaje}
						<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
					</div>
				</c:if>
			</form>
		</div>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>

Y los mensajes de error ahora se verán se verán como alerts de bootstrap:

Validaciones del formulario con BootstrapValidator

Vamos a utilizar esta librería para poder aplicar validaciones a los componentes del formulario de login (y a cualquier otro componente html). 

Hay que descargar estos dos archivos:

Una vez que descargaste los dos archivos, hay que ubicarlos en una carpeta adecuada:

  • bootstrapValidator.js en la carpeta js:
  • bootstrapValidator.css en la carpeta css:

Archivo script.js

Creamos este archivo dentro de la carpeta js. Este archivo contiene el código javascript que permite validar los campos del formulario de login utilizando la librería bootstrapValidator:

				
					$(document).ready(function() {
    $('#formLogin').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
        	nombre: {
                validators: {
                    notEmpty: {
                        message: 'Debe ingresar el nombre de usuario'
                    }
                }
            },
            clave: {
                validators: {
                    notEmpty: {
                        message: 'Debe ingresar la contraseña'
                    }
                }
            }
        }   
    });

    // Validate the form manually
    $('#validateBtn').click(function() {
        $('#id_form').bootstrapValidator('validate');
    });
});

Una vez que tenemos los archivos de la librería bootstrapValidator y el archivo script.js en sus carpetas respectivas, las incluímos en la página index.jsp:

Finalmente el código de la página index.jsp sería el siguiente:

				
					<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Inicio de Sesión</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrapValidator.css">
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
	<div class="container">
		<div class="form-container">
			<h2><span class="ez-toc-section" id="Inicio-de-sesion-3"></span>Inicio de sesión<span class="ez-toc-section-end"></span></h2>
			<form id="formLogin" action="usuario" method="post">
				<input type="hidden" name="tipo" value="iniciarSesion" />
				<div class="form-group">
					<label for="nombre">Usuario</label>
					<input type="text" class="form-control" name="nombre" placeholder="Nombre de usuario" />
				</div>
				
				<div class="form-group">
					<label for="clave">Clave</label>
					<input type="password" class="form-control" name="clave" placeholder="Contraseña" />
				</div>
				
				<button type="submit" class="btn btn-success btn-block btn-lg">Iniciar sesión</button>
				<c:set var="mensaje" value="${requestScope.mensaje}" />
				<c:if test="${not empty mensaje}">
					<div id="alertLogin" class="alert alert-danger alert-dismissible fade in">
						${mensaje}
						<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
					</div>
				</c:if>
			</form>
		</div>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  	<script src="js/bootstrapValidator.js"></script>
	<script src="js/script.js"></script>
</body>
</html>

Solo nos queda probar cómo funciona el validador de bootstrapValidator:

Lista completa de publicaciones sobre Login en Java Web y MySQL usando JSP’s y Servlets:

Parte 1: Login en Java web y MySQL – N capas (JSP’s y Servlets) Parte 1 – 4

Parte 2: Login en Java web y MySQL – N capas (JSP’s y Servlets) Parte 2 – 4

Parte 3: Login en Java web y MySQL – N capas (JSP’s y Servlets) Parte 3 – 4

Parte 4: Login en Java web y MySQL – N capas (JSP’s y Servlets) Parte 4 – 4

Entradas relacionadas

Deja un comentario

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

Scroll al inicio