Login con Entidades, jsp, servlet y Modal de Boostrap + Jquery

En esta sección vamos implementar un modulo login y listado ejemplo en una aplicación web.


Para implementar este modulo nos auxiliaremos de Netbeans 8.2, glasfish 4.1 y MySQL 4.6.4

Hoy día los formularios  requieren de múltiples funcionalidades;  el modal en muchos casos es molesto en aplicaciones web, ejemplo de ello es el típico de recibir notificaciones de suscripciones o el famoso clic aquí para descargar,  pero el modal no siempre es molesto y hasta cierto punto y bien configurado un servidor, podríamos hasta gestionar login de 2 pasos en nustras aplicaciones web como lo hacen google y microsoft,

En esta sección no desarrollaremos un login tan complejo, pero utilizaremos el modal con la idea de que en una nueva sección le podremos asignar a variables para pedir la clave a ciertas áreas de la aplicación.  O implementar un login mas complejo solicitando primero el correo o usuario y luego la clave en el mismo modal,  como lo hacen hoy día la mayoría de aplicaciones recientes, con el fin de darle mas seguridad a los servicios y evitar la inyección directa.

La implementacion no es muy complicada  requiere conocimientos básicos de HTML, script + Programación en java;  si algún visitante le parece que podemos mejorar el código con gusto no duden en comentar. considero que tengo conocimientos medios pero me intereso en mostrar lo aprendido,  un motivo de ellos es que los docentes muchas veces nos enseñaron lo básico y al final terminamos mas perdidos y confundidos, por lo tanto se considera que java en aplicaciones web es un fiasco.

cuando estudiaba solía ver un docente que nunca le conectaba las app web con la BD, por muchos años y la misma historia de que en la noche le había tocado algo,  y muchas generaciones se perdieron, en otros casos algunos comprendimos un poco mejor que otros compañeros.


Comenzamos con verificar si tenemos instalado el Netbeans+Glassfish+Mysql, adicional que netbeans tenga instalados los módulos web.



Creamos el Proyecto con el nombre adecuado al proyecto.

modificamos el index.jsp  para asignarle la ruta de los Framework como Boostrap y Jquery


un Menú si desarrollamos una app responsiva



luego de cumplir unos pocos estándares  básicos aplicamos el modal siempre en index.jsp




podemos adicionar las reglas css o implementarlas en el mismo modulo.  en mi caso las implemente en el mismo index.jsp, son diferentes al framework por dos motivos, el primero ya es una plantilla color negro las del framework y luego el modal solo es prueba por lo tanto con las reglas de boostrap y jquery les funcionara con diseño diferente;

me gusto el modal que encontré con estas reglas pero boostrap ya lo trae default.

lo implemente de este link Modal

los cambios que aplique son de diseño y activación al abrir la pagina

entre ellos le quite el botón para apertura del modal


La regla para que aperture el css  al cambiar display: none a display: block le damos la orden de que aperture al abrir  la pagina.  esto nos sera de mucha utilidad en otras aplicaciones.






un pie de pagina.


como les comente esto es HTML básico.

Ahora vamos a la programación, están listos. 



Creamos los paquetes con dos capas.  esta por demás explicarles que entre mas capas es mejor al menos al hacker le costara un tiempo mas el detectar las capas.



Despues de creados los paquetes DTO, Servlet, Entidad y Utilidades

creamos la entidad.


clic derecho sobre el paquete uma.Entidad   luego en New entity classes fron database 
seleccionamos en data source  New datasource  y le asignamos un nombre por lo general similar al de nuestro proyecto. 

clic en new database conection y seleccionamos Mysql



cambiamos la BD default por la que nos conectaremos  en mi caso se llama tecuma y le asignamos el usuario y credenciales de la misma


seleccionamos remenber password y probamos la conexion en el test


Notaran ya no tenemos la necesidad de crear la conexión en una clase de java e instanciarla cada vez que la ocupemos, aparecerá todas las tablas disponibles.  en mi caso de prueba solo tengo la de usuarios.



El asistente pide que seleccione una tabla, después podremos agregar las que querramos y actualiza al resto sus relaciones.



al adicionarla nos quedara algo así previo a configurar si queremos lista o colecciones. en esta parte nos aparece si queremos cambiarle de paquete en caso nos hayamos equivocado o a otro proyecto.  también que por default nos genere las anotaciones y la unidad de persistencia. sin necesidad de hacerlo manual en glassfish.


cambio de util collections a util list. y finish para los interezados genero la unidad de persistencia y en los recursos del servidor genero el recurso de glassfish  en donde esta configurada la base de datos y el acceso a ella,  luego con restricciones de hibernate queda mas robusto el acceso por que no hay acceso si no es por un servlet  o modulo de la aplicación web, como les explique el nivel de seguridad dependerá del servidor principal pero en términos generales no están visibles al usuario final.



notaremos que hay un archivo en el paquete entidad en el caso de que sea una tabla si son mas generara los archivos de cada tabla



este archivo es clave  pues ya no ocuparemos los famosos select * from  simplemente el usuario.find*** y genera hasta las relacionadas sin ningún problema,  y para busquedas mas avanzadas de otras entidades hay que generar el objeto pero por el momento no es el tema.  adicionaremos en la entidad usuario una consulta manual para efectos de busqueda de usuario, password y estado del usuario.

@NamedQuery(name = "Usuario.buscarUsuario", query = "SELECT u FROM Usuario u WHERE u.usuario =:user AND u.clave =:pass AND u.estadousuario =:estado"),




con la linea adicionada nos generara una busqueda con restriccion de tres parametros, si es verdadero creara un listado, caso contrario nos devolvera listado  null.

obtenemos el valor de los modales desde login.jsp y activamos el validador que estara en el servlet Ingreso, por seguridad solo captura el usuario y pasword y lo compara, si el valor obtenido por el objeto validador es verdadero procede a accesar y genera sesion caso contrario envía alerta; es importante que le asignemos las directivas necesarias. 




en nuestro paquete Servlet crearemos un nuevo con nombre Ingreso e implementaremos la clase busqueda validadora,  recibe los parametros de busqueda  desde login.jsp, no con sintaxis de SQL si no de JQL  en donde query es la busqueda que adicionamos a nuestra entidad usuario de forma manual y a query.setparameter  le asignamos los parámetros que querramos. en este caso que busque el usuario, la clave y si esta activo,  si cumple los tres requisitos generara el listado, si uno falla devuelve null


como veran esta implementado en el paquete servlet, basicamente se encarga de hacer la busqueda en la tabla usuario con los parametros recibidos desde el modal que pasaron  por login.jsp en forma de pantalla para recibir los parametros este servlet y simplemente le adicionamos un tercer criterio que es estado boolean y en caso de ser verdadero o usuario activo ejecutala lista y al no encontrar ni un parametro simplemente el login.jsp devuleve error y solicita loguearse de nuevo. 


El paquete dto contiene los getter y setter de la tabla para listar las en caso las necesitemos.  posterior.

algunos archivos extras que nos servirán o al menos no se asusten si los ven pero nos sirven para configurar de forma rápida, cambiar de base de datos o tablas a la brevedad. 




y listo Taran..




y como resultado


Comentarios, mejoras y aporte bienvenidos. 

Saludos del administrador. 

No hay comentarios:

Publicar un comentario