Práctica: Tienda online

Transcripción

1 Práctica: Tienda online José Ruiz Jiménez 14/05/2011

2 Contenido 1. Descripción y Características Configurando la aplicación y su servidor El modelo empleado El mecanismo de persistencia Diagramas de navegación Ejemplos de operaciones en la Tienda Online

3 Este proyecto forma parte de una práctica asignada por la asignatura Laboratorio de programación para Internet de la Universidad San Pablo CEU. 1. Descripción y Características Se ha desarrollado una aplicación web que permite crear una tienda online con funciones de administración. Se trata de un proyecto Java EE y el ejemplo particular, una tienda de discos musicales. Dentro de las funciones básicas de administración se incluyen: altas de nuevos productos, modificación de productos ya existentes, eliminación de productos, búsqueda de productos y consulta sobre las ventas. Un cliente dispone entre otras de: búsquedas de productos, ver información detallada de un producto, gestionar su carro de compra insertando, actualizando y eliminando sus productos, que luego podrá comprar. Ahora vamos a repasar las funcionalidades extra que se ha implementado: Diseño mediante un patrón MVC, empleando Servlets y páginas JSP, persistencia siguiendo un patrón DAO, configurable para trabajar con ficheros, base de datos mediante JDBC o empleando el pool de conexiones del Servidor de aplicaciones. Se permite el registro opcional a los usuarios, que entre otras cosas les ahorrará saltarse un formulario a la hora de realizar el pago. Posibilidad de comentar los artículos de la web. Solo los usuarios registrados podrán hacerlo, mientras que los no registrados se limitarán a su lectura. Además estos comentarios solo podrán ser borrados por su creador y por el administrador. Sanitización de los formularios de entrada; tanto de los usuarios como del administrador, mediante expresiones regulares y empleo de la clase PreparedStatement, evitando inyecciones SQL cuando se trabaja con base de datos. Empleo de las librerías ESAPI y Antisamy (y sus dependencias: Batik-CSS, Commons-httpclient, Nekohtml y XercesImp) para evitar ataques XSS en el caso de los comentarios (que son mostrados a los clientes después de ser almacenados). Posibilidad de recordarle la contraseña a un usuario enviándola al que inscribió en su registro. Cuando se realiza una compra se da la opción de enviar por la factura. Si el usuario no está registrado se le solicitará una dirección de , mientras que si está registrado bastará con su confirmación. El carro de la compra se almacena en la sesión del usuario, pero a su vez se le envía en forma de cookie. Un filtro (CheckCartFilter) se encargará de cargar los datos de esa cookie si el usuario no tiene ningún carro cargado en la sesión. 3

4 Empleo de la librería log4j para realizar el loggin de las operaciones. Un fichero de configuración adjunto (log4j.properties) está configurado para mostrar los logs por consola y almacenarlos en ficheros (que se clasificarán por días) y directamente a la base de datos mediante un conector JDBC (la tabla llamada LOGS, su estructura se adjunta en el fichero SQL TABLES.txt) Empleo de un control de versiones (para acceso sin permisos de commit: svn checkout esceu-lpi-tiendaonline-read-only) Empleo de JavaScript para paginar los resultados de las búsquedas y comentarios, empleando la librería jquery y jpaginate.js El administrador podrá realizar listados de los usuarios registrados El catálogo de la aplicación se carga en el contexto cuando arranca para ganar velocidad en las consultas. Además éste gestiona de forma automática dos listas: una con los 10 últimos productos añadidos y otra con los 10 más vendidos. 4

5 2. Configurando la aplicación y su servidor En nuestro caso hemos empleado Glassfish Server 3.1. El proyecto de NetBeans adjunto ya está configurado para cargar como recursos del servidor los ficheros de configuración ESAPI.properties (que configura la política frente a ataques XSS) y log4j.properties (que configura el logging). Si se fuese a desplegar la aplicación en el servidor de aplicaciones sin emplear el proyecto NetBeans, tendrá que copiar esos ficheros en el dominio de la aplicación dentro del servidor, usualmente: ruta_de_instalacion\glassfish-3.1-b41\glassfish\domains\el_dominio Por otro lado, las configuraciones que permite la aplicación se realizan desde los ficheros alojados en /WEB-INF/configFiles/ Estos son: persistenceconfig.prop (para configurar la conexión empleada en la persistencia), adminconfig.prop (establece el usuario y contraseña de administración), config.prop (contiene los datos del servidor que se empleará para enviar los s) y antisamy-slashdot xml (que establece parámetros en la política de configuración frente ataques XSS). Por defecto en el descriptor de despliegue se ha configurado la persistencia empleando un Pool de conexiones configurado desde la consola de administración del servidor de aplicaciones: Nos vamos a la pestaña Recursos > JDBC > Conjunto de conexiones (o Connection Pool en ingés), y seleccionamos uno nuevo: Los parámetros configurados en el fichero persistenceconfig.prop son: 5

6 Por último daremos de alta este pool de conexiones como un recurso JDBC seleccionando la pestaña Recursos > JDBC > RecursosJDBC: Esta recurso JDBC nombrado mediante un JNDI es el que incluimos en el descriptor de despliegue, y en el de Glassfish: web.xml y glassfish-web.xml respectivamente. Destacar que tanto si se emplean directamente las conexiones con JDBC o este Pool de Conexiones, el servidor de aplicaciones tiene que poseer el driver correspondiente. Con esto tendremos lista la configuración para hacer funcionar la aplicación empleando como persistencia el pool de conexiones, ahora bien, tendremos que crear las tablas correspondientes en la base de datos. Para ello proponemos dos formas: Crear las tablas empleando las sentencias dadas por el fichero: SQL TABLES.txt De esta forma tendrá las tablas creadas pero estarán vacías, posteriormente tendría que ir añadiendo cosas como usuarios, productos directamente desde la aplicación web. RECOMENDADO: Cargar una imagen de la base de datos que yo he empleado para MySQL. De esta forma dispondría de las tablas y de un contenido inicial. Para ello emplearemos el fichero tiendaonline.dump ejecutando en la consola del sistema operativo: $mysql tiendaonline < tiendaonline.dump Ahora si tendremos completamente configurada nuestra aplicación. 6

7 3. El modelo empleado Comentamos que la aplicación seguía un patrón de diseño MVC. Ahora presentamos un diagrama UML correspondiente con el modelo de la aplicación: El catálogo (Catalog) ofrece todo tipo de operaciones sobre los productos (Record), sus existencias (Stock) y los comentarios (Comment). Además será el encargado de registrar los cambios de estos en el sistema de persistencia. Destacar que el mapa de comentarios no se cargará inicialmente en el catálogo, sino que se irán cargando de la persistencia conforme se necesitan; en caso de no estar ya cargados. Por otro lado, una venta (Sale) contiene el carro (Cart) que la originó, en él se registran los productos y sus cantidades. 7

8 4. El mecanismo de persistencia La persistencia se ha diseñado con un patrón DAO que permite implementar diferentes tipos de persistencia sin que la aplicación tenga constancia de ellos ya que todos implementarán la interfazdao correspondiente obtendrá una instancia mediante una factoría. Se han separado las persistencias de cada clase del modelo: Siendo el diagrama UML de cada uno: 8

9 9

10 5. Diagramas de navegación Todas las peticiones pasan por el FrontControllerServlet (que declara los cauces y permisos de navegación). La única página expuesta directamente será el index.jsp, el resto estarán bajo la ruta /WEB-INF/ y por tanto no serán accesibles directamente sino que serán redirigidas por un servlet; usualmente el FrontController. En los diagramas de navegación se presentan a continuación vamos a obviar este tipo de redirecciones, como por ejemplo para ir desde la dirección de inicio (index.jsp) hasta el formulario de creación de cuenta: Creación de una cuenta de usuario: Operación de actualización de la cuenta de un usuario: 10

11 Operación de borrado de la cuenta de un usuario: Operación de Login de un usuario en su cuenta: Operación de Logout de un usuario registrado: 11

12 Operación de mostrar información de un determinado disco: Operación de búsqueda de un disco: Operación de añadir/actualizar/borrar del carro de compra un disco: Ir a la lista de los 10 discos más vendidos: Ir a la lista de los últimos 10 discos añadidos: 12

13 Operación de insertar un nuevo comentario: Operación de borrar un comentario: Operación de envío por de los datos del usuario (en caso de olvido): Operación de envío por de una factura de compra: 13

14 Operación de pago (checkout) de los productos del carrito: Opción de Login como administrador: Opción de Logout como administrador: Opción de administrador de crear un nuevo producto: 14

15 Opción de administrador de actualizar un producto: Opción de administrador de borrar un producto: Opción de administrador de buscar una factura: Opción de administrador de buscar un usuario: 15

16 6. Ejemplos de operaciones en la Tienda Online A continuación se muestran visualmente las pantallas referentes a las distintas operaciones que se pueden realizar en la web. Empezando por la página de inicio: En el panel izquierdo se presentan accesos a las distintas categorías o tipos musicales. Arriba podemos ver el número de artículos que contiene nuestro carro de la compra. En la zona central se nos presenta una lista con cuatro últimos discos insertados. A la izquierda vemos un formulario que nos permite loguearnos en nuestra cuenta de usuario o bien realizar un registro o solicitar un recordatorio de nuestra contraseña por . Si empleásemos este panel para registrarnos como cliente2 obtendríamos: Si por el contrario elegimos crear una nueva cuenta, accederemos al formulario de registro: 16

17 Que insertando unos datos válidos creará la cuenta y nos trasladará a nuestra página de usuario: En esta pantalla se nos muestra la información de nuestra cuenta y se nos da la posibilidad de actualizar nuestra información: O incluso borrar la cuenta, que mostrará un cuadro de confirmación: 17

18 La página recordar tu contraseña por coincide con un formulario de login (equivalente al alojado en el panel derecho): Ahora vamos a centrarnos en el proceso de búsqueda, selección y gestión de discos, para ello empezamos realizando una búsqueda: En el formulario de arriba podemos rellenar los parámetros a incluir en la búsqueda, si los dejamos en blanco no se tendrán en cuenta. Bajo este formulario se muestran los resultados obtenidos, con el nombre del disco, el artista, el precio, una breve descripción y un icono para añadirlo al carro de compra. 18

19 Queremos obtener más información del disco llamado Thriller, para ello pulsamos sobre su nombre: En esta pantalla se muestra una información más detallada del mismo, así como la posibilidad de insertar un número determinado de este disco al carro. Sobre la descripción del disco se muestra una guía con la estructura: estilo > artista > nombre del disco, que nos sirve para realizar más búsquedas sobre estos elementos. Bajo la foto del disco se muestran los comentarios, pero no hay ninguno, vamos a mostrar la página del disco Bad : Esta si contiene comentarios, en concreto 6 comentarios repartidos en 2 páginas. 19

20 Como no estamos registrados no se nos da la opción de insertar ninguno, pero si accedemos como usuarios registrados: Se nos muestra un formulario para insertar los comentarios. Además notad que estamos logueados como cliente2 y por tanto en nuestros comentarios se nos da la opción de eliminarlos pulsando sobre la X roja. Pasemos a mostrar un carro de la compra donde hemos seleccionado 2 discos de Bad y 1 de Thriller, nos da la opción de actualizar sus cantidades, o de eliminarlos del carro si lo ponemos a 0. Arriba se muestra el número de artículos en total y el precio, así como una opción para PAGAR. Si no hay suficientes existencias para satisfacer la compra se nos devolverá un mensaje diciéndonos cuantas podemos adquirir como máximo. 20

21 Seleccionamos la opción de pagar, y como no estamos logueados en ese momento se nos da la opción de hacerlo o bien pagar sin tener una cuenta: Si estuviésemos logueados solo se nos mostraría un botón para confirmar la compra. Tras aceptar la compra llegamos a una pantalla que nos muestra de forma detallada la factura de compra y nos da la opción de enviarla por (si no estamos registrados se muestra un cuadro de texto para insertar una dirección de ): Un ejemplo de factura sería: 21

22 Para gestionar la página web tenemos que loguearnos accediendo como administrador (pulsando el botón rojo del menu superior): Esto nos permite buscar entre las facturas de ventas: 22

23 Buscar entre los usuarios registrados: O crear un nuevo disco: 23

24 Para poder realizar modificaciones o borrar un determinado disco tenemos que realizarlo o bien desde una búsqueda de discos o bien desde la página de uno determinado, pulsando sobre los iconos del lápiz y la X respectivamente: Y el formulario de actualización de un disco (pulsando el botón de edición): Y con esto quedan cubiertas todas las operaciones que permite la web. 24