BENEMÉRITA UNIVERSIDAD AUTÓNOMA DE PUEBLA TESIS PROFESIONAL

Transcripción

1 BENEMÉRITA UNIVERSIDAD AUTÓNOMA DE PUEBLA FACULTAD DE CIENCIAS DE LA COMPUTACIÓN SISTEMA DE CAPTURA Y VALIDACIÓN VÍA WEB PARA LOS DISTRIBUIDORES DE UNA FÁBRICA DE PERSIANAS Y CORTINAS TESIS PROFESIONAL QUE PARA OBTENER EL TÍTULO DE: INGENIERO EN CIENCIAS DE LA COMPUTACIÓN PRESENTA: C. ANA GABRIELA LLERANDI PONCE DE LEÓN ASESOR: M. C. J. ESTÉBAN TORRES LEÓN PUEBLA, PUE. SEPTIEMBRE 2007

2 ÍNDICE GENERAL RESUMEN INTRODUCCIÓN OBJETIVOS GENERALES Y ESPECÍFICOS I II III CAPÍTULO I 1 SOFTWARE DE DISEÑO 1.1 HTML Generalidades de HTML Características del Lenguaje Motivos para usar HTML XML DOM XHTML Generalidades de XHTML Ventajas de usar XHTML Desventajas de usar XHTML AJAX Generalidades de AJAX Historia de AJAX Ventajas de AJAX Desventajas de AJAX Navegadores que permiten AJAX Navegadores que no permiten AJAX JavaScript MySQL Lenguajes de programación Aplicaciones Especificaciones Características generales Mejoras Futuras Características distintivas Tipos de Compilación Echo Framework Framework Echo Ventajas de Echo2 15 CAPÍTULO II 16 ANALISIS Y DISEÑO 2.1Analisis Introducción El equipo computacional Datos o información fuente Planteamiento del problema 17

3 2.1.3 Propuesta de solución al problema Descripción del rol administrador Descripción del rol distribuidor Arquitectura Cliente/Servidor Diseño UML Diagrama de Caso de Uso Diagrama de Interacción Diagrama de Clases Diseño de la base de datos 32 CAPÍTULO III 39 DESARROLLO DEL SISTEMA PERSIANAS 3.1 Implementación de parte ensambladora Menú Archivo Clientes Usuarios Cierre de sesión Menú Pedidos Pedidos Pedidos por cliente Menú Datos Líneas Colecciones Colores Controles y accionamientos Implementación de la parte del distribuidor Menú Archivo Contraseña Cierre de sesión Menú Pedidos 50 CAPÍTULO IV 52 PRUEBAS Y RESULTADOS Pruebas del sistema 52 CAPÍTULO V 60 CONCLUSIONES Y PERSPECTIVAS Apéndice A Manual de usuario Administrador 62 Apéndice B Manual de usuario Distribuidor 78 BIBLIOGRAFÍA Y REFERENCIAS 82

4 RESUMEN Actualmente la necesidad para ser una empresa competitiva, el uso de la tecnología es importante. Internet, brinda a las empresas, no sólo publicidad, si no un medio de actualizar movimientos propios de una empresa. Renovaciones de vuelos, pagos diversos, solicitud de pedidos empiezan a ser común en Internet. En particular, en las empresas de persianas y cortinas, aunque dentro de dichas empresas ya existe una automatización de la información, al exterior todo es manual: pedidos, validaciones de los pedidos, u otros movimientos, hacen que la empresa no funcione óptimamente. En el presente trabajo de tesis, se propone realizar un sistema para una empresa de persianas y cortinas donde el sistema estará automatizado por Internet. En parte de éste trabajo se utilizarán herramientas de Web 2.0 para agilizar información en la página Web. Además de utilizarse herramientas para las bases de datos, páginas Web y comunicación remota. La contribución de este trabajo será un avance en el desarrollo de aplicaciones Web, con el cual se ahorra tiempo en el sentido de que los pedidos se hagan más rápido y no tengan error alguno, facilitará la lectura de medidas y evitará error en la captura. Se llevará una mejor logística en la empresa, porque al ingresar pedidos los distribuidores se darán cuenta que datos son vigentes y cuales ya no están en existencia. I

5 INTRODUCCIÓN Actualmente el desarrollo de sistemas, apoyándose en Internet, empiezan a ser algo común: acceso a bancos, pagos por Internet, ejecución remota de archivos, entre otros. Muy pocos son los sistemas que resuelven problemas de empresas de diferente razón: mueblerías, pisos, cementeras, cortinas y persianas, licoreras, etcétera. Las empresas de persianas y cortinas están rezagadas en el uso de Internet: muchas actividades están automatizadas pero su margen está dentro de la empresa o centralizado en un estado. Para entrar en una competencia globalizada y tratar de ser líder en su ramo, existe la necesidad de automatizar por ejemplo pedidos y sus validaciones, ya que estos procesos se manejan de forma manual. En el presente trabajo se propone realizar un sistema para una empresa de persianas y cortinas que ayude a resolver los problemas de pedidos y validación de productos por Internet. Actualmente no hay un software que trabaje en red para dar solución a pedidos de cortinas y persianas e incluso que se valide dicho pedido. Existen muchas herramientas para realizar sistemas que se puedan aplicar en Internet, así para base de datos se tienen: MySQL, ORACLE, para páginas Web: HTML, PHP, ASP, JSP, por mencionar algunos. Al reconocer que en una empresa que se dedica a la distribución de cortinas y persianas no tenga este tipo de sistema, y que en particular se conozcan las herramientas para trabajar en red, es un motivo importante para proponer un sistema a dicha empresa. La solicitud de pedidos se realiza manualmente, por consiguiente, existen muchos errores humanos al cotizar los productos, como lo son delimitaciones de medidas, códigos en los colores, tipos de accionamientos, tiempo de entrega. II

6 El no aprovechar la tecnología que es Internet, implicará que la empresa no pueda entrar a un mercado global, incluso empiece a quedar rezagada. Lo anterior nos permite desarrollar un sistema que no solo de la solución de manera automatizada a la forma en como viene manejándose la información manualmente, si no que a demás se propone que esto pueda hacerse por Internet quedando abierto a los distribuidores de persianas y cortinas (usuarios) con ciertos niveles de seguridad. El sistema tendrá las siguientes características: Un sistema mediante la cual los usuarios podrán hacer consultas, pedidos, validaciones con ciertos niveles de seguridad. Se tendrá una base de datos en la cual se definirá toda la información de interés para la empresa, y finalmente se hará un énfasis en ciertos campos, en la cual se apliquen técnicas avanzadas que permitan solo cambiar ciertos datos. OBJETIVOS GENERALES Y ESPECÍFICOS Por lo antes mencionado los objetivos a cubrir son: OBJETIVOS GENERALES. Análisis, diseño, implementación y puesta en marcha del sistema de captura y validación vía Web para los distribuidores de una fábrica de persianas y cortinas. Mejorar la experiencia de usuario por medio de una interfaz sin actualizaciones y transiciones de página. III

7 OBJETIVOS ESPECÍFICOS. específicos: Para lograr alcanzar el objetivo general, se deben cubrir los siguientes objetivos Estudio y aplicación de las herramientas para realizar la pagina Web: HTML, Xml, Dom, Xhtml, AJAX, Framework Echo2. Estudio y aplicación de las herramientas para realizar la base de datos: MySQL Diseño e Implementación de una página Web, que permita que los distribuidores de una fábrica de persianas y cortinas realicen pedidos, de una forma fácil y segura. Diseño e implementación de una base de datos, que permita almacenar los datos que ofrece la fábrica, así como también, los datos pertenecientes a nuevos pedidos hechos por los distribuidores. Integración y pruebas del sistema completos. OBJETIVOS COLATERALES. Tener un sistema que se pueda accesar y usar fácilmente por personal inexperto en computación de la empresa. Obtener el título de Ingeniero en Ciencias de la Computación. El trabajo realizado, se documenta y se presenta a lo largo de esta tesis escrita, de donde, a continuación se describen brevemente los capítulos que la conforman. En el Capítulo I se muestra una breve descripción de las herramientas de software que se utilizarán para desarrollar este trabajo de tesis. En el Capítulo II se describe el problema a resolver, así como los procedimientos que se proponen para llevar acabo los servicios que el sistema a desarrollar ofrece, mejorando el servicio al usuario. IV

8 En el Capítulo III se describe por módulos la implementación de la parte ensambladora, que es la fábrica y la implementación por módulos de la parte distribuidor. En el Capítulo IV se presentan las pruebas y los resultados obtenidos, al usar el sistema capturando pedidos por parte del distribuidor. En el Capítulo V se presentan las conclusiones al realizar este trabajo de tesis así como también las perspectivas para el sistema propuesto. V

9 CAPÍTULO I SOFTWARE DE DISEÑO En el presente capítulo se muestra una breve descripción de las herramientas de software que se utilizarán para desarrollar este trabajo. 1.1 HTML La World Wide Web, o WWW, es un sistema de servidores con información a la que se accede a través del protocolo HTTP (HyperText Transfer Protocol) para extraer elementos de información llamados "documentos" o "páginas Web"[1]. La funcionalidad elemental de la Web se basa en tres estándares: 1. URL Localizador Uniforme de Recursos, es la secuencia de caracteres con la cual se asigna una dirección única a cada uno de los recursos de información disponibles en la Internet. 2. HTTP Es el Protocolo de Transferencia de Hipertexto, que específica cómo el navegador y el servidor intercambian información en forma de peticiones y respuestas. a. Request (Petición) Sirve para intercambiar datos con el servidor Web es decir, es el encargado de hacer que una página Web realice una petición al servidor Web. b. Response (Respuesta) Encapsula la información de la respuesta HTTP para ser enviada a la petición hecha por una página Web al servidor. 1

10 3. HTML Hyper Text Markup Language (Lenguaje de marcas hipertextuales) Es un lenguaje muy sencillo que se utiliza para presentar texto de forma estructurada y agradable, con hipervínculos o referencias enlazadas automáticas que conducen a otros documentos Generalidades de HTML El código HTML no es más que texto, esto facilita su edición, puesto que se puede utilizar cualquier editor de texto, por muy sencillo que este sea, aunque también podemos utilizar procesadores de textos más avanzados, pero se debe tener cuidado porque en ocasiones hacen traducciones automáticas del código que no son las deseadas. En la actualidad hay varias opciones para la programación de paginas Web, Existen los asistentes, estos contienen plantillas de código prefabricadas, por ejemplo, Dreamweaver y HotDog (Win), Quanta o Bluefish (Linux). También se puede mencionar los Conversores, estos son programas con otras funciones pero el resultado final puede convertirlo en HTML por ejemplo PageMaker, Microsoft Word, entre otros, y los Editores WYSIWYG (What You See Is What You Get, lo que ves es lo que obtienes) estos crean páginas Web sin necesidad de escribir código HTML se basan en gráficos y dibujos lo que facilita en gran parte la programación Características del lenguaje La ventaja de este lenguaje es que se considera distribuido porque una página de Internet puede ser accedida por múltiples usuarios. En red la Web es hipertexto y es fácil navegar por él. Es compatible con todo tipo de ordenadores y de sistemas operativos Motivos para usar HTML El lenguaje es muy sencillo y fácil de entender. No es necesaria una herramienta sofisticada para crear una página Web. 2

11 Aunque se use un editor tipo WYSWYG (What You See Is What You Get en inglés, "lo que ves es lo que obtienes") se los conocimientos necesarios para modificar posteriormente el código, esto ayuda a corregir errores o transformar la página. 1.2 XML extensible Markup Language (Lenguaje de marcas extensible) Es una manera de definir lenguajes para diferentes necesidades. Entre los lenguajes que usan XML para su definición son XHTLM, SVG, MathML. XML se plantea como un estándar para el intercambio de información estructurada entre diferentes plataformas. Se utiliza en editores de texto, hojas de cálculo, bases de datos entre otros. Es una técnica sencilla que tiene a su alrededor otras que la complementan y la fortalecen, en la actualidad tiene un papel importante puesto que permite la compatibilidad entre sistemas para compartir la información de una manera fácil, integra y segura. 1.3 DOM Document Object Model (Modelo de Objetos de Documento) Es una forma de representar los elementos de un documento estructurado como objetos que tiene sus propias propiedades y métodos. El DOM nos sirve para acceder, añadir y cambiar dinámicamente el contenido estructurado en documentos con lenguajes como JavaScript. 1.4 XHTML Extensible Hypertext Markup Language (Lenguaje Extensible de Marcado de Hipertexto) Es la versión XML de HTML fue creado con la intención de sustituir a HTML 3

12 como estándar para las páginas Web, tiene las mismas funcionalidades cumpliendo las especificaciones de XML. Trata de separar la información de la forma en que esta se representa, es decir: XHTML servirá únicamente para transmitir la información que contiene un documento, dejando para JavaScript su aspecto y diseño en distintos medios Generalidades de XHTML Es descendiente de HTML, versión más precisa de HTML. Una de las necesidades por las que fue creado es porque día con día el contenido de la World Wide Web se puede visualizar desde diferentes dispositivos como PDA s, celulares, aparte de pc s comunes Ventajas de usar XHTML Tiene la facilidad de editar directamente el código y de proporcionar mantenimiento. Compatibilidad parcial con navegadores antiguos: la información se visualiza, aunque sin formato. Cabe apuntar que el XHTML 1.0 fue diseñado expresamente para ser mostrado en navegadores que soportan HTML de base. Es compatible con los nuevos estándares que actualmente se están desarrollando, tiene mayor rendimiento en las nuevas herramientas Web Desventajas de usar XHTML Compatibilidad parcial con navegadores antiguos puesto que la información se visualiza sin formato, fue diseñado para ser mostrado en navegadores que soportan HTML base. Las herramientas de diseño aun no producen código XHTML correcto. 1.5 AJAX Asynchronous JavaScript And XML (JavaScript y XML asíncronos) Es una técnica de desarrollo Web para crear aplicaciones interactivas. Éstas se ejecutan en el cliente, es decir, en el navegador del usuario, y mantiene comunicación asíncrona con el servidor en 4

13 segundo plano. De esta forma es posible realizar cambios sobre la misma página sin necesidad de recargarla. Esto significa aumentar la interactividad, velocidad y usabilidad en la misma [1] Generalidades de AJAX Es una combinación de 3 tecnologías que trabajan conjuntamente: 1. XHTML par el diseño de la información. 2. DOM accedido con un lenguaje de scripting por parte del usuario para mostrar e interactuar dinámicamente con la información presentada. 3. XML formato para la transferencia de información de vuelta al servidor. Estas tecnologías son incorporadas obteniendo lo siguiente: Presentación basada en estándares usando XHTML y CSS (Cascading Style Sheets: hojas de estilo cascada controla el estilo y el formato de múltiples páginas Web al mismo tiempo). Exhibición e interacción dinámicas usando el DOM. Intercambio y manipulación de datos usando XML y XSLT. Recuperación de datos asíncrona usando XMLHttpRequest. Y JavaScript integrando todo junto. El modelo clásico de aplicaciones Web funciona de esta forma: La mayoría de las acciones del usuario en la interfaz disparan un requerimiento HTTP al servidor Web. El servidor efectúa un proceso (recopila información, procesa números, hablando con varios sistemas propietarios), y le devuelve una página HTLM al cliente [1]. A continuación en la figura 1.1 se explicará la comparación de un modelo clásico de aplicaciones Web y un modelo AJAX de aplicación Web. 5

14 Figura 1.1 Comparación del modelo clásico y Modelo AJAX de aplicaciones Web En lugar de cargar una página Web, al inicio de la sesión, el navegador carga al motor AJAX, este es el encargado de renderizar la interfaz que el usuario ve y también es responsable de la comunicación con el servidor en nombre del usuario. El motor AJAX permite que la interacción del usuario con la aplicación suceda sincrónicamente es decir independientemente de la comunicación con el servidor. Así el usuario nunca estará mirando una ventana en blanco del navegador y el icono del reloj de arena esperando a que el servidor de señal de que haga algo. Básicamente, la principal virtud de AJAX está en la potencia que se le puede extraer al trabajo asíncrono de peticiones al servidor. Existe una costumbre a un modelo de interacción sincrónica basada en clic-petición-presentación, clic-petición-presentación. Con AJAX la interacción pasa a ser asíncrona. Cada vez que se hace clic no necesariamente se establece una conexión con el servidor. AJAX hace de intermediario entre el servidor y el usuario, anticipando peticiones de datos al servidor, de modo que cuando el usuario hace un clic determinado, AJAX ya tiene listos esos datos y los muestra directamente, sin tener que volver a hacer una petición al servidor y su consecuente espera., esto se puede ver en la figura

15 Figura 1.2 Modelo Síncrono Vs. Modelo Asíncrono Cada acción del usuario que normalmente genera un requerimiento HTTP toma la forma de un llamado JavaScript al motor AJAX en lugar de ese requerimiento. Cualquier respuesta a una acción del usuario que no requiera un viaje de vuelta al servidor (como una simple validación de datos, edición de datos en memoria, incluso algo de navegación) es manejado por su cuenta. Si el motor necesita algo del servidor para responder (sean enviados datos para procesar, cargar código adicional o recuperando nuevos datos) hace esos pedidos de forma asíncrona, usualmente usando XML, sin frenar la interacción del usuario con la aplicación Historia de AJAX Las tecnologías que AJAX utiliza aparecen en los años 90 s. El termino AJAX fue creado hasta el año 2005, Las técnicas para la carga asíncrona de contenidos en una página existente sin requerir recarga completa se remontan al año 1996 tiempo del elemento iframe introducido en el Internet Explorer 3 y el tipo de elemento layer introducido en Netscape 4 en el año 1997, ambos tipos de elemento tenían el atributo SRC que podía tomar cualquier 7

16 dirección externa URL y cargando una página que contenga JavaScript que manipule la página paterna pueden lograrse efectos parecidos a lo que hoy en día es AJAX. El Microsoft's Remote Scripting (o MSRS, introducido en 1998) resultó un sustituto más elegante para estas técnicas, con envío de datos a través de un Applet Java el cual se puede comunicar con el cliente usando JavaScript. Esta técnica funcionó en ambos navegadores, Internet Explorer versión 4 y Netscape Navigator versión 4. Microsoft la utilizó en el Outlook Web Access provisto con la versión 2000 de Microsoft Exchange Server Ventajas de AJAX Entre las ventajas para usar AJAX se encuentran: Interactividad Es la relación que se establece entre los seres humanos y las máquinas, esto es muy importante en el diseño de los programas o de las aplicaciones que se presentan al usuario. La eficacia de la interfaz radica en la capacidad para implicar al usuario y por lo tanto favoreces la interactividad. Las aplicaciones AJAX que se ejecutan en la máquina del cliente pueden manipular la página actual dentro de sus navegadores usando métodos DOM. Realizando tareas como: actualizar o eliminar registros, expandir formularios Web, devolver peticiones simples de búsqueda, todo esto sin la necesidad de tener que recargar toda la página de HTML cada vez que se realice algún cambio. Portabilidad Es que tan dependiente es un software de la plataforma en que se ejecuta. La portabilidad es mayor cuando la dependencia con el software de plataforma disminuye. 8

17 Las aplicaciones AJAX utilizan características bien documentadas presentes en los navegadores importantes en la mayoría de las plataformas existentes Desventajas de AJAX Críticas Críticas de Usabilidad: una de las críticas que AJAX ha tenido es que desaparece la opción del botón atrás que utilizan los navegadores comunes. Los usuarios esperan que al hacer clic en el botón atrás les lleve a la última página cargada, en AJAX esto no ocurre, puesto que se actualiza dinámicamente el fragmento identificador de URL cada vez que el usuario va cambiando el estado de la página. Aunque esto depende del diseño y de la implementación de la página Tiempos de Respuesta En el desarrollo de AJAX se debe tomar en cuenta el intervalo entre la petición del usuario y la respuesta del servidor ya que los usuarios pueden experimentar sensación de que nada ha pasado, es decir pausas en la interfaz de la aplicación Web pues la carga ha sido muy rápida como para que pudiera percibirla además que la URL no varia. Problemas con navegadores El hecho de emplear JavaScrip y XMLHttprequest implica problemas con los navegadores que no los tengan habilitados o en su defecto que no los soporten Navegadores que permiten AJAX [1] Microsoft Internet Explorer para Windows 5.0 y superiores. Navegadores basados en Gecko como Mozila, Mozila FireFox, SeaMoney, Camino, Flock, Galeon y Netscape version 7.1 y superiores. 9

18 Navegadores con el API KHTML versión 3.2 y superiores implementado, incluyendo Konqueror versión 3.2 y superiores, Apple Safari versión 1.2 y superiores, y el Web Browser for S60 de Nokia tercera generación y posteriores. Opera versión 8.0 y superiores, incluyendo Opera Mobile Browser versión 8.0 y superiores Navegadotes que no permiten AJAX [1] Opera 7 y anteriores. Microsoft Internet Explorer para Windows versión 4.0 y anteriores. Microsoft Internet Explorer para Macintosh, todas las versiones. Dillo. Navegadores basados en texto como Lynx y Links. Navegadores para incapacitados visuales (braille) JavaScript Es un lenguaje que no requiere de compilación se define como un lenguaje interpretado y es usado principalmente en páginas Web. Este lenguaje se basa en prototipos ya que las clases se van generando clonando las clases bases extendiendo la funcionalidad de estas. AJAX no necesita algún tipo de plug-in para el navegador, pero si requiere que los usuarios tengan JavaScript activado ya que XMLHttpRequest está implementado junto con el ActiveX, en el caso de Internet Explorer 7 implementa esta interfaz como un objeto JavaScript nativo lo que no requiere ActiveX para que AJAX funcione con normalidad. 1.6 MySQL MySQL LAB ha desarrollado un sistema de gestión de base de datos multiusuario, llamado MySQL como software libre, desarrollado en su mayor parte en ANSI C. 10

19 1.6.1 Lenguajes de Programación Existen varias APIs que permiten, a aplicaciones escritas en diversos lenguajes de programación, acceder a las bases de datos MySQL, incluyendo C, C++, C#, Pascal, (via dbexpress), Eiffel, Smalltalk, Java (con una implementación nativa del driver de Java), Lisp, Perl, PHP, Python, Ruby, REALbasic (Mac), FreeBASIC, y TCL; cada uno de estos utiliza una API específica. También existe un interfaz ODBC, llamado MyODBC que permite a cualquier lenguaje de programación que soporte ODBC comunicarse con las bases de datos MySQL [2] Aplicaciones MySQL es muy utilizado en aplicaciones Web como MediaWiki o Drupal, en plataformas (Linux/Windows-Apache-MySQL-PHP/Perl/Python), y por herramientas de seguimiento de errores como Bugzilla. Su popularidad como aplicación Web está muy ligada a PHP, que a menudo aparece en combinación con MySQL. MySQL es una base de datos muy rápida en la lectura cuando utiliza el motor no transaccional MyISAM, pero puede provocar problemas de integridad en entornos de alta concurrencia en la modificación. En aplicaciones Web hay baja concurrencia en la modificación de datos y en cambio el entorno es intensivo en lectura de datos, lo que hace a MySQL ideal para este tipo de aplicaciones [2]. MySQL usa también una tecnología de almacenamiento de datos de fuente abierta InnoDB, incluido como formato de tabla estándar en todas las distribuciones de MySQL a partir de las versiones 4.0. Su característica principal es que soporta transacciones de tipo ACID y bloqueo de registros e integridad referencial. InnoDB ofrece una fiabilidad y consistencia muy superior a MyISAM, la anterior tecnología de tablas de MySQL, si bien el mejor rendimiento de uno u otro formato dependerá de la aplicación específica. 11

20 1.6.3 Especificaciones MySQL funciona sobre múltiples plataformas, incluyendo AIX, BSD, FreeBSD, HP-UX,GNU/Linux, Mac OS X, NetBSD, Novell Netware, OpenBSD, OS/2, Warp, QNX, SGI IRIX, Solaris, SunOS, SCO OpenServer, SCO UnixWare, Tru64, Windows 95, Windows 98, Windows NT, Windows 2000, Windows XP, Windows Vista, y otras versiones de Windows, También existe MySQL para OpenVMS [2] Características Generales de la versión Soporte a multiplataforma. Procedimientos almacenados. Vistas actualizables. Soporte a VARCHAR. Modo Strict. Motores de almacenamiento independientes (MyISAM para lecturas rápidas, InnoDB para transacciones e integridad referencial). Transacciones con los motores de almacenamiento InnoDB, BDB Y Cluster; puntos de recuperación (savepoints) con InnoDB. Soporte para SSL. Query caching. Sub-SELECTs (o SELECTs anidados). Indexing y buscando campos de texto completos usando el motor de almacenamiento MyISAM. Soporte completo para Unicode. Conforme a las reglas ACID usando los motores InnoDB, BDB y Cluster Mejoras Futuras Particionado de la base de datos. Backup en línea para todos los motores de almacenamiento. Replicación segura. 12

21 Restricciones a nivel de columna. Planificación de eventos. Funciones XML Características distintivas Las siguientes características son implementadas únicamente por MySQL: Múltiples motores de almacenamiento (MyISAM, Merge, InnoDB, BDB, Memory/heap, MySQL Cluster, Federated, Archive, CSV, Blackhole y Example en 5.x), permitiendo al usuario escoger la que sea más adecuada para cada tabla de la base de datos. Agrupación de transacciones, reuniendo múltiples transacciones de varias conexiones para incrementar el número de transacciones por segundo [2] Tipos de Compilación Existen tres tipos de compilación del servidor MySQL: Estándar: Los binarios estándares de MySQL son los recomendados para la mayoría de los usuarios, e incluyen el motor de almacenamiento InnoDB. Max (No se trata de MaxDB, que es una cooperación con SAP): Los binarios incluyen características adicionales que no han sido lo bastante probadas o que normalmente no son necesarias. MySQL-Debug: Son binarios que han sido compilados con información de depuración extra. No debe ser usada en sistemas en producción porqué el código de depuración puede reducir el rendimiento [2]. 13

22 1.7 Echo Framework Framework es una estructura de soporte definida en la cual otro proyecto de software puede ser organizado y desarrollado. Un Framework puede incluir soporte de programas bibliotecas y un lenguaje scripting entre otros softwares para ayudar a desarrollar y unir los diferentes componentes de un proyecto. En general un Framework representa una arquitectura de software que modela a las relaciones generales de las entidades del dominio proporcionando una estructura y una metodología de trabajo la cual extiende o utiliza las aplicaciones del dominio. Los framework son diseñados para facilitar el desarrollo del software puesto que permite a los desarrolladores y programadores de software, pasar mas tiempo identificando requerimientos de software que tratando con los tediosos detalles de bajo nivel de proveer un sistema funcional Framework Echo2 El framework Echo2 viene con una serie de componentes predefinidos que permiten construir una aplicación Web, aunque se pueden construir los propios que vayan mas allá de los básicos que trae este framework. Echo2 tiene un motor JavaScript en el cliente que se encarga de mantener el lado del servidor y del cliente sincronizado por lo que en ocasiones no se necesita código JavaScript. Cuando se presenta un componente en el servidor usando un método renderadd() se obtiene el XHTML y se envía como un mensaje XML el motor del lado del cliente. Este tiene un código conocido como el EchoDomUpdate.MessageProcessor que es el 14

23 responsable de interpretar el mensaje XML y colocar el XHTML en el DOM del navegador. Cuando el motor cliente de Echo2 recibe un mensaje de XML este viene marcado con el nombre del procesador de mensaje a invocar. Es responsabilidad del procesador de mensajes el hacer algo con dicho mensaje. El elemento de representación del lado del servidor creara el mensaje XML para que sea enviado al procesador de mensajes del lado cliente. Echo2 tiene un mecanismo para asegurarse de que solamente se descarga el JavaScript necesario para un componente. Esto hace que una aplicación Web Echo2 sea solamente tan grande como se necesite [3] Ventajas del Framework Echo2 Echo2 reduce el ancho de banda entre el navegador y el servidor. Puede consumir más estado de sesión que otros frameworks Web sin estado, pero el controlarlo es cuestión del desarrollador en la programación. Con la mayoría de frameworks es necesario que el usuario controle ese estado, con el framework de Echo2 lo hace por si solo, pero el desarrollador es responsable de mantener el estado al mínimo. Echo2 probablemente tiene una mejor seguridad que la mayoría del resto de sistemas AJAX ya que solamente envía el contenido al navegador mientras que la mayoría del resto requieren que la aplicación completa sea descargada al navegador de una vez lo que hace que la ingeniería inversa sea un poco mas sencilla para un hacker. Echo2 es un software de código abierto distribuido bajo los términos de Mozilla Public License [4]. 15

24 CAPÍTULO II ANÁLISIS Y DISEÑO En el presente capítulo se describe el problema a resolver, así como los procedimientos que se proponen para llevar acabo los servicios que el sistema a desarrollar ofrece, mejorando el servicio al usuario. 2.1 Análisis Introducción En éste trabajo se realizará un sistema para una fábrica de persianas y cortinas en donde los pedidos se harán vía Web a una fábrica, automatizado los procedimientos, ya que la forma de hacerlo es manual, y por lo tanto lo que se busca, es mejorar el servicio a los usuarios evitando errores en la captura de sus pedido con la mayor seguridad posible, dando como resultado facilitar el trabajo en la fábrica El equipo computacional Dentro del equipo computacional, se usan las computadoras, ya que guardan grandes cantidades de información y son accesibles desde cualquier otro punto en donde se accede por medio de otra computadora Datos o información fuente Son los datos que proporciona la fábrica, necesarios para que los distribuidores de persianas y cortinas hagan sus pedidos, esto es, todas las características de cada producto, dentro de las cuales se encuentran: Datos del distribuidor 16

25 Tipo de persiana o cortina Tipo de tela o material Color de tela Medidas limitantes para la fabricación del producto Accionamientos de los productos Tipos de controles para cada tipo de producto Precios Planteamiento del problema El problema se desarrolla en una fábrica de persianas y cortinas, comienza cuando los distribuidores solicitan la fabricación de un modelo específico del producto, puesto que cada producto tiene diferente cualidades como lo son: medidas, materiales con que estos se fabrican, diferentes texturas de telas, nombres de los colores en que se manejan dichas telas o materiales, tipos de accionamientos, límites de medidas y ciertas características distintivas del producto, y es difícil conocer a la perfección todas estas limitantes para no tener errores en los pedidos. En la actualidad se reciben pedidos vía fax, lo que también dificulta en ocasiones la lectura de datos, y no siempre son hechos en computadora por lo que ocasiona confusión en los números escritos a mano Propuesta de solución al problema Una solución que se propone para solucionar este problema es diseñar e implementar un sistema en el cual los distribuidores puedan realizar sus pedidos en una computadora y mandarlos a fabricación vía Internet. El sistema se desarrolla en dos partes, la primera es el rol en el que se envuelve a la fábrica. Será el administrador del sistema quien tendrá acceso a modificar los datos de los productos, por ejemplo si un color de tela se descontinúa por el proveedor, este lo podrá dar de baja para que no cometan el error de pedir algún producto que por fuerza mayor no se 17

26 pueda fabricar. La segunda parte es el rol del distribuidor autorizado, este es quien hace los pedidos y es el que al final tiene el contacto directo con el público en general. Los distribuidores deben de saber y conocer el producto para estar preparados dando un buen servicio y saber que ofrecer al cliente para satisfacer sus necesidades Descripción de rol administrador El administrador podrá: Dar de alta/modificar/eliminar: distribuidores, dar privilegios de administrador a usuarios de la empresa. Modificar el descuento activo de cada distribuidor. Dar de alta n cantidad de usuarios por cada distribuidor. También alta/modificar/eliminar: en general los datos: Líneas Colecciones Accionamientos Colores Medidas máximas y mínimas Descripción de rol distribuidor El distribuidor podrá hacer cotizaciones, obteniendo una validación, ésta puede tener cambios hasta que sea aceptado. Pasar de cotizaciones a pedidos en firme, aceptando la validación ya no puede existir cambio alguno, ni cancelación por parte del distribuidor. También podrá hacer consultas de sus pedidos pasados. 18

27 2.1.6 Arquitectura Cliente/Servidor Es un modelo de procesamiento cooperativo en donde uno de los componentes pide servicio a otro, esta tecnología proporciona al usuario final el acceso transparente a las aplicaciones, datos o cualquier otro recurso a través de la organización en múltiples plataformas. Este modelo soporta un medio ambiente distribuido en el cual los requerimientos de servicio hecho por estaciones de trabajo clientes resultan en un trabajo realizado por otros computadores llamados servidores. La arquitectura C/S es un modelo para el desarrollo de sistemas de información en el que las transacciones se dividen en procesos independientes que cooperan entra si para intercambiar información, servicios o recursos. Se denomina cliente al proceso que inicia el diálogo o solicita los recursos y servidor al proceso que responde a las solicitudes. En este modelo las aplicaciones se dividen de forma que el servidor contiene la parte que debe ser compartida por varios usuarios y en el cliente permanece solo lo particular de cada usuario. Los servidores realizan funciones como: Gestión de periféricos compartidos. Control de acceso a bases de datos. Enlaces de comunicaciones con otras redes. Los clientes realizan funciones como: Manejo de la interfaz de usuario. Captura y validación de los datos de entrada. Generación de consultas e informes sobre las bases de datos. En resumen: C/S es una relación entre procesos corriendo en máquinas separadas El servidor S es un proveedor de servicios. 19

28 El cliente C es un consumidor de servicios. El C y S interactúan por un mecanismo de pasaje de mensajes: 1. Solicitud de servicio 2. Respuesta 2.2 DISEÑO UML El lenguaje de Modelado Unificado (UML) es un lenguaje para visualizar, especificar y documentar cada una de las partes que comprende el desarrollo de software. Con esta herramienta se modelará cosas conceptuales como lo son procesos y funciones del sistema, además de cosas concretas como lo son el esquema de la base de datos y componentes de software reusable Diagrama Caso de Uso Representa la forma en como un cliente (actor) opera con el sistema en desarrollo, además de la forma, tipo y orden en como los elementos interactúan. Actor: es un rol que un usuario juega con respecto al sistema, como se muestra la figura 2.1. Figura 2.1 Actor Caso de uso: es una operación o bien una tarea específica que se realiza tras una orden de algún agente externo, sea desde una petición de un actor o bien desde la invocación desde otro caso de uso, como se muestra en la figura

29 Figura 2.2 Caso de uso Asociación: Indica la invocación desde un actor o caso de uso a otra operación es el tipo de relación mas básica, como se ve en la figura 2.3. Figura 2.3 Asociación Generalización: Esta relación cumple una doble función dependiendo de su estereotipo puede ser de uso o de herencia, como se ve en la figura 2.4. Figura 2.4 Generalización En la siguiente figura 2.5 se describe como dos actores, un administrador y un distribuidor interactúan directamente con un sistema. SISTEMA ADMINISTRADOR DISTRIBUIDOR Figura 2.5 Interacción de actores con el sistema 21

30 En la figura 2.6 se observan las tareas que realiza el actor distribuidor en los siguientes casos de uso. HACER PEDIDO DISTRIBUIDOR <include> VER PEDIDO <include> AUTENTIFICAR VER STATUS PEDIDO <include> Figura 2.6 Casos de uso del distribuidor En la figura 2.7 se observan las tareas que realiza el actor administrador en los siguientes casos de uso. ADMINISTRADOR MODIFICAR DATOS ALTA DE DATOS <include> DESABILITAR DATOS <include> <include> AUTENTIFICAR ESTABLECER STATUS PEDIDO <include> ELIMINAR PEDIDO <include> Figura 2.7 Casos de uso del administrador 22

31 Diagrama de Interacción Representa la forma en como un cliente (actor) u objetos (clases) se comunican entre si en petición a un evento. Esto implica recorrer toda la secuencia de llamadas, de donde se obtienen las responsabilidades claramente. En la figura 2.8 se observa el diagrama de interacción del actor administrador y del actor distribuidor al entrar en la página Web, digitará su nombre de usuario y su contraseña, el sistema autentifica los datos que sean validos para poder ingresar. ENTRAR A LA PAG WEB INGRESAR NOMBRE DE USUARIO INGRESAR CONTRASEÑA USUARIO Y CONTRASEÑA INVÁLIDA USUARIO Y CONTRASEÑA VALIDA Figura 2.8 Diagrama de interacción autentificar administrador y distribuidor 23

32 En la figura 2.9 se observa el diagrama de interacción del actor distribuidor al realizar un pedido. INGRESAR no. PEDIDO No. PEDIDO No. PEDIDO SELECCIONA LINEA SELECCIONA COLECCION SELECCIONA ACCIONAMIENTO SELECCIONA CONTROL SELECCIONA COLOR DIGITA ANCHO LIMITE NO VALIDO LIMITE VALIDO DIGITA ALTO LIMITE NO VALIDO OBTIENE COSTO ITEM LIMITE VALIDO SIGUIENTE ITEM NO MÁS ITEM OBTIENE COSTO TOTAL PEDIDO EN FIRME Figura 2.9 Diagrama de interacción hacer pedido distribuidor 24

33 En la figura 2.10 se observa el diagrama de interacción del actor distribuidor al solicitar ver un pedido. PEDIDO DISTRIBUIDOR PRESENTAR INFORMACIÓN Figura 2.10 Diagrama de interacción ver pedido distribuidor En la figura 2.11 se observa el diagrama de interacción del actor distribuidor al solicitar un estatus de un pedido PEDIDO DISTRIBUIDOR SOLICITAR STATUS Figura 2.11 Diagrama de interacción ver status pedido distribuidor 25

34 En la figura 2.12 se observa el diagrama de interacción del actor administrador al modificar en forma general un dato, como pueden ser: clientes, usuarios, líneas, colecciones, colores, controles y accionamientos. SELECCIONAR CARACTERISTICA BUSCAR DATO A MODIFICAR MODIFICAR DATO GUARDAR CAMBIO Figura 2.12 Diagrama de interacción modificar administrador 26

35 En la figura 2.13 se observa el diagrama de interacción del actor administrador al dar de alta en forma general un dato, como pueden ser: clientes, usuarios, líneas, colecciones, colores, controles y accionamientos. SELECCIONAR CARACTERISTICA SELECCIONAR DEPENDIENTES INGRESAR NUEVO DATO GUARDAR Figura 2.13 Diagrama de interacción alta de datos administrador En la figura 2.14 se observa el diagrama de interacción del actor administrador al dar de baja en forma general un dato, como pueden ser: clientes, usuarios, pedidos, líneas, colecciones, colores, controles y accionamientos. 27

36 SELECCIONAR CARACTERISTICA SELECCIONAR DEPENDIENTES DESABILITAR DATO GUARDAR Figura 2.14 Diagrama de interacción deshabilitar datos administrador En la figura 2.15 se observa el diagrama de interacción del actor administrador al establecer un estatus a un pedido. 28

37 SELECCIONAR CLIENTE SELECCIONA PEDIDO CLIENTE CAMBIAR STATUS GUARDAR Figura 2.15 Diagrama de interacción establecer status pedido administrador En la figura 2.16 se observa el diagrama de interacción del actor administrador al eliminar un pedido. 29

38 SELECCIONAR CLIENTE SELECCIONA PEDIDO CLIENTE ELIMINAR PEDIDO Figura 2.16 Diagrama de interacción eliminar pedidos administrador Diagrama de clases El diagrama de Clases es el diagrama principal para el análisis y diseño. Un diagrama de clases presenta las clases del sistema con sus relaciones estructurales y de herencia. La definición de clase incluye definiciones para atributos y operaciones. La clasificación es uno de los mecanismos de abstracción más utilizados. La clase define al ámbito de definición de un conjunto de objetos, y cada objeto pertenece a una clase. Los objetos se crean por instancias de las clases. el sistema. En la siguiente figura 2.17 se observa la relación de las clases más importantes en 30

39 31 Figura 2.17 Relación diagrama de clases

40 2.3 DISEÑO DE LA BASE DE DATOS La base de datos consta de 11 tablas: Clientes Colecciones Colores Controles Líneas Pedidos Pedido _ ítem Precios Roles Rol _ usuario Usuarios Clientes: Esta tabla contiene los datos de los distribuidores de la fábrica de persianas y cortinas, donde cada uno tiene un identificador de hasta 7 caracteres alfanuméricos y éste será asignado por el administrador del sistema. El número de cliente es importante para hacer referencia a los pedidos hechos por cada distribuidor. La tabla clientes cuenta con 15 campos con diferentes características y longitudes figura Figura 2.18 Tabla clientes 32

41 Colecciones: Contiene los campos clave y descripción, así como también el identificador de línea a la cual pertenece dicha colección. La tabla colecciones cuenta con 5 campos con diferentes características y longitudes Figura Figura 2.19 Tabla Colecciones Colores: Ésta tabla contiene los datos correspondientes a los colores, tales como descripción, código de color y tiempo de entrega, asociados con las líneas y colecciones a través de sus correspondientes identificadores. figura La tabla colores cuenta con 7 campos con diferentes características y longitudes Figura 2.20 Tabla Colores 33

42 Controles: La información correspondiente a los controles, accionamientos, ancho mínimo y máximo, alto mínimo y máximo y el código del precio asignado a la colección y línea correspondientes a sus identificadores para cada producto. figura La tabla controles cuenta con 33 campos con diferentes características y longitudes Figura 2.21 Tabla Controles Líneas: Contiene la clave de línea y su descripción figura La tabla líneas cuenta con 3 campos con diferentes características y longitudes Figura 2.22 Tabla líneas 34

43 Pedidos: Los pedidos realizados por cada uno de los distribuidores se almacenan en esta tabla, donde se conserva el identificador de cliente que hace el pedido, la fecha de realización, el número de pedido y la suma total de los ítems que forman parte de este. figura La tabla pedidos cuenta con 6 campos con diferentes características y longitudes Figura 2.23 Tabla Pedidos Pedido_item: Se almacenan los ítems de cada pedido referenciados por el identificador de pedido, con las características de cada ítem como son identificador de línea, identificador de colección, identificador de color, identificador control, el alto y ancho ingresados por los distribuidores. La tabla pedido_items cuenta con 9 campos con diferentes características y longitudes figura Figura 2.24 Tabla Pedido _ ítems 35

44 Precios: En esta tabla se almacena el código que indica el rango de precios correspondiente al ancho y alto de un producto dado, el código es referenciado por la tabla de controles. Figura La tabla precios cuenta con 16 campos con diferentes características y longitudes Roles: Figura 2.25 Tabla Precios del sistema Se utiliza esta tabla para referenciar los roles que pueden desempeñar los usuarios figura La tabla roles cuenta con 2 campos con diferentes características y longitudes Figura 2.26 Tabla Roles Rol_usuario: En esta tabla se almacena el rol haciendo referencia al identificador correspondiente en la tabla de roles, y el identificador de usuario correspondiente en la tabla de usuarios. 36

45 La tabla roles _usuarios cuenta con 4 campos con diferentes características y longitudes figura Usuarios: Figura 2.27 Tabla Roles _ usuarios La información de nombre de usuario y contraseña se almacenan en esta tabla con un identificador único que se utilizara como referencia en la tabla Rol_usuario. figura La tabla usuarios cuenta con 3 campos con diferentes características y longitudes Figura 2.28 Tabla Usuarios manera: La relación entre las tablas que confirman la base de datos queda de la siguiente En la figura 2.29 se muestra el esquema de relaciones de la base de datos creada. La tabla rol_usuario está relacionada con el campo id _ usuario a la tabla usuarios y con el campo id_rol a la tabla roles. La tabla colecciones esta relacionada con el campo id _ línea con la tabla líneas. La tabla colores esta relacionada por medio del campo id _ línea a la tabla líneas y el campo id _ colección con la tabla colecciones. La tabla controles esta relacionada con el campo id _ línea con la tabla línea, con el campo id _ colección a la tabla colecciones y con el campo código _ precio a la tabla precios. La tabla pedido _ ítem tiene relación con el campo id _ línea a la tabla líneas, con el campo id _ colección con la tabla colecciones, con el campo id _ color a la tabla colores, con el campo id _ control con la 37

46 tabla controles, con el campo id _ pedido con la tabla pedidos. La tabla pedidos esta relacionada por medio del campo id _ cliente con la tabla clientes. Figura 2.29 Relación de tablas de la base de datos 38

47 CAPÍTULO III DESARROLLO DEL SISTEMA 3.1 IMPLEMENTACIÓN DE PARTE ENSAMBLADORA Se diseño un Rol administrador el cual debe ser atendido por la persona o personas de la fábrica de persianas y cortinas, que tengan el conocimiento adecuado en sistemas, deberán estar capacitados para el manejo de los productos que la fábrica ofrece a los distribuidores autorizados para vender su marca. Éste será encargado de mantener actualizados los datos de la base de datos, como lo son: clientes, descuentos activos, los productos y colores vigentes así como los accionamientos y controles correspondientes a sus productos. En la figura 3.1 podemos observar la interfaz al entrar a la página Web. Figura 3.1 Entrada al Sistema Rol Administrador 39

48 3.1.1 Menú Archivo En el menú Archivo se encuentran 3 módulos: clientes, usuarios y cierre de sesión esto se ve en la figura 3.2. Figura 3.2 Menú archivo rol administrador Clientes En esta parte se visualiza a los distribuidores, figura 3.3, que son los clientes de la empresa de la fábrica de persianas y cortinas, dentro de este menú se puede dar de alta a nuevos distribuidores y también mantener los datos de los clientes actualizados editando los datos de los clientes que ya están dados de alta, y también existe la opción de borrar un cliente esto es para que solo existan clientes activos y no los clientes que por cuestiones administrativas o de cierta índole no son distribuidores activos para la empresa. 40

49 Figura 3.3 Archivo clientes rol Administrador Los datos que solicita para dar de alta a un cliente es: el número de cliente, este es único, el nombre comercial, razón social, RFC, dirección, colonia, código postal, teléfono, fax, país, , descuento, y descuento por pronto pago, éstos dos últimos son muy importantes puesto que son datos que dependiendo de las ventas del distribuidor puede variar cada trimestre, así como también un descuento opcional si el pago es de contado, esto se muestra en la figura 3.4. Figura 3.4 Archivo clientes agregar cliente rol administrador 41

50 Usuarios Para seguridad en el sistema, se implementó el poder dar de alta a varios administradores con los mismos privilegios, en caso que en la fábrica existan varias áreas como: de captura, de producción, logística. Pueden acceder a este rol las personas dadas de alta por un administrador. Esto facilitará el uso del sistema, puede ser que la persona que esté a cargo del sistema, en cuanto reciba un pedido lo pase al área de captura. El área administrativa registrará su pago y el pedido podrá pasar al estatus de producción. El cambio de estatus lo cambiaria el área de captura o en su defecto el área administrativa. Otro caso se puede dar en el área de compras, si ésta notifica que se descontinúa un color de tela, puede este acceder al sistema y eliminar el dato para que en las futuras capturas no cometan el error de pedir un color que ya este descontinuado. Así también en el área de producción, si existe algún cambio de medidas para la fabricación o cambios de controles y accionamientos, una persona de esta área puede fácilmente acceder al sistema y hacer actualizaciones a los cambios correspondientes que la fabrica necesite. Un administrador puede dar de alta a nuevos usuarios, recordando que un usuario siempre estará asignado a un distribuidor, y también podrá cambiar su contraseña. Cada distribuidor tiene la opción de tener n números de usuarios en el sistema, esto ayudará a mantener un control de qué pedidos hace cada persona o cada vendedor de la tienda distribuidora. Cada uno tendrá un nombre de usuario así como también una contraseña con la cual podrá acceder a la página para poder realizar su pedido. 42

51 Cierre de sesión El administrador una vez que haya finalizado, por seguridad debe de cerrar su sesión, esto hace que a la pantalla de entrada al sistema regrese a la ventana principal. Cabe mencionar que el sistema si detecta inactividad por un lapso de tiempo caduca la sesión y el administrador tendrá que volver a entrar con su nombre de usuario y contraseña Menú Pedidos En este Módulo el administrador tendrá acceso a todos los pedidos dividido de la siguiente manera: Pedidos Pedidos por cliente cliente. En la figura 3.5 podemos observar el detalle de un pedido realizado de un cierto Figura 3.5 Ver pedidos por cliente rol Administrador 43