Tallerprogramacion

323 views

Published on

  • Be the first to comment

  • Be the first to like this

Tallerprogramacion

  1. 1. Universidad de Córdoba Ingeniería de Sistemas Diseño y programación de base de datos Prof. M.Sc. Isaac Bernardo Caicedo Castro PROGRAMACIÓN DE APLICACIONES DE BASE DE DATOS ACCESIBLES VÍA WEBObjetivoConocer conceptos e ideas prácticas sobre el desarrollo de aplicaciones de base de datosaccesibles a través de la World Wide Web (WWW), utilizando la tecnología Java (Servlets y JSPs),el servidor de base de datos Postgres y el patrón de construcción de software MVC en unaarquitectura de tres capas.MetodologíaPrimero, en los grupos de trabajos deben seguir el ejemplo que se presenta a continuación y enviarla aplicación al buzón de correo electrónico del profesor:ib.caicedo45@egresados.uniandes.edu.co. La duración de esta actividad consiste en toda lamañana del veintitrés de mayo (obviamente del año en curso), es decir, de 7:00AM a 06:00PM.Segundo, los grupos de trabajo deben entregar a más tardar el medio día (12:00M) del treinta demayo un avance de la aplicación que tenga programado el ingreso de todos los datos necesariospara su funcionamiento.Tercero, el seis de junio deben entregar a medio día (12:00M) un avance de la aplicación conalgunos reportes programados, y finalmente, el día trece del mismo mes deben entregar, tambiénantes de medio día (12:00M), un prototipo (obviamente funcional) de la aplicación que contenga los
  2. 2. reportes esenciales para su operación en un ambiente de pruebas.Nota: Los trabajos entregados fuera del lapso estipulado tendrán una rebaja en la nota de un puntocon cinco centésimas (1.5 puntos) por cada hora que transcurra, mejor dicho, después de treshoras de retraso no tiene sentido enviarlo por correo electrónico. También es importante quetengan en cuenta que la presentación de los trabajos tendrá una representación en la nota, dondeuna entrega como mínimo para ser considerada bien presentable, debe contener un fichero con losnombres de los integrantes del grupo, otro con el script de la base de datos y otro con una brevedescripción de la aplicación (este último, solo debe tenerse en cuenta en la entrega final).Ejemplo: Una agenda en la WebEste ejemplo básicamente consta de los siguientes requisitos funcionales: 1. Controlar el acceso de los usuarios por autenticación. 2. Mostrar las tareas del día. 3. Mostrar las tareas de un día específico. 4. Registrar una tarea.El esquema de la base de datos es el siguiente:Usuario (idUsuario, nombresUsuario, apellidosUsuario, direccionUsuario,telefonoUsuario, loginUsuario, passwordUsuario)Tarea (idUsuarioTarea, descripcionTarea, fechaTarea, horaTarea) Figura 1 Esquema de la base de datos de la agendaY el script de la base de datos expresado en SQL es:create table Usuario ( idUsuario SERIAL not null, nombresUsuario varchar(200) not null, apellidosUsuario varchar(200) not null, direccionUsuario varchar(255),
  3. 3. telefonoUsuario varchar(30), loginUsuario varchar(200) not null, passwordUsuario varchar(200) not null, primary key (idUsuario), unique (loginUsuario));create table Tarea ( idUsuarioTarea integer not null, descripcionTarea text not null, fechaTarea date not null, horaTarea time not null, primary key (idUsuarioTarea, descripcionTarea, fechaTarea, horaTarea), foreign key (idUsuarioTarea) references Usuario (idUsuario) on delete cascade on update cascade); Figura 2 Script de la base de datos de la agendaLo primero que se debe hacer es crear la base de datos como se aprecia en las siguientes figuras: Figura 3 Selección de la opción para crear una base de datos
  4. 4. Figura 4 Asignación del nombre (y otros parámetros) de la nueva base de datosFigura 5 Base de datos creada
  5. 5. Segundo, una vez creada la base de datos, se ejecuta sobre esta el script de la figura 2 y seprocede al paso tres que consiste en crear la aplicación de base de datos en NetBeans, como seaprecia en las siguientes figuras. Figura 6 Selección de la opción para crear un nuevo proyecto Figura 7 Selección de la opción para una aplicación Web
  6. 6. Figura 8 Se le introduce el nombre de la aplicación (agendaweb) Figura 9 Se selecciona el contenedor Web con el que se va a trabajar (Apache Tomcat)Después de seleccionar el contenedor Web, se podría seleccionar un framework (solo paraprogramadores experimentados) y se finaliza la creación de la aplicación.El cuarto paso consiste en crear dos paquetes en la sección denominada Source Packages, loscuales podrían llamarse controlador, donde residirá el Servlet controlador, y el otro paquete podríadenominarse objetos, donde se almacenarán las clases que corresponden con las tablas delmodelo relacional.
  7. 7. Figura 10 Creación de los paquetes donde residirán los ficheros con código fuenteEl quinto paso consiste en la creación del Servlet controlador haciendo click con el botón derechodel ratón en el paquete llamado controlador y seleccionar la opción de crear un Servlet y despuésse le asigna el nombre ServletControlador. Figura 11 Selección de creación del Servlet controladorEl sexto paso consiste en modificar, con el contenido resaltado en rojo en la figura 12, el fichero de
  8. 8. configuración denominado web.xml que se encuentra ubicado en la carpeta WEB-INF.<?xml version="1.0" encoding="UTF-8"?><web-app version="2.5" 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/javaeehttp://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <servlet> <servlet-name>ServletControlador</servlet-name> <servlet-class>controlador.ServletControlador</servlet-class> <init-param> <param-name>driverBaseDatos</param-name> <param-value>org.postgresql.Driver</param-value> </init-param> <init-param> <param-name>urlBaseDatos</param-name> <param-value>jdbc:postgresql://127.0.0.1/agendaDB </param-value> </init-param> <init-param> <param-name>usuario</param-name> <param-value>postgres</param-value> </init-param> <init-param> <param-name>password</param-name> <param-value>01234567</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>ServletControlador</servlet-name> <url-pattern>*.do</url-pattern> </servlet-mapping> <session-config> <session-timeout> 30 </session-timeout>
  9. 9. </session-config> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app> Figura 12 Contenido del fichero de configuración web.xmlEl séptimo paso es escribir las clases que concuerdan con las relaciones del modelo de la base dedatos: Usuario y Tarea, las cuales deben residir en el paquete denominado objetos. Tal y comose aprecia en las figuras 13 y 14.package objetos;/** * * @author Prof. M.Sc. Isaac Bernardo Caicedo Castro */public class Usuario { private String idUsuario; private String nombresUsuario; private String apellidosUsuario; private String direccionUsuario; private String telefonoUsuario; private String loginUsuario; private String passwordUsuario; public Usuario() { } public Usuario(String idUsuario, String nombresUsuario, String apellidosUsuario, String direccionUsuario, String telefonoUsuario, String loginUsuario, String passwordUsuario) {
  10. 10. setIdUsuario(idUsuario); setNombresUsuario(nombresUsuario); setApellidosUsuario(apellidosUsuario); setDireccionUsuario(direccionUsuario); setTelefonoUsuario(telefonoUsuario); setLoginUsuario(loginUsuario); setPasswordUsuario(passwordUsuario);}public String getIdUsuario() { return idUsuario;}public void setIdUsuario(String idUsuario) { this.idUsuario = idUsuario;}public String getNombresUsuario() { return nombresUsuario;}public void setNombresUsuario(String nombresUsuario) { this.nombresUsuario = nombresUsuario;}public String getApellidosUsuario() { return apellidosUsuario;}public void setApellidosUsuario(String apellidosUsuario) { this.apellidosUsuario = apellidosUsuario;}public String getDireccionUsuario() { return direccionUsuario;
  11. 11. } public void setDireccionUsuario(String direccionUsuario) { this.direccionUsuario = direccionUsuario; } public String getTelefonoUsuario() { return telefonoUsuario; } public void setTelefonoUsuario(String telefonoUsuario) { this.telefonoUsuario = telefonoUsuario; } public String getLoginUsuario() { return loginUsuario; } public void setLoginUsuario(String loginUsuario) { this.loginUsuario = loginUsuario; } public String getPasswordUsuario() { return passwordUsuario; } public void setPasswordUsuario(String passwordUsuario) { this.passwordUsuario = passwordUsuario; }} Figura 13 Fichero objetos.Usuario.java que corresponde con la clase Usuario
  12. 12. package objetos;/** * * @author Prof. M.Sc. Isaac Bernardo Caicedo Castro */public class Tarea { private String idUsuarioTarea; private String descripcionTarea; private String fechaTarea; private String horaTarea; public Tarea() { } public Tarea(String idUsuarioTarea, String descripcionTarea, String fechaTarea, String horaTarea) { setIdUsuarioTarea(idUsuarioTarea); setDescripcionTarea(descripcionTarea); setFechaTarea(fechaTarea); setHoraTarea(horaTarea); } public String getIdUsuarioTarea() { return idUsuarioTarea; } public void setIdUsuarioTarea(String idUsuarioTarea) { this.idUsuarioTarea = idUsuarioTarea; } public String getDescripcionTarea() { return descripcionTarea; }
  13. 13. public void setDescripcionTarea(String descripcionTarea) { this.descripcionTarea = descripcionTarea; } public String getFechaTarea() { return fechaTarea; } public void setFechaTarea(String fechaTarea) { this.fechaTarea = fechaTarea; } public String getHoraTarea() { return horaTarea; } public void setHoraTarea(String horaTarea) { this.horaTarea = horaTarea; }} Figura 14 Fichero objetos.Tarea.java que corresponde con la clase TareaEl octavo paso es escribir el Servlet controlador como lo muestra la siguiente figura.package controlador;import java.io.IOException;import java.sql.Connection;import java.sql.DriverManager;import java.sql.ResultSet;import java.sql.SQLException;import java.sql.Statement;import java.util.ArrayList;
  14. 14. import javax.servlet.ServletConfig;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import objetos.Tarea;import objetos.Usuario;/** * * @author Prof. M.Sc. Isaac Bernardo Caicedo Castro */public class ServletControlador extends HttpServlet { private Connection conexión; public void init(ServletConfig config) throws ServletException { try { Class.forName(config.getInitParameter("driverBaseDatos")); conexión =DriverManager.getConnection(config.getInitParameter("urlBaseDatos"), config.getInitParameter("usuario"), config.getInitParameter("password")); } catch (SQLException ex) { System.err.println(ex); } catch (ClassNotFoundException ex) { System.err.println(ex); } } /** * Processes requests for both HTTP <code>GET</code> and <code>POST</code>methods. * @param request servlet request * @param response servlet response
  15. 15. */ protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); String acción = request.getRequestURL().substring( request.getRequestURL().lastIndexOf("/") + 1); if (request.getSession().getAttribute("usuario") != null) { if (acción.equals("autenticar.do")) autenticar(request, response); else if (acción.equals("mostrarformulariotarea.do")) mostrarRegistarTarea(request, response); else if (acción.equals("registrartarea.do")) registrarTarea(request, response); else if (acción.equals("mostrartareas.do")) mostrarTareas(request, response); else if (acción.equals("salir.do")) salir(request, response); } else autenticar(request, response); } // <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Clickon the + sign on the left to edit the code."> /** * Handles the HTTP <code>GET</code> method. * @param request servlet request * @param response servlet response */
  16. 16. protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } /** * Handles the HTTP <code>POST</code> method. * @param request servlet request * @param response servlet response */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } /** * Returns a short description of the servlet. */ public String getServletInfo() { return "Esto es una agenda en la Web"; }// </editor-fold> private void registrarTarea(HttpServletRequest request, HttpServletResponse response) { try { Tarea tarea = new Tarea(((Usuario)request.getSession().getAttribute("usuario")).getIdUsuario(),request.getParameter("descripcionTarea"), request.getParameter("fechaTarea"),request.getParameter("horaTarea")); String sql = String.format("insert into Tarea (idUsuarioTarea,descripcionTarea, fechaTarea, horaTarea)" + "values (%s, %s, %s, %s)",
  17. 17. tarea.getIdUsuarioTarea(), tarea.getDescripcionTarea(), tarea.getFechaTarea(),tarea.getHoraTarea()); Statement instrucción = conexión.createStatement(); int nroTuplas = instrucción.executeUpdate(sql); if (nroTuplas > 0) response.sendRedirect("inicio.jsp"); else response.sendRedirect(String.format("agregartarea.jsp?onload=%s", "onload="alert(No se ingreso la tarea correctamente)"")); } catch (IOException ex) { System.err.println(ex); } catch (SQLException ex) { System.err.println(ex); } } private void mostrarTareas(HttpServletRequest request, HttpServletResponse response) { try { String sql = String.format( "Select * from Tarea where idUsuarioTarea = %s and fechaTarea = %s", ((Usuario)request.getSession().getAttribute("usuario")).getIdUsuario(), request.getParameter("fechaTarea")); Statement instrucción = conexión.createStatement(); ResultSet resultado = instrucción.executeQuery(sql); ArrayList<Tarea> tareas = new ArrayList<Tarea>(); while (resultado.next()) tareas.add(new Tarea(resultado.getString("idUsuarioTarea"), resultado.getString("descripcionTarea"), resultado.getString("fechaTarea"), resultado.getString("horaTarea")));
  18. 18. request.getSession().setAttribute("tareas", tareas); request.getSession().setAttribute("fecha",request.getParameter("fechaTarea")); response.sendRedirect("tareas.jsp"); } catch (IOException ex) { System.err.println(ex); } catch (SQLException ex) { System.err.println(ex); } } private void mostrarRegistarTarea(HttpServletRequest request, HttpServletResponse response) { try { response.sendRedirect("agregartarea.jsp"); } catch (IOException ex) { System.err.println(ex); } } private void autenticar(HttpServletRequest request, HttpServletResponse response) { try { String sql = String.format("select * from Usuario where loginUsuario like %s and passwordUsuario like%s", request.getParameter("loginUsuario"),request.getParameter("passwordUsuario")); Statement instrucción = conexión.createStatement(); ResultSet resultado = instrucción.executeQuery(sql); if (resultado.next()) { Usuario usr = new Usuario(resultado.getString("idUsuario"),resultado.getString("nombresUsuario"), resultado.getString("apellidosUsuario"),resultado.getString("direccionUsuario"),
  19. 19. resultado.getString("telefonoUsuario"), resultado.getString("loginUsuario"),resultado.getString("passwordUsuario")); response.sendRedirect("inicio.jsp"); request.getSession().setAttribute("usuario", usr); } else { response.sendRedirect(String.format("index.jsp?onload=%s","onload="alert(password invalido)"")); } } catch (IOException ex) { System.err.println(ex); } catch (SQLException ex) { System.err.println(ex); } } private void salir(HttpServletRequest request, HttpServletResponse response) { try { request.getSession().removeAttribute("usuario"); response.sendRedirect(String.format("index.jsp?onload=%s","onload="alert(Gracias por elegir nuestros servicios)"")); } catch (IOException ex) { System.err.println(ex); } }} Figura 15 Fichero controlador.ServletControlador.java que corresponde con la clase ServletControladorFinalmente, el programa concluye con la codificación de los Java Server Pages que correspondencon el código fuente de las figuras 16, 17, 18 y 19, las cuales corresponden con index.jsp,inicio.jsp, agregartarea.jsp y tarea.jsp. Estos ficheros deben ubicarse en la carpeta denominadaWeb Pages.
  20. 20. <%-- Document : index Created on : 23/05/2009, 02:41:33 AM Author : Prof. M.Sc. Isaac Bernardo Caicedo Castro--%><%@page contentType="text/html" pageEncoding="UTF-8"%><!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"> <title>Agenda Web</title> </head> <body <%=request.getParameter("onload")%>> <h2>Agenda Web</h2> <form action="autenticar.do" method="post"> login <input name="loginUsuario" /> <br /> password <input name="passwordUsuario" type="password" /> <br /> <input value="Entrar" type="submit" /> </form> </body></html> Figura 16 Fichero JSP index.jsp<%-- Document : inicio Created on : 23/05/2009, 06:31:57 AM Author : Prof. M.Sc. Isaac Bernardo Caicedo Castro--%><%@page import="java.util.Date"%><%@page import="objetos.Usuario"%><%@page contentType="text/html" pageEncoding="UTF-8"%>
  21. 21. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <% if (request.getSession().getAttribute("usuario") == null) response.sendRedirect("index.jsp"); Date fechaActual = new Date(); %><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Agenda Web</title> </head> <body> <h2>Agenda Web</h2> <b><i>Usuario: <%=((Usuario)request.getSession().getAttribute("usuario")).getNombresUsuario()%></i></b> <table border="1"> <tr> <td> <form action="mostrartareas.do" method="post"> Fecha (aaaa-mm-dd) <input name="fechaTarea" readonly="yes" value="<%=String.format("%tY-%tm-%td", fechaActual, fechaActual, fechaActual)%>" /> <br/> <input value="Mostrar tareas de esta fecha" type="submit" /> </form> </td> </tr> <tr> <td> <form action="mostrarformulariotarea.do" method="post"> <input value="Registar una tarea en la agenda" type="submit" /> </form>
  22. 22. </td> </tr> <tr> <td> <form action="salir.do" method="post"> <input value="Salir" type="submit" /> </form> </td> </tr> </table> </body></html> Figura 17 Fichero JSP inicio.jsp<%-- Document : agregartarea Created on : 23/05/2009, 06:32:25 AM Author : Prof. M.Sc. Isaac Bernardo Caicedo Castro--%><%@page import="java.util.Date"%><%@page import="objetos.Usuario"%><%@page contentType="text/html" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <% if (request.getSession().getAttribute("usuario") == null) response.sendRedirect("index.jsp"); Date fechaActual = new Date(); %><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Agenda Web</title>
  23. 23. </head> <body> <h2>Agenda Web</h2> <b><i>Usuario:<%=((Usuario)request.getSession().getAttribute("usuario")).getNombresUsuario()%></i></b> <form action="registrartarea.do" method="post"> Fecha (aaaa-mm-dd) <input name="fechaTarea"value="<%=String.format("%tY-%tm-%td", fechaActual, fechaActual, fechaActual)%>" /><br /> Hora (hh:mm:ss AM/PM) <input name="horaTarea" value="<%=String.format("%tI:%tM:%tS %Tp", fechaActual, fechaActual, fechaActual,fechaActual)%>" /><br /> Descripci&oacute;n <br /> <textarea name="descripcionTarea"></textarea><br /> <input type="submit" value="Registrar" /> </form> <a href="inicio.jsp">Inicio</a> </body></html> Figura 18 Fichero JSP agregartarea.jsp<%-- Document : tareas Created on : 23/05/2009, 06:33:00 AM Author : Prof. M.Sc. Isaac Bernardo Caicedo Castro--%><%@page import="java.util.ArrayList"%><%@page import="objetos.Tarea"%><%@page import="objetos.Usuario"%><%@page contentType="text/html" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><%
  24. 24. if (request.getSession().getAttribute("usuario") == null) response.sendRedirect("index.jsp");%><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Agenda Web</title> </head> <body> <h2>Agenda Web</h2> <b><i>Usuario:<%=((Usuario)request.getSession().getAttribute("usuario")).getNombresUsuario()%></i></b> <h3>Agenda del d&iacute;a <%=request.getSession().getAttribute("fecha")%></h3> <% ArrayList<Tarea> tareas =(ArrayList)request.getSession().getAttribute("tareas"); if (tareas.size() > 0) { %> <a href="inicio.jsp">Inicio</a> <table border="1"> <tr> <th>Descripcion</th> <th>Hora</th> </tr> <% for (Tarea t : tareas) { %> <tr> <td><%=t.getDescripcionTarea()%></td> <td><%=t.getHoraTarea()%></td> </tr>
  25. 25. <% } request.removeAttribute("fecha"); request.removeAttribute("tareas"); %> </table> <% } else { %> <h3>No hay tareas programadas</h3> <% } %> <a href="inicio.jsp">Inicio</a> </body></html> Figura 19 Fichero JSP tareas.jspEs importante que le presten atención a las palabras en azul, debido a que representan accionesque son computadas en el Servlet controlador e invocadas por los formularios.Buena suerte!!!

×