Online Shop

Ejemplo de Programación con Java EE

Una Tienda Online

Juan Díez-‐Yanguas Barber
Programación con Java EE 6
© Jdyb -‐ Mayo 2011

Juan Díez-‐Yanguas Barber Programación con Java EE Tienda Online
_____________________________________________________________________________
Índice
1.-‐ PREÁMBULO 3
2.-‐ INTRODUCCIÓN 4
3.-‐ DISEÑO DEL SISTEMA 10

3.1.-‐ HERRAMIENTAS UTILIZADAS 10
3.2.-‐ PATRÓN DE DISEÑO MVC 11
3.3.-‐ DISEÑO DE LA PERSISTENCIA. PATRÓN DAO 12
3.4.-‐ DISEÑO DE FILTROS 14
3.5.-‐ ACCESO A LOS MECANISMOS DE PERSISTENCIA 14
2.6.-‐ SEGURIDAD DE LA APLICACIÓN 14
4.-‐ MODELOS DE DATOS USADOS 16
4.1.-‐ MODELO DE DATOS DE PRODUCTO 16

4.2.-‐ MODELO DE DATOS PARA EL USUARIO 17
4.3.-‐ MODELO DE DATOS PARA EL LA CESTA DE LA COMPRA 18
4.4.-‐ MODELO DE DATOS PARA LOS COMENTARIOS 19
5.-‐ CONFIGURACIÓN DE LA APLICACIÓN 20

5.1.-‐ CONFIGURACIÓN DE PERSISTENCIA EN MODO FICHERO 20
5.2.-‐ CONFIGURACIÓN DE PERSISTENCIA EN MODO DE BASES DE DATOS 22
5.3.-‐ CONFIGURACIONES MISCELÁNEAS SOBRE LA APLICACIÓN 25
5.4.-‐ CONFIGURACIÓN DEL SERVIDOR SMTP PARA EL ENVÍO DE EMAILS 26
5.5.-‐ CONFIGURACIÓN DE LAS PLANTILLAS PARA EL ENVÍO DE EMAILS 28
5.6.-‐ LIBRERÍAS NECESARIAS 29
6.-‐ FUNCIONAMIENTO EN DETALLE DEL SISTEMA 31

6.1.-‐ ESTRUCTURA DE LA APLICACIÓN 31
6.2.-‐ DIAGRAMAS DE NAVEGACIÓN DE FILTROS 36
6.3.-‐ DIAGRAMAS DE NAVEGACIÓN DE LISTENERS 38
6.4.-‐ FLUJO DE NAVEGACIÓN DE LAS OPERACIONES PÚBLICAS 39
6.5.-‐ FLUJO DE NAVEGACIÓN PARA OPERACIONES DE USUARIO REGISTRADO 46
6.6.-‐ FLUJO DE NAVEGACIÓN DE LAS OPERACIONES DEL ADMINISTRADOR 49
6.7.-‐ SOBRE EL JAVASCRIPT QUE SE HA USADO 55
7.-‐ SISTEMA DE CONTROL DE VERSIONES 58
8.-‐ ASPECTOS A MEJORAR 61

© Jdyb -‐ Mayo 2011 2

_____________________________________________________________________________
1.-‐ Preámbulo
He sido siempre un apasionado de la informática, y desde que comencé mis

estudios de Ingeniería Informática esta afición por la materia ha ido creciendo
progresivamente.
Actualmente he finalizado mis estudios de Ingeniería Técnica en Informática de

Sistemas, los que continuaré el próximo año para proseguir con la Ingeniería Superior.
El proyecto que aquí les presento viene a ser una asignatura completa,
asignatura dedicada a la programación de aplicaciones web, y esta en concreto fue
impartida en Java.
Cogí desde el principio con mucho ánimo esta asignatura y poco a poco me fue
gustando más. Le fui dedicando muchas horas a este proyecto hasta llegar a conseguir
un ejemplo lo más realista posible de lo que pudiera ser una tienda online.
He disfrutado muchísimo realizando este proyecto no solo porque se trataba de
algo nuevo sino porque he adquirido muchos e interesantes conocimientos sobre el
lenguaje, si bien es cierto que me queda mucho por aprender de este lenguaje he de
reconocer que esto me ha ayudado a dar un paso importante en este continuo
aprendizaje.
Una vez completado el curso pensé que ya que había dedicado mucho tiempo a
este proyecto podría también llegar a más personas y ser de ayuda, por lo que he
seguido trabajando en el mismo para publicarlo con una documentación completa.
No puedo terminar este texto sin agradecer a Abraham Otero Quintana el

interés que ha despertado en mí con este proyecto y los ánimos que me ha dado para
continuar con ello hasta obtener un proyecto perfeccionado para su publicación.
También le tengo que agradecer la ayuda que me ha prestado de manera totalmente
desinteresada para la publicación del mismo.
Sin más me despido y espero que os sea de ayuda este documento así como el
proyecto en si.
Pueden ponerse en contacto conmigo en esta dirección de correo electrónico

sin problema alguno: jdyb04jdyb@gmail.com

© Jdyb -‐ Mayo 2011 3

_____________________________________________________________________________
2.-‐ Introducción
En este proyecto se ha tratado de llevar a cabo el diseño de una aplicación web
que cumpla con las funcionabilidades de una tienda online completa.
La aplicación debe tener una interfaz de administración la cual nos permita una
administración completa de los productos (añadir, modificar, borrar y consultar),
también es posible la búsqueda de productos.
© Jdyb -‐ Mayo 2011 4

_____________________________________________________________________________

Para acceder a la zona de administración es necesario estar autentificado, la
autentificación se realiza mediante un correo electrónico y una contraseña.

También es posible que los usuarios se registren en la aplicación con la ventaja
de que no tendrán que introducir los datos completos para realizar la compra.
También podrán consultar su historial de compras y por supuesto modificar sus datos.
© Jdyb -‐ Mayo 2011 5

_____________________________________________________________________________

La parte principal de la aplicación es el listado de productos donde el usuarios
puede añadirlos a la cesta de la compra. El usuario podrá consultar el estado de su
carrito en todo momento y podrá editar la cantidad de cada producto según desee.
© Jdyb -‐ Mayo 2011 6

_____________________________________________________________________________

Cuando el usuario quiera dar por terminada su compra tendrá que rellenar el
formulario con los datos de la compra en el caso de no estar registrado. En caso
contrario lo único que tendrá que hacer es seleccionar la forma de pago.

Posteriormente un correo electrónico será enviado al usuario con los detalles
de la compra.
La aplicación tiene otras funcionabilidades extra a parte de las básicas de una
tienda online.
Es posible añadir comentarios a los productos siendo un usuario registrado.
© Jdyb -‐ Mayo 2011 7

_____________________________________________________________________________

Es posible también asignar imágenes a los productos, el sistema está capacitado
para enviar emails a los usuarios cuando se registran, cuando realizan una compra, y
también tienen la opción de recuperar la contraseña en caso de pérdida; el sistema
genera una nueva contraseña y es enviada por correo electrónico al usuario.
© Jdyb -‐ Mayo 2011 8

_____________________________________________________________________________
Cuenta con la opción de usar persistencia contra bases de datos así como
persistencia contra ficheros en formato binario de objetos serializados.
Como ayuda a los administradores cuenta con un registro de peticiones

realizadas al servidor que son guardados en una base de datos o en fichero (según sea
el método de persistencia); este registro ayudará a realizar un seguimiento detallado
para los administradores.
Es posible la visualización de estadísticas de ventas, esta opción estará

disponible para aquellos usuarios que sean administradores de la tienda.
© Jdyb -‐ Mayo 2011 9

_____________________________________________________________________________
3.-‐ Diseño del sistema
3.1.-‐ Herramientas utilizadas
Como lenguaje de programación para la aplicación en el servidor se ha usado
Java EE 6, el servidor de aplicaciones usado es GlassFish Server 3.1
Como entorno de desarrollo se ha usado NetBeans 7.0.
Para la presentación de cara al usuario se han empleado páginas JSP para la

generación del código HTML que finalmente será mostrado al usuario mediante el
navegador web que será el que renderice dicho código.
Gracias a este diseño se podría decir que el trabajo que hemos tenido que
dedicar a la aplicación del cliente es insignificante debido a que no hemos tenido que
encargarnos nosotros del desarrollo del navegador, únicamente de generar el código
que este renderizará.
Esta es la principal ventaja de usar este modelo de diseño unido a que se están
usando tecnologías estandarizadas.

© Jdyb -‐ Mayo 2011 10

_____________________________________________________________________________
3.2.-‐ Patrón de diseño MVC
Para el desarrollo del sistema se ha usado un patrón de diseño en el cual hay
claramente diferenciadas tres partes. Por una parte nos podemos encontrar con los
modelos de datos que en nuestro caso serían los objetos java que necesitamos para
representar la información de nuestra aplicación, la cual estaría almacenada en una
base de datos, en ficheros o en cualquier otro modo de persistencia.
Por otra parte tenemos las vistas que serían las páginas que se encargan de la
presentación al usuario. Estas páginas estarían formadas por las páginas estáticas
HTML y las páginas dinámicas JSP.
Por último tendríamos la parte del controlador que sería la encargada de

realizar las acciones necesarias para nuestro modelo de negocio. Esta parte realizará
unas acciones y de manera general posteriormente decidirá la vista que se desea
presentar al usuario, como ya se ha dicho esta parte se encarga de las operaciones
necesarias por el modelo de negocio y por lo tanto será esta parte la que reciba las
acciones por parte del usuario.
Base de datos
VB
Actualizar Objetos Java

modelo
Acciones del
usuario
Controlador
Usuario
Consultas al
if(conn
SELEC modelo
WHERE
print
Java
Servlet Java Seleccionar
EE vista
Modelos de vista
HTML JSP

© Jdyb -‐ Mayo 2011 11

_____________________________________________________________________________
3.3.-‐ Diseño de la persistencia. Patrón DAO
A continuación usaremos el patrón de diseño que se ha usado para el

mecanismo de persistencia de la aplicación.
Este patrón trata de independizar el tipo de persistencia del resto de la

aplicación, de esta manera la aplicación no tiene dependencia del tipo de persistencia
que se este llevando a cabo.
Por poner un ejemplo, podemos estar desarrollando la aplicación con

persistencia contra ficheros y posteriormente decidir que lo queremos hacer contra
base de datos y no habría que cambiar nada de la lógica de negocio de la aplicación,
únicamente habría que implementar los métodos necesarios para persistir contra la
base de datos.
Explicamos a continuación en que consiste este patrón de diseño.
En primer lugar tendríamos una interfaz que indicaría los métodos que son
necesarios en la persistencia (los métodos a los que se llamarán después para acceder
a la persistencia).
Por cada método de persistencia tendríamos una clase que implementa todos y
cada uno de los métodos de la interfaz. Para asegurarnos de que no se crea más de
una de estas clases durante el desarrollo de la aplicación deberíamos hacer que estas
clases sigan un patrón de diseño singleton (explicado posteriormente).
Por último tendríamos una factoría que dependiendo de los argumentos, en

nuestro caso parámetros del descriptor de despliegue, nos devolvería una instancia de
la clase encargada de la persistencia (dependiendo de los argumentos para el tipo de
persistencia).
Para acceder a la persistencia no tendríamos mas que acceder mediante la

interfaz a los métodos y de esta manera el modelo de negocio de la aplicación es
totalmente independiente del tipo de persistencia.
El patrón de diseño singleton consiste en crear un constructor para la clase que
solo permita que haya una única instancia de la clase en la aplicación. Esto se haría
haciendo un constructor que compruebe si hay o no una instancia de la clase en la
aplicación, si la hay devolvería es misma instancia, en caso contrario se crearía una
nueva instancia.
La forma de controlar las instancias existentes es hacer que la propia clase

contenga en sus atributos una instancia de ella misma.
Mostramos a continuación un diagrama de clases en el que se muestran las

dependencias de cada una de estas clases.
© Jdyb -‐ Mayo 2011 12

_____________________________________________________________________________
Modelo de persistencia. Patrón DAO
StartListener persistencia.PersistenceFactory
private persistence: PersistenceInterface public static PersistenceInterface

getInstance (String type)
public void contextInitialized(ServletContextEvent sce)
public void contextDestroyed(ServletContextEvent sce)
private boolean startValidate(ServletContext context)
beans.Producto persistencia.PersistenceInterface
public boolean init (String locationUser, String persistencia.PersistenceFile persistencia.PersistenceBD

beans.Usuario locationProduct);
persistence: PersistenceFile instance: PersistenceBD
public boolean exit ()
beans.Comentario fileNameUser: String
pool: DataSource
public boolean addUser (Usuario user) fileNameProduct: String
beans.Carrito productos: Map<String, Producto> nameBD: String
public boolean addProduct (Producto prod)
usuarios: Map<String, Usuario
logger: Logger
public boolean delUser(String mail) lockProductos: Object
lockUsuarios: Object private ArrayList <String>

public boolean delProduct(String codigo) requestIncompleteCarts (String mail)
public Usuario getUser (String mail)
public Producto getProduct (String codigo)
public boolean updateUser (String mail, Usuario

user)
public boolean updateProduct (String codigo,
Producto prod)
public int anyAdmin ()
public Map <String, Producto> getProducts()
public Map <String, Usuario> getUsers ()
public Map<String, Producto> searchProd(String

campo, String term)
public boolean saveRequest (String fechaHora,

String requestedURL, String remoteAddr, String
remoteHost, String method, String param, String
userAgent)
public boolean saveCart (Carrito cart, boolean

completado, String date, String formPago)
public Carrito requestLastIncompleteCart (String
mail)
public boolean saveCart (Carrito cart, boolean
completado, String date, String formPago)
public boolean deleteImcompleteCartsClient
(String mailClient)
public ArrayList <Carrito> requestSalesRecord
(String campo, String term)
public ArrayList <Producto>
getDetailsCartRecord (String codigo)
public boolean newComment (Usuario user,
String codigoProducto, String codigoComentario,
String fechaHora, String comentario)
public Comentario getComment (String
codComentario)
public boolean deleteComment (String
codigoComentario)
public boolean updateComment (String
codComentario, Comentario comentario)
public LinkedList <Comentario> getComentarios
(String campo, String valor)

© Jdyb -‐ Mayo 2011 13

_____________________________________________________________________________
3.4.-‐ Diseño de filtros
En este apartado veremos algunos aspectos del diseño de la aplicación que

considero de interés aparte de los ya explicados en los apartados anteriores.
Hay un filtro que recoge todas las peticiones y se encarga de registrar cada una
de las peticiones, en este filtro de setean tanto la respuesta como la petición con la
codificación que usa toda la aplicación; de esta manera nos aseguramos de que toda la
aplicación este funcionando en la misma codificación para evitar problemas. Ahora
bien, esto no nos asegura de que el resto de cosas externas sigan en la misma
codificación (UTF-‐8), como pueden ser las bases de datos u otros recursos externos
que se usen en la aplicación.
La autentificación de la aplicación está basada en el uso de filtros. Hay un filtro

que nos permite acceder a la zona de usuarios registrados de la aplicación
(dependiendo de los atributos de la sesión) y un filtro posterior que verifica que
podamos acceder a la zona de administración, zona a la que solo deben acceder los
usuarios con suficientes permisos.
3.5.-‐ Acceso a los mecanismos de persistencia
Respecto al modelo de persistencia que se ha comentado se podría añadir que
para acceder a las funciones de la persistencia lo que se realiza es obtener siempre la
interfaz que se guardó en el contexto de la aplicación al inicio de la misma con un
listener de inicio de contexto.
2.6.-‐ Seguridad de la aplicación
La aplicación ha sido diseñada prestando mucha atención a los aspectos de

seguridad de la misma, no se ha tenido absolutamente ninguna idea preconcebida a la
hora del diseño de la misma, se ha partido del pensamiento de que todo ha de ser
validado.
En primer lugar se ha optado por la opción de eliminar las contraseñas de las
bases de datos, la aplicación no contiene ninguna contraseña, en ningún momento son
guardadas. Lo que se almacena es una huella de la contraseña mas una pequeña
cadena fija para que sea resistente también a los ataques por diccionario a la base de
datos en busca de huellas conocidas. Cuando el usuario introduce una contraseña se
seguiría se obtendría la huella de la misma y lo que se compara serían las dos huellas.
Sin asegurarlo totalmente podría afirmar que la única forma de que un usuario se
hiciera con la contraseña de otro sería teniendo un sniffer en la red de la víctima
© Jdyb -‐ Mayo 2011 14

_____________________________________________________________________________
(puesto que la aplicación no funciona sobre https), otra opción sería intentar robar la
sesión de alguna manera, pero así no se conseguiría la contraseña del usuario, sino
acceso a su sesión por un periodo limitado de tiempo.
Otro aspecto importante en la seguridad son todas las entradas de datos que
ser reciben del usuario tanto de formularios como de cualquier tipo de petición que
tenga que atender el servidor, no se debe dar por supuesto nada.
En todos los formularios que recibe la aplicación lo primero que se hace con
ellos es verificar que contengan los parámetros que deseamos (dependiendo del
formulario concreto), y posteriormente todos los parámetros recibidos son validados
con la librería ESAPI mediante expresiones regulares, evitando de esta manera
intentos de Cross Site Scripting o de inyección SQL. También son validados todos
aquellos campos que deben permitir cualquier texto (como puede ser el caso de los
comentarios) en busca de cualquier etiqueta HTML sospechosa y también se
contemplan los ataques usando codificaciones diferentes.
Posteriormente una vez validados cada uno de los parámetros se analiza cada
uno de ellos para verificar que tengan sentido, no se permiten números negativos, no
se permite eliminar al último administrador, no se permite subir un archivo que no sea
una imagen y como tamaño máximo 8mb.
A la hora de construir el sistema se ha construido con una idea final en mente
que es procurar en la medida de lo posible o en todos los casos si es posible que la
aplicación fallase por el uso incorrecto de los usuarios o el intento de introducción de
datos erróneos en formularios o intento de “jugar” con las URLs de la aplicación. Con
esto quiero decir que para cada acción que realiza la aplicación primero se comprueba
si es posible realizarla. Por ejemplo, no se puede borrar un administrador si es el único
que hay, no se pueden comprar mas unidades de las que tiene un producto, no se
puede borrar o editar un producto o usuario que no existe.

© Jdyb -‐ Mayo 2011 15

_____________________________________________________________________________
4.-‐ Modelos de datos usados
En este apartado se explicarán los modelos de datos que han sido usados para
representar todos los datos con los que trabaja la aplicación.
4.1.-‐ Modelo de datos de Producto
Con esta clase se pretender representar un producto de la tienda con todos los
atributos que contiene, estos atributos serán los requeridos por el enunciado.
• Código (Creado de manera automática usando UUIDs)
• Nombre
• Precio
• Stock
• Descripción corta
• Detalles
Se presenta a continuación un diagrama UML representando la clase.
Producto
Producto
codigo: String public String getDesc()
nombre: String public String getDetalles()
precio: double public String getNombre()
stock: int public double getPrecio()
desc: String public int getStock()
detalles:String public String getCodigo()
public Producto () public String

getDisponibilidad ()
public Producto(String
codigo, String nombre,
double precio, int stock)
public Producto(String
codigo, String nombre,
double precio, int stock,
String desc, String detalles)

© Jdyb -‐ Mayo 2011 16

_____________________________________________________________________________
Como se puede observar en el diagrama UML no hay ningún método en esta

clase que permita modificar el producto por lo que se puede decir que las instancias de
esta clase serán inmutables, una vez creados los objetos no será posible modificar los
mismos. Se ha hecho de esta manera para evitar problemas de concurrencia.
Si los objetos no son inmutables sería posible por ejemplo que un usuario que
esta comprando cambiara las unidades de un producto mientras que el administrador
cambie las unidades del mismo producto.
4.2.-‐ Modelo de datos para el usuario
Con esta clase se pretende representar un usuario dentro de la tienda online.
Cada objeto de la clase tendrá los siguientes siguientes atributos.
• Nombre
• Dirección
• Email (identificador único)
• Contraseña (MD5 de la contraseña)
• Permisos (‘a’ Administrador, ‘c’ Cliente normal)
A continuación de puede observar un diagrama UML representando la clase.
Usuario
Usuario
nombre: String public String getDir()
dir: String public String getMail()
mail: String public String getNombre()
pass: String public String getPass()
permisos: char public char getPermisos()
public Usuario () public String

getPrintablePermissions ()
public Usuario(String
nombre, String dir, String
mail, String pass, char
permisos)

© Jdyb -‐ Mayo 2011 17

_____________________________________________________________________________
4.3.-‐ Modelo de datos para el la cesta de la compra
Con esta clase se pretende representar la cesta de la compra de un usuario. El
carrito de la compra tiene los siguientes atributos.
• Código del carrito
• Email del usuario
• Mapa de productos que contiene los productos añadidos al carro
• Precio del carro completo
• Fecha de la compra
• Hora de la compra
• Forma de pago de la compra
Carrito
Carrito
codigo: String public Carrito ()
user: String public Carrito(String codigo,

String user)
articulos: Map <String,
Integer> public Carrito(String codigo,
String user, double precio)
precio: double
public Carrito(String codigo,
fecha: String String user, double precio,
String fecha, String hora,
hora: String String formaPago)
public boolean editCant
formPago: String (String prod, int cantidad,
public Map <String, Integer> double prodPrice)
getArticulos () public void delProduct
(String prod)
public int getLenght ()
public String getUser()
public double getPrecio () public void setArticulos
(Map<String, Integer>
public String getCodigo()
articulos)
public void setPrecio
public String getHora()
(double price
public String getFecha() public void setUser(String
user)
public String getFormaPago
()
public void removeProd
public void addProduct (String prod, double
(String newProd, int prodPrice)
cantidad, double prodPrice)
© Jdyb -‐ Mayo 2011 18

_____________________________________________________________________________
4.4.-‐ Modelo de datos para los comentarios
Con esta clase se pretende representar un comentario añadido por un usuario a
un producto del catálogo de la tienda. Un comentario se representa con los siguientes
atributos.
• Código del comentario
• Fecha
• Hora
• Código del producto
• Email del usuario
• Nombre del usuario
• Texto del comentario
Comentario
Comentario
codigoComentario: String public String getEmail()
fecha: String public String

getCodigoComentario()
hora: String public String
getCodigoProducto()
codigoProducto: String public String getComentario
()
Email: String
public String getFecha()
nombre: String
public String getHora()
comentario: String
public String getNombre()
public Comentario(String public String getFechaHora
codigoComentario, String ()
fecha, String hora, String
codigoProducto, String
Email, String nombre, String
comentario)

© Jdyb -‐ Mayo 2011 19

_____________________________________________________________________________
5.-‐ Configuración de la aplicación
En este capítulo se van a describir diferentes aspectos de configuración de la

aplicación necesarios para poder desplegar la aplicación correctamente.
5.1.-‐ Configuración de persistencia en modo fichero
Es posible que la aplicación funcione con persistencia contra ficheros. Para que
funcione correctamente es necesario configurar una serie de parámetros en el
descriptor de despliegue de la aplicación.
Lo primero que tenemos que hacer es indicar que la persistencia de la

aplicación va a funcionar contra ficheros. Para ello tenemos que configurar el
parámetro de contexto persistenceMethod. El valor que debe tener este
parámetro para que funcione con ficheros es file.

Posteriormente lo que tendremos que hacer es configurar la ruta de los
ficheros, si únicamente pone el nombre del fichero se guardaran en el directorio del
dominio del servidor de aplicaciones. Los archivos van a ser cargados usando
directorios del sistema, no se van a emplear métodos de contexto o del classpath para
cargarlos.
La ruta del fichero que contiene los datos de productos y usuarios viene dado
por el parámetro de contexto archivoDatos. Es un fichero de tipo binario.

La ruta del fichero que contiene el historial de carritos viene dada por el
parámetro de contexto archivoHistoriales. Es un fichero de tipo binario

La ruta del fichero que contiene carritos sin comprar que son guardados para
ser recuperados al inicio de la sesión de los usuarios viene dada por el parámetro de
contexto archivoRecuperacion. Es un fichero de tipo binario.
© Jdyb -‐ Mayo 2011 20

_____________________________________________________________________________

La ruta del fichero de registro de acciones viene dada por el parámetro de
contexto archivoLog. Es un fichero de texto plano.

© Jdyb -‐ Mayo 2011 21

_____________________________________________________________________________
5.2.-‐ Configuración de persistencia en modo de bases de datos
La aplicación también está preparada para que la persistencia funcione contra
bases de datos, para ello se emplea un pool de conexiones que es necesario configurar
en el servidor de aplicaciones, y en el descriptor de despliegue.
La aplicación se ha desarrollado con una base de datos MySQL, para preparar la
base de datos para la aplicación se incluye junto con este documento un export de la
base de datos completa.
A continuación se muestran los datos que son necesarios para configurar el

pool de conexiones
• Nombre del recurso: el que se desee.
• JNDI: jdbc/OnlineShop (el nombre que será usado en el descriptor de

despliegue)
• Motor de bases de datos: MySQL
• Nivel de aislamiento de las transacciones: READ-‐COMMITED
• Puerto: 3306 (puerto por defecto de mySQL)
• Nombre de la base de datos
• URL: jdbc:mysql://HOSTBASEDATOS
• Nombre del servidor
• Usuario
• Contraseña
Para que el pool de conexiones funcione es necesario incluir el conector de la
base de datos en los directorios del servidor de aplicaciones. El conector para MySQL
lo puede descargar desde la página web oficial.
http://www.mysql.com/downloads/connector/j/
Una vez descargado debe incluir el archivo jar del conector en el directorio del
servidor de aplicaciones. En el caso de GlassFish será el siguiente.
glassfish-‐3.1/glassfish/lib
Una vez se ha configurado el servidor de aplicaciones hay que pasar a

configurar la aplicación.
© Jdyb -‐ Mayo 2011 22

_____________________________________________________________________________
En primer lugar es necesario configurar el modo de persistencia en el descriptor
de despliegue.

En segundo lugar hemos de configurar el nombre del recurso JNDI y
posteriormente el nombre de la tabla. Para ello se usan parámetros del contexto que
fueron usados para la persistencia en modo de fichero.

También es necesario configurar el recurso en el descriptor de despliegue.

Por último se ha de configurar el recurso en el descriptor de despliegue
específico del servidor de aplicaciones. En el caso de GlassFish se haría como se puede
ver aquí.

A continuación se muestran las sentencias SQL necesarias para crear las tablas
necesarias de la base de datos.
© Jdyb -‐ Mayo 2011 23

_____________________________________________________________________________
© Jdyb -‐ Mayo 2011 24

_____________________________________________________________________________
5.3.-‐ Configuraciones misceláneas sobre la aplicación
Si la aplicación no encuentra un usuario administrador automáticamente lo

creará partiendo de una serie de parámetros del descriptor de despliegue. Es necesario
tener en cuenta que debido a que existen validaciones de datos en la aplicación los
datos introducidos tendrán que ser datos válidos.

Es posible configurar la caducidad de la sesión de usuario en minutos, esto

indica el tiempo en el que si la sesión está inactiva se cerrará de manera automática.

Sobre el contexto de la aplicación es necesario indicar que está preparada para
funcionar sin contexto directamente sobre la raíz del servidor de aplicaciones debido a
que todas las rutas usadas en la aplicación se dan a partir de la raíz del servidor. Si se
configurara un contexto habría que configurar de nuevo todas las rutas de la
aplicación. Este parámetro de configuración lo encontramos en el descriptor de
despliegue propio del servidor de aplicaciones. Mostramos como se haría para
GlassFish.

También es necesario que la carpeta setup de la aplicación este añadida al

classpath de ejecución de la máquina virtual.
En esta carpeta se encuentran ficheros de configuración de las librerías de

validación y las plantillas de los emails que son enviados.
© Jdyb -‐ Mayo 2011 25

_____________________________________________________________________________

5.4.-‐ Configuración del servidor SMTP para el envío de emails
La aplicación permite el envío de emails a los usuarios cuando son registrados
con sus datos de registro, también cuando una compra es realizada detallándose en el
mismo los detalles de la compra y por último también admite la posibilidad de
recuperación de la contraseña de los usuarios en caso de olvido.
Para el envío de los emails es necesario configurar un servidor SMTP y será

configurado desde el descriptor de despliegue de la aplicación mediante los
parámetros de contexto. Los parámetros con los que viene configurado son
plenamente funcionales.
• hostMail: Host del servidor SMTP
• TSLMail: Si el servidor permite o no cifrado TSL
• mailPort: Puerto del servidor SMTP
• mailUser: Usuario con el que es necesario iniciar sesión para enviar los
correos
© Jdyb -‐ Mayo 2011 26

_____________________________________________________________________________
• authMail: Si es necesaria o no la autentificación para el envío de

mensajes
• mailFrom: Dirección de email del remitente que aparecerá en los

correos enviados
• mailPass: Contraseña del servidor SMTP
A continuación se muestra un ejemplo de configuración en el descriptor de

despliegue de la aplicación.

© Jdyb -‐ Mayo 2011 27

_____________________________________________________________________________
5.5.-‐ Configuración de las plantillas para el envío de emails
Existen plantillas personalizables para el envío de emails. Las podemos

encontrar en la carpeta setup que como hemos dicho debe de estar añadida al
classpath de la máquina virtual de java.
En primer lugar encontramos la plantilla con nombre plantillaCompra.html. Esta

plantilla será usada para el envío de emails detallando los detalles de la compra.
Usted decide la información que desea incluir en la plantilla con las siguientes
claves, donde usted ponga los siguiente códigos será donde aparezca en el email la
información correspondiente.
• &LISTA: Aquí aparecerá una tabla detallando la lista de productos

siguiendo los estilos css .headerTable y .contentTable que indican el
estilo de la cabecera y el contenido respectivamente
• &TOTAL: Aquí aparecerá el total de la compra en euros y con dos

decimales.
• &NAME: Nombre del cliente
• &EMAIL: Email del cliente
• &DIR: Dirección del cliente
• &FORMPAGO: Forma de pago escogida por el cliente
La plantilla de envío de recuperación de contraseña está bajo el nombre

plantillaRecuperarPass.html. Se detallan a continuación los códigos para la inclusión de
datos.
• &NAME: Nombre del cliente
• &EMAIL: Email del cliente
• &PASS: Nueva contraseña para el cliente
La plantilla de registro para los usuarios esta bajo el nombre

plantillaRegistro.html. Se detallan a continuación los códigos para la inclusión de
datos.
• &NAME: Nombre del cliente elegido para el registro
© Jdyb -‐ Mayo 2011 28

_____________________________________________________________________________
• &EMAIL: Email del registro
• &DIR: Dirección del cliente para el registro
5.6.-‐ Librerías necesarias
En este capítulo vamos a detallar cuales son las librerías que han sido usadas en
el desarrollo de la aplicación.
Podemos encontrar las librerías necesarias en la carpeta lib.
ESAPI 2.0GA Librería usada para la validación de entradas de usuario está

situado dentro de la carpeta lib y necesita las librerías que están incluidas en la carpeta
esapi-‐required.
Los ficheros de configuración necesarios para esta librería se encuentran en la
carpeta setup que como hemos indicado hay que añadirla al classpath.
• ESAPI.properties: Fichero principal de configuración de ESAPI
• validation.properties: Fichero de configuración para las expresiones

usadas en la validación
• antisamy-‐slashdot-‐1.4.3.xml: Fichero de validación de HTML para HTML

que pueda introducir el usuario
JFreeChart 1.0.13 es la librería que se ha usado para generar las gráficas de

estadísticas, situada en la carpeta lib y requiere la librería Jcommon 1.0.16 también
situada en la carpeta lib.
© Jdyb -‐ Mayo 2011 29

_____________________________________________________________________________

© Jdyb -‐ Mayo 2011 30

_____________________________________________________________________________
6.-‐ Funcionamiento en detalle del sistema
En este apartado se va a detallar el flujo de navegación de cada una de las

operaciones que se pueden realizar y de esta manera comprender mejor su
funcionamiento.
6.1.-‐ Estructura de la aplicación
En el presente apartado vamos a ver como se ha organizado la aplicación en

directorios según las funciones de cada Servlet, clase java o vista JSP.
Mostramos en primer lugar la organización de Servlets y clases en los diferentes
paquetes.

Mostramos a continuación la organización de vistas de la aplicación.
© Jdyb -‐ Mayo 2011 31

_____________________________________________________________________________

En primer lugar podemos observar como tenemos un paquete control.admin, al
igual que en las vistas también lo hay, dentro de la carpeta admin podemos encontrar
también una carpeta administration. Dentro del paquete control.admin de archivos
java también se encuentra un directorio que no se ve también llamado administration,
© Jdyb -‐ Mayo 2011 32

_____________________________________________________________________________
podemos observar que existe este directorio en el descriptor de despliegue en la

configuración de los Servlets.
La función que cumple el directorio admin es almacenar en el mismo las

acciones de administración, pero sólo aquellas que se puedan llevar a cabo siendo
usuario registrado pero sin permisos de administrador. La entrada a este directorio se
comprueba con el filtro AdminFilter definido en el descriptor de despliegue de la
aplicación.
En el directorio administration es donde se encuentran todas las acciones que
se pueden llevar a cabo siendo administrador, que son todas aquellas que se refieren a
la administración de la tienda. La entrada en esta zona es comprobada por el filtro
AdministrationFilter, este filtro solo comprueba si el usuario es administrador o no lo
es, no es necesario que compruebe la autentificación del usuario debido a que ya ha
sido comprobada por el filtro AdminFilter el cual se encuentra antes que este.
También podemos observar el paquete modelo, en el cual se encuentran los

beans utilizados en la aplicación. Dentro del mismo encontramos las clases que
representan un carrito de la compra, un comentario, un usuario o un producto.
Dentro de paquete control encontramos diferentes Servlets y clases usados

para realizar diferentes funciones de la aplicación, será explicada cada uno de ellos en
detalle posteriormente.
Podemos observar también el paquete persistencia en el cual se encuentran las
clases necesarias que se describieron anteriormente, todas ellas juntas forman el
patrón DAO de la aplicación.
Por último podemos observar el paquete control.productos, todo lo que hay

dentro de este paquete es accesible mediante la ruta /shop que si observamos hay una
carpeta que se llama así en las vistas de la aplicación. Todo lo que se encuentra dentro
de este directorio hace las funciones necesarias para la compra y todas aquellas
acciones a realizar con los productos, eso sí, únicamente aquellas acciones públicas.
Pasemos a ver ahora la estructura organizativa de las vistas de la aplicación. En

primer lugar comentar que todas las vistas son páginas dinámicas JSP, no hay
contenido estático html.
Como ya hemos visto anteriormente teníamos las carpetas admin y

administration, que ya se ha comentado que tipo de funciones agrupaban.
Posteriormente observamos la carpeta css, en la cual podemos encontrar la

hoja de estilos de la aplicación, todas las vistas de la aplicación usan esta hoja de
estilos. También podemos encontrar dentro de esta carpeta la hoja de estilos que
aplicada sobre los formularios a la hora de la validación mediante JavaScript.
© Jdyb -‐ Mayo 2011 33

_____________________________________________________________________________
Observamos una carpeta llamada images, dentro de esta carpeta se guardarán
todas las imágenes que use la aplicación, dentro de la misma habrá varias carpetas.
La carpeta icons contiene los iconos que se usan en la aplicación, como por
ejemplo puede ser el carrito de la compra.
Posteriormente vemos la carpeta products que contiene las imágenes de los

productos, cada una de ellas tiene como nombre el código del producto al que
pertenece.
Observamos la carpeta stats la cual contiene todas las imágenes referentes a

las estadísticas gráficas de la aplicación. Las estadísticas gráficas serán generadas y
almacenadas en esta carpeta y serán posteriormente mostradas al usuario.
Por último la carpeta template, la cual contiene todas las imágenes utilizadas
por la plantilla de la aplicación.
Posteriormente vemos en la raíz de la aplicación el home, la página de login y la
página de acerca de.
Después podemos encontrar la carpeta scripts, dentro de la cual podemos

encontrar todos los documentos javascript usados en la aplicación.
Dentro de esta carpeta observamos el documento jquery-‐1.6.1.js, que es la

librería jquery necesaria para usar otros plugins que se han usado que se verán a
continuación.
El documento scripts.js incluye una serie de funciones creadas para no tener

que escribirlas directamente en las páginas jsp sino solo tener que llamar a estas
funciones. Por ejemplo, podemos encontrar dentro de este documento la función
necesaria para cargar el editor de textos tiny-‐mce.
Posteriormente encontramos la carpeta tiny_mce en la que se encuentran

todos los elementos del plugin tiny-‐mce.
Finalmente observamos el documento vanadium.js que es el la librería usada

para las validaciones de javascript. Este documento ha sido modificado para dar los
mensajes en español y también se han modificado algunas de las expresiones
regulares de validación y se han añadido otras.
Observamos la carpeta shop que contiene las vistas de las acciones a realizar
referentes a las acciones con los productos y con la compra, siempre y cuando sean
públicas.
Posteriormente tenemos la carpeta WEB-‐INF, en la cual se encuentran aquellas

páginas a las que no deseamos que el usuario llegue directamente, tiene varias
© Jdyb -‐ Mayo 2011 34

_____________________________________________________________________________
carpetas dentro y en su raíz el descriptor de despliegue y el fichero de configuración
específico del servidor de aplicaciones usado (GlassFish 3.1).
Encontramos en primer lugar la carpeta admin que contiene la página de

logout, a la cual tiene lógica que no se llegue sin realizar esa acción en concreto,
también tiene la página de pre-‐visualización de producto que es usada al editar y
añadir productos y tiene lógica que solo se llegue a esta página a través de dichas
acciones.
Encontramos la carpeta include que contiene páginas jsp que van a ser incluidas
en las vistas de la aplicación, a estas páginas no se debe llegar, solo deben ser incluidas
en el cuerpo de otras páginas jsp.
Dentro de esta carpeta podemos encontrar el header de la aplicación que

contiene el menú superior y la barra superior, también encontramos el footer o pie de
página de la misma, observamos también una página llamada resultados que es la
encargada de mostrar los resultados de las acciones realizadas y esta es incluida en
todas las páginas jsp que esperan recibir mensajes de los resultados de las acciones.
Encontramos también en este directorio el menú de la aplicación tanto para la sección
de administración como para el resto de las secciones (menu, menuAdministracion).
Por último encontramos el módulo de comentarios de la aplicación que será el que es
incluido en la página de visualización de producto para que muestre los comentarios
de los productos.
Finalmente encontramos un directorio que contiene las páginas de error

(paginasError) de la aplicación, a las cuales no se debe llegar salvo que haya ocurrido el
error pertinente.
© Jdyb -‐ Mayo 2011 35

_____________________________________________________________________________
6.2.-‐ Diagramas de navegación de filtros VB
En este apartado mostraremos los diagramas de navegación referentes a los

filtros para evitar mostrarlos en los diagramas de navegación de todas las acciones por
claridad.
Todas las peticiones
Java
LogFilter.java Destino
Guarda
registro deVB V
petición

Peticiones dirigidas a /admin/*
Autentificado
Java Java
Destino
LogFilter.java AdminFilter.java
JSP
Sin
autentificar
restricted.jsp

© Jdyb -‐ Mayo 2011 36

_____________________________________________________________________________
Peticiones dirigidas a /admin/administration/*

VB
Sin
Java Java autentificar JSP
LogFilter.java AdminFilter.java restricted.jsp
Autentificado Administrador
Java
Destino
AdministrationFilter.java Usuario JSP

registrado
/admin/index.jsp

© Jdyb -‐ Mayo 2011 37

_____________________________________________________________________________
6.3.-‐ Diagramas de navegación de listeners
En este apartado detallamos los diagramas de navegación para los listeners de
VB
la aplicación.
VB
Listener de inicio de contexto
Despliegue de la
aplicación
Error
JSP Persistencia inicializando
cargada persistencia
if(conn
SELEC
Java
WHERE
print
/index.jsp StartListener.java RuntimeException

Listener de sesión
Sesión caducada o
cerrada
if(conn
SELEC
Si no es usuario WHERE
print Si es usuario autentificado
registrado; o si lo es pero y tiene carro sin comprar
no tiene carro. Continua el SaveSession
flujo normal Listener.java
Continua el flujo normal de

navegación
Destino Guarda
carrito que no
se ha
confirmado
© Jdyb -‐ Mayo 2011 38

_____________________________________________________________________________
6.4.-‐ Flujo de navegación de las operaciones públicas
En este apartado se verá el flujo de navegación de las operaciones que se

pueden realizar en la tienda de manera pública.
VB
VB
En estos diagramas podremos ver cuadros en los que pone GET y POST, esto
indica las acciones que se realizarán en caso de acceder a los servlets mediante un
verbo u otro de los métodos http.
Para este primer diagrama vamos a mostrar como se sigue el diagrama con
capturas de pantalla para que se tome como ejemplo para entender el resto de los
diagramas.
Añadir producto al carrito
JSP
Java
Listado de productos <script
var a=
var xl
if(xls
AddCarritoServlet
/shop/products.jsp
Caso de error añade

Añade el producto al
un mensaje a la
carro si corresponde
petición
Si el error es
formulario
incorrecto o
petición
POST
Error 404

© Jdyb -‐ Mayo 2011 39

_____________________________________________________________________________
VB
VB
Actualizar unidades de un producto en el carrito
JSP
Si la sesión no
Listado de productos en Java contiene carrito JSP
el carrito <script
var a=
var xl
if(xls
EditAmount /shop/
Servlet Formulario products.jsp
incorrecto
/shop/cart.jsp
Error 404
Actualiza el carro si
las Si hay error en las
comprobaciones comprobaciones se
son positivas añade mensaje

Para borrar un producto de la cesta se seguiría el mismo mecanismo con la
salvedad de que la cantidad que se pediría son cero unidades.
© Jdyb -‐ Mayo 2011 40

_____________________________________________________________________________
Borrar el carrito de la compra (vaciarlo)
JSP Java
Listado de productos en <script
var a=
el carrito var xl
VB
if(xls
DeleteCart VB
Servlet
/shop/cart.jsp

Validar carrito de la compra (paso previo a la compra)

VB
JSP
Si se han hecho
Listado de productos en Java cambios en el
el carrito <script
carrito se avisa
var a=
GET var xl
if(xls
UpdateCart
Servlet
/shop/cart.jsp Si no es la
operación de venta
definitiva
Si no hay carrito en
la sesión
JSP JSP
Listado de productos Formulario de venta
/shop/products.jsp /shop/buycart.jsp
POST
Error 404

© Jdyb -‐ Mayo 2011 41

_____________________________________________________________________________
Realizar la compra VB
JSP
Java Si se han hecho
Formulario de venta <script cambios en el
var a=
var xl carrito se avisa
if(xls
POST
UpdateCart
Servlet
/shop/buycart.jsp
Si no hay carrito en
la sesión Java Error 404
JSP <script
var a=
var xl
if(xls
GET
Listado de productos
VB
BuyServlet
/shop/products.jsp POST
Fallos o cambios
Compra exitosa
en el carrito
Registro de la
compra
Enviar Email
JSP
Compra realizada
/shop/buyinformation.jsp

Es importante destacar de este diagrama el paso previo antes de la compra por
el Servlet UpdateCartServlet, es posible que el que lo vea se pregunte porque pasa
antes por aquí que por el Servlet que realmente realiza la compra. Se ha diseñado así
por cuestiones de rendimiento. El Servlet que realiza la compra comprueba si las
unidades son correctas o no y edita el catálogo, pero estas operaciones las realiza de
manera sincronizada y pidiendo locks, por lo que el rendimiento de la aplicación
disminuiría significativamente en el caso de que hubiera muchos hilos concurrentes
ejecutando el Servlet de compra.
Por ello se ha implementado el primer Servlet, en el que se realizan esas

operaciones (sin editar productos) pero no son sincronizadas y de esta manera
© Jdyb -‐ Mayo 2011 42

_____________________________________________________________________________
evitamos que todas las peticiones lleguen al servlet que realiza la compra. Se podría
decir que de esta manera reducimos las peticiones que llegan al servlet de compra y
las que llegan al mismo tienen un porcentaje de acierto mayor a la hora de completar
la compra con éxito. VB
VB
También es importante este paso previo antes de la compra porque ese servlet
también realiza una actualización del precio del carrito por si algún producto cambió el
precio en el periodo de tiempo en el que ha estado ese producto en el carrito. De esta
manera aseguramos que el precio que se paga por el carrtito es el actual.
Busqueda de productos
JSP GET
Java
Busqueda <script
var a=
var xl
if(xls
Error 404
SearchProduct POST
Servlet
/shop/products.jsp
Sin parámetros de
Correcto
vuelta
Buscar
productos

© Jdyb -‐ Mayo 2011 43

_____________________________________________________________________________
Registro de usuarios
JSP GET
Registro
Error 404
POST Ante errores hay

/login.jsp mensajes
Registro
correcto
Nuevo usuario
VB VB
Enviar email
registro

Inicio de sesión
JSP Java GET
Inicio de sesión <script

var a=
var xl
if(xls Error 404
POST
Login AuthServlet
Errores en la
Autentificación
autentificación
correcta
Página a la que se intentó

acceder y dio error
Inicio de sesión Inicio de sesión JSP

manual después de un error
Inicio
/index.jsp

© Jdyb -‐ Mayo 2011 44

_____________________________________________________________________________
Recuperación de contraseña
JSP Java GET

Inicio de sesión <script
var a=
var xl
if(xls
PassRecover
Servlet Error 404
/login.jsp
Proceso
correcto
POST
Error en el
proceso
Envio email para

recuperar la contraseña
Actualizar
contraseña

© Jdyb -‐ Mayo 2011 45

VB
Juan Díez-‐Yanguas Barber Programación con Java EE Tienda Online VB
_____________________________________________________________________________
6.5.-‐ Flujo de navegación para operaciones de usuario registrado
En este apartado se va a detallar el flujo de navegación para las operaciones

que pueden realizar los usuarios registrados (no administradores).
VB
Cambio de contraseña
JSP GET
Java
Cambio de contraseña VB
<script
var a=
var xl Error 404
if(xls
ChangePass POST
Servlet
/admin/
preferences.jsp Error en el
proceso
JSP
Proceso
completado
/WEB-INF/
admin/ Java No se encuentra el
logout.jsp
<script usuario de la sesión
var a=
var xl
if(xls
LogOutServlet Actualizar
datos
© Jdyb -‐ Mayo 2011 46

_____________________________________________________________________________
Cambiar los datos personales
JSP GET
Cambio de datos personales Java
<script
var a=
var xl
if(xls
Error 404
EditUserServlet
POST
/admin/preferences.jsp
VB VB
Actualizar
Error en el Proceso datos
proceso completado

Añadir comentario al producto
GET
JSP Java
<script
Añadir comentario var a= Error 404
var xl
if(xls
POST
AddComment
Servlet
/shop/
viewprod.jsp?
prod= Error en el Proceso
proceso completado
Guardar
datos

© Jdyb -‐ Mayo 2011 47

_____________________________________________________________________________
Cerrar sesión
JSP Java
Cerrar sesión <script
var a=
var xl
if(xls VB VB
LogOutServlet
/logout
Sesión no La sesión se cerro Cierre

iniciada por un error normal
JSP JSP JSP

Login
/index.jsp Login /WEB-INF/

admin/
/login.jsp logout.jsp

© Jdyb -‐ Mayo 2011 48

VB VB
_____________________________________________________________________________
6.6.-‐ Flujo de navegación de las operaciones del administrador
En este apartado veremos en detalle como es el flujo de las operaciones que

puede realizar un usuario de la tienda con permisos de administrador.
Añadir producto al catálogoVB

JSP Java
Añadir al catálogo
<script
var a=
POST
var xl
if(xls
1 -----
2 ----- AddProduct
3 ----- Servlet Error en el
transcurso de la
operación
/admin/
administration/
addproduct.jsp Operación exitosa
GET
JSP
Confirmar
Previsualización producto
producto
VB
Editar
producto
/WEB-INF/admin/
preview_prod.jsp
GET
Error Exito
guardando guardando
Guarda
producto
JSP
Administración de productos
/admin/administration/
products_administration.jsp

© Jdyb -‐ Mayo 2011 49

_____________________________________________________________________________
Editar producto del catálogo
JSP
VB
Java POST
Editar producto
<script
var a=
var xl
1 ----- if(xls Operación
2 ----- correcta
3 ----- EditProduct
Servlet
/admin/
Errores en la JSP
administration/ operación
modifyprod.jsp Previsualización producto
Editar
producto
JSP
Administración de productos Confirmar /WEB-INF/admin/
producto preview_prod.jsp
GET
GET
products_administration.jsp
Error Exito
guardando guardando
Guarda
producto
© Jdyb -‐ Mayo 2011 50

_____________________________________________________________________________
Editar usuario
VB
JSP GET
Editar usuario Java

Error 404
<script
var a=
var xl
if(xls
POST
EditUserComplete
Servlet
edituser.jsp?user= Operación
Errores
completada
JSP
Administración de
usuarios
VB Actualizar VB
usuario
user_administration.jsp

Borrar usuario
JSP Java
Error en
Lista de usuarios <script
var a= peticion
var xl
if(xls
Error 404
DeleteUser
Servlet
user_administration.jsp
Borrado Error en el
correcto proceso
Borrar
usuario
© Jdyb -‐ Mayo 2011 51

_____________________________________________________________________________
Borrar producto
VB
JSP JSP
Listado productos Borrar producto
/admin/administration/ /admin/administration/
products_administration.jsp delprod.jsp?prod=
Cancelar Confirmar
POST
Java
<script
var a=
var xl
Error 404
if(xls
DeleteProduct
GET Servlet
Error Exito
Borrar
producto

© Jdyb -‐ Mayo 2011 52

_____________________________________________________________________________
Editar comentario
JSP JSP
Producto Editar comentario
VB
Error 404
/shop/viewprod.jsp? /admin/administration/
prod= editcomment?cod=
Parámetros Parámetros
correctos incorrectos
Error
validación
<script
Java var a=
var xl
if(xls
Errores
EditComment
Servlet
Correcto
Actualizar
comentario
© Jdyb -‐ Mayo 2011 53

_____________________________________________________________________________
Borrar comentario
JSP
Java
Producto
<script
var a=
Error 404
var xl
if(xls
DeleteComment
Servlet
/shop/viewprod.jsp?
prod= Error
parámetros
o POST
Borrado Borrado
correcto fallido

© Jdyb -‐ Mayo 2011 54

_____________________________________________________________________________
6.7.-‐ Sobre el JavaScript que se ha usado
Todo el JavaScript usado en el sistema usan la librería JQuery, cuya principal

función consiste en facilitar el acceso al documento HTML, facilitar el manejo de
eventos así como en el uso de Ajax.
En primer lugar podemos destacar la librería VanadiumJS que nos ayuda a la

validación de formularios mediante JavaScript. Esta librería es capaz de validar campos
de los formularios simplemente poniendo la clave correspondiente en el atributo class
del campo del formulario y nos da el mensaje de error siguiendo la hoja de estilos que
está dentro de la carpeta css.
Mostremos un ejemplo para el formulario de login.

Mostramos a continuación la web de la librería usada, aunque el documento de
la librería que se usa en esta aplicación ha sido modificado para dar los mensajes en
español y también se han modificado algunas de las expresiones regulares y se han
añadido otras expresiones regulares como por ejemplo para validar las direcciones.
http://www.vanadiumjs.com/

Otra de las librerías usadas es Tiny-‐MCE el cual sirve para que los cuadros de
texto de los textarea sean cuadros de texto WYSIWYG. Para ello hay que inicializar las
páginas que contengan los textarea con una función que especifica las opciones de
plugin. Esta función la podemos ver en el documento scripts.js.
© Jdyb -‐ Mayo 2011 55

_____________________________________________________________________________

Dejo a continuación la web del plugin en donde se puede obtener más
información acerca de las opciones.
http://tinymce.moxiecode.com/
Algo que hay que tener muy en cuenta a la hora de usar este plugin es que se
ha dejado muy corto de opciones debido a que se valida el html de entrada en el
servidor por cuestiones de seguridad, por lo que hay ciertas etiquetas de html o css
que no están permitidas, por ello el fichero XML de configuración de antisamy está
adaptado especialmente a este plugin.
Otro aspecto muy importante a tener en cuenta es que la combinación de estos
dos plugins puede tener problemas, a continuación explico las causas.
El cuadro de texto WYSIWYG que se genera no es el mismo textarea que hay en
nuestro html, se podría decir que es uno virtual, por lo que nosotros escribimos en el
virtual, por lo tanto nuestro textarea está vacío y por esta causa la validación por la
librería Vanadium fallaría.
Por ello lo que hay que hacer es volcar el contenido del cuadro de texto
WYSIWYG en el textarea real de nuestro html. Para ello hemos de usar eventos, yo
para solucionarlo que he hecho es que se vuelque el contenido con cualquier cambio
que se produzca en el campo de texto. Esto lo podemos configurar en la función de
inicialización del cuadro WYSIWYG.
El código consiste simplemente en que se asigna una función al evento y esa

función lo que realiza es el volcado del contenido.
© Jdyb -‐ Mayo 2011 56

_____________________________________________________________________________

Otra opción interesante es que se produzca un volcado en el submit del
formulario.

© Jdyb -‐ Mayo 2011 57

_____________________________________________________________________________
7.-‐ Sistema de control de versiones
Para el desarrollo de este proyecto se ha usado un sistema de control de

versiones centralizado, que ha sido subversión. Como repositorio se ha usado Google
code.
La URL del proyecto en google code es la siguiente.
http://code.google.com/p/tiendaonlinelpijdyb/

Lo que se encuentra almacenado en el repositorio de google code es un

proyecto de NetBeans, el cual se encuentra en la carpeta trunk.
http://code.google.com/p/tiendaonlinelpijdyb/source/browse/#svn%2Ftrunk%
253Fstate%253Dclosed
Es posible bajar el proyecto haciendo un checkout del mismo con el cliente de
subversión que nosotros deseemos. Por ejemplo podemos usar el cliente que trae
Netbeans por defecto.
A continuación mostramos los pasos que hemos de seguir para hacer un

checkout desde netbeans y así obtener el proyecto completo.

En la siguiente ventana se nos preguntará por la URL del repositorio.
https://tiendaonlinelpijdyb.googlecode.com/svn
© Jdyb -‐ Mayo 2011 58

_____________________________________________________________________________

En esta ventana se nos preguntará por la ruta de la que deseamos hacer el
checkout y posteriormente por la ruta dentro de nuestro equipo donde queremos que
se guarde el proyecto.

En la siguiente ventana podemos comprobar que se ha realizado correctamente
la operación y observamos que ha detectado que es un proyecto de NetBeans y nos da
la opción de abrirlo o no abrirlo.
© Jdyb -‐ Mayo 2011 59

_____________________________________________________________________________

Podemos acudir al directorio de nuestro equipo donde elegimos guardar el
proyecto y comprobaremos que se ha bajado correctamente.

© Jdyb -‐ Mayo 2011 60

_____________________________________________________________________________
8.-‐ Aspectos a mejorar
La usabilidad de la aplicación se ha tratado de hacer lo mejor posible para

hacerla lo más amigable posible pero aún así hay aspectos que son mejorables, como
puede ser la paginación de los resultados, la apariencia de la página de inicio y la de la
página de acerca han sido bastante austeras.
La función de subida de imágenes podría ser mejorable modificando el modelo
de datos y de esta manera ayudaríamos al SEO (Searh Engine Optimization) para que
nuestras imágenes fueran mejor indexadas por los motores de búsqueda.
También podría ser interesante la inclusión de más tipos de gráficas en la

sección de estadísticas de los administradores para obtener más información sobre el
estado y la evolución e la tienda. De la misma forma que estas gráficas podrían ser
mejorables en lo que se refiere al aspecto de las mismas. Por ejemplo se podría usar
javascript para representar las mismas.
Si esto se tratara de una aplicación real no podríamos usar el tipo de dato

double para representar los precios de las cosas debido a que este tipo de dato podría
efectuar redondeos o ajustes que no son deseables cuando estamos hablando de
dinero. Si en la tienda hubiera descuentos o porcentajes de alguna forma se podrían
empezar a observar las consecuencias. Lo que mejor hubiera estado para subsanar
este problema sería haber usado la clase de java BigDecimal que tiene una mayor
precisión.
© Jdyb -‐ Mayo 2011 61

Online Shop

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Online Shop

Cargado por

Copyright:

Formatos disponibles

Ejemplo de Programación con Java EE

Juan Díez-­‐Yanguas Barber

Programación con Java EE 6

© Jdyb -­‐ Mayo 2011

3.-­‐ DISEÑO DEL SISTEMA 10

4.-­‐ MODELOS DE DATOS USADOS 16

4.1.-­‐ MODELO DE DATOS DE PRODUCTO 16

5.-­‐ CONFIGURACIÓN DE LA APLICACIÓN 20

6.-­‐ FUNCIONAMIENTO EN DETALLE DEL SISTEMA 31

7.-­‐ SISTEMA DE CONTROL DE VERSIONES 58

8.-­‐ ASPECTOS A MEJORAR 61

© Jdyb -­‐ Mayo 2011 2

He sido siempre un apasionado de la informática, y desde que comencé mis

Actualmente he finalizado mis estudios de Ingeniería Técnica en Informática de

No puedo terminar este texto sin agradecer a Abraham Otero Quintana el

Pueden ponerse en contacto conmigo en esta dirección de correo electrónico

© Jdyb -­‐ Mayo 2011 3

© Jdyb -­‐ Mayo 2011 4

© Jdyb -­‐ Mayo 2011 5

© Jdyb -­‐ Mayo 2011 6

Es posible añadir comentarios a los productos siendo un usuario registrado.

© Jdyb -­‐ Mayo 2011 7

© Jdyb -­‐ Mayo 2011 8

Como ayuda a los administradores cuenta con un registro de peticiones

Es posible la visualización de estadísticas de ventas, esta opción estará

© Jdyb -­‐ Mayo 2011 9

3.-­‐ Diseño del sistema

3.1.-­‐ Herramientas utilizadas

Como entorno de desarrollo se ha usado NetBeans 7.0.

Para la presentación de cara al usuario se han empleado páginas JSP para la

© Jdyb -­‐ Mayo 2011 10

3.2.-­‐ Patrón de diseño MVC

Por último tendríamos la parte del controlador que sería la encargada de

Actualizar Objetos Java

© Jdyb -­‐ Mayo 2011 11

3.3.-­‐ Diseño de la persistencia. Patrón DAO

A continuación usaremos el patrón de diseño que se ha usado para el

Este patrón trata de independizar el tipo de persistencia del resto de la

Por poner un ejemplo, podemos estar desarrollando la aplicación con

Explicamos a continuación en que consiste este patrón de diseño.

Por último tendríamos una factoría que dependiendo de los argumentos, en

Para acceder a la persistencia no tendríamos mas que acceder mediante la

La forma de controlar las instancias existentes es hacer que la propia clase

Mostramos a continuación un diagrama de clases en el que se muestran las

Modelo de persistencia. Patrón DAO

private persistence: PersistenceInterface public static PersistenceInterface

public void contextDestroyed(ServletContextEvent sce)

private boolean startValidate(ServletContext context)

public boolean init (String locationUser, String persistencia.PersistenceFile persistencia.PersistenceBD

lockUsuarios: Object private ArrayList <String>

public Usuario getUser (String mail)

public Producto getProduct (String codigo)

public boolean updateUser (String mail, Usuario

public int anyAdmin ()

public Map <String, Producto> getProducts()

public Map <String, Usuario> getUsers ()

public Map<String, Producto> searchProd(String

public boolean saveRequest (String fechaHora,

public boolean saveCart (Carrito cart, boolean

© Jdyb -­‐ Mayo 2011 13

3.4.-­‐ Diseño de filtros

En este apartado veremos algunos aspectos del diseño de la aplicación que

La autentificación de la aplicación está basada en el uso de filtros. Hay un filtro

Juan Díez-‐Yanguas Barber

© Jdyb -‐ Mayo 2011

3.-‐ DISEÑO DEL SISTEMA 10

4.-‐ MODELOS DE DATOS USADOS 16

4.1.-‐ MODELO DE DATOS DE PRODUCTO 16

5.-‐ CONFIGURACIÓN DE LA APLICACIÓN 20

6.-‐ FUNCIONAMIENTO EN DETALLE DEL SISTEMA 31

7.-‐ SISTEMA DE CONTROL DE VERSIONES 58

8.-‐ ASPECTOS A MEJORAR 61

© Jdyb -‐ Mayo 2011 2

© Jdyb -‐ Mayo 2011 3

© Jdyb -‐ Mayo 2011 4

© Jdyb -‐ Mayo 2011 5

© Jdyb -‐ Mayo 2011 6

© Jdyb -‐ Mayo 2011 7

© Jdyb -‐ Mayo 2011 8

© Jdyb -‐ Mayo 2011 9

3.-‐ Diseño del sistema

3.1.-‐ Herramientas utilizadas

© Jdyb -‐ Mayo 2011 10

3.2.-‐ Patrón de diseño MVC

© Jdyb -‐ Mayo 2011 11

3.3.-‐ Diseño de la persistencia. Patrón DAO

© Jdyb -‐ Mayo 2011 13

3.4.-‐ Diseño de filtros

3.5.-‐ Acceso a los mecanismos de persistencia

2.6.-‐ Seguridad de la aplicación

© Jdyb -‐ Mayo 2011 14

© Jdyb -‐ Mayo 2011 15

4.-‐ Modelos de datos usados

4.1.-‐ Modelo de datos de Producto

4.2.-‐ Modelo de datos para el usuario

© Jdyb -‐ Mayo 2011 18

4.4.-‐ Modelo de datos para los comentarios

© Jdyb -‐ Mayo 2011 19

5.-‐ Configuración de la aplicación

5.1.-‐ Configuración de persistencia en modo fichero

© Jdyb -‐ Mayo 2011 20

© Jdyb -‐ Mayo 2011 21

• Nivel de aislamiento de las transacciones: READ-‐COMMITED

© Jdyb -‐ Mayo 2011 22

© Jdyb -‐ Mayo 2011 23

© Jdyb -‐ Mayo 2011 24

5.3.-‐ Configuraciones misceláneas sobre la aplicación

© Jdyb -‐ Mayo 2011 25