Proyecto Java EE - Almacén Virtual

Transcripción

1 Proyecto Java EE - Almacén Virtual Jorge de Andrés Palomo 25 de mayo de

2 Índice 1. Introducción 2 2. Punto de Partida Estudio del Cliente Necesidades y objetivos Modelo. Base de datos Vista Interfaz Usuario Interfaz Administrador Controlador Tecnologías utilizadas Retos de programación enfrentados Gestión del perl del Administrador y los Usuarios en una misma aplicación Generar un archivo.pdf con el material retirado por el usuario Subir un archivo de imagen al servidor[4] Crear un ltro de búsqueda para mostrar material con JavaScript y JQuery Conexión con la BD evitando posibles SQL-Injection. Prepared Statements Noticaciones de retraso en la devolución de material Cerrado automático de paginas tras acción en servlet Gestión del Histórico de material con JSON

3 1. Introducción Esta es la memoria del proyecto AlmacenGradienteVertical. Este trabajo se engloba dentro del Curso ocial de programación en Java EE que organiza la escuela profesional de nuevas tecnologías CICE. El objetivo es la creación de un gestor virtual del almacén del grupo de montaña universitario Gradiente Vertical. 2. Punto de Partida Antes de diseñar y empezar a crear el código de nuestra aplicación, es esencial estudiar desde donde partimos, cuales son los requisitos del cliente y que metas queremos conseguir Estudio del Cliente El grupo de montaña Gradiente Vertical es una asociación deportiva universitaria. El objetivo de la agrupación es organizar y fomentar la escalada y el alpinismo entre los alumnos de la facultad de cc. Físicas de la Universidad Complutense. Para eso se organizan actividades y diversos talleres sobre temas relaccionados con la montaña. Para cumplir con este objetivo el club dispone de un almacen de material. Esta equipación va desde elementos de alpinismo hasta revistas y libros. Cuando se creó el club, no contabamos con muchos artículos y el número de usuarios era reducido, por lo que la gestión de los prestamos era muy sencilla. Pero recientemente, y gracias a la nanciación que hemos recibido de la UCM, se ha podido adquirir nuevo material. Esto ha provocado que el método que habíamos estado utilizando (papel y lápiz) quedase totalmente inservible. El club necesita una forma novedosa y eciente de llevar a cabo esa gestion Necesidades y objetivos El objetivo principal de esta aplicación es la de crear un portal web en el que los usuarios puedan seleccionar los diferentes articulos que desean retirar, ver una descripción detallada de ese material y tras nalizar la selección, que puedan imprimir un documento que reeje esos elementos seleccionados. Este documento será imprescindible entregarlo al responsable del almacén antes de retirar el material físicamente. Cuando practicas escalada es vital conocer el desgaste que ha sufrido el material en el que conas tu seguridad. Por eso dentro de la descripción del material tando el usuario como el administrador deben poder escribir comentarios sobre el estado del articulo o incidencias que hayan ocurrido con él. Se crea asi una cha tecnica del articulo en la que queda reejado toda su vida. Evidentemente cuanto más reciente sea el comentario más importancia tendrá por lo que se ordenaran de más a menos nuevo 2

4 Figura 1: Diagrama de nuestra aplicación. Arriba: navegación de usuario. Abajo: 3 navegación del administrador

5 Cuando el cliente consulte la lista de material debe poder ver no solo los disponibles, sino también los no disponibles. De aquellos artículos no disponibles debe reejarse hasta cuando esta reservado. Sin embargo he decidido que los usuarios no puedan ver quien lo tiene, y que sea solo el administrador quien pueda saberlo. En mi opinión esto evitará posibles tensiones entre usuarios y cualquier intento de no recurrir a la aplicación para retirar el material. Un elemento que considero de gran importancia es que el usuario pueda consultar que artículos tiene él en préstamo. Esto sera de gran ayuda a la hora de la devolución de artículos pequeños como mapas o brújulas que pueden quedar olvidados si no le recordamos al usuario que los tiene. Por supuesto se tiene que ofrecer al usuario la oportunidad de modicar sus datos personales vinculados con su cuenta. El sistema de préstamo del club se rige por un conjunto de normas. Esto se traduce en que nuestra aplicación debe ofrecer al administrador la oportunidad de penalizar a los usuarios ante retrasos en la devolución o otras causas. He decidido que la penalización sea siempre manual y que no se produzcan penalizaciones automáticas por parte del sistema. Sin embargo el sistema si que avisará al administrador de los retrasos que se producen en las devoluciones. Cuando un usuario sea penalizado por el administrador, el sistema le impedirá el acceso al portal web. En lo referente al administrador, destacar que tiene que ser capaz de hacer una gestión tanto del material como de los usuarios, pudiendo eliminar, modi- car y en el caso del material, añadir nuevos elementos (los usuarios se unirán a la aplicación ellos solos a través del registro). Ademas el administrador debe disponer de un forma de conocer todos los movimientos de material que se ha producido a lo largo del tiempo. Esto, que denominaré Histórico, debe poder ltrarse por usuario, articulo, fecha salida y fecha en la que fue devuelto el material. Esto permitirá conocer al detalle cualquier tipo de tendencia en los prestamos (si un articulo se repite mucho se puede plantear el comprar más) y también permitirá saber quien tenia que articulo en cada momento (muy útil en caso de quejas o problemas). Podemos ver un organigrama en la Figura 1, de lo que será la navegación en nuestra aplicación para un usuario. 3. Modelo. Base de datos. El modelo de nuestra aplicación es el núcleo de nuestra aplicación. Consta de dos partes, la base de datos y las clases modelo en nuestra aplicación Java. La base de datos la he creado con MySQL, su estructura se puede apreciar en la Figura 2. En lo referente a las clases que representan a los modelos he creado las siguientes clases: Articulo Usuario 4

6 Figura 2: Diseño de nuestra base de datos Categoría Comentario Histórico NoticaciónRetraso Todas las clases tienen el mismo tipo de atributos (vatiables de clase) que la tabla de la BD a la que representan. Y por supuesto respetan todos los principios de la encapsulación (atributos establecidos como privados junto con un constructor, getters y setters). Como se puede observar he creado un tipo de modelo que no existe en la base de datos, la noticación de retraso. Lo he hecho de esta manera debido al carácter excepcional de las noticaciones, a que no es necesario llevar un registro de ellas y a que se construyen con información de otros modelos. 1 package e s. c i c e. modelos ; 5

7 2 public c l a s s N o t i f i c a c i o n R e t r a s o { 3 4 private Usuario u s u a r i o ; 5 private A r t i c u l o a r t i c u l o ; 6 private S t r i n g fechadevolucion ; 7 8 public N o t i f i c a c i o n R e t r a s o ( Usuario usuario, A r t i c u l o a r t i c u l o, S t r i n g fechadevolucion ) { 9 10 t h i s. u s u a r i o = u s u a r i o ; 11 t h i s. a r t i c u l o = a r t i c u l o ; 12 t h i s. fechadevolucion = fechadevolucion ; } // G e t t e r s y S e t t e r s } Listado de código 1: Clase NoticaciónRetraso.java 4. Vista El siguiente punto en el diseño de nuestra aplicación es la vista o la interfaz gráca. He diferenciado a la hora de explicar las interfaces entre la que vería un usuario normal y la que vería el administrador. Aun así hay elementos que son comunes a ambos. Como por ejemplo el encabezado, el pie de pagina (Figura 3) y el login (Figura 4). Figura 3: Encabezado y pie de pagina. 6

8 Figura 4: Login de la aplicación Interfaz Usuario El usuario accederá a la aplicación a través del login. Como se puede apreciar en la parte inferior del mismo se ofrece la opción al cliente de registrarse si todavía no dispone de una cuenta en la aplicación. Haciendo click en el enlace se le redirigirá al formulario de registro (Figura 5). En él tendrá que rellenar todos los campos obligatoriamente, repitiendo la contraseña dos veces para comprobar que la ha introducido correctamente. Cuando nalmente el usuario decide enviar los datos, se crea un nuevo usuario en la base de datos y se produce un login automático permitiendo el acceso a la aplicación. Una vez que entra se encontrará en el Home. En el se puede leer una bienvenida así como ver un vídeo corporativo del club. Además, hay un enlace a las reglas que rigen el préstamo del material perteneciente al club. Para el usuario la parte fundamental de la aplicación es la que gestiona los artículos de material. Es obvio que se encuentre en la sección llamada Material. Si el usuario va a esta sección encontrará una lista de todo el material (Figura 6). En esta lista se marca en azul el que esta disponible y en rojo el que no lo esta. Además para el material que no este disponible aparece la fecha en la que está previsto que se devuelva el material. Esta lista se puede ltrar por las diferentes categorías que engloban a los artículos o por una búsqueda por nombre (Figura 7) Pero es la retirada de artículos del almacén la razón de ser de la aplicación. Esto se consigue gracias a los símbolos de carrito debajo de cada articulo. Cuando el articulo esta disponible, este carrito estará habilitado para hacer click en él. Si se hace click, inmediatamente se añadirá este articulo a la cuenta del usuario y se marcará como no disponible. Cuando el usuario ha terminado de seleccionar todos los artículos que desee deberá imprimir un albarán con la lista de artículos en su cuenta para que el encargado del almacén se los entregue. Esto lo consigue gracias al botón Sacar Material (Figura 7). Un punto importante es dotar al usuario de la capacidad para ver los detalles 7

9 Figura 5: Registro de usuarios. Figura 6: Lista de material. 8

10 Figura 7: Filtros de la lista de material. 9

11 Figura 8: Comentarios sobre un elemento de material. de los diferentes artículos de material. Esto se consigue con las chas técnicas que se despliegan en una pestaña nueva cuando el cliente pincha sobre el nombre del material. Pero como he mencionado anteriormente en la memoria, lo más importante de la cha son los comentarios que los usuarios y el administrador hacen de esos artículos de material (Figura 8). Estos comentarios deben mostrar quien los ha hecho, cuando los ha hecho y el mensaje en si. Por supuesto ordenados de más a menos reciente Interfaz Administrador El administrador de la aplicación accederá a la parte de gestión a través del mismo login desde el que acceden los usuarios. Desde allí se le redirigirá a la sección apropiada. Evidentemente el registro queda totalmente deshabilitado para dar de alta a nuevos administradores (podría ser muy interesante en una nueva versión de la aplicación dar la opción al administrador de crear subadministradores que puedan gestionar pero con menor rango de decisión) Para el administrador la primera diferencia evidente con respecto a la vista del cliente son las noticaciones de retraso en la devolución del material (Figura 9). Estas se muestran en el Home nada mas acceder a la aplicación el administrador y especican el usuario que ha cometido el retraso, que articulo es y cuando debería haberlo devuelto. Haciendo click en el nombre del usuario podremos ir hasta la cha del usuario para penalizarlo por ese retraso. La pe- 10

12 Figura 9: Noticación de retraso en la devolución. nalización del usuario no se produce de forma automática a propósito. No sería complicado hacer que el sistema a la vez que genera la noticación cambiara el campo penalizado del usuario a true. He decidido que esto no sea así debido a la gran diferencia de casos que se pueden presentar. Dejo en manos del administrador la opción de penalizar o no. En el apartado de material la lista es idéntica a la que se muestra a los usuarios. Lo único que cambia es los ltros que se pueden aplicar para mostrar resultados (Figura 10). Al administrador le he sumado la opción de que pueda ltrar entre disponibles y no disponibles. No he habilitado este ltro para los usuarios ya que en mi opinión algunos usuarios podrían sacar material sin de verdad necesitarlo, solo por el hecho de estar disponible. Esto facilitaría el acaparamiento de artículos por algún cliente en concreto impidiendo el normal funcionamiento del almacén. Ademas se ha eliminado el botón de sacar material ya que al administrador no puede retirar material. Lo que si he añadido es la opción de crear nuevos elementos en la lista de material. Haciendo click en el botón nos redirige a una pagina (Figura 11) donde rellenando todos los campos del formulario (entre los que se encuentra la subida de una imagen al servidor) podremos sumar nuevos artículos al almacén. Dentro de la aplicación si pinchamos en el nombre de algún articulo se nos abre, en una nueva pestaña, la cha técnica de ese articulo (Figura 12). Esta cha variará dependiendo si el articulo esta en préstamo o no. Si no lo esta, se mostrará la descripción y la opción de eliminar el articulo estará habilitada. Si algún usuario lo tiene, se mostraran los detalles de ese préstamo y no se podrá eliminar el articulo (solo un articulo que tengo físicamente en el almacén puede ser retirado de la circulación. De otra forma daría lugar a perdidas). En esa cha técnica existe la opción de comentar o de escribir alguna incidencia que haya ocurrido con ese material. Esto se produce de forma análoga a los usuarios. Al igual que al hacer click sobre el nombre del articulo se abre su correspondiente cha técnica, de igual forma cuando hacemos click en el nombre de un usuario se abrirá una cha análoga (Figura 13) con la información de este cliente. Pero a diferencia de las chas de material, solo el administrador podrá consultarlas. En este espacio es donde se producirán las devoluciones de material. Pudiendo hacerlo de uno en uno (pinchando en la echa verde debajo del articulo en cuestión) o devolver todo el material en bloque (pinchando en Devolver todos). La decisión de alojar las devoluciones en los diferentes perles de 11

13 Figura 10: Filtros de material para el administrador Figura 11: Añadir material. 12

14 Figura 12: Ficha del material. Arriba en prestamo y Abajo cuando está disponible. 13

15 Figura 13: Detalle usuario. los usuarios se debe al hecho de que cuando se produce la devolución, se produce físicamente en el almacén. Para el administrador es mucho más sencillo buscar al usuario que esta realizando la devolución y ver ahí el bloque de artículos del que dispone, en vez de tener que buscar articulo por articulo. Por supuesto se da la posibilidad de eliminar el usuario. Pero la opción más importante es la de poder penalizarlo. Esto se puede hacer de dos formas diferentes. Directamente desde la lista de usuarios, gracias a los botones que existen debajo de cada nombre. O desde la cha individual del usuario. Penalizar a un usuario supondrá que ese cliente debido al incumplimiento de las normas no pueda acceder a la aplicación. Esto durará hasta que de igual manera que se penalizó (desde los botones de la lista de usuarios o en la cha) el administrador decida despenalizarlo. Finalmente el administrador tiene la opción de consultar todas las transacciones que se han producido en la aplicación. Esto lo puede hacer en la sección Histórico donde se muestran en formato de tabla todos esos movimientos (Figura 14). Ademas se ofrece al administrador la opción de ltrar todos esos resultados ya que en esta fase de prueba los registros no son mucho pero en pocas semanas pueden ser muy numerosos. Se podrá buscar por cualquier campo de la tabla. 14

16 5. Controlador Figura 14: Historico de transacciones de material Tecnologías utilizadas Para la realización de este proyecto he utilizado las siguientes tecnologías: Html Css JavaScript JSON Java EE MySql La principal decisión a la hora de elegir las tecnologías para el proyecto ha sido la de si utilizar alguno de los frameworks como Struts, Hibernate,... Al nal he decidido no incluirlos para poder tener un control mas fuerte sobre las consultas a la base de datos y los objetos que de ellas se crean. 15

17 5.2. Retos de programación enfrentados Durante el desarrollo de la aplicación me han surgido algunos desafíos, tanto a nivel de programación como de organización del código. A continuación los listo y explico como los he resuelto Gestión del perl del Administrador y los Usuarios en una misma aplicación. En esta aplicación he juntado la parte destinada al usuario junto con la parte destinada al administrador. Para ello en la base de datos reservo el primer registro al administrador (id = 1). Ademas en el Login.java, tras comprobar que el usuario existe y que no esta penalizado (obviamente el administrador cumplirá ambos requisitos), el sistema comprobará si es el usuario con id = 1. De cumplirse la condición, se le redigirá a las paginas creadas para la gestión de la aplicación. Para que la aplicación recuerde al usuario que esta utilizando la aplicación se le da de alta en los atributos de Session. Esto se puede aprovechar para evitar que un usuario no autorizado o un intruso, entre en la parte de la gestión de la aplicación. Creo por lo tanto un archivo.jsp que incluiré en todas las paginas de administrador con el siguiente código: 1 Usuario c u r r e n t U s e r = ( Usuario ) s e s s i o n. g e t A t t r i b u t e (" currentuser " ) ; 2 3 i f ( c u r r e n t U s e r == null! ( c u r r e n t U s e r. g e t I d ( ) ==1)) { 4 5 r e s p o n s e. s e n d R e d i r e c t ( "../ index. html " ) ; 6 7 } Listado de código 2: Seguridad Administrador En las paginas destinadas al usuario tambien incluyo una comprobación de seguridad pero comprobando solo que el usuario no es nulo, para evitar intrusiones Generar un archivo.pdf con el material retirado por el usuario. Cuando el usuario ha terminado de seleccionar todos los artículos que desea retirar debe imprimir un albarán para presentarlo al encargado del almacén y poder así recoger físicamente el material. Para ello nuestra aplicación debe poder generar un chero.pdf que el usuario pueda imprimir o descargar. Todo este proceso lo realiza el servlet ImprimirAlbaran.java. Pero, ¾como es el proceso de crear un pdf?. Para generar un chero pdf debemos utilizar la librería itext[6]. Con ella conseguiremos crear documentos como en el siguiente ejemplo[9, 5]: 16

18 1 public c l a s s HelloWorldExample { 2 3 public s t a t i c void main ( S t r i n g [ ] a r g s ) { 4 5 Document document = new Document ( ) ; 6 7 try { 8 9 PdfWriter. g e t I n s t a n c e ( document, 10 new FileOutputStream ( " HelloWorld. pdf " ) ) ; document. open ( ) ; document. add (new Paragraph ( " A Hello World PDF document. " ) ) ; document. c l o s e ( ) ; } catch ( DocumentException e ) { e. p r i n t S t a c k T r a c e ( ) ; } catch ( FileNotFoundException e ) { e. p r i n t S t a c k T r a c e ( ) ; } } } Listado de código 3: Creacion pdf en Java El proceso es muy similar al I/O estándar de Java. Primero creamos un objeto tipo Document. Lo abrimos con document.open(), y ya podemos añadir contenido a dicho documento. Y para nalizar cerramos el documento con document.close(), siendo en este momento cuando se vuelca el contenido en el documento (no es necesario hacer un.flush() como en I/O). En el ejemplo anterior hemos utilizado un OutputStream del tipo FileOutputStream, lo que nos genera un archivo pdf en la carpeta de la aplicación. Pero podemos especicar cualquier tipo de OutputStream. Para nuestra aplicación web utilizaremos un ServletOutputStream[11], el cual obtendremos del objeto HttpServletResponse. Nos queda así, el servlet: 1 protected void s e r v i c e ( HttpServletRequest req, HttpServletResponse r e s p ) throws S e r v l e t E x c e p t i o n, IOException { 2 3 printpdf ( req, r e s p ) ; 4 5 } Listado de código 4: Servlet creacion pdf 17

19 Y la función que crea el pdf: 1 public void printpdf ( HttpServletRequest req, HttpServletResponse r e s p ) { 2 3 r e s p. setcontenttype ( " application / pdf " ) ; 4 5 try{ 6 7 Document document = new Document ( ) ; 8 9 PdfWriter. g e t I n s t a n c e ( document, r e s p. getoutputstream ( ) ) ; document. open ( ) ; document. add (new Paragraph ( " Hello pdf World!" ) ) ; document. c l o s e ( ) ; } catch ( DocumentException IOException ex ) { e. p r i n t S t a c k T r a c e ( ) ; } 22 } Listado de código 5: printpdf El proceso es muy parecido al primer ejemplo. Simplemente tenemos que especicar el nuevo OutputStream y ademas tenemos que indicar el tipo de contenido que tendrá el response: resp.setcontenttype("application/pdf"). Por supuesto gracias a esta librería se pueden añadir imágenes, establecer diferentes tipografías, crear tablas, Subir un archivo de imagen al servidor[4]. Cuando el Administrador de la aplicación quiere dar de alta un nuevo elemento de material uno de los campos que se le pide es una fotografía de dicho articulo. El objetivo no es otro que permitir a los usuarios ver los detalles y decidir si lo sacan o no. Para poder subir cheros al servidor atraves de una pagina JSP necesitaremos las siguientes librerías: apache-commons-fileupload[1] y apache-commons-io[2]. Descargándolas y añadiéndolas a nuestro proyecto ya podremos crear el código. Lo primero que tendremos que hacer es crear un formulario en una pagina.html o.jsp. En mi caso lo he creado en la pagina addmaterial.jsp dentro de la carpeta ADMIN. En esta pagina deberemos crear un formulario que contenga un input tipo file y que sea del tipo enctype='multipart/form-data', como: <form action=".. / C r e a r A r t i c u l o " data " method="post"> enctype=" multipart /form <label>imagen (300 x 300 px ) :</ label> 18

20 <input type=" f i l e " name="imagen" > </form> Listado de código 6: formulario html para subir archivos Un inconveniente de utilizar estas librerías es que en el lado del servidor la llamada a request,getparameter(); siempre devuelve null. Por lo que no podemos recoger los datos insertados en el formulario de la forma habitual. Para ello tendremos que emplear las funciones de las librerías apache. Así pues, en el servlet llamado CrearArticulo, y dentro de un método sobrescrito Post, escribimos el siguiente código: 1 try { 2 3 F i l e I t e m F a c t o r y f a c t o r y = new DiskFileItemFactory ( ) ; 4 S e r v l e t F i l e U p l o a d upload = new S e r v l e t F i l e U p l o a d ( f a c t o r y ) ; 5 6 L i s t items = upload. parserequest ( req ) ; 7 8 for ( Object item : items ) { 9 10 F i l e I t e m uploaded = ( F i l e I t e m ) item ; i f ( uploaded. isformfield ( ) ) { // Recogemos l o s datos s i e s un campo de f o r m u l a r i o normal // podemos a c c e d e r a l name 17 // S t r i n g key = uploaded. getfieldname ( ) ; // y a l v a l o r i n t r o d u c i d o por e l u s u a r i o 20 // S t r i n g v a l o r = uploaded. g e t S t r i n g ( ) ; } e l s e { t i t u l o I m a g e n = uploaded. getname ( ) ; F i l e f i c h e r o = new F i l e ( getpathimgfolder ( ), t i t u l o I m a g e n ) ; uploaded. w r i t e ( f i c h e r o ) ; } 31 } } catch ( Exception ex ) { ex. p r i n t S t a c k T r a c e ( ) ; } // Ya podemos añadir e l a r t i c u l o a l a base de datos. Listado de código 7: Codigo en servlet para subir archivo 19

21 Del código anterior, destacar el método getpathimgfolder() en la linea 26. Cuando llegamos al campo del formulario que es una imagen debemos guardarla, para ello creamos un objeto tipo File al que debemos pasarle la ruta en la que se guarda la imagen. Con estas librerías, y hasta donde yo he podido ver, el escribir una ruta relativa es complicado. Por eso he creado la función getpathimgfolder(): 1 private S t r i n g getpathimgfolder ( ) { 2 3 // Obtengo l a ruta d e l s e r v i d o r 4 S e r v l e t C o n t e x t s e r v l e t C o n t e x t = g e t S e r v l e t C o n t e x t ( ) ; 5 S t r i n g contextpath = s e r v l e t C o n t e x t. getrealpath ("/" ) ; 6 7 // Trato esa ruta 8 contextpath = contextpath. r e p l a c e ( " \\ ", "/" ) ; 9 contextpath = contextpath. r e p l a c e ( "/ build ", "" ) ; // Le añado l a c a r p e t a de almacenamiento 12 S t r i n g path = contextpath + "/ IMG / material " ; return path ; 15 } Listado de código 8: metodo getpathimgfolder() Java obtiene por mi la ruta absoluta en la que se almacena el servidor, y yo solo la tengo que tratar un poco y añadirle la ruta relativa de la carpeta en la que quiero almacenar las imágenes. Creo así una solución intermedia entre solo introducir la ruta relativa y escribir la ruta absoluta (que seria del todo ineciente) Crear un ltro de búsqueda para mostrar material con JavaScript y JQuery. En la parte en la que se lista el material se ofrece al usuario la posibilidad de que realice una busqueda rapida para ltrar de entre todos los resultados. Primero deberemos crear el codigo Html que muestre los resultados y el campo de búsqueda. <div c l a s s=" columna columna_70"> < a r t i c l e class=" d i s p o n i b l e "> <h2><a href="#" t a r g e t="_blank">nombre d e l A r t i c u l o 1</a></h2> <a href="#" t a r g e t="_blank">s a c a r</a> </ a r t i c l e> < a r t i c l e class=" d i s p o n i b l e "> <h2><a href="#" t a r g e t="_blank">nombre d e l A r t i c u l o 2</a></h2> 20

22 <a href="#" t a r g e t="_blank">s a c a r</a> </ a r t i c l e>... </ div> <div c l a s s=" columna columna_30"> <form> </form> <label>clave de busqueda :</ label> <input class=" busqueda " type=" t e x t " p l a c e h o l d e r=" Introduce l a busqueda "> </ div> Listado de código 9: HTML para listar material Una vez que tenemos nuestro codigo Html con todos los elementos (en la aplicación realmente se consulta a la BD y del resultado se lista) empezamos a crear el codigo para la busqueda. Para ello utilizaremos JavaScript y la libreria jquery[7]. Para comprobar el texto introducido en el input podemos utilizar el evento change(). Este evento se llama cada vez que el input se modica, pero solo cuando sales de ese input. Ademas no funciona de forma que sea un ltro letra por letra. Para todo esto tenemos que usar tambien el evento keyup, el cual se llama despues que el usuario teclee una letra. $ ( ". busqueda " ). change ( f u n c t i o n ( ) {... } ). keyup ( f u n c t i o n ( ) { } ) ; // lanza e l evento change de a r r i b a // con cada l e t r a t e c l e a d a $ ( t h i s ). change ( ) ; Listado de código 10: JQuery busqueda De esta forma cuando recibimos un evento keyup llamamos al evento change. Se convierte asi en un bucle que nos permite hacer la busqueda. Con la libreria jquery podemos hacer la busqueda de elementos coincidentes gracias al selector :contains(): 21

23 $ ( ". busqueda "). change ( f u n c t i o n ( ) { var f i l t e r = $ ( t h i s ). val ( ) ; i f ( f i l t e r === "") { } e l s e { } r eturn f a l s e ; }). keyup ( f u n c t i o n ( ) { }) ; $ ( ". columna_70 "). f i n d (" h2 a "). slidedown ( ). parent ( ). parent ( ). slidedown ( ) ; $ ( ". columna_70 "). f i n d (" h2 a : not ( : Contains (" + f i l t e r + ") ) "). parent ( ). parent ( ). slideup ( ) ; $ ( ". columna_70 "). f i n d (" h2 a : Contains (" + f i l t e r + ") "). parent ( ). parent ( ). slidedown ( ) ; $ ( t h i s ). change ( ) ; Listado de código 11: JQuery busqueda El codigo anterior se puede resumir en: busca en todo el bloque columna_70 aquellos enlaces a que estando dentro de un h2 contengan la clave de busqueda. Una vez encontrados, haz que todo el articulo en cuestion (.parent().parent()) suba. Los que no cumplan esta condicion, que desaparezcan. Ademas el codigo contempla la posibilidad de que la clave este vacia, momento en el que mostrara todas las entradas Conexión con la BD evitando posibles SQL-Injection. Prepared Statements. El SQL injection es una técnica por la cual un usuario podría, gracias a los inputs, insertar comandos SQL en nuestra sentencia SQL ya preparada. Esto podría poner en serio riesgo la seguridad de nuestra aplicación. Un ejemplo[10] de lo que podría pasar si no lo incluimos es el siguiente. Tenemos un campo input en un formulario web, y en la parte del servidor simplemente concatenamos lo introducido por el usuario a nuestra sentencia 22

24 SQL preparada. 1 S t r i n g i d U s u a r i o = r e q u e s t. getparameter (" idusuario " ) ; 2 3 S t r i n g s q l = " SELECT * FROM usuarios WHERE id = " + i d U s u a r i o ; Listado de código 12: Codigo al que se le puede inyectar SQL Parece sencillo. ¾Pero que pasa si el usuario introduce en el input 105; DROP TABLE usuarios? Se crearía una sentencia SQL como la siguiente: SELECT FROM u s u a r i o s WHERE id = 105; DROP TABLE u s u a r i o s ; Listado de código 13: SQL tras injection Para evitar esto se utilizan lo que se llaman prepared statements[3]. En ellas en vez de concatenar el texto introducido por el usuario, se sustituye por un signo de interrogación para indicar que lo que hay va a introducirse no debe interpretarse como código SQL. Un ejemplo: 1 S t r i n g i d U s u a r i o = r e q u e s t. getparameter (" idusuario " ) ; 2 S t r i n g nombreusuario = r e q u e s t. getparameter (" nombreusuario " ) ; 3 4 S t r i n g s q l = " SELECT * FROM usuarios WHERE id =? AND nombre =?" ; 5 6 PreparedStatement ps = c o n n e c t i o n. preparestatement ( preparedsql ) ; 7 8 // Asignamos l o s parametros de l a s e n t e n c i a SQL 9 ps. s e t S t r i n g ( 1, i d U s u a r i o ) ; 10 ps. s e t S t r i n g ( 1, nombreusuario ) ; r s = ps. executequery ( ) ; Listado de código 14: Codigo con prepared statement Todo este bloque de código debe ir encerrado en un try/catch ya que puede devolver una excepción del tipo SQLException[8]. Para simplicar todo este proceso lo que he hecho a sido crear en la clase BDManager un conjunto de métodos que realicen esto de forma automática. Para ello deben aceptar como parámetros la sentencia SQL preparada y la lista de argumentos ordenada. 1 public R e s u l t S e t p r e p a r e d E x e c S e l e c t ( S t r i n g preparedsql, S t r i n g... v a r i a b l e s ) { 2 3 R e s u l t S e t r s = null ; 4 5 try { 6 7 PreparedStatement ps = c o n n e c t i o n. preparestatement ( preparedsql ) ; 8 23

25 9 int i = 1 ; for ( S t r i n g v a r i a b l e : v a r i a b l e s ) { ps. s e t S t r i n g ( i, v a r i a b l e ) ; 14 i ++; } r s = ps. executequery ( ) ; } catch ( SQLException ex ) { System. out. p r i n t l n ( " Error en la sentencia SQL ") ; } return r s ; } } Listado de código 15: preparedexecselect De forma muy similar creamos las funciones preparedexecuteupdate y preparedexecute. Ejemplos de su utilización son, en el servlet Login.java 1 BDManager bdmanager = new BDManager ( ) ; 2 3 S t r i n g preparedsql = " SELECT * FROM usuarios WHERE correo =? AND password =?" ; 4 5 R e s u l t S e t r s = bdmanager. p r e p a r e d E x e c S e l e c t ( preparedsql, correo, password ) ; Listado de código 16: Ejemplo en Login.java o en el servlet RegistroUsuario.java 1 BDManager bdmanager = new BDManager ( ) ; 2 3 S t r i n g s q l = " INSERT INTO usuarios ( nombre, apellidos, correo, password, penalizado ) VALUES (?,?,?,?,?) " ; 4 5 bdmanager. preparedexecute ( s q l, nombre, a p e l l i d o s, correo, password, " false " ) ; Listado de código 17: Ejemplo en RegistroUsuario.java Aplicando estos métodos a todas las interacciones con la base de datos en la que le enviamos texto introducido por el usuario, evitaremos cualquier problema. 24

26 Noticaciones de retraso en la devolución de material. Para el administrador es muy útil saber quien se esta retrasando en la devolución del material. Para ello creo las noticaciones. Atacando la BD, en la clase NotificacionesManager.java, con una consulta SQL del tipo: SELECT FROM u s u a r i o _ t i e n e _ a r t i c u l o AS atc INNER JOIN a r t i c u l o s AS a ON atc. i d _ a r t i c u l o = a. id INNER JOIN u s u a r i o s AS u ON atc. id_usuario = u. id WHERE a. d i s p o n i b i l i d a d = ' f a l s e ' " ; Listado de código 18: SQL noticaciones Obtengo los datos de los artículos que están en préstamo así como el usuario que lo tiene. Con la lista de datos que devuelve la consulta puedo comprobar las fechas estipuladas para la devolución y la fecha actual: 1 while ( r e s u l t s e t. next ( ) ) { 2 3 FechasManager fm = new FechasManager ( ) ; 4 5 S t r i n g fechadevolucion = r s. g e t S t r i n g ( " fechadevolucion " ) ; 6 7 Date dateactual = fm. getdateformat ( fm. c a l c u l a r F e c h a A c t u a l ( ) ) ; 8 Date datedevolucion = fm. getdateformat ( fechadevolucion ) ; 9 10 i f ( dateactual. a f t e r ( datedevolucion ) ) { // codigo que c r e a l a n o t i f i c a c i ó n } 15 } Listado de código 19: Comparación fechas Si se ha pasado la fecha de devolución, obtengo los datos del usuario y el articulo, creo la noticación y la añado a la lista para que pueda verla el administrador. No seria complicado ademas cambiar el usuario a la categoría de penalizado, impidiéndole sacar más cosas. Pero he preferido no hacerlo y que sea el administrador quien lo decida Cerrado automático de paginas tras acción en servlet. Cuando realizamos una acción en un servlet de java al terminarla podemos redirigir la aplicación a una nueva (o a la misma) pagina, simplemente con el comando: 25

27 1 r e s p o n s e. s e n d R e d i r e c t ( " home. html " ) ; Listado de código 20: Redirección en servlet Si lo que queremos, sin embargo es que esa pestaña del navegador se cierre, la solución no es tan directa (aunque es igual de sencilla). Lo que haremos sera redirigir la aplicación a la pagina ADMIN/Close.html (esta en la carpeta ADMIN simplemente por comodidad, ya que el administrador es el único que necesitaba cerrar pestañas) donde habremos escrito el siguiente codigo html: <body onload=" c e r r a r ( ) ; "> <script> f u n c t i o n c e r r a r ( ) { } </ script> </body> window. c l o s e ( ) ; Listado de código 21: Close.html Gestión del Histórico de material con JSON En la pagina que muestra al administrador todos los movimientos de material que se han producido (HistoricoAdmin) es fundamental que se puedan hacer consultas en esa lista. Para simplicar el proceso, no hacer numerosas consultas a la BD y probar otras formas de trabajo he decidido emplear JavaScript Y JSON para mostrar los resultados y hacer los ltros. Lo primero que tenemos que hacer es importar la librería JSON a nuestro proyecto. Después tenemos que crear un servlet al que llamaremos listarhistorico.java en el que crearemos un array asociativo JSON de la forma: {" h i s t o r i c o " : [ { " a r t i c u l o " : " Casco P e t l z ", " fechadevolucion ":" : 3 9 : 3 9 ", " u s u a r i o " : " Usuario Prueba ", " f e c h a S a l i d a ":" : 3 8 : 5 2 " },... ] } Listado de código 22: array JSON Este JSON contiene la información de todas las entradas de la tabla Histórico en la BD. Creamos el.html que mostrara los resultados. Esto lo conseguimos creando una lista: 26

28 <ul class=" l i s t _ h i s t o r i c o "> < l i class=" l i s t _ h e a d e r ">A r t i c u l o</ l i> < l i class=" l i s t _ h e a d e r ">Usuario</ l i> < l i class=" l i s t _ h e a d e r ">Fecha s a l i d a</ l i> < l i class=" l i s t _ h e a d e r ">Fecha Devolucion</ l i> </ ul> < l i class=" l i s t _ d a t a ">...</ l i> < l i class=" l i s t _ d a t a ">...</ l i> < l i class=" l i s t _ d a t a ">...</ l i> < l i class=" l i s t _ d a t a ">...</ l i>... Listado de código 23: HTML historico Una vez que tenemos creada el HTML podemos centrarnos en listar los elementos. Para ello en el código JavaScript asociado creamos la siguiente función que sera llamada nada mas cargarse la pagina: f u n c t i o n l o a d H i s t o r i c o ( ) { } $ ( ". l i s t _ h i s t o r i c o " ). html ( " " ) ; addlistheader ( ) ; $. getjson ( u r l L i s t a r H i s t o r i c o, f u n c t i o n ( j s o n ) { } ) ; var datos = JSON. s t r i n g i f y ( j s o n ) ; l o c a l S t o r a g e. setitem (" datos ", datos ) ; $. each ( j s o n. h i s t o r i c o, f u n c t i o n ( i, item ) { } ) ; addlistdata ( item ) ; Listado de código 24: loadhistorico JavaScript 27

29 En este método primero eliminamos cualquier elemento existente en esa lista. Cargamos el encabezado de la lista. Y después vamos cargando los diferentes elementos del JSON. Esto se consigue gracias a los métodos addlistheader() y addlistdata(item respectivamente, en los que gracias al método.append() vamos añadiendo nuevos elementos al.html. Es muy importante destacar el punto en el que añadimos el json al local storage. Para eso hemos tenido que convertirlo a un String con la función JSON.stringify(). Esto es lo que nos permitirá ahorrar consultas a la BD cuando ltremos la información ya que podremos hacer la consulta directamente al json ya almacenado en local storage. Para ello tendremos que convertir el string almacenado de nuevo al formato JSON. Esto lo conseguimos de la forma: var datoslocal = JSON. parse ( l o c a l S t o r a g e. getitem (" datos " ) ) Para llevar a cabo las consultas creo un formulario en html de la forma: <form> <label>palabra c l a v e :</ label> <input type=" t e x t " name=" c l a v e " id=" clavebusqueda "> <label>campo de busqueda :</ label> <select id="campobusqueda"> <option>a r t i c u l o</ option> <option>usuario</ option> <option>fecha S a l i d a</ option> <option>fecha Devolucion</ option> </ select> </form> <div id=" search ">Buscar</ div> Listado de código 25: formulario busqueda historico Seguidamente en JavaScript creo el siguiente evento al hacer click en Buscar: $("# search "). on (" c l i c k ", f u n c t i o n ( ) { // Recogemos o p c i o n e s s e l e c c i o n a d a s por u s u a r i o var campobusqueda = $('#campobusqueda ' ). f i n d ( " : s e l e c t e d "). t e x t ( ) ; var clavebusqueda = $("#clavebusqueda "). val ( ) ; // Vaciamos l a t a b l a de h i s t o r i c o $ ( ". l i s t _ h i s t o r i c o "). html ( "") ; 28

30 // Creamos l o s header addlistheader ( ) ; // Recuperamos e l JSON var datoslocal = JSON. parse ( l o c a l S t o r a g e. getitem (" datos ") ) ; // Lo recorremos $. each ( datoslocal. h i s t o r i c o, f u n c t i o n ( i, item ) { i f ( campobusqueda==="a r t i c u l o ") { var a r t i c u l o = item. a r t i c u l o ; i f ( a r t i c u l o. indexof ( clavebusqueda ) >= 0) { addlistdata ( item ) ; } }... } }) ; Listado de código 26: Busqueda historico JavaScript En este código solo añadiremos el item a la lista si contiene el substring introducido por el usuario (articulo.indexof(clavebusqueda) >= 0). De igual manera procederemos cuando campobusqueda sea Usuario, Fecha Salida o Fecha Devolución. SOlo que en estos casos lo introducido por el usuario lo compararemos con item.usuario, item.fechasalida o item.fechadevolución respectivamente Referencias [1] Apache-Commons. apache-commons-leupload api. [2] Apache-Commons. apache-commons-io api. [3] Enrique Blasco Blanquer. Apuntes programación en Java. CICE, [4] ChuWiki.org. File upload con jsp. [5] erifetim. Java and pdf - tutorials [e]. Youtube videos. 29

31 [6] itext Software Corp. itext api. [7] jquery Foundation. jquery api. [8] Herbert Schildt. Java 8: A beginner's guide. Oracle Press - Anaya Multimedia, [9] tutorials.jenkov.com (Jakob Jenkov). Java pdf generation with itext. [10] w3schools.com. Sql injection. (SQL Tutorial). [11] what-when how.com. Creating a pdf from a servlet (itext 5). 30