TEMA 07: GUA DE DESARROLLO DE EJERCICIO DE PATRN MVC
Unidad II: DESARROLLO DE APLICACIONES WEB II Docente: Ing. Hobby Saavedra Rosas EJERCICIO PATRN MVC
1. Crear una Base de Datos, de nombre COLEGIO, una tabla ALUMNO y procedimientos almacenados a. Requerimientos de Software MySQL Server 5.5 MySQL Query Browser NetBeans 7.2 b. Creacin de base de Datos en MySQL Server Crear una base de datos de nombre COLEGIO
Clic en Create New Schema
1. Clic derecho sobre, cualquier base de datos. 2. Elegir la opcin Create New Schema Unidad II: DESARROLLO DE APLICACIONES WEB II Docente: Ing. Hobby Saavedra Rosas Ingresamos el nombre de la base de datos
Ahora procedemos a crear la Tabla Alumnos Clic derecho sobre la base de datos que acabamos de crear.
Clic en Create New Table
Unidad II: DESARROLLO DE APLICACIONES WEB II Docente: Ing. Hobby Saavedra Rosas Agregamos los campos de la Tabla Alumno
Creacin de procedimientos almacenados
Unidad II: DESARROLLO DE APLICACIONES WEB II Docente: Ing. Hobby Saavedra Rosas Asignar el nombres de: sp_query
sp_insert
sp_update
Unidad II: DESARROLLO DE APLICACIONES WEB II Docente: Ing. Hobby Saavedra Rosas sp_delete
sp_get
sp_promedio
Verificamos los procedimientos creados, dentro de la base de datos.
Unidad II: DESARROLLO DE APLICACIONES WEB II Docente: Ing. Hobby Saavedra Rosas
2. Creando el proyecto web PatronMVC en NetBeans Los pasos de cmo crear un proyecto no los coloco porque ya fueron explicados en el laboratorio anterior. El punto es que deben crear un PROYECTO WEB de nombre PatronMVC_01 a) Requerimientos de Software NetBeans 7.2 b) Configuracin de libreras a usar en el proyecto. Se debe crear dentro del proyecto una carpeta lib y ah debemos de copiar el archivo mysqlconecctor.jar (driver de MySQL), como se muestra en la imagen.
Luego desde el netbeans, debemos agregar este archivo al proyecto, para lo cual debemos dar clic derecho en el proyecto e ir a Libraries
Y debemos agregar la librera de mysqlconnector, que se encuentra dentro de la carpeta lib, de nuestro proyecto, dando clic en el botn Add JAR/Folder y tambin agregar las librera JSTL (para trabajar sentencias de libreras personalizadas tag lib, como se hizo en el laboratorio 2) para agregar la librera JSTL debe dar clic en el botn Add Library, al final el formulario debe quedar asi. Unidad II: DESARROLLO DE APLICACIONES WEB II Docente: Ing. Hobby Saavedra Rosas
Ahora agregamos la librera JSTL
Unidad II: DESARROLLO DE APLICACIONES WEB II Docente: Ing. Hobby Saavedra Rosas La estructura de nuestro proyecto, debera ser el siguiente despus de haber agregado las libreras necesarias.
c) Creando los paquetes de acuerdo al PATRON MVC(Cdigo Fuente) Creando el MODELO Seleccionamos la carpeta Source Packages, dar clic derecho y agregar una Java Class.
Clase ConectaDb: Tendr un mtodo que nos proporcionara el acceso a la base de datos. Y estar dentro del paquete cone.sql
Unidad II: DESARROLLO DE APLICACIONES WEB II Docente: Ing. Hobby Saavedra Rosas d) Cdigo fuente en la Clase cone.sql
e) Clase Notas: Esta clase representa el Bean, es decir la clase que tendr la misma estructura de la tabla y servir para el transporte de datos mediante su mtodo set y get. Y estar alojada en el paquete dto
Unidad II: DESARROLLO DE APLICACIONES WEB II Docente: Ing. Hobby Saavedra Rosas f) Cdigo fuente en la clase Notas
Unidad II: DESARROLLO DE APLICACIONES WEB II Docente: Ing. Hobby Saavedra Rosas
g) Interfaz DaoNotas: Ac declaramos los mtodos que ser implementado por sus respectivas clases. Dentro del paquete model.dao
h) Creamos una interfaz y lo agregamos dentro del paquete model.dao
Unidad II: DESARROLLO DE APLICACIONES WEB II Docente: Ing. Hobby Saavedra Rosas i) Cdigo fuente en la interfaz DaoNotas
j) Clase DaoNotasImpl: En esta clase se proceder a la implementacin de los mtodos definidos en la Interfaz anterior, tomar en cuenta que cada mtodo invocara a su respectivo procedimiento almacenado. La clase se debe crear dentro del paquete model.dao.impl
k) Creamos una clase que implementa la interfaz creada anteriormenteo Notas.
Unidad II: DESARROLLO DE APLICACIONES WEB II Docente: Ing. Hobby Saavedra Rosas l) Cdigo fuente en la clase DaoNotasImpl
Unidad II: DESARROLLO DE APLICACIONES WEB II Docente: Ing. Hobby Saavedra Rosas
Unidad II: DESARROLLO DE APLICACIONES WEB II Docente: Ing. Hobby Saavedra Rosas
Unidad II: DESARROLLO DE APLICACIONES WEB II Docente: Ing. Hobby Saavedra Rosas
Creando el CONTROLADOR Se debe agregar al proyecto un SERVLET dentro del paquetr web.servlets.
Unidad II: DESARROLLO DE APLICACIONES WEB II Docente: Ing. Hobby Saavedra Rosas Asignamos la Path: Notas
Cdigo fuente en el ServletNotas
Unidad II: DESARROLLO DE APLICACIONES WEB II Docente: Ing. Hobby Saavedra Rosas
Unidad II: DESARROLLO DE APLICACIONES WEB II Docente: Ing. Hobby Saavedra Rosas
Unidad II: DESARROLLO DE APLICACIONES WEB II Docente: Ing. Hobby Saavedra Rosas
3. Creando la VISTA En esta parte se debe estructurar la parte de las vistas como se muestra en la imagen. Dicha estructura fue explicada en el laboratorio 1 Introduccin a JQuery, por eso ya no detallare ms este punto, tomar en cuenta solo lo siguiente. css: Hojas de Estilos js: Archivos javascript, ah est el archivo notas.js, donde est la parte de la definicin de los mtodo javascript que son invocados desde los jsp. view: donde estn las respectivas paginas JSP. Images: las imgenes a usar en las pginas.
Unidad II: DESARROLLO DE APLICACIONES WEB II Docente: Ing. Hobby Saavedra Rosas
4. Pantallas de funcionamiento de la aplicacin. a. Creamos una pgina index.jsp
Unidad II: DESARROLLO DE APLICACIONES WEB II Docente: Ing. Hobby Saavedra Rosas b. Creamos una pgina jsp, de nombre mensaje.jsp
c. Creamos una carpeta de nombre view
d. Dentro de la carpeta view, creamos las siguientes pginas
Unidad II: DESARROLLO DE APLICACIONES WEB II Docente: Ing. Hobby Saavedra Rosas e. En la pgina notasIns.jsp
Unidad II: DESARROLLO DE APLICACIONES WEB II Docente: Ing. Hobby Saavedra Rosas
Unidad II: DESARROLLO DE APLICACIONES WEB II Docente: Ing. Hobby Saavedra Rosas f. En la pgina notasQry.jsp
Unidad II: DESARROLLO DE APLICACIONES WEB II Docente: Ing. Hobby Saavedra Rosas
g. Dentro de la pgina notasUpd.jsp
Unidad II: DESARROLLO DE APLICACIONES WEB II Docente: Ing. Hobby Saavedra Rosas
Unidad II: DESARROLLO DE APLICACIONES WEB II Docente: Ing. Hobby Saavedra Rosas
h. Dentro de la carpeta js, agregamos un archivo java script de nombre notas.js
i. Dentro del archivo notas.js
Unidad II: DESARROLLO DE APLICACIONES WEB II Docente: Ing. Hobby Saavedra Rosas
Formulario Lista de Alumnos(notasQry.jsp)
Formulario Registro Alumno(notasIns.jsp)
Unidad II: DESARROLLO DE APLICACIONES WEB II Docente: Ing. Hobby Saavedra Rosas Ac podemos observar que el nuevo usuario fue registrado con xito en la base de datos
Formulario Actualizar Alumno(notasUpd.jsp)
Ac podemos observar que los datos actualizados del alumno juan Prez, han sido actualizados con xito en la base de datos
Unidad II: DESARROLLO DE APLICACIONES WEB II Docente: Ing. Hobby Saavedra Rosas Formulario Eliminar Alumno