Ahora vamos a generar una aplicación Web con acceso a bases de datos, es una aplicación simple, y cumple con la función de irnos adentrando en la construcción de Aplicaciones Web más complejas usando J2EE...
Como ya estamos hablando de Aplicaciones Web con Java, asumo que el usuario tiene experiencia con la conexion entre Java y MySQL, por lo tanto no nos detendremos a explicar cómo generar una conexión a la Base de datos, para quien no maneje el tema, puede consultar este Tutorial donde se explica con lujo de detalles una conexion a Bases de datos (de varios tipos) a Java. En este caso, tendremos generada la base de datos MySQL llamada MyNewDatabase, la cual deberán crear y registrar en NetBeans.
Las tablas que utilizaremos las pueden ontener desde ifpwafcad.sql Este archivo SQL creará dos tablas, Subject y Counselor, siendo pobladas con datos simples. Si es necesario, descarguen el archivo a su computador, luego ábranlo en NetBeans y ejecútenlo en la base de datos MySQL llamada MyNewDatabase.
Contenidos
Notas:
- El Conector/Driver JDBC, necesairo para la comunicación entre las platarormas Java y el protocolo de bases de datos de MySQL, está incluido en las versiones 6.x de NetBeans.
- Si no se la puede para hacer estos simples ejercicios por su cuenta, o simplemente no tiene dedos para el piano y la programación no es lo suyo, puede ver un ejemplo funcional de este tutorial descargando la aplicación de ejemplo.
Planificando la estructura
Una aplicación web simple puede ser diseñada usando una arquitectura de doble capa, en la cual la aplicación se comunica directamente con la fuente de datos usando la API Java Database Connectivity. La solicitud del usuario se envía a la base de datos, y el resultado es enviado directamente de vuelta al usuario. una arquitectura de doble capa es fácilmente mapeada en una configuración cliente-servidor, cuando un navegador del usuario funciona como cliente, y una base de datos remota alcanzable por internet corresponde al servidor.
La plicación que construrán en esta ocasión involucra la creación de dos Páginas JSP. En cada una de ellas, agregarán etiquetas básicas de HTML para implementar una interfaz sencilla, seguidas de etiquetas SQL provistas por la tecnología JSTL con el objetivo de consultar la base de datos. Consideren el siguiente escenario Cliente-Seridor.
La página principal (index.jsp) se presenta al usuario con un simple formulario HTML. Cuando el cliente hace una solicitud a la página index.jsp, el código JSP contenido en su interior es parseado, y los datos de la tabla Subject es reunido, agregado a la página, y enviado hacia el cliente. El usuario marca una selección en el formulario HTML presentado y lo envía, lo que genera una solicitud para response.jsp. Cuando response.jsp es parseada, los datos de ambas tablas (Subject y Counselor) es reunido e insertado en la página.
Finalmente, la página es retornada al cliente y el usuario logra ver datos basados en su selección.
Creando un nuevo Proyecto
Con el objetivode implementar el escenario descrito anteriormente, desarrollaremos una aplicación simple para una organización ficticia llamada IFPWAFCAD, o The International Former Professional Wrestlers' Association for Counseling and Development. La aplicación habilitará al usuario para elegir algún motivo de asesoría desde un drop-down (index.jsp), luego se obtendrá la data desde la base de datos MySQL y se retornará la información al usuario (response.jsp).
index.jsp
response.jsp
Creando un nuevo proyecto en el IDE:
- Para generar un Proyecto nuevo, sigan las instrucciones descritas acá, teneiendo precaución con no usar el mismo nombre del proyecto.
- En Nombre del Proyecto, ingresen IFPWAFCAD.
- Avanzando por el asistente, dejen las opciones por defecto. Especifiquen el servidor a utilzar (ojalá GlassFish) desde el drop-down Servidores. No seleccionen ningún Framework (después lo veremos). Al llegar al final, bueh... obviamente cllick en Finalizar.
El IDE crea un template de proyecto para la aplicación completa, y abre una página JSP vacía (index.jsp) en el editor de código. index.jsp sirve como la página de bienvenida a la aplicación. El nuevo proyecto está estructurado de acuerdo a las orientaciones de Sun Java BluePrints.
Preparando la Interfáz
Comenzamos por la preparación de una interfaz simple para las dos páginas. Ambas, index.jsp y response.jsp implementan una tabla HTML para mostrar datos con un modelo determinado.index.jsp también requiere un formulario HTML que incluya un Drop-Down list.
index.jsp
Asegurate que index.jsp esté abierto en el editor de código. Si no lo está, debes hacer doble click sobre index.jsp desde IFPWAFCAD > Páginas Web en la ventana Proyectos.
- En el editor de código, cambia el texto entre las etiquetas
<title> a IFPWAFCAD Homepage. - Ahora cambia el código entre las etiquetas
<h1> (<h2> si estás usando NetBeans 6.0 o 6.1) a Welcome to IFPWAFCAD, the International Former Professional Wrestlers' Association for Counseling and Development!. - Abre la paleta eligiendo Ventana > Paleta (Ctrl-Shift-8; ⌘-Shift-8 en Mac) desde el menú principal. Posa el puntero del mouse sobre el ícono Tabla desde la categoría HTML y fíjate lo que mustra el trozo de código que aparece
Click sobre el ícono, arrastra y suelta la tabla dentro de la página en el editor hasta un punto después de las etiquetas <h1> (o <h2> ). En el dialogo Insertar Tabla, especifíca los siguientes valores y clickea en OK:
- Filas: 2
- Columnas: 1
- Tamaño del Borde: 0
el código HTML de una tabla se ha generado y agregado a tu página. - Agrega el siguiente contenido a la cabecera de la tabla y la celda de la primera fila de la tabla (Nuevos contenidos en Negrita (bold)):
<table border="0">
<thead>
<tr> <th>IFPWAFCAD offers expert counseling in a wide range of fields.</th>
</tr>
</thead>
<tbody>
<tr>
<td>To view the contact details of an IFPWAFCAD certified former
professional wrestler in your area, select a subject below:
</td>
</tr> - Para la última fila de la tabla, arrastra y suelta un formulario HTML dentro de la página, directamente entreel segundo par de etiquetas
<td>. En la caja de texto Acción escribe response.jsp, luego pincha OK. - Escribe el siguiente texto entre las etiquetas
<form> del formulario que acabas de crear: <strong>Select a subject:</strong> - Arrastra y suelta una Lista desplegable (drop-down list) desde la Paleta hasta un punto justo después del texto recién añadido. En el dialogo Insertar Lista Desplegable, escribe
subject_id para el campo Nombre y pincha OK. Fíjate que el trozo de código para el drop-down se añadió a tu página.
El número de opciones para el drop-down en estos momentos no importa. Posteriormente verémos que agregando etiquetas JSTL se generarán dinámicamente las opciones, basadas en la data reunida desde la tabla Subject en la base de datos. - Agrega un botón de envío (submit) al formulario arrastrando un botón desde la paleta hasta un punto justos después del drop-down que acabas de añadir. Ingresa
submit para ambos campos, Etiqueta y Nombre, luego presiona OK. - Para darle formato a tu código, presiona un click derecho y elije Formato (Alt-Shift-F; Ctrl-Shift-F en Mac). Tu código será automáticamente formateado, y debería verse similar al siguiente:
<body>
<h2>Welcome to <strong>IFPWAFCAD</strong>, the International Former
Professional Wrestlers' Association for Counseling and Development!
</h2>
<table border="0">
<thead>
<tr>
<th>IFPWAFCAD offers expert counseling in a wide range of fields.</th>
</tr>
</thead>
<tbody>
<tr>
<td>To view the contact details of an IFPWAFCAD certified former
professional wrestler in your area, select a subject below:
</td>
</tr>
<tr>
<td>
<form action="response.jsp">
<strong>Select a subject:</strong>
<select name="subject_id">
<option></option>
</select>
<input type="submit" value="submit" name="submit" />
</form>
</td>
</tr>
</tbody>
</table>
</body>
response.jsp
Para preparar la interfáz de response.jsp debes primero crear el archivo en tu aplicación. Debes tener en cuenta que la mayoría del contenido que mostrará la página será generado sinámicamente usando la tecnología JSP. Por lo tanto, en los siguientes pasos se agregarán placeholders que más tarde sustituirás por código JSP.
- Click derecho en el proyecto IFPWAFCAD y elige Nuevo > JSP. Se abrirá el dialogo Nuevo Archivo.
- En el campo Nombre, ingresa
response. - Acepta nuevamente las configuraciones por defecto y presiona Finalizar. Un esquema de archivo
response.jsp es generado y abierto en el editor. Un nuevo nodo JSP es mostrado en la ventana de proyectos.
- En el editor de código, cambia el título a
IFPWAFCAD - {placeholder}. - Elimina la línea
<h1>Hello World!</h1> (o <h1>JSP Page</h1> si estas trabajando en NetBeans 6.0 o 6.1) entre las etiquetas <body>, luego copia y pega la siguiente tabla HTML dentro del cuerpo de la página:
<table border="0">
<thead>
<tr>
<th colspan="2">{placeholder}</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Description: </strong></td>
<td><span style=" font-style:italic;">{placeholder}</span></td>
</tr>
<tr>
<td><strong>Counselor: </strong></td>
<td>{placeholder}
<br>
<span style=" font-style:italic;">
member since: {placeholder}</span>
</td>
</tr>
<tr>
<td><strong>Contact Details: </strong></td>
<td><strong>email: </strong>
<a href="mailto:{placeholder}">{placeholder}</a>
<br><strong>phone: </strong>{placeholder}
</td>
</tr>
</tbody>
</table>response.jsp debería verse similar a la siguiente:
style.css
Crear una hoja de estilo simple para mejorarar el aspecto de la interfáz.
- Click derecho en el Proyecto IFPWAFCAD en la ventana de proyectos y elije Nuevo > Otros. En el Asistente para nuevos Archivos Asegurate de tener seleccionado Web dentro de Categorías, Luego elije Hoja de estilo en Cascada (Cascading Style Sheet) y presiona Siguiente.
- Escribe
style para el Nombre del Archivo CSS y presiona Finalizar. El IDE creará un archivo css vacío y lo ubicará en el mismo lugar que index.jsp and response.jsp. - En el editor de código, agrega el siguiente contrenido a tu archivo
style.css:
body {
font-family: Verdana, Arial, sans-serif;
font-size: smaller;
padding: 50px;
color: #555;
}
h1, h2 {
text-align: left;
letter-spacing: 6px;
font-size: 1.4em;
color: #be7429;
font-weight: normal;
width: 450px;
}
table {
width: 580px;
padding: 10px;
background-color: #c5e7e0;
}
th {
text-align: left;
border-bottom: 1px solid;
}
td {
padding: 10px;
}
a:link {
color: #be7429;
font-weight: normal;
text-decoration: none;
}
a:link:hover {
color: #be7429;
font-weight: normal;
text-decoration: underline;
} - Vincula tu hja de estilos a
index.jsp y a response.jsp:
En ambas páginas agrega la siguiente línea entre las etiquetas <head>: <link rel="stylesheet" type="text/css" href="style.css">
Este documento asume que tienes conocimientos de CSS, sabes como usarlos, y cómo afectarán a los elementos HTML correspondientes en tus páginas index.jsp y response.jsp.
Cuando trabajes con CSS en el IDE, puedes aprovechar las ventajas del Generador de estilos CSS y CSS Preview. Juntas, ambas herramientas proveen un soporte extenso en la creación de reglas de estilos y elementos de visualización cuando se acompañan de atributos de estilos.
Por Ejemplo, ubica el cursor entre la regla h1, h2 en style.css, luego abre la vista previa de CSS (CSS Preview - Window > Other > CSS Preview):
CSS Preview demuestra cómo un elemento se generará en el navegador. También debes tener en cuenta que la vista previa se actualiza automáticamente cuando haces cambios en la regla, entregandote una representación textual en tiempo real del elemento de estilo desde el IDE.
