Download MSc. Daniel Alejandro Yucra Sotomayor Pag. - 1

Ingeniería de Software II
Laboratório 4
Aplicaciones Complementarias con JSP
1. Creación de un buscador de Registros
En el proyecto Gestión de Estudiantes, vamos a adicionar otros módulos para darle más funcionalidad a
esta aplicación.
Crear en el proyecto del laboratorio 2 (Proyecto Gestión de Estudiante), el archivo JSP
“busquedasimple.jsp”. El siguiente script permite buscar registros de una base de datos, a continuación
el código fuente:
<%@ page import="java.io.*,java.util.*,java.net.*,java.sql.*" %>
<%
// declarando y creando objetos globales
Connection canal = null;
ResultSet tabla= null;
Statement instruccion=null;
String strcon = "jdbc:mysql://localhost/estudiante?user=root&password=uigv";
if(request.getParameter("OK") != null)
{
// abriendo canal o enlace en su propio try-catch
try {
Class.forName("com.mysql.jdbc.Driver").newInstance();
canal=DriverManager.getConnection(strcon);
instruccion = canal.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE,
ResultSet.CONCUR_UPDATABLE);
} catch(java.lang.ClassNotFoundException e){} catch(SQLException e) {};
// preparando condicion de busqueda
int clave = Integer.parseInt(request.getParameter("CLAVEB"));
// construyendo select con condicion
String q="select * from persona where clave="+clave;
// mandando el sql a la base de datos
try { tabla = instruccion.executeQuery(q);
// mandando resultset a tabla html
out.println("<H3>Consulta de la Tabla Persona</H3>");
out.println("<TABLE Border=10 CellPadding=5><TR>");
out.println("<TH
bgcolor=#525666><FONT
COLOR=WHITE>CÓDIGO<font></TH><TH
bgcolor=#525666><FONT
COLOR=WHITE>NOMBRE
Y
APELLIDO</FONT></TH><TH
bgcolor=#525666><FONT
COLOR=WHITE>EDAD</FONT></TH><TH
bgcolor=#525666><FONT
COLOR=WHITE>ESTATURA</FONT></TH</TR>");
while(tabla.next()) {
out.println("<TR>");
out.println("<TD>"+tabla.getString(1)+"</TD>");
out.println("<TD>"+tabla.getString(2)+"</TD>");
MSc. Daniel Alejandro Yucra Sotomayor
Pag. - 1 -
Ingeniería de Software II
out.println("<TD>"+tabla.getString(3)+"</TD>");
out.println("<TD>"+tabla.getString(4)+"</TD>");
out.println("</TR>"); }; // fin while
out.println("</TABLE></CENTER></DIV></HTML>");
} //fin try no usar ; al final de dos o mas catchs
catch(SQLException e) {};
try {tabla.close();instruccion.close();canal.close();} catch(SQLException e) {};
};
// construyendo forma dinamica
out.println("<FORM ACTION=busquedasimple.jsp METHOD=post>");
out.println("CLAVE BUSCAR:<INPUT TYPE=TEXT NAME=CLAVEB><BR>");
out.println("<INPUT TYPE=SUBMIT NAME=OK VALUE=BUSCAR><BR>");
out.println("</FORM>");
%>
El resultado de esta solución es la muestra en la figura 01
Figura 01: Ingresando clave
A continuación muestra el detalle de uno de los registros buscados:
MSc. Daniel Alejandro Yucra Sotomayor
Pag. - 2 -
Ingeniería de Software II
Figura 02: Resultado de la Búsqueda
2. Búsqueda con Filtro
A continuación vamos a crear un script que permite realizar búsquedas más personalizadas, de acuerdo
algún criterio de búsqueda por ejemplo edades menores a 20 años o estaturas menos de 180 cm.
Crear el archivo JSP “busquedafiltro.jsp”. El siguiente script permite buscar registros de una base de
datos de acuerdo a un criterio, a continuación el código fuente:
<%@ page import="java.io.*,java.util.*,java.net.*,java.sql.*" %>
<%
// declarando y creando objetos globales
Connection canal = null;
ResultSet tabla= null;
Statement instruccion=null;
String strcon = "jdbc:mysql://localhost/estudiante?user=root&password=uigv";
if(request.getParameter("OK") != null)
{
// abriendo canal o enlace en su propio try-catch
try {
Class.forName("com.mysql.jdbc.Driver").newInstance();
canal=DriverManager.getConnection(strcon);
MSc. Daniel Alejandro Yucra Sotomayor
Pag. - 3 -
Ingeniería de Software II
instruccion = canal.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE,
ResultSet.CONCUR_UPDATABLE);
} catch(java.lang.ClassNotFoundException e){} catch(SQLException e) {};
// preparando condicion de busqueda
int edad = Integer.parseInt(request.getParameter("EDAD"));
String q="select * from persona where edad >="+edad;
// mandando el sql a la base de datos
try { tabla = instruccion.executeQuery(q);
// mandando resultset a tabla html
out.println("<H3>Resultados de la Busqueda </H3>");
out.println("<TABLE Border=10 CellPadding=5><TR>");
out.println("<TH
bgcolor=#525666><FONT
COLOR=WHITE>CÓDIGO<font></TH><TH
bgcolor=#525666><FONT
COLOR=WHITE>NOMBRE
Y
APELLIDO</FONT></TH><TH
bgcolor=#525666><FONT
COLOR=WHITE>EDAD</FONT></TH><TH
bgcolor=#525666><FONT
COLOR=WHITE>ESTATURA</FONT></TH</TR>");
while(tabla.next()) {
out.println("<TR>");
out.println("<TD>"+tabla.getString(1)+"</TD>");
out.println("<TD>"+tabla.getString(2)+"</TD>");
out.println("<TD>"+tabla.getString(3)+"</TD>");
out.println("<TD>"+tabla.getString(4)+"</TD>");
out.println("</TR>"); }; // fin while
out.println("</TABLE></CENTER></DIV></HTML>");
} //fin try no usar ; al final de dos o mas catchs
catch(SQLException e) {};
try {tabla.close();instruccion.close();canal.close();} catch(SQLException e) {};
};
MSc. Daniel Alejandro Yucra Sotomayor
Pag. - 4 -
Ingeniería de Software II
// construyendo forma dinamica
out.println("<FORM ACTION=busquedafiltro.jsp METHOD=post>");
out.println("EDAD > =<INPUT TYPE=text NAME=EDAD><BR>");
out.println("<INPUT TYPE=SUBMIT NAME=OK VALUE=FILTRAR><BR>");
out.println("</FORM>");
%>
El resultado de esta solución es la muestra en la figura 03
Figura 03: Ingresando edad
A continuación los detalles del resultado:
Figura 04: Resultado de la consulta
MSc. Daniel Alejandro Yucra Sotomayor
Pag. - 5 -
Ingeniería de Software II
3. Creación del Módulo Login
El proyecto de Gestión de Mantenimiento debe tener por lo menos un acceso autorizado para poder
adicionar, eliminar o modificar registros. Este módulo esta implementado con sesiones, el cual se debe
cerrar una vez que deje de gestionar el módulo.
Para desarrollar este módulo es necesario crear un Menú Principal en caso que el logueo sea exitoso, el
script también analizar casos cuando no llenen datos y en situaciones en donde el nombre de usuario y
password sean incorrectos.
Además vamos a implementar el script para cerrar la sesión.
a) Primero debe crear el archivo “login.jsp”
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-88591"%>
<%
// Leemos la variable de sessión 'validado'
Boolean validado = (Boolean) session.getAttribute( "validado" );
// Si la variable de session 'valiadado' ya
// ha sido creada o el valor es 'true'
if( validado!=null && validado.booleanValue())
// Redireccionamos a la página bienvenido.jsp
response.sendRedirect( "principal.jsp" );
%>
<!DOCTYPE
html
PUBLIC
"http://www.w3.org/TR/html4/loose.dtd" >
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Login</title>
</head>
MSc. Daniel Alejandro Yucra Sotomayor
Pag. - 6 -
Ingeniería de Software II
<body>
<%
// Leemos la variable de sesión 'usuario'
String usuario = (String) session.getAttribute( "usuario" );
// Si las variable de sesión 'validado'
// y 'usuario' ya habia sido creadadas
if(validado!=null && usuario!=null)
// Mostramos mensaje de advertencia
out.println("<p>Usuario o contraseña incorrectos</p>");
// Si la variable de sesión usuario
// no ha sido creada
if(usuario==null)
// Instanciamos la variable local 'usuario'
usuario = "";
// Borramos la variable de sesión 'usuario'
session.setAttribute( "usuario", null);
%>
<h1>Sistema Gestión de Mantenimiento de Estudiantes</h1>
<h2>Login del Sistema</h2>
<form method="post" action="principal.jsp" name="formLogin">
<input type="text" name="usuario" value="<%=usuario%>"><br>
<input type="password" name="contrasena"><br>
<input type="submit" name="enviar" value="enviar">
</form>
</body>
MSc. Daniel Alejandro Yucra Sotomayor
Pag. - 7 -
Ingeniería de Software II
</html>
b) A continuación creamos el script “principal.jsp”, en caso que el logueo sea exitoso.
<%@ page import="java.sql.*" %>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-88591"%>
<%
// Leemos la variable de sesión 'validado'
Boolean validado = (Boolean) session.getAttribute( "validado" );
// Si la variable de sesión 'validado' no ha
// sido creada o contiene un valor 'false'
if( validado==null || !validado.booleanValue() )
{
// Leemos la variable POST 'usuario'
String usuario= request.getParameter( "usuario" );
// Leemos la variable POST 'contrasena'
String contrasena = request.getParameter( "contrasena" );
// Si las variables POST 'usuario' y 'contrasena'
// existen y 'usuario' contiene texto
if(usuario!=null && contrasena!=null && !usuario.equals("") )
{
// Establecemos la variable de sessión 'usuario'
session.setAttribute( "usuario", usuario);
// Cargamos el Driver de MySQL
MSc. Daniel Alejandro Yucra Sotomayor
Pag. - 8 -
Ingeniería de Software II
Class.forName( "com.mysql.jdbc.Driver" );
// Creamos una conección a MySQL, Sintaxis:
// jdbc:mysql://[servidor]:[puerto]/[base de datos], usuario, contraseña
Connection conn = DriverManager.getConnection( "jdbc:mysql://localhost/estudiante" , "root", "uigv" );
// Creamos un Statement
Statement stmt = conn.createStatement();
// Cramos un Resultado de Consulta SQL
ResultSet rs = stmt.executeQuery(
"SELECT usuario FROM usuarios " +
"WHERE usuario='" + usuario + "' " +
"AND contrasena='" + contrasena + "'"
);
// Si el resultado contiene filas
if( rs.next() )
// Establecemos la variable local
// 'validado' a true
validado = new Boolean(true);
// Cerramos el Statment
stmt.close();
// Cerramos la conexión
conn.close();
}
}
// Si la variable de sesión
// 'validado' no ha sido creada
if(validado==null)
MSc. Daniel Alejandro Yucra Sotomayor
Pag. - 9 -
Ingeniería de Software II
// Establecemos la variable local
// 'validado' a true
validado = new Boolean(false);
// Añadimos la variable de sesión 'validado'
// con el contenido de la variable local
session.setAttribute( "validado", validado);
// Si la variable local 'validado' es false
if( !validado.booleanValue() )
// Redireccionamos a la página login.jsp
response.sendRedirect( "login.jsp" );
%>
<!DOCTYPE
html
PUBLIC
"http://www.w3.org/TR/html4/loose.dtd">
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head><title>Bienvenido</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>Bienvenido al Módulo de Gestión de Estudiante</body><p>
<%
HttpSession sesion=request.getSession();
String nombre=(String)sesion.getAttribute("usuario");
out.println("Usuario Activo:" +nombre);
%>
<a href="salir.jsp"><img src="/GestionEstudiantes/imagenes/cerrar.png" width="20" border="0">
Cerrar Sesión</a>
MSc. Daniel Alejandro Yucra Sotomayor
-
Pag. - 10
Ingeniería de Software II
<jsp:include page="consultasimple.jsp" />
<table border="0">
<tr>
<td> <a href="adicion.jsp"><img src="/GestionEstudiantes/imagenes/adicion.png" border="0">
<br>Adición</a>
</td>
<td>
<a
border="0">
href="busquedasimple.jsp"><img
src="/GestionEstudiantes/imagenes/buscar.png"
<br>Buscar</a>
</td>
<td> <a href="modifica.jsp"><img src="/GestionEstudiantes/imagenes/editar.png" border="0">
<br>Editar</a>
</td>
<td> <a href="eliminar.jsp"><img src="/GestionEstudiantes/imagenes/elimina.png" border="0">
<br>Eliminar</a>
</tr>
</table>
</html>
c) Para cerrar la sesión creada, crearemos el script “salir.jsp”.
<%@ page session="true" %>
<%
HttpSession sesionOk = request.getSession();
sesionOk.invalidate();
%>
MSc. Daniel Alejandro Yucra Sotomayor
-
Pag. - 11
Ingeniería de Software II
<jsp:forward page="login.jsp"/>
d) Además deberá crear la carpeta “imagenes” para alojar los iconos.
Figura 05: Estructura del proyecto
e) A continuación la ejecución del módulo
Figura 06: Ingreso de Usuario y Password
Cuando ingresan el usuario o password errado.
MSc. Daniel Alejandro Yucra Sotomayor
-
Pag. - 12
Ingeniería de Software II
Figura 07: Cuando el usuario y password son incorrectos
Cuando el nombre de usuario y password es correcto:
Figura 08: Menú de mantenimiento
Cuando cierra la sesión debe volver nuevamente al script “login.jsp”
4. Mejorando el diseño de los módulos
Para mejorar la presentación es necesario crear un hoja de estilo (CSS)
a) Para crear la Hoja de Estilo desde Netbeans debe hacer click derecho en el proyecto y seleccionar,
categoría “Web” y Files Types “Cascading Style Sheet”.
MSc. Daniel Alejandro Yucra Sotomayor
-
Pag. - 13
Ingeniería de Software II
Figura 09: Seleccionando la opción CSS
Nuestro archivo CSS se llamará “style.css”
Figura 10: Creando el archivo CSS
A continuación copiar el siguiente código para la hoja de estilo:
/*
Document : style
Created on : 16-ago-2011, 0:10:38
Author
: Daniel Yucra Sotomayor
Description:
MSc. Daniel Alejandro Yucra Sotomayor
-
Pag. - 14
Ingeniería de Software II
Purpose of the stylesheet follows.
*/
/*
TODO customize this sample style
Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/
root {
display: block;
}
*{
font-family:sans-serif;
font-size:18px;
}
body{
background-color:#fbfbfb;
}
h1, h2, h3, h4, h5, h6{
text-align:center;
}
p.alerta{
MSc. Daniel Alejandro Yucra Sotomayor
-
Pag. - 15
Ingeniería de Software II
text-align:center;
color:#F00;
position:relative;
}
form{
position:relative;
width:510px;
min-width:510px;
margin-left:-255px;
left:50%;
margin-top:1%;
top:25%;
}
form fieldset{
-moz-border-radius:10px;
border-style:solid;
border-width:1px;
border-color:#868686;
}
form input{
-moz-border-radius:5px;
height:30px;
border:1px solid #868686;
MSc. Daniel Alejandro Yucra Sotomayor
-
Pag. - 16
Ingeniería de Software II
padding-left:5px;
padding-right:5px;
}
form button{
-moz-border-radius:5px;
border:1px solid #868686;
background-color:#d6d6d6;
margin:10px 0;
}
div#contenedor{
margin:5em auto 0 auto;
width:510px;
border:1px solid #868686;
-moz-border-radius:10px;
padding:10px;
}
Para adicionar el archivo de referencia de la hoja de estilo solo debe copiar esta línea.
<link rel="stylesheet" href="style.css" type="text/css" />
Por ejemplo debe estar antes de definir el título de una página
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Login</title>
MSc. Daniel Alejandro Yucra Sotomayor
-
Pag. - 17
Ingeniería de Software II
</head>
<body>
El resultado es el que debe mostrar a continuación:
Figura 11: Módulo de Logueo mejorado en su presentación
5. Creando la cabecera y pie de página para el proyecto
a) Creación del encabezado
Para poder colocar un encabezado solo debe crear el archivo “header.jsp”
<center>
<img src="/GestionEstudiantes/imagenes/banner.png"></img>
</center>
Figura 12: Cabecera con imagen
b) Creación del Pie de Página
Para poder colocar un encabezado solo debe crear el archivo “footer.jsp”
<table border="0" cellspacing="5" cellpadding="0">
<tr>
MSc. Daniel Alejandro Yucra Sotomayor
-
Pag. - 18
Ingeniería de Software II
<td colspan="2" align="center">Universidad Inca Garcilaso de la Vega<br>
Oficina de Informática y Telecomunicaciones<br>
Todos los derechos reservados Copyright © 2011</br>
</td>
</tr>
</table>
c) Adicionar el header.jsp y footer.jsp al módulo de gestión de estudiantes
En el script “login.jsp”, debe adicionar solo 2 líneas
<jsp:include page="header.jsp" />
y
<jsp:include page="footer.jsp" />
Donde corresponda. Finalmente el código del script “login.jsp” debe quedar de esta manera:
Figura 13: Módulo de Logueo con header y footer
Para el Menu principal, debería de quedar de la siguiente manera:
MSc. Daniel Alejandro Yucra Sotomayor
-
Pag. - 19
Ingeniería de Software II
Figura 14: Módulo de Gestión de Estudiante con header y footer
Actividades:
a) Aplicar sesiones al resto de los script creados
b) Adicionar la hoja de estilo al resto de los script creados
c) Adicionar el header.php y footer.php a todo el proyecto
Importante: Por 2 puntos a la práctica Calificada (a los 2 primeros que presenten al final del
laboratorio)
MSc. Daniel Alejandro Yucra Sotomayor
-
Pag. - 20
Ingeniería de Software II
FACULTAD DE INGENIERÍA DE COMPUTO Y SISTEMAS
Docente: MSc. Daniel Alejandro Yucra Sotomayor
Lima, Agosto, del 2011
Consultas: [email protected]
MSc. Daniel Alejandro Yucra Sotomayor
-
Pag. - 21