Universidad Peruana Las Amricas

Laboratorio Nro. 6

Desarrollo de Aplicaciones CRUD, utilizando JavaServer Faces

I. Competencia General: Comprender la implementacin de las clases entidades a partir de una Base de Datos, utilizando el framework, Visual Web JavaServer Faces. Comprender el funcionamiento de una aplicacin MVC (Modelo, Vista, Controlador) II. Introduccin a las Aplicaciones CRUD CRUD son las siglas en ingls de las operaciones bsicas que se implementan en el manejo de una base de datos: C: Create R: Recover, Read U: Update D: Delete CRUD es una aplicacin Web que implementa estas operaciones, de un modo que busca ser el ms claro y simple, para servir como referencia en la construccin de otras aplicaciones Web. Una aplicacin Web se puede hacer usando diferentes combinaciones de lenguajes de programacin, acceso a base de datos y otras tecnologas, en este caso estas aplicaciones CRUD se desarrollarn implementando las clases entidades utilizando el framework Visual Web JSF. Modelo = Base de Datos MYSQL Vista = Paginas JSP y JSF Controlador = Java III. Creacin Framework de una Aplicacin Web JSF

a) Ejecute el servidor Mysql b) Ejecute el programa cliente HeidiSQL

Figura 01: FrontEnd del programa Cliente HidiSQL

c) Crear la base de Datos academia

Puede hacer en el Men: Tools y elegir la opcin: Create DataBase

Figura 02: Creacin de la Base de Datos academia

d) A continuacin abra el archivo academica.sql y pegue el cdigo en el panel SQL Query del programa HeidiSQL.

3.1 Requerimientos - Netbeans 6.5 (IDE http://www.netbeans.org) - GlassFish v 2 superior (Servidor Web) - Plugin Componente Visual Web Java Server Faces - Servidor Mysql (versin 5.0 superior en linux o windows) - Cliente FrontEnd MySql HeidiSQL o PhpMyadmin 3.2 Base de Datos MySql Para desarrollar este laboratorio es importante contar con el archivo academia.sql que contiene la estructura y registros de la base de datos Academia.

Figura 03: Creacin de la tabla Datos sistemita

e) Finalmente para ejecutar el Cdigo SQL

presione F9 o clic en el botn .

Curso: Ingenieria de Software II

Pag. - 1 -

Universidad Peruana Las Amricas

f)

Puede ver las tablas y los registros

Figura 07: Creacin del Proyecto Nuevo

b) En el asistente seleccionar: Java Web>Web

Application.
Figura 04: Vista de las tablas generadas

Figura 08: Seleccionar Proyecto Nuevo Figura 05: Vista de los registros de la tabla alumno

c) Nombre del proyecto: instituto, selecciona la

ubicacin de tu proyecto, luego clic en el botn Siguiente.

3.3 Creacin del Proyecto El siguiente proyecto permitir generar cdigo JSP, JSF y JAVA, adems de implementar los mdulos para Crear, Recuperar, Actualizar y Eliminar Registros de las clases entidades. En primer lugar ejecute el IDE Netbeans versin 6.5, en Windows o Linux

Figura 09: Nombre y Ubicacin de la Aplicacin Web

d) Selecciona el servidor web, para este ejemplo

Figura 06: Entorno IDE Netbeans 6.5

usa el glassfish 2 o 3 o Apache Tomcat 6.x. Adems de la versin de Java EE

a) Crea un nuevo proyecto: File > Proyecto

Nuevo.

Curso: Ingenieria de Software II

Pag. - 2 -

Universidad Peruana Las Amricas

Figura 10: Seleccionar Servidor Web, versin de Java y Ruta del proyecto

Figura 13: Despliegue de la opcin Prestaciones

e) Selecciona el framework: JavaServer Faces y

Terminar.

b) Seleccionamos
Desplegamos.

Base

de

Datos

Figura 14: Despliegue de la opcin Prestaciones

c) Seleccionamos MYSQL y hacemos clic

derecho en el servidor y en propiedades bsicas coloca el password del servidor y finalmente el botn aceptar

Figura 11: Seleccionar el Framework con la que se desarrollar la aplicacin Web

Figura 15: Propiedades del Servidor Mysql

Figura 12: Lista de Framework que se puede desarrollar una aplicacin web

3.4 Netbeans conectando a la base de datos sistemita Ahora vamos a integrar el proyecto y la base de datos academia a nuestro proyecto.

Figura 16: Propiedades del Servidor Mysql

d) Una vez conectado al servidor, seleccione la

base de datos academia, creado en el apartado inicial.

a) Nos ubicamos en la pestaa prestaciones de

Netbeans

Curso: Ingenieria de Software II

Pag. - 3 -

Universidad Peruana Las Amricas

Figura 17: Vista de la BD academia desde NetBeans

e) Ahora debe conectar a la base de datos, el cual mostrar la tabla creada con su respectiva estructura.

Figura 20: Estructura e indices de la tabla academia

3.5 Creando la Unidad de Persistencia Para poder trabajar el proyecto con la base de datos es necesario crear la unidad de persistencia. a) Debe hacer clic derecho en el proyecto, seleccionar la opcin Nuevo y Unidad de Persistencia

Figura 18: Conectando a la base de datos academia

Figura 19: Conectando a la base de datos academia

f) Puede visualizar la tabla y su estructura,

puede hacer doble clic en el perfil de la conexin.
Figura 21: Seleccionando la Unidad de Persistencia

b) A continuacin el asistente automticamente

le asignar un nombre a la unidad de persistencia institutoPU, y el proveedor de persistencia por defecto ser TopLink.

Curso: Ingenieria de Software II

Pag. - 4 -

Universidad Peruana Las Amricas

3.6 Creacin de las Clases Entidades a partir de la Base de Datos El propsito de crear las clases entidades consiste en generar cdigo java, ntese que tenemos 9 tablas en la base de datos, estas tablas en el framework generar una clase entidad por tabla, adems sus propios cdigos en java para sus mtodos y atributos. Para realizar esta operacin:
Figura 22: Creando la Unidad de Persistencia

c)

Importante debe seleccionar un Origen de Datos.

a) Clic derecho en el proyecto y seleccionar Clases entidad a partir de la base de datos

Figura 23: Seleccionando New Data Source

d)

A continuacin debe crear el Data Source.

Figura 26: Seleccionando la opcin Clases Entidades a partir de la base de Datos.

b) Seleccionamos el origen de datos, en este caso proyectoacademia y agregamos todas las tablas.

Figura 24: Asignando nombre del perfil de la conexin y la ruta JDBC de la base de datos

e) Finalmente debe quedar como la figura que

se muestra:

Figura 27: Seleccionando Base de Datos y Tablas

Figura 25: Configuracin final de la Unidad de Persistencia

c) Hacemos clic en el botn siguiente para especificar los nombres y la ubicacin de las clases entidad y asignar el nombre del paquete donde se encontraran las clases generadas, en este caso el nombre del paquete que ser asignado ser clasesentidades.

y presionar el botn Finalizar.

Curso: Ingenieria de Software II

Pag. - 5 -

Universidad Peruana Las Amricas

Figura 28: Especificando nombre y ubicacin de las clases entidades

Figura 31: Paquete y clases generadas en el proyecto

3.7 Creacin de la JSF Pages, de las Clases Entidades Para finalizar nuestra creacin de la aplicacin CRUD, es necesario generar todas las pginas JSP, en este caso representa la vista de la aplicacin. Para realizar esta operacin: a) Clic derecho en el proyecto y seleccionar JSF Pages from Entity Classes
Figura 29: Equivalencia Tabla de la Base de Datos y Clase de la aplicacin en Java

d) A continuacin seleccionamos el botn Siguiente para determinar las opciones de mapeo.

Figura 30: Opciones de Mapeo

Figura 32: Seleccionando JSF Pages from Entity Classes..

f) Para finalizar y generar las clases clic en el botn Terminar.

b) A continuacin seleccionamos todas las clases entidades para que se genere el cdigo JSF que finalmente para el usuario son las pginas JSP.

Curso: Ingenieria de Software II

Pag. - 6 -

Universidad Peruana Las Amricas

Figura 33: Habilitamos todas las clases entidades

c) A continuacin mostrara las opciones de localizacin las carpetas donde se generan las vistas y los controladores.
Figura 36: Archivos en cdigo Java de las clases y controladores

3.7 Ejecutando la Aplicacin CRUD Una vez presionado F6, mostrar la primera pgina de ndices de las clases entidades generadas.

Figura 34: Generando los JSF y Clases Controladoras

d) Finalmente se ha generado todo el cdigo de la aplicacin academia.

Figura 37: ndice de las clases implementadas

Figura 35: Generando de las carpetas y archivos de las pginas JSF y JSP

Curso: Ingenieria de Software II

Pag. - 7 -

Universidad Peruana Las Amricas

Figura 38: Reporte de los Registros de la tabla profesor

Figura 39: Detalles de los Registros

Figura 41: Editando un Registro

Figura 40: Detalles de un registro

Figura 42: Creando nuevo registro

Curso: Ingenieria de Software II

Pag. - 8 -

Universidad Peruana Las Amricas

Figura 43: Lista de Alumnos cada 5 registros

Actividades: a) Personalice la aplicacin b) Integre una pgina de autentificacin para la aplicacin academia.
Universidad Inca Garcilaso de la Vega FACULTAD DE INGENIERA DE SISTEMAS, CMPUTO y TELECOMUNICACIONES Docente: MSc. Daniel Alejandro Yucra Sotomayor Lima, Junio, del 2009 Consultas: danielyucra@gmail.com

Curso: Ingenieria de Software II

Pag. - 9 -