Prctica: Tienda online

Jos Ruiz Jimnez 14/05/2011

Contenido
1. 2. 3. 4. 5. 6. Descripcin y Caractersticas ................................................................................................. 3 Configurando la aplicacin y su servidor .............................................................................. 5 El modelo empleado ............................................................................................................. 7 El mecanismo de persistencia ............................................................................................... 8 Diagramas de navegacin ................................................................................................... 10 Ejemplos de operaciones en la Tienda Online .................................................................... 16

Este proyecto forma parte de una prctica asignada por la asignatura Laboratorio de programacin para Internet de la Universidad San Pablo CEU .

1.

Descripcin y Caractersticas

Se ha desarrollado una aplicacin web que permite crear una tienda online con funciones de administracin. Se trata de un proyecto Java EE y el ejemplo particular, una tienda de discos musicales. Dentro de las funciones bsicas de administracin se incluyen: altas de nuevos productos, modificacin de productos ya existentes, eliminacin de productos, bsqueda de productos y consulta sobre las ventas. Un cliente dispone entre otras de: bsquedas de productos, ver informacin 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:

Diseo mediante un patrn MVC, empleando Servlets y pginas JSP, persistencia siguiendo un patrn 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 artculos de la web. Solo los usuarios registrados podrn hacerlo, mientras que los no registrados se limitarn a su lectura. Adems estos comentarios solo podrn ser borrados por su creador y por el administrador. Sanitizacin 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 libreras 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 despus de ser almacenados). Posibilidad de recordarle la contrasea a un usuario envindola al email que inscribi en su registro. Cuando se realiza una compra se da la opcin de enviar por email la factura. Si el usuario no est registrado se le solicitar una direccin de email, mientras que si est registrado bastar con su confirmacin. El carro de la compra se almacena en la sesin del usuario, pero a su vez se le enva en forma de cookie. Un filtro (CheckCartFilter) se encargar de cargar los datos de esa cookie si el usuario no tiene ningn carro cargado en la sesin.
3

Empleo de la librera log4j para realizar el loggin de las operaciones. Un fichero de configuracin adjunto (log4j.properties) est configurado para mostrar los logs por consola y almacenarlos en ficheros (que se clasificarn por das) 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 http://code.google.com/p/es-ceu-lpitiendaonline/ (para acceso sin permisos de commit: svn
checkout http://es-ceu-lpi-tiendaonline.googlecode.com/svn/trunk/ esceu-lpi-tiendaonline-read-only)

Empleo de JavaScript para paginar los resultados de las bsquedas y comentarios, empleando la librera jQuery y jPaginate.js El administrador podr realizar listados de los usuarios registrados El catlogo de la aplicacin se carga en el contexto cuando arranca para ganar velocidad en las consultas. Adems ste gestiona de forma automtica dos listas: una con los 10 ltimos productos aadidos y otra con los 10 ms vendidos.

2.

Configurando la aplicacin 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 configuracin ESAPI.properties (que configura la poltica frente a ataques XSS) y log4j.properties (que configura el logging). Si se fuese a desplegar la aplicacin en el servidor de aplicaciones sin emplear el proyecto NetBeans, tendr que copiar esos ficheros en el dominio de la aplicacin dentro del servidor, usualmente:
ruta_de_instalacion\glassfish-3.1-b41\glassfish\domains\el_dominio

Por otro lado, las configuraciones que permite la aplicacin se realizan desde los ficheros alojados en /WEB-INF/configFiles/ Estos son: persistenceConfig.prop (para configurar la conexin empleada en la persistencia), adminConfig.prop (establece el usuario y contrasea de administracin), emailConfig.prop (contiene los datos del servidor que se emplear para enviar los emails) y antisamy-slashdot-1.4.3.xml (que establece parmetros en la poltica de configuracin 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 administracin del servidor de aplicaciones: Nos vamos a la pestaa Recursos > JDBC > Conjunto de conexiones (o Connection Pool en ings), y seleccionamos uno nuevo:

Los parmetros configurados en el fichero persistenceConfig.prop son:

Por ltimo daremos de alta este pool de conexiones como un recurso JDBC seleccionando la pestaa 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 configuracin para hacer funcionar la aplicacin 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 estarn vacas, posteriormente tendra que ir aadiendo cosas como usuarios, productos directamente desde la aplicacin web. RECOMENDADO: Cargar una imagen de la base de datos que yo he empleado para MySQL. De esta forma dispondra 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 aplicacin.

3.

El modelo empleado

Comentamos que la aplicacin segua un patrn de diseo MVC. Ahora presentamos un diagrama UML correspondiente con el modelo de la aplicacin:

El catlogo (Catalog) ofrece todo tipo de operaciones sobre los productos (Record), sus existencias (Stock) y los comentarios (Comment). Adems 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 catlogo, sino que se irn 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.

4.

El mecanismo de persistencia

La persistencia se ha diseado con un patrn DAO que permite implementar diferentes tipos de persistencia sin que la aplicacin tenga constancia de ellos ya que todos implementarn la interfazDAO correspondiente obtendr una instancia mediante una factora. Se han separado las persistencias de cada clase del modelo:

Siendo el diagrama UML de cada uno:

5.

Diagramas de navegacin

Todas las peticiones pasan por el FrontControllerServlet (que declara los cauces y permisos de navegacin). La nica pgina expuesta directamente ser el index.jsp, el resto estarn bajo la ruta /WEB-INF/ y por tanto no sern accesibles directamente sino que sern redirigidas por un servlet; usualmente el FrontController. En los diagramas de navegacin se presentan a continuacin vamos a obviar este tipo de redirecciones, como por ejemplo para ir desde la direccin de inicio (index.jsp) hasta el formulario de creacin de cuenta:

Creacin de una cuenta de usuario:

Operacin de actualizacin de la cuenta de un usuario:

10

Operacin de borrado de la cuenta de un usuario:

Operacin de Login de un usuario en su cuenta:

Operacin de Logout de un usuario registrado:

11

Operacin de mostrar informacin de un determinado disco:

Operacin de bsqueda de un disco:

Operacin de aadir/actualizar/borrar del carro de compra un disco:

Ir a la lista de los 10 discos ms vendidos:

Ir a la lista de los ltimos 10 discos aadidos:

12

Operacin de insertar un nuevo comentario:

Operacin de borrar un comentario:

Operacin de envo por email de los datos del usuario (en caso de olvido):

Operacin de envo por email de una factura de compra:

13

Operacin de pago (checkout) de los productos del carrito:

Opcin de Login como administrador:

Opcin de Logout como administrador:

Opcin de administrador de crear un nuevo producto:

14

Opcin de administrador de actualizar un producto:

Opcin de administrador de borrar un producto:

Opcin de administrador de buscar una factura:

Opcin de administrador de buscar un usuario:

15

6.

Ejemplos de operaciones en la Tienda Online

A continuacin se muestran visualmente las pantallas referentes a las distintas operaciones que se pueden realizar en la web. Empezando por la pgina de inicio:

En el panel izquierdo se presentan accesos a las distintas categoras o tipos musicales. Arriba podemos ver el nmero de artculos 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 contrasea por email. Si emplesemos este panel para registrarnos como cliente2 obtendramos:

Si por el contrario elegimos crear una nueva cuenta, accederemos al formulario de registro:

16

Que insertando unos datos vlidos crear la cuenta y nos trasladar a nuestra pgina de usuario:

En esta pantalla se nos muestra la informacin de nuestra cuenta y se nos da la posibilidad de actualizar nuestra informacin:

O incluso borrar la cuenta, que mostrar un cuadro de confirmacin:

17

La pgina recordar tu contrasea por email coincide con un formulario de login (equivalente al alojado en el panel derecho):

Ahora vamos a centrarnos en el proceso de bsqueda, seleccin y gestin de discos, para ello empezamos realizando una bsqueda:

En el formulario de arriba podemos rellenar los parmetros a incluir en la bsqueda, si los dejamos en blanco no se tendrn en cuenta. Bajo este formulario se muestran los resultados obtenidos, con el nombre del disco, el artista, el precio, una breve descripcin y un icono para aadirlo al carro de compra.

18

Queremos obtener ms informacin del disco llamado Thriller, para ello pulsamos sobre su nombre:

En esta pantalla se muestra una informacin ms detallada del mismo, as como la posibilidad de insertar un nmero determinado de este disco al carro. Sobre la descripcin del disco se muestra una gua con la estructura: estilo > artista > nombre del disco, que nos sirve para realizar ms bsquedas sobre estos elementos. Bajo la foto del disco se muestran los comentarios, pero no hay ninguno, vamos a mostrar la pgina del disco Bad:

Esta si contiene comentarios, en concreto 6 comentarios repartidos en 2 pginas.

19

Como no estamos registrados no se nos da la opcin de insertar ninguno, pero si accedemos como usuarios registrados:

Se nos muestra un formulario para insertar los comentarios. Adems notad que estamos logueados como cliente2 y por tanto en nuestros comentarios se nos da la opcin 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 opcin de actualizar sus cantidades, o de eliminarlos del carro si lo ponemos a 0. Arriba se muestra el nmero de artculos en total y el precio, as como una opcin para PAGAR. Si no hay suficientes existencias para satisfacer la compra se nos devolver un mensaje dicindonos cuantas podemos adquirir como mximo.

20

Seleccionamos la opcin de pagar, y como no estamos logueados en ese momento se nos da la opcin de hacerlo o bien pagar sin tener una cuenta:

Si estuvisemos logueados solo se nos mostrara un botn 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 opcin de enviarla por email (si no estamos registrados se muestra un cuadro de texto para insertar una direccin de email):

Un ejemplo de factura sera:

21

Para gestionar la pgina web tenemos que loguearnos accediendo como administrador (pulsando el botn rojo del menu superior):

Esto nos permite buscar entre las facturas de ventas:

22

Buscar entre los usuarios registrados:

O crear un nuevo disco:

23

Para poder realizar modificaciones o borrar un determinado disco tenemos que realizarlo o bien desde una bsqueda de discos o bien desde la pgina de uno determinado, pulsando sobre los iconos del lpiz y la X respectivamente:

Y el formulario de actualizacin de un disco (pulsando el botn de edicin):

Y con esto quedan cubiertas todas las operaciones que permite la web.
24