Tutorial de aplicacion Web en Netbeans IDE

entomologistsamoanΛογισμικό & κατασκευή λογ/κού

15 Αυγ 2012 (πριν από 4 χρόνια και 10 μήνες)

682 εμφανίσεις




3CM3


Ortiz Ávila Dafne Baal

3CM3

Tutorial de aplicación Web en
Netbeans IDE



1

Creación de una aplicación Web con conexión a base de datos

Por medio de este tutorial se lograra la creación de una aplicación Web.

Esta aplicación 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 creación de esta aplicación
necesitamos de:


Glassfish es un servidor que está incluido dentro
de la aplicación Netbenas IDE.


Creación de l
a base de datos

Para la creación de

esta aplicación 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 diálogo
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 número de puerto del servidor.

Si esta información 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 c
ontraseña de administrador.

El valor predeterminado es en blanco.

Nota:

Una contraseña en blanco también puede ser una contraseña.


3.

Haga clic en la pestaña Propiedades de Administración en la parte superior del cuadro de
diálogo.

La ficha Propiedades de ad
ministración se muestra a continuación, que le permite introducir la
información para controlar el servidor MySQL.


4.

En la Ruta / URL a la herramienta de administración de campo, escriba o busque la ubicación
de la aplicación de administración de MySQL
, como la herramienta de administración de
MySQL
.

Nota:

mysqladmin

es la herramienta de administración MySQl encuentra en el

bin

carpeta
del directorio de instalación de MySQL.

Es una herramienta de línea de comandos y no es
ideal para usar con el IDE.



5.

En el Camino a la orden de arranque, escriba o busque la ubicación del comando de inicio de
MySQL.

Para encontrar el orden de arranque, busque

mysqld

en la

carpeta

bin

del directorio
de instalación de MySQL.



6.

En el camino hacia la parada de campo de comandos, escriba o vaya a la ubicación de la
orden de parada MySQL.

Este suele ser el

mysqladmin

en la

carpeta bin
del dire
ctorio
de instalación de MySQL.


7.

E
n el campo Argumentos, escriba

-
u root
stop

para
dejar
para detener el servidor.

8.

Cuando haya terminado, en la ficha Propiedades de administración debe ser similar a la
siguiente figura.




3


9.

haga clic en Aceptar.



Posteriormente podemos visualizar en el recuadro de servicios la siguiente información:



Para poder establecer la conexión a la base de datos debemos presionar clic derecho sobre Servidor
Mysql, elegir la opción 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 diálogo 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 ba
se 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',
'va
lentino@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 advi
ce 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 stat
e 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 spous
e, 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 b
e 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 y
ou 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
ubicación en la que previamente guardado

ifpwafcad.sql

y haga clic en Abrir.

El script se abrirá automáticamente en el editor de SQL.

2.

Asegúrese de que su conexión a

MyNewDatabase

se selecciona la conexión 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 información se genera en la ventana
de resu
ltados.



4.

Para comprobar los cambios, haga clic en el

MyNewDatabase

nodo de conexión en la ventana
de tiempo de ejecución y elija Actualizar.

Las actualizaciones de opción Actualizar los
componentes de interfaz de usuario de la base de datos del Explorado
r de la situación 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



Creación de la Aplicación

Empecemos por crear un nuevo proyecto dentro de NentBeans IDE; dicho proyecto requiere
tener las características de

un proyecto web.

1.
-

Seleccione Archivo > Nuevo proyecto desde el menú de herramientas de NentBeans IDE.

Posteriormente selecciona las

características del proyecto a crear en este caso Web Java y con
ello seleccionamos la aplicación web y haga clic en siguiente.












10

Al realizar este proceso se creara una aplicación web vacía
, el IDE prepara un proyecto con todo
lo necesario

y pueda ser ejecutado a través de los complementos necesarios para una aplicación
web.

2.
-

En la siguiente ventana que nos mostrara el IDE, colocaremos los datos el proyecto como lo
son:



Nombre: IFAWAFCAD



Ubicación:
la que se desee

Una vez que estos d
atos han sido seleccionados podemos dar clic en siguiente.

3.
-

La siguiente ventana

mostrada por el IDE, se basa en la configuración del servidor bajo el cual
se correrá la aplicación web.

Nota:




Elegiremos Glassfis como servidor y como versión del proyecto Java EE 5.



El servidor GlassFish se muestra en el servidor de lista despl
egable si se ha instalado la versión Java de la

IDE
de NetBeans

.

Debido a que el servidor GlassFish está incluido en la descarga, se registra automáticamente
con el IDE.

Si desea utilizar un
servidor diferente para este proyecto, haga clic en el botón 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 aplicación, y se abre una
página JSP vacía (

index.jsp

) en el editor.

El

index.jsp

archivo sirve como la página de inicio para la
aplicación

Para comprobar que esta aplicación
ha sido creada de m
anera 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 página HTML con el mensaje
“Hell
o World” .




Preparación de Interfaz Grafica

Comencemos por la preparación de la página de inicio (

index.jsp

) y de la respuesta
(

response.jsp

páginas).


En la página de bienvenida
(

index.jsp

)

se implementa un formulario HTML que se utiliza para
capturar los datos que son solicitados al usuario.

En las 2

páginas se implementa una tabla HTML
para mostrar los datos que sean extraídos de la consulta a la base de dato
s
.


Posteriormente
s
e
crea
ra

una hoja de estilo que realza el aspecto de las dos páginas.





12


Creación de las páginas



Página Index.jsp


Nos aseguramos de que
index.jsp

está abierta en el editor.


De lo contrario despleguemos la
pestaña del proyecto: IFAWAFCAD>
Páginas

Web> WEB
-
INF>

index.jsp


1.

En el editor, cambiar el texto entre las

etiquetas:

<title>


Página de Inicio
IFPWAFCAD

</title>


2.

Cambiar el texto entre las

etiquetas:

<h1
>



Bienvenido a IFPWAFCAD, el ex internacional
de los luchadores profesionales "Asociación para el Ases
oramiento 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 categoría HTML y tenga en cuenta que el
fragmento de código predeterminado para el elemento

de muestra.

Se puede configurar
la paleta a su gusto
-

botón derecho del ratón 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 después de

la


etiqueta
<h1>

con ello crearemos una
nueva tabla dentro del body de nuestra página
.




13

2.


Posteriormente

en la paleta
, haga doble clic en la tabla
.

3.

En el cuadro de diálogo
de la tabla, debemos especificar

los siguientes valores haga clic en
Aceptar:




Fi
las

: 2



Columnas

: 1



Tamaño del borde

: 0

El código de la tabl
a HTML se genera y se añade a la página

página

index.jsp la cual hemos
estado trabajando.












En el código que se generó de la tabla en la página
será modificado hasta obtener el
siguiente
código. Con esto agregaremos títulos 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 continuación:

</ 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

acción 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 línea posteriormente pulsamos Ctrl +
Espacio para invo
car el
apoyo de código de terminación

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
puls
ar Ctrl +
Espacio.

Y se mostraran las posibilidades para completar nuestro código.




15


10.
-

En el cuadro

de diálogo que aparece, escribiremos en el nombre

subject_id


y hacemos

clic en Aceptar.

El código se añadirá a la
página

index.jsp

El
número de opciones para en

la lista

no es importante.

Más adelante en el tutorial, a
ñadir
etiquetas JSTL que genera

dinámicamente las opciones sobre

los resultados que obtengamos
de
la base de
los datos.

11.
-
Agregar un elemento de botón de envío a un
punto justo después de la lista desplegable
que acaba de agregar
. En el cuadro de diálogo del

botón,
y en lo
s campos de texto Nombre

y
agreguemos un nombre,

ha
remos

clic en Aceptar.

Para comprobar que los que hemos añadido a la página index.jsp haya
sido

echo
correctamente ejecutaremos en proyecto completo.

Obtendremos como resultado lo siguiente:



La creación de la página de respuesta


Una vez terminada la
página

index.jsp, crearemos la
página

de respuest
a

(
response.jsp

)

para ello
debemos crear el archivo en el proyecto.

Tenga en cuenta que la mayor parte del contenido que
aparece en esta página se genera dinámicamente mediante la tecnología JSP.


1.

Haga clic derecho en el nodo del proyecto IFPWAFCAD en la ventana de proy
ectos y elija
Nuevo JSP>.

El nuevo diálogo de JSP abre archivos.



16

2.

En el campo Nombre de JSP de archivo, escribamos

reponse
.


Esta página se creara en la
misma raíz donde se localiza la página indesx.jsp

Esta es la misma ubicación de
la

index.jsp

página de b
ienvenida reside.

3.

Acepte los valores predeterminados de otros y haga clic en Finalizar.

Una plantilla para la
nueva

response.jsp

página se genera y se abre en el editor.

Un nuevo nodo JSP también se
muestra en las páginas Web en la ventana de proyectos.



4.
-

En el editor, cambiar el título de:

IFPWAFCAD
-

{} marcador de posición
.

5.
-

Retire el

<h1> Hola Mundo </ h1>

línea entre las etiquetas

<body></body>
, copiar y pegar
la siguiente tabla HTML en el 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
-
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 página en un navegador, haga clic en el editor y seleccione Archivo Ejecutar la página
será implementa en el servidor GlassFish, y se abre en el navegador predeterminado.









18

Creación de una hoja de estilo


Crearemos una hoja de estilo que mejora la
vista

de la interfaz

de nuestras páginas

web.

Dicha
hoja de estilo afectara a las 2 páginas creadas con anterioridad.


Abra el asistente Nuevo arch
ivo pulsando el botón
New File,

situado en la barra de herramientas
principal del IDE.

Seleccione la categoría de Web, a continuación, seleccione Hoja de estilo en
cascada y haga clic en Siguiente.



1.

Para el
Nombre de
l

archivo

elija
estilo

CSS

y haga clic en Finalizar.


2.

El IDE
crea un archivo vacío de CSS y lo colo
ca en la ubicación 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 edito
r, 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 páginas, añadir
la siguiente línea entre el

<
head>
</
head>
:


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




La preparación de la comunicación entre la aplicación y base de datos

La forma más eficiente para
implementar la comunicación entre el servidor y base de datos es la
creación de una base de datos de

agrupación de conexiones
.


Crear una nueva conexión para cada solicitud de cliente se puede consumir mucho tiempo,
especialmente para las aplicaciones que
reciben continuamente un gran número de
peticiones.

Para remediar esta situación, numerosas conexiones se crean y se mantienen en un
pool de conexiones.

Cualquier petición de entrada que requiere acceso a la capa de datos de la
aplicación utiliza una cone
xión ya creado de la piscina.

Del mismo modo, cuando una solicitud se
ha completado, la conexión no se cierra, pero regresó a la piscina.

Después de preparar la fuente de datos y agrupación de conexiones para el servidor, entonces
necesitamos ordenar a la
aplicación para utilizar la fuente de datos. Esto se suele hacer mediante
la creación de una entrada en la aplicación

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 edición del servidor de código abierto GlassFish contiene la base de datos de agrupación de
conexiones (DBCP)

las bibliotecas que proporcionan funcionalidad de agrupación 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
aplicación puede utilizar para la agrupación de conexiones.


Se puede configurar la fuente de datos directamente en la c
onsola de administración servidor
GlassFish, o, como se describe a continuación, puede declarar los recursos que la aplicación


20

necesita un

sol resources.xml

archivo.

Cuando se implementa la aplicación, el servidor lee en las
declaraciones de los recursos,
y genera los recursos necesarios.

Los pasos siguientes muestran cómo declarar un pool de conexiones, y una fuente de datos que se
basa en la agrupación de conexiones.

El NetBeans recurso JDBC asistente le permite realizar
ambas acciones.


Pasos a seguir p
ara la creación de un pool de conexiones.


1.

Abra un Nuevo archivo pulsando el botón New File, localizado en la barra de herramientas
principal del IDE.

Seleccione la categoría de servidor GlassFish, seleccione recurso JDBC y
hacemos clic en Siguiente.












21

2.

En el paso 2 Atributos, General, seleccione la opción Crear nueva conexión JDBC opción 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 descripción del origen de datos.

Por ejemplo, escriba:

Accede a la
base de datos que proporciona datos para la aplicación 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.

Asegúrese de que el extracto
de la opción de conexión 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 información de la
conexión de base de datos que ha especificado en el paso anterior, y establece el valor de las
propiedades de nombre de la agrupación de conexiones nuevas.

En este caso la conexión co
n
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 agrupación 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.

A
bra 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
agrupación de conexiones se muestran ahora.




Es necesario hacer referencia al recurso JDBC que acaba de configurar a partir de la aplicación
web.

Para ello, puede crear una
entrada en la aplicación

web.xml
descriptor de despliegue.











1.

En la ventana de proyectos,
expanda la carpeta de archivos de configuración y haga doble
clic en

el archivo web.xml
.

Una interfaz gráfica 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
informaci
ó
n que describe c
ó
mo una aplicaci
ó
n se implementa en un entorno espec
í
fico.

Por ejemplo,
normalmente se utiliza para especificar los par
á
metros de contexto de aplicación
y pautas de comportamiento, la configuración de seguridad, así como las asignaciones para
los servlets, los filtros y los oyentes.




25

3.

Ampliar las

referencias de recursos título y haga clic en Agregar para abrir el cuadro de
diálogo 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 Descripción es opcional.




5.
-
Para verificar que el recurso se añade 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
a
dición 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 instalación y copiar el

mysql
-
connector
-
java
-
5.1.6
-
bin.jar

archivo desde el directorio raíz del conductor en la carpeta de la bi
blioteca del servidor que
esté utilizando.

Afortunadamente, la gestión de la IDE del servidor es capaz de detectar en la
implementación si el archivo JAR se ha añadido
-

y si no, lo hace automáticamente.




Para demostrar esto, abra la ventana de Servidore
s (Seleccione Herramientas> Servidores).


El IDE proporciona un driver JDBC opción de implementación.

Si la opción está activada, se inicia
una comprobación para determinar si los controladores son necesarios para las aplicaciones
implementadas del servido
r.


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 p
anel izquierdo.

2.

En el panel principal, seleccione la opción Habilitar el controlador JDBC opción de
implementación.








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 s
e 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 computado
ra, vaya al directorio de instalación de GlassFish servidor y de perforación
en el

dominio

>

domain1

>

lib

subcarpeta.

Debido a que ya debería haber implementado
el proyecto IFPWAFCAD al servidor, usted debe ver el

mysql
-
connector
-
java
-
5.1.6
-
bin.jar

archiv
o.

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 botón derecho del nodo del proyecto.

Puede ver el progreso
en la ventana d
e 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 automáticamente.








28

Incorporación de la lógica dinámica

Volviendo a la

index.jsp

y

response.jsp

marcadores de posición que creó anteriormente en el
tutorial, ahora se puede aplicar el código JSTL que permite que las
páginas para generar
contenido

del formulario dinámico

, es decir, sobre la base de datos del usuario.

Para ello, realice
las siguientes tres tareas.



Puede aplicar la

tecnología 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 ampliación de las bibliotecas de IFPWAFCAD> el
nodo del servidor GlassFish en la ventana de proyectos y la búsqueda de la

JSTL
-
impl.jar

archivo.

Debido a que las bibliotecas de
l servidor GlassFish se añade por defecto a la ruta
de clases de su proyecto, usted no tiene que realizar los pasos para esta tarea.

JSTL proporciona cuatro áreas básicas de funcionalidad.

Estos son los siguientes:




principales

: las tareas más comunes, estructurales, tales como iteradores y condicionales para
el manejo de control de flujo



fmt

: la internacionalización y el formato de mensaje de localización



sql

: acceso a base de datos simple



xml

: manejo de contenido XML


Ahora usted puede implementar el código que recupera y muestra de forma dinámica datos de
cada página.

Ambas páginas 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 dinámica 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 ratón 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 continuación,
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 ...

%>

declaración, a continuación, haga doble clic en
el elemento del informe DB en la paleta.

En el cuadro de diálogo que aparece, introduzca los
siguientes datos:




29





Nombre de variable:

los sujetos



Ámbito de aplicación:

la página



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 cómo 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 página de
índice se compila en un servle
t, y la página de bienvenida se abre en el navegador por defecto.

El
código generado por el elemento de informe DB crea la siguiente tabla en la página de bienvenida.




30



5.
-

Como puede ver, el elemento de informe DB le permite probar rápidamente su conex
ión 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 cómo integrar el código generado en el código HTML en la lista
desplegable que creó anteriormente en el tutorial.


6.
-

Exam
inar los datos de columna en el código 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 fil
a, 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

, según
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 compilación en ahorrar está habilitada para su proyecto.

Esto significa que
al modificar y guardar un archivo, el archivo se compila automáticamente y desplegado y no es
necesario volver a compilar todo el proyecto.

Usted puede activar y desactivar la compilación
en ahorrar para su proyecto en la categoría de Compilación de la ventana Propiedades del
proyecto.



32

response.jsp


La respuesta de la

página ofrece los detalles para el consejero que se corresponde con el tema
elegido en la página 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 ...

%>

declaración, « En el cuadro de diálogo que
aparece, introduzca los siguientes datos:

o

Nombre de variable:

counselorQuery

o

Ámbito de aplicación:

la página

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" v
alue="${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 página 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 inclusión de la variable
de fila en las declaraciones.


taglib

Directiva para la JSTL

núcleo

de la biblioteca de la parte superior del archivo,
por lo que e
l

<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 código HTML, reemplace todos los marcadores de posición con EL código

de las
declaraciones que muestran los datos contenidos en el

counselorDetails
variable.




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


Descripción <td> <strong>:

</ strong> </ td>


<td> <span style="font
-
size:smaller; font
-
style:italic;">
$ {} counselorDetails.description

</ span> </ td>


</ Tr>


<tr>


<td> Consejero <strong>: </ strong> </ td>


<t
d> <strong>
$ {} $ {counselorDetails.first_name counselorDetails.nick_name} $ {}
counselorDetails.last_name

</ strong>


<br> <span style="font
-
size:smaller; font
-
style:italic;">


miembro <em> desde:
$ {} counselorDetai
ls.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>


teléfono <br> <strong>: </ strong>
$ {} counselorDetails.telephone

</ td>


</ Tr>


</ Table>


</ Body>



34

</ Html>


Ejecución de la aplicación completa

Usted
ha completado la aplicación.

Intente ejecutar de nuevo para ver cómo se muestra en un
navegador.

Tenga en cuenta que debido a compilar NetBeans

'en función de Ahorro, no tiene que
preocuparse acerca de la compilación o por la reprogramación de la aplicación.

Cuando se ejecuta
un proyecto, usted puede estar seguro de que la implementación contiene los últimos cambios.

Haga clic en el proyecto de e
jecución, situado en la barra de herramientas principal.


El

index.jsp

página 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

página, mostrando los detalles
correspondientes a su selección.