Utilización de un marco de persistencia objeto relacional en el diseño de aplicaciones web multicapa

UNIVERSIDAD POLITÉCNICA DE VALENCIA Escuela Técnica Superior de Ingeniería Informática “Utilización de un marco de persistencia objeto relacional en el diseño de aplicaciones web multicapa”. PROYECTO FINAL DE CARRERA (PFC) Presentado por: Pedro Alfaro Fernández Dirigido por: Juan Sánchez Díaz Valencia Julio 2012 Universidad Politécnica de Valencia Página 2 Í nd ice: página 1 Introducción 3 1.1 Motivación 3 1.2 Objetivos 4 1.3 Contexto 4 2 Especificación de requisitos 5 2.1 Introducción 5 2.2 Descripción General 8 2.3 Requisitos Específicos 10 3 Análisis 14 3.1 UML (Unified Modeling Language) 14 3.2 Otros diagramas 26 4 Diseño 29 4.1 Arquitectura Cliente-Servidor 29 4.2 Modelo Vista Controlador 29 4.3 Arquitectura de capas 31 5 Implementación 35 5.1 Capa de presentación 35 5.2 Capa de negocio 39 5.3 Capa de persistencia 43 6 Bibliografía 46 7 Manual de usuario e instalación 47 PFC: Pedro Alfaro Fernández Página 3 1 . Íntroduccio n Esta es la memoria descriptiva del proceso de desarrollo del proyecto final de carrera de Ingeniería Informática realizado en la Universidad Politécnica de Valencia. Realizado por Pedro Alfaro Fernández, dirigido y supervisado por Juan Sánchez Díaz. 1.1. Motivación Profesionalmente me interesaba profundizar en la utilización de “object relational mapper” (de ahora en adelante ORM) no solo debido a ser herramientas potentes que simplifican y mejoran el trabajo del programador sino también debido a la aparición en relativamente poco tiempo de muchos sistemas ORM y proyectos que hacen uso de estas herramientas en su desarrollo. La utilización de arquitecturas multicapa en el diseño de aplicaciones Web permite independizar la capa de interfaz de usuario, de la capa de negocio y de la capa de persistencia o almacenamiento de datos, de modo que las modificaciones en el sistema quedan confinadas a la capa objeto de modificación. Esta característica permite obtener aplicaciones más robustas y más fácilmente modificables. Se ha elegido una tienda web online debido a la enorme expansión que ha experimentado el comercio online y que permite utilizar una temática bien conocida claramente enfocada a gestionar una Base de Datos y un sistema persistente. Así mismo el hecho de ser un escenario conocido permitirá ver más claramente las diferencias en el proceso de desarrollo de la aplicación. Universidad Politécnica de Valencia Página 4 1.2. Objetivos Personalmente el objetivo era la ejecución propiamente dicha de un desarrollo para aprender el manejo de las tecnologías (como los ORMs) y como afectarían al desarrollo habitual de software. Utilizando el framework Symfony junto con algunas de sus herramientas así como el ORM Doctrine. El objetivo principal del proyecto es utilizar un marco de persistencia objeto relacional en el diseño de una aplicación multicapa en la cual se emplea PHP como lenguaje de programación. Como caso de estudio para evaluar la utilidad del marco de persistencia se implementará una aplicación web que gestionará una tienda de compras en línea en Internet. Se busca aplicar un sistema de mapeo objeto relacional para la gestión de la persistencia en las aplicaciones Web multicapa estándar añadiendo las capas necesarias y utilizando bibliotecas necesaria para ello. Creando de facto una base de datos orientada a objetos “virtual” que sobre la base de datos relacional permita su utilización de forma más natural. 1.3 Contexto Es necesaria la existencia de diferentes tipos de usuarios con diferentes permisos. Los usuarios quedan así clasificados en Administrador el encargado de la gestión general del portal, Clientes aquellas personas registradas que van a realizar compras y Visitantes personas sin registrar que solo desean consultar o hojear los productos. PFC: Pedro Alfaro Fernández Página 5 1.3.1 Estructura del documento Introducción: Capitulo que presenta el proyecto realizado, dando detalles sobre los objetivos y motivaciones del mismo y expone el planteamiento del problema. Especificación de requisitos: Capitulo que explica y recoge los diferentes requisitos que tiene este proyecto. Me guiaré por estándares que permitan la extracción de todos estos requisitos de forma fiable y rigurosa. Análisis: Capitulo que enseña las fases de análisis que han sido necesarias para obtener el modelo conceptual. El centro de este capitulo orbita alrededor del Diagrama de clases de la aplicación. Diseño: Capitulo que muestra los diseños realizados, las metodologías utilizadas y el modelo relacional de la base de datos. Implementación: Capitulo que describe y comenta las diferentes herramientas y tecnologías utilizadas en la implementación del proyecto. Bibliografía: Apartado donde se reflejan las principales fuentes consultadas para la elaboración de este documento. Manual de instalación: Capitulo que expone las técnicas de evaluación y pruebas del sistema. Universidad Politécnica de Valencia Página 6 2 . Es pecificacio n de requisitos La especificación de requisitos del sistema que se pretende construir está basada en el estándar IEEE830-1998, esta especificación puede ser interpretada como un contrato entre clientes y desarrolladores. 2.1 Introducción Esta especificación de requisitos pretende marcar de forma clara, concisa y completa el funcionamiento, las funcionalidades y características del software a desarrollar. 2.1.1 Propósito El propósito de esta especificación de requisitos es reunir y plasmar el comportamiento del sistema software a desarrollar, de tal forma que todas las personas involucradas en el proyecto puedan tener conocimiento sin ambigüedades de lo que se va a desarrollar. 2.1.2 Ámbito del sistema El producto software que se va a desarrollar es una aplicación web de gestión y venta de productos vía Internet, donde los usuarios podrán consultar información de los diferentes productos y comprarlos, así como también permitirá la gestión de los productos de la tienda. 2.1.3 Definiciones, acrónimos y abreviaturas Autenticación o Autentificación es la confirmación de algo o alguien como auténtico. Con este término nos referimos al acto de verificar que la persona que se conecta a una aplicación es la que se espera, y debe tener los derechos, permisos y/o privilegios que le corresponden. PHP es un acrónimo de Hypertext Pre-processor, es un lenguaje de programación interpretado, diseñado originalmente para la creación de páginas web dinámicas. PFC: Pedro Alfaro Fernández Página 7 HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado (junto con el texto, incorpora etiquetas o marcas que contienen información adicional acerca de la estructura del texto o su presentación) 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. IEEE corresponde a las siglas de (Institute of Electrical and Electronics Engineers) en español Instituto de Ingenieros Eléctricos y Electrónicos, una asociación técnico-profesional mundial dedicada a la estandarización, entre otras cosas. DB acrónimo de Data Base. Interfaz se refiere a una conexión física y funcional entre dos aparatos o sistemas independientes, en el caso de Interfaz de usuario es el medio con que el usuario puede comunicarse con una máquina, en nuestro caso nuestra aplicación software. ERS o SRS acrónimo del castellano Especificación de Requisitos Software. Symfony es un completo framework para aplicaciones web de proyectos PHP. ORM del inglés Object-Relational mapping, mapeo objeto-relacional en castellano, es una técnica de programación para convertir datos entre el sistema de tipos utilizado en un lenguaje de programación orientado a objetos y el utilizado en una base de datos relacional, utilizando un motor de persistencia. Doctrine es un ORM para PHP que ofrece persistencia para objetos PHP. Apache Es un servidor muy popular. Twig engine de plantillas para PHP que incluye symfony. MVC o modelo vista controlador es un modelo de abstracción en el desarrollo del software. CSS del inglés Cascading Style Sheets, son hojas de estilo en cascada, es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML. 2.1.4 Referencias [1] Estándar IEEE830-1998 (1998) [2] Méndez G. 2008. Especificación de Requisitos según el estándar de IEEE 830. Universidad Complutense de Madrid Fuente: Universidad Politécnica de Valencia Página 8 2.1.5 Visión General del Documento Este documento está conformado de tres secciones que son la Introducción, la Descripción General y los Requisitos Específicos. En esta primera sección se procura proporcionar una visión general de lo que es el documento de especificación de requisitos. En la segunda sección se da una descripción general del sistema a construir, para conocer sus funciones principales, los datos requeridos, y sus restricciones, entre otras cosas que afecten a su desarrollo, aunque no se entra en los detalles de cada uno de estos factores y, por último, en la tercera sección se definen los pormenores de los requisito que nuevo sistema debe satisfacer. 2.2 Descripción General 2.2.1 Perspectiva del producto Se pretende conseguir una aplicación que solo requiera un navegador web para utilizarla. Buscando un uso intuitivo y sencillo. La aplicación será optimizada para Mozilla Firefox y para Google Crome. 2.2.2 Funciones del producto A continuación enumeraremos las funcionalidades principales del sistema, cada una de ellas será explicada con más detalle en la sección 2.3.3. Se han añadido códigos a las funcionalidades para facilitar su trazabilidad. - Ver información relevante sobre el portal (Inicio F001, Contacto F002, Ayuda F003, Privacidad F004) - Registrarse como nuevo usuario. (F005) - Iniciar sesión en la aplicación con un usuario previamente registrado. (F006) - Ver información personal. (F007) - Borrar cuenta de cliente. (F008) - Cerrar Sesión. (F009) - Listado de contenido incluyendo búsquedas por palabras clave, precios, categoría… permitiendo la revisión de los productos de forma detallada. (F010a, F010b) - Gestión de artículos para añadir artículo nuevo, modificar datos artículo existente y eliminar artículo. (F014, F015, F016, F017) - Añadir elemento/s al carrito de la compra. (F011) - Revisar carrito de la compra (F012) - Comprar contenido del carrito de la compra. (F013) - Listado para gestión de pedidos. (F014) PFC: Pedro Alfaro Fernández Página 9 - Listado de clientes.(F015) 2.2.3 Características de los Usuarios El sistema software a desarrollar tendrá un sistema de autenticación que permitirá identificar los diferentes roles y así ofrecer una funcionalidad concreta dependiendo del rol. Esta característica es esencial entre otras causas por razones de seguridad. Usuario anónimo o invitado: es aquel que no ha iniciado sesión en el sistema y que tiene únicamente acceso al catálogo de productos, a sus características y puede gestionar su carrito de la compra. Usuario registrado o cliente: Son los usuarios que ya se han registrado y están ya autenticados. Tienen acceso a prácticamente todo lo que el “invitado” pero además pueden comprar y revisar sus datos. Usuario administrador o gestor: Es el usuario encargado de gestionar el portal y sus contenidos, de tal forma que puede añadir nuevo material así como modificar el existente. 2.2.4 Restricciones generales Para acceder al portal no será necesario ningún hardware específico, será necesario solamente acceso a internet y un navegador. El administrador o gestor podrá alterar parte del contenido de la base de datos usando la propia aplicación pero nunca modificar la estructura de la BD. Se debe tener un sistema seguro que permita almacenar de forma segura la información de los clientes. 2.2.5 Supuestos y dependencias La aplicación requerirá de un servidor apache que debe tener instalados symfony2. 2.2.6 Requisitos Futuros La posible ampliación del portal así como el posible estudio para la mejora del rendimiento en caso de que el portal tuviese más visitas de las esperadas, todo esto debería ser estudiado de forma independiente al proyecto actual. Universidad Politécnica de Valencia Página 16 -en casos como “LineaCarrito” y “LineaPedido” da seguridad añadida a la no redundancia de tuplas ni datos ya que serán claves primarias dobles y además únicas, impidiendo errores, nulos y duplicados. - en casos como la herencia de pedido que es un caso sensible en el mapeado, es necesario realizarlo con identificadores duplicados en el padre y los hijos, así como la obligatoriedad del campo discriminador “discr” que veremos en el apartado 4.3.2. - en los repositorios de datos que aparecerán en el apartado 5 veremos que vienen incluidos unos casos básicos que con un identificador son muy interesantes. Además al incluir la propia clave en la url podemos simplificar la codificación y hacer claras las urls. Se aprecia que el constructor y los métodos get y set normales no están en el diagrama. La razón es para facilitar la legibilidad del mismo. Aunque si aparecen aquellos que dan información tratada. 3.1.3 Escenarios y Diagramas de Secuencia Los diagramas de secuencia de UML modelan el flujo de la lógica interna del sistema de forma visual, permitiendo documentar y validar esa lógica. Es el más popular de los modelados dinámicos que se centra en identificar el comportamiento del sistema. [8] Los escenarios son tablas de información que permiten plasmar información sobre interacciones, siendo ideales para compaginar con diagramas de secuencia. Figura S.1 Inicio de sesión PFC: Pedro Alfaro Fernández Página 17 Título: Inicio de sesión (Login) Objetivo: Autenticar a un usuario anónimo (invitado), permitiéndonos catalogarlo como usuario registrado (cliente) o usuario administrador (gestor). Precondición: El usuario ha de ser en ese momento un usuario invitado. Actores: Usuario anónimo (invitado). Episodios: 1 En cualquier momento el usuario introduce los datos (nombre y contraseña). 2 El sistema intenta autenticar al usuario. 3.1 El sistema le asigna el rol correspondiente. Excepciones: 3.2 Si el sistema no consiguió autenticar muestra un mensaje y no hace nada. Figura S.2 Registro Título: Registro Objetivo: Almacenar la información pertinente sobre un potencial cliente, incluyendo los datos necesarios para posteriores autenticaciones. Para permitir mas adelante el login como usuario registrado. Precondición: El usuario ha de ser en ese momento un usuario invitado. Actores: Usuario anónimo (invitado). Episodios: 1 En cualquier momento el usuario invitado puede irse al formulario de registro. 2 El formulario de registro le permite poner sus datos y enviarlos al sistema. 3.1 El sistema confirma que los datos introducidos son validos. 4 El sistema almacena todos los datos del cliente y le realiza automáticamente el login. Excepciones: Universidad Politécnica de Valencia Página 18 3.2 Si los datos introducidos no son validos marca los posibles errores y vuelve a mostrar el formulario. Figura S.3 Consultar información web. Título: Consultar información web Objetivo: Permitir a cualquier usuario de la web consultar información relativa al portal, a la compañía. Cosas como quienes somos, donde estamos, detalles sobre la política del portal o ayuda en como es su funcionamiento. Precondición: No existen precondiciones Actores: Usuario anónimo (invitado), Usuario registrado (cliente), Usuario gestor (Administrador). Episodios: 1 Desde cualquier parte del portal se podría acceder a las pantallas de información y ayuda. 2 El usuario decide que información quiere consultar. Figura S.4 Ver información personal. PFC: Pedro Alfaro Fernández Página 19 Título: Ver información personal Objetivo: Permitir al usuario ver su información personal así como un histórico de pedidos que él ha realizado permitiendo ver los detalles de sus pedidos y su estado. Precondición: El usuario ha de estar logueado y ser un usuario registrado. Actores: Usuario registrado (cliente). Episodios: 1 En cualquier momento el usuario puede ir a su perfil. 2.1 El sistema muestra sus datos y sus pedidos. 3 El usuario puede navegar por el sitio para revisar detalles de sus pedidos. Excepciones: 2.2 Si el usuario no esta logeado le pide q se logee para acceder. Figura S.5 Cerrar Sesión. Título: Cerrar sesión (Log out) Objetivo: Cambiar el status de un usuario registrado (cliente) o un usuario gestor (administrador) a usuario anónimo (invitado). Precondición: El usuario ha de ser en ese momento un usuario registrado (cliente) o un usuario gestor (administrador). Actores: Usuario registrado (cliente) o un usuario gestor (administrador). Episodios: 1 En cualquier momento el usuario registrado (cliente) o un usuario gestor (administrador) puede hacer log out. 2 El sistema le cambia el estatus del usuario a invitado. Universidad Politécnica de Valencia Página 20 Figura S.6 Añadir Producto. Título: Añadir producto Objetivo: Permitir al administrador añadir nuevos productos para poner a la venta a través del portal. Precondición: El usuario ha de ser un usuario gestor (administrador). Actores: Usuario gestor (administrador). Episodios: 1 El administrador entra al formulario de añadir producto. 2 Introduce los datos del producto y los envía al sistema. 3.1 El sistema confirma que los datos introducidos son validos. 4 El sistema almacena el nuevo producto. Excepciones: 3.2 Si los datos introducidos no son validos o el producto ya existe, marca los posibles errores y vuelve a mostrar el formulario. PFC: Pedro Alfaro Fernández Página 21 Figura S.7 Consultar catalogo invitado. Universidad Politécnica de Valencia Página 22 Figura S.8 Consultar carrito, gestión y compra. Título: Consultar catalogo. Añadir al carrito y ver detalles del artículo. Objetivo: Permitir al usuario ver listados de artículos así como ver los detalles de artículos y añadir esos productos a su carrito de la compra, para su posterior adquisición. Precondición: El usuario ha de ser un usuario anónimo (invitado) o usuario registrado (cliente). Actores: Usuario anónimo (invitado) o usuario registrado (cliente). Episodios: 1 El usuario entra a la sección de productos del portal. 2 Busca manualmente o con ayuda del buscador el/los productos que desea. 3.1 El usuario añade un producto a su carrito. 3.2 El usuario va a ver los detalles de un producto concreto. - Puede desde dentro de los detalles del producto añadirlo a su carrito o volver al catalogo. 4 El escenario termina cuando el invitado o cliente decide salir de esta sección ya sea viendo el catalogo, cerrando el navegador, etc… Excepciones: 3.1.1 Si no hay ese producto en stock muestra un error y devuelve a donde estaba el usuario. PFC: Pedro Alfaro Fernández Página 23 Título: Gestión carrito y compra. Objetivo: Permitir al usuario conocer el estado de su carrito de la compra. También permitir ver los precios de los productos elegidos, las cantidades y poder eliminar elementos así como comprar el carrito. Precondición: El usuario ha de ser un usuario anónimo (invitado) o usuario registrado (cliente). Actores: Usuario anónimo (invitado) o usuario registrado (cliente). Episodios: 1 El usuario puede ver el estado resumido de su carrito en todo momento. Pero para ver el carrito de forma detallada así como comprar el carrito deberá ir a la sección de carrito. 2 En la sección carrito el sistema le mostrará todos los detalles del carrito. 3.1 El usuario modifica las cantidades. 3.2 El usuario compra el carrito de la compra en su estado actual. 3.3 El usuario decide vaciar el carrito de la compra. 3.4 El usuario vuelve al catalogo o sigue navegando por el portal sin perder el contenido de su carrito. 4 En caso de compra con éxito el sistema mostrara una factura detallada de su pedido. Excepciones: 3.2.1 Si el sistema encuentra errores, mostrara esos errores y volverá al carrito. 3.2.2 Si el sistema detecta que el usuario no es un usuario registrado o cliente le mandara automáticamente a log in para que pueda autenticarse y comprar. Universidad Politécnica de Valencia Página 24 Figura S.10 Gestión de artículos. Título: Gestión de artículos. Modificación y eliminación. Objetivo: Permitir al administrador ver listados de artículos así como detalles de artículos que puedan ser modificados y eliminar del catalogo los artículos que por distintas causas se desee dejar de comercializar. Precondición: El usuario ha de ser un usuario gestor (administrador). El/los productos que se desee modificar o eliminar del catalogo deben existir previamente en el sistema. Actores: Usuario gestor (administrador). Episodios: 1 El administrador entra a gestión de artículos. 2 Busca manualmente o con ayuda del buscador el/los productos que desea. 3.1 El usuario clica en modificar para ir al formulario de un producto concreto. - Modifica los datos que desea en el formulario y envía los datos. 3.2 El usuario saca o devuelve al catalogo el producto que desea. 4 El sistema comprueba que las actualizaciones son correctas y las realiza. Excepciones: 3.1.1 Si los datos introducidos no son valido, marca los posibles errores y vuelve a mostrar el formulario. PFC: Pedro Alfaro Fernández Página 25 Figura S.11 Gestionar pedidos. Título: Listar/Gestionar pedidos. Objetivo: Permitir al usuario administrador ver listados de pedidos así como ver los detalles de los pedidos. También permitirá mostrar búsquedas informadas. Precondición: El usuario ha de ser un usuario gestor (administrador). Actores: Usuario gestor (administrador). Episodios: 1 El usuario entra a la sección de pedidos del portal. 2 Busca manualmente el pedido que desea o con ayuda del buscador. 3 Mira los detalles de los pedidos que desee. 4 El usuario puede alterar los valores de enviado o pagado, ya que pueden haber ocurrido incidencias como una devolución del paquete por parte de la compañía de mensajería como un problema con el pago a posteriori. Universidad Politécnica de Valencia Página 32 Gracias a las facilidades twig de herencia se separaran las plantillas de forma jerárquica para evitar repetir el código y darle un aspecto consistente al seguir siempre el mismo diseño. 4.3.2 Capa de Negocio o aplicación La capa de negocio o aplicación actúa de mediados entre la capa de presentación y la capa de persistencia, contiene la implementación de la funcionalidad asociada a los casos de uso. Aunque no almacena datos todos los datos antes de ir a la capa de almacenamiento pasan por aquí para ser validados, tratados si es necesario, etc… Los datos cuando vuelven de la capa de persistencia también pasan por aquí antes de llegar a las vistas. En un MVC esta capa corresponde al Controlador. En symfony estos serían los “controllers” un tipo de clases de las que hablaremos en el apartado 5, aunque incluiría mas cosas. 4.3.2 Capa de Persistencia o almacenamiento La capa de persistencia es la capa encargada de hacer que los datos se mantengan almacenados en la base de datos pero también es la encargada de recuperar estos datos. Como se ve en la figura 4.3, en un escenario de ORM el programador no realiza una conexión y una consulta SQL contra una base de datos. En este caso el ORM es el que realiza la conexión una vez, almacena los datos de la base de datos necesarios en memoria y los mantiene allí tomando los datos la forma de objetos. Gracias a ese mapeado que previamente se tenia hecho el ORM es capaz de transformar datos de la BBDD en datos que se pueden usar por el programa en forma de objetos, siendo estos objetos los usados generalmente en las tareas propias de la capa de negocio. Esta forma de trabajar facilita mucho las tareas y sobre todo el trabajo del programador que podrá acceder a los datos sin la complejidad que supone tener que “sacar” y “transformar” los datos que requiere desde la BBDD. Tiene también la ventaja de que el sistema tendrá en memoria los datos sin tener que saturar de consultas a la BBDD. PFC: Pedro Alfaro Fernández Página 33 Figura 4.3.2 Esta Imagen ha sido creada con una exportación SQL desde phpmyadmin y una importación SQL a MySQL Workbench. Se decidió no crear un diagrama en forma Entidad-Relación porque sería redundante. El diagrama de la figura 4.3.2 es en la práctica un modelo relacional con claves y claves ajenas, es más detallado y menos abstracto. 4.3.2.1 Estructura de la base de datos Para la creación de la BBDD una aproximación muy recomendable puede ser generar las clases que correspondan en código, con su consecuente mapeado y utilizar las herramientas del ORM en cuestión (doctrine en nuestro caso) para el generado de la BBDD. Esta aproximación facilita mucho la tarea, y aunque las herramientas del ORM no son infalibles, el sistema permite cambios posteriores como la alteración de la BBDD utilizando sentencias SQL para generar las restricciones que falten o el propio SGDB. Para mas detalles ver apartado 5.3. Universidad Politécnica de Valencia Página 34 Como se ha mencionado en el apartado 3.1.2 el mapeado es la clave al crear una BBDD para estos sistemas ORM, se hacen imprescindibles ciertas estructuras, valores para poder crear un mapeado mas sencillo e incuso algunas veces solo se pueden crear ciertas relaciones entre clases teniendo un mapeado concreto. En el desarrollo enfocado a usar un ORM, el “mapeado” manda. Esto se puede apreciar en: - Los identificadores de producto y sus clases herederas son necesarios y necesitan de un campo discriminador “discr” para poder hacer el mapeado de una herencia como la que nosotros necesitamos. - Los tipos que se emplean son los que corresponden a tipos “equivalentes” en el mapeo a PHP. Nótese que no existen las clases “Carrito” y “LineaCarrito”, esto es debido a que no son persistentes. Esto se debe a que se almacenan en el cliente ya que sino sería mucha información innecesaria para el sistema que tendría que ser almacenada en la BBDD. Como se comentaba en el análisis se decidió incluir identificadores auto-incrementales, estos serán gestionados por la BBDD y el ORM, pero más tarde los podré utilizar. -simplifica el sistema conceptualmente. Son campos necesarios porque necesitamos no nulos y únicos para las claves. -en “LineaPedido” da seguridad añadida a la no redundancia de tuplas ni datos ya que serán claves primarias dobles y además únicas, impidiendo errores, nulos y duplicados. - en casos como la herencia de pedido que es un caso sensible en el mapeado (Class Table Inheritance), es necesario realizarlo con identificadores duplicados en el padre y los hijos, así como la necesidad del campo dicr que nos permitirá saber que “tabla” es la que hereda, haciendo que cada producto sea de un tipo. - en los repositorios de datos que veremos en el apartado 5.3.3 vienen incluidos unos casos básicos que con un identificador son muy interesantes. PFC: Pedro Alfaro Fernández Página 35 5 . Ímplementacio n Este capítulo se centra en las diferentes tecnologías, herramientas y lenguajes que se han utilizado y en como estas ayudan, facilitan o complican la tarea. Así como explicar como ha sido la codificación de la aplicación. 5.1 Capa de Presentación Relativo a la Capa de Interfaz se han utilizado: Photoshop, CSSs, CSS960, HTML y plantillas Twig. 5.1.1 CSS Cascading Style Sheets que se suele traducir por hojas de estilo en cascada es un lenguaje usado para definir los estilos y la presentación de los documentos HTML entre otros. La razón por la que este tipo de documentos se han hecho populares es porque dejan separados los estilos de tal forma que queda modulizádo y es mucho más cómodo de gestionar y entender, además permite que toda una página web tenga los mismos estilos y también que cambiarlos sea mucho mas rápido ya que estarían “centralizados”. Se han utilizado 3 documentos css diferentes: - Reset.css es un documento css que fue desarrollado por Eric Meyer y que sirve para eliminar algunos valores de estilo prestablecido que los navegadores asignan a algunos elementos, evitando así ciertas inconsistencias de los mismos en la visualización del documento. Al utilizar el reset todos los valores se inicializan permitiendo que se muestre siempre lo mismo independientemente del navegador. [3] - General.css es un documento CSS creado por mí donde pondré los estilos que se desea utilizar. - 960.css es un documento css que permite utilizar “grids” y que explico a continuación. Universidad Politécnica de Valencia Página 36 5.1.2 960 Grid System Es un documento CSS que utilizando la etiqueta div permite maquetar paginas web de forma estática. El creador ha hecho diferentes versiones. La 960 se llama así porque ocupa un máximo de 960 pixeles. Permite usar 16 columnas de 40 px o usar 12 de 60. Imagen 5.1.2 Plantilla generalmente usada para trabajar con grids mostrando las medidas. Como se puede observar en la imagen 5.1.2 se trata de montar cuadrados con contenidos, pero a diferencia de una tabla u otros sistemas estos son estáticos y no varían. Aunque no se aprecie en la imagen solo marcan el ancho de los grids, y se pueden mezclar cualquier tipo de grids en la misma línea. También permite hacer sub-grids. El diseño de grids que propongo se explicará en la sección 5.1.3. Existen otras versiones con mayor o menor ancho pero la más popular es la 960. Es una cifra que permite un buen equilibrio ya que aun hoy en día existe mucha gente que utiliza resoluciones de 800x600 o 1200x700, con mayores resoluciones puede parecer un error usar 960 pixeles de ancho pero el objetivo es que el tamaño sea “bueno” para la mayoría de potenciales clientes. [5] Nota: Desde el cliente se sigue pudiendo alterar tamaños de fuente o ampliar el numero de pixeles como por ejemplo CTR+Rueda ratón que en Firefox amplia la pagina pudiendo ajustarla a lo que quiera el cliente. PFC: Pedro Alfaro Fernández Página 37 5.1.3 Twig Twig es un sistema de plantillas para la programación PHP que viene incluido en Symfony2, es open source. En realidad Symfony2 también soporta plantillas PHP pero yo me decante por usar las plantillas twig porque son altamente recomendables al ser más sencillas, seguras y flexibles que las plantillas PHP:  Symfony2 Traduce las plantillas twig a código PHP optimizado reduciendo en mucho la cantidad de código que generaría usando plantillas PHP.  Twig tiene un sistema de evaluación de código que permite evitar que los usuarios puedan modificar el diseño de las plantillas.  Twig permite definir etiquetas, funciones y servicios. [4] Una de las características mas interesantes de Twig es que permite herencia múltiple y eso me ha permitido desarrollar un sistema de templates de tal forma que cada pantallazo de la aplicación puede tener hasta 6 plantillas twig detrás. Por ejemplo la pantalla de Productos se genera con: - Base.html.twig: contiene cosas generales como por ejemplo los css.(No hace referencia a imagen porque no tiene contenido visible, aunque si estructura, css…) - Layout.html.twig: Extiende de base y tiene la estructura general de la aplicación así como la barra lateral y los títulos, también incluye el menú desde menú.html.twig. (Figura 5.1.3.1) - listatodos.html.twig: Que extiende de layout.html.twig la estructura y la parte lateral. Tiene las cosas características de esa ventana como la búsqueda e incluye la tabla de productos que esta en lineaproductos.html.twig. (Figura 5.1.3.2) - menuadmin.html.twig o menú.html.twig: que esta incluido dependiendo de que usuario haya pedido ver la plantilla.(Se aprecia que esta incluida en layout.html.twig en la figura 5.1.3.1) - Lineaprodustos.html.twig: esta incluida en “listatodos” y es lista de grids con los productos y las opciones. (Figura 5.1.3.3) Universidad Politécnica de Valencia Página 38 Figura 5.1.3.1 Representa el layout.html.twig Figura 5.1.3.2 Representa la selección concreta, como por ejemplo productos. PFC: Pedro Alfaro Fernández Página 39 Figura 5.1.3.2 Representa la selección concreta, como por ejemplo productos. Para que nos hagamos idea de la potencia de estas plantillas, se pueden cambiar todos los listados de productos (en los pedidos, en el carrito, o en la búsqueda de productos) de un solo plumazo editando solo un fichero. También se pueden cambiar todas las barras laterales cambiando el layout o los css cambiando base. 5.1.4 HTML HTML son las siglas de HyperText Markup Language es el lenguaje usado para las paginas web y permite hipertexto en forma de etiquetas. Como cualquier página web esta utiliza HTML para la presentación final ante el usuario. Aunque todo el HTML de la aplicación en este caso esta dentro de las plantillas twig. 5.2 Capa de aplicación o capa de negocio En la capa de negocio se ha utilizado PHP, programándolo en el IDE Netbeans usando el framework Symfony en la versión 2.0 aunque en el proceso de desarrollo se han actualizado el framework en parte por el sistema de validaciones ASSERTS que incluye symfony y que también he usado. También se ha usado yaml para realizar la estructuración del sitio así como las configuraciones sobre seguridad, autenticación y usuarios. Universidad Politécnica de Valencia Página 40 5.2.1 Symfony 2.0 Inicialmente la idea de Fabien Potencier era juntar varios frameworks existentes y empezó incluyendo Propel como ORM y Ruby on Rails para las plantillas. Symfony 2.0 es la segunda versión de Symfony. “Symfony es un completo framework diseñado para optimizar, gracias a sus características, el desarrollo de las aplicaciones web. Para empezar, separa la lógica de negocio, la lógica de servidor y la presentación de la aplicación web. Proporciona varias herramientas y clases encaminadas a reducir el tiempo de desarrollo de una aplicación web compleja. Además, automatiza las tareas más comunes, permitiendo al desarrollador dedicarse por completo a los aspectos específicos de cada aplicación. El resultado de todas estas ventajas es que no se debe reinventar la rueda cada vez que se crea una nueva aplicación web.”[6] Desarrollado en PHP 5.3, es compatible con Windows, Unix o Linux. Así como acepta BBDD como MySQL, PostgreSQL, Oracle o Microsoft SQL Server. Hoy día también admite e integra herramientas para usar Propel o Doctrine como ORMs aunque cada vez mas enfocado a Doctrine 2.0. [6] Características básicas: [6] [7]  Fácil de instalar y configurar en la mayoría de plataformas, aunque es preferible para el desarrollo de grandes aplicaciones Web que para pequeños proyectos. No puedo más que asentir pero como explico anteriormente la curva de aprendizaje del uso del framework no es pronunciada pero una vez aprendidas cosas puede ser una herramienta muy potente y agilizar mucho el desarrollo. No es un framework recomendable para hacer un Proyecto final de carrera pero si es muy recomendable para trabajo en equipo de varias personas.  Es independiente del SGBD, se pueden usar varios distintos como MySQL, PostgreSQL, Oracle o Microsoft SQL Server.  Sigue el MVC y por lo tanto separa las lógicas del sistema consecuentemente a lo explicado en el apartado 4.2.  Basado en la premisa convenir y no configurar. (CoC - Convención sobre Configuración). Se acuerda una configuración pre-establecida que permite al programador ponerse a trabajar sin tener que preocuparse por ello.  Usa PHP con OOP (Programación Orientada a Objetos) y requiere PHP 5 aunque es altamente recomendable que sea la versión 5.3 o superior.  Sigue la mayoría de las mejores prácticas y patrones de diseño para la web.  Versión estable.  Fácil de extender permitiendo la integración con librerías de terceros. PFC: Pedro Alfaro Fernández Página 41 Características de automatización, Symfony automatiza la mayoría de elementos comunes de los proyectos web, como por ejemplo:  La capa de internacionalización que incluye Symfony permite la traducción de los datos y de la interfaz, así como la adaptación local de los contenidos.  La capa de presentación utiliza plantillas y layouts que pueden ser creados por diseñadores HTML sin ningún tipo de conocimiento del framework. Los helpers incluidos permiten minimizar el código utilizado en la presentación, ya que encapsulan grandes bloques de código en llamadas simples a funciones.  Los formularios incluyen validación automatizada y relleno automático de datos ("repopulation"), lo que asegura la obtención de datos correctos y mejora la experiencia de usuario.  Los datos incluyen mecanismos de escape que permiten una mejor protección contra los ataques producidos por datos corruptos.  La gestión de la caché reduce el ancho de banda utilizado y la carga del servidor.  La autenticación y la gestión de credenciales simplifican la creación de secciones restringidas y la gestión de la seguridad de usuario.  El sistema de enrutamiento y las URL limpias permiten considerar a las direcciones de las páginas como parte de la interfaz, además de estar optimizadas para los buscadores.  Los listados son más fáciles de utilizar debido a la paginación automatizada, el filtrado y la ordenación de datos. Symfony además tiene una potente línea de comandos que facilitan generación de código, lo cual contribuye a ahorrar tiempo de trabajo. Aunque no he utilizado generadores automáticos exceptuando los de doctrine porque en la versión 2.0.0 de Symfony2 eran aun muy pobres y tenían escasa documentación, pero lo cierto es que han aumentado mucho ese tipo de herramientas. Algunos de los generadores que he visto serían de clases con mapeados incluidos, de vistas, de autenticaciones o de listados. Symfony tiene muchas ventajas que facilitan la vida de los desarrolladores, automatizando algunas cosas o simplificando las tareas complejas. [7] Todos los errores y las operaciones de la base de datos se muestran por el framework [7]. Permitiendo un entorno de desarrollo más informado. 5.2.2 Netbeans con symfony Symfony 2 es un framework pensado para aplicaciones web y debido a que los servidores web son en su mayoría Linux, suelen centrarse en entornos de desarrollo para Linux. Por ejemplo a la salida de Symfony2, en el manual de instalación no estaban algunos pasos necesarios para Windows. Universidad Politécnica de Valencia Página 48 Los diferentes apartados se explican a continuación: A) Cabecera: siempre que quieras podrás hacer clic en nuestro logo o nombre la tienda para ir a la pantalla de Inicio. B) Menú: Usa el menú para navegar entre las diferentes secciones de la web. C) Sub-menú: Aparece cuando son necesarias opciones especiales en una sección. D) Titulo: Junto con el nombre que aparece en la pestaña de tu navegador, te informa de en que sección estas. E) Barra lateral: Aquí podrás ver siempre tu estado así como las opciones de autenticación. También podrás ver tu carrito de la compra. F) Pie de página: Da información sobre la web como el copyright. 7.2 Tu estado En la barra lateral aparece siempre tu estado. 1) Si nunca te has registrado, por favor regístrate, solo te costara unos segundos y será necesario para comprar. 2) Si ya te has registrado anteriormente por favor introduce tu alias y contraseña para acceder. Si has olvidado tu contraseña, ve a la sección de contacto y contacta con nosotros. 3) Si ya has iniciado sesión y deseas salir por favor dale a “cerrar sesión”. 7.3 Secciones: El Menú es el centro de la navegación en el portal, úsalo para desplazarte entre las diferentes secciones, para simplificar nos referiremos al menú explicando las rutas con la forma: Menú>Apartado. El menú de un usuario: El menú de un administrador: PFC: Pedro Alfaro Fernández Página 49 7.3.1 Inicio Inicio es la pantalla de presentación de nuestra tienda, puedes verla siempre que quieras haciendo clic en Menú>Inicio o sobre nuestro logo o nombre. 7.3.2 Productos Aquí tienes disponible un listado con todos los productos de la tienda. Podrás entrar desde Menú>Productos. Esta sección dispone de sub-menú para poder acotar tus búsquedas. Para ver la sección de administración de productos ir a la sección de administrador. Universidad Politécnica de Valencia Página 50 Figura 7.3.2 Muestra una búsqueda en Productos realizada por un usuario anónimo. Búsqueda Marca los parámetros que te interesen para la búsqueda y clica en filtrar resultados.  Puedes marcar tu búsqueda por el tipo de producto: película, serie, música o libros. Si no marcas nada o marcas todos, buscara entre todos los productos.  Búsqueda por palabras clave, si quieres puedes poner aquí palabras relacionadas con el producto y si están en el nombre o en la descripción te los encontrará. PFC: Pedro Alfaro Fernández Página 51  Búsqueda por rango de precios, marca el precio máximo y/o el precio mínimo para ver solo los productos cuyo precio encaje en tus preferencias.  Ordena tu búsqueda según prefieras, por el nombre o por el precio, ya sea de forma ascendente o descendente. Puedes hacer cualquiera de las combinaciones que nuestro buscador encontrara por ti los productos que encajen en esa descripción. Información La información sale en forma de una lista de elementos donde puedes ver el nombre y la descripción de todos y cada uno de los elementos y a su derecha una serie de iconos y el precio del artículo. El precio que ves en la lista es el precio definitivo, los descuentos ya han sido aplicados. La Lupa significa “Ver detalles de producto” y te dirige a una pantalla con toda la información detallada sobre ese producto. También puedes acceder a los detalles del producto haciendo clic sobre su nombre. El carrito de la compra con la flecha verde permite añadir un producto al carrito. Los colores del Semáforo te informan de la cantidad de elementos de ese producto que quedan en nuestra tienda. Verde es que tenemos en grandes cantidades, amarillo es que estamos cerca de agotarlo y rojo significa que se ha agotado y no podremos venderlo hasta recibir nuevos productos. Siendo rojo, el producto aun se podrá vender, solo tendrás que esperar a que se reponga. Cuando un producto tiene esta etiqueta es que es un producto reciente, una novedad y lo estamos vendiendo desde hace menos de 20 días. 7.3.3 Carrito Aquí es donde se almacenarán los productos que vayas eligiendo y podrás verlo siempre que quieras, tienes una versión reducida en la barra lateral pero en esta sección podrás ver todos los detalles. Desde aquí podrás comprar. Universidad Politécnica de Valencia Página 52 Puedes acceder al carrito desde el menú o haciendo clic sobre la imagen del carrito de la barra lateral. En el carrito de la compra puedes ver lo que has ido añadiendo, los detalles como el número de elementos añadidos y el precio de cada uno de ellos así como el precio total de una línea. Haciendo clic sobre el carrito añadirás un elemento a tu lista de ese producto. Si lo prefieres puedes escribir en el cuadro de texto el número de elementos que deseas añadir y hacer clic sobre el botón “send”. También te aparece el precio de todo el carrito de la compra con la forma: Coste Total = XX.XX. Puedes comprar todos los productos haciendo clic sobre “Continuar con la compra” . O puedes vaciar el carrito haciendo clic sobre “Vaciar el carrito” o sobre la imagen : . Siempre puedes hacer clic sobre vaciar carrito desde la barra lateral. Si quieres continuar añadiendo productos haz clic sobre Menú>Productos. PFC: Pedro Alfaro Fernández Página 53 7.3.4 Contacto En la página de contacto esta explicado quienes somos y donde encontrarnos, puedes llegar a ella a través de Menú>Contacto o desde Inicio a través del enlace en “encontrar aquí”. Figura 7.3.4 Muestra la página de contacto. Puedes ver toda la información de como contactar con nosotros: llamarnos por teléfono, enviarnos un fax, mandarnos un correo electrónico, una carta o venir a vernos en persona. Universidad Politécnica de Valencia Página 54 7.3.5 Privacidad Aquí puedes encontrar información sobre las políticas de la empresa a la hora de manejar tus datos. Puedes verlo haciendo clic en Menú>Privacidad o haciendo clic en cualquiera de los links referentes al copyright. 7.3.6 Ayuda Aquí encontraras toda la ayuda para entender nuestra tienda y como moverte por ella. Incluyendo este manual de usuario. 7.3.7 Mi perfil Aquí puedes ver información referente a tus datos en la tienda. También podrás ver todos tus pedidos y en que estado se encuentran. Permitiéndote en todo momento acceder a toda tu información. Podrás desde aquí haciendo clic sobre un pedido verlo en detalle. Figura 7.3.7 Mi perfil de un cliente. PFC: Pedro Alfaro Fernández Página 55 7.3.8 Sección de administración Las siguientes secciones solo son accesibles habiendo accedido a la tienda como administrador: 7.3.8.1 Administrar Productos Aquí tienes disponible un listado con todos los productos de la tienda. Podrás entrar desde Menú>Productos. Esta sección dispone de sub-menú para poder acotar tus búsquedas. Búsqueda La búsqueda del administrador es idéntica a la del usuario, exceptuando la característica descatalogados que permite a un administrador buscar entre los artículos que en algún momento se eliminaron del catálogo público.  Marca la casilla descatalogados para ver los productos que ya no están en catálogo pero que alguna vez lo estuvieron.  Puedes marcar tu búsqueda por el tipo de producto: película, serie, música o libros. Si no marcas nada o marcas todos, buscará entre todos los productos.  Búsqueda por palabras clave, si quieres puedes poner aquí palabras relacionadas con el producto y si están en el nombre o en la descripción te los encontrará.  Búsqueda por rango de precios, marca el precio máximo y/o el precio mínimo para ver solo los productos cuyo precio encaje en tus preferencias.  Ordena tu búsqueda según prefieras, por el nombre o por el precio, ya sea de forma ascendente o descendente. Puedes hacer cualquiera de las combinaciones que nuestro buscador encontrara por ti los productos que encajen en esa descripción. Información La información sale en forma de una lista de elementos donde puedes ver el nombre y la descripción de todos y cada uno de los elementos y a su derecha una serie de iconos, “Modificar” y el precio del artículo. El precio que ves en la lista es el precio definitivo, los descuentos ya han sido aplicados. Universidad Politécnica de Valencia Página 56 Haciendo clic sobre el nombre de un producto podrás ver los detalles pero no editarlos. El enlace “Modificar” te permite ir al formulario de edición de productos donde podrás cambiar todos los atributos de ese producto. Haz clic en el aspa roja para descatalogar un producto. Los colores del Semáforo te informan de la cantidad de elementos de ese producto que quedan en nuestra tienda. Verde es que tenemos en cantidad, amarillo es que estamos cerca de agotarlo y rojo significa que se han agotado. Cuando un producto tiene esta etiqueta es que es un producto reciente, una novedad y lo estamos vendiendo desde hace menos de 20 días. Barra lateral Además del estado que siempre esta presente en la barra lateral. También hay 4 imágenes que representan los cuatro tipos de productos de nuestra web con un signo más delante. Cada uno de ellos se utiliza para ir al formulario de creación de un nuevo producto del tipo correspondiente. Añadir un libro nuevo. Añadir un elemento nuevo de música. Añadir una nueva película. Añadir una nueva serie o una temporada nueva de una serie ya existente. 7.3.8.2 Pedidos Sección del portal destinada a la administración de pedidos. Tendrás que marcar los envíos y los pagos en esta sección para mantener los datos de la tienda al día. Esta sección dispone de sub-menú para poder acotar tus búsquedas. PFC: Pedro Alfaro Fernández Página 57 Búsqueda La búsqueda de pedidos te permite dos cosas:  Buscar un pedido en concreto usando el código de identificación que todos los pedidos tienen y es único.  O buscar utilizando un margen de fechas, en el margen puedes poner una o dos fechas y buscará los pedidos realizados entre esas dos fechas. Ten en cuenta que debido a que el identificador es único, no tiene sentido y no es posible realizar una búsqueda usando tanto el identificador como las fechas. Cuando hayas rellenado los campos que quieras haz clic en filtrar resultados. Información De cada uno de los pedidos puedes ver: - Los nombres de los clientes que han realizado el pedido. Haciendo clic sobre ellos te llevara a la sección ver cliente donde podrás ver tanto sus datos como sus pedidos. - La dirección de facturación del pedido. - Si el pedido ha sido pagado ya o aún no ha sido pagado. - Si el pedido ha sido enviado ya por mensajería o esta por enviar. - La fecha y hora de la realización del pedido. - El precio pagado por el pedido. - Ver el pedido detallado haciendo clic sobre la lupa. - Enlaces para gestión. Enviado/No enviado, Pagado/No pagado. Representa SI. Y representa NO. Gestión Para gestionar los pedidos el Administrador debería marcar como no pagados aquellos pedidos que han tenido algún tipo de error en el cobro. O han cancelado sus transacciones en los 3 días que dan de margen los bancos. Cuando un pedido que ha tenido incidencias en el pago se cobra, por banco o en persona. Se debe marcar el pedido como pagado.