Ingeniera de Software II

Laboratrio 4 Aplicaciones Complementarias con JSP 1. Creacin de un buscador de Registros En el proyecto Gestin de Estudiantes, vamos a adicionar otros mdulos para darle ms funcionalidad a esta aplicacin. Crear en el proyecto del laboratorio 2 (Proyecto Gestin de Estudiante), el archivo JSP busquedasimple.jsp. El siguiente script permite buscar registros de una base de datos, a continuacin el cdigo 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>CDIGO<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 -

Ingeniera 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 solucin es la muestra en la figura 01

Figura 01: Ingresando clave

A continuacin muestra el detalle de uno de los registros buscados:

MSc. Daniel Alejandro Yucra Sotomayor

Pag. - 2 -

Ingeniera de Software II

Figura 02: Resultado de la Bsqueda

2. Bsqueda con Filtro A continuacin vamos a crear un script que permite realizar bsquedas ms personalizadas, de acuerdo algn criterio de bsqueda por ejemplo edades menores a 20 aos 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 continuacin el cdigo 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 -

Ingeniera 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>CDIGO<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 -

Ingeniera 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 solucin es la muestra en la figura 03

Figura 03: Ingresando edad

A continuacin los detalles del resultado:

Figura 04: Resultado de la consulta

MSc. Daniel Alejandro Yucra Sotomayor

Pag. - 5 -

Ingeniera de Software II

3. Creacin del Mdulo Login El proyecto de Gestin de Mantenimiento debe tener por lo menos un acceso autorizado para poder adicionar, eliminar o modificar registros. Este mdulo esta implementado con sesiones, el cual se debe cerrar una vez que deje de gestionar el mdulo. Para desarrollar este mdulo es necesario crear un Men Principal en caso que el logueo sea exitoso, el script tambin analizar casos cuando no llenen datos y en situaciones en donde el nombre de usuario y password sean incorrectos. Adems vamos a implementar el script para cerrar la sesin. 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 sessin '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 pgina bienvenido.jsp response.sendRedirect( "principal.jsp" ); %> <!DOCTYPE html PUBLIC "http://www.w3.org/TR/html4/loose.dtd" > <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> "-//W3C//DTD HTML 4.01 Transitional//EN"

</head>

MSc. Daniel Alejandro Yucra Sotomayor

Pag. - 6 -

Ingeniera de Software II

<body>

<% // Leemos la variable de sesin 'usuario' String usuario = (String) session.getAttribute( "usuario" ); // Si las variable de sesin 'validado' // y 'usuario' ya habia sido creadadas if(validado!=null && usuario!=null) // Mostramos mensaje de advertencia out.println("<p>Usuario o contrasea incorrectos</p>"); // Si la variable de sesin usuario // no ha sido creada if(usuario==null) // Instanciamos la variable local 'usuario' usuario = ""; // Borramos la variable de sesin 'usuario' session.setAttribute( "usuario", null); %> <h1>Sistema Gestin 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 -

Ingeniera de Software II

</html>

b) A continuacin 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 sesin 'validado' Boolean validado = (Boolean) session.getAttribute( "validado" ); // Si la variable de sesin '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 sessin 'usuario' session.setAttribute( "usuario", usuario); // Cargamos el Driver de MySQL

MSc. Daniel Alejandro Yucra Sotomayor

Pag. - 8 -

Ingeniera de Software II

Class.forName( "com.mysql.jdbc.Driver" ); // Creamos una coneccin a MySQL, Sintaxis: // jdbc:mysql://[servidor]:[puerto]/[base de datos], usuario, contrasea 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 conexin conn.close(); } } // Si la variable de sesin // 'validado' no ha sido creada if(validado==null)

MSc. Daniel Alejandro Yucra Sotomayor

Pag. - 9 -

Ingeniera de Software II

// Establecemos la variable local // 'validado' a true validado = new Boolean(false); // Aadimos la variable de sesin '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 pgina login.jsp response.sendRedirect( "login.jsp" );

%> <!DOCTYPE html PUBLIC "http://www.w3.org/TR/html4/loose.dtd"> <html> <head><title>Bienvenido</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body>Bienvenido al Mdulo de Gestin de Estudiante</body><p> "-//W3C//DTD HTML 4.01 Transitional//EN"

<% 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 Sesin</a>

MSc. Daniel Alejandro Yucra Sotomayor -

Pag. - 10

Ingeniera 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>Adicin</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 sesin creada, crearemos el script salir.jsp. <%@ page session="true" %> <% HttpSession sesionOk = request.getSession(); sesionOk.invalidate(); %>

MSc. Daniel Alejandro Yucra Sotomayor -

Pag. - 11

Ingeniera de Software II

<jsp:forward page="login.jsp"/> d) Adems deber crear la carpeta imagenes para alojar los iconos.

Figura 05: Estructura del proyecto

e) A continuacin la ejecucin del mdulo

Figura 06: Ingreso de Usuario y Password

Cuando ingresan el usuario o password errado.

MSc. Daniel Alejandro Yucra Sotomayor -

Pag. - 12

Ingeniera 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 sesin debe volver nuevamente al script login.jsp 4. Mejorando el diseo de los mdulos Para mejorar la presentacin 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, categora Web y Files Types Cascading Style Sheet.

MSc. Daniel Alejandro Yucra Sotomayor -

Pag. - 13

Ingeniera de Software II

Figura 09: Seleccionando la opcin CSS

Nuestro archivo CSS se llamar style.css

Figura 10: Creando el archivo CSS

A continuacin copiar el siguiente cdigo 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

Ingeniera 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

Ingeniera 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

Ingeniera 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 lnea. <link rel="stylesheet" href="style.css" type="text/css" /> Por ejemplo debe estar antes de definir el ttulo de una pgina <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

Ingeniera de Software II

</head> <body> El resultado es el que debe mostrar a continuacin:

Figura 11: Mdulo de Logueo mejorado en su presentacin

5. Creando la cabecera y pie de pgina para el proyecto a) Creacin 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) Creacin del Pie de Pgina 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

Ingeniera de Software II

<td colspan="2" align="center">Universidad Inca Garcilaso de la Vega<br> Oficina de Informtica y Telecomunicaciones<br> Todos los derechos reservados Copyright 2011</br> </td> </tr> </table> c) Adicionar el header.jsp y footer.jsp al mdulo de gestin de estudiantes En el script login.jsp, debe adicionar solo 2 lneas <jsp:include page="header.jsp" /> y <jsp:include page="footer.jsp" /> Donde corresponda. Finalmente el cdigo del script login.jsp debe quedar de esta manera:

Figura 13: Mdulo de Logueo con header y footer

Para el Menu principal, debera de quedar de la siguiente manera:

MSc. Daniel Alejandro Yucra Sotomayor -

Pag. - 19

Ingeniera de Software II

Figura 14: Mdulo de Gestin 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 prctica Calificada (a los 2 primeros que presenten al final del laboratorio)

MSc. Daniel Alejandro Yucra Sotomayor -

Pag. - 20

Ingeniera de Software II

FACULTAD DE INGENIERA DE COMPUTO Y SISTEMAS Docente: MSc. Daniel Alejandro Yucra Sotomayor Lima, Agosto, del 2011 Consultas: dyucra@gmail.com

MSc. Daniel Alejandro Yucra Sotomayor -

Pag. - 21