Diseño e implementación de una tienda virtual

PROYECTO FINAL DE CARRERA DISEÑO E IMPLEMENTACIÓN DE UNA TIENDA VIRTUAL CURSO 2009/2010 Código proyecto: DISCA 29-17A /09 Autor Francisco Aroca Martínez Director Sergio Sáez Barona Diseño e implementación de una tienda virtual 2 Agradecimientos. Quiero dar las gracias a mi mujer y a mi hija por su apoyo y comprensión incondicional durante estos tres años. Sabré recompensaros por vuestra paciencia. Os quiero. Diseño e implementación de una tienda virtual 3 Índice general 1. INTRODUCCIÓN. ............................................................................................................................... 5 2. ESPECIFICACIÓN DE REQUISITOS. ....................................................................................................... 7 2.1. INTRODUCCIÓN ........................................................................................................................... 7 2.1.1. PROPÓSITO. ........................................................................................................................ 7 2.1.2. ÁMBITO. .............................................................................................................................. 7 2.1.3. DEFINICIONES, ACRÓNIMOS Y ABREVIATURAS…………………………………………………………………8 2.1.4. REFERENCIAS. ...................................................................................................................... 9 2.1.5. VISIÓN GLOBAL.................................................................................................................... 9 2.2. DESCRIPCIÓN GENERAL. .............................................................................................................. 9 2.2.1. PERSPECTIVA DEL PRODUCTO. .............................................................................................. 9 2.2.2. FUNCIONES DEL PRODUCTO. ............................................................................................... 10 2.2.3. CARACTERÍSTICAS DEL USUARIO. ........................................................................................ 10 2.2.4. RESTRICCIONES GENERALES. ............................................................................................... 10 2.2.5. SUPUESTOS Y DEPENDENCIAS. ............................................................................................ 11 2.3. REQUISITOS ESPECÍFICOS. .......................................................................................................... 11 2.3.1. REQUISITOS DE INTERFACES EXTERNAS. ............................................................................. 11 2.3.2. REQUISITOS FUNCIONALES.................................................................................................. 12 2.3.3. REQUISITOS DE RENDIMIENTO. ........................................................................................... 16 2.3.4. RESTRICCIONES DE DISEÑO. ................................................................................................ 16 2.3.5. ATRIBUTOS. ......................................................................................................................... 17 3. ANÁLISIS ......................................................................................................................................... 18 3.1. INTRODUCCIÓN. ......................................................................................................................... 18 3.2. DIAGRAMA DE CLASES. ............................................................................................................... 18 3.3. CASOS DE USO. ........................................................................................................................... 19 3.4. DIAGRAMAS DE SECUENCIA. ...................................................................................................... 22 4. DISEÑO. .......................................................................................................................................... 29 4.1. INTRODUCCIÓN. ......................................................................................................................... 29 4.2. ARQUITECTURA MULTICAPA. ..................................................................................................... 29 4.2.1. NIVEL DE PRESENTACIÓN. ................................................................................................... 30 4.2.2. NIVEL DE LÓGICA DE LA APLICACIÓN. .................................................................................. 33 4.2.3. NIVEL DE DATOS O PERSISTENCIA. ...................................................................................... 33 Diseño e implementación de una tienda virtual 4 4.3. DIAGRAMA ENTIDAD RELACIÓN. ................................................................................................ 34 4.4. DISEÑO LÓGICO. ......................................................................................................................... 35 5. IMPLEMENTACIÓN. ........................................................................................................................ 37 5.1. TECNOLOGÍAS............................................................................................................................. 37 5.1.1. HTML. .................................................................................................................................. 37 5.1.2. CSS. ..................................................................................................................................... 38 5.1.3. JAVASCRIPT. ........................................................................................................................ 38 5.1.4. PHP. .................................................................................................................................... 38 5.1.5. MYSQL................................................................................................................................. 39 5.2. HERRAMIENTAS. ......................................................................................................................... 39 5.3. DETALLES DE IMPLEMENTACIÓN. ............................................................................................... 39 5.3.1. IDENTIFICACIÓN. ................................................................................................................. 39 5.3.2. ACCESO RESTRINGIDO. ........................................................................................................ 41 5.3.3. LOGOUT. ............................................................................................................................. 43 5.3.4. COMPROBACIÓN DE CAMPOS. ............................................................................................ 43 5.3.5. VALIDACIÓN DEL CORREO ELECTRÓNICO. ........................................................................... 44 5.3.6. VALIDACIÓN DEL CÓDIGO POSTAL. ..................................................................................... 44 5.3.7. MODIFICAR ESTADO PEDIDO. .............................................................................................. 45 6. EVALUACIÓN Y PRUEBAS. .............................................................................................................. 47 6.1. EVALUACIÓN. ............................................................................................................................. 47 6.2 PRUEBAS. .................................................................................................................................... 47 6.2.1 PRUEBAS DE VALIDACIÓN. ................................................................................................... 47 6.2.2. COMPROBACIÓN DE ENLACES ROTOS. ................................................................................ 48 6.2.3. COMPROBACIÓN CON OTROS NAVEGADORES. ................................................................... 49 6.2.4. OTRAS PRUEBAS. ................................................................................................................. 50 7. CONCLUSIÓN. ................................................................................................................................. 62 8. BIBLIOGRAFÍA. ................................................................................................................................ 64 Diseño e implementación de una tienda virtual 5 1. Introducción. Nuestro objetivo va a ser el desarrollo de una tienda virtual enfocada a la venta de productos informáticos. La aplicación a desarrollar, Info-Star ofrecerá la funcionalidad que disponen las tienda en la red, dispondrá de un catálogo de productos de material informático donde se podrá visualizar sus características técnicas más importantes y por supuesto tendremos la opción de poder comprarlos. Nuestra aplicación tendrá clasificados los productos por categorías, además para poder facilitar la localización de nuestro material informático, se dispondrá de una pequeña aplicación que realizará la búsqueda por palabras clave. Dependiendo del tipo de usuario se dispondrá de unas opciones o de otras, tendremos tres tipos de usuarios. El usuario anónimo será el que menos funcionalidades tenga, podrá navegar por nuestra web, ver productos y añadirlos al carro, pero no podrá efectuar la finalización de la compra hasta que no se registre o se identifique, una vez realizada cualquiera de estas operaciones se convertirá en usuario registrado el cual ya podrá finalizar la compra. El usuario con más privilegios será el usuario administrador, que además de disponer de las funcionalidades anteriores podrá gestionar el catálogo de productos, administrar clientes, categorías… En resumen se trata de desarrollar una aplicación para facilitar la venta de material informático así como ayudar a su gestión, de una forma sencilla y clara para los usuarios y el administrador de la aplicación. Los objetivos concretos consistirán en: - Mostrar un catálogo de los productos a nuestros posibles clientes. - Permitir la compra de los productos que aparezcan en nuestra aplicación. - Facilitar el mantenimiento de dicho catálogo. Los resultados y productos que se piensan obtener: - Una aplicación web para dar a conocer nuestros productos. - Facilitar la gestión tanto del material como de los usuarios. El método para guiar el desarrollo del proyecto se basará en las siguientes etapas: - La especificación de requisitos basada en la definición de casos de uso. - El proceso de análisis basado en modelos UML. - La definición de la arquitectura basada en tres capas. Diseño e implementación de una tienda virtual 6 - La codificación de un prototipo de la aplicación. - La realización de pruebas técnicas del sitio Web. Los recursos disponibles consistirán en: - Un entorno de diseño Web basado en herramientas convencionales. WAMP el cual incluye PHP5, MySQL y Apache. - Un servidor Web. - Un plazo de dos meses. - Un alumno con dedicación completa. Diseño e implementación de una tienda virtual 7 2. Especificación de requisitos. Nuestra memoria correspondiente al desarrollo de una aplicación de una tienda virtual de productos informáticos, se va a desarrollar en base al estándar de especificación de requisitos de software IEEE 830/98. 2.1. Introducción. En este apartado vamos a pasar a describir, el propósito, su ámbito, definiciones, acrónimos y abreviaturas, las referencias de la especificación y la visión global de nuestro proyecto. 2.1.1. Propósito. La ERS (especificación de requisitos) nos servirá de base para desarrollar nuestra aplicación Web en forma de una tienda virtual de venta de productos informáticos, detallar los requisitos de diseño de interfaz, contenidos y funcionalidad de la misma. Así como la especificación de los objetivos que queremos conseguir. 2.1.2. Ámbito. Nuestro proyecto consistirá en la creación de una tienda virtual enfocada a la venta de productos informáticos, la cual estará dirigida hacia todo tipo de usuarios, tanto usuarios domésticos como a usuarios de ámbito profesional. En nuestra Web Info-Star se podrá navegar dentro de un catálogo de productos, de forma libre sin necesidad de que el usuario se registre, estas consultas se harán a través de las distintas categorías existentes además de poder realizar una búsqueda, con una pequeña aplicación mediante palabras clave. Dentro de las categorías se encontrarán todos los productos clasificados, será el administrador el responsable de realizar la gestión de este material así como su correcta organización. Todos los productos constarán de una descripción, fotografía, precio y se podrá añadir a nuestro carrito de la compra, para efectuar la compra de cualquier producto añadido a nuestro carrito, el usuario deberá darse de alta en nuestra base de datos o si ya lo está, identificarse. La gestión de nuestros Web será realizada por un usuario especial, el administrador, en el cual recaerá la responsabilidad de realizar el mantenimiento del catálogo de productos, altas y bajas de material, así como de gestionar pedidos y usuarios. Diseño e implementación de una tienda virtual 8 2.1.3. Definiciones, acrónimos y abreviaturas. Tienda virtual: Esté término hace referencia a la aplicación informática capaz de ofrecer acceso a productos donde estos se pueden comprar y pagar por mediación de cualquier medio electrónico a través de la red. Donde se suelen dar servicios muy similares a los de una tienda física Login: Es el nombre con el que se identifica a un usuario, que con anterioridad ha realizado un proceso de registro, suele formarse con un código alfanumérico de varios dígitos. Dependiendo de la aplicación se le pueden asignar distintos roles y accesos. Password: palabra de paso o clave se acceso, permite el acceso a una persona, se le pueden asignar permisos. Compuesta al igual que el login por un conjunto alfanumérico de varios dígitos. Usuario anónimo: Usuario que visita el portal y del cual no se tiene información de registro. Usuario registrado: Usuario que ha realizado el proceso de registro y por lo tanto se dispone de información personal para identificarlo y personalizar su visita a la Web. Servidor: Máquina que se encarga de ejecutar la aplicación para que los usuarios, clientes, puedan acceder a recursos y páginas. Cliente: Cualquier elemento de un sistema de información que requiere un servicio mediante el envió de solicitudes al servidor. Navegador: Aplicación para visualizar documentos WWW y navegar por Internet. En su forma más básica son aplicaciones hipertexto que facilitan la navegación por los servidores de navegación de Internet. Protocolo: Conjunto de reglas y/o procedimientos para la transmisión de datos que ha de ser observado por los dos extremos de un proceso comunicacional. Acrónimos. HTML: HyperText Markup Language. Lenguaje de marcado de hipertexto, es el lenguaje estándar para describir el contenido y apariencia de las páginas en la Web. Web: Por esté término se conoce a WWW ( World Wide Web), le red de redes, es básicamente un medio de comunicación de texto, gráficos y otros objetos multimedia a través de internet. HTTP: Hyper Text Transfer Protocol, protocolo de transferencia de hipertexto, es el método más común de intercambio de información en la Web. PHP: Es un lenguaje de programación interpretado, diseñado originalmente para la creación de páginas Web dinámicas, usado en el lado del servidor. MySQL: Es un sistema de gestión de base de datos relacional, multihilo y multiusuario. SQL: Lenguaje de consulta estructurado, structured query language, es un lenguaje declarativo de acceso a base de datos relacionales que nos permite especificar diversos tipos de operaciones en estas. Diseño e implementación de una tienda virtual 9 WAMP: Usado para describir un sistema de infraestructuras de internet que usa, Windows como sistema operativo, Apache como servidor Web, MySQL como gestor de base de datos y PHP como lenguaje de programación. CSS: Cascading Style Sheets, hojas de estilo en cascada, es un lenguaje usado para definir la presentación de un documento escrito en HTML o XML. JavaScript: es un lenguaje de scripting basado en objetos no tipeado y liviano, utilizado para acceder a objetos en aplicaciones, no requiere compilación. UML: Unified Modeling Language, Lenguaje Unificado de Modelado, se trata de un lenguaje gráfico para construir, documentar, visualizar y especificar un sistema software. IEEE: Institute of Ekectrical and Electronics Engineers , es una asociación técnico-profesional mundial dedicada a la estandarización. 2.1.4. Referencias. WORLD WIDE WEB CONSORTIUM (W3C). Documentos, guías y estándares. [Consulta: 02 de noviembre de 2010]. Disponible en: http://www.w3c.es WIKIPEDIA LA ENCICLOPEDIA LIBRE. Definiciones. [Consulta: 05 de noviembre de 2005].Disponible en: http://es.wikipedia.org REAL ACADEMIA ESPAÑOLA. Ortografía. [Consultas: 08 de noviembre de 2010]. Disponible en: http://rae.es Buendía García, Félix. Guía para la realización y supervisión de proyectos de final de carrera (PFC) en el ámbito de la web. Valencia: Editorial UPV. ISBN 9788483633250. APUNTES ISG. Esquemas y división proyecto. [Consulta: 02 de noviembre de 2010]. Disponible en: http://poliformate.upv.es 2.1.5. Visión global. Vamos a centrar la especificación de requisitos en la descripción de la aplicación, sus características, sus restricciones generales, sus funciones, sus supuestos y dependencias, que son las que nos aportarán una mayor información del proyecto a desarrollar. Cuando terminemos de desarrollar la descripción general, pasaremos a la descripción de los requisitos específicos de nuestra aplicación. 2.2. Descripción general. En la descripción general se aborda la perspectiva del producto, los distintos usuarios que utilizarán la aplicación, restricciones, supuestos y dependencias de nuestro proyecto. 2.2.1. Perspectiva del producto. Info-Star, nuestra aplicación, realizará las funcionalidades normales que implementa cualquier tienda virtual, venta y búsqueda de productos, en nuestro caso material informático, la gestión y administración tanto de productos como de usuarios y pedidos. Diseño e implementación de una tienda virtual 16 Función listar pedidos (funcionalidad el administrador) Introducción: Dentro de esta función se podrá obtener un listado de pedidos realizados. Entradas: Los parámetros de búsqueda. Proceso: Nuestra aplicación efectuará una consulta dentro de la tabla correspondiente. Salida: El listado con los pedidos realizados. Función cambiar estado pedido (funcionalidad el administrador) Introducción: El administrador una vez comprobado el listado de pedidos, podrá cambiar el estado de los pedidos. Entradas: Información del estado de transferencias, mediante consulta manual de cuentas banco. Proceso: Una vez el administrador verifique que se han efectuado las transferencias bancarias, por el importe de los productos solicitados, listará los pedidos y realizará el cambio de estado a pendiente, preparado, agotado o servido. Salida: Volverá a la página principal de administración. 2.3.3. Requisitos de rendimiento. Inicialmente no se han determinado requisitos específicos de eficiencia, aunque serían necesarios algunos requerimientos para que nuestra aplicación se convirtiera en un producto cuya finalidad fuera su uso a nivel profesional. 2.3.4. Restricciones de diseño. Vamos a pasar a describir los estándares y las limitaciones de nuestro producto. Estándares cumplidos. Nuestro producto debe cumplir las especificaciones actuales de cualquier página Web dinámica actual, tanto las de lenguaje HTML como las de los estándares seguidos por las hojas CSS. De esta forma tendremos la máxima compatibilidad con cualquiera de los navegadores modernos y los costes de mantenimiento de nuestra aplicación serán menores. Deberemos cumplir con la actual ley de protección de datos, para asegurarnos de que la información que dispones en nuestra base de datos no es filtrada para ningún uso ilícito y asegurar al usuario poder dar de baja la información de carácter personal. Limitaciones Hardware. Inicialmente las posibles limitaciones a nivel hardware residen en la conexión que se disponga en el lado del cliente, ya que actualmente es muy raro que algún equipo no cumpla las características mínimas para garantizar un funcionamiento correcto. Diseño e implementación de una tienda virtual 17 El sistema operativo utilizado tampoco debería ser ningún impedimento para la correcta visualización y funcionamiento de nuestra aplicación. En cuanto al lado del servidor sus limitaciones vendrán dadas por la capacidad del mismo para satisfacer un número de accesos determinados de forma simultánea. 2.3.5. Atributos. Mantenimiento. El mantenimiento de nuestro sistema se realizará de una forma continuada por el administrador enviando sus peticiones al equipo de desarrolladores de la Web así como los posibles problemas que puedan ir surgiendo. Seguridad. Deberemos organizar un buen sistema de protección de información ya que en nuestra base de datos tendremos los datos personales de los usuarios que han efectuado su registro. Teniendo en cuenta que nuestro sistema funcionará en la red, donde es más viable un posible problema de seguridad. Diseño e implementación de una tienda virtual 18 3. Análisis 3.1. Introducción. En este apartado vamos a abordar la fase de análisis, con ayuda de la metodología UML se desarrollará un modelo de la aplicación donde diferenciaremos a los actores que interactúan con los objetos del sistema mediante distintas relaciones. Análisis por definición es el proceso de construcción de un modelo, o especificación detallada del problema del mundo real al que nos enfrentamos. Está desprovisto de consideraciones de diseño e implementación. Todo esto nos ayuda a crear un sistema robusto y mantenible. La notación que se va a utilizar es la proporcionada por el estándar UML. En nuestro caso usaremos los diagramas de clases, casos de uso y diagramas de secuencia. 3.2. Diagrama de clases. El primer paso va a ser la realización del diagrama de clases, es el diagrama principal para el modelado orientado a objetos. Representa las clases del sistema junto con sus relaciones estructurales agregación y asociación. También se definirán los atributos y operaciones. Con el diagrama de clases entenderemos que funciones pueden ser llevadas a cabo y quien las puede realizar. Como se pueden desarrollar y que tipo de objetos interactúan entre sí. Pasamos a describir nuestro diagrama. Tenemos tres tipos de usuarios, el usuario, que representará al usuario anónimo, es el más básico de ellos, solo podrá realizar consultas de productos y ver sus características asociadas. El usuario registrado será una especialización del usuario corriente el cual tendrá la opción añadida de poder efectuar las compras de los productos. Por otro lado tendremos el administrador que dispondrá de la posibilidad de gestionar el catálogo de productos, usuarios y listados de pedidos. La clase principal de nuestra aplicación es Tienda, que se compone distintas categorías, las cuales a su vez están formadas por productos. A continuación presentamos nuestro diagrama de clases, con las características descritas anteriormente: Diseño e implementación de una tienda virtual 19 3.3. Casos de uso. Un caso de uso es una técnica para la captura de requisitos potenciales de un nuevo sistema o una actualización de software. Cada caso de uso proporciona uno o más escenarios que indican cómo debería interactuar el sistema con el usuario o con otro sistema para conseguir un objetivo específico. Normalmente, en los casos de usos se evita el empleo de jergas técnicas, prefiriendo en su lugar un lenguaje más cercano al usuario final En otras palabras, un caso de uso es una secuencia de interacciones que se desarrollarán entre un sistema y sus actores en respuesta a un evento que inicia un actor principal sobre el propio sistema. Los diagramas de casos de uso sirven para especificar la comunicación y el comportamiento de un sistema mediante su interacción con los usuarios y/u otros sistemas. O lo que es igual, un diagrama que muestra la relación entre los actores y los casos de uso en un sistema. Una relación es una conexión entre los elementos del modelo, por ejemplo la especialización y la generalización son relaciones. Diseño e implementación de una tienda virtual 20 Los diagramas de casos de uso se utilizan para ilustrar los requerimientos del sistema al mostrar cómo reacciona a eventos que se producen en su ámbito o en él mismo. Después de esta breve introducción de los casos de uso pasamos a mostrar cada uno de ellos. Comenzamos por mostrar los actores que intervienen en nuestro sistema, que como ya sabemos son usuario, usuario registrado y administrador. Estos dos últimos especializan del usuario. En el siguiente diagrama tenemos las funcionalidades de todos los actores, empezamos por el usuario, las funciones que podrá realizar serán, identificarse, registrarse, realizar búsqueda de productos y ver la información general de los productos del catálogo, es decir navegar a nivel general por la Web. Además el usuario puede proceder al registro, convirtiéndose en usuario registrado. El usuario registrado además de poder realizar todo lo comentado anteriormente se le añadirá la funcionalidad de realizar los pedidos de los productos que crea oportuno. Diseño e implementación de una tienda virtual 21 Diseño e implementación de una tienda virtual 22 Por último el administrador dispone de las funcionalidades de gestión de productos, añadiendo, listando o quitando productos de nuestro listado, administración de categorías, pudiendo añadir nuevas categorías, listarlas o bien eliminar alguna de ellas, gestión de usuarios, teniendo la posibilidad de realizar un listado de usuarios registrados además de poder borrarlos, y por ultimo gestión de pedidos, consistente en el cambio de estado del pedido y la posibilidad de listarlos. 3.4. Diagramas de secuencia. Un diagrama de secuencia muestra la interacción de un conjunto de objetos en una aplicación a través del tiempo y se modela para cada método de la clase. El diagrama de secuencia contiene detalles de implementación del escenario, incluyendo los objetos y clases que se usan para implementar el escenario, y mensajes intercambiados entre los objetos. Típicamente se examina la descripción de un caso de uso para determinar qué objetos son necesarios para la implementación del escenario. Si se dispone de la descripción de cada caso de uso como una secuencia de varios pasos, entonces se puede "caminar sobre" esos pasos para descubrir qué objetos son necesarios para que se puedan seguir los pasos. Un diagrama de secuencia muestra los objetos que intervienen en el escenario con líneas discontinuas verticales, y los mensajes pasados entre los objetos como flechas horizontales. Escenario: Registrar. Desde esta opción, el usuario no registrado podrá darse de alta en la base de datos de nuestra aplicación. Inicialmente se nos pedirá que rellenemos un formulario con los datos personales, así como nuestro identificador y contraseña. Se comprobará que el identificador elegido no este dado de alta por otro usuario en nuestra base de datos, si ya existe mostraremos un mensaje advirtiéndolo, en caso contrario se efectuará el alta, con su respectiva pantalla de confirmación. Diseño e implementación de una tienda virtual 23 Escenario: Buscar producto. Desde esta opción cualquier usuario puede efectuar la búsqueda de un producto. Se buscarán las coincidencias dentro de la categoría seleccionada y se mostrarán los resultados en un listado. Escenario: identificarse. En la pantalla principal nos aparecerá la opción de identificación, para que los usuarios registrados o los usuarios administradores puedan introducir su identificador y correspondiente contraseña, para poder tener la funcionalidad correspondiente a su rol. Diseño e implementación de una tienda virtual 24 Escenario: Comprar producto. Una vez seleccionados los productos a comprar, se confirma que se quiere realizar la compra, se guardan los datos del pedido en nuestra base de datos se envía un mensaje de confirmación o en caso contrario un mensaje de advertencia. Escenario: alta categoría. El administrador una vez identificado, tiene la opción de introducir nuevas categorías en nuestro catálogo de productos. Para ello introducirá el nombre de la nueva categoría y se realizará el alta en nuestra base de datos. Diseño e implementación de una tienda virtual 25 Escenario: baja categoría. Al igual que la operación de alta será el administrador el encargado de efectuar las bajas de categorías. Se seleccionará la categoría que queremos borrar de nuestra base de datos y pulsando el botón de eliminar efectuaremos la operación indicada. Escenario: alta producto. Nuestro administrador, tendrá la función de dar de alta productos, para realizar esta operación deberá rellenar un pequeño formulario con el nombre del producto, precio, características… Diseño e implementación de una tienda virtual 32 En el pie de página hemos ubicado todo lo referente a gastos, envios, información de la empresa, normativa de compra, protección de datos y contacto, en la captura zona 4. La zona superior derecha hemos añadido una pequeña aplicación que nos permite realizar una búsqueda, introducendo una palabra o frase, nos dará como resultado todos los productos que contengan dicha clave, la hemos numerado con el 5. Para terminar la zona número 6, corresponde con la zona central de nuestra pantalla, donde nos iran apareciendo los productos, sus caracteristicas, los formularios de registro y acceso, los mensajes de erros o éxito … La siguiente captura corresponde con la zona de carrito de la compra, la cual se puede acceder con cualquiera de la usuarios a excepción de la última parte de confirmación de compra, no accesible para anónimos. Plantilla2 La zona 1 y 3 no varian, disponemos de las mismas opciones anteriormente explicadas. En la zona de navegación hemos añadido un botón que nos permitirá volver a la página anteriormente visitada. En el centro de la pantalla aparecerá el material que vamos añadiendo al carro para efectuar una posible compra, que como ya hemos comentado anteriormente, para poder finalizarse el usuario anónimo deberá identificarse o registrarse. La última de nuestras capturas corresponde a la zona de gestión, solo accesible por nuestro usuario administrador. Diseño e implementación de una tienda virtual 33 Plantilla3 Las zonas 1,2 y 3 se corresponden con las anteriormente explicadas, no han variado nada a nivel funcional,se ha modificado la accesibilidad disponible solo a usuarios administradores. En la parte central, zona 4, nos aparecerán las opciones de gestión del administrador, una vez elegidas accederemos a los formularios que nos permitirán realizar listados,cambios, altas y bajas de los distintos productos, usuarios, categorias y pedidos. 4.2.2. Nivel de lógica de la aplicación. Este nivel estará formado por un conjunto de funciones que agruparemos en librerías, estas funciones sustituyen a los métodos que tendrían las clases correspondientes a los diagramas de clases de UML. Su funcionalidad hará posible las operaciones descritas en apartados anteriores, conexión con la base de datos, manipulación de la base de datos, validación de usuarios y datos, registro socios, alta productos, listar usuarios, búsqueda de productos… La separación por capas nos permite tener una independencia entre niveles, de esta manera el mantenimiento y las posibles ampliaciones de la aplicación se realizarán de una forma sencilla, rápida y limpia. 4.2.3. Nivel de datos o persistencia. Este nivel estará formado por una base de datos relacional, la cual, almacenará todos los datos relacionados con nuestra aplicación Web, tanto usuarios registrados, como los datos de todos los productos de nuestro catálogo, las compras… Diseño e implementación de una tienda virtual 34 4.3. Diagrama entidad relación. A continuación tenemos el diagrama entidad relación que vamos a utilizar para la creación de nuestra base de datos. Diseño e implementación de una tienda virtual 35 4.4. Diseño lógico. TIENDA (id: int(10), nombre:varchar(25), dir:varchar(50)) CP: {id} VNN: {nombre,dir} Restricción de existencia de TIENDA a CATEGORÍA. CATEGORÍA (id: int(10), nombre: varchar(25), id_tienda: int(10)) CP: {id} VNN: {nombre,id_tienda} CAJ: {id_tienda} TIENDA Restricción de existencia de CATEGORÍA a PRODUCTO. PRODUCTO (id: int(10), nombre: varchar(50), descripción: varchar(300), id_categoría: int(10),id_subcategoría: in(10),imagen: varchar(15),precio: decimal(7)) CP: {id} VNN: {nombre, descripción, id_categoría,imagen,precio} CAJ: {id_categoría} CATEGORÍA. Restricción de existencia de PRODUCTO a CATEGORÍA. USUARIO (iden: varchar(20), contrasenya: varchar(30), id_tienda: int(10), tipo: varchar(20), nombre: varchar(50), apellidos: varchar(100), fecha_nacimiento: datetime, dirección: varchar(100), cp: int(10), población: varchar(30), país: varchar(50), correo: varchar(100)) CP: {iden} VNN: {contrasenya, tipo, nombre, apellidos, fecha_nacimiento, dirección, cp, población, país, correo} CAJ: {id_tienda} TIENDA Restricción Total y Disjunta. Diseño e implementación de una tienda virtual 36 PEDIDO (id: int(10),idem_usuario: varchar(50), fecha_pedido: datetime, estado:varchar(15),total: double(10,2), prod_nombre: varchar(50),prod_precio: double(10,2), prod_unidades: int(10), id_compra: int(10)) CP: {id} VNN: {idem_usuario, fecha_pedido, estado, total, prod_nombre, prod_precio, prod_unidades} CAJ:{id_compra}COMPRA COMPRA (id: int(10), id_pedido: int(10)) CP: {id,id_pedido} CAJ: {id_pedido} PEDIDO Diseño e implementación de una tienda virtual 37 5. Implementación. 5.1. Tecnologías. Para poder realizar toda nuestra aplicación hemos utilizado distintas tecnologías y lenguajes de programación. Inicialmente hemos necesitado simular un servidor Web para poder utilizar nuestra aplicación y ver las respuestas que luego se darán en un servidor real, dentro de la red. Para ello hemos optado por instalar XAMPP 1.7.3, que incorpora en un solo programa: - Apache versión 2.2.14, es el servidor Web. - PHP versión 5.3.1, lenguaje de programación interpretado, para webs dinámicas. - MySQL, junto con PhpMyADMIN que nos permite la creación y gestión de nuestras bases de datos. En nuestro diseño de interfaces hemos utilizado la programación con el lenguaje HTML y CSS, para darle una apariencia correcta a todas las páginas y que nos permita con el mínimo trabajo posible realizar modificaciones. Con JavaScript hemos realizado las comprobaciones de nuestros formularios, para así evitar que se dejen en blanco o se rellenen con espacios en blanco, además de comprobar el correo y nombre identificativo de los usuarios que se van a registrar. PHP ha sido el lenguaje elegido para desarrollar la lógica de la aplicación, ya que es uno de los lenguajes más utilizados en la red, el cual nos permite la realización de páginas dinámicas de una forma rápida y potente. Para el nivel de persistencia, hemos utilizado MySQL, que conjuntamente con PhpMyADMIN hemos podido crear y administrar nuestra base de datos de una forma cómoda y visual. 5.1.1. HTML. Corresponde a las siglas de HyperText Markup Language (lenguaje de marcado de hipertexto), es el lenguaje predominante en la elaboración de páginas Web que nos permite tener documentos estructurados y vinculados entre si. Es usado para describir la estructura y el contenido en forma de texto, así como para completar el texto con objetos tales como imágenes, tablas… Diseño e implementación de una tienda virtual 38 5.1.2. CSS. Las hojas de estilo en cascada o CSS, Cascading Style Sheets, es un lenguaje utilizado para definir la presentación de un documento estructurado, HTML o XHTML. Este tipo de lenguaje nos permite de una forma sencilla, definir todo tipo de formatos, colores… en definitiva la apariencia que le queremos dar a nuestra aplicación Web, inclusive podemos disponer de varias hojas de estilo, para que según que visitante o que usuario, según el navegador con el que accedemos, si queremos imprimir una página… Los cambios se realizan en una única página, no tenemos que ir página por página definiendo un nuevo estilo, con cambiar nuestro CSS es suficiente, es una forma muy efectiva y potente. 5.1.3. JavaScript. Javascript es un lenguaje de programación interpretado. Se define como orientado a objetos, débilmente tipado y dinámico. Se utiliza principalmente en su forma del lado del cliente, implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas. JavaScript se diseñó con una sintaxis similar al lenguaje C, aunque adopta nombres y convenciones del lenguaje de programación Java. 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). En nuestra aplicación, el JavaScript utilizado es básicamente para realizar operaciones de comprobación lanzando mensajes de advertencia y ubicando el foco en la parte del formulario que debemos rellenar de forma correcta. También lo hemos utilizado en nuestra barra de navegación, en el botón de volver atrás. 5.1.4. PHP. PHP es un lenguaje de programación interpretado, diseñado originalmente para la creación de páginas web dinámicas. Es usado principalmente en la interpretación del lado del servidor pero actualmente puede ser utilizado desde una interfaz de línea de comandos o en la creación de otros tipos de programas incluyendo aplicaciones con interfaz gráfica usando bibliotecas específicas. Nos permite la construcción de páginas Web con independencia del servidor y de la base de datos que estemos utilizando, con una compatibilidad completa en cualquier plataforma, además de integrarse de una forma completa con el código HTML. Diseño e implementación de una tienda virtual 39 5.1.5. MySQL. MySQL, Structured Query Languaje, es un sistema de gestión de base de datos relacional, multihilo y multiusuario. Una base de datos relacional almacena los datos en tablas separadas, lo cual hace que la velocidad y flexibilidad de trabajo sean muy grandes. Cada tabla esta enlazada mediante relaciones, con lo cual es posible combinar datos de varias tablas cuando realizamos una consulta. Este software es de código abierto, open source, con lo cual cualquier persona puede utilizarlo y modificarlo sin necesidad de realizar la compra del mismo. 5.2. Herramientas. Las herramientas utilizadas en el desarrollo de nuestra aplicación has sido: - XAMPP versión 1.7.3., el cual ya hemos comentado anteriormente, funcionando bajo el entorno de Windows 7 versión Ultimate. - DreamWeaver CS4, esta herramienta nos ha ayudado en la programación de HTML, aunque también la hemos utilizado de ayuda con la programación en PHP y pos supuesto para realizar nuestra hoja de estilos. -Con NetBeans hemos programado parte del código PHP, es un software gratuito y muy completo ya que aparte del lenguaje PHP te permite la programación en multitud de lenguajes orientados a objetos. -Para la creación del logotipo de la empresa hemos utilizado AAA.Logo 2008, con imágenes prediseñadas, es un software muy intuitivo que te permite la creación sencilla de logos. -ArgoUML, nos ha permitido la creación de todos los diagramas UML y su exportación en imágenes jpg. -Para el retoque y captura de imágenes hemos utilizado un clásico, el paint, con características más que suficientes para los pequeños arreglos que hemos necesitado. 5.3. Detalles de implementación. El índice o página principal es accesible por cualquier tipo de usuario, desde aquí si el visitante ya estaba registrado podrá acceder a la opción de identificación, de lo contrario deberá efectuar el alta en el sistema para poder proceder a la finalización de los posibles productos que se ofrecen en nuestra aplicación. Una vez el usuario identificado, si este es administrador, podrá acceder a las opciones de gestión de la aplicación. Vamos a proceder a detallar algunas de las funcionalidades más significativas que hemos implementado en la aplicación de nuestra tienda virtual. 5.3.1. Identificación. Desde registro.php realizaremos la comprobación de que el usuario existe y que corresponde con su contraseña, además de saber si el usuario es administrador o simplemente un usuario registrado. Diseño e implementación de una tienda virtual 40 Si alguno de los datos no son correctos nos redireccionará otra página donde se nos dará la opción de volver a introducir los datos o registrarnos. En el caso contrario la redirección nos dará las opciones de seguir navegando, seguir comprando o en el caso de ser administrador gestionar productos. <?php // *** Validate request to login to this site. if (!isset($_SESSION)) { session_start(); } $loginFormAction = $_SERVER['PHP_SELF']; if (isset($_GET['accesscheck'])) { $_SESSION['PrevUrl'] = $_GET['accesscheck']; } if (isset($_POST['usuario'])) { $loginUsername=$_POST['usuario']; $password=$_POST['contrasenya']; $MM_fldUserAuthorization = "tipo"; $MM_redirectLoginSuccess = "registro_correcto.php"; $MM_redirectLoginFailed = "error_registro.php"; $MM_redirecttoReferrer = false; mysql_select_db($database_conexion_bd, $conexion_bd); $LoginRS__query=sprintf("SELECT iden, contrasenya, tipo FROM usuario WHERE iden=%s AND contrasenya=%s", GetSQLValueString($loginUsername, "text"), GetSQLValueString($password, "text")); $LoginRS = mysql_query($LoginRS__query, $conexion_bd) or die(mysql_error()); $loginFoundUser = mysql_num_rows($LoginRS); if ($loginFoundUser) { $loginStrGroup = mysql_result($LoginRS,0,'tipo'); //declare two session variables and assign them $_SESSION['MM_Username'] = $loginUsername; $_SESSION['MM_UserGroup'] = $loginStrGroup; if (isset($_SESSION['PrevUrl']) && false) { Diseño e implementación de una tienda virtual 41 $MM_redirectLoginSuccess = $_SESSION['PrevUrl']; } header("Location: " . $MM_redirectLoginSuccess ); } else { header("Location: ". $MM_redirectLoginFailed ); } } ?> 5.3.2. Acceso restringido. El siguiente fragmento de código PHP, lo hemos incluido en la plantilla utilizada para crear todas las páginas correspondientes a la parte de gestión de nuestra aplicación. Desde este código se comprueba que el usuario registrado sea administrador, en el caso de no estar registrado lo redirigimos a la página acceso_restringido.php, donde aparece un mensaje con el aviso de que no está registrado y le damos la opción con un link de poder ir a la página de identificación. Si está registrado pero, no es administrador el mensaje le avisa que no tiene privilegios de administración. Por último si se comprueba que el usuario está registrado y es administrador no enviará al índice de administración, en el fichero index-admin.php. <?php if (!isset($_SESSION)) { session_start(); } $MM_authorizedUsers = "administrador"; $MM_donotCheckaccess = "false"; // *** Restrict Access To Page: Grant or deny access to this page function isAuthorized($strUsers, $strGroups, $UserName, $UserGroup) { // For security, start by assuming the visitor is NOT authorized. $isValid = False; // When a visitor has logged into this site, the Session variable MM_Username set equal to their username. // Therefore, we know that a user is NOT logged in if that Session variable is blank. Diseño e implementación de una tienda virtual 48 Para realizar la validación de nuestro código lo podremos realizar desde el servidor en que resida nuestra web, copiando directamente el código en la página o mediante un upload de la misma. La mayoría de errores que nos aparecen en las páginas de nuestra aplicación son debidos a la mezcla de código HTML con PHP, aunque son muy pocos. Lo mismo pasa con los warnings. La hoja de estilos nos da un par de errores, pero tras modificar las líneas correspondientes a los avisos, pasamos sin ningún problema la validación. Validación css 6.2.2. Comprobación de enlaces. Para realizar las pruebas de enlaces rotos hemos utilizado un programa libre llamado Xenu, el cual revisa todos los enlaces de la página seleccionada y muestra una lista indicando si existe algún problema con estos. Diseño e implementación de una tienda virtual 49 Comprobación enlaces 6.2.3. Comprobación con otros navegadores. Es conveniente realizar pruebas con otros navegadores para saber si nuestra aplicación se visualizará de la forma que realmente queremos. Hemos realizado las pruebas en los siguientes navegadores: - Firefox versión 3.6.12, con el cual no hemos tenido ningún problema de visualización. - Google Crhome, hemos descargado e instalado la última versión, 7.0.517.44, nuestra aplicación se visualiza de forma correcta. - Safari 5.0.3, la última versión del mercado, nos visualiza nuestra aplicación a la perfección, al igual que los anteriores navegadores. - Internet Explorer versión 8, nos descuadra las fichas de los productos, tanto en index.php, como en alguna de las categorías, categorias.php, era de esperar, no nos ha sorprendido. Diseño e implementación de una tienda virtual 50 I.Explorer8 6.2.4. Otras pruebas. Lógicamente a la vez que íbamos implementando nuestra aplicación, realizábamos pruebas unitarias y pruebas globales para verificar que el código hacia lo que creíamos y queríamos que tenía que realizar. Ahora que la aplicación está finalizada, vamos a capturar algunos ejemplos de los casos de uso para que a la vez que plasmamos esas pruebas que habíamos hecho con anterioridad, nos sirva como pequeño manual de uso de nuestra aplicación. Vamos a comenzar con la simulación de una compra, añadiendo productos a nuestro carrito, lo haremos inicialmente como un usuario anónimo el cual todavía no ha realizado el proceso de registro, de esta forma veremos la reacción de nuestra aplicación ante un usuario no registrado y como cuando se registra e identifica la aplicación actúa de manera distinta. Proceso de compra. Una vez accedemos a nuestra página principal, podemos ir visualizando productos en las distintas categorías. Nos aparecerán los productos clasificados por categorías, con su imagen, nombre, precio y un botón con un carro para añadirlos a nuestra compra. Diseño e implementación de una tienda virtual 51 Compra 1 Los detalles del producto, los podemos ver simplemente pulsando en la imagen del material que estemos interesados, entonces se abre otra página donde aparece el producto seleccionado, donde aparecerá la imagen, el nombre del producto, su descripción y el carrito para que se nos añada a nuestra compra. Compra 2 Diseño e implementación de una tienda virtual 52 Una vez pulsado el botón de añadir, el producto pasa a nuestro carrito, se añade una unidad del producto seleccionado, junto con su descripción y precio. Como podemos ver en la siguiente captura, se introduce la nueva unidad del material y se recalcula el total de la compra. Compra 3 Dentro de la columna unidades tenemos la opción de modificar el número de unidades, una vez introducida la nueva cantidad solo le tenemos que dar al pequeño icono que tenemos al lado, automáticamente se actualizarán las nuevas cantidades y se recalculara el precio del total de productos iguales y del total de la compra. Hemos añadido una columna llamada eliminar, que como indica su nombre borra de nuestro carrito los productos correspondientes a la línea donde hemos pulsado su icono. Una vez realizada esta operación se nos recalcula el importe total de la compra. Cuando hemos terminado de añadir los productos que necesitábamos, podemos pasar al proceso de realización de la compra, entonces dentro de carrito pulsamos el botón de comprar. Nos llevará al cuadro de resumen de productos añadidos a nuestro carro. Como muestra la imagen siguiente. Diseño e implementación de una tienda virtual 53 Compra 4 Es ahora cuando se nos muestra un resumen con los productos que hemos seleccionado, con su precio, unidades y total tanto unitario como el del conjunto de productos. Si alguno de los productos que aparecen lo hemos añadido por error o bien hemos decidido que no lo queremos, simplemente pulsamos volver atrás, para así poder modificar la compra. Cuando hemos repasado los productos de nuestro carrito pulsamos el botón que nos finaliza la compra. Compra 5 Diseño e implementación de una tienda virtual 54 Nos aparece este mensaje, debemos identificarnos si estamos registrados o en caso contrario tenemos que darnos de alta. Como no estamos registrados vamos a proceder a darnos de alta rellenando el siguiente formulario. Compra 6 Si alguno de los campos, lo dejamos en blanco, o solo introducimos espacios o bien cuando nos piden repetir alguno de los campos no lo hacemos correctamente, se lanzará un mensaje de advertencia para que se solucione el problema. Después de rellenar correctamente el formulario deberemos de enviarlo. Somos llevados a una pantalla donde nos aparece un resumen de los datos que se van a proceder a insertar en la base de datos. Toda la información del formulario es enviada a esta nueva página para que el usuario se cerciore que todos los productos introducidos son los que efectivamente estaba dispuesto a comprar. Si no son correctos deberemos volver atrás para rectificarlos. Diseño e implementación de una tienda virtual 55 Compra 7 Si todos los datos son correctos procederemos a insertar el registro, antes de introducir los datos en la tabla el sistema verificará que no existan ningún usuario con el mismo nombre que el nuestro. Si ya tenemos registrado un usuario con nuestro mismo nombre aparecerá esta pantalla, informándonos de la duplicidad del usuario. Con un vínculo a la página donde se encuentra el formulario. Compra 8 Diseño e implementación de una tienda virtual 56 Volvemos a introducir los datos del formulario con otro identificador distinto. Si el sistema verifica que ese usuario no existe entonces procederá a insertar la tupla en la base de datos, avisándonos de la correcta inserción del nuevo usuario. Compra 9 Ahora procederemos a identificarnos para así finalizar la compra. Compra 10 Diseño e implementación de una tienda virtual 57 Si alguno de los datos que hemos introducido son incorrectos, nos mostrará un mensaje para que lo volvamos a intentar o en caso de que no estemos dados de alta que lo hagamos. Compra 11 Volvemos a introducir nuestro usuario y contraseña. Ahora de forma correcta para proceder a la finalización de nuestra compra. Compra 12 Diseño e implementación de una tienda virtual 64 8. Bibliografía. D'andrea, Edgar. Cómo crear una tienda virtual con php 6 y mysql. Barcelona : Inforbook's , 2010. ISBN 8496897702. D'andrea, Edgar. Cómo crear una tienda virtual con php 5 y mysql. Barcelona : Inforbook's , 2005. ISBN 8496097471. Boronczyk , Timothy. Desarrollo web con php6, apache y mysql. Barcelona : Anaya multimedia Wrox, 2009. ISBN 9788441526228. Choi, Wankyu. Beginning php4. Birmingan: worx press, 2000. ISBN 1861003730. Gilmore, W. Jason. Beginning PHP 5 and MySQL from novice to profesional. New York : Apress, cop. 2004. ISBN 1893115518. Paterson, Douglas. Construyendo sitios web con PHP-Nuke. Olton, Birmingham, UK : Packt, 2005. ISBN 9781904811428. Ratschiller, Tobias. Creación de aplicaciones Web con PHP 4. Madrid : Prentice Hall, D.L. 2000. ISBN 8420531081. Pavón Huertas, Jacobo. Creación de un portal con PHP y MySQL. Madrid : Ra-ma, D.L. 2007. ISBN 9788478977543. Kent, Allan. Desarrollo web con PHP y Dreamweaver MX 2004. Madrid : Anaya Multimedia, D.L. 2005. ISBN 8441518025. Welling, Luke. Desarrollo Web con PHP y MySQL. Madrid : Anaya Multimedia, 2005. ISBN 8441518181. Powers, David. Desarrollo web dinámico con Dreamweaver 8 y PHP. Madrid : Anaya Multimedia, 2006. ISBN 844152047X. Duckett, Jon. Programación Web con HTML, XHTML y CSS. Madrid : Anaya Multimedia, D.L. 2008. ISBN 9788441524934. Orós, Juan Carlos. Diseño de páginas Web con XHTML, JavaScript y CSS. Madrid : Ra-ma, D.L. 2008. ISBN 8478978569. Duckett, Jon. Accessible XHTML and CSS web sites problem: problem - design –solution. Indianapolis : Wiley, 2005. ISBN 0764583069. Meyer, Eric A. CSS : Pocket reference. New York : O'Reilly, 2007. ISBN 0596515057. Beauchemin, Bob. A developer's guide to SQL server 2005. Upper Saddle River, NJ : AddisonWesley, cop. 2006. ISBN 0321382188. Diseño e implementación de una tienda virtual 65 World Wide Web Consortium(W3C). Documentos, guías y estándares.[Consulta: 02 de noviembre de 2010]. Disponible en: http://www.w3c.es Wikipedia la enciclopedia libre. Definiciones. [Consulta: 05 de noviembre de 2010].Disponible en: http://es.wikipedia.org REAL ACADEMIA ESPAÑOLA. Ortografía .[Consultas: 08 de noviembre de 2010]. Disponible en: http://rae.es Programación por capas. Imagen1. [Consultado: 03 de diciembre de 20010]. Disponible en : http://mtycoders.com/programacion-por-capas/ Maestros del Web. Registro de usuarios utilizando a PHP. [Consultado: 15 de noviembre de 20010]. Disponible en: http://www.maestrosdelweb.com/editorial/phpreusr/ El web master. Procesar un formulario. [Consultado: 16 de noviembre de 20010]. Disponible en: http://www.elwebmaster.com/editorial/taller-de-php-procesar-un-formulario-recibiendolos-datos Sector web. Estilos CSS. [Consultado: 16 de noviembre de 20010]. Disponible en: http://www.sectorweb.net/index.php Ricardo Tayar. Utilizar CSS. [Consultado: 16 de noviembre de 20010]. Disponible en: http://www.ricardotayar.com/2007/11/10/utilizar-css-con-tablas-para-hacer-cosicas-chulasasi-se-hace-otro-gran-secreto-de-css-desvelado/ Desarrolloweb. Introducción a base de datos. [Consultado: 10 de noviembre de 20010]. Disponible en: http://www.desarrolloweb.com/articulos/video-base-datos-php.html Libros Web. Introducción a JavaScript. [Consultado: 20 de noviembre de 20010]. Disponible en: http://www.librosweb.es/javascript/capitulo7/validacion.html W3schools. Curso de PHP. [Consultado: 05 de noviembre de 20010]. Disponible en: http://www.w3schools.com/php/default.asp Tutoriales scourdesign. CSS diseño menús. [Consultado: 25 de noviembre de 20010]. Disponible en: http://www.scourdesign.com/articulos/tutoriales/css/css14.php Ignside. Variables en PHP. [Consultado: 10 de noviembre de 20010].Disponible en: http://www.ignside.net/man/php/variables.php Buendía García, Félix. Guía para la realización y supervisión de proyectos de final de carrera (PFC) en el ámbito de la web. Valencia: Editorial UPV. ISBN 9788483633250. López Moratilla, Javier. Catálogo de tienda virtual. PFC Valencia : Universidad Politécnica de Valencia, 2007. Broch De Gracia, David. Comercio electrónico.PFC Valencia : Universidad Politécnica de Valencia, 2003. Apuntes ISG. Esquemas y división proyecto. [Consulta: 02 de noviembre de 2010]. Disponible en: http://poliformate.upv.es Diseño e implementación de una tienda virtual 66 <<La imaginación es más importante que el conocimiento. El conocimiento es limitado, mientras que la imaginación no>> Albert Einstein.