Portal web de gestión de un ayuntamiento

1 Proyecto Final de Carrera Portal Web de Gestión de un Ayuntamiento Autor: David Corbín Cortés Director: Félix Buendía García 2 3 INDICE DEL CONTENIDO 1. Introducción.........................................................6 1.1. OBJETIVOS ...........................................................................................................................6 1.2. MOTIVACIÓN........................................................................................................................6 1.3. ESTRUCTURA........................................................................................................................7 2. Especificación de Requisitos...............................9 2.1. INTRODUCCIÓN.....................................................................................................................9 2.1.1. Propósito.........................................................................................................................9 2.1.2. Ámbito.............................................................................................................................9 2.1.3. Definiciones, siglas y abreviaturas...................................................................................9 2.1.4. Referencias....................................................................................................................11 2.1.5. Visión Global................................................................................................................11 2.2. DESCRIPCIÓN GENERAL.......................................................................................................11 2.2.1. Perspectiva de producto.................................................................................................11 2.2.2. Funciones del producto..................................................................................................12 2.2.3. Características del usuario............................................................................................13 2.2.4. Restricciones.................................................................................................................13 2.2.5. Supuestos y dependencias..............................................................................................13 2.3. REQUISITOS ESPECÍFICOS.....................................................................................................13 2.3.1. Requisitos de interfaces externas....................................................................................13 2.3.2. Requisitos funcionales...................................................................................................14 2.3.3. Rendimiento y atributos.................................................................................................16 3. Análisis..............................................................17 3.1. CASOS DE USO. ...................................................................................................................17 3.2. DIAGRAMA DE CLASES. .......................................................................................................18 3.3. DIAGRAMAS DE SECUENCIA.................................................................................................20 4. Diseño................................................................26 4.1. INTERFAZ DE USUARIO........................................................................................................27 4.1.1. Diagramas de navegabilidad..........................................................................................29 4.1.1.1. Usuario invitado.......................................................................................................29 4.1.1.2. Usuario Registrado...................................................................................................29 4.1.1.3. Usuario Administrador..............................................................................................30 4.2. NIVEL LÓGICO O DE NEGOCIO. .............................................................................................31 4.3. NIVEL DE PERSISTENCIA DE DATOS. .....................................................................................32 4.3.1. Diseño entidad relación.................................................................................................33 5. Implementación.................................................34 5.1. TECNOLOGÍAS.....................................................................................................................34 5.2. HERRAMIENTAS..................................................................................................................35 5.3. DETALLES DE LA IMPLEMENTACIÓN.....................................................................................36 5.3.1. Introducción..................................................................................................................36 5.3.2. Implementación de las funcionalidades..........................................................................36 5.3.3. Uso de código externo....................................................................................................45 5.3.4. Implementación de la Interfaz gráfica............................................................................46 5.3.5. Implementación de la gestión de datos...........................................................................47 6. Evaluación y pruebas.........................................49 6.1. PRUEBAS ............................................................................................................................49 6.2. ANÁLISIS DE LOS RESULTADOS............................................................................................56 4 7. Conclusiones. ....................................................57 7.1. VALORACIÓN PERSONAL .....................................................................................................57 7.2. FUTURAS AMPLIACIONES O MEJORAS...................................................................................58 8. Bibliografía........................................................59 8.1. LIBROS CONSULTADOS........................................................................................................59 8.2. PAGINAS WEB VISITADAS....................................................................................................59 9. Anexos...............................................................60 9.1. ANEXO A. DISEÑO LÓGICO DE LA BASE DE DATOS.................................................................60 9.2. TOMA DE DATOS .................................................................................................................61 5 INDICE FIGURAS Figura 1.1 Portales de ejemplo------------------------------------------------------------------------------------6 Figura 3.1: Casos de uso------------------------------------------------------------------------------------------16 Figura 3.2: Casos Uml ---------------------------------------------------------------------------------------------18 Figura 3.3: Diagrama de secuencia Registro usuario------------------------------------------------------19 Figura 3.4: Diagrama de secuencia contáctanos -----------------------------------------------------------20 Figura 3.5: Diagrama de secuencia descarga de Tramites ----------------------------------------------20 Figura 3.6: Diagrama de secuencia reservar instalación -------------------------------------------------21 Figura 3.7: Diagrama de secuencia modificar datos -------------------------------------------------------21 Figura 3.8: Diagrama de secuencia insertar datos ---------------------------------------------------------22 Figura 3.9: Diagrama de secuencia Añadir instalación ----------------------------------------------------22 Figura 3.10: Diagrama de secuencia administrar instalación --------------------------------------------23 Figura 3.11: Diagrama de secuencia sugerencia -----------------------------------------------------------23 Figura 4.1: Arquitectura de diseño-------------------------------------------------------------------------------24 Figura 4.2: Interfaz --------------------------------------------------------------------------------------------------26 Figura 4.3: Diagrama navegabilidad invitado ----------------------------------------------------------------27 Figura 4.4: Diagrama navegabilidad registrado -------------------------------------------------------------28 Figura 4.5: Diagrama navegabilidad administrador --------------------------------------------------------28 Figura 4.6: Nivel lógico --------------------------------------------------------------------------------------------29 Figura 4.7: Diseño entidad relación ----------------------------------------------------------------------------31 Figura 5.1: Código verificar ---------------------------------------------------------------------------------------35 Figura 5.2: Conexión -----------------------------------------------------------------------------------------------36 Figura 5.3: Consulta insertar -------------------------------------------------------------------------------------36 Figura 5.4: Consulta select ---------------------------------------------------------------------------------------36 Figura 5.5: Crear sesión -------------------------------------------------------------------------------------------37 Figura 5.6: Finalizar sesión ---------------------------------------------------------------------------------------37 Figura 5.7: Iniciar sesión ------------------------------------------------------------------------------------------37 Figura 5.8: Consultar datos --------------------------------------------------------------------------------------38 Figura 5.9: Insertar datos -----------------------------------------------------------------------------------------39 Figura 5.10: Actualizar datos -------------------------------------------------------------------------------------39 Figura 5.11: Eliminar datos ---------------------------------------------------------------------------------------40 Figura 5.12: Código visitas ---------------------------------------------------------------------------------------40 Figura 5.13: Realizar reservar-1 ---------------------------------------------------------------------------------41 Figura 5.14: Realizar reservar-2 ---------------------------------------------------------------------------------42 Figura 5.15: Reservar instalación -------------------------------------------------------------------------------43 Figura 5.16: Álbum -------------------------------------------------------------------------------------------------44 Figura 5.17: Tiempo ------------------------------------------------------------------------------------------------44 Figura 5.18: CSS ----------------------------------------------------------------------------------------------------45 Figura 5.19: Crear BD ----------------------------------------------------------------------------------------------46 Figura 5.20: Crear BD consultas --------------------------------------------------------------------------------46 Figura 5.20: Base de datos creada -----------------------------------------------------------------------------46 Figura 6.0: depurador Dreamweaver---------------------------------------------------------------------------47 Figura 6.1: Estadísticas navegadores -------------------------------------------------------------------------47 Figura 6.2: Visión en el opera ------------------------------------------------------------------------------------48 Figura 6.3: Visión en el Firefox ----------------------------------------------------------------------------------48 Figura 6.3: Visión en el Internet Explorer ---------------------------------------------------------------------49 Figura 6.5: Validar links -------------------------------------------------------------------------------------------49 Figura 6.6: Resolución 800x600 ---------------------------------------------------------------------------------50 Figura 6.7: Resolución 1024x768 -------------------------------------------------------------------------------51 Figura 6.8: Resolución 1440x900 -------------------------------------------------------------------------------51 Figura 6.9: Validar html y CSS -----------------------------------------------------------------------------------52 Figura 6.10: Código validación html ----------------------------------------------------------------------------52 Figura 6.11: Código validación CSS ---------------------------------------------------------------------------52 Memoria proyecto final de carrera – Portal Web ayuntamiento de silla Introducción 6 1. Introducción La siguiente memoria describe el trabajo realizado en el desarrollo de la creación de un portal Web para el ayuntamiento de Silla, cabe decir que este portal no tendrá nada que ver con la página oficial del ayuntamiento de Silla. 1.1. Objetivos El objetivo principal es crear un portal Web donde los usuarios que accedan, aparte de poder ver contenidos estáticos de información como pueden ser la historia del pueblo, sus fiestas, localización, equipo del gobierno, también puedan acceder a contenidos dinámicos como puedan ser noticias, sugerencias, votaciones, reserva de instalaciones, etc. Los usuarios que accedan a la Web podrán registrarse de forma gratuita para así tener acceso a servicios adicionales, como ponerse en contacto con personas del ayuntamiento, añadir sugerencias y votar a la mejor, reservar instalaciones, etc. Los empleados del ayuntamiento también tendrán acceso a una parte privada del portal donde podrán añadir nuevas noticias, organizar actividades, ver las sugerencias por orden de votación que añadan los usuarios, etc. 1.2. Motivación La motivación que me lleva a la realización de este proyecto es la de aprender a desarrollar por completo una aplicación Web que interactúa con los usuarios, y no se limita solamente a ofrecer información. Este proyecto me ha motivado a aprender un lenguaje nuevo como PHP que hasta ahora aun no sabia utilizarlo, y ahora tengo algo de soltura, y el manejo de bases de datos MySQL, con los que ya había realizado una pequeña página aplicación en Visual Basic relacionada con un proyecto anterior de la carrera. De esta forma he aprendido a unir estas dos tecnologías para realizar este proyecto Para coger ideas he visitado algunas páginas Web de ayuntamientos de grandes ciudades como Valencia, Barcelona, como también la de pueblos como Chirivella, alcacer, Játiva, Gandia. Y así poder ver qué funcionalidades son más comunes y necesarias que pueda necesitar un pueblo interactuando con sus habitantes y así implementarlo. Memoria proyecto final de carrera – Portal Web ayuntamiento de silla Introducción 7 Algunos ejemplos de estos portales: Figura 1.1 Portales de ejemplo. 1.3. Estructura La memoria de este proyecto está estructurada en el orden cronológico en el que se han realizado cada una de las fases para desarrollarlo. A continuación vemos un resumen del contenido de cada uno de los capítulos: Introducción: se hace una pequeña presentación del proyecto donde se destacan los objetivos a cumplir, y las motivaciones. Especificación de requisitos: en este capítulo se detallan las funcionalidades que debe tener la aplicación Web. Análisis: aquí se indica de que forma debe comportarse la aplicación Web ante los distintos tipos de usuario. Diseño: en este capítulo se define de que forma está estructurada la aplicación Web. Memoria proyecto final de carrera – Portal Web ayuntamiento de silla Introducción 8 Implementación: aquí se detalla el proceso de implementación de la Web, indicando las tecnologías y herramientas usadas. Evaluación y pruebas: en este capítulo se describen las pruebas realizadas sobre la aplicación Web para comprobar que su funcionamiento es el correcto. Se muestran los resultados y se hace un análisis de ellos. Conclusiones: aquí se dan las conclusiones que se han obtenido sobre la realización del proyecto, y una valoración personal sobre el trabajo realizado. Bibliografía: aquí indicamos el material que se ha consultado (libros, artículos, páginas Web) para obtener ayuda durante la realización del proyecto. Anexos: en este último apartado colocamos la información que complementa a algunos de los puntos expuestos en otros capítulos. Memoria proyecto final de carrera – Portal Web ayuntamiento de silla Especificación de requisitos 9 2. Especificación de Requisitos 2.1. Introducción 2.1.1. Propósito La finalidad de aquí es conseguir una aplicación Web de un ayuntamiento y explicar de una forma general y sin entrar en detalles del software y objetivos del portal, ya que aun no se ha implementado. 2.1.2. Ámbito Se desarrollara una aplicación Web para el ayuntamiento de silla, pero podría ser adaptada para cualquier pueblo. Esta aplicación constara de varias secciones que el usuario podrá elegir entre sus intereses. Cabe destacar que es una pagina no oficial de este pueblo. Será un portal para cualquier persona, pudiendo ser visualizada por cualquier con acceso a Internet y tener acceso a cualquier servicio como ver la historia y fiestas populares, localización en el mapa, noticias, agricultura local, sin embargo para hacer otros servicios como pagos de impuestos como el agua, la basura, añadir sugerencias etc., tendrá que registrarse para poder realizar dichos servicios. Por otra parte los trabajadores del ayuntamiento tendrán su propio espacio y por tanto tendrán acceso para poder modificar ciertos apartados, añadir noticias, y cualquier otra cosa. 2.1.3. Definiciones, siglas y abreviaturas Portal Web: es una aplicación basada en html que trata algún tema en particular pudiendo hacer ser interactiva con el usuario Foro: lugar de discusión para cualquier usuario y dar su opinión sobre algún tema Registro: darse de alta en una base de datos, con datos personales para poder saber que es la persona que dice ser. Usuario registrado: cualquier usuario que ha pasado por el registro Usuario no registrado: persona que solo le interesa el portal Web para visualizarlo y ver sus contenidos sin necesidad de registrarse. Usuario con privilegios: persona que será capaz de actualizar el portal Web y manejar la base de datos, siempre que no infrinja la ley orgánica de protección de datos (LOPD). Memoria proyecto final de carrera – Portal Web ayuntamiento de silla Especificación de requisitos 16 Ira actualizando las lugares o plazas que quedan libres ya sea como instalaciones deportivas o reservas para algún evento 2.3.3. Rendimiento y atributos La eficiencia del portal Web, dependerá de la capacidad de proceso del servidor donde se aloje, y del ancho de banda de la red disponible para el servidor y para el cliente. El sistema operativo elegido por el servidor o por el cliente no es un factor importante para la eficiencia, ya que el portal Web puede trabajar correctamente sobre cualquiera de ellos. Para realizar las tareas de mantenimiento o actualización del sitio Web, el administrador o cualquier usuario con los permisos necesarios podrá acceder desde cualquier lugar con conexión a Internet. Esto es posible gracias a que la información se encuentra guardada en la base de datos del servidor. Memoria proyecto final de carrera – Portal Web ayuntamiento de silla Análisis 17 3. Análisis. 3.1. Casos de uso. Los casos de uso es una técnica para capturar los requisitos de un nuevo sistema y las acciones que pueden realizar los usuarios con los escenarios que proporciona el sistema. Se intenta evitar aquí las jergas técnicas para que así un usuario no iniciado en la materia pueda entender el papel de cada usuario en el portal web y de que forma interactuar. En este sistema intervienen tres tipos de usuarios: el usuario invitado o sin registrar, el usuario registrado y el usuario registrado administrador., que tendrá permisos para modificar las bases de datos. A continuación en la figura 3.1 se muestran los casos de uso del sistema. usuario no registrado registrarse General Localizacion História Usuario Registrado modificar votar y añadir sugerencia Reservar instalaciones Reservar instalaciones Equipo de gobierno Localizacion Noticias de silla Fiestas Deportes Calendario del contribuyente Tramites Horarios atencion al ciudadano Contactanos Usuario Registrado Gestion Recursos Insertar Noticia Adm sugerecioas Adm instalaciones Adm reservas Figura 3.1: Casos de uso Memoria proyecto final de carrera – Portal Web ayuntamiento de silla Análisis 18 3.2. Diagrama de clases. Con el diagrama de clases UML podemos ver de una forma esquemática la organización de las clases en nuestro sistema. La clase principal es el 'Ayuntamiento', que a su vez se compone de las clases 'Gestión', 'Servicio', ‘Ciudad’ y 'Usuario'. • La clase 'Ciudad' está compuesta de otras clases que son de tipo informativo como: la historia, la localización, calendario contribuyente, información deportes y las fiestas. • • La clase ‘Servicios’ esta formada por clases que componen servicios que ofrece el ayuntamiento para usuarios registrados o Sugerencias. Aquí los usuarios registrados podran añadir y/o votar la sugerencia que mas les convenga. o Instalaciones. Aquí, estos usuarios podrán reservar las instalaciones que deseen dependiendo si el horario esta disponible y quedan pistas libres. o Noticias. Aquí solo los usuarios registrador con privilegios podrán añadir diferentes tipos de noticias para que cualquier usuario pueda estar informado • La clase 'Usuario' está compuesta por los tipos de usuario que se contemplan en el uso del portal web. Por un lado están los usuarios invitados o sin registrar, y por otro los registrados, que se dividen a su vez en dos tipos de usuario: los registrados y los administradores. • La clase ‘Gestión’ esta compuesta por a su ves las clases sugerencias, noticias e instalaciones, aquí solo los usuarios registrados con remisos de administración podrán gestionar estos submenús. A continuación se muestra el diagrama UML donde se puede ver de forma grafica lo antes explicado: Memoria proyecto final de carrera – Portal Web ayuntamiento de silla Análisis 19 Figura 3.2: diagrama uml Ayuntamiento servicios Usuario registrado +ID +Nombre +login +pass +e-mail +mod_datos() +Darse_baja() administrador +Accede_reg() +borra_reg() +mod_portal() invitado ciudad perteneda a una historia localizacionpartidos politicos +nombre partido +escaños en gobierno noticias locales Registro +Archivos de registro se registra 1 * Administra Accede 1 0..* gestiona 1 * puede ser Sugerencias Se componen tiene Compuesto de fiestas votos vata sugerencia gestion sugerencias noticias instalaciones instalacion +nom instalacion +Plazas +horarios disponibles reserva usuario Memoria proyecto final de carrera – Portal Web ayuntamiento de silla Análisis 20 3.3. Diagramas de secuencia. Son usados para modelar la interacción entre objetos en un sistema modelado mediante UML Se muestran a continuación un conjunto de objetos de aplicación a través del tiempo y se modela para cada método de la clase. Estos diagramas contienen detalles de implementación del escenario ayuntamiento. Registro usuario: Usuario no registrado Ayuntamiento Registro Selecciona Registro Devuelve el Formulario Introduccion de datos Error:Datos no validos M ientras error Ack Comprueba nick y password Respuesta comprobación Registrado Figura 3.3: Diagrama de secuencia Registro usuario Cuando se selecciona el registro se devuelve un formulario que mientras no sean correctos se les volverá a pedir a los usuarios que introduzcan los datos hasta que sean correctos Memoria proyecto final de carrera – Portal Web ayuntamiento de silla Análisis 21 Contáctanos: Figura 3.4: Diagrama de secuencia contáctanos Al seleccionar la opción contactar el usuario debe rellenar unos campos requeridos sin fallos para que se pueda enviar de forma correcta Tramites: Figura 3.5: Diagrama de secuencia descarga de Trámites Memoria proyecto final de carrera – Portal Web ayuntamiento de silla Análisis 22 Al seleccionar trámites se devuelve una lista de los documentos disponibles en el portal en pdf para rellenar por el ciudadano para realizar algún trámite personal. Reservar instalación: Figura 3.6: Diagrama de secuencia reservar instalación Al seleccionar las reservas te devuelve una lista de instalaciones disponibles, reservas y si esta disponible se almacena y muestra la lista de reservas para ese día, en caso contrario da error y te muestra la misma lista para que veas que horas están ocupadas Modificar datos: Figura 3.7: Diagrama de secuencia modificar datos Memoria proyecto final de carrera – Portal Web ayuntamiento de silla Análisis 23 Los usuarios registrados pueden modificar sus datos, al seleccionarlo les devuelve un formulario para que lo modifiquen a su gusto mientras los datos sean correctos. Insertar noticia: Figura 3.8: Diagrama de secuencia insertar datos Los usuarios administradores insertan noticias siempre que se validen como tal, después de la validación se le devuelve un formulario con los campos a rellenar mientras sean correctos Añadir instalación Figura 3.9: Diagrama de secuencia Añadir instalación Memoria proyecto final de carrera – Portal Web ayuntamiento de silla Análisis 24 El administrador después de identificarse, se le devuelve un formulario con campos a rellenar para insertar una instalación mientras los datos sean correctos. Administrar instalaciones: Figura 3.10: Diagrama de secuencia administrar instalación El administrador después de logearse y seleccionar administrar instalación, se le devuelve todas las reservas realizadas hasta el momento pudiendo borrarlas todas menos el día actual o seleccionando la reserva a eliminar Memoria proyecto final de carrera – Portal Web ayuntamiento de silla Análisis 25 Sugerencia: Figura 3.11: Diagrama de secuencia sugerencia El usuario administrador después de logearse, y seleccionando el apartado sugerencias, podrá eliminar el numero de sugerencia siempre que sea un valor numérico y este entre los valores de las sugerencias registradas. Memoria proyecto final de carrera – Portal Web ayuntamiento de silla Diseño 32 4.3. Nivel de persistencia de datos. A este nivel se encuentra la base de datos junto con el sistema que la gestiona (SGBD). Para diseñar la base de datos del ayuntamiento, empezamos con la base del diagrama de clases UML expuesto anteriormente. Y a partir del UML definiremos las entidades fuertes del modelo entidad relación. Las tablas creadas para este portal sacadas desde el diagrama UML son: ‘Usuario’, ‘Noticias’, ‘instalación’,’sugerencias’.Después obtenemos la tabla correspondiente a la relación entre tablas, ’Reservar_instalaciones’, que sirve para almacenar las reservas que hacen los usuarios a las instalaciones del ayuntamiento. En todas las tablas encontraremos un identificador único autonumérico para identificar cada registro de la tabla. Mas tarde en el anexo pondremos ver en detalle la base de datos donde se especifican con más detalle los tipos de campos claves primarias, claves ajenas, auto numéricos, valores nulos o no nulos, etc. Memoria proyecto final de carrera – Portal Web ayuntamiento de silla Diseño 33 4.3.1. Diseño entidad relación. Figura 4.7: Diseño entidad relación Memoria proyecto final de carrera – Portal Web ayuntamiento de silla Implementación 34 5. Implementación. Para llevar a cabo la implementación del proyecto, se han utilizado distintas tecnologías tanto para la programación de la web, como para almacenar los datos que nos interesen, y para poner en marcha el servidor web. 5.1. Tecnologías. Las tecnologías que se han utilizado en este proyecto son los lenguajes HTML, CSS y PHP para la programación de la web. Para la base de datos se ha utilizado MySQL. Y para el servidor web, un servidor Apache. Se ha utilizado un servidor local WAMPserver para hacer pruebas antes de subirlo al servidor pion de la upv. WAMP es el acrónimo usado para describir un sistema de infraestructura de internet que usa las siguientes herramientas: Windows, como sistema operativo. Apache, como servidor Web. MySQL, como gestor de bases de datos; PHP (generalmente), Perl, o Python, como lenguajes de programación. El uso de un WAMP permite servir páginas html a Internet, además de poder gestionar datos en ellas, al mismo tiempo un WAMP, proporciona lenguajes de programación para desarrollar aplicaciones web. LAMP es el sistema análogo que corre bajo ambiente Linux MAMP es el sistema análogo que corre bajo ambiente Mac. Para este proyecto se ha usado la versión de Windows HTML siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo Java script), el cual puede afectar el comportamiento de navegadores Web y otros procesadores de HTML. Normalmente este lenguaje siempre va unido a hojas de estilo en cascada los CSS. CSS. Las hojas de estilo en cascada (en inglés Cascading Style Sheets), CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores. Estos estilos pueden formar parte de un fichero y así poderlas usar en varios documentos html, o ir dentro del mismo fichero html. Memoria proyecto final de carrera – Portal Web ayuntamiento de silla Implementación 35 Java script. JavaScript es un lenguaje de scripting basado en objetos sin tipo, utilizado para acceder a objetos en aplicaciones. Principalmente, se utiliza integrado en un navegador web permitiendo el desarrollo de interfaces de usuario mejoradas y páginas web dinámicas. JavaScript es un dialecto de ECMAScript y se caracteriza por ser un lenguaje basado en prototipos, con entrada dinámica y con funciones de primera clase. JavaScript ha tenido influencia de múltiples lenguajes y se diseñó con una sintaxis similar al lenguaje de programación Java, aunque más fácil de utilizar para personas que no programan. Todos los navegadores modernos interpretan el código JavaScript integrado dentro de las páginas web. Para interactuar con una página web se provee al lenguaje JavaScript de una implementación del Document Object Model (DOM). El uso que le he dado a este lenguaje a sido para retocar ciertas cosas de los formularios, validar datos, además de usarlo para el calendario de reservas de instalaciones donde la mayoría del código es externo. PHP. Es un lenguaje de programación interpretado en la parte del servidor. Su sintaxis es similar a la de C. Hoy en día es uno de los más usado en la programación web. Este lenguaje se encuentra bajo la licencia 'PHP License' que es de carácter libre. Su uso nos permite conectarnos a la base de datos para realizar funciones de consulta, inserción, actualización, o borrado. También nos permite hacer una tarea muy útil, que es la de generar código HTML de forma dinámica. MySQL. Es el sistema gestor de bases de datos que hemos utilizado en este proyecto. Se distribuye bajo la licencia del software libre, y además es multiplataforma. Esas son algunas de las razones por las que es uno de los más usados. La utilidad de la base de datos en este proyecto ha sido la poder almacenar información y datos, como pueden ser los de los usuarios que se registran en el portal, las noticias que se publican, las reservas de las instalaciones, etc. 5.2. Herramientas. PhpMyadmin. Es una herramienta escrita en PHP para ser usada en un navegador web, y poder administrar una base de datos MySQL. En este proyecto ha sido útil para crear las tablas de la base de datos. Para el usuario administrador al ser único es el que se me dio al principio de proyecto que es el único que puede añadir y modificar en las tablas. StarUml. Es un editor de diagramas UML, aunque también permite trabajar con otros tipos de diagramas. En este proyecto se ha utilizado para el realizar el diagrama de clases. Pacestar UML Diagrammer. Este programa se ha usado para el diagrama entidad reilación además de todos los diagramas de secuencia. Dreamweaver. Programa con el que se ha hecho gran parte del proyecto en el se ha programado en html, javascritp, css y php. Jalbum. Programa editor de álbumes en php, con este programa se ha diseñado la portada del portal con fotos del pueblo Memoria proyecto final de carrera – Portal Web ayuntamiento de silla Implementación 36 PhotoShop. Es un programa de retoque y edición de imágenes de gran potencia, ha sido usado para modificar ciertos apartados del portal referente a imágenes. 5.3. Detalles de la implementación. 5.3.1. Introducción. En este apartado se explicara el contenido de las partes más importantes de la implementación, como es el registro de usuario la gestión del menú del administrador (sugerencias, noticias, usuarios, instalaciones) y realizar reservas. La implementación se realiza con el programa Dreamweaver, con los lenguajes de programación php, html, y en algunas partes Java script. La parte principal se llama index.php donde se encuentran todos los enlaces y la parte principal del portal. Hay codigo que se repite y es usado por varios apartados modificando solo ciertas partes, se explicara aquí ejemplos de cada uno. 5.3.2. Implementación de las funcionalidades. Registro de usuarios Para el registro de usuarios se emplea un código en java script para validar los campos según el estándar del portal, para luego añadirlo dentro de la base de datos. La función verificar que aparece a continuación se usa en todos los apartados donde existe un formulario, la función puede ser mas larga o mas corta dependiendo del tamaño del formulario, una vez validados los datos pasara a una función interna que conectara la base de datos y añadirá los datos. Memoria proyecto final de carrera – Portal Web ayuntamiento de silla Implementación 37 Figura 5.1: Código verificar Memoria proyecto final de carrera – Portal Web ayuntamiento de silla Implementación 38 Cuando son correctos todos los datos se hace un submit y se redirecciona a una función superior que se encuentra en otro archivo. Conexión a la base de datos. La primera parte de esta función es la conexión a la base de datos. Figura 5.2: conexión Una vez la conexión sea correcta se recogen los datos con un GET o POST y se almacena en variables locales para después insertarlas como muestra la siguiente figura. Figura 5.3: consulta insertar Este tipo de código no solo se utiliza en el registro de usuarios, es empleado en otras funciones como sugerencias, noticias, instalaciones etc. Autentificar usuario. Esta acción esta implementada en el archivo login.php. Además en todas aquellas operaciones donde se requiera que un usuario este logeado se añadirá líneas de código para verificar que de verdad es así. Se conecta a la base de datos como antes hemos explicado. Luego se busca al usuario que se ha registrado en la base de datos. Figura 5.4: consulta select Después de autentificar al usuario se crean las variables de sesión que serán utilizadas a lo largo de su visita por el portal Web según sean necesarias. Memoria proyecto final de carrera – Portal Web ayuntamiento de silla Implementación 39 Figura 5.5: crear sesión En caso de que el usuario o la contraseña no sea correcta, se destruyen las variables de sesión. Figura 5.6: finalizar sesión Después en todas las páginas donde se requiere que un usuario este registrado para ver algún contenido se añadirá en todas las páginas una función especifica como esta: Figura 5.7: iniciar sesión Dentro del “If” ira todo lo que pertenece al usuario con acceso a determinadas opciones. Memoria proyecto final de carrera – Portal Web ayuntamiento de silla Implementación 40 Consultar datos. Las consultas han sido algo muy frecuente en todo el portal ya sea para mostrar las noticias las sugerencias o cualquier otro servicio, un ejemplo de uso es el que se muestra a continuación. Figura 5.8: consultar datos Se seleccionan todas las filas que cuadren con determinados requisitos según el sitio de la pagina donde nos encontremos, después mediante una variable definida como $tpl donde se le a escrito en html donde va cada variable sacada de la base de datos. Memoria proyecto final de carrera – Portal Web ayuntamiento de silla Implementación 41 Inserción de datos En varios sitios se usan consultas de inserción, una de ellas es la usada en la de insertar noticias, otra es la de insertar sugerencias otra en hacer reservas de instalaciones y en añadir instalaciones. La que aquí comentare es la de añadir una noticia. Figura 5.9: insertar datos Como se puede ver en el código se recogen las variables enviadas por parte de un formulario que ha pasado las respectivas comprobaciones de errores, después con la función SQL insert se añadirá la fila en la base datos. Actualizar datos. En esta parte, la función mas representativa es la de modificar los datos personales del usuario, de esta forma podrá modificar su perfil, otro sitio donde se usa es en la modificación de noticias. En el siguiente ejemplo se mostrara la actualización de los usuarios ya registrados. Figura 5.10: actualizar datos Una vez más se ha hecho un tratamiento de errores de datos en el formulario que envía los datos y con la función SQL update actualizaremos los campos de usuario que cuadren con el id asignado en su registro. Memoria proyecto final de carrera – Portal Web ayuntamiento de silla Implementación 48 La herramienta utilizada es phpMyAdmin, creando una base de datos con el usuario “ayto” y contraseña “dacorcor” que a sido proporcionada por el tutor del proyecto, siendo este usuario el único que puede acceder a esta base de datos para realizar cualquier consulta. Un usuario con mas permisos puede crear mas bases de datos forma: Figura 5.19: crear bd en mi caso solo tenia una base de datos y se me permitía crear tantas tablas como hicieran falta. Luego la forma de crear tablas se puede hacer de dos formas, añadiéndolas de forma grafica o por código SQL como el siguiente: Figura 5.20: crear bd consultas Así con todas las tablas, y una vez creadas todas la que necesitemos junto con las relaciones que estas tendrán quedaran de esta forma en phpMyAdmin: Figura 5.20: base de datos creada Memoria proyecto final de carrera – Portal Web ayuntamiento de silla Evaluación y Pruebas 49 6. Evaluación y pruebas. Ya terminada la implementación de código y de la interfaz grafica, es el momento de evaluar y comprobar su funcionamiento, que sea el correcto y cumpla los estándares de la World Wide Web. 6.1. Pruebas Se ha pasado por el depurador de Dreamweaver para encontrar posibles links rotos alguna etiqueta mal cerrada, etc, este depurador no detecta errores de programación ya que depende del propio programador. Figura 6.0: depurador Dreamweaver En cuanto al modo de funcionabilidad en diferentes navegadores Web, se ha centrado el portal en Firefox desde la 3.2 hasta su ultima versión 3.6, también se a probado en navegadores opera desde su versión 9, hasta la 10.10, chrome desde la versión 6 hasta la 7, Internet Explorer versiones 7 y 8. Como apunte muestro una grafica del año 2010 en el que se puede observar el uso de los navegadores mas usados en Internet, notar que Firefox a pesar de su arranque mas lento consigue superar por primera vez el uso de Internet Explorer Figura 6.1: estadísticas navegadores Otra forma de poder observar el tipo de visualización en los navegadores actuales es en la pagina Web www.browsershots.org, donde te devuelve en forma de capturas de imagen las diferentes formas en que los navegadores muestran en inicio de la pagina. Memoria proyecto final de carrera – Portal Web ayuntamiento de silla Evaluación y Pruebas 50 Funcionamiento en navegadores más comunes A continuación se mostrara en los navegadores que he usado la forma de visualización, en la mayoría de ellos se ve de forma parecida y correcta, excepto en Internet Explorer 8 que he tenido un problema en una función java script referente a la fecha y hora en el inicio de la pagina que no se visualiza. A continuación se muestran diferentes navegadores en los que la visualización es muy similar: Opera V10 Figura 6.2: visión en el opera Mozilla Firefox 3.6 Memoria proyecto final de carrera – Portal Web ayuntamiento de silla Evaluación y Pruebas 51 Figura 6.3: visión en el Firefox Internet Explorer 8 Figura 6.4: visión en el Internet Explorer En este último explorador podemos observar la incompatibilidad de la función en java script de la fecha y hora, sin embargo en todos los demás exploradores funciona correctamente. Comprobar enlaces. Una vez finalizada la comprobación en los diferentes visualizadores es el momento de comprobar si todos los enlaces a los que accede la pagina son correctos, para ello nos Memoria proyecto final de carrera – Portal Web ayuntamiento de silla Evaluación y Pruebas 52 serviremos de la pagina Web http://www.w3c.es/ que pertenece a la World Wide Web consortium. En la siguiente imagen se muestran los resultados del escaneo de los enlaces. Figura 6.5: validar links Resoluciones. En cuanto a las resoluciones, se ha usado una herramienta Web gratuita http://viewlike.us// donde se le puede indicar que tipo de resolución queremos probar. He probado varias resoluciones mas comunes de los usuarios siendo la mas optima a partir de 1024x768, en el supuesto de usar una resolución mayor no habría problemas pero en caso de usarla por de bajo aparecerían las flechas de desplazamiento A continuación mostrare diferentes capturas con varias resoluciones. Resolución 800x600 Memoria proyecto final de carrera – Portal Web ayuntamiento de silla Evaluación y Pruebas 53 Figura 6.6: resolución 800x600 En esta resolución haría falta usar las barras de desplazamiento seria mas incomodo navegar por la pagina aunque esta resolución apenas se esta usando en la actualidad, ya que seria para monitores de 14 o 15 pulgadas. Resolución 1024x768 Memoria proyecto final de carrera – Portal Web ayuntamiento de silla Evaluación y Pruebas 54 Figura 6.7: resolución Aquí ya se puede apreciar toda la pagina Web sin necesidad de barras de desplazamiento por tanto a partir de aquí se podría ver de forma optima. Resolución 1440x900 Figura 6.8: resolución 1440x900 Esta es la resolución mas común en monitores actuales, a partir de un monitor de 17 pulgadas esta seria la resolución optima. Memoria proyecto final de carrera – Portal Web ayuntamiento de silla Evaluación y Pruebas 55 Validar HTML y CSS Para este fin, he utilizado la pagina Web de la W3C (World Wide Web Consortium) para asegurarnos que la pagina pasa todos los estándares y no contiene ningún tipo de error sintáctico. Para la validación HTML he usado la siguiente página. http://validator.w3.org/ obteniendo el siguiente resultado Figura 6.9: validar html y CSS Al ser correcto nos permite añadir a nuestra pagina un código propuesto por ellos para demostrar que nuestro portal cumple todos los requisitos del HTML. Figura 6.10: código validación html De un modo parecido pasamos a validar el CSS con el siguiente enlace: http://jigsaw.w3.org/css-validator/ mostrando este resultado. Figura 6.11: código validación CSS Este es el código que valida nuestra página, en donde hemos añadido en el inicio del portal. Memoria proyecto final de carrera – Portal Web ayuntamiento de silla Evaluación y Pruebas 56 6.2. Análisis de los resultados. Después de todas las pruebas haremos un breve resumen de cada prueba obtenida. Navegadores Desde el principio se ha estado diseñando para el navegador Firefox, todas las pruebas y comprobaciones de toda la programación se a hecho desde este. Una vez finalizado comprobé que en todos los demás navegadores funcionaban de la misma forma exceptuando el Internet Explorer 8 teniendo problemas en ciertos Java scripts. En un principio para creas las sesiones de los usuarios se utilizo las funciones cookie, ($_COOKIE["mi galleta"]), donde en los navegadores Firefox funcionaba de forma correcta, pero en el IE8 por algún motivo no iniciaba sesión de la misma forma. Por eso se tomo la decisión de usar las funciones $_SESSION[“mí _ sesión”] el cual funcionaba de mejor manera en todos los navegadores. Otro de los aspectos era el tema del CSS, las visualizaciones no eran correctas en estos dos tipos de navegadores y se tuvo que redefinir varias clases del CSS añadiendo algún parámetro para que la visualización fuera correcta en los dos tipos de navegadores. Comprobando enlaces. Después de realizar varias pruebas en todo el código del portal se dejaron sueltos varios enlaces a paginas de prueba que había utilizado para tal fin, gracias e esta herramienta puede depurar y limpiar el código. Resoluciones de pantalla. En un principio no tuve en cuenta la resolución de pantalla usando la que tengo normalmente en mi pantalla 1440x900, el diseño estaba muy avanzado para volver a redefinirlo, pero tras las pruebas vi que desde una resolución de 1024x768 eran optimas y mostraban todo el contenido, siendo estas las mas usadas por los usuarios. Después de buscar encontré que para los atributos de los <DIV>, de las <TABLE> de las imágenes <IMG> se podían usar en lugar de tamaños relativos, el uso de porcentajes de esta forma en cualquier navegador con cualquier resolución se vería de forma correcta. Sin ninguna duda en futuros proyectos será una de las cosas que tendré en cuenta. Validación de HTML y CSS. Aquí también se obtuvieron errores de validación, como el cierre de algunas etiquetas, la incompatibilidad de ciertas funciones que estaban deprecated (en fase de transición a la desaparición), en un principio se decidió por el html 4.01 strict pero a la vista de las incompatibilidades se decidió pasar al transactional. Memoria proyecto final de carrera – Portal Web ayuntamiento de silla Conclusiones 57 7. Conclusiones. En cuanto a la conclusión del proyecto, a nivel personal son satisfactorias. Se ha invertido mucho tiempo e investigación para conseguir hacer ciertas cosas de la funcionabilidad del portal, ha sido un esfuerzo el cual a merecido la pena, ya que he aprendido bastantes cosas de los lenguajes de programación que he utilizado aquí. Bien es cierto que actualmente podría realizar una página Web mas vistosa y con mas funcionalidades. Sin embargo es un portal que perfectamente podría adaptarse a cualquier ayuntamiento cambiando pocas cosas o mejorando otras, e incluso sin cambiar nada de la programación y solo los datos. 7.1. Valoración personal El proyecto consistía en realizar un portal Web desde cero, aplicando conocimientos que se han ido adquiriendo durante la carrera he innovar en algo que no se ha utilizado en esta como es el php o java script. Como es lógico he encontrado ciertas dificultades en ciertos puntos más que en otros por ejemplo en reservar instalaciones que para mi a sido la mas complicada, sin embargo ahora podría mejorar el código. En cuanto al desarrollo grafico, el lenguaje html, ya contaba con ciertos conocimientos como en la asignatura de CDH el cual me ayudo. En otras situaciones como la programación php o java script a sido de investigación propia a base de leer manuales por Internet, sin embargo estos lenguajes tienen cierta semejanza con java, c++ o c, siendo mas fácil su comprensión y puesta en funcionamiento. En cuanto al los apartados teóricos como son los casos de uso, diagramas de secuencia, diagramas uml, o diseño de la base de datos, e tenido que hacer memoria y recuperar los apuntes de las no tan lejanas asignaturas de ingeniería del software (ISS) o Bases de datos (BDA). También he aprendido a como estructurar un proyecto y dividirlo en partes y cumplir ciertas fechas, a pesar de las demoras de mi proyecto, soy consciente de la importancia que tiene el tiempo en cuanto a la entrega de un portal en una empresa.