1
Download MSc. Daniel A. Yucra Sotomayor Pag. - 1
Document related concepts
no text concepts found
Transcript
Laboratorio Nro. 7
Desarrollo de una aplicación Login con JSF y
Base de datos
I. Competencia General:
Comprender el entorno de desarrollo de desarrollo de
aplicaciones con 4 capas (datos, lógica de negocio,
web y cliente), utilizando el framework JSF.
II. Introducción
Esta aplicación proporciona autenticación para
acceder a la aplicación después de iniciar sesión con
éxito. Para acceder a la aplicación debería tener un
identificador de usuario y una contraseña en una
base de datos.
III. Creación de la Base de Datos y Tablas
Crear la Base de Datos “sistema” en MySql
A continuación ejecutar el siguiente script SQL
CREATE TABLE IF NOT EXISTS `usuarios` (
`ID` int(11) NOT NULL,
`UName` varchar(50) NOT NULL,
`PWord` varchar(50) NOT NULL,
UNIQUE KEY `ID` (`ID`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
--- Volcado de datos para la tabla
`usuarios`
-INSERT INTO `usuarios` (`ID`, `UName`,
`PWord`) VALUES
(1, 'daniel', 'daniel'),
(2, 'carlos', 'carlitros'),
(3, 'jose', 'joselito');
IV. Creación del Proyecto Logueo con JSF
4.1 Crear el Proyecto
Utilizando alguna versión de Netbeans crear el
proyecto “Logueo”.
Una vez creado automáticamente creará un archivo
de inicio, el mismo que se armará código para el
formulario de logueo
4.2 Código para el formulario
MSc. Daniel A. Yucra Sotomayor
A continuación colocaremos el siguiente código en el
archivo “welcomeJSF.jsp”:
<%-Document : Login
Created on : Jan 18, 2011, 7:58:03 PM
Author : Daniel Yucra
--%>
<%@page contentType="text/html" pageEncoding="UTF8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css"
href="style.css">
<title>LOGIN</title>
</head>
<body>
<center>
<f:view>
<h:form id="login_frm">
<h2>Acceder:</h2>
<table width="250" border="0"
cellspacing="0" cellpadding="2">
<tr>
<td colspan="2">
<h:message for="username"
styleClass="errorMsg"/><br>
<h:message for="password"
styleClass="errorMsg"/>
</td>
</tr>
<tr>
<td><h:outputText value="Username: "/></td>
<td><h:inputText id="username"
value="#{login_bean.username}" required="true"
styleClass="input_text"/></td>
</tr>
<tr>
<td><h:outputText value="Password: "/></td>
<td><h:inputSecret id="password"
value="#{login_bean.password}" required="true"
styleClass="input_text"/></td>
</tr>
<tr>
<td colspan="2" align="center">
<h:commandButton
action="#{login_bean.checkValidUser}" value="Login"
type="submit"/></td>
</tr>
</table>
</h:form>
</f:view>
</center>
</body>
</html>
Pag. - 1 -
* @author Daniel Yucra
*/
import java.sql.*;
import java.util.*;
Los objetos más importantes son:
<h:inputText id="username"
value="#{login_bean.username}" required="true"
styleClass="input_text"/>
<h:inputSecret id="password"
value="#{login_bean.password}" required="true"
styleClass="input_text"/>
<h:commandButton action="#{login_bean.checkValidUser}"
value="Login" type="submit"/>
@ManagedBean(name="login_bean")
@RequestScoped
public class login_bean {
private String username;
private String password;
private String dbusername;
private String dbpassword;
Esto implica que tendríamos que crear una clase
denombre “login_bean”, con sus respectivos atributos
“username” y “password”, además de un método
“checkValidUser” los mismo que servirán para que el
usuario pueda interactuar.
public String getDbpassword() {
return dbpassword;
}
public String getDbusername() {
return dbusername;
}
public String getPassword() {
return password;
}
La primera parte de la aplicación debe correr,
recuerde que se ha combinado código JSF, JSP más
código HTML.
public void setPassword(String password) {
this.password = password;
}
4.3
Creación
“login_bean”
public String getUsername() {
return username;
}
del
JSF
Managed
Beans
Para que el formulario pueda interactuar es necesario
crear la clase “bean” y los 3 objetos puedan ser
aceptados por la clase.
A continuación debe asignarle nombre a la clase y
nombre al nuevo paquete, donde albergará esta
clase especial
Nombre de la Clase: login_bean
Nombre del Paquete: beans
A continuación a la clase creada “login_bean”, le
colocaremos el siguiente código, recuerde que esta
clase algunos atributos deben contener los métodos
set y get:
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package beans;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
/**
*
MSc. Daniel A. Yucra Sotomayor
public void setUsername(String username) {
this.username = username;
}
Connection con;
Statement ps;
ResultSet rs;
String SQL_Str;
public void dbData(String UName)
{
try
{
Class.forName("com.mysql.jdbc.Driver");
con
=
DriverManager.getConnection("jdbc:mysql://localhost:
3306/sistema","root","uigv");
ps = con.createStatement();
SQL_Str="Select * from usuarios where
UName like ('" + UName +"')";
rs=ps.executeQuery(SQL_Str);
rs.next();
dbusername=rs.getString(2).toString();
dbpassword=rs.getString(3).toString();
}
catch(Exception ex)
{
ex.printStackTrace();
System.out.println("Exception Occur :" + ex);
Pag. - 2 -
4.5 Creación de las 2 páginas JSF
}
}
A continuación debe crear las 2 páginas JSF:
public String checkValidUser()
{
dbData(username);
if(username.equalsIgnoreCase(dbusername))
{
if(password.equals(dbpassword))
return "valid";
else
{
return "invalid";
}
}
else
{
return "invalid";
}
}
Código de la Página “success.jsp”
<%-Document : success
Created on : 24-oct-2011, 18:32:14
Author : Daniel Yucra
--%>
<%@page contentType="text/html"
pageEncoding="UTF-8"%>
<%@taglib prefix="f"
uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h"
uri="http://java.sun.com/jsf/html"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
}
El código que permite validar el nombre de usuario y
contraseña es el siguiente:
public String checkValidUser()
{
dbData(username);
if(username.equalsIgnoreCase(dbusername))
{
if(password.equals(dbpassword))
return "valid";
else
{
return "invalid";
}
}
else
{
return "invalid";
}
}
Figura 13: Código del método para validación
4.4 Implementación del resto de paginas JSP
Para completar el proyecto se crearan dos paginas
JSP
a) En el caso de que el nombre y usarios sea
exitoso (loginexitoso.jsp)
MSc. Daniel A. Yucra Sotomayor
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<f:view>
<h:form>
<h2>Hola <h:outputText
value="#{login_bean.username}"/>, tu login es
correcto.</h2>
</h:form>
</f:view>
</body>
</html>
Código de la Página “login_fail.jsp”
<%-Document : login_fail
Created on : 24-oct-2011, 18:33:52
Author : Daniel Yucra
--%>
<%@page contentType="text/html"
pageEncoding="UTF-8"%>
<%@taglib prefix="f"
uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h"
uri="http://java.sun.com/jsf/html"%>
Pag. - 3 -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css"
href="style.css">
<title>LOGIN</title>
</head>
<body>
<center>
<f:view>
<h:form id="login_frm">
<h2>Acceder:</h2>
<table width="250" border="0"
cellspacing="0" cellpadding="2">
<tr>
<td colspan="2">
Usuario o Password
Incorrecto!!<br>
<h:message
for="username" styleClass="errorMsg"/><br>
<h:message for="password"
styleClass="errorMsg"/>
</td>
</tr>
<tr>
<td><h:outputText
value="Username: "/></td>
<td><h:inputText id="username"
value="#{login_bean.username}" required="true"
styleClass="input_text"/></td>
</tr>
<tr>
<td><h:outputText
value="Password: "/></td>
<td><h:inputSecret
id="password" value="#{login_bean.password}"
required="true" styleClass="input_text"/></td>
</tr>
<tr>
<td colspan="2" align="center">
<h:commandButton
action="#{login_bean.checkValidUser}" value="Login"
type="submit"/></td>
</tr>
</table>
</h:form>
</f:view>
</center>
</body>
</html>
MSc. Daniel A. Yucra Sotomayor
4.6 Archivo de Configuración faces-config.xml
Para unir las páginas creadas, y articulas con la clase
vean se debe definir las respectivas reglas de
navegación y casos.
El código es el que muestra a continuación:
<?xml version='1.0' encoding='UTF-8'?>
<!-- =========== FULL CONFIGURATION FILE
==================== -->
<faces-config version="2.0"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd">
<managed-bean>
<managed-bean-name>login_bean</managed-beanname>
<managed-bean-class>beans.login_bean</managed-beanclass>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
<navigation-rule>
<description>Loging Page</description>
<from-view-id>/welcomeJSF.jsp</from-view-id>
<navigation-case>
<from-action>#{login_bean.checkValidUser}</from-action>
<from-outcome>valid</from-outcome>
<to-view-id>/success.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-action>#{login_bean.checkValidUser}</from-action>
<from-outcome>invalid</from-outcome>
<to-view-id>/login_fail.jsp</to-view-id>
</navigation-case>
</navigation-rule>
<navigation-rule>
<description>ReLoging Page</description>
<from-view-id>/login_fail.jsp</from-view-id>
<navigation-case>
<from-action>#{login_bean.checkValidUser}</from-action>
<from-outcome>valid</from-outcome>
<to-view-id>/success.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-action>#{login_bean.checkValidUser}</from-action>
<from-outcome>invalid</from-outcome>
<to-view-id>/login_fail.jsp</to-view-id>
</navigation-case>
</navigation-rule>
<application>
<message-bundle>messages.message</message-bundle>
</application>
</faces-config>
Pag. - 4 -
4.7 Creación de la Hoja de Estilo (CSS)
Para mejorar la presentación de la aplicación debe
crear una hoja de estilos, a continuación el código:
/*
Document : style
Created on : Jan 18, 2010, 8:29:32 PM
Author : Daniel Yucra
Description:
Figura 1: Formulario de Ingreso
*/
/*
TODO customize this sample style
Syntax
recommendation
http://www.w3.org/TR/REC-CSS2/
*/
root {
display: block;
}
body
{
font-family: sans-serif;
font-size: 10px;
color: #000000;
}
h2
{
font-size: 16px;
color: #3d2dff;
font-family:serif;
}
.errorMsg
{
font-size: 12px;
font-family: serif;
font-weight: bold;
color: #FF0000;
padding: 5px;
}
Figura 2: Cuando usuario y password es incorrecto
Figura 3: Cuando usuario y password es correcto
Docente: MSc. Daniel Alejandro Yucra Sotomayor
Lima, Abril del 2011
Consultas: [email protected]
.input_text{
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
border:1px solid #FF7C08;
}
4.8 Ejecutando la aplicación
Solo bastará compilar y ejecutar el proyecto:
MSc. Daniel A. Yucra Sotomayor
Pag. - 5 -
