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>");
Pag. - 1 -
Ingeniera de Software II
out.println("</TABLE></CENTER></DIV></HTML>");
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>"); %>
Pag. - 2 -
Ingeniera de Software II
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);
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) {}; };
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
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>
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>
Pag. - 7 -
Ingeniera de Software II
</html>
<%@ 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
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)
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>
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>
c) Para cerrar la sesin creada, crearemos el script salir.jsp. <%@ page session="true" %> <% HttpSession sesionOk = request.getSession(); sesionOk.invalidate(); %>
Pag. - 11
Ingeniera de Software II
<jsp:forward page="login.jsp"/> d) Adems deber crear la carpeta imagenes para alojar los iconos.
Pag. - 12
Ingeniera de Software II
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.
Pag. - 13
Ingeniera de Software II
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:
Pag. - 14
Ingeniera de Software II
*{ font-family:sans-serif; font-size:18px; }
body{ background-color:#fbfbfb; }
p.alerta{
Pag. - 15
Ingeniera de Software II
Pag. - 16
Ingeniera de Software II
padding-left:5px; padding-right:5px; }
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>
Pag. - 17
Ingeniera de Software II
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>
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>
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:
Pag. - 19
Ingeniera de Software II
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)
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
Pag. - 21