Aplicación Ejemplo PPI – GRADO 11 Asesor: Juan Carlos Zuluaga Cardona jzuluaga55@gmail.com juanzuluaga@itm.edu.co
OBJETIVO Las siguientes diapositivas muestran como hacer desde cero una aplicación WEB que servirá de modelo para los proyectos PPI de grado 11. Se trata de una sencilla aplicación para facturar productos en una tienda, la cual maneja dos perfiles: administrador y empleado. Utilizaremos (todos estos programas son libres y se pueden descargar de la WEB, si requiere alguno de estos me lo puede solicitar y con gusto se lo compartiré): NetBeans (recomiendo 7.1.2) JDK (recomiendo 1.7) MySQL (recomiendo instalar el AppServer que viene con el phpMyAdmin que también es requerido) GlassFish 3
OBJETIVO Utilizaremos estos elementos/frameworks para construcción de la aplicación: HTML CSS JSP Servlets JavaScript Jquery AJAX
RESULTADO Al final tendremos una aplicación como esta:
Lo primero que debemos hacer es crear la base de datos en MySQL
CREACIĂ“N DE LA BASE DE DATOS
Se debe tener instalado el AppServ que viene con el motor de MySQL y el administrador del motor phpMyAdmin (se instala con el programa: appserv-win32-2.5.10) Nota: en la instalación del MySQL se coloca la clave de usuario root, esta debe ser recordada, más adelante la utilizaremos Para verificar ejecutamos en el browser: localhost y debe aparecer una ventana como esta:
Luego ingresemos por “phpMyAdmin Database Manager Version 2.10.3” Y deberás ver una pantalla como esta:
Creemos una nueva base de datos llamada Aplicacion Podemos crear las tablas manualmente o importar un script para crear nuestras tablas. Para este ejemplo importaremos el script “Aplicación.sql” y de esta manera ganar tiempo.
ď ą Deben quedar las siguientes tablas en la base de datos. Con todas ellas trabajaremos en el desarrollo de este ejemplo:
Ahora que tenemos la base de datos empezaremos a construir la aplicaci贸n por partes. El primer objetivo es construir el Login que valide contra la base de datos.
PRIMERA PARTE: LOGIN
ď ą Creamos un nuevo proyecto tipo Web Application
ď ą Lo llamamos AplicacionWEB
Seleccionamos GlassFish Server 3+ como servidor de aplicaciones. Nota: sino te aparece el GlassFish debes primero agregarlos con lo botón Add…
No seleccionamos ningún FrameWork y hacemos Click en Finish
Netbeans nos crea un proyecto con el Hello World!, por favor ejecute el proyecto para verificar que el servidor de aplicaciones esta operando de forma correcta. Te debe salir algo como esto:
Felicitaciones, ya has hecho tu primera aplicación WEB! ¿viste que no era difícil? Ahora empecemos dibujando nuestra ventana de Login, pare eso vamos a requerir un poco de conocimiento en HTML. Vamos a cambiar ese código JSP por el siguiente:
ď ą Y si corremos de nuevo la aplicaciĂłn, nos debe salir algo como esto:
Si hacen clic en el botón ingresar, va a sacar un error porque aun no hemos incluido el Servlet ValidarUsuario. Antes de empezar a implementar código vamos a mejorar la apariencia de nuestra página (recuerda que todo entra por los ojos). Vamos a aplicarle un estilo CSS a nuestra aplicación. Clic en nuevo archivo y seleccionas: Cascading Style Sheet
Lo llamas: style Y vas a copiar estas línea debajo del bloque root: body { font-family: Verdana, Arial, sans-serif; font-size: smaller; padding: 50px; color: #555; background-image: url(Gato.jpg); background-repeat: no-repeat; }
} th { text-align: left; border-bottom: 1px solid; } td { padding: 10px;
h1 {
} text-align: left; letter-spacing: 6px; font-size: 1.4em; color: #be7429; font-weight: normal; width: 450px;
a:link { color: #be7429; font-weight: normal; text-decoration: none; }
} table { width: 580px; padding: 10px; background-color: #c5e7e0;
a:link:hover { color: #be7429; font-weight: normal; text-decoration: underline; }
Te debe quedar algo similar a esto: Ahora has clic en cualquier parte del bloque body y luego clic en body – Style Builder
Luego en el tab de Background, en el campo Background image, seleccione el archivo Gato.jpg que se entrego con esta presentación:
Esto es para que el archivo Gato.jpg haga parte de nuestro proyecto. Ahora agreguemos esta línea a nuestro index.jsp:
Y probemos de nuevo como va quedando nuestra aplicación. Debe aparecerte algo como esto:
Mejora bastante la apariencia visual de la aplicación, desde este momento la podemos llamar la aplicación “Gato”. Nota: puedes armar tu propio CSS combinando tipos de letras y colores o puedes buscar en internet paquetes de CSS ya armados y probarlos en tu aplicación, anímate, es divertido darle un toque personal a tu aplicación. Pero vamos a mejorar aun mas nuestra apariencia pero usando un framework de java script llamado Jquery (para mayor información visita: http://jquery.com/) con esto vamos hacer muchas cosas, pero por el momento vamos hacer que nuestro botón ingresar sea más bonito.
Para esto debemos de agregar las librerías de Jquery a nuestro proyecto. Toma los archivos: jquery-1.7.2.min y jquery-ui-1.8.21.custom.min y la carpeta ui-lightness (incluidos con la presentación) los copias con Ctrl + C y luego los pegas en el folder Web Pages de la aplicación con Ctrl + V. Te debe quedar así:
Ahora vamos a modificar nuestro index.jsp por el siguiente código, agregando las línea del recuadro azul:
Ahora probemos! Notaran que el botón ingresar cambia de apariencia y tiene un efecto cuando pasamos el mouse por encima de este. Por el momento no es muy relevante pero con Jquery vamos a hacer mejores validaciones y mejorar la captura de las fechas entre otras cosas.
Botón mejorado
Ahora como las líneas que mejoraron la apariencia de nuestro JSP los vamos a usar en varios de los próximos JSP que vamos a construir ( y vamos a aumentar nuestro script), es recomendable sacarlos en un JSP aparte e incluirlos en el index.jsp
Es decir, creemos un nuevo JSP llamado encabezado, que tiene las siguientes líneas (las cortas de index.jsp y las pegas acá):
Y el index.jsp nos queda así:
Si pruebas no tiene ningún efecto, solo lo hacemos por orden y reutilizar código en los futuros JSP que crearemos. Pruébalo y te darás cuenta.
Ahora vamos a poner el botón de ingresar a funcionar. Primero creemos los JSP de los menús que vamos a mostrar. Recuerda que nuestra aplicación tiene dos perfiles, un perfil de Administrador y un perfil de Empleado. Entonces vamos a crear dos menús, uno para cada perfil. Empecemos con el perfil de empleado, agrega un nuevo JSP llamado MenuEmpleado con el siguiente código:
ď ą Luego agrega otro nuevo JSP llamado MenuAdministrador con el siguiente cĂłdigo:
Si observas, ambos JSP incluyen el JSP encabezado.jsp, de esta manera evitamos hacer copy paste de líneas de código que es una buena práctica de programación. Ahora vamos a agregar un nuevo paquete llamado clases, te debe quedar así el proyecto: Ahora dentro del paquete clases vamos a crear una nueva clase llamada Datos, la cual va a contener todos los métodos que interactúan con la base de datos Inicialmente vamos a implementar el constructor de la clase Datos y el método validarUsuario Con el siguiente código:
El constructor se conecta a la base de datos
Colocar usuario y contrase帽a de la usuario de la base de datos que se coloco en la instalaci贸n del MySQL
ď ą Ahora creemos el paquete servlets y dentro de este paquete creamos nuestro primer Servlet llamado ValidarUsuario. Te debe qedar algo como:
Vamos a cambiar el código de este servlet por el siguiente. Nota: este servlet devolvera Ok si el usuario es válido o Nok en caso contrario.
ď ą Ahora cambiemos el index.jsp para que utilice el servlet y verifique si el usuario merece entrar o no. Cambia index.jsp por las siguientes lĂneas:
Antes de probar debemos de agregar la librería de MySQL para que nuestra aplicación funcione.
Ahora si, probemos! Por el momento no estamos haciendo manejo de perfiles, ese será el siguiente objetivo en nuestro proyecto WEB. Puede probar con usuario: Zulu y clave: 123. Prueba con una clave incorrecta y luego con la clave correcta para que verifiques el correcto funcionamiento de la aplicación.
Ya que tenemos el Login funcionando, ahora vamos a implementar el manejo de los perfiles para que diferencie entre un usuario con perfil de Administrador y un usuario con perfil de Empleado
SEGUNDA PARTE: MANEJO DE PERFILES
Empecemos creando la clase Usuario que empaquetará todos los datos de la tabla usuario. Adiciona una clase usuario con este código:
Ahora adicionemos el método getUsuario en nuestra clase Datos:
Ahora modifiquemos el servlet de ValidarUsuario para que devuelva el perfil del usuario y que guarde el usuario que se logueo en la sesión (esto lo vamos a necesitar más adelante)
ď ą Ahora modifiquemos el index.jps por lo siguiente:
ď ą Puede probar con usuario administrador: Zulu y clave: 123 y con usuario empleado: Ledys y clave: 123. Veras como cambia el menĂş.
Ahora vamos a implementar el c贸digo para poder consultar, crear, modificar y eliminar usuarios
TERCERA PARTE: PRIMER CRUD USUARIOS
Primero vamos a crear el JSP de usuarios, pero vamos hacerlo dividido en los JSP: Botones, Usuario y UsuarioVacio. Lo hacemos así para reutilizar código, es decir, el JSP Botones lo vamos a llamar en los otros 2 CRUD y el UsuarioVacio lo vamos a llamar varias veces en el Servlet de usuarios. Empecemos pues adicionando un nuevo JSP llamado Botones con el siguiente código:
Adicionemos el JSP UsuarioVacio con este código:
Por último adicionemos el JSP Usuario con este código:
ď ą Ya puede probar el llamado al formulario de usuarios:
ď ą No puedes hacer clic en los botones porque te saca error
Ahora vamos a implementar la funcionalidad de todos los botones, lo primero que vamos hacer es adicionar a la clase Datos los siguientes métodos getUsuarios, newUsuario, deleteUsuario y updateUsuario. Con las siguientes líneas:
ď ą En el paquete servlets adicionemos el servlet AdministrarUsuarios con el siguiente cĂłdigo:
ď ą Probemos creando, consultado, modificando, borrando, limpiando y listando un usuario!
Luego de tener el CRUD de Usuarios, es muy f谩cil crear los otros (ademas tenemos c贸digo reutilizable que ya no tenemos que volver hacer), el proceso se vuelve repetitivo para el resto de los CRUD. Ahora vamos a implementar el c贸digo para poder consultar, crear, modificar y eliminar productos
CUARTA PARTE: SEGUNDO CRUD PRODUCTOS
Primero vamos a crear el JSP de productos, pero vamos hacerlo dividido en los JSP: Botones (que ya esta), Producto y ProductoVacio. Adicionemos el JSP ProductoVacio con este código:
Y ahora adicionemos el JSP Producto con el siguiente código:
ď ą Ya puede probar el llamado al formulario de Productos:
ď ą No puedes hacer clic en los botones porque te saca error.
ď ą Adicionemos en el paquete clases la nueva clase Producto que empaquete los campos de la tabla productos:
Ahora vamos a implementar la funcionalidad de todos los botones, lo primero que vamos hacer es adicionar a la clase Datos los siguientes métodos getProducto, getProductos, newProducto, updateProducto y deleteProducto. Con las siguientes líneas:
ď ą En el paquete servlets adicionemos el servlet AdministrarProductos con el siguiente cĂłdigo:
ď ą Probemos creando, consultado, modificando, borrando, limpiando y listando un producto!
Para finalizar el tema de CRUD, y de forma muy similar a los dos CRUD anteriores, ahora vamos a implementar el código para poder consultar, crear, modificar y eliminar clientes
QUINTA PARTE: ÚLTIMO CRUD CLIENTES
Primero vamos a crear el JSP de clientes, pero vamos hacerlo dividido en los JSP: Botones (que ya esta), Cliente y ClienteVacio. Adicionemos el JSP ClienteVacio con este código:
Y ahora adicionemos el JSP Cliente con el siguiente código:
Antes de probar el llamado al formulario de Clientes, vamos a colocarle un detalle chévere con Jquery, este formulario tiene un campo de fecha, para ello vamos a implementar un DatePicker, esto es muy fácil con Jquery. Solo agrega esta línea al encabezado.jsp: Ya puede probar el llamado al formulario de Clientes:
ď ą Ya puede probar el llamado al formulario de Clientes y al hacer clic en el campo fecha nacimiento tendrĂĄs una agradable sorpresa
DatePicker
ď ą No puedes hacer clic en los botones porque te saca error.
ď ą Adicionemos en el paquete clases la nueva clase Cliente que empaquete los campos de la tabla clientes:
Ahora vamos a implementar la funcionalidad de todos los botones, lo primero que vamos hacer es adicionar a la clase Datos los siguientes métodos getCliente, getClientes, newCliente, updateCliente y deleteCliente. Con las siguientes líneas:
ď ą En el paquete servlets adicionemos el servlet AdministrarProductos con el siguiente cĂłdigo:
ď ą Probemos creando, consultado, modificando, borrando, limpiando y listando un cliente!
Ya tenemos los CRUD de Usuarios, Clientes y Productos. Per no todo en un sistema son CRUD hay otras operaciones llamadas movimientos que por lo general incluyen varias tablas y no permiten operaciones como la modificación o eliminación. Esto lo veremos con este ejemplo de como crear una nueva factura.
SEXTA PARTE: UN MOVIMIENTO FACTURACIÓN
ď ą Primero adicionemos la clase DetalleFacturaTmp en el paquete clases. Adicione el siguiente cĂłdigo:
Como vamos a necesitar la fecha del sistema, implementemos una clase llamada Utilidades en el paquete clases que tenga el método que nos devuelva la fecha del sistema en el formato deseado
Ahora implementemos los métodos de getDetalleFacturaTmp, getDetallesFacturaTmp, newDetalleFacturaTmp, sumaCantidadDetalleFacturaTmp, sumaValorDetalleFacturaTmp, numeroFactura y grabarFactura de Productos en la clase Datos:
Para que nos funcione el DatePicker en el formulario NuevaFactura agreguemos la siguiente línea al encabezado.jsp:
Ahora en el paquete servlets agreguemos el servlet NuevaFactura con el siguiente código:
ď ą Ya puedes probar la generaciĂłn de nuevas facturas en el sistema!
Hasta el momento haz realizado un gran trabajo. Si ya tienes tu aplicaci贸n en este punto has dado un gran paso en la construcci贸n de una aplicaci贸n profesional. Ahora crearemos un reporte para ver las facturas generadas en el sistema
SEPTIMA PARTE: UN REPORTE
Lo primero que vamos hacer el implementar el método getReporteFacturas en la clase datos:
Ahora creemos en el paquete servlets el servlet ReporteFacturas con el siguiente código:
ď ą Ya puedes probar el reporte de facturas!
Para rematar con broche de oro implementaremos unas validaciones con Jquery que le van a dar un toque m谩s profesional a la aplicaci贸n
OCTAVA PARTE: VALIDACIONES CON JQUERY
ď ą Para colocar las validaciones de los campos con Jquery, modifiquemos el encabezado.jsp con las siguientes lĂneas:
ď ą Ya puedes hacer validaciones como consultar un cliente sin ingresar documento y veras lo que pasa!
ď ą Hemos terminado!
Juan Carlos Zuluaga Cardona jzuluaga55@gmail.com juanzuluaga@itm.edu.co
GRACIAS