Algoritmos y Algo Más

Para todos los amantes de la programación.
Skip to content
  • C/C++
  • Java
  • .NET
  • Pseint
  • Youtube

Etiqueta: tomcat

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

Posted on 4 septiembre, 20212 enero, 2022 by ayam

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

Base de datos, Java, Java web bootstrap, eclipse, java, java web, jquery, login, mysql, programación, servlet, tomcat
1

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

Posted on 4 noviembre, 20202 enero, 2022 by ayam

Esta publicación es la continuación de la parte 2 la cual puedes encontrarla aquí: https://algoritmosyalgomas.com/login-java-web-usuario-password-conexion-base-datos-mysql-n-capas-parte2/

Configuración de Eclipse para ver la aplicación en el navegador

Hasta el momento, la aplicación se nos está mostrando dentro de la interfaz del IDE Eclipse. Sin embargo, no es muy cómodo probar la aplicación de esta manera, por lo que para trabajar con mayor comodidad vamos a configurar Eclipse para que de ahora en adelante la aplicación se nos muestre en un navegador externo: Chrome, Firefox, Opera, etc.  En mi caso elegiré Chrome. Para ello hacemos clic en el menú Windows > Web Browser > Chrome

Para ver que la configuración se aplicó correctamente vamos a volver a ejecutar la aplicación web:  Hacemos clic derecho en el archivo index.jsp > Run As > Run on Server. A partir de ahora se nos abrirá el navegador seleccionado (Chrome)

 

Si nos fijamos en la url del navegador, tenemos lo siguiente:

http://localhost:8080/JavaWeb/index.jsp

Allí podemos observar que luego de localhost aparece el número 8080. Este es el puerto donde se está ejecutando el contenedor de servlets Tomcat. Este número de puerto se puede cambiar dependiendo del caso (en algunas situaciones va a ser necesario cambiar el número de puerto debido a conflictos con otros servicios o procesos que ya se estén ejecutando bajo el mismo puerto).

Ahora, ¿qué pasaría si en la url pegamos la siguiente dirección: http://localhost:8080/JavaWeb/principal.jsp ?

Lo que sucede es que se nos muestra la página que contiene el mensaje de Bienvenido salteándonos así el login del principio. 

En una aplicación “real” esto no debería suceder. A los visitantes de la aplicación solamente se les debería ser permitido visualizar a página principal.jsp (o cualquier otra página interna de la aplicación) luego de haber iniciado sesión con un usuario y clave en la página del login. Debería existir un mecanismo que nos permita decirle a la aplicación web que tenemos permisos para poder visualizar la página principal.jsp (o cualquier otra página interna del sitio web). Este tipo de mecanismo existe y se denomina Sesión web.

Sesiones web en Java

La sesión web es un mecanismo que permite identificar a un usuario que se encuentra interactuando con un sitio web.

Para implementar sesiones web en java se utiliza un objeto sesión. El objeto sesión debe ser creado al momento que el usuario termina el proceso de inicio de sesión (cuando se logea), y se debe destruir al instante en que el usuario se cierra la sesión (cuando se deslogea) del sitio web.

Vamos a poner en práctica el uso de sesiones en nuestra aplicación web para hacerla más segura y cercana a una aplicación web real. Para ello procederemos a modificar algunos archivos del código fuente:

index.jsp

En este archivo hemos añadido un nuevo elemento html en la línea 11. Se trata del elemento html input con los siguientes atributos:

  • name=”tipo”
  • value=”iniciarSesion”

El texto “iniciarSesion”, el cual es el valor asignado al input hidden, será enviado al servlet Usuario de manera oculta al momento de realizar el logeo y será útil para que desde el servlet podamos identificar de forma más precisa el tipo de operación que se está realizando, en este caso, un inicio de sesión. 

En varias situaciones los inputs hidden son muy útiles para mandar valores al servidor y para que desde este, mediante algún servlet, pueda realizar diversas operaciones, validaciones, etc.

ServletUsuario.java

También vamos a modificar el servlet ServletUsuario para que reciba el parámetro adicional llamado “tipo” (el que fue enviado desde la página index.jsp) con el cual podremos identificar el tipo de acción u operación que queremos realizar. 

Para esta ocasión, vamos a definir en el servlet dos posibles acciones: 

  1. Procesar el login o inicio de sesión, el cual ya habíamos implementado en las entradas anteriores, pero esta vez vamos a añadir la creación del objeto sesión dentro del método iniciarSesión.
  2. Procesar el logout o cierre de sesión. Esto lo haremos dentro del método cerrarSesion.

En la línea 21 se recupera el valor del parámetro tipo que llega al Servlet junto con la petición dentro del objeto request. En la línea 23 se evalúa el valor recibido y en base a eso se invoca al método iniciarSesion o cerrarSesion en las líneas 24 y 26 respectivamente.

Procesamiento del inicio de sesión: En la línea 41 se declara una variable de tipo HttpSession llamada sesion. A esta se le asigna el resultado de la llamada al método getSession en el objeto request (HttpServletRequest). 

El funcionamiento del método getSession es el siguiente: retorna la sesión actual si existe; en caso contrario, crea una nueva. Para nuestro caso, debido a que en ningún momento hemos creado una sesión, se creará una nueva.

En la línea 42 se está seteando dentro del objeto session mediante el método setAttribute, el objeto usuario con la información del usuario que se está logeando. El nombre asignado al atributo es “usuario”, y será con este nombre que lo vamos a leer/recuperar desde el jsp correspondiente como se explica más adelante.

Algo importante que se debe aclarar es que todos los servlets y jsps accesados por un mismo cliente (navegador) compartirán la misma sesión (el mismo objeto sesión). 

Procesamiento del cierre de sesión: En la línea 48 se obtendrá una referencia a la sesión para después invalidarla o destruirla en la línea 49 con el método invalidate. En la línea 50 seteamos un atributo “mensaje” con el mensaje “Iniciar sesión”. En la línea 51 hacemos una redirección de la petición hacia el archivo index.jsp y reenviamos los objetos request y response. El mensaje seteado en la línea 50 lo vamos a recuperar en el archivo index.jsp luego de ejecutarse la redirección.

validar.jsp

Vamos a crear una nueva página JSP llamada validar.jsp dentro de la carpeta WebContent (recuerda que si no tienes la carpeta WebContent, en su lugar tendrás la carpeta webapp dentro de src/main/webapp.), la cual tendrá como objetivo evitar que la página principal.jsp sea visible cuando no haya existido un proceso previo de logeo, es decir, no exista un objeto usuario seteado en la sesión actual (en un objeto sesión).

Para esto, en la línea 2 procedemos a hacer referencia a un objeto session el cual, ya existe en cualquier JSP por lo cual se puede hacer referencia a este sin problemas (es un objeto implícito). Con el método getAttribute y el nombre “usuario” se intenta traer, en caso exista, el objeto usuario. En caso de que no exista, el método traerá null con lo cual podemos concluir que el usuario actual no se logeado en el sitio web, por lo cual se redireccionará hacia la página index.jsp para que realice su logeo respectivo.

 

encabezado.jsp

Este jsp nos permitirá crear una página reutilizable dentro de otras. Es útil para incluir barras de navegación, links, etc que normalmente se repiten en todas las páginas de una aplicación web.

Para empezar, únicamente vamos a incluir dentro de esta página un link que permita cerrar la sesión.

Veamos que en la línea 10, en el atributo href del link tenemos como valor: “usuario?cerrarSesion”. Aquí podemos identificar dos cosas:

  • usuario: es el nombre del Servlet a invocar luego de hacer clic en el link.
  • tipo=cerrarSesion: vendría a ser el nombre de un parámetro: “tipo” y su valor “cerrarSesion”. Este parámetro es enviado al servlet “usuario” para que éste sepa el tipo de operación a realizar.

principal.jsp

La página principal.jsp como ya habíamos visto es la primera página a la que nos redirecciona el sistema una vez que nos hayamos logeado. 

En la primera línea de esta página estamos usando la etiqueta jsp de inclusión dinámica jsp:include para incluir el contenido de la página validar.jsp con el objetivo de que primero se ejecute toda su lógica, el cual consiste en validar de que exista un objeto usuario en la sesión.

Si tuviéramos más páginas internas en nuestra aplicación, es decir, páginas que solo deben ser visibles para usuarios logeados, entonces deberíamos reusar e incluir la página validar.jsp de la misma manera como lo estamos haciendo ahora.

Además de incluir la página validar.jsp también incluimos en la línea 11 el contenido de la página encabezado.jsp para reutilizar su contenido.

Por último, en la línea 12 estamos mostrando el nombre del usuario que se está logeando. Este nombre lo obtenemos del objeto usuario que está almacenado en el objeto sesión. Podríamos haberlo hecho con scriptlets pero en esta ocasión estamos usando el lenguaje de expresiones EL: ${sessionScope.usuario.nombre}

 

Prueba de la aplicación web

Para probar la aplicación volvemos a hacer clic derecho sobre la aplicación JavaWeb y elegimos Run As / Run on server

Vamos a intentar ingresar directamente a la página principal.jsp sin logearnos previamente:

http://localhost:8081/JavaWeb/principal.jsp

Podrás notar que que inmediatamente el sitio web te redireccionará hacia el login y te mostrará el mensaje de error que habíamos definido en la página validar.jsp. Este es debido a que no existe ninguna sesión en memoria ya que no nos hemos logeado.

Ahora procedemos a iniciar sesión con el usuario “jose” y password “123”

Podrás ver que ahora sí el sistema te muestra la página principal.jsp.

Internamente lo que ha ocurrido es lo siguiente:

  • El servlet que procesa la petición de login crea un objeto sesión donde guarda el objeto usuario con su información e inmeditamente redirecciona hacia la página principal.jsp.
  • Dentro de la página principal.jsp: primero carga el contenido de la página validar.jsp que como ya sabemos, valida que exista el objeto usuario dentro de la sesión (en caso negativo nos redireccionaría hacia el login). Luego carga el resto del contenido de la página.

Para cerrar sesión solo damos clic al link “Cerrar sesión” de la página, con la cual haremos una petición hacia el Servlet el cual ejecutará el método correspondiente encargado de destruir la sesión y volveremos a ser redirigidos hacia la página de login.

A partir de ahora, ya no podremos ingresar a la página principal.jsp a menos que nos hayamos logeado.

Si te fue de ayuda esta entrada, déjame en los comentarios para seguir subiendo contenido así.

Próximamente vamos a terminar el aplicativo de login añadiendo hojas de estilos, lógica de validación con javascript y utilizando etiquetas de la librería JSTL para aplicar validaciones en la página jsp del login.

La continuación está aquí: https://algoritmosyalgomas.com/login-java-web-usuario-password-conexion-base-datos-mysql-n-capas-parte4/

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

Base de datos, Java web eclipse, java, java web, jsp, login, mysql, servlet, tomcat
3
  • 1
  • 2
  • »

Contenido

  • julio 2022 (7)
  • marzo 2022 (1)
  • diciembre 2021 (2)
  • octubre 2021 (3)
  • septiembre 2021 (3)
  • abril 2021 (7)
  • diciembre 2020 (4)
  • noviembre 2020 (1)
  • octubre 2020 (2)
  • julio 2020 (1)
  • octubre 2019 (1)
  • junio 2019 (1)
  • abril 2019 (1)
  • febrero 2019 (4)
  • noviembre 2018 (2)
  • octubre 2018 (8)
  • septiembre 2018 (1)

Lo último de este blog

  • Pregunta final resuelta de principios de algoritmos UTP en Pseint 3 30 julio, 2022
  • UTP Ejercicios de prueba de escritorio de principios de algoritmos Nº 4 26 julio, 2022
  • UTP Ejercicios de prueba de escritorio de principios de algoritmos Nº 3 26 julio, 2022
  • UTP Ejercicios de prueba de escritorio de principios de algoritmos Nº 2 25 julio, 2022
  • UTP Ejercicios de prueba de escritorio de principios de algoritmos Nº 1 25 julio, 2022
  • Ejercicios resueltos de principios de algoritmos UTP en Pseint 2 24 julio, 2022
  • Ejercicios resueltos de principios de algoritmos UTP en Pseint 1 24 julio, 2022
  • Principios de algoritmos UTP – resolución de examen final Nº 3 13 marzo, 2022
  • Principios de algoritmos UTP – resolución de examen final Nº 2 30 diciembre, 2021
  • Principios de algoritmos UTP – resolución de examen final Nº 1 30 diciembre, 2021

Categorías

Etiquetas

algoritmos (16) archivos binarios (3) bootstrap (2) bucle (10) c (3) c++ (18) ciclos (9) conio (2) cpp (6) diagramas de flujo (10) eclipse (7) editores (2) estructura repetitiva (9) estructuras de control (10) examenes finales (6) herramientas de programación (2) IDE (2) ides (2) int (2) java (7) java web (4) jquery (2) jsp (3) juegos (3) login (7) matemática (3) mcm (2) menú (4) menú de opciones (6) mysql (5) paso por referencia (1) paso por valor (1) principios de algoritmos (6) programación (7) pseint (10) pseudocódigo (10) punteros (1) registro de usuarios (2) servlet (5) swap (1) teclas direccionales (2) tomcat (4) utp (6) validación (2) while (2)
Este sitio web utiliza cookies para mejorar su experiencia. Asumiremos que está de acuerdo con esto, pero puede optar por no participar si lo desea.AceptoCancelar Read More
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Siempre activado
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
GUARDAR Y ACEPTAR