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 WEB

Objetivo

Conocer conceptos e ideas prácticas sobre el desarrollo de aplicaciones de base de datos

accesibles 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 una
arquitectura de tres capas.

Metodología

Primero, en los grupos de trabajos deben seguir el ejemplo que se presenta a continuación y enviar
la 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 la
mañ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 de
mayo un avance de la aplicación que tenga programado el ingreso de todos los datos necesarios
para su funcionamiento.

Tercero, el seis de junio deben entregar a medio día (12:00M) un avance de la aplicación con
algunos reportes programados, y finalmente, el día trece del mismo mes deben entregar, también
antes de medio día (12:00M), un prototipo (obviamente funcional) de la aplicación que contenga los
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 punto
con cinco centésimas (1.5 puntos) por cada hora que transcurra, mejor dicho, después de tres
horas de retraso no tiene sentido enviarlo por correo electrónico. También es importante que
tengan en cuenta que la presentación de los trabajos tendrá una representación en la nota, donde
una entrega como mínimo para ser considerada bien presentable, debe contener un fichero con los
nombres de los integrantes del grupo, otro con el script de la base de datos y otro con una breve
descripción de la aplicación (este último, solo debe tenerse en cuenta en la entrega final).

Ejemplo: Una agenda en la Web

Este 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 agenda

Y 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),
 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 agenda

Lo 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

Figura 4 Asignación del nombre (y otros parámetros) de la nueva base de datos

Figura 5 Base de datos creada

Segundo, una vez creada la base de datos, se ejecuta sobre esta el script de la figura 2 y se
procede al paso tres que consiste en crear la aplicación de base de datos en NetBeans, como se
aprecia 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

 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 para

programadores 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, los
cuales podrían llamarse controlador, donde residirá el Servlet controlador, y el otro paquete podría
denominarse objetos, donde se almacenarán las clases que corresponden con las tablas del
modelo relacional.
 Figura 10 Creación de los paquetes donde residirán los ficheros con código fuente

El quinto paso consiste en la creación del Servlet controlador haciendo click con el botón derecho
del ratón en el paquete llamado controlador y seleccionar la opción de crear un Servlet y después
se le asigna el nombre ServletControlador.

Figura 11 Selección de creación del Servlet controlador

El sexto paso consiste en modificar, con el contenido resaltado en rojo en la figura 12, el fichero de
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/javaee
http://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>
 </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.xml

El séptimo paso es escribir las clases que concuerdan con las relaciones del modelo de la base de
datos: Usuario y Tarea, las cuales deben residir en el paquete denominado objetos. Tal y como
se 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) {
 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;
 }

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

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;
}
 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 Tarea

El 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;
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
 */
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. Click

on the + sign on the left to edit the code.">
/**
* Handles the HTTP <code>GET</code> method.
* @param request servlet request
* @param response servlet response
*/
 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')",
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")));
 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"),
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 ServletControlador

Finalmente, el programa concluye con la codificación de los Java Server Pages que corresponden
con 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 denominada
Web Pages.
<%--
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"%>
<!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>
 </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>
 </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">
<%
 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>
 <%
}

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.jsp

Es importante que le presten atención a las palabras en azul, debido a que representan acciones
que son computadas en el Servlet controlador e invocadas por los formularios.

Buena suerte!!!