3CM3

Ortiz vila Dafne Baal

3CM3
Tutorial de aplicacin Web en
Netbeans IDE


1
Creacin de una aplicacin Web con conexin a base de datos
Por medio de este tutorial se lograra la creacin de una aplicacin Web.
Esta aplicacin se basada en un modelo de 2 capas, debido a que el cliente se comunica
directamente con la base de datos; como es mostrado en el siguiente diagrama.
Para la creacin de esta aplicacin necesitamos de:

Glassfish es un servidor que est incluido dentro de la aplicacin Netbenas IDE.

Creacin de la base de datos
Para la creacin de esta aplicacin debemos crear la base de datos llamada mynewdatabase.
Para ello realizaremos los siguientes pasos:
1. En la ventana Servicios, expanda el nodo Bases de datos, haga clic en el nodo Servidor
MySQL y seleccione Propiedades.

En el cuadro de dilogo de Propiedades del servidor MySQL, colocara:









2
1. El IDE entra en localhost como el nombre predeterminado del host del servidor y
el 3306 como el nmero de puerto del servidor. Si esta informacin es correcta, el nombre
del usuario administrador (si no aparece).
Nota: Se necesita acceso de administrador para poder crear y eliminar bases de datos.

2. Introduzca la contrasea de administrador. El valor predeterminado es en blanco.
Nota: Una contrasea en blanco tambin puede ser una contrasea.

3. Haga clic en la pestaa Propiedades de Administracin en la parte superior del cuadro de
dilogo.
La ficha Propiedades de administracin se muestra a continuacin, que le permite introducir la
informacin para controlar el servidor MySQL.

4. En la Ruta / URL a la herramienta de administracin de campo, escriba o busque la ubicacin
de la aplicacin de administracin de MySQL, como la herramienta de administracin de
MySQL.
Nota: mysqladmin es la herramienta de administracin MySQl encuentra en el bin carpeta
del directorio de instalacin de MySQL. Es una herramienta de lnea de comandos y no es
ideal para usar con el IDE.


5. En el Camino a la orden de arranque, escriba o busque la ubicacin del comando de inicio de
MySQL. Para encontrar el orden de arranque, busque mysqld en la carpeta bin del directorio
de instalacin de MySQL.


6. En el camino hacia la parada de campo de comandos, escriba o vaya a la ubicacin de la
orden de parada MySQL. Este suele ser el mysqladmin en la carpeta bin del directorio
de instalacin de MySQL.
7. En el campo Argumentos, escriba -u root stop para dejar para detener el servidor.
8. Cuando haya terminado, en la ficha Propiedades de administracin debe ser similar a la
siguiente figura.


3

9. haga clic en Aceptar.


Posteriormente podemos visualizar en el recuadro de servicios la siguiente informacin:


Para poder establecer la conexin a la base de datos debemos presionar clic derecho sobre Servidor
Mysql, elegir la opcin conectar:



4

Posteriormente visualizaremos las bases de datos que contiene nuestro Sistema gestor de base de
datos:


Para efectos de este tutorial, cree una instancia llamada MyNewDatabase :
1. En la ventana de la IDE de Servicios, haga clic en el nodo Servidor MySQL y seleccione Crear
base de datos.





5

2. En el cuadro de dilogo Base de datos MySQL Crear, escriba el nombre de la nueva base de
datos. Vamos a utilizar MyNewDatabase para este tutorial. Deje la casilla sin seleccionar en
este momento.


3. Haga clic en Aceptar.
La nueva base de datos aparece en el nodo del servidor MySQL en la ventana de Servicios.
Integramos el .sql de la base de datos por medio del editor de sql integrado en Netbeans IDE.
En el are de servicio seleccionamos lo siguiente dando clic derecho en
jdbc:mysql://localhost:3306/mynewdatabase[root] y seleccionamos sentencia de comando.




6

Copiamos este script con el nombre ifpwafcad.sql
DROP TABLE IF EXISTS Counselor;
DROP TABLE IF EXISTS Subject;


CREATE TABLE Counselor (
counselor_id SMALLINT UNSIGNED NOT NULL AUTO_INCREMENT,
first_name VARCHAR (50),
nick_name VARCHAR (50),
last_name VARCHAR (50),
telephone VARCHAR (25),
email VARCHAR (50),
member_since DATE DEFAULT '0000-00-00',
PRIMARY KEY (counselor_id)
);


CREATE TABLE Subject (
subject_id SMALLINT UNSIGNED NOT NULL AUTO_INCREMENT,
name VARCHAR (50),
description TEXT,
counselor_idfk SMALLINT UNSIGNED,
PRIMARY KEY (subject_id)
);


INSERT INTO Counselor (first_name, nick_name, last_name, telephone,
email, member_since)
VALUES ('Jake', '"The Snake"', 'Roberts', '412 565-5656',
'snake@ifpwafcad.com', '2003-09-10'),
('Andre', '"The Giant"', '', '606 443-4567',
'bobo@ifpwafcad.com', '2001-01-12'),
('Brutus', '"The Barber"', 'Beefcake', '555 555-4432',
'beefcake@ifpwafcad.com', '2005-03-08'),
('Randy', '"Macho Man"', 'Savage', '555 317-4444',
'machoman@hotmail.com', '2000-11-10'),
('Ricky', '"The Dragon"', 'Steamboat','334 612-5678',
'r_steamboat@ifpwafcad.com', '1996-01-01'),
('George', '"The Animal"', 'Steele', '412 565-5656',
'george@ifpwafcad.com', Now()),
('Koko', '"The Birdman"', 'B. Ware', '553 499-8162',
'birdman@ifpwafcad.com', '1999-12-03'),
('Greg', '"The Hammer"', 'Valentine', '617 889-5545',
'valentino@ifpwafcad.com', '1998-05-07'),
('Bobby', '"The Brain"', 'Heenan', '777 513-3333',
'b_heenan@ifpwafcad.com', '2002-07-09');


INSERT INTO Subject (name, description, counselor_idfk)
VALUES ('Financial Consultancy', 'Investment advice and financial
planning guidance, helping you to maximize your net worth through proper
asset allocation. This includes the stocks, bonds, mutual funds,
insurance products, and gambling strategies proven to work.', '9'),


7
('Existential Psychotherapy', 'Often wonder what the
purpose of life is? After learning the basics of Existential
Psychotherapy, you''ll understand why you''re happy when you''re feeling
happy, and why you''re not feeling happy when you''re not happy, allowing
you to transcend to a state of pure bliss.', '7'),
('Temper Management', 'Are your angry outbursts affecting
your relationships with loved-ones? Do tantrums at work hinder your
ability to perform? Temper management helps you to channel your anger
into positive, life-changing productivity.', '4'),
('Past-Life Regression', 'Past-Life Regression is a
journey of the soul, backward and forward through time, like a yo-yo.',
'2'),
('Marriage Guidance', 'Even if you share a solid, caring
and mutually beneficial relationship with your spouse, you may both still
need urgent counseling. There''s only one way to find out. Contact us
now!', '1'),
('Crisis Management', 'Whether you''re a fireman,
executive CEO, or housewife, applying crisis management techniques at the
right moment can be life-saving for you as well as all those around
you.', '3'),
('Dream Analysis', 'Dream Analysis will allow you to delve
into the depths of your subconcious. Your counselor will put you through
a rigorous, disciplined training program, allowing you to remain in a
waking state while dreaming. By the end, you''ll be able to analyse your
dreams while you are having them!', '8'),
('Hypnosis', 'Contrary to popular belief, hypnosis can be
a powerful and effective form of counseling.', '6'),
('Reiki', 'Need a massage but are afraid to let a stranger
touch your body? Reiki could be the perfect solution for you.', '5');

Para ejecutar el script SQL en MyNewDatabase :

1. Elija Archivo> Abrir desde el men principal del IDE. En el explorador de archivos vaya a la
ubicacin en la que previamente guardado ifpwafcad.sql y haga clic en Abrir.
El script se abrir automticamente en el editor de SQL.
2. Asegrese de que su conexin a MyNewDatabase se selecciona la conexin de cuadro
desplegable en la barra de herramientas en la parte superior del Editor.



8

3. Haga clic en el SQL Ejecutar ( ), situado en la barra de tareas del editor de SQL. El script se
ejecuta contra la base de datos seleccionada, y cualquier informacin se genera en la ventana
de resultados.


4. Para comprobar los cambios, haga clic en el MyNewDatabase nodo de conexin en la ventana
de tiempo de ejecucin y elija Actualizar. Las actualizaciones de opcin Actualizar los
componentes de interfaz de usuario de la base de datos del Explorador de la situacin actual
de la base de datos especificada. Tenga en cuenta que las dos nuevas tablas de la secuencia
de comandos SQL ahora se muestran como nodos de tabla en MyNewDatabase en el
Explorador de base de datos.


9


Creacin de la Aplicacin
Empecemos por crear un nuevo proyecto dentro de NentBeans IDE; dicho proyecto requiere
tener las caractersticas de un proyecto web.
1.- Seleccione Archivo > Nuevo proyecto desde el men de herramientas de NentBeans IDE.
Posteriormente selecciona las caractersticas del proyecto a crear en este caso Web Java y con
ello seleccionamos la aplicacin web y haga clic en siguiente.











10
Al realizar este proceso se creara una aplicacin web vaca, el IDE prepara un proyecto con todo
lo necesario y pueda ser ejecutado a travs de los complementos necesarios para una aplicacin
web.
2.- En la siguiente ventana que nos mostrara el IDE, colocaremos los datos el proyecto como lo
son:
Nombre: IFAWAFCAD
Ubicacin: la que se desee
Una vez que estos datos han sido seleccionados podemos dar clic en siguiente.
3.- La siguiente ventana mostrada por el IDE, se basa en la configuracin del servidor bajo el cual
se correr la aplicacin web.
Nota:



Elegiremos Glassfis como servidor y como versin del proyecto Java EE 5.


El servidor GlassFish se muestra en el servidor de lista desplegable si se ha instalado la versin Java de la IDE
de NetBeans . Debido a que el servidor GlassFish est incluido en la descarga, se registra automticamente
con el IDE. Si desea utilizar un servidor diferente para este proyecto, haga clic en el botn Agregar situado
junto al servidor de lista desplegable, y registrar un servidor diferente con el IDE.


11
5.- Haga clic en Finalizar. El IDE crea una plantilla de proyecto para toda la aplicacin, y se abre una
pgina JSP vaca ( index.jsp ) en el editor. El index.jsp archivo sirve como la pgina de inicio para la
aplicacin
Para comprobar que esta aplicacin ha sido creada de manera correcta y todos los componentes
se han inicializado ejecutemos el proyecto completo, en la barra de herramientas del IDE, damos
clic en Ejecutar > Ejecutar Main del proyecto. Esto mostrara una pgina HTML con el mensaje
Hello World .



Preparacin de Interfaz Grafica
Comencemos por la preparacin de la pgina de inicio ( index.jsp ) y de la respuesta
( response.jsp pginas).
En la pgina de bienvenida ( index.jsp ) se implementa un formulario HTML que se utiliza para
capturar los datos que son solicitados al usuario. En las 2 pginas se implementa una tabla HTML
para mostrar los datos que sean extrados de la consulta a la base de datos. Posteriormente se
creara una hoja de estilo que realza el aspecto de las dos pginas.




12

Creacin de las pginas

Pgina Index.jsp

Nos aseguramos de que index.jsp est abierta en el editor. De lo contrario despleguemos la
pestaa del proyecto: IFAWAFCAD> Pginas Web> WEB-INF> index.jsp

1. En el editor, cambiar el texto entre las etiquetas: <title> Pgina de Inicio
IFPWAFCAD </title>
2. Cambiar el texto entre las etiquetas: <h1> Bienvenido a IFPWAFCAD, el ex internacional
de los luchadores profesionales "Asociacin para el Asesoramiento y Desarrollo! </h1>
3. Abrir la paleta del IDE seleccionando Ventana> Paleta desde el men principal. Coloque el
puntero sobre el icono de la tabla de la categora HTML y tenga en cuenta que el
fragmento de cdigo predeterminado para el elemento de muestra. Se puede configurar
la paleta a su gusto - botn derecho del ratn en la paleta y seleccione Mostrar iconos
grandes y ocultar Nombres de elementos que se han pantalla como en la imagen de
arriba.

1. Coloca el cursor en un punto justo despus de la etiqueta <h1> con ello crearemos una
nueva tabla dentro del body de nuestra pgina.


13
2. Posteriormente en la paleta, haga doble clic en la tabla.
3. En el cuadro de dilogo de la tabla, debemos especificar los siguientes valores haga clic en
Aceptar:
Filas : 2
Columnas : 1
Tamao del borde : 0
El cdigo de la tabla HTML se genera y se aade a la pgina pgina index.jsp la cual hemos
estado trabajando.











En el cdigo que se gener de la tabla en la pgina ser modificado hasta obtener el siguiente
cdigo. Con esto agregaremos ttulos a las columnas de la tabla que hemos creado.

<table border="0">
<thead>
<tr>
<th> IFPWAFCAD ofrece asesoramiento de expertos en una amplia gama de campos. </
th>
</ Tr>
</ THEAD>
<tbody>
<tr>
<td> Para ver los detalles de contacto de un ex IFPWAFCAD certificados
luchador profesional en su rea, seleccione un tema a continuacin: </ td>
</ Tr>


14
7.-La fila restante, insertaremos un formulario HTML. Colocaremos, el cursor entre el segundo par
de etiquetas <td>, y daremos un doble clic en el formulario html en la paleta.
En el cuadro de dialogo debemos insertar, en el campo de accin podremos response.jsp , y
daremos clic en Aceptar.

8.-Escriba el siguiente contenido entre las etiquetas <form>
<strong> Seleccione un tema: </ strong></form>




9.- Pulsaremos Enter para ir a otra lnea posteriormente pulsamos Ctrl +Espacio para invocar el
apoyo de cdigo de terminacin del IDE. Y seleccionamos una lista desplegable.








Nota: Todos los elementos enumerados en la paleta igualmente se pueden acceder mediante
el apoyo de la IDE Para aprovechar estas ventajas, cuando se trabaja en el editor, se puede
pulsar Ctrl + Espacio. Y se mostraran las posibilidades para completar nuestro cdigo.



15

10.- En el cuadro de dilogo que aparece, escribiremos en el nombre subject_id y hacemos
clic en Aceptar. El cdigo se aadir a la pgina index.jsp
El nmero de opciones para en la lista no es importante. Ms adelante en el tutorial, aadir
etiquetas JSTL que genera dinmicamente las opciones sobre los resultados que obtengamos
de la base de los datos.
11.-Agregar un elemento de botn de envo a un punto justo despus de la lista desplegable
que acaba de agregar. En el cuadro de dilogo del botn, y en los campos de texto Nombre y
agreguemos un nombre, haremos clic en Aceptar.
Para comprobar que los que hemos aadido a la pgina index.jsp haya sido echo
correctamente ejecutaremos en proyecto completo.
Obtendremos como resultado lo siguiente:


La creacin de la pgina de respuesta

Una vez terminada la pgina index.jsp, crearemos la pgina de respuesta (response.jsp ) para ello
debemos crear el archivo en el proyecto. Tenga en cuenta que la mayor parte del contenido que
aparece en esta pgina se genera dinmicamente mediante la tecnologa JSP.
1. Haga clic derecho en el nodo del proyecto IFPWAFCAD en la ventana de proyectos y elija
Nuevo JSP>. El nuevo dilogo de JSP abre archivos.


16
2. En el campo Nombre de JSP de archivo, escribamos reponse. Esta pgina se creara en la
misma raz donde se localiza la pgina indesx.jsp Esta es la misma ubicacin de
la index.jsp pgina de bienvenida reside.
3. Acepte los valores predeterminados de otros y haga clic en Finalizar. Una plantilla para la
nueva response.jsp pgina se genera y se abre en el editor. Un nuevo nodo JSP tambin se
muestra en las pginas Web en la ventana de proyectos.


4.- En el editor, cambiar el ttulo de: IFPWAFCAD - {} marcador de posicin.
5.- Retire el <h1> Hola Mundo </ h1> lnea entre las etiquetas <body></body>, copiar y pegar
la siguiente tabla HTML en el cuerpo de la pgina:

<table border="0">
<thead>
<tr>
<th colspan="2">{placeholder}</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Description: </strong></td>
<td><span style="font-size:smaller; font-style:italic;">{placeholder}</span></td>
</tr>
<tr>
<td><strong>Counselor: </strong></td>
<td>{placeholder}


17
<br>
<span style="font-size:smaller; 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>

Para ver esta pgina en un navegador, haga clic en el editor y seleccione Archivo Ejecutar la pgina
ser implementa en el servidor GlassFish, y se abre en el navegador predeterminado.








18
Creacin de una hoja de estilo

Crearemos una hoja de estilo que mejora la vista de la interfaz de nuestras pginas web. Dicha
hoja de estilo afectara a las 2 pginas creadas con anterioridad.
Abra el asistente Nuevo archivo pulsando el botn New File, situado en la barra de herramientas
principal del IDE. Seleccione la categora de Web, a continuacin, seleccione Hoja de estilo en
cascada y haga clic en Siguiente.


1. Para el Nombre del archivo elija estilo CSS y haga clic en Finalizar.
2. El IDE crea un archivo vaco de CSS y lo coloca en la ubicacin del proyecto el mismo de
index.jsp y response.jsp . Tenga en cuenta que un nodo para style.css muestra ahora en el
proyecto en la ventana de proyectos, y el archivo se abre en el editor.
3. En el editor, agregue el siguiente contenido a la style.css archivo:
body {
font-family: Verdana, Arial, sans-serif;
font-size: smaller;
padding: 50px;
color: #555;
}

h1 {
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;
}



19
a:link {
color: #be7429;
font-weight: normal;
text-decoration: none;
}

a:link:hover {
color: #be7429;
font-weight: normal;
text-decoration: underline;
}

4.- para enlazar las paginas index.jsp y response.jsp . a la hoja de estilo En ambas pginas, aadir
la siguiente lnea entre el <head></head>:

<link rel="stylesheet" type="text/css" href="style.css">


La preparacin de la comunicacin entre la aplicacin y base de datos
La forma ms eficiente para implementar la comunicacin entre el servidor y base de datos es la
creacin de una base de datos de agrupacin de conexiones.
Crear una nueva conexin para cada solicitud de cliente se puede consumir mucho tiempo,
especialmente para las aplicaciones que reciben continuamente un gran nmero de
peticiones. Para remediar esta situacin, numerosas conexiones se crean y se mantienen en un
pool de conexiones. Cualquier peticin de entrada que requiere acceso a la capa de datos de la
aplicacin utiliza una conexin ya creado de la piscina. Del mismo modo, cuando una solicitud se
ha completado, la conexin no se cierra, pero regres a la piscina.
Despus de preparar la fuente de datos y agrupacin de conexiones para el servidor, entonces
necesitamos ordenar a la aplicacin para utilizar la fuente de datos. Esto se suele hacer mediante
la creacin de una entrada en la aplicacin web.xml que es un descriptor de
despliegue. Finalmente, es necesario asegurarse de que el controlador de base de datos (MySQL
Connector / J driver JDBC) se puede acceder al servidor.



La edicin del servidor de cdigo abierto GlassFish contiene la base de datos de agrupacin de
conexiones (DBCP) las bibliotecas que proporcionan funcionalidad de agrupacin de conexiones de
una manera que sea transparente para usted, como desarrollador. Para tomar ventaja de esto, es
necesario configurar una JDBC (Java Database Connectivity) fuente de datos para el servidor que la
aplicacin puede utilizar para la agrupacin de conexiones.

Se puede configurar la fuente de datos directamente en la consola de administracin servidor
GlassFish, o, como se describe a continuacin, puede declarar los recursos que la aplicacin


20
necesita un sol resources.xml archivo. Cuando se implementa la aplicacin, el servidor lee en las
declaraciones de los recursos, y genera los recursos necesarios.
Los pasos siguientes muestran cmo declarar un pool de conexiones, y una fuente de datos que se
basa en la agrupacin de conexiones. El NetBeans recurso JDBC asistente le permite realizar
ambas acciones.

Pasos a seguir para la creacin de un pool de conexiones.

1. Abra un Nuevo archivo pulsando el botn New File, localizado en la barra de herramientas
principal del IDE. Seleccione la categora de servidor GlassFish, seleccione recurso JDBC y
hacemos clic en Siguiente.











21
2. En el paso 2 Atributos, General, seleccione la opcin Crear nueva conexin JDBC opcin de
piscina, y luego en el campo de texto Nombre JNDI, teclee jdbc / IFPWAFCAD. La fuente
de datos JDBC se basa en JNDI , Java Naming and Directory Interface. La API JNDI
proporciona una manera uniforme para aplicaciones para buscar y acceder a fuentes de
datos.












3.-Desea, puede agregar una descripcin del origen de datos. Por ejemplo, escriba: Accede a la
base de datos que proporciona datos para la aplicacin IFPWAFCAD.
4.-Haga clic en Siguiente, haga clic en Siguiente de nuevo para saltar el paso 3, Propiedades
adicionales.
5.- Escriba IfpwafcadPool para el nombre de JDBC Connection Pool. Asegrese de que el extracto
de la opcin de conexin existente est seleccionado y elija
jdbc: mysql: / / localhost: 3306/MyNewDatabase de la lista desplegable.


22

6.-Hacemos clic en Siguiente. Nos podemos dar cuenta que el IDE extrae la informacin de la
conexin de base de datos que ha especificado en el paso anterior, y establece el valor de las
propiedades de nombre de la agrupacin de conexiones nuevas. En este caso la conexin con
MyNewDatabase.


23


7.-Haga clic en Finalizar. El asistente genera una glassfish-resources.xml archivo que contiene
entradas para la fuente de datos y la agrupacin de conexiones que ha especificado.












24
Para comprobar que las conexiones se crearon podemos realizar los siguientes pasos:
1. En la ventana Proyectos, haga clic en el nodo del proyecto y seleccione Desplegar
IFPWAFCAD. El servidor se pone en marcha si no est ya en funcionamiento, y el proyecto
se compila y se despleg a la misma.
2. Abra la ventana de Servicios: servidores> GlassFish> Recursos> JDBC> Recursos JDBC y los
nodos de agrupaciones de conexiones. Tenga en cuenta que el origen de datos y
agrupacin de conexiones se muestran ahora.



Es necesario hacer referencia al recurso JDBC que acaba de configurar a partir de la aplicacin
web. Para ello, puede crear una entrada en la aplicacin web.xml descriptor de despliegue.










1. En la ventana de proyectos, expanda la carpeta de archivos de configuracin y haga doble
clic en el archivo web.xml. Una interfaz grfica para el archivo se muestra en la ventana
principal del IDE.
2. Haga clic en la ficha Referencias situado en la parte superior del editor.
Nota: Descriptores de despliegue son archivos basados en XML de texto que contienen
informacin que describe cmo una aplicacin se implementa en un entorno especfico.
Por ejemplo, normalmente se utiliza para especificar los parmetros de contexto de aplicacin
y pautas de comportamiento, la configuracin de seguridad, as como las asignaciones para
los servlets, los filtros y los oyentes.



25
3. Ampliar las referencias de recursos ttulo y haga clic en Agregar para abrir el cuadro de
dilogo Agregar referencia de recursos.
4. En Nombre del recurso, escriba el nombre del recurso que le dio al configurar el origen de
datos del servidor de arriba (jdbc/IFPWAFCAD ). El campo Descripcin es opcional.



5.-Para verificar que el recurso se aade a la web.xml archivo, haga clic en la ficha XML ubicado en
la parte superior del editor. Tenga en cuenta que los siguientes < ref recursos .











26


Nota: La adicin de archivo del controlador de la base de datos JAR es otro paso que es vital para
habilitar el servidor para comunicarse con su base de datos. Normalmente, se debe localizar el
directorio de su controlador de la base de instalacin y copiar el mysql-connector-java-5.1.6-
bin.jar archivo desde el directorio raz del conductor en la carpeta de la biblioteca del servidor que
est utilizando. Afortunadamente, la gestin de la IDE del servidor es capaz de detectar en la
implementacin si el archivo JAR se ha aadido - y si no, lo hace automticamente.



Para demostrar esto, abra la ventana de Servidores (Seleccione Herramientas> Servidores).
El IDE proporciona un driver JDBC opcin de implementacin. Si la opcin est activada, se inicia
una comprobacin para determinar si los controladores son necesarios para las aplicaciones
implementadas del servidor.
En el caso de MySQL, si el conductor est obligado y que falta, conductor incluido el IDE se
implementa en el lugar apropiado en el servidor.
1. Seleccione Herramientas> Servidores para abrir la ventana Servidores. Seleccione el
servidor GlassFish en el panel izquierdo.
2. En el panel principal, seleccione la opcin Habilitar el controlador JDBC opcin de
implementacin.





27

3. Antes de cerrar la ventana, haga una nota de la ruta indicada en el campo de texto
Dominios carpeta. Cuando se conecta al servidor GlassFish en el IDE, en realidad se est
conectado a una instancia del servidor de aplicaciones. Cada instancia se ejecuta
aplicaciones en un nico dominio, y el campo de nombre de dominio indica el nombre del
dominio de su servidor est utilizando. Como se muestra en la imagen de arriba, el archivo
JAR del controlador debe estar ubicado dentro de domain1 , que es el dominio
predeterminado que se crea al instalar el servidor GlassFish.
4. Haga clic en Cerrar para salir de la ventana Servidores.
5. En su computadora, vaya al directorio de instalacin de GlassFish servidor y de perforacin
en el dominio > domain1 > lib subcarpeta. Debido a que ya debera haber implementado
el proyecto IFPWAFCAD al servidor, usted debe ver el mysql-connector-java-5.1.6-
bin.jar archivo. Si no ve el archivo JAR del controlador, realice el siguiente paso.
6. Implementar el proyecto en el servidor. En la ventana de la IDE de Proyectos, elija
Implementar en el men del botn derecho del nodo del proyecto. Puede ver el progreso
en la ventana de salida del IDE (Ctrl-4; -4 en Mac). El resultado indica que el
controlador de MySQL se instala en un lugar en el servidor GlassFish.Ahora, si usted vuelve
a la domain1/lib subcarpeta en su computadora, usted puede ver que el mysql-connector-
java-5.1.6-bin.jar archivo se ha agregado automticamente.







28
Incorporacin de la lgica dinmica
Volviendo a la index.jsp y response.jsp marcadores de posicin que cre anteriormente en el
tutorial, ahora se puede aplicar el cdigo JSTL que permite que las pginas para generar
contenido del formulario dinmico , es decir, sobre la base de datos del usuario. Para ello, realice
las siguientes tres tareas.


Puede aplicar la tecnologa JavaServer Pages Standard Tag Library (JSTL) para acceder y mostrar los
datos obtenidos de la base de datos. El servidor GlassFish incluye la biblioteca JSTL por
defecto. Usted puede verificar esto mediante la ampliacin de las bibliotecas de IFPWAFCAD> el
nodo del servidor GlassFish en la ventana de proyectos y la bsqueda de la JSTL-
impl.jar archivo. Debido a que las bibliotecas del servidor GlassFish se aade por defecto a la ruta
de clases de su proyecto, usted no tiene que realizar los pasos para esta tarea.
JSTL proporciona cuatro reas bsicas de funcionalidad. Estos son los siguientes:

principales : las tareas ms comunes, estructurales, tales como iteradores y condicionales para
el manejo de control de flujo
fmt : la internacionalizacin y el formato de mensaje de localizacin
sql : acceso a base de datos simple
xml : manejo de contenido XML

Ahora usted puede implementar el cdigo que recupera y muestra de forma dinmica datos de
cada pgina. Ambas pginas requieren que se implementa una consulta SQL que utiliza la fuente
de datos creada anteriormente en el tutorial.

index.jsp

Con el fin de mostrar de forma dinmica el contenido de la forma en index.jsp , necesita acceder a
todos los nombre s de la reserva de mesa base de datos.
1. Pase el cursor del ratn sobre el elemento de informe DB en la paleta. El elemento de
informe DB utiliza el <sql:query> etiqueta para crear una consulta SQL, a continuacin,
utiliza el <c:forEach> etiqueta para recorrer la consulta de resultados y la salida de la
recuperada de datos.

2.- Coloca el cursor encima de la <% @ page ... %> declaracin, a continuacin, haga doble clic en
el elemento del informe DB en la paleta. En el cuadro de dilogo que aparece, introduzca los
siguientes datos:



29


Nombre de variable: los sujetos
mbito de aplicacin: la pgina
Fuente de datos: jdbc / IFPWAFCAD
Sentencias Query: SELECT de subject_id, el nombre del sujeto


3.-Haga clic en Aceptar. El siguiente contenido se genera en el archivo index.jsp.
4.-Ejecutar el proyecto para ver cmo se muestra en un navegador. Haga clic derecho en el nodo
del proyecto en la ventana de proyectos y seleccione Ejecutar.
Cuando seleccione Ejecutar, el IDE implementa el proyecto en el servidor GlassFish, la pgina de
ndice se compila en un servlet, y la pgina de bienvenida se abre en el navegador por defecto. El
cdigo generado por el elemento de informe DB crea la siguiente tabla en la pgina de bienvenida.



30


5.- Como puede ver, el elemento de informe DB le permite probar rpidamente su conexin a la
base de datos, y le permite ver los datos de la tabla de la base de datos en el navegador.
Los pasos siguientes demuestran cmo integrar el cdigo generado en el cdigo HTML en la lista
desplegable que cre anteriormente en el tutorial.

6.- Examinar los datos de columna en el cdigo generado. Dos <c:forEach> etiquetas se utilizan,
una es anidado dentro del otro. Esto hace que el contenedor JSP (es decir, el servidor GlassFish)
para realizar un bucle en todas las filas de la tabla, y para cada fila, recorre todas las columnas. De
esta manera, los datos de toda la tabla se muestra.
7.-Incorporar los <c:forEach> etiquetas en el formulario HTML de la siguiente manera. El valor de
cada elemento se convierte en el subject_id , y el texto de salida se convierte en el nombre , segn
consta en la base de datos.

<form action="response.jsp">
<strong>Select a subject:</strong>
<select name="subject_id">
<c:forEach var="row" items="${subjects.rowsByIndex}">
<c:forEach var="column" items="${row}">
<option value="<c:out value="${column}"/>"><c:out value="${column}"/></option>
</c:forEach>
</c:forEach>
</select>
<input type="submit" value="submit" name="submit" />
</form>



31
8.-Eliminar la tabla que se gener a partir del elemento de informe DB.
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<%--
Document : index
Created on : Dec 22, 2009, 7:39:49 PM
Author : nbuser
--%>

<sql:query var="subjects" dataSource="jdbc/IFPWAFCAD">
SELECT subject_id, name FROM Subject
</sql:query>

<table border="1">
<!-- column headers -->
<tr>
<c:forEach var="columnName" items="${subjects.columnNames}">
<th><c:out value="${columnName}"/></th>
</c:forEach>
</tr>
<!-- column data -->
<c:forEach var="row" items="${subjects.rowsByIndex}">
<tr>
<c:forEach var="column" items="${row}">
<td><c:out value="${column}"/></td>
</c:forEach>
</tr>
</c:forEach>
</table>

<%@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">

9.- Guarde los cambios






Tenga en cuenta que no es necesario volver a implementar su proyecto. De manera
predeterminada, la compilacin en ahorrar est habilitada para su proyecto. Esto significa que
al modificar y guardar un archivo, el archivo se compila automticamente y desplegado y no es
necesario volver a compilar todo el proyecto. Usted puede activar y desactivar la compilacin
en ahorrar para su proyecto en la categora de Compilacin de la ventana Propiedades del
proyecto.


32
response.jsp

La respuesta de la pgina ofrece los detalles para el consejero que se corresponde con el tema
elegido en la pgina de index.jps. La consulta que cree debe seleccionar el registro consejero
cuya counselor_id coincide con el counselor_idfk del expediente objeto seleccionado.

1. Coloca el cursor encima de la <% @ page ... %> declaracin, En el cuadro de dilogo que
aparece, introduzca los siguientes datos:
o Nombre de variable: counselorQuery
o mbito de aplicacin: la pgina
o Fuente de datos: jdbc / IFPWAFCAD
o Sentencias Query: SELECT * FROM reserva, Consejero DONDE Counselor.counselor_id =
Subject.counselor_idfk Y = Subject.subject_id? <sql:param
value="${param.subject_id}"/>
2.- Hacemos clic en Aceptar. El siguiente contenido se genera en el archivo response.jsp.
<% @ Taglib prefix = "sql" uri = "http://java.sun.com/jsp/jstl/sql"%>
<% -
Documento: respuesta
Creado el: 22 de diciembre de 2009, 08:52:57 PM
Autor: nbuser
-%>

<sql:query var="counselorQuery" dataSource="jdbc/IFPWAFCAD">
SELECT * FROM reserva, Consejero
DONDE Counselor.counselor_id = Subject.counselor_idfk
Y Subject.subject_id =? <sql:param value="${param.subject_id}"/>
</ Sql: query>

<% @ 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">

4.- Use un <c:set> etiqueta para establecer una variable que corresponde al primer registro (es
decir, fila) de la de resultados que devuelve la consulta.

<sql:query var="counselorQuery" dataSource="jdbc/IFPWAFCAD">
SELECT * FROM reserva, Consejero
DONDE Counselor.counselor_id = Subject.counselor_idfk
Y Subject.subject_id =? <sql:param value="${param.subject_id}"/>
</ Sql: query>

<c:set var="counselorDetails" value="${counselorQuery.rows[0]}"/>


33
Aunque el conjunto de resultados que devuelve la consulta debe contener solamente un nico
registr, este es un paso necesario porque la pgina necesita tener acceso a los valores del registro
con las declaraciones. Recordemos que en index.jsp , que fueron capaces de acceder a los valores
del conjunto de resultados simplemente utilizando un <c:forEach> etiqueta. Sin embargo,
el <c:forEach> etiqueta opera mediante el establecimiento de una variable para las filas
contenidas en la consulta, lo que le permite extraer los valores mediante la inclusin de la variable
de fila en las declaraciones.
taglib Directiva para la JSTL ncleo de la biblioteca de la parte superior del archivo,
por lo que el <c:set> etiqueta se entiende.
<% @ Taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core"%>
<% @ taglib prefix = "sql" uri = "http://java.sun. com / jsp / JSTL / sql "%>

En el cdigo HTML, reemplace todos los marcadores de posicin con EL cdigo de las
declaraciones que muestran los datos contenidos en el counselorDetailsvariable.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="style.css">
<title> $ {} counselorDetails.name </ title>
</ Head>

<body>
<table>
<tr>
<th colspan="2"> $ {} counselorDetails.name </ th>
</ Tr>
<tr>
Descripcin <td> <strong>: </ strong> </ td>
<td> <span style="font-size:smaller; font-style:italic;"> $ {} counselorDetails.description
</ span> </ td>
</ Tr>
<tr>
<td> Consejero <strong>: </ strong> </ td>
<td> <strong> $ {} $ {counselorDetails.first_name counselorDetails.nick_name} $ {}
counselorDetails.last_name </ strong>
<br> <span style="font-size:smaller; font-style:italic;">
miembro <em> desde: $ {} counselorDetails.member_since </ em> </ span> </ td>
</ Tr>
<tr>
<td> Detalles de Contacto <strong>: </ strong> </ td>
<td> <strong> email: </ strong>
<A href = "mailto: $ {} counselorDetails.email "> $ {} counselorDetails.email </ a>
telfono <br> <strong>: </ strong> $ {} counselorDetails.telephone </ td>
</ Tr>
</ Table>
</ Body>


34
</ Html>

Ejecucin de la aplicacin completa
Usted ha completado la aplicacin. Intente ejecutar de nuevo para ver cmo se muestra en un
navegador. Tenga en cuenta que debido a compilar NetBeans 'en funcin de Ahorro, no tiene que
preocuparse acerca de la compilacin o por la reprogramacin de la aplicacin. Cuando se ejecuta
un proyecto, usted puede estar seguro de que la implementacin contiene los ltimos cambios.
Haga clic en el proyecto de ejecucin, situado en la barra de herramientas principal.
El index.jsp pgina se abre en el navegador predeterminado del IDE.
Cuando index.jsp muestra en el explorador, seleccione un tema de la lista desplegable y haga clic
en enviar. Ahora debe ser remitido a la response.jsp pgina, mostrando los detalles
correspondientes a su seleccin.