Paso 1:
Crear un proyecto de Aplicación Web en Netbeans, el cual nombraremos MySQLWebApplication.Importante: En el tercer paso del asistente seleccionaremos el servidor GlassFish v2.1
Paso 2:
Editar el archivo index.jsp, para este ejemplo sustituiremos el código predefinido por el siguiente:<%@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 content="es" http-equiv="Content-Language" > <title>Bienvenido a LCU</title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" > <link href="Default.css" rel="stylesheet" type="text/css" > </head><body> <h2>Bienvenido a <strong>LCU</strong>, <br> Lost CODE University!</h2> <table border="0"> <thead> <tr> <th>LCU le permite acceder a la agenda digital, con la cual usted podrá ponerse en contacto con cualquiera de nuestros departamentos.</th> </tr> </thead> <tbody> <tr> <td> <form action="response.jsp"> <strong>Seleccione un departamento:</strong> <select name="departamento"> <option></option> </select> <input type="submit" value="submit" name="submit"> </form> </td> </tr> </tbody> </table> </body> </html>
Paso 3:
Creando una Hoja de Estilo CSS para personalizar la apariencia de nuestra página- Nombre: Default
Sustituimos el código del archivo que acabamos de crear por el siguiente:
body {
font-family: Verdana, Arial, sans-serif;
font-size: smaller;
padding: 50px; color: #555;
}
h1, h2 { text-align: left; font-size: x-large; color: #006699;
font-weight: normal;
width: 450px;
font-family: Arial, Helvetica, sans-serif;
}
table { width: 580px;
padding: 10px;
background-color: #B3C9E1;
}
th {
text-align: left;
border-bottom: 1px solid;
font-family: Arial, Helvetica, sans-serif; font-size: small;
}
td {
padding: 10px;
font-family: Arial, Helvetica, sans-serif; font-size: medium;
color: #333333;
}
a:link { font-weight: normal; text-decoration: none; font-family: Arial, Helvetica, sans-serif;
}
a:link:hover {
color: #0099FF;
font-weight: normal;
text-decoration: underline;
font-family: Arial, Helvetica, sans-serif;
}
Paso 4:
Crear un archivo JSP el cual nombraremos response.jsp- Nombre: response
<h1>Hello World!</h1>
por el siguiente bloque de código:
<table border="0">
<thead>
<tr><th colspan="2">Descripción</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Nombre: </strong></td>
<td><span style="font-size:smaller; font-style:italic;">{placeholder}</span></td>
</tr>
<td><strong>Detalles de Contacto: </strong></td>
<td><strong>email: </strong>
<a href="mailto:{placeholder}">{placeholder}</a>
<br><strong>teléfono: </strong>{placeholder}
</td>
</tr>
</tbody>
</table>
Y agregamos la siguiente línea justo antes de la etiqueta </head>
<link href="Default.css" rel="stylesheet" type="text/css" >
Observaciones:
Antes de continuar es necesario crear una base de datos llamada Universidad en MySQL con las tablas correspondientes.Si no sabes cómo conectar o ejecutar los sccripts en la base de datos primero mira este tutorial: Administrar MySQL desde Netbeans
Paso 5:
Crear un JNDI DatasourcePara crear un Connection Pool y un Datasource en Glassfish v2.1 será necesario añadir un archivo nuevo al proyecto, presionamos Ctrl +N o Archivo –> nuevo archivo… Allí seleccionamos la categoría GlassFish y el tipo JDBC Resource.
Seleccionamos la opción Create New JDBC Connection Pool
Saltamos el paso tres del asistente, a continuación seleccionamos la opción Extract from Existing Connection y buscamos la conexión MySQL a Universidad que creamos con anterioridad y presionamos finalizar.
El resultado será un archivo XML con los datos de configuración que hemos seleccionado.
Muy bien si deseamos confirmar la creación del Datasource y la conexión vamos a la ventana de servicios Ctrl +5 y activamos el servidor GlassFish, expandimos el nodo JDBC y dentro encontraremos el datasource y la conexión.
Paso 6:
Referenciar el Datasource desde la aplicación.
Abrimos el archivo web.xml en la carpeta Web Pages –> WEB-INF, con lo que obtendremos un asistente gráfico, en este pulsamos la pestaña Referencias y luego el botón añadir.
Agregamos el siguiente nombre de recurso, correspondiente al datasource creado antes:
Resource Name: jdbc/myDatasource
Paso 7:
Implementando el código JSTLEn el archivo index.jsp agregaremos el siguiente bloque de código antes de la primera linea <%@page
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%> <sql:query var="departamentos" dataSource="jdbc/myDatasource"> SELECT departamentos.cod_departamento, departamentos.departamento FROM departamentos </sql:query>
Luego sustituimos las etiquetas <option></option> por lo siguiente:
<c:forEach var="row" items="${departamentos.rows}">
<option value="${row.cod_departamento}">${row.departamento}</option>
</c:forEach>
Lo anterior nos cargará la lista con los departamentos listados en la base de datos.
En el archivo response.jsp funcionará de forma similar, antes de la línea <%page insertamos el siguiente código:
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%> <sql:query var="contacto" dataSource="jdbc/myDatasource">
SELECT
contactos.cod_contacto,
contactos.cod_departamento,
contactos.nombre_contacto,
contactos.email,
contactos.telefono,
departamentos.cod_departamento,
departamentos.departamento,
departamentos.descripcion
FROM
departamentos,
contactos
WHERE
contactos.cod_departamento = departamentos.cod_departamento AND
contactos.cod_departamento = ? <sql:param value="${param.departamento}"/>
</sql:query> <c:set var="contacto" value="${contacto.rows[0]}"/>
Nota: obsérvese que ${param.departamento} hace referencia a una expresión de lenguaje por lo que automáticamente la pasara el código de departamento asignado en index.jsp a la consulta cuando esta lo requiera en el ?
Muy bien, para concluir remplazamos los {placeholder} por lo siguiente en su respectivo orden:
${contacto.nombre_contacto}
${contacto.email}
${contacto.telefono}
Obteniendo el siguiente resultado:
<body>
<table border="0">
<thead> <tr> <th colspan="2">Descripción</th> </tr>
</thead>
<tbody> <tr>
<td><strong>Nombre: </strong></td>
<td><span style="font-size:smaller; font-style:italic;">${contacto.nombre_contacto}</span></td>
</tr>
<tr>
<td><strong>Detalles de Contacto: </strong></td>
<td><strong>email: </strong>
<a href="mailto:${contacto.email}">${contacto.email}</a>
<br><strong>teléfono: </strong>${contacto.telefono}
</td>
</tr>
</tbody>
</table>
</body>
Nota Final: en algunos casos puede que necesiten copiar de forma manual el conector de MySQL a el servidor,, tan solo es necesario copiar el archivo mysql-connector-java-5.1.10-bin.jar en la siguiente dirección:
C:\Sun\AppServer\domains\domain1\lib