newtables.sql

1. Planeando la Estructura
Las aplicaciones Web Simples pueden ser diseñadas utilizando una arquitectura
two-tier (cliente-servidor), en la cual la aplicación se comunica directamente con
un servidor web. Las peticiones de usuarios son enviadas al servidor mediante
haciendo uso del protocolo http, son procesadas por el servidor y en caso de que
la petición proceda los resultados son enviados directamente al usuario, éstos
normalmente son archivos escritos en html, con información estática. Las
arquitecturas Two-Tier pueden ser mapeados fácilmente a una configuración
cliente – servidor, donde el navegador web del usuario sirve como cliente, y una
base de datos remota accesible a través de Internet corresponde al servidor (pero
en medio está una tercera capa, el servidor web que se encarga de generar las
páginas web –archivos html- a partir de la información contenida en la base de
datos, para lograr generar estas páginas de forma dinámica, el servidor web
ejecuta scripts encargados de ello. Dichos scripts pueden estar escritos en java,
en unas clases especiales conocidas como Servlets.
Los servlets son objetos que corren dentro del contexto de un contenedor de
servlets (ej: Tomcat) y extienden su funcionalidad.
La palabra servlet deriva de otra anterior, applet, la cual se refería a pequeños
programas escritos en Java que se ejecutan en el contexto de un navegador web,
mientras que un servlet es un programa que se ejecuta en un servidor. El uso más
común de los servlets es generar páginas web de forma dinámica a partir de los
parámetros de la petición que envíe el navegador web.
La aplicación que tú desarrollarás en esta actividad, involucra la creación de dos
páginas JSP (Java Server Pages). La diferencia entre JSP y Servlet, está en que
JSP es una representación gráfica de un aplicación java que interactua con HTML
y el servlet es la aplicación Java. En cada una de esas páginas, agregarás HTML
básico para implementar una interfaz simple, seguida por tags SQL las cuales son
provistas por la tecnología JSTL para hacer una petición a una base de datos.
Considera el siguiente escenario cliente – servidor:
Figura 17
Escenario Cliente Servidor
(Cliente: Navegador Web / Servidores: Web y de Base de Datos)
La página de bienvenida (index.jsp) muestra al usuario un formulario simple
HTML. Cuando un cliente entra a la página index.jsp, el código JSP contenido en
ésta se analiza y recupera los datos de la tabla Sujeto en la base de datos , los
datos se añaden a la página que finalmente es enviada al cliente (navegador web).
Ahora, cuando el usuario selecciona algún elemento del formulario mostrado,
provoca que el cliente haga una solicitud a response.jsp. Cuando se analiza
response.jsp, los datos tanto de la tabla Sujeto como la de Consejero son
obtenidas e insertados dentro de la página. Finalmente, la página regresa al
cliente (navegador web) y el usuario visualiza los datos del elemento que
seleccionó desde el formulario.
2. Crea un nuevo Proyecto
Con el fin de aplicar el escenario descrito anteriormente, desarrollarás una simple
aplicación de un departamento ficticio llamado SBXDADW, Sistemas BX –
Desarrollo de Aplicaciones y Diseño Web. La aplicación permite a un usuario
elegir un empleado desde una lista desplegable (index.jsp), entonces recupera
datos de la base de datos MySQL y devuelve la información al usuario
(response.jsp):
a. Abre el IDE Netbeans 6.1, selecciona File > New Project (Ctrl-ShiftN) desde el menu principal. Debajo de Categories selecciona Web;
debajo de Projects selecciona Web Application. Da clic en Next.
b. En Project Name, escribe SBXDADW. De la lista desplegable Server
drop-down list, selecciona TomCat. Deja todas las demás
configuraciones por omisión (default) y da clic en Finish.
NetBeans crea una plantilla de proyecto para toda la aplicación, y
abre una página JSP vacía (index.jsp) en la parte central.
3. Preparando la Interfaz
Empecemos por preparar una interfaz simple para las dos páginas. Ambas tanto
index.jsp como response.jsp contienen una tabla HTML para desplegar la
información de un modo estructurado. La página index.jsp también requiere un
formulario HTML que incluye una lista desplegable.
3.1 index.jsp
Asegúrate de que index.jsp está abierto en la parte central del IDE. Si no es
así, da doble clic en index.jsp desde la Pestaña Projects seleccionando
SBXDADW > Web Pages.
a) Ya que se haya abierto la página index.jsp en el Editor (Parte
Central del IDE), cambia el texto entre las etiquetas <title> a
Página Principal de SBXDADW.
Figura 18
Estructura de la página index.jsp
b) Cambia el texto entre las etiquetas <h2> por: Bienvenido a
SBXDADW, Sistemas BX – Desarrollo de Aplicaciones y Diseño
Web.
c) Abre la paleta del IDE, seleccionando desde el menú principal
Window > Palette (Ctrl-Shift-8). Pasa el puntero del mouse sobre el
icono Table y nota que el código por default para ese elemento es
el siguiente (ver figura 19):
Figura 19
Paleta de Herramientas HTML de NetBeans
d) Posiciónate justo después de la etiqueta </h2> y presiona Enter,
ahora da clic en el botón Table de la Paleta anteriormente vista
(Figura 19) y arrástralo hasta ese punto, saldrá el siguiente
cuadro:
Figura 20
Insertando una Tabla en NetBeans
Cambia los datos que te salen, por los que se muestran en la
Figura 20.
e) Agrega el siguiente contenido a la tabla recién creada, en las
primeras etiquetas <th></th> y en las primeras etiquetas <td></td>
(nuevo contenido está resaltado)
<table border="0">
<thead>
<tr>
<th> SBXDADW ofrece Servicios Profesionales de
Diseño de Aplicaciones y Páginas web </th>
</tr>
</thead>
<tbody>
<tr>
<td>Para ver la información de alguno de
nuestros expertos, selecciona uno del siguiente
formulario.</td>
</tr>
Tecnologias: aplicar efecto de resaltado y después dejar
normal.
f) Para la última fila de la tabla (<tr></tr>), arrastra y suelta el botón
de Form desde la paleta de HTML, directamente entre el segundo
par de etiquetas <td></td>, ver Figura 21. En la parte de Action del
dialogo del Formulario, escribe response.jsp después da clic en
OK.
Figura 21
Insertando un Formulario (Form)
g) Entre las etiquetas <form></form> que se crearon después de
arrastrar y soltar el botón Form, escribe lo siguiente:
<strong>Selecciona un Empleado: </strong>
h) Arrastra y suelta una lista desplegable (Drop-down List) desde la
Paleta a un punto justamente debajo del texto que acabas de
agregar anteriormente. Cuando sueltas la lista desplegable, te
saldrá una ventana, en el primer campo que dice Name escribe
sujeto_id, lo demás déjalo tal y como está, veremos más adelante
como agregar varios elementos a una lista desplegable.
i) Ahora arrastra y suelta un botón justo después de la etiqueta
</select>, en la ventana que se abre, para los campos Label y
Name escribe: Submit para los dos.
Figura 22
Insertando un Boton
j) Tu código actualmente está desalineado, para mejorar la lectura de
tu pagina web y de tus programas, puedes presionar: Alt + Shift +
F, cuando hagas ésto tu código automáticamente se ordenará.
k) El código que debes tener en tu pagina, debe ser similar a lo
siguiente:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<title>Página Principal de SBXDADW </title>
</head>
<body>
<h2>Bienvenido a SBXDADW, Sistemas BX – Desarrollo
de Aplicaciones y Diseño Web</h2>
<table border="0">
<thead>
<tr>
<th>SBXDADW
ofrece
Servicios
Profesionales de Diseño de Aplicaciones y Páginas web </th>
</tr>
</thead>
<tbody>
<tr>
<td>Para ver la información de alguno
de
nuestros
expertos,
selecciona
uno
del
siguiente
formulario.</td>
</tr>
<tr>
<td><form
action="response.jsp"><strong>Selecciona
un
Empleado:</strong>
<select name="subject_id">
<option></option>
<option></option>
</select>
<input
type="submit"
value="Submit" name="Submit" />
</form> </td>
</tr>
</tbody>
</table>
</body>
</html>
l)
Para visualizar esta página en tu navegador web, da clic derecho
sobre el Editor (donde está todo el código de tu página) y
selecciona Run File (Shift + F6). Al hacer esto, la página JSP es
automáticamente compilada y se corre en nuestro servidor
TomCat. NetBeans abre tu navegador por default con la pagina,
como se muestra en la Figura 23.
Figura 23
Index.jsp
3.2 response.jsp
Con el fin de diseñar la interfaz para la página response.jsp, primero
debemos crear el archivo en nuestra aplicación. Ten en cuenta que la
mayor parte del contenido que aparecerá en esta página, se generará
dinámicamente.
3.2.1. Da clic derecho en el proyecto SBXDADW en la pestaña
Proyectos que aparece en la parte superior izquierda de Netbeans y
elige New > JSP. Se abre una ventana.
Figura 24
Creando un nuevo archivo JSP
Figura 25
Configurando un nuevo archivo JSP
3.2.2. En el campo JSP File Name escribe response. Date cuenta de
que el directorio Web Pages está seleccionado en el campo Location,
lo que significa que la página response será creada en el mismo
directorio donde se encuentra index.jsp. Todas las demás opciones
déjalas tal y como están y presiona el botón Finish, al hacer esto se
genera la página response.jsp y se abre en el editor. También
puedes verificarlo en la pestaña de proyectos, se ha creado un nuevo
nodo debajo de index.jsp con el nombre response.jsp
3.2.3. Ahora cambia el texto que se encuentra entre las etiquetas
<title></title> por lo siguiente: SBXDADW – {placeholder}
Tecnologías: Aplicar efecto de resaltar y después dejarlo normal.
3.2.4. Copia y pega el siguiente código HTML de una tabla entre las
etiquetas <body></body>:
<table border="0">
<thead>
<tr>
<th colspan="2">{placeholder}</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Descripcion: </strong></td>
<td><span style="font-size:smaller; fontstyle:italic;">{placeholder}</span></td>
</tr>
<tr>
<td><strong>Consejero: </strong></td>
<td>{placeholder}
<br>
<span style="font-size:smaller; fontstyle:italic;">
miembro desde: {placeholder}</span>
</td>
</tr>
<tr>
<td><strong>Detalles de Contacto: </strong></td>
<td><strong>email: </strong>
<a
href="mailto:{placeholder}">{placeholder}</a>
<br><strong>Telefono: </strong>{placeholder}
</td>
</tr>
</tbody>
</table>
Tecnologías: Aplicar efecto de resaltar y después dejarlo normal.
4. Configuración de un Pool de Conexiones
La manera más eficaz de aplicar la comunicación entre el servidor y una
base de datos es la creación de una base de datos de conexión tipo “pool”
(piscina) (conjunto preestablecido de conexiones).
La creación de una nueva conexión para cada cliente puede consumir
mucho tiempo, especialmente para las aplicaciones que continuamente
reciben un gran número de solicitudes. Para remediar esta situación,
numerosas conexiones son creadas y mantenidas en una piscina (pool).
Todas las solicitudes que requieren acceso a la capa de datos de la
aplicación usan una conexión ya creada desde la piscina.
Del mismo modo, cuando una solicitud se ha completado, la conexión no se
cierra, pero regresa a la piscina.
4.1. Configuración de una fuente de datos JNDI
Tanto Glassfish (Glassfish es un servidor de aplicaciones con soporte para
la plataforma J2EE, si deseas conocer mas sobre Glassfish, visita la
siguiente página: http://glassfish.dev.java.net como Tomcat y contienen las
bibliotecas de la Database Connection Pooling (DBCP) que proporcionan la
funcionalidad de conexión a base de datos de una manera que sea
transparente para ti como desarrollador.
En cualquier caso, tendrás que configurar una Fuente de Datos JNDI para
que el servidor cree una interfaz con la cual tu aplicación pueda utilizar el
pool de conexiones.
Como estamos usando TomCat, nos enfocaremos a la instalación del JNDI
en Tomcat, como lo veremos a continuación en los siguientes puntos, pero
antes veamos que es JNDI y para que sirve:
La Interfaz de Nombrado y Directorio Java (JNDI) es una Interfaz de
Programación de Aplicaciones para servicios de directorio. Esto permite a
los clientes descubrir y buscar objetos y nombres a través de un nombre y,
como todas las APIs de Java que hacen de interfaz con sistemas host, es
independiente de la implementación subyacente. Adicionalmente, especifica
una interfaz de proveedor de servicio (SPI) que permite que las
implementaciones del servicio de directorio sean integradas en el
framework. Las implementaciones pueden hacer uso de un servidor, un
fichero, o una base de datos.
4.1.1 Desde la pestaña de Projects en la parte superior
izquierda de NetBeans, se encuentra primero el nombre
de nuestro proyecto y si lo ampliamos se muestran
varias carpetas, una de ellas en la carpeta Web Pages
se llama META-INF, ahí da doble clic en el archivo
context.xml
4.1.2 Agrega las siguientes tags <Resource> (texto resaltado)
como una declaración para el recurso JNDI. Tu archivo
context.xml debe lucir de la siguiente forma:
<?xml version="1.0" encoding="UTF-8"?>
<Context path="/SBXDADW">
<Resource name="jdbc/SBXDADW" auth="Container"
type="javax.sql.DataSource"
maxActive="100" maxIdle="30" maxWait="10000"
username="root" password="nbuser"
driverClassName="com.mysql.jdbc.Driver"
url="jdbc:mysql://localhost:3306/MiNuevaBD"/>
</Context>
Tecnologías: aplicar efecto de resaltado y luego dejar
normal.
4.2. Referenciando la Fuente de Datos desde la Aplicación
Deberás de hacer referencia al recurso JNDI que acabas de configurar a
partir de la aplicación web. Para hacerlo, puedes crear una entrada en el
archivo web.xml (descriptor de despliegue de la aplicación).
Los descriptores de despliegue son archivos de texto basados en XML que
contienen información describiendo como una aplicación debe ser
desplegada (emplazada y mostrada) en un entorno específico. Por
ejemplo, son normalmente usados para especificar los parámetros de
contexto de la aplicación y patrones de comportamiento, opciones de
seguridad, así como asignaciones para los servlets, filtros y listeners.
Para referenciar la fuente de datos JNDI en el descriptor de despliegue de
la aplicación, sigue estos pasos:
4.2.1 En la pestaña de Projects, expande la carpeta Web Pages y
selecciona la subcarpeta WEB-INF y da doble clic en el archivo
web.xml. Se abrirá un editor gráfico en la parte central de NetBeans.
4.2.2 Da clic en la pestaña References localizada a lo largo de la
parte superior del Editor. Expande la opción Resource References,
después presiona Add, se abrirá una nueva ventana.
4.2.3 En Resource Name, escribe el nombre que configuraste en el
JNDI: jdbc/SBXDADW.
Para
Description:
escribe
jdbc:mysql://localhost:3306/MiNuevaBD
la
siguiente
Tecnologias: Aplicar efecto de resaltar y luego dejar normal.
url:
Deja los demás campos tal y como están y presiona Ok.
Figura 26
Configurando la URL de nuestra base de Datos
5. Agregando la Lógica Dinámica
En este paso deberás de regresar a los archivos index.jsp y response.jsp
creados anteriormente, para agregar código JSP y JSQL para permitir que
las páginas generen contenido dinámicamente. Para hacerlo, realiza los
siguientes pasos:
5.1. Agregando la biblioteca JSTL al Classpath del Proyecto
Con el fin de hacer un mejor uso de los recursos JSP a tu disposición,
puedes hacer uso de las JavaServer Pages Standard Tag Library (JSTL)
para acceder y visualizar los datos tomados de la capa lógica. Esta
biblioteca viene incluida en NetBeans, por lo tanto debes asegurarte de
agregarla a tu proyecto, también deberás agregar las tags taglib a cada una
de las paginas JSP. Esto permite que el servidor que estamos utilizando,
identificar los tags cuando sean leídas desde las páginas JSP.
Como estamos utilizando TomCat, realiza los siguientes pasos:
5.1.1 Abre tanto el archivo index.jsp como response.jsp en el Editor y
agrega las siguientes directivas en la parte superior de ambas
páginas:
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
%@taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%
Tecnologías: Aplicar efecto de resaltar y luego dejar normal.
5.1.2 Da clic derecho en la carpeta Libraries en la pestaña Projects,
selecciona Add Library, se abrirá una nueva ventana, ahí selecciona
JSTL 1.1 y da clic en Ok.
5.2. Agregando Código JSP y JSTL
5.2.1 Finalmente, después de haber agregado las directivas anteriores,
ambas paginas requieren que implementes un query SQL que
utiliza tags JSTL <sql:query> y la fuente de datos creada
anteriormente.
5.2.2. Abre el archivo index.jsp. Con el fin de desplegar
dinámicamente el contenido del formulario en index.jsp,
necesitas acceder a todos los nombres de la tabla Sujeto de la
base de datos:
5.2.3 Agrega el siguiente script SQL debajo de las directivas taglib
que acabas de agregar en el paso anterior:
<sql:query var="subjects" dataSource="jdbc/SBXDADW">
SELECT subject_id, name FROM Sujeto
</sql:query>
Tecnologías: Aplicar efecto de resaltar y luego dejar
normal.
Los tags JSTL <sql:query> te permiten usar lenguaje SQL
directamente en una pagina JSP. Un resultset es generado
desde la petición, y la información adquirida puede ser insertada
dentro de la pagina usando un tag iterator (<c:forEach>) desde la
biblioteca JSTL core.
5.2.4 Reemplaza los tags vacíos <option> en el formulario HTML
por el siguiente iterator:
<select name="subject_id">
<c:forEach var="subject" items="${subjects.rows}">
<option
value="${subject.subject_id}">${subject.name}</option>
</c:forEach>
</select>
Tecnologías: Aplicar efecto de resaltar y luego dejar
normal.
El loop forEach hace un bucle a través de todos los valores id y
name desde el resultset generado, e inserta cada par dentro de
los tags <option>. De esta manera la lista desplegable se llena
de información.
Tecnologías: Aplicar efecto de resaltar y luego dejar
normal.
Guarda todos los cambios (Ctrl + S), después da clic derecho en el
editor y selecciona Run File (Shift + F6). El archivo es compilado
e implementado por el servidor, y después mostrado en el
navegador web. La lista desplegable contiene el Puesto de cada
empleado desde la base de datos.
Figura 27
Conexión a Base de Datos realizada para el elemento Drop Down
List (homologar la fuente)
5.3 response.jsp
Para el archivo response.jsp necesitas acceder a la información de ambas
tablas: Sujeto y Consejero, que corresponda al id seleccionado por el
usuario. Esto se puede completar con un query SQL:
5.3.1. Agrega el siguiente script sql debajo de las directivas taglib que
hemos agregado anteriormente:
<sql:query var="counsSubjRs" maxRows="1" dataSource="jdbc/SBXDADW">
SELECT s.name, s.description, c.first_name, c.nick_name,
c.last_name, c.member_since, c.telephone, c.email
FROM Sujeto as s, Consejero as c
WHERE c.counselor_id = s.counselor_idfk
AND s.subject_id = ? <sql:param value="${param.subject_id}"/>
</sql:query>
Un resultset llamado counSubjRs es generado desde el query, el cual
contiene información asociada con el subject_id seleccionado por el
usuario.
5.3.2. Agrega la siguiente declaración debajo del query SQL
agregado anteriormente:
<c:set var="counsSubj" scope="request"
value="${counsSubjRs.rows[0]}"/>
El tag <c:set> te permite cambiar el resultset a una variable, de
modo que usted pueda recuperar su contenido en una etapa
posterior
5.3.3. En el código HTML, reemplaza todas las palabras
{placeholders} con código JSP que te permita recuperar y
desplegar información guardada en el resultset counsSubj, cambia
las partes resaltadas:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8"/>
<link rel="stylesheet" type="text/css"
href="style.css">
<title>${counsSubj.name}</title>
</head>
<body>
<table>
<tr>
<th colspan="2">${counsSubj.name}</th>
</tr>
<tr>
<td><strong>Descripcion: </strong></td>
<td><span style="font-size:smaller; fontstyle:italic;">${counsSubj.description}</span></td>
</tr>
<tr>
<td><strong>Empleado: </strong></td>
<td><strong>${counsSubj.first_name}
${counsSubj.nick_name} ${counsSubj.last_name}</strong>
<br><span style="font-size:smaller;
font-style:italic;">
<em>miembro desde:
${counsSubj.member_since}</em></span></td>
</tr>
<tr>
<td><strong>Detalles de contacto:
</strong></td>
<td><strong>email: </strong>
<a
href="mailto:${counsSubj.email}">${counsSubj.email}</a>
<br><strong>Telefono:
</strong>${counsSubj.telephone}</td>
</tr>
</table>
</body>
</html>
5.3.4 Guarda todos los archivos y presiona Shift + F6. Ahora prueba
tu aplicación web.
Figura 28
Conexión a Base de Datos Terminada
Si tienes alguna duda durante la realización de este ejercicio, puedes comunicarte
vía foro, correo o chat.
Una vez una vez que termines de realizarlo deposítalo en el portafolio . Deberás
enviar el proyecto creado. Guarda en un archivo .zip el proyecto, éste se
encuentra en la carpeta NetBeansProjects en Mis Documentos el proyecto se
llama SBXDADW toda esa carpeta guardala en .zip y súbela a tu portafolio.