proyecto java ee - cice.es · pdf filepara la elaboración de la web se ha creado un...

Proyecto Java EE

Oier Campandegui

PROYECTO JAVA EE: WEB TRIDINOS TRIATLÓN

1

Contenido

1. Introducción ............................................................................................................................................... 2

2. Descripción de la Web ................................................................................................................................ 3

3. Puesta en marcha de la Web ...................................................................................................................... 5

4. Estructura del Proyecto ............................................................................................................................... 8

5. Base de datos. Modelo ............................................................................................................................. 10

6. Seguridad ................................................................................................................................................. 12

7. Secciones destacables de la Web ............................................................................................................. 16

7.1. Algunos aspectos en la parte Front End ............................................................................................... 16

7.2. Sección Noticias ................................................................................................................................... 19

7.3. Registro en la web ................................................................................................................................ 20

7.4. Pedidos ................................................................................................................................................ 22

7.5. Rutas/Quedadas ................................................................................................................................... 27

8. Referencias ............................................................................................................................................... 37


2

1. Introducción

Tridinos es un Club de Triatlón formado por un grupo de amigos. El club

necesita una web, por un lado para tener una imagen marcada del Club y por otro para gestiones internas de los socios.

Entre las necesidades para la zona pública del Club destacan:

Tener una web con una imagen y diseño con los colores identificativos del Club.

Zona para dar publicidad a los patrocinadores del Club.

Zona para que los visitantes puedan contactar con el Club.

Entre las necesidades para la gestión interna del Club destacan: Tener una base de datos con los datos personales de los socios.

Zona para realizar pedidos conjuntos de equipación del Club. Zona para definir quedadas de bicicleta y que los socios se puedan

apuntar.


3

2. Descripción de la Web

La web que se ha diseñado para el proyecto, está formada por una parte

pública y otra parte privada.

La parte pública tiene cuatro menús:

Inicio: Con fotos en movimiento identificativas del club Noticias: Con noticias actuales de Triatlón publicadas por la Federación

Española de Triatlón (FETRI) Patrocinadores: Sección con los banners de los patrocinadores Contacto: Con un formulario para que los visitantes puedan realizar

consultas a la junta directiva del Club.

La parte privada se divide en dos subsecciones: Zona Socios y Zona admin.

Zona Socios: En esta zona sólo podrán acceder los socios, logándose previamente en la web. Se compone de tres menús:

Revisar datos: En esta sección, cada socio podrá ver y modificar sus datos personales

Pedidos: En esta sección el socio podrá realizar pedidos de la equipación

del Club y también ver el estado de los pedidos que ha realizado Quedadas: En esta sección el socio podrá consultar las próximas

quedadas de bici programadas y ver/apuntarse a la lista de socios que vayan a acudir a la quedada.

Zona admin: En esta zona sólo podrán acceder el administrador o socio con role de administrador (miembros de la junta directiva). Se compone de tres

menús:


4

Socios: En esta sección se podrán consultar/modificar los datos

personales de todos los socios, modificar roles de usuarios y eliminar usuarios.

Pedidos: En esta sección se podrán añadir/modificar/eliminar productos, tramitar pedidos, crear informes de pedidos, ver historial de pedidos etc.

Quedadas: En esta sección se podrá programar una quedada, diseñar una ruta de bici etc.

Para que un socio pueda acceder a la zona de socios, los pasos que tiene que seguir son los siguientes:

Rellenar el formulario de registro. Clicar el enlace que le llegará a su correo electrónico para validar su

cuenta. Una vez el usuario haya validado su correo electrónico, el administrador

tendrá que cambiar al usuario el role: de “invitado” a “tridino”. El usuario podrá logarse introduciendo su usuario y contraseña en la

página de login.


5

3. Puesta en marcha de la Web

Para poner en marcha la Web, hace falta tener instalado Netbeans (Con Servidor Apache Tomcat) y Mamp. Los pasos que hay que seguir son los

siguientes:

Creación de la Base de datos Conectarse a phpMyAdmin y crear una base de datos nueva llamada:

„proyectotridinos‟ de tipo utf8_bin

Importación de la Base de datos en phpMyAdmin

Se dejan dos bases de datos en la carpeta „Base de Datos‟:

o proyectotridinos_vacio.sql o proyectotridinos_condatos.sql

Se puede importar la que se desee, según se quiera empezar de cero o con algunos datos ya introducidos (productos para los pedidos o algunas

rutas para las quedadas).

Abrir proyecto „ProyectoTridinos‟ en Netbeans

Si diera algún error de que no encuentra la librería „commons-io-2.5.jar‟, habría que decirle dónde está. Todas las librerías .jar utilizadas en el

proyecto los hemos dejado dentro de la carpeta ProyectoTridinos

Configuraciones a tener en cuenta o Apache Tomcat: Lo tenemos configurado en el puerto 8084 con

usuario: root contraseña: root. Importante para que funcione el link de la validación de email e inicialización del usuario admin. (ya que las direcciones comienzan con: http://localhost:8084)


6

o Puerto MySQL Port en Mamp: Lo tenemos configurado en el puerto 3306


7

Hay que tener en cuenta que tiene que coincidir con el configurado en la Clase DBManager:

Conexión a Internet: Para que algunas de las funcionalidades de la Web

funcionen, el equipo donde se ejecuta el proyecto tiene que tener conexión a Internet: Para los envíos de correo, carga del fichero xml de

la sección de Noticias y para que las APIs de Google Maps funcionen.

Si se ha cargado la Base de datos vacía, la forma de crear el usuario admin es pasando el nick, email y contraseña por el método doGet mediante esta dirección:

http://localhost:8084/ProyectoTridinos/RegistrarTridino?nick=admin&email=oi

[email protected]&password=1234

Si se ha cargado la Base de datos con datos, el usuario administrador

es: admin y contraseña: 1234 y el usuario para pruebas: oiercamp

contraseña: 1234

http://localhost:8084/ProyectoTridinos/RegistrarTridino?nick=admin&[email protected]&password=1234

http://localhost:8084/ProyectoTridinos/RegistrarTridino?nick=admin&[email protected]&password=1234


8

4. Estructura del Proyecto

Para la elaboración de la web se ha creado un proyecto Java Web en Netbeans.

Se ha utilizado el patrón MVC (Modelo, Vista, Controlador).

La parte Frontend, se ha programado con lenguajes HTML, CSS y Javascript.

Para facilitar la creación de elementos de la web, se ha utilizado el framework

Bootstrap (1). De esta forma, la creación de formularios, botones, paneles,

menús etc. ha resultado mucha más sencilla y la web visualmente más

atractiva.

Para la parte Backend se ha

utilizado JAVA EE: Servlets,

clases java y páginas jsp.

También se ha utilizado la base

de datos MySQL.

Dentro del proyecto, se han

creado las siguientes

subcarpetas:

css: para almacenar

ficheros css.

js: para almacenar ficheros

javascript.

includes: para almacenar

los ficheros jsp que son parte de

otros.

images: Para almacenar

las imágenes.

socios: Para almacenar las

páginas jsp que son sólo

accesibles por los socios y

administradores.

admin: Para almacenar las

páginas jsp que son sólo

accesibles por los

administradores.

También se han creado los

siguientes paquetes:

es.cice.db: Para almacenar

la clase DBManager, encargado


9

de realizar conexiones y operaciones sobre la Base de Datos.

es.cice.logic: Para almacenar la clase Logic, que contiene métodos

estáticos.

es.cice.models: Para almacenar los modelos.

es.cice.servlets: Para almacenar los Servlets.

En cuanto a las librerías, se han agregado las siguientes:

mail-1.4.7.jar: Para enviar correos electrónicos

mysql-connector-java-5.1.39-bin.jar: Para la conexión con la Base de

datos

commons-codec-1.10.jar: Para encriptar las contraseñas

commons-fileupload-1.3.2.jar: Para la subida de ficheros e imágenes.

itext-4.2.1.jar: Para creación de documentos pdf.


10

5. Base de datos. Modelo

A continuación mostramos la estructura de la base de datos:

Está formada por seis tablas que corresponden con los modelos:

Tridino: Los objetos de esta clase almacenan los datos de cada socio.

Producto: Los objetos de esta clase corresponden con las equipaciones disponibles para realizar los pedidos.

Pedido: Los objetos de esta clase almacenan los detalles de los pedidos

realizados por cada socio Ruta: Los objetos de esta clase almacenan los detalles de la ruta

planificada Waypoint: En los objetos de esta clase se van almacenando los puntos


11

de las rutas Inscrito: Los objetos de esta clase almacenan los socios inscritos a una

determinada ruta


12

6. Seguridad

Para la seguridad de la Web se han tenido en cuenta los siguientes puntos:

Protección contra inyecciones SQL: Se han protegido contra inyecciones sql aquellos formularios a los que

puede acceder cualquier usuario. Para este fin, se ha utilizado Prepared Statement a la hora de insertar los datos del usuario en la base de datos

a través del formulario de registro:

También se ha utilizado Prepared Statement en el formulario de login:


13

Encriptación de contraseñas: Las contraseñas de los usuarios son encriptadas antes de insertarlas en

la base de datos:

Protección de acceso a las páginas jsp privadas:

Al inicio de las páginas jsp privadas (tanto en las de los socios como administradores) se incluye el fichero security.jsp.


14

Esta jsp se encarga de comprobar que el usuario que intenta acceder a

la página está logado y tiene asignado role de administrador o socio (tridino) según corresponda. Si no tiene ninguno de estos roles, automáticamente es redireccionado a la página de inicio, sin permitir

acceder al contenido de la página jsp.

A parte de lo mencionado sobre la seguridad, en el formulario de registro de la

Web también se han tenido en cuenta las siguientes consideraciones:

Los campos que son obligatorios en la base de datos se han configurado

para que sean de tipo required. De esta forma el formulario dará un

error si se deja un campo obligatorio vacío.


15

En los campos del formulario se ha configurado tamaño máximo,

atendiendo al tamaño máximo de los campos en la Base de datos. De

esta forma el formulario no dejará escribir más texto cuando se llegue a

su longitud máxima.

Antes de almacenarlo en la Base de datos, se hacen las siguientes

comprobaciones en los datos introducidos en el formulario de registro:

o Que las contraseñas coincidan

o Que el nick no exista en la Base de datos

o Que el correo electrónico no exista en la Base de datos

Si alguno de estos puntos falla, sale una advertencia en la parte de

arriba del formulario de registro.


16

7. Secciones destacables de la Web

7.1. Algunos aspectos en la parte Front End

Describimos en esta sección algunos elementos destacables que se han

utilizado para la parte Front End de la Web:

Calendario: En el formulario, en el campo de fecha, se abre un

calendario para seleccionar la fecha a insertar.

Para ello, se ha utilizado datepicker de jquery (2). Además, el formato

del calendario lo hemos convertido a castellano (3).


17

Imágenes en movimiento: En el inicio de la página se ha insertado

un carrousel de imágenes que van cambiando. Para eso se ha

utilizado la clase „carousel slide‟ de Bootstrap (4).


18

Login: Cuando se pulsa el botón „Conectarse‟ del menú, se abre un

modal para logarse en la página.

Para que se abra la página de login, se ha utilizado el plugin modal de

Bootstrap (5). El contenido del modal se ha definido dentro del fichero: Web

Pages/includes/modal.jsp


19

7.2. Sección Noticias

Esta sección está en la parte pública de la Web. En él se muestran las

últimas noticias del triatlón de forma automática. Para ello, se utiliza como

fuente el feed de la Federación Española de Triatlón, que contiene un

documento xml:

http://triatlon.org/triweb/index.php/feed/

Analizando el fichero xml, observamos que cada <item> corresponde a una

noticia. Dentro de los <items> extraemos los atributos: <title>, <link>,

<pubDate> y <description>. La extracción de la información, lo hacemos

en el Servlet: ActualizarNoticias.java. Los datos extraídos los almacenamos

en un Arraylist<Noticia> y éste lo almacenamos en la sesión. En la página

noticias.jsp recuperamos el Arraylist de la sesión y mostramos las noticias

al usuario.

http://triatlon.org/triweb/index.php/feed/


20

7.3. Registro en la web

Para registrarse en la web, el usuario tiene que rellenar el formulario de

registro.


21

Una vez rellenado, pulsa el botón Enviar. En ese momento se llama por

método Post al servlet RegistrarTridino.java.

En este servlet se hacen comprobaciones de los datos introducidos en el

formulario: que las contraseñas coincidan, que el usuario y el correo

electrónico no existan en la base de datos. Si todo es correcto, se

redirecciona al Servlet EnviarMailConfirmacion.java

En el servlet EnviarMailConfirmacion.java se crea una cadena de texto

aleatoria (6) y se almacenan todos los datos del formulario, junto con el

texto aleatorio, en la base de datos.

A continuación, se envía un correo electrónico al usuario con un enlace para

la activación de la cuenta (7). Este enlace contiene la cadena de texto

aleatoria.

El usuario clica en el enlace que le ha llegado al correo electrónico. El

enlace tiene el siguiente formato:

http://localhost:8084/ProyectoTridinos/ActivacionCuenta?nick=‟nick_a_regi

strar‟&aleatorio=‟cadena_texto_aleatoria‟

El enlace llama al servlet ActivacionCuenta.java, pasando por método GET

los parámetros Nick y la cadena de texto aleatoria.

El Servlet verifica que la cadena aleatoria concuerda con el que se ha

almacenado previamente en la base de datos y valida el usuario.

Una vez el usuario está validado, el administrador se encarga de darle un

role al usuario. Si es socio del club, le asignará role = „tridino‟ y si le quiere

asignar role de administrador: role = „admin‟. Por defecto, el usuario tiene

role „invitado‟, con el que no puede ver las secciones privadas de la web.

http://localhost:8084/ProyectoTridinos/ActivacionCuenta?nick=oiercamp&aleatorio=JJNOGAWU

http://localhost:8084/ProyectoTridinos/ActivacionCuenta?nick=oiercamp&aleatorio=JJNOGAWU


22

Para que el servlet haga el envío del correo electrónico al usuario, se ha

utilizado la librería javax.mail.* (mail-1.4.7.jar (8)).

Para el proyecto se ha creado una cuenta de correo electrónico de Hotmail:

[email protected] (Password: CiceOier). Este correo electrónico es el

que se ha configurado dentro del Servlet para realizar los envíos de los

correos a los usuarios.

7.4. Pedidos

La sección de pedidos se utilizará entre todos los socios, para realizar

compras conjuntas de equipación del club.

Cada socio, una vez logado, podrá entrar en la sección Pedidos/Realizar

Pedido. En esta sección, puede seleccionar los productos que deseé, talla y

cantidad y darle a Añadir.

mailto:[email protected]


23

Los productos se irán añadiendo a productos agregados y una vez que haya

finalizado el usuario podrá confirmar el pedido. Una vez confirmado, el

pedido quedará en estado pendiente.


24

Cuando todos los usuarios hayan confirmado los pedidos, el administrador

entrará en la sección Pedidos/Tramitar pedidos. En esta sección aparecerán

todos los pedidos que están pendientes de tramitar.

El administrador clicará en Tramitar Pedidos. Los pedidos que estaban en

estado pendiente, pasarán a estado tramitado y se abrirá una nueva página

con el listado de pedidos tramitados:

Debajo del listado aparecerán tres botones:

Informe para pedido: Al pulsarlo, se creará un documento pdf con el

listado de todos los productos que hay que comprar. Este pdf servirá

para realizar el pedido al fabricante.


25

Informe detallado: Al pulsar, se creará un documento pdf con el

listado de pedidos, desglosado por socio y también con la

información de la cantidad que tiene que abonar cada uno.

Archivar pedidos: Una vez se ha realizado el pedido, se pulsará sobre

este botón. El listado de pedidos tramitados, pasará a estado

archivado.

Los pedidos archivados, se podrán consultar en la sección Historial Pedidos.

En esta sección, el administrador podrá realizar una consulta de pedidos

que se realizaron en una determinada fecha.


26

La programación de la parte de pedidos se ha realizado con Servlets. En

general, la metodología usada ha sido la siguiente:

El usuario hace una llamada a un Servlet a través de un botón de la

página (la mayoría de las veces por el método POST)

El Servlet recupera información y realiza consulta a base de datos

Los resultados se almacenan en Arraylist de pedidos

Se hace un redireccionamiento a otra página jsp con el método

getRequestDispatcher

A la página jsp se le pasa el arraylist usando para eso el método

setAttribute

La página jsp recupera el arraylist, lo procesa y lo muestra al usuario

La creación de los documentos pdf se realiza con los Servlets:

CrearPdfAdmin.java y CrearPdfDetalladoAdmin.java. Para esto se ha

utilizado la librería Java IText (9) (itext-4.2.1.jar (8)).

Creamos por un lado un objeto de tipo FileOutputStream y por otro de tipo

Document.

Creamos una instancia PdfWriter pasándole los dos objetos.

En el documento, vamos insertando los objetos que nos hagan falta en el

pdf: tablas, encabezados, párrafos etc.


27

Una vez completado el pdf, cerramos el documento.

Para que el navegador muestre el pdf, realizamos en el Servlet una

respuesta de tipo 'application/pdf' y adjuntamos a la respuesta el

documento pdf creado (10).

7.5. Rutas/Quedadas

La web permite planificar rutas de bicicleta y programarlo en el calendario

para una quedada. Los socios verán la ruta que está planificada y se podrán

apuntar a la quedada.

Para diseñar una ruta, hay que logarse con un usuario con permisos de

administrador y entrar en Quedadas/Planificar ruta dentro de Zona Admin.


28

La forma de diseñar la ruta es insertando puntos de la ruta (Waypoints)

uno a uno con el botón „Añadir Waypoint‟.

Para modificar las coordenadas del punto que se quiere insertar, se puede

realizar de dos maneras:

Clicando y arrastrando el marcador rojo del mapa

Escribiendo la dirección en el campo Dirección. Al empezar a escribir

la dirección, se abre un desplegable, con las direcciones de Google

que coinciden con el texto que se está introduciendo.


29

Las coordenadas del punto se van actualizando al momento. Una vez que el

punto es el deseado se pulsa Añadir Waypoint.

Los Wapoints insertados se irán mostrando debajo. El límite de Waypoints

por ruta es de 25. Una vez insertados todos los Waypoints de la ruta se

pulsa el botón Procesar Ruta:

Se abrirá una página nueva mostrando la ruta calculada, una altimetría

aproximada y la distancia de la ruta:


30

Si la ruta es la correcta, se podrán insertar los detalles en el formulario y

almacenarlo en la Base de Datos.


31

Los socios podrán ver en una lista las rutas que están programadas y

habilitadas (Dentro de Zona Socios, en Quedadas/Próximas kedadas)

Podrán pulsar en el botón „Ver detalle‟ de la ruta que estén interesados.

Al pulsar el botón, se abrirá una página nueva en la que se mostrarán los

detalles de la ruta y una Lista de socios que se han apuntado a la quedada.


32

Si el socio quiere añadirse en la lista, podrá hacerlo pulsando el botón „Me

Apunto!!!‟. Si ya está apuntado y no puede ir, podrá borrarse de la lista

pulsando el botón „Al final no puedo ir…‟

La programación de esta parte de la Web se ha realizado con la ayuda de

las APIs de Google Maps (11).

Para poder usar las APIs de Google, hace falta tener una clave (API Key)

asociada a una cuenta de Google y habilitar las APIs que se vayan a utilizar

en la siguiente página:


33

https://console.developers.google.com/apis

Una vez habilitadas las APIs, se pueden utilizar añadiendo en el HEAD del

código HTML el tag script de la siguiente forma:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=LIBRARIES">

</script>

Sustituyendo YOUR_API_KEY por la clave asociada a la cuenta Google y

LIBRARIES por las APIs que se vayan a utilizar.

A parte hemos creado dos ficheros JavaScript (googlemaps.js y

googlemapscalculo.js) basándonos en los ejemplos que ofrece google en su

página:

https://developers.google.com/maps/documentation/javascript/examples/

Los servicios de Google utilizados y que podemos reseñar son:

Geocoder (12): Para convertir en coordenadas geográficas la

dirección que se le pasa por el campo de texto.

Direction Service (13): Para procesar la ruta, pasándole el listado de

Waypoints y calcular la distancia.

ElevationService (14): Para el cálculo de la altimetría.

Una dificultad que hemos encontrado ha sido en pasar el listado de

Waypoints insertados, al código javascript para que el servicio de Google

los procese y dibuje en el mapa la ruta. Ya que, javascript se ejecuta en el

lado cliente mientras que jsp en el lado del servidor.

https://console.developers.google.com/apis


34

Lo que hemos hecho es almacenar los Waypoint que el usuario inserta en

un Arraylist y ese Arraylist almacenarlo en la sesión:

Cuando el usuario pulsa el botón de „Procesar ruta‟, se llama al jsp:

rutacalculada.jsp. En esta página recuperamos la lista de Waypoints de la

sesión y los almacenamos en un Arraylist.

Para que los waypoints los lea el código de javascript, los almacenamos en

campos de formulario ocultos:

Latitud y Longitud inicial y final:

Array de Latitudes intermedias:


35

Array de Longitudes intermedias:


36

En el código JavaScript (googlemapscalculo.js) recuperamos los valores de

los Waypoints teniendo en cuenta los ids que hemos puesto a los campos

ocultos:

Y de esta forma ya podemos usar el servicio directionsService.route de

Google para calcular la ruta.


37

8. Referencias

1. Bootstrap. [En línea] http://getbootstrap.com/.

2. Foundation, jQuery. jQuery Datepicker. [En línea] https://jqueryui.com/datepicker/.

3. Lacasa, Ruben. Datepicker Jquery en Castellano. [En línea] 20 de 07 de 2012.

https://rubenlacasa.es/2012/07/20/datepicker-jquery-en-castellano/.

4. w3schools.com. Bootstrap Carousel Plugin. [En línea]

https://www.w3schools.com/bootstrap/bootstrap_carousel.asp.

5. —. Bootstrap Modal Plugin. [En línea]

https://www.w3schools.com/bootstrap/bootstrap_modal.asp.

6. k4ch0. Generar una cadena alfanumérica aleatoria en java. [En línea] 21 de Jul de 2009.

http://k4ch0.org/generar-una-cadena-alfanumerica-aleatoria-en-java/.

7. Correo de confirmacion Java. [En línea] 8 de Junio de 2011.

http://geekjavamas.blogspot.com.es/2011/06/correo-de-confirmacion-java.html.

8. mvnrepository. [En línea] https://mvnrepository.com/.

9. Jenkov, Jakob. Java PDF Generation with IText. [En línea] 24 de Mayo de 2014.

http://tutorials.jenkov.com/java-itext/index.html.

10. Eriksson, Deron. AVAJAVA Web Tutorials. [En línea]

http://www.avajava.com/tutorials/lessons/how-do-i-serve-up-a-pdf-from-a-servlet.html.

11. Google. Google Maps JavaScript API. [En línea]

https://developers.google.com/maps/documentation/javascript/.

12. —. Google Maps Geocoding API. [En línea]

https://developers.google.com/maps/documentation/geocoding/intro?hl=es-419.

13. —. Directions Service. [En línea]

https://developers.google.com/maps/documentation/javascript/directions?hl=es.

14. —. Elevation Service. [En línea]

https://developers.google.com/maps/documentation/javascript/elevation?hl=Es.

NOTA: Tengo permiso por parte de la junta directiva del Club Triatlón Tridinos para utilizar el logo

e imágenes que se han utilizado en el proyecto.

proyecto java ee - cice.es · pdf filepara la elaboración de la web se ha creado un...

Documents