Esta es la parte 4 y última de esta serie de publicaciones. La parte 3 puedes encontrarla en este link https://algoritmosyalgomas.com/login-java-web-usuario-password-conexion-base-datos-mysql-n-capas-parte3/
Continuaremos mejorando la aplicación web y dándole los retoques finales.
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:
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
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:
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”.
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:
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:
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:
- bootstrapValidator.js: https://gist.githubusercontent.com/algoritmosyalgomas/7db932abcd2dcaa25f2d933e89bae914/raw/a2466e6ed9a0c818a35d2131f8fe50d50079b3d1/bootstrapValidator.js
- bootstrapValidator.css: https://gist.githubusercontent.com/algoritmosyalgomas/44e0cdfcff64489ba2af8883d85bcc3f/raw/6cd1403632922f65e665de41e458eef7274e84f6/bootstrapValidator.css
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:
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:
Solo nos queda probar cómo funciona el validador de bootstrapValidator:
La lista completa de entradas relacionadas a esta son las siguientes:
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
