JSF

Login: MySQL + BootStrap

Sistemas Distribuidos I

Laboratorio
El obje?vo del siguiente laboratorio es
integrar un proyecto desarrollado con JSF a
una base de datos MySQL y aplicando como
front-end framework TwiGer Bootstrap.
Se realizar un login bsico de usuario
validando los datos de ingreso con los valores
almacenados en una tabla MySQL.

Creacin del proyecto

Crear un proyecto usando NetBeans y el
framework JSF
Puede usar como servidor Glasssh o Tomcat

Bootstrap
Ingresar a la pgina de bootstrasp y descargar
la l?ma versin estable v3.3.7
Descargar el paquete dentro de la carpeta
web del proyecto: jsf_login/web/
Extraer el contenido: click derecho extraer
aqu

hGp://getbootstrap.com/

hGp://getbootstrap.com/ge\ng-started/#download

Estructura del proyecto con Bootstrap

Archivo index.xhtml
Invocar los siguientes namespaces :
hGp://xmlns.jcp.org/jsf/core, envo de datos
mediante ajax y otras funciones core de JSF
hGp://xmlns.jcp.org/jsf/passthrough, para uso
de caracters?cas, atributos y e?quetas
propias de HTML5
Incluir bootstrap en index.xhtml usando la
instruccin:
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />

Archivo index.xhtml

Archivo index.xhtml
Agregamos los controles bsicos para el login
de usuario: cajas de texto y botn de envo de
datos.
Luego se agregarn los atributos para envo
hacia un ManagedBean y validacin de
elementos de entrada.
Al terminar de ingresar el siguiente cdigo,
ejecutar la aplicacin.

Archivo index.xhtml

Base de datos y tabla de usuarios

1. Abrir una nueva pestaa del navegador y
dirigirse hacia hGp://localhost
2. Si est trabajando con AppServ o Xampp
buscar el enlace hacia PhpMyAdmin y hacer
click.
3. En los laboratorios de la facultad el usuario
es root y la clave sistemas. Si trabaja en
un equipo propio asegurarse de saber el
usuario y clave correctos.

Creacin de la DB
En PhpMyadmin crear la base de datos
sd1_demo

Creacin de la DB
Luego de crear la DB, importar el archivo SQL
proporcionado junto a esta gua.
Para importar la DB hacer click en la pestaa
Import ubicado en la parte superior.
Luego ubicar y seleccionar el archivo SQL.
A con?nuacin click en el botn Go o
Con?nuar ubicado en la parte inferior.

Nota: Estos pasos sern explicados y grabados en
clase.

Creacin de la DB

Creacin de la DB

Contenido de la DB

Parmetros de conexin a DB
Para congurar los parmetros de conexin
vamos a editar el archivo web.xml ubicado
dentro de la carpeta WEB-INF
Se agregarn los siguientes parmetros:
JDBC-DRIVER, librera para conexin a MySQL
DB-SERVER, nombre del servidor (localhost)
DB-USER, usuario de conexin (root u otro)
DB-PASSWORD, clave de usuario (depende de la
instalacin)

Creacin de LoginBean (Managed

Bean)
Inicialmente con los atributos:

String msgClass, para cambiar la clase del mensaje
de respuesta de acuerdo al resultado del login
(info: color azul, danger: color rojo en caso de
error, success: color verde en caso de xito)
String message, con?ene el mensaje a mostrar
String username
String password

Creacin de LoginBean (Managed

Bean)
El mtodo constructor inicializar los valores
de msgClass y message
Se crear el mtodo doLogin para probar el
envo de datos y respuesta va Ajax

Archivo index.xhtml
Asignar los valores para la clase y mensaje a
mostrar, estos valores cambiarn de acuerdo
a la respuesta de login.
Se agrega el atributo id al panelGroup para
renderizar su contenido luego de la pe?cin
ajax.

Archivo index.xhtml
Asignar los valores de username y password al
atributo correspondiente de LoginBean. Se
agregan tambin atributos required y
elementos h:message para validacin.

Archivo index.xhtml
Completar el componente ajax con los
elementos a renderizar luego de la pe?cin y
la invocacin al mtodo doLogin()

Ejecutar aplicacin

Clase de conexin a DB
Crear la clase Java DB.java dentro del paquete
com.sd1.db, con los siguientes imports:
import java.io.Serializable; permite invocar una copia del
objeto creado
import java.sql.Connec6on; permite iniciar una sesin de
conexin a DB
import java.sql.DriverManager; la forma o medio por el que
se conectar a DB
import javax.faces.context.FacesContext; para obtener
informacin relacionada al proceso o proyecto, como por
ejemplo parmetros de conexin.

Clase UsuarioDB
Es una clase Java.
Se encargar de realizar la consulta SQL
mediante la cual se validarn el username y
password ingresados.
Debe contener los mismos atributos de la
tabla usuarios.
Debe crearse dentro del paquete com.sd1.db

Clase UsuarioDB

UsuarioDB: imports, atributos y

constructor

UsuarioDB: geGers y seGers

UsuarioDB: doLogin()

UsuarioDB: doLogin()
Este mtodo recibe tres valores:
DB db, es el objeto de conexin a base de datos.
String user, el valor de username ingresado en el
formulario.
String pass, el valor de password ingresado en el
formulario.

UsuarioDB: doLogin()
List<UsuarioDB> list = new ArrayList<UsuarioDB>();
Aqu se almacenarn los valores recuperados de la
consulta obtenidos dentro del resultSet

PreparedStatement prepState = null;
Permite crear una plan?lla SQL a la cual se
reemplazarn los valores.

ResultSet resultSet = null; Con?ene la respuesta de la
base de datos a la consulta realizada.

UsuarioDB: doLogin()
String sql = "SELECT id, nombres FROM usuarios WHERE
username=? AND password=?"; Los valores de ? sern
reemplazados luego.

prepState = db.doConnect().prepareStatement(sql);

prepState.setString(1, user); Se asigna el valor de user al
primer smbolo ?

prepState.setString(2, pass); Se asigna el valor de pass al
segundo smbolo ?

UsuarioDB: doLogin()
resultSet = prepState.executeQuery(); Se ejecuta la consulta SQL

Mientras existan registros, se agregarn a ls lista list
while (resultSet.next())
{
list.add( new UsuarioDB(resultSet.getInt(1), resultSet.getString(2)) );
}

resultSet.getInt(1) Con?ene el valor del campo id
resultSet.getString(2) Con?ene el valor del campo nombres

LoginBean.java
Debemos invocar a UsuarioDB y al import List,
el primero permi?r realizar la conexin y
consulta a DB, el segundo retornar los
registros como una lista.

LoginBean.java
Modicar el mtodo doLogin() para que
invoque a UsuarioDB

Ejecutar aplicacin (1)

Sin ingreso ni envo de datos

Ejecutar aplicacin (2)

Sin ingreso de datos, con envo.

Ejecutar aplicacin (3)

Con ingreso de datos incorrecto y envo

Ejecutar aplicacin (4)

Con ingreso de datos correcto y envo