taller desarrollo web

11
Taller Desarrollo WEB – Netbeans Ing. Mario Linares Vásquez MSc. El objetivo de ese taller es que el estudiante interiorice los conceptos adquiridos en clase mediante el ejercicio practico, y adicionalmente que se familiarice con el uso de Netbeans para desarrollo de aplicaciones web. Paso 1. Creacion del proyecto web Para crear un proyecto web en Netbeans, sobre el panel de proyectos o el menu File seleccione la opción New Project. Figura 1. Nuevo Proyecto A continuación se desplegará un wizzard con los diferentes tipos de proyectos que soporta Netbeans. En este caso particular vamos a crear una aplicación web. Para tal efecto se debe seleccionar la categoría Java Web y luego la opción Web Application (Ver Figura 2). Luego de seleccionada la opción de Aplicación web, se desplegara un asistente para la configuración inicial del proyecto. En el caso de aplicaciones Web es necesario definir el nombre de la aplicación y seleccionar el contenedor que se va usar como soporte (Ver Figura 3). Para este caso ingrese el nombre WebLab1 y seleccione Tomcat como el contenedor.

Upload: josue-cucaita-murcia

Post on 24-Jul-2015

264 views

Category:

Education


1 download

TRANSCRIPT

Page 1: Taller  desarrollo web

Taller Desarrollo WEB – Netbeans

Ing. Mario Linares Vásquez MSc.

El objetivo de ese taller es que el estudiante interiorice los conceptos adquiridos en clase

mediante el ejercicio practico, y adicionalmente que se familiarice con el uso de Netbeans para

desarrollo de aplicaciones web.

Paso 1. Creacion del proyecto web

Para crear un proyecto web en Netbeans, sobre el panel de proyectos o el menu File

seleccione la opción New Project.

Figura 1. Nuevo Proyecto

A continuación se desplegará un wizzard con los diferentes tipos de proyectos que soporta

Netbeans. En este caso particular vamos a crear una aplicación web. Para tal efecto se debe

seleccionar la categoría Java Web y luego la opción Web Application (Ver Figura 2).

Luego de seleccionada la opción de Aplicación web, se desplegara un asistente para la

configuración inicial del proyecto. En el caso de aplicaciones Web es necesario definir el

nombre de la aplicación y seleccionar el contenedor que se va usar como soporte (Ver Figura

3). Para este caso ingrese el nombre WebLab1 y seleccione Tomcat como el contenedor.

Page 2: Taller  desarrollo web

Figura 2. Nueva Aplicación web

Figura 3. Creación Aplicación web

Page 3: Taller  desarrollo web

A continuación se desplegara una ventana para la selección del framework que se va usar para

la capa de presentación. Entre los frameworks de presentación se encuentra GWT (Google

Web Toolkit), JSF (Java Server Faces), Visual JSF, Hibernate, Spring MVC, entre otras. Para

efectos de este taller no se debe seleccionar ninguno.

Figura 4. Selección framework de presentación.

Al finalizar el proceso se genera el proyecto con la estructura de directorios que se muestra en

la Figura 5.

Figura 5. Estructura de directorios aplicación web.

Page 4: Taller  desarrollo web

Paso 2. Agregar un servlet al proyecto

En la arquitectura JEE, los servlets son los componentes del lado del servidor que se encargan

de procesar las solicitudes http que se generan en el lado del cliente. Bajo este esquema los

servlets se deben utilizar como Controladores en la aplicación. En este taller vamos a explorar

el uso de Servlets con diferentes responsabilidades, con el fin de entender bien su modelo de

implementación.

Para agregar un Servlet, sobre el proyecto haga click derecho y seleccione la opción New>>

Servlet.

Figura 6. Nuevo servlet.

A continuación se desplegará el asistente para creación del Servlet. En este asistente se debe

ingresar el nombre y el paquete donde se alojará la clase. Para este taller ingrese WebLab1

como nombre del servlet, y servlets para el campo paquete. Como el paquete no ha sido

creado, se creará al finalizar el asistente (Ver Figura 7). Al dar click en next aparece la ventana

para definición del mapeo del Servlet. No cambie los valores si no lo desea y de click en

finalizar (Ver Figura 8).

Page 5: Taller  desarrollo web

Figura 7. Asistente creación de servlets.

Figura 8. Asistente configuración de servlet.

Page 6: Taller  desarrollo web

Al finalizar el proceso debe aparecer el paquete servlets dentro de la carpeta Source Packages,

y dentro de este la clase WebLab1, que es la clase del servlet creado.

Figura 9. Servlet WebLab1

Abra el archivo web.xml que se encuentra dentro de la carpeta WEB-INF. En la pestaña

Servlets encontrará la información de mapeo del servlet creado. En la pestaña XML puede

visualizar el código fuente del archivo web.xml.

Figura 10. Editor web.xml - Servlets

Page 7: Taller  desarrollo web

Revise el contenido del servlet WebLab1 y quite los comentarios que aparecen en el contenido

del método processRequest. Luego de esto corra la aplicación haciendo click sobre el botón

.

Figura 11. Index.jsp

Al correr la aplicación se desplegara en el browser la página index.jsp. Por default cuando se

crean aplicaciones en netbeans, esta tiene una página index.jsp configurara como la página de

inicio de la aplicación. Si usted quiere cambiar la página de inicio puede hacerlo a través del

archivo web.xml.

Para probar el contenido generado por el servlet, ingrese en el browser la siguiente url

http://localhost:8084/WebLab1/WebLab1. Modifique el contenido que genera el Servlet a su

gusto, y visualice los cambios que genera.

Paso 3. Modificar JSP de inicio.

Para agregar componentes gráficos, a los archivos .jsp, se puede utilizar el editor de texto del

archivo o arrastrar los componentes que se encuentran en la paleta. Para visualizar la paleta se

puede presionar la combinación de teclas Ctrl+Shift+8, o hacer click en el menú

Window>>Palette.

Figura 12. Paleta elementos gráficos JSP.

Page 8: Taller  desarrollo web

Ahora, abra el archivo index.jsp y agregue un formulario html con método post y con action

WebLab1(la url del servlet). Agregue luego al formulario dos campos de texto para ingresar

nombre y cedula, y un botón Summit. Los nombres para los campos de texto deben ser name

& identificación, respectivamente. Para agregar los componentes puede hacerlo de forma

manual o utilizando la paleta.

Figura 13. Index.jsp modificado

Paso 4. Acceso a parámetros del jsp en el Servlet.

Cuando los action de los formularios html son vinculados a un servlet, en este último se

pueden consultar los valores de los campos del formulario. Estos valores son conocidos como

parámetros del request. En esta medida el servlet puede acceder al objeto request y a su vez a

los parámetros que vienen en este.

La forma de consultar los parámetros del request en el servlet es mediante el nombre del

campo en el html. Por ejemplo el input para el nombre en index.jsp es, tiene el nombre name,

y el campo para la cedula tiene el nombre identification.

Para acceder entonces a un parámetro del request en el servlet, se utiliza la siguiente

expresión java:

String param = request.getParameter("<nombre del parámetro> ");

Los parámetros del request se obtienen como cadenas, y en el caso que el request no tenga un

parámetro retorna null.

Page 9: Taller  desarrollo web

Ahora, agregue código en el método processRequest del servlet para acceder a los parámetros

name e identification, y pintarlos en la pagina generada por el servlet.

Figura 14. Servlet WebLab1 .

El hecho de generar contenido html desde los servlets no es una buena práctica de desarrollo

web, pero en este caso ha sido explorado para comprender el funcionamiento de los servlets.

Como los servlets deben operar como controladores, deben entonces redireccionar el flujo a

los componentes de vista indicados. En este ejemplo quien debería pintar los datos ingresados

por el usuario es otro jsp.

Paso 4. Crear JSP para pintar datos ingresados

Agregue un nuevo jsp al proyecto con el nombre main.jsp y modifiquelo de tal forma que el

codigo sea igual al de la Figura 15. Luego mofifique el servlet WebLab1 para que redireccione

el request a main.jsp. Modifique el codigo del metodo processRequest del servlet para que

sea igual al codigo en la Figura 16.

Page 10: Taller  desarrollo web

Figura 15. Main.jsp

Figura 16. WebLab1.java modificado

Actividades para entregar

Construya una aplicación web soportada en base de datos que proporcione la siguiente

funcionalidad:

1. Búsqueda de personas en la base de datos por cedula.

2. Ingreso de personas en la base de datos.

3. Borrado de registro de personas en la base de datos.

La información que se debe almacenar de las personas es:

- Nombre

- Apellidos

- Cedula

- Dirección

Page 11: Taller  desarrollo web

- Teléfono.

- Profesión.

La profesión corresponde a un listado asociado a una tabla en la base de datos con la siguiente

información:

- Id

- Título

- Descripción.

La arquitectura del sistema debe incluir:

- JPS para la vista

- Un Servlet como controlador que invoque los servicios de negocio.

- DAOS para las tareas de persistencia y acceso a base de datos

- Un clase servicio que invoca las tareas de persistencia.

- VO s para transporte de información entre capas.

- Entities que modelan las tablas de la base de datos.