ingeniero en sistemas computacionalesrepositorio.ug.edu.ec/bitstream/redug/6792/1/tesis... · 2017....

UNIVERSIDAD DE GUAYAQUIL

Facultad de Ciencias Matemáticas y Físicas

Carrera de Ingeniería en Sistemas Computacionales

“Servicio de atención al cliente para empresa PYMES con tecnología RIA”

PROYECTO DE TESIS DE GRADO

CURSO DE GRADUACIÓN

Previo a la Obtención del Título de:

INGENIERO EN SISTEMAS COMPUTACIONALES

Autores:

Antonio Rodríguez Condoy

Erwin Romo Moreira

Isaac Ruiz Ramírez

GUAYAQUIL-ECUADOR

Año: 2010

ÍNDICE GENERAL

Agradecimientos I

Dedicatorias IV

Tribunal de Graduación VII

Declaración expresa VIII

Resumen IX

Capitulo 1 1

1. Introducción 1

1.1 Problemática 1

1.2 Solución a la problemática 3

1.3 Misión 4

1.4 Visión 4

1.5 Objetivos 5

1.6 Alcances 6

1.7 Arquitectura de software 8

1.8 La importancia de esta arquitectura 9

1.9 Metodología de desarrollo de software 10

1.10 Análisis de desarrollo de software 10

1.11 Diseño de desarrollo del software 11

1.12 Desarrollo 11

1.13 Pruebas 12

1.14 Cronograma de actividades de trabajo 13

1.15 Recursos para el desarrollo de proyecto 14

1.16 Costo Total del proyecto 16

Capitulo 2 17

2 Análisis 17

2.1 Análisis de dominio 17

2.2 Clases – Responsabilidades – Colaboraciones (CRC) 18

2.3 Módulo de Administración de usuario 19

2.4 Módulo de Servicio de Atención al Cliente 20

2.5 Módulo de Atención al cliente 23

2.6 Diagrama de Referencia de paquetes 25

2.7 Diagrama de clases 27

2.8 Diagrama Entidad Relación 28

Capitulo 3 36

3 Diseño 36

3.1 Diagrama Entidad – Relación con sus atributos 36

3.2 Diseño de pantallas 60

Capitulo 4 62

4 Codificación 62

4.1 Desarrollo del sistema 62

4.1.1 Creación de la base de datos 62

4.1.1.1 Seguridad 63

4.1.2 Creación de los componentes 63

4.1.3 Creación del ambiente gráfico 66

4.1.4 Diseño de la lógica del negocio 67

4.1.5 Apache Web Server 68

4.1.6 Tendencia de programación 69

4.2 Técnicas de desarrollo 71

4.2.1 Metodología 71

4.2.2 Planificación del proyecto 71

4.3 Calidad del sistema 72

Capitulo 5 73

5 Pruebas del Sistema 73

5.1 Las pruebas a realizar en tiempo de desarrollo 75

5.2 Plan de pruebas 85

5.3 Recomendaciones y conclusiones 87

Bibliografía 76

Anexo A 77

Anexo B 79

Terminología 81

ÍNDICE DE FIGURAS

Figura 1. Arquitectura del sitio Web 8

Figura 2. Referencia de paquetes 25

Figura 3. Diagrama de clases 27

Figura 4. DER Módulo de Administración de usuario 28

Figura 5. DER Módulo de atención al cliente 31

Figura 6. DER Modulo Cliente 35

Figura 7. DER general 36

Figura 8. Pantalla principal 53

Figura 9. Ventanas flotantes 54

Figura 10. Ambiente Gráfico 59

Figura 11. Funcionamiento Del Modelo AJAX 76

Figura 12. Calidad de producto 77

ÍNDICE DE TABLAS

Tabla 1. Cronograma de Trabajo Reducido 13

Tabla 2. Costo Total del proyecto 17

Tabla 3. Clase de Administración de Usuario 18

Tabla 4. Clase Usuario 19

Tabla 5. Clase Módulo 19

Tabla 6. Clase Privilegio 19

Tabla 7. Clase Atención al cliente 20

Tabla 8. Clase ITEM 20

Tabla 9. Clase Contacto 21

Tabla 10. Clase Registro Contacto 21

Tabla 11. Clase Mensaje Chat 22

Tabla 12. Clase Chat 22

Tabla 13. Clase Evento 22

Tabla 14. Clase Registro Evento 23

Tabla 15. Tabla Administrador 37

Tabla 16. Tabla Impuesto por zona 38

Tabla 17. Tabla Atributos 38

Tabla 18. Tabla Atributos Productos 39

Tabla 19. Tabla Atributo Valor 39

Tabla 20. Tabla Cabpedido 40

Tabla 21. Tabla Carro de Compras 41

Tabla 22. Tabla Categoria 41

Tabla 23. Tabla Cliente 42

Tabla 24. Tabla Datos Sucursales 43

Tabla 25. Tabla Detalle de Pedido 44

Tabla 26. Tabla Dirección Cliente 44

Tabla 27. Tabla Impuesto 45

Tabla 28. Tabla Lista de Compra 45

Tabla 29. Tabla Otros Valores 46

Tabla 30. Tabla País 46

Tabla 31. Tabla Pasillo 47

Tabla 32. Tabla Producto 48

Tabla 33. Tabla Proveedores 49

Tabla 34. Tabla Provincia 50

Tabla 35. Tabla Publicación 51

Tabla 36. Tabla Tipo Publicación 51

Tabla 37. Tabla Zona Impuesto 52

I

AGRADECIMIENTOS

En primera instancia a Dios por que me ha

brindado la fortaleza necesaria para vencer

todos los obstáculos y así alcanzar la meta.

A mis Padres, que me han regalado el

derecho de nacer, y que han estado

conmigo cada etapa de mi vida.

A mi hermanita, que me apoyado en todo en

el transcurso de mi carrera.

A mi esposa e hijita que me son la luz de mi

vida y me dan fuerzas cada día.

Agradezco los consejos, y ayuda de mi

equipo, que no solo fue de trabajo, sino de

amistad y solidaridad, que se mantuvo firme

en este proyecto.

A los profesores y amigos que siempre

estuvieron en los momentos difíciles.

Dos palabras sencillas pero que reúne todo

un sentimiento Muchas gracias.

Isaac Ruiz Ramírez

II

A mi Dios Todopoderoso, quien fue, es y

será el centro de mi vida; de quien emana

todos mis conocimientos, fuerzas y todo lo

que soy.

A mi amada esposa Zoilita que con su

apoyo incondicional se convirtió en el último

impulso para lograr esta meta. A mi tío

Leonidas que con su motivación y

constancia tornó en metas mi inconstancia.

A mi madre que con sus consejos hicieron

de mí una persona de bien.

A esta institución que impartió sus

conocimientos como una semilla que

germina en el día a día del profesional que

se forma en mi. Y a todos los que con su

apoyo hicieron de este proyecto una

realidad; quienes facilitaron nuestra labor al

entregar su tiempo, consejos,

conocimientos y disposición incluyendo a

mis amigos de tesis y maestros.

Erwin Romo Moreira

III

Agradezco a Dios sobre todo por darme la

fuerza y el valor para poder culminar con

éxito mi carrera universitaria.

A mis padres y hermanas, que siempre han

estado presentes para darme su apoyo

incondicional.

A mi querida Esposa María Isabel que ha

sabido sobrellevar este esfuerzo conmigo.

A todos mis familiares que de alguna u otra

manera estuvieron presentes en los

momentos difíciles y supieron darme su voz

de aliento.

A mis compañeros de tesis, por todo el

empeño y dedicación puestos en este

proyecto.

A todos mis amigos, que siempre fueron un

pilar fundamental para no abandonar mis

estudios.


IV

DEDICATORIAS

En primer lugar a Dios por la vida y las

bendiciones.

A mis padres el Lcdo. Isaac Ruiz V. y Lcda.

Alicia Ramírez de Ruiz por su compresión y

apoyo en todo momento.

A mi hermana Lcda. Alicia Karina por

brindarme su apoyo y consejo para alcanzar

mis metas.

A mi esposa Yanina Zambrano de Ruiz y a

mi hijita Barbarita Ruiz quienes confiaron en

mi capacidad y potencial para culminar esta

carrera.

Isaac Ruiz Ramírez.

V

Me satisface el dedicar este proyecto de

tesis a mi Dios, el Hacedor de todas las

cosas, quien representa lo que soy. A mi

amada esposa Zoilita, el ser que inspira mi

amor y a mis tiernos hijos Eva María y

Gadiel que son la alegría de mi vida, el

reflejo de mi cariño y dedicación. A ustedes

con Amor.

Erwin Romo

VI

Dedico este trabajo a Dios en primer lugar.

A mis padres que siempre confiaron en mí.

A mis hermanas Martha y Andrea, que

siempre me brindaron su apoyo

A mi esposa María Isabel y mis hijos

Gabriel, Ana María y Estefanía, que son la

razón de mi existencia y de mi esfuerzo.


VII

Tribunal De Graduación

___________________________ Presidente

___________________________ Primer Vocal

___________________________ Segundo Vocal

___________________________ Secretario

VIII

Declaración Expresa

La autoría de éste proyecto corresponde exclusivamente al suscrito(s),

perteneciendo a la Universidad de Guayaquil los derechos que genere la

aplicación de la misma.

(Reglamento de graduación de la carrera de Ingeniería en sistemas

Computacionales Art. 26)

_____________________________

ANTONIO RODRIGUEZ CONDOY

___________________________

ERWIN ROMO MOREIRA

___________________________

ISAAC RUIZ RAMIREZ

IX

RESUMEN

Este sistema bajo plataforma Web, a sido elaborado con la última tecnología

para el desarrollo de páginas Web logrando implementar una plataforma lo

más cercano a una aplicación de escritorio dentro de un sistema operativo,

logrando así mejorar los tiempos de uso del sistema para los usuarios finales.

Contamos con un portal completamente amigable tanto en sus interfaces

para los administradores como para los clientes sin importar el nivel de

conocimientos técnicos de los usuarios que lo usarán.

Presentamos un producto que brinda solución a todas aquellas empresas

PYMES que desean exponer sus productos al mundo y expandir sus

negocios a toda una plataforma global.

1

CAPÍTULO 1

1. INTRODUCCIÓN

1.1 PROBLEMÁTICA

En la actualidad, el gran crecimiento del Internet y el desarrollo de las

aplicaciones web y redes distribuidas, nos han llevado a la necesidad de

acceder de un modo rápido y seguro a la información. ¿Se imagina usted

poder atender a sus clientes las 24 horas del día? o ¿promocionar sus

productos mientras duerme?

Toda empresa que no se une a la globalización de sus operaciones a

través del internet, corre el riesgo de quedar rezagada en el mercado y

estancarse solo en su mercado local y nunca abrir sus fronteras.

Es una necesidad imperativa en el mundo de los negocios de la

actualidad tener clientes satisfechos, bien informados y bien atendidos.

La administración de empresas actualmente está esforzándose en

satisfacer todas las necesidades del cliente y mantenerlo servido todos

los días, todo el día; y determinar las características que deben de cumplir

2

en el área de atención al cliente para mejorar la calidad del servicio,

facilitar el contacto y atención de los clientes.

Bajo esta perspectiva hemos analizado la situación de empresas PYMES

y hemos observado que ninguno de ellos posee sistemas de compra de

sus productos en línea. ¿Altos costos de desarrollo?, ¿Falta de

credibilidad en el comercio electrónico?, ¿La conexión a Internet es un

lujo? Pues todas estas preguntas tienen, en el presente, una sola

respuesta: los costos no son un impedimento para desarrollar soluciones

Web. Una de las ventajas, entre muchas, de utilizar una herramienta de

libre distribución (OpenSource) para el desarrollo de una solución Web es

que los costos disminuyen considerablemente.

3

1.2 SOLUCIÓN A LA PROBLEMÁTICA

Para cumplir con la atención al cliente en empresas PYMES, 24 horas al día

7 días a la semana, se propone la creación de un módulo de software basado

en web (internet) con tecnología de punta.

El proyecto tiene como objetivo crear, desarrollar e implementar un modulo

de software para atención al cliente, integrado a un sistema ERP, que

permita a la empresa usuaria ofrecer servicios de atención al cliente en línea

(a través de internet) de manera 24/7 y gozar de las ventajas que implica la

fidelizacion de sus clientes. Ellos van a poder ser atendidos desde el lugar en

donde se encuentren, a la hora que lo necesiten, y tener las respuestas a sus

inquietudes y problemas así como poder hacer sus pedidos o consultar

precios.

4

1.3 MISIÓN

Nuestra empresa tiene como misión principal atender a los clientes de

forma directa desde su sistema informático publicado en el Internet,

brindándoles a los clientes un stock completo en productos de consumo

masivo y suntuario, contando para ello con herramientas que facilitan y

agilizan todo el proceso de pedidos, pago en línea, quejas y reclamos.

1.4 VISIÓN

Lograr la automatización de todos los servicios que actualmente brinda

una empresa PYMES logrando romper las barreras de la distancia entre

las instalaciones físicas y el cliente, cumpliendo con los objetivos de

calidad: atención eficiente y eficaz de los pedidos que realizan los

clientes.

5

1.5 OBJETIVOS

OBJETIVOS GENERALES

Satisfacer las necesidades del cliente , teniendo una comunicación

permanente con el cliente las 24 horas del día los 7 días a la semana,

para así optimizar el tiempo de respuesta de la información

OBJETIVOS ESPECÍFICOS

Dar un servicio diferente de atención al cliente, donde el se sienta

cómodo.

Tener rapidez de respuesta en todas las transacciones.

Brindar un interfase grafico amigable.

6

1.6 ALCANCES

El módulo realizará cotizaciones o pedidos en línea. Se aclara que no

realizará ventas en línea, pero sí podrá generar proformas o

cotizaciones.

Los clientes podrán consultar sus estados de cuenta o deudas

pendientes.

Se contará con un pequeño módulo de chat para atención al cliente en

línea.

El sistema visualizará además información adicional como Misión y

Visión, Preguntas frecuentes, ¿quiénes somos? y promociones

vigentes. Para el efecto se desarrollarán las interfaces adecuadas

para el mantenimiento de esta información por parte de la misma

empresa usuaria.

Se mostrará el catálogo de productos en línea y sin necesidad de que

el visitante de la página web sea cliente.

El sistema podrá generar proformas con datos de clientes o posibles

clientes con el propósito de crear una oportunidad para una futura

venta.

Recopilar información de quejas y reclamos y buzón de sugerencias

de los clientes. Esto permite retroalimentar a la empresa usuaria con

las inquietudes y falencias en la atención de los clientes y así poder

tomar las acciones necesarias en pro-mejoras del servicio.

7

La proforma no afectará al inventario, esto es por seguridad ya que

por ser una página web abierta al público hay que evitar que personas

“molestosas” ingresen información innecesariamente y hagan pedidos,

pudiendo así interferir en los valores del inventario.

Se capturará contactos cada vez que se intente realizar alguna tarea

on-line. Sin embargo, No se hará el mantenimiento de datos de

contactos, solo se captarán clientes potenciales los cuales pasarán al

módulo de ventas para su respectiva gestión.

La opción de chat solo estará disponible cuando haya un usuario con

dicho privilegio y conectado al sistema ERP.

Se dispondrá de opciones de carros de compras. Esto proporcionará a

los clientes las interfaces necesarias para la generación de proformas,

cotizaciones o consulta de datos de productos.

Las proformas generadas se podrán imprimir en papel o ser

exportadas a un archivo PDF (portable document file).

Desde la interface de servicio al cliente se podrá acceder al sistema

ERP a través de un link.

Solo como comentario, la información de estados de cuenta,

productos o promociones dependen de los datos suministrados por los

módulos respectivos. Solo se desarrollará la interface para consumir

dichos datos.

8

1.7 ARQUITECTURA DE SOFTWARE

Se usará un mínimo de dos computadoras, y en ellas se ejecutarán los

módulos N-Capas, utilizando el modelo web2. En una de las computadoras

se instalará el servidor web y la base de datos, mientras que la otra será el

cliente final que tendrá acceso al sistema. Este sistema puede ser utilizado

en redes locales y en la red internet. El esquema global se detalla a

continuación.

FIGURA 1: Arquitectura del sitio WEB

9

1.8 LA IMPORTANCIA DE ESTA ARQUITECTURA

Existen muchas razones por las que usar el desarrollo de aplicaciones

bajo la arquitectura de n Capas.

Abstracción total acerca del origen de datos.- Las distintas capas

se especializan absolutamente en la funcionalidad que deben brindar

(procesamiento en las reglas de negocios o presentación de datos en

la capa cliente) sin importar cual es el origen de los datos procesados.

Bajo costo de desarrollo y mantenimiento de las aplicaciones.- Si

bien al momento del diseño podemos observar una mayor carga de

complejidad, la utilización de esta arquitectura nos brinda un control

más cercano de cada componente, así como también la posibilidad de

una verdadera reutilización del código.

Estandarización de las reglas de negocio.- Las reglas de negocio

se encuentran encapsuladas en un set/librería de rutinas comunes y

pueden ser llamadas desde diversas aplicaciones sin necesidad de

saber cómo esta funciona o ha sido diseñada.

10

1.9 METODOLOGÍA DE DESARROLLO DE SOFTWARE

Como metodología de desarrollo de software usaremos el modelo en

espiral y orientado a objetos, es el adecuado para el desarrollo de éste

sistema debido a factores como el tiempo y recursos. Este es un

enfoque sistemático, secuencial de desarrollo del software que

comienza por:

1.10 ANÁLISIS DE DESARROLLO DE SOFTWARE

Recopilación y análisis de los requerimientos, basados en

experiencias de usuario e investigación por internet.

Análisis de los procesos generalmente aceptados para la atención

de clientes.

Selección de las herramientas de desarrollo.

Preparación y recopilación del material de estudio sobre los

lenguajes indicados para el desarrollo.

Casos de uso.

Análisis y Creación de bosquejos de clases candidatas (Clases –

responsabilidades – colaboradores).

Recolección de información adicional necesaria.

Análisis global en base a la información recopilada.

11

1.11 DISEÑO DE DESARROLLO DE SOFTWARE

Diseño lógico de la Base de datos.

Diseño de clases.

Diseño de eventos y estados.

Definición de las entidades del negocio.

Definición de las reglas del negocio.

Diseño de los diferentes reportes con los que contará la aplicación.

Diseño de la GUI (Interfaz Gráfica de Usuario).

1.12 DESARROLLO:

En esta etapa se procederá a la codificación de todas las especificaciones

de las dos etapas anteriores utilizando plataformas open source PHP,

AJAX, JavaScript. El diseño físico del repositorio de datos a través de

MySQL 5.0.

La etapa de desarrollo implica:

o El diseño físico de la base de datos (tablas relacionales,

funciones, procedimientos).

o Desarrollo de la interfaz de usuario (Paginas Html, Ajax).

o Programación de los procesos en las que incurre las reglas

del negocio (JSP y JavaScript).

12

1.13 PRUEBAS:

Las pruebas se realizarán según la evolución del desarrollo del

proyecto y al finalizar cada una de las actividades de desarrollo, dando

lugar a realizar las correcciones pertinentes si fuera el caso. Los

certificadores serán el grupo de desarrollo. Al finalizar el proyecto se

realizará una prueba piloto de funcionalidad de la aplicación donde los

certificadores serán los usuarios finales, permitiendo así la

retroalimentación y las correcciones necesarias, todo esto dentro del

plazo establecido.

13

1.14 CRONOGRAMA DE ACTIVIDADES DE TRABAJO.

ACTIVIDADES TIEMPO RECURSO HUMANO

Ámbito 3,5 días

Documentación inicial (anteproyecto) 3 días R1 100%

Identificar riesgos 2 días

Todos 100%

Definir recursos preliminares 0,25 días R1 25%, R3 25%, R2 25%, R3 25%

Definir métodos para establecer las comunicaciones durante el proyecto 0,25 días Todos 100%

Análisis/planeación 15 días

Recopilación y Análisis de las opciones del sistema 4 días R1 50%, R2 50%

Análisis de los procesos de implementación 3 días R1 50%, R2 50% Recolectar documentos y anexos que servirán también

como base para el análisis 0,5 días R2 50%, R3 50%

Recolección de información adicional necesaria 0,5 días R2 50%, R3 50%

Análisis global en base a la información recopilada 7 día Todos 100%

Diseño 18 días

Diseño lógico de la base de datos 3 días R1 100%

Definición de las entidades del negocio 4 días R1 50%, R3 50%

Definición de las reglas del negocio 4 días R1 50%, R2 50%

Diseño de la GUI (Interfaz Gráfica de Usuario) 7 días Todos 100%

Desarrollo 38 días Diseño físico de la base de datos (Tablas relacionales,

funciones, procedimientos) 2 días R1 100%

Desarrollo de la interfaz de usuario 20 días R1 40%, R2 20%,

R3 45%

Programación de las entidades del negocio 6 días R1 50%, R2 50% Programación de los procesos en las que incurre las reglas

del negocio 10 días R1 50%, R2 50%

Pruebas 12 días

Probar componente: interfaz de usuario 2 días R2 50%,R3 50%

Prueba y depuración del componente completo 10 día Todos 100%

Implementación 2 días

Implementación piloto del sitio web 2 días Todos 100%

Revisión del proyecto finalizado 6 días

Revisión y documentación de la información del proyecto 4 días Todos 100%

Revisión del proyecto finalizado completada 2 días Todos 100%

R1 (Recurso 1): Erwin Romo

R2 (Recurso 2): Isaac Ruíz R3 (Recurso 3): Antonio Rodríguez

El tiempo estimado de desarrollo del proyecto es de 4.5 meses.

TABLA 1: Cronograma de Trabajo Reducido

14

1.15 RECURSOS PARA EL DESARROLLO DEL PROYECTO

HUMANOS (todos deben tener conocimientos de programación):

1 Desarrollador programador web con conocimientos de

base de datos y tecnologías de servidores web.

2 Desarrolladores web.

SOFTWARE:

Windows Xp (Sistema Operativo).

Php, JSP, JAVASCRIPT, AJAX, HTML (Lenguajes y

tecnologías de desarrollo).

Eclipse.

Frameworks php o java según consenso con los grupos de

tesis. (cakephp, etc.…)

Servidor Web Apache Tomcat.

Servidor Web Apache.

Flash, DreamWeaver, FireWork (Herramientas de Diseño).

Microsoft Project (Planificación Temporal del Proyecto).

Microsoft Visio.

Base De Datos MySQL 5.0.

Software de Virtualización VM Ware.

15

TECNOLÓGICO:

USB flash memories (1.00 GB y 2.00GB).

3 computadores, uno por desarrollador.

RED (LAN).

Impresora.

Internet banda ancha.

16

1.16 COSTO TOTAL DEL PROYECTO.

Tiempo Estimado en meses 6

Personas a Trabajar 3

Sueldos Mensual Total

Sueldo Mensual por 3 personas 1350 8100 8100

Equipos P.U. Cant. Total

Computadoras DUAL CORE 500 3 1500

Impresora Epson tx100 60 1 60

Sitch D-Link 8 puertos RED 22 1 22

Cable UTP 0.45 10 4.5

Conectores RJ45 0.2 10 2 1588.5

Internet Mensual Total

Servicio de Internet

Movistar 54.88 329.28 329.28

Varios Diario Mensual Total

Transporte 9 270 1620

Luz 15 90

Agua 6 36

Celular 30 180

Copias 0.3 9 54 1980

Suministros

Suministros por 6 meses Cant. P.U. Total

Resmas de Hojas 4 3 12

Lápices Caja 10 1 2 2

Plumas Caja 10 1 3.5 3.5

Clips Caja 1 2.5 2.5

Carpetas Manila 50 unidades 1 10 10

Tinta negra 1 20 20 50

Total 12,047.78

TABLA 2: Costo total del proyecto

17

CAPÍTULO 2

2 ANÁLISIS

Este capítulo desarrolla una serie de modelos que describen la base,

funcionamiento y operaciones que van a satisfacer los requerimientos

de los clientes.

Como acotación adicional, este módulo está basado en

procedimientos de servicio al cliente estándares; sin embargo se

pueden hacer modificaciones según las necesidades específicas de

cada cliente y con la debida negociación del valor monetario del

software.

2.1 ANALISIS DEL DOMINIO

Los módulos de atención al cliente y administración de usuarios del

sistema son un subdominio del dominio de aplicación del Sistema

ERP. Se definirán clases lo más reutilizables posible, así como

también se consumirán clases de los otros subdominios definidos por

los módulos sub-adyacentes del sistema ERP.

18

2.2 CLASES - RESPONSABILIDADES – COLABORACIONES

(CRC)

El modelado de CRC aporta un medio sencillo de identificar y

organizar las clases que resulten relevantes al sistema o requisitos del

producto.

2.3 MODULO DE ADMINISTRACION DE USUARIO

Clase Administración de usuarios: Esta clase se encarga del control y

administración de los usuarios del sistema ERP.

Nombre de la clase: Administración Usuarios

Tipo: Sistema

Características: Intangible, atómica, concurrente, temporal, protegida

Responsabilidades: Colaboradores:

* Leer usuario y contraseña. * Usuario

* Autenticar usuario * Usuario

* Cargar credenciales de usuario autenticado.

* Usuario * Módulo * Privilegio

* Mantener datos de los usuario * Usuario

* Mantener datos de los módulos * Módulo

* Mantener datos de los privilegios * Privilegio

* Asignar a un usuario el módulo con su respectivo privilegio


TABLA 3: Clases administración de Usuario

19

Clase Usuario: Contiene los datos de un usuario, además del módulo

asignado con sus respectivos privilegios.

Nombre de la clase: Usuario

Tipo: Datos

Características: Intangible, atómica, concurrente, permanente, protegida


* Datos de un usuario.

* Módulo * Privilegio

Clase Módulo: Contiene los datos de un módulo del sistema.

Nombre de la clase: Módulo

Tipo: Datos



* Datos de un módulo del sistema

Clase Privilegio: Contiene los datos de un privilegio.

Nombre de la clase: Privilegio

Tipo: Datos



* Datos de un privilegio.

TABLA 6: Clase de privilegio

TABLA 5: Clase de Módulo

TABLA 4: Clase de Usuario

20

2.4 MODULO DE SERVICIO DE ATENCIÓN AL CLIENTE

Clase Atención al cliente: Clase principal del módulo de servicio al

cliente. Maneja todas las operaciones e información.

Nombre de la clase: Atención al cliente

Tipo: Sistema



* Mostrar página de inicio * Promoción * Menú

* Ejecutar Carrito de compras * Usuario

* Iniciar sesión en ERP * Usuario

* Mantener datos de los usuario * Usuario

* Mantener datos de los módulos * Módulo

* Mantener datos de los privilegios * Privilegio

* Asignar a un usuario el módulo con su respectivo privilegio


Clase Ítem: Esta clase representará objetos temporales y genéricos,

como tales valores que solo contienen a manera de operación un

código, un nombre y un valor.

Nombre de la clase: Ítem

Tipo: Interacción



* Datos de un objeto sencillo.

TABLA 7: Clase Atención al Cliente

TABLA 8: Clase Item

21

Clase Contacto: Contiene los datos de un contacto del sistema. Este

contacto es genérico, pero puede enlazarse en caso de ser posible

con los datos de algún cliente/proveedor/empleado de la empresa.

También permite la autenticación de usuario externos a la empresa,

esto se hace con el afán de tener un control estadístico o de seguridad

de clientes.

Nombre de la clase: Contacto

Tipo: Datos



* Datos del contacto.

* Cliente * País * Provincia * Ciudad

Clase Registro Contacto: Registra los contactos nuevos al sistema.

Nombre de la clase: Registro contacto

Tipo: Interacción



* Ingresar contacto * Contacto

* Validar contacto con ERP * Contacto

* Administrar contactos * Usuario

TABLA 9: Clase Contacto

TABLA 10: Clase Registro contacto

22

Clase Mensaje Chat: Representa un mensaje

Nombre de la clase: Mensaje Chat

Tipo: Datos



* Validar Mensaje para grabación * Contacto

* Preparar mensaje * Contacto

Clase Mensaje Chat: Mantiene los datos de las conversaciones.

Nombre de la clase: Chat

Tipo: Sistema



* Iniciar sesión de chat * Registro contacto

* Verificar si contacto está en ERP * Contacto

* Grabar mensaje * Mensaje Chat

* Invocar registro de contacto si contacto es nuevo.

* Registro contacto

* Consultas * Mensaje Chat * Contacto

Clase Evento: Información de un evento.

Nombre de la clase: Evento

Tipo: Datos



* Mantener datos del evento

TABLA 11: Mensaje Chat

TABLA 12: Clase Chat

TABLA 13: Clase Evento

23

Clase Registro Evento: Graba los eventos del módulo de atención al cliente

para estadísticas y auditoría.

Nombre de la clase: Registro Evento

Tipo: Sistema



* Grabar evento * Evento

* Consultas * Evento * Contacto

2.5 MODULO DE ATENCION AL CLIENTE.

El usuario se autentica utilizando la ventana de ingreso de usuario

y contraseña.

El usuario externo ingresa datos de comentarios en buzón de

sugerencias.

El sistema envía correo electrónico a usuario responsable del tipo

de mensaje en el buzón.

El usuario externo selecciona la opción de “contáctanos” para

obtener información de contactos.

El cliente selecciona la opción de consultas de estado de cuenta y

se autentica.

El cliente consulta su estado de cuenta.

El sistema muestra el estado de cuenta de los clientes de la

empresa usuaria.

El usuario selecciona la opción de chat.

TABLA 14: Clase Registro Evento

24

El usuario externo selecciona la opción de chat.

El sistema muestra opciones para que los usuarios puedan leer

acerca de Misión/visión, preguntas frecuentas, ¿quiénes somos?,

promociones vigentes.

El usuario puede administrar el contenido de Misión/visión,

preguntas frecuentes, ¿quiénes somos?

El usuario selecciona la opción “Catálogo de productos” y puede

consultas precios, existencia y línea de productos.

El sistema muestra las promociones disponibles.

El sistema genera proformas con los datos de productos

seleccionados por el usuario externo.

El sistema genera impresiones en archivos pdf.

El sistema genera impresiones en papel.

El usuario envía los productos seleccionados en el catálogo de

productos a la base de pedidos on-line para que el departamento

de facturación realice las gestiones respectivas.

El sistema recoge estadísticas acerca del comportamiento de los

internautas, sobretodo en la parte de catálogo de productos para

mejoramiento de servicio y creación de promociones de productos.

El sistema muestra link para inicio de sesión al sistema ERP.

El cliente selecciona opción Ver seguimiento de cotizaciones on-

line.

25

2.6 DIAGRAMA DE REFERENCIA DE PAQUETES

Este diagrama muestra cada uno de los paquetes del módulo. Cada paquete

contiene un conjunto de clases relacionadas para su funcionamiento. Hay un

paquete por cada operación del módulo. Se incluyó en este diagrama como

paquete adicional al sistema ERP.

FIGURA 2: Referencia de paquetes

26

El paquete Cotizaciones contiene las clases necesarias para implementar el

carro de compras, seguimientos de pedidos y cotizaciones.

El paquete EstadosDeCuentaClientes maneja las consultas de los estados

de cuenta de los clientes del sistema.

El paquete SugerenciasComentarios administra los mensajes de buzón para

que sean atendidos por las personas responsables.

El paquete Chat controla la funcionalidad de chat de los contactos que lo

requieran.

El paquete Administración de usuarios administra el control de acceso

autenticado al sistema ERP.

27

2.7 DIAGRAMA DE CLASES

Este diagrama muestra un modelado de las clases del módulo de

administración de usuario y atención al cliente. También se agregó las

agregaciones y cardinalidad respectiva.

FUGURA 3: Diagrama de Clases

28

2.8 DIAGRAMA ENTIDAD RELACION (DER) En esta herramienta de modelado de datos, se muestra la estructura de

datos del sistema ERP.

FUGURA 4: DER Módulo de Administración de Usuario

29

Generalidades

En el diagrama entidad relación para el módulo de administración de

usuarios se han creado las tablas para mantener la información de los

usuarios, módulos del sistema y privilegios para los módulos. El sistema no

estará en capacidad de borrar registros físicamente en tablas padre de la

base de datos, por lo que cada tabla padre tendrá un campo llamado activo

que indicará con „1‟ que el registro es válido y „0‟ cuando ha sido dado de

baja por el usuario.

Se optó por utilizar el prefijo sis para indicar que son tablas del sistema

completo y que no dependen de ninguna otra entidad.

Tabla Sis_modulo

Se mantendrá los datos de los módulos registrados en el sistema. Cada

módulo tendrá un código único, un nombre descriptivo, la fecha de creación

del registro que es prácticamente la fecha en que se instaló. El campo activo

contendrá un valor de „1‟ para indicar que el registro no ha sido borrado.

30

Tabla Sis_usuario

Contiene los datos de los usuarios del sistema completo. Contiene un código

único, el nombre de usuario (o generalmente llamado nick), la contraseña

cifrada para seguridad, la fecha de creación del usuario y el identificador de

rrhh que indica que el usuario pertenece a la empresa.

Tabla Sis_privilegio

Son los datos de los privilegios disponibles en el sistema. Se mantiene un

código único y un nombre descriptivo.

Tabla Sis_usuario_modulo

Esta tabla indica los módulos asignados a los usuarios indicados. Cada

usuario se le puede asignar un módulo con su respectivo privilegio para

poder trabajar en el ERP. El privilegio asignado por cada módulo habilitará

las opciones a las cuales el usuario podrá ingresar.

Tabla sat_evento_tipo

Esta tabla contiene las tipologías de los eventos de los movimientos

realizados en el módulo de servicio al cliente.

Tabla sat_evento

Con el afán de recoger estadísticas de navegación y otros eventos de

auditoría se creó esta tabla. Está tabulada por tipo para poder obtener

reportes o permitir el desarrollo de consultas futuras.

31

Tabla sat_chat_historial

Guarda las conversaciones realizadas a través de las interfaces del chat on-

line. Contiene la fecha del mensaje, el contacto (previamente autenticado o

registrado) y el mensaje.

FUGURA 5: DER Módulo de Atención al Cliente

32

Tabla sat_contacto

Esta tabla contiene los datos del contacto. Para toda operación realizada en

el módulo de servicio al cliente, el internauta debe registrarse

obligatoriamente. Se ha tipificado 4 tipos de contacto (véase tabla

sat_contacto_tipo): cliente, proveedor, empleado o varios.

Tabla sat_contacto_tipo

Esta tabla contiene los tipos de contacto.

Tabla sat_variable

Aquí se simula un sistema de variables y constantes globales para todo el

módulo de atención al cliente. Las variables están agrupadas.

Tabla sat_buzon_tipo

Tipificaciones del mensaje que está dejando el internauta en el buzón de

mensajes. Cada tipificación está asociada vía email a un empleado

responsable de darle seguimiento, por tal motivo se han creado los campos

email_responsable, email_responsable_copia y

email_Responsable_copia_oculta.

33

Tabla sat_pedido

Se registran las cotizaciones o proformas solicitadas por los potenciales

clientes. Se registra la fecha de la cotización, el código de contacto, el estado

de la cotización, comentarios adicionales. Se obtiene el campo

genera_proforma para saber si el usuario generó la proforma impresa o no.

Un pedido se transfiere al módulo de facturación y este le da el tratamiento

respectivo para validarlo y despacharlo.

Tabla sat_pedido_detalle

Se graban los detalles de los productos de cada pedido. Se agregaron 2

campos adicionales para indicar si el pedido fue generado debido a alguna

promoción indicada por el módulo de marketing. EL campo

mar_combos_pk_com_cod_articulo indica el código de un artículo que está

en promoción individualmente; el campo

mar_promocion_pk_pro_codigo_promocion contiene el código del combo que

se incluyó en el pedido.

Tabla sat_pedido_estado

Contiene las tipologías de los estados de un pedido o cotización.

34

Tabla sat_datos_generales

Contiene datos generales de la empresa usuario, para que aparezcan en la

página de inicio del módulo.

Tabla sat_faq

La sección de preguntas frecuentes del módulo de atención al cliente, es

administrable por el usuario. En esta tabla se guarda las preguntas y

respuestas categorizada o agrupadas. Los campos preguntas y repuestas

pueden contener información de tipo texto plano o en formato HTML según lo

que indique el campo tipo_texto. Opcionalmente las preguntas y respuestas

se les puede aplicar vigencia, es decir que solo se muestren en determinados

rangos de fecha.

Tabla sat_categoria

Contiene las tipificaciones o agrupaciones de las preguntas frecuentes.

Tabla sat_contactanos

Contiene información administrable por el usuario para mostrar los datos de

contacto agrupados. Se muestra un nombre de contacto, su agrupación, 2

teléfonos y su correo electrónico.

35

FUGURA 6: DER Módulo Cliente

36

CAPÍTULO 3

3 DISEÑO

3.1 DIAGRAMA ENTIDAD RELACIÓN

FUGURA 7: DER General

37

TABLA: administrador

Nombre de campo Tipo Tamaño

fecha_creacion Varchar 10

fecha_modifi Varchar 10

Nombre Varchar 80

Apellido Varchar 80

Email Varchar 150

User (PK) Varchar 10

Pass Varchar 250

Direccion Varchar 150

Telefono Varchar 12

Movil Varchar 12

Genero Varchar 7

Sucursal Varchar 50

Estado Varchar 1

usuario_crea Varchar 10

TABLA 15: Tabla Administrador

38

TABLA: asignar_impuesto_zona

Nombre de Campo Tipo Tamaño



id_impuesto Varchar 15

id_zona_impuesto Varchar 15

id_asigna_imp (PK) Varchar 15

Descripción Varchar 150

Estado Varchar 1


TABLA 16: Tabla Impuesto por zona

39

TABLA: atributos




id_atributo (PK) Int 11

atributo Varchar 80

estado Varchar 1


TABLA 17: Tabla Atributos

40

TABLA: atributo_prod



id_producto Varchar 10

id_valor Int 11


TABLA 18: Tabla Atributo Producto

41

TABLA: atributo_valor




id_valor (PK) Int 11

id_atributo Int 11

valor Varchar 70

estado Varchar 1


TABLA 19: Tabla Atributo Valor

42

TABLA: cabpedido


num_pedido (PK) int 11

email_cliente varchar 200

id_direccion int 11

fecha_pedido varchar 25

subtotal float

descuento float

transporte float

iva float

total float

sucursal_despacho varchar 10

estado varchar 10

usuario_crea varchar 10

TABLA 20: Tabla CabPedido

43

TABLA: carrocompra


session_id varchar 500

codigo Varchar 20

descripcion Varchar 250

path Varchar 150

cantidad Int 11

valUnidad float

SubTotal float

TABLA 21: Tabla Carro de compras

44

TABLA: categoría


fecha_creacion varchar 10


id_categoria (PK) Varchar 10

nombre Varchar 50

id_pasillo Varchar 15

estado Varchar 1


TABLA 22: Tabla Categoría

45

TABLA: cliente


nombre varchar 120

apellido varchar 120

Email (PK) varchar 150

pass varchar 250

pais varchar 100

provincia varchar 100

telefono varchar 12

celular varchar 12

tarjeta varchar 15

estado varchar 1


TABLA 23: Tabla Cliente

46

TABLA: datos_sucursales



fecha_modifi varchar 10

id_datos_sucursal

(Pk) varchar 10

ruc varchar 15

nombre varchar 150

direccion varchar 150

email varchar 150

telefono varchar 12

pais varchar 50

ciudad varchar 50


zona varchar 50

path varchar 150

representante_legal varchar 100

direccion_repres varchar 150


TABLA 24: Tabla Datos Sucursales

47

TABLA: detpedido


num_pedido (PK) int 11

linea (PK) int 11

id_producto varchar 25

cantidad float

valUnit float

subTotal float

TABLA 25: Tabla detalle de pedido

48

TABLA: direccioncliente


id_direccion (PK) int 11


direccion varchar 300

referencia varchar 300

contacto varchar 250

telefono1 varchar 25

telefono2 varchar 25

TABLA 26: Tabla Dirección Cliente

49

TABLA: impuesto


fecha_creacion varchar(10) 10

fecha_modifi varchar(10) 10

id_impuesto (PK) varchar(15) 15

impuesto varchar(50) 50

valor float

estado varchar(1) 1

usuario_crea varchar(10) 10

TABLA 27: Tabla Impuesto

50

TABLA: listacompra


Id (Pk) int 11



nombre_lista varchar 150


TABLA 28: Tabla Lista de Compra

51

TABLA: otrosvalores


idValor (PK) varchar 5

valor float

descripcion varchar 200

TABLA 29: Tabla Otros Valores

52

TABLA: pais




id_pais (PK) int 11

pais varchar 150

estado varchar 1


TABLA 30: Tabla País

53

TABLA: pasillo


id_tabla (PK) int 11

id_pasillo varchar 15



nombre varchar 50


estado varchar(1) 1

TABLA 31: Tabla Pasillo

54

TABLA: producto




id_producto (PK) varchar 25

id_categoria varchar 10

ruc_fabricante varchar 15

nombreProducto_es varchar 80

nombreProducto_en varchar 80

Path varchar 100

descripcion_es varchar 200

descripcion_en varchar 200

Precio float

Estado varchar 1


TABLA 32: Tabla Producto

55

TABLA: proveedores




ruc (PK) varchar 15

Nombre varchar 50

Pais varchar 50

Direccion varchar 100

Telefono varchar 20

Fax varchar 20

contacto varchar 50

email varchar 150

url varchar 150

estado varchar 1


TABLA 33: Tabla Proveedores

56

TABLA: provincia




id_pais int 11

id_provincia (PK) int 11


estado varchar 1


TABLA 34: Tabla Provincia

57

TABLA: publicacion


id_publicacion (PK) varchar 25

fecha_crea varchar 10



id_tipo varchar 25

Precio float

Estado varchar 1

descripcion_es varchar 250

descripcion_en varchar 250

Path varchar 100


TABLA 35: Tabla Publicación

58

TABLA: tipo_publicacion


id_tipo (Pk) varchar 25

tipo varchar 80

TABLA 36: Tabla Tipo Publicación

59

TABLA: zona_impuesto




id_pais int 11

id_provincia int 11

id_zona_impuesto

(PK) varchar 15

nombre varchar 50

estado varchar 1


TABLA 37: Tabla Zona Impuesto

60

3.2 DISEÑO DE PANTALLAS

PANTALLA PRINCIPAL

Esta pantalla permite que el cliente navegue en el sitio de manera

rápida y sencilla con tan solo dar clic en alguno de los enlaces. Esta

pantalla permite tener todo a la vista, es decir si el usuario esta

realizando una compra puede navegar entre los productos, ver su

carrito de compras, sus listas disponibles y chatear con el

administrador visualizando siempre estas opciones.

FIGURA 8: Pantalla Principal

61

VENTANAS FLOTANTES

Las ventanas flotantes ayudan a una mejor interacción hombre

máquina, ya que todas las opciones de la pantalla administrativa se

despliegan como una ventana flotante.

.

FIGURA9: Ventanas Flotantes

62

CAPÍTULO 4

4 CODIFICACIÓN

4.1 DESARROLLO DEL SISTEMA

4.1.1 CREACIÓN DE LA BASE DE DATOS

Para la creación de la base de datos se eligió MySQL, ya que es un

sistema de gestión de base de datos relacional, multihilo y

multiusuario, es muy utilizado en aplicaciones web, como phpBB, en

plataformas (Linux/Windows-Apache-MySQL-PHP/Perl/Python), Su

popularidad como aplicación web está muy ligada a PHP, que a

menudo aparece en combinación con 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.

El administrador de la base de datos (DBA) es quien se encarga de

configurar y administrar los datos de manera segura mediante

phpMyAdmin que es una herramienta escrita en PHP con la intención

http://es.wikipedia.org/wiki/PHP

63

de manejar la administración de MySQL a través de páginas webs,

utilizando Internet.

4.1.1.1 SEGURIDAD

Permitir acceder a la base datos exclusivamente al personal

autorizado, es decir al DBA con previo ingreso de usurario y

contraseña, las mismas que serán asignadas por el administrador a

los diferentes usuarios con los permisos y restricciones respectivas.

4.1.2 CREACIÓN DE LOS COMPONENTES (MÓDULOS)

Todas las opciones de proceso dentro del sistema se encuentran

modularizadas dentro de estructuras conformadas por carpetas en el

sitio Web.

Tanto el sistema cliente como el sistema administrador son

considerados dos grandes módulos que operan en forma

independiente, comunicándose al mismo repositorio de datos.

La estructura de carpetas se detalla a continuación:

Carpeta png.- Contiene los archivos fuentes del todo el diseño

grafico del sitio web.

http://es.wikipedia.org/wiki/MySQL

http://es.wikipedia.org/wiki/Internet

64

Carpeta js.- Contiene todos los programas fuentes javascript

para brindar la operatividad AJAX del sitio, así como el

algoritmo de encriptación MD5.

Carpeta informate.- Contiene todas las secciones de

información del sitio.

Carpeta img.- Contiene todos los archivos objetos (gif, jpg) del

diseño grafico del sitio, generados a partir de los archivos con

extensión png.

Carpeta css.- Contiene todos los archivos de diseño de estilo

en cascada, donde se almacenan tipos de letras y diseño

gráfico de objetos de formularios.

Carpeta Connections.- Contiene dentro de un archivo php la

tercer capa de este proyecto.

Carpeta clases.- Contiene subestructuras de carpetas que

anidan toda la lógica de procesos del negocio y brinda toda la

funcionalidad Adobe Spry - AJAX - XML.

Carpeta xml.- Contiene los archivos con extensión xml para el

funcionamiento de la sección Mi carrito de compras del cliente.

Carpeta thickbox.- Contiene los archivos: thickbox.js,

thickbox.css, loador.gif, jquery.js.

Carpeta Templates.- Contiene el archivo

plantillaMeVoyalSuper.dwt.

65

Carpeta sql.- Contiene un único archivo de texto que es el

script de la base de datos.

Carpeta SpryAssets.- Contiene los archivos

SpryAccordion.css, SpryAccordion.js,

SpryValidationTextField.css, SpryValidationTextField.js.

.

Carpeta admin.- Contiene todo el módulo de administración del

sistema y su estructura es idéntica a la detallada en puntos

anteriores.

66

4.1.3 DISEÑO DEL AMBIENTE GRÁFICO

Para este diseño se uso de Dreamweaver CS3, dado que éste

programa fue construido entre otras alternativas para diseñar y crear

páginas Web.

Dreamweaver CS3 con esto creamos un ambiente minimalista, ya que

este concepto es más aceptado al momento de navegar en Internet.

Mediante el uso de Dreamweaver CS3 nuestro ambiente gráfico se

visualiza como se muestra en la siguiente figura:

FIGURA 10: Ambiente Grafico

67

4.1.4 DISEÑO DE LA LÓGICA DEL NEGOCIO

Es la parte de un sistema que se encarga de las tareas relacionadas

con los procesos de un negocio, rutinas que realizan entradas de

datos, consultas a los datos, generación de informes y más

específicamente todo el procesamiento que se realiza detrás de la

aplicación visible para el usuario.

Para el diseño de la lógica del negocio se uso PHP, que es un

lenguaje de programación usado normalmente para la creación de

contenido para sitios Web con los cuales se puede programar las

páginas html y los códigos de fuente. El fácil uso y la similitud con los

lenguajes más comunes de programación estructurada, como C ,

permiten a la mayoría de los programadores crear aplicaciones

complejas.

Debido al diseño de PHP, también es posible crear aplicaciones con

una interfaz gráfica para el usuario (también llamada GUI ).

Su ejecución se da en un servidor Web, en el cual se encuentra

almacenado el script, y el cliente sólo recibe el resultado de la

ejecución.

68

4.1.5 APACHE WEB SERVER

El servidor HTTP Apache es un servidor web HTTP de código abierto

para plataformas Unix (BSD, GNU/Linux, etc.), Microsoft Windows,

Macintosh y otras, que implementa el protocolo HTTP/1.1 y la noción

de sitio virtual.

Tiene otras características mensajes de error altamente configurables,

bases de datos de autenticación y negociado de contenido, pero le

falta la interfaz gráfica que ayude a su entorno.

La arquitectura del servidor Apache es muy modular. El servidor

consta de una sección core y diversos módulos que aportan mucha de

la funcionalidad que podría considerarse básica para un servidor web

69

4.1.6 PROGRAMACIÓN AJAX

Ajax, acrónimo de Asynchronous JavaScript And XML, es una técnica

de desarrollo web para crear aplicaciones interactivas o RIA (Rich

Internet Applications). Estas aplicaciones se ejecutan en el cliente, es

decir, en el navegador de los usuarios mientras se mantiene la

comunicación asíncrona con el servidor en segundo plano. De esta

forma es posible realizar cambios sobre las páginas sin necesidad de

recargarlas, lo que significa aumentar la interactividad, velocidad y

usabilidad en las aplicaciones.

Ajax es una tecnología asíncrona, en el sentido de que los datos

adicionales se requieren al servidor y se cargan en segundo plano sin

interferir con la visualización ni el comportamiento de la página.

JavaScript es el lenguaje interpretado (scripting language) en el que

normalmente se efectúan las funciones de llamada de Ajax mientras

que el acceso a los datos se realiza mediante XMLHttpRequest, objeto

disponible en los navegadores actuales

70

Ajax es una combinación de cuatro tecnologías ya existentes:

XHTML (o HTML) y hojas de estilos en cascada (CSS) para el diseño que acompaña a la información.

Document Object Model (DOM) accedido con un lenguaje de scripting por parte del usuario, especialmente implementaciones ECMAScript como JavaScript y JScript, para mostrar e interactuar dinámicamente con la información presentada.

El objeto XMLHttpRequest para intercambiar datos de forma asíncrona con el servidor web. En algunos frameworks y en algunas situaciones concretas, se usa un objeto iframe en lugar del XMLHttpRequest para realizar dichos intercambios.

FIGURA 11: Funcionamiento del modelo AJAX

71

4.2 TÉCNICAS DE DESARROLLO

Las tareas llevadas a cabo en la gestión de este proyecto es con el fin de

culminar con éxito.

4.2.1 METODOLOGÍA USADA

La metodología usada es la Microsoft Solutions Framework.

4.2.2 PLANIFICACIÓN DEL PROYECTO

Hemos considerado las actitudes de cada uno, recursos tecnológicos y

acceso a la información online (Internet):

Antonio Rodríguez Condoy, programación.

Isaac Ruiz Ramírez, investigación tecnológica.

Erwin Romo Moreira, gestor del proyecto, diseñador.

La programación del proyecto se realizó en base a tareas

específicas dependiendo de las secciones de la plantilla del sitio

web.

72

4.3 CALIDAD DEL SISTEMA

La Gestión de calidad es el conjunto de normas de porno

interrelacionadas de una empresa u organización por los cuales se

administra de forma ordenada la calidad de la misma, en la búsqueda de

la satisfacción de las necesidades y expectativas de sus clientes.

Nos hemos basado para medir la calidad del software en base a las

técnicas McCall.

El modelo de McCall organiza los factores en ejes o puntos de vista

desde los cuales el usuario puede contemplar la calidad de un producto.

FIGURA 12: Calidad del Producto

73

CAPÍTULO 5

5 PRUEBAS DEL SISTEMA

Dependiendo del tamaño de la Empresa que usara el Sistema y el riesgo

asociado a su uso, puede hacerse la elección de comenzar la operación del

Sistema solo en un área de la Empresa (como una Prueba piloto), que puede

llevarse a cabo en un Departamento o con una o dos personas. Cuando se

implanta un nuevo sistema lo aconsejable es que el viejo y el nuevo

funcionen de manera simultanea o paralela con la finalidad de comparar los

resultados que ambos ofrecen en su operación, además dar tiempo al

personal para su entrenamiento y adaptación al nuevo Sistema.

Durante el Proceso de Implantación y Prueba se deben implementar todas

las estrategias posibles para garantizar que en el uso inicial del Sistema este

se encuentre libre de problemas lo cual se puede descubrir durante este

proceso y levar a cabo las correcciones de lugar para su buen

funcionamiento.

Desdichadamente la evaluación de Sistemas no siempre recibe la atención

que merece, sin embargo cuando se lleva a cabo de manera adecuada

proporciona muchas informaciones que pueden ayudar a mejorar la

efectividad de los esfuerzos de desarrollo de aplicaciones futuras.

74

Hacer la prueba infalible de un programa implicaría ponerlo en todas las

situaciones posibles, de esta manera aseguraríamos que el mismo se

encuentra completamente libre de errores. Como se imaginarán esto es

imposible porque a pesar de que el número de líneas que lo conforman es

finito, la prueba para un ambiente Web pasa a ser infinita cuando entran en

juego los bucles, con lo que hacer la prueba empírica exacta pasa de ser una

enorme e incalculable cantidad de posibilidades a una cifra ciertamente

infinita. Considerando este último punto lo que queda por hacer es buscar

formas y métodos abordables para acercarse lo más posible a un resultado

optimo.

También se debe de realizar la prueba de rendimiento para saber si soportar

el programa condiciones extremas para verificar el tiempo de respuesta.

75

5.1 LAS PRUEBAS A REALIZAR EN TIEMPO DE DESARROLLO

5.1.1 PRUEBAS INFORMALES O FASE DE PRUEBA INFORMAL

Son aquellas pruebas que hace el desarrollador en su oficina, tienen

como objetivo comprobar que el programa compile y ver que todo está

yendo como debiera, normalmente se realizan varios cientos de estas

pruebas que básicamente consisten en compilar periódicamente

durante el desarrollo y ejecutar para ver el resultado. Dentro de las

pruebas en tiempo de desarrollo encontraremos:

5.1.1.1 LAS PRUEBAS DE UNIDADES

Estas son pruebas de menor escala y consisten en probar cada

uno de los módulos que conforman el programa, cuando estos

módulos son extensos o complejos se dividen para probar

objetivamente partes mas pequeñas, este tipo de pruebas es la

mas común. Ejemplo de estas pruebas dentro de nuestro sitio Web

es cuando se diseña una página con extensión php o extensión js

que integra lógica de negocios y de procesos y necesita ser

“incluida” o llamada por otras páginas clientes; en estos casos

estas páginas para lograr ser probadas en forma de módulos

independientes fueron invocadas directamente desde el navegador

enviando sus respectivos parámetros así:

76

http://localhost/carrocompra&cargarListaXML=listaComprasMama

Es de esta forma como medimos los resultados de cada módulo de

forma independiente sin la necesidad de que las páginas clientes

tengan que invocarlas.

5.1.1.2 LAS PRUEBAS DE INTEGRACIÓN

Estas pruebas tienen por objetivo verificar el conjunto

funcionamiento de dos o mas módulos, si bien se deben poner en

práctica desde la creación de dos módulos que interactúen entre si,

en el supuesto caso que se necesiten mas de dos módulos para

efectuar las pruebas, deberán generarse simples emuladores de

módulos que entreguen datos esperados para la prueba individual

de cada uno.

También las pruebas de integración pueden ser realizadas en

forma ascendente, esto evita tener que crear módulos emuladores,

ya que a medida que se va creando la pirámide va siendo probada

de abajo hacia arriba (Down to Top), como se puede imaginar esto

acarrea un trabajo simétricamente mayor, lo que equipara o supera

el tiempo que podría tomar el crear módulos para prueba. Para

77

cubrir este tipo de pruebas se ejecutan las páginas clientes

permitiendo que estas invoquen libremente a sus respectivos

módulos controlando las respuestas de estos módulos con

mensajes al navegador “echo” en el caso de php y “alert” ó “write”

o “printf” para el caso de javascript.

5.1.2 LAS PRUEBAS DESPUÉS DE LA PROGRAMACIÓN

Cuando se considera que un módulo está terminado se realizan las

pruebas sistemáticas, el objetivo de estas es buscar fallos a través de

un criterio específico, estos criterios se denominan "pruebas de caja

negra y de caja blanca".

5.1.2.1 LAS PRUEBAS DE CAJA NEGRA

Son aquellas que se enfocan directamente en el exterior del

módulo, sin importar el código; son pruebas funcionales en las que

se trata de encontrar fallas en las que estas pruebas no se atienen

a la especificación del sistema. Se evalúa interfaz con el usuario,

apariencia de los menús, control de las teclas, etcétera. Este tipo

de pruebas no es aplicable a los módulos que trabajan en forma

transparente al usuario.

78

Para realizar estas pruebas existe una técnica algebraica llamada

"clases de equivalencia", consiste en tratar a todos las posibles

entradas y parámetros como un modelo algebraico, y utilizar las

clases de este modelo para probar un amplio rango de

posibilidades. Para la generación de estas clases no se puede

armar un modelo, pero se pueden seguir las siguientes pautas

como guía utilizable para la creación de cada clase. Por ejemplo:

Cuando una entrada es booleana, existen solo dos clases,

verdadero o falso. Para una entrada que está comprendida dentro

de un rango, existen tres clases, por debajo, dentro, y por encima

del rango. Utilizando este ejemplo se pueden generar las distintas

clases aplicables al módulo en cuestión, luego, se procede a

ingresarle al módulo un valor de cada clase.

5.1.2.2 LAS PRUEBAS DE CAJA BLANCA

Estas pruebas son mucho mas amplias, normalmente se

denominan pruebas de cobertura o pruebas de caja transparente.

Al total de pruebas de caja blanca se le llama cobertura, la

cobertura es un número porcentual que indica cuanto código del

programa se ha probado.

Básicamente la idea de pruebas de cobertura consiste en diseñar

un plan de pruebas en las que se vaya ejecutando

79

sistemáticamente el código hasta que haya corrido todo o la gran

mayoría de el, esto que parece complicado es mas aún cuando el

programa contiene código de difícil alcance, como por ejemplo

manejadores de errores o "código muerto". Entiéndase por código

muerto a aquellas funciones y/o procedimientos que hemos

incluido por encontrarse en recopilaciones pero que estas nunca

son ejecutadas por el programa, estas funciones no

necesariamente deberán ser removidas, pero si probadas por si

algún día en revisiones futuras son incluidas. Para los módulos que

no poseen condiciones basta con ejecutar una vez el programa

para asegurar una cobertura total.

Es importante que el diseño de cobertura sea eficiente y lo menos

redundante posible, por ejemplo, en el siguiente código:

If Variable_Booleana

..Do Modulo_X

End If

Como no hay un "else", a simple vista con ejecutar una vez con

éxito la condición bastaría, en términos de cobertura es así, pero

entendiendo que el "Modulo_X" podría modificar variables o

valores que afecten a la ejecución del resto del código habría que

80

ejecutar 2 veces la condición, una satisfaciendo y otra no.

Respecto al siguiente ejemplo:

If Variable_Booleana1 .Or. Variable_Booleana2

..Do Modulo_X

End If

O este otro:

If Variable_Booleana1 .And. Variable_Booleana2

..Do Modulo_X

End If

A simple vista y considerando que ambas variables pueden tener 2

valores se precisarían 4 pruebas para realizar la cobertura, pero

esto no es así, solo es necesario 2 pruebas en el caso que el

Modulo_X pueda interferir de alguna manera en el programa o una

sola satisfaciendo la condición si el Modulo_X no alterara de

ninguna manera con el resto de los procedimientos y condiciones a

ejecutarse. Probado las 4 posibilidades solo estaríamos probando

que funcione el comando "IF" en sí, lo cual ya fue probado por el

desarrollador del lenguaje de programación.

Con respecto a la cobertura en bucles el tema es un poco mas

delicado, a simple vista un bucle no es mas que un salto

condicional que se repite hasta que se cumpla o deje de cumplirse

81

una o mas condiciones, en teoría esto es simple, pero en la

práctica son una fuente inagotable de versátiles errores, que en su

gran mayoría suelen ser catastróficos.

En primer lugar, la cantidad de veces que se ejecute un bucle debe

ser precisa, y todos los programadores saben que no es difícil

equivocarse y programar un bucle que se ejecute una vez de mas

o una vez de menos, siempre que esto suceda los resultados serán

indeseables, y muchas veces cuando se trate de manejos de datos

complicados de calcular no será fácil advertir el error, el cual será

caro cuando se trate de valores que se utilizan para tomar

determinaciones a nivel empresarial o involucren vidas humanas.

Para realizar la cobertura total de un bucle se necesitan 3 pruebas,

cero ejecuciones, una ejecución y más de una ejecución.

Los bucles de tipo "for", parecerían ser mas sencillos, ya que la

cantidad de ejecuciones es definida por su cabecera y controlada

por el compilador, con una ejecución bastaría para una cobertura

total, siempre y cuando no contengan código que altere el valor de

la variable de control o comandos de salida (Exit), en este caso

requiere un examen un poco mas detallado ya que el bucle deja de

ser responsabilidad del lenguaje compilador y pasa a ser del

82

programador. Particularmente aconsejamos que no se utilicen

bucles "for" modificando su variable de control o incluyendo en

ellos comandos de salida.

En pocas palabras es muy importante diseñar lo más precisamente

posible las pruebas de cobertura, para que quede en lo posible la

mayor parte del código probado con la mínima cantidad de pruebas

realizadas.

Hay que tener en cuenta dos puntos importantes, en primer lugar las

pruebas de caja blanca no reemplazan, solo complementan a las de

caja negra y de aceptación, y en segundo lugar, las pruebas de

cobertura deben ser realizadas una vez terminado el software y no

deben ser confundidas con las pruebas informales que realiza el

programador en momentos de desarrollo, dado que si bien estas van

cubriendo distintos fragmentos de cada módulo, nunca son eficaces

por no tener un diseño apropiado.

El valor porcentual de pruebas de cobertura de un sistema terminado

nunca deberá ser inferior al 51%, y elevándose en función al coste que

podría ocasionar las fallas posibles, ascendiendo a un 99% cuando

estén involucradas vidas humanas o cuando la falla no da una

83

segunda oportunidad. El uso de un depurador es muy útil en las

pruebas de cobertura, ya que se pueden ir viendo todas las líneas y

ejecuciones paso a paso, esto no muy práctico y es bastante tedioso,

pero es considerablemente efectivo.

5.1.2.3 PRUEBAS DE ACEPTACIÓN

Las pruebas de aceptación son las que hará el cliente, en esta fase

de pruebas se determina que el sistema cumple con el objetivo

deseado, determina la conformidad del cliente antes de que el

programa le sea entregado como una versión final.

5.1.2.4 LAS PRUEBAS DE RENDIMIENTO

Estas pruebas son aquellas que determinan los tiempos de

respuesta, el espacio que ocupa el módulo en disco o en memoria,

el flujo de datos que genera a través de un canal de

comunicaciones, etc.

5.1.2.5 PRUEBAS DE TRANSFORMACIÓN

Este método curioso y caro aún no se pone en funcionamiento por

diversas empresas, consiste en dividir el equipo de desarrollo en

dos partes una vez realizadas todas las pruebas y corregidos todos

84

los errores, luego una de las dos partes introduce pequeños

errores en el sistema y la otra parte debe encontrarlos con los

mismos procedimientos que se usaron para buscar los errores

nativos. Esto es muy costoso y consume grandes cantidades de

tiempo.

5.1.2.6 PRUEBAS DE ROBUSTEZ

Comúnmente denominadas "robustness test" son las encargadas

de verificar la capacidad del programa para soportar entradas

incorrectas, por ejemplo: en un sistema de facturación donde el

usuario debe ingresar códigos de productos y luego cantidades es

más que factible que en algún momento ingrese un código en el

campo de cantidad, si el programa fue sometido a pruebas de

robustez este valor sería rechazado o grabado como una cantidad

inmensa pero que no daría error por desbordamiento de datos.

5.1.2.7 LAS PRUEBAS DE RESISTENCIA

Estas pruebas se utilizan para saber hasta donde puede soportar

el programa condiciones extremas, por ejemplo: los tiempos de

respuesta con el procesador a un 95% de su utilidad o con muy

poco espacio en disco.

85

5.2 PLAN DE PRUEBAS

La construcción de un buen plan de pruebas es la piedra angular y en

consecuencia el principal factor crítico de éxito para la puesta en práctica de

un proceso de pruebas que permita entregar un software de mejor nivel. No

obstante que cada esfuerzo o proceso de pruebas puede ser diferente y

específico, la mayor parte de los proyectos informáticos, sean de nuevos

desarrollos o de mantenimiento de aplicaciones, tienen un marco común para

la realización de las pruebas. Debido a la cantidad indeterminada de usuarios

finales se procedió a tomar una muestra para medir la usabilidad del sistema

Web. De 22 personas que usaron el sistema desde Internet se obtuvo los

siguientes resultados:

86

Encuesta SI NO

Contenido: ¿este sitio Web contiene información

relevante y ésta está organizada convenientemente? 75% 35%

Redacción: ¿la redacción del sitio es adecuada

considerando que Internet es un medio de

comunicación diferente a la radio y televisión?

80% 20%

Rapidez: ¿las páginas se cargan rápidamente? 71% 29%

Independencia de plataforma: ¿las páginas se ven

bien en cualquier monitor, resolución, sistema

operativo o browser utilizado?

90% 10%

Facilidad de uso: ¿las páginas son fáciles de usar y

navegar, permitiendo encontrar la información

rápidamente.

86% 14%

Presentación visual: ¿la presentación visual es

agradable y profesional? 92% 18%

Facilidad para ser encontrado: ¿la página es fácil de

encontrar por los visitantes en buscadores como

google?

60% 40%

Interacción y Marketing: ¿los visitantes pueden

interactuar con la información proporcionada y la

página será una herramienta de promoción y

marketing?

71% 29%

Tabla 56. Encuesta del Plan de Pruebas ver anexo “B”

Según los resultados obtenidos podemos deducir que el sistema es aceptado

por la muestra de usuarios finales.

87

5.3 RECOMENDACIONES Y CONCLUSIONES

Como un aporte a los desarrolladores Web podríamos mencionar las

siguientes recomendaciones y conclusiones:

5.3.1 Recomendaciones

Crear aplicaciones WEB siguiendo estándares de diseño para

que así pueda soportar los cambios que se van dando con la

venida de la WEB3.

Y manteniendo un esquema amigable con el usuario.

5.3.2 Conclusiones.-

En la actualidad es muy importante todo lo que se refiere a la

tecnología, ya que gracias a ella podemos minimizar costos, tiempo y

distancias.

Gracias a nuestro a nuestra empresa PYMES podemos servir a miles

o porque no a millones de clientes y satisfacer sus necesidades con

solo dar un click.

88

BIBLIOGRAFÍA

Sitio Web Detalle

http://www.microsoft.com/latam/technet/fases/m

sf.asp#Fase%201%20-

%20Estrategia%20y%20alcance

Metodología de

desarrollo Web.

http://www.microsoft.com/spanish/msdn/comuni

dad/mtj.net/voices/art20.asp

Sugerencias de técnicas

de desarrollo Web y

pruebas del sistema.

http://es.wikipedia.org/wiki/AJAX Todo lo que debemos

saber sobre AJAX.

www.javascriptkit.com/domref

Manuales y ejemplo de

manejo de objetos DOM

del navegador Web

desde javascript.

http://es.wikipedia.org/wiki/Administrador_de_ba

se_de_datos Función del DBA

http://es.wikipedia.org/wiki/Sistema_de_gesti%C

3%B3n_de_la_calidad

Como medir la calidad

de nuestro sistema.

http://www.monografias.com/trabajos5/call/call.s

html#mc Método Call

http://www.monografias.com/trabajos/anaydisesi

s/anaydisesis.shtml#implanta Análisis y diseño.

89

ANEXO “A”

ENCUESTA REALIZADA PARA MEDIR EL AGRADO DE SERVICIOS EN

LINEAS, A PERSONAS QUE NAVEGAN EN LA WEB

1.- Cuanto tiempo lleva utilizando Paginas Web? - Entre 6 meses y un año [ ] - Entre un año y dos año [ ] - Mas de dos año [ ]

2.- Cuales son los puntos débiles de las páginas web que usted ha visitado - Es aburrido [ ] - Mucho ruido [ ] - Poco explicativo [ ] 3.- Confía usted en las paginas que realizan ventas por internet?

- Si [ ] - No [ ] - Mas o menos [ ]

4.- Si contesto NO señale cuales son los motivos?

- Falta de comunicación [ ] - Por la lentitud de respuesta [ ] - Otros [ ]

5.- Que tiempo se demoro en ser atendido

- Inmediatamente [ ] - Menos de un minuto [ ] - Entre un minuto y cinco minutos [ ] - Mas de cinco minutos [ ] - No consiguió respuesta [ ]

6.- Que tiempo se demoro la respuesta del servicio de atención al cliente

- Inmediatamente [ ] - Menos de un minuto [ ] - Entre un minuto y cinco minutos [ ] - Mas de cinco minutos [ ] - No consiguió respuesta [ ]

90

7.- Que grado de Satisfacción le da un servicio al cliente en línea - Completamente Satisfecho [ ] - Satisfecho [ ] - Insatisfecho [ ] - Completamente insatisfecho [ ]

91

ANEXO “B”

ENCUESTA REALIZADA PARA MEDIR EL USO DEL SISTEMA A NIVEL

DE USUARIOS FINALES

1.- Contenido:

¿Este sitio Web contiene información relevante y está organizada

convenientemente?

Si No

2.- Redacción:

¿La redacción del sitio es adecuada considerando que Internet es un

medio de comunicación diferente a la radio y televisión?

Si No

3.- Rapidez:

¿Las páginas se cargan con rapidez?

Si No

4.- Independencia de la plataforma:

¿Las páginas se ven bien en cualquier monitor, resolución, sistema

operativo o browser utilizado?

Si No

92

5.- Facilidad de uso:

¿Las páginas son fáciles de usar y navegar, permitiendo encontrar la

información rápidamente?

Si No

6.- Presentación visual:

¿La presentación visual es agradable y profesional?

Si No

7.- Facilidad para ser encontrado:

¿La página es fácil de encontrar por los visitantes en buscadores como

google?

Si No

8.- Interacción y Marketing:

¿Los visitantes pueden interactuar con la información proporcionada y

la página será una herramienta de promoción y marketing?

Si No

93

TERMINOLOGÍA

AJAX.- Acrónimo de Asynchronous JavaScript And XML (JavaScript

asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones

interactivas o RIA (Rich Internet Applications). Éstas se ejecutan en el cliente,

es decir, en el navegador de los usuarios y mantiene comunicación asíncrona

con el servidor en 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.

API.- Interfaces que permiten comunicar dos software que presentan

incompatibilidades en ese proceso. En Internet permiten ampliar las

capacidades de los servidores Web.

Capas.- Todas las aplicaciones basadas en n-capas permiten trabajar con

clientes ligeros, tal como navegadores de Internet, WebTV, Teléfonos

Inteligentes, PDAs (Personal Digital Assistants o Asistentes Personales

Digitales) y muchos otros dispositivos preparados para conectarse a Internet.

De este modo, las arquitecturas de n-capas se están posicionando

rápidamente como la piedra angular de los desarrollos de aplicaciones

empresariales y las compañías están adoptando esta estrategia a una

velocidad de vértigo como mecanismo de posicionamiento en la economía

http://es.wikipedia.org/wiki/JavaScript

http://es.wikipedia.org/wiki/XML

http://es.wikipedia.org/wiki/Web

http://es.wikipedia.org/wiki/Cliente_%28inform%C3%A1tica%29

http://es.wikipedia.org/wiki/As%C3%ADncrono

http://es.wikipedia.org/wiki/Usabilidad

94

emergente que tiene su base en la red (lo que se ha venido a denominar

"Nueva Economía").

Captcha.- Prueba de Turing pública y automática para diferenciar hombres

de máquinas. Es usado en las páginas Web para asegurarse que las

personas que se registran dentro de un formulario sean un humano y no un

algoritmo malicioso que genere llamadas incesarías dentro del servidor.

Clave Pública.- Con las claves públicas no es necesario que el remitente y el

destinatario se pongan de acuerdo en la clave a emplear. Todo lo que se

requiere es que, antes de iniciar la comunicación secreta, el remitente

consiga una copia de la clave pública del destinatario. Es más, esa misma

clave pública puede ser usada por cualquiera que desee comunicarse con su

propietario. Por tanto, se necesitarán sólo n pares de claves por cada n

personas que deseen comunicarse entre sí.

ERP.- Significa Enterprise Resources Planning (Planeación de Recursos

Empresariales)

Hito.- Un hito es un evento claramente verificable por otra persona y que

requiere verificación antes de poder proseguir con la ejecución del proyecto.

95

HTML.- Es el acrónimo inglés de HyperText Markup Language, que se

traduce al español como Lenguaje de Marcas Hipertextuales. Es un lenguaje

de marcación diseñado para estructurar textos y presentarlos en forma de

hipertexto, que es el formato estándar de las páginas web.

Javascript.- Es un lenguaje interpretado, es decir, que no requiere

compilación, utilizado principalmente en páginas web, con una sintaxis

semejante a la del lenguaje Java y el lenguaje C.

Microsoft Solution Framework MSF.- El Microsoft Solutions Framework

proporciona un sistema de modelos, principios, y pautas para dar soluciones

a empresas que diseñan y desarrollan de una manera que se asegure de que

todos los elementos de un proyecto, tales como gente, procesos, y

herramientas, puedan ser manejados con éxito.

Mulithilo.- Considerando el entorno multithread (multihilo), cada thread (hilo,

flujo de control del programa) representa un proceso individual ejecutándose

en un sistema. A veces se les llama procesos ligeros o contextos de

ejecución. Típicamente, cada hilo controla un único aspecto dentro de un

programa n

http://es.wikipedia.org/wiki/Lenguaje_de_marcaci%C3%B3n



http://es.wikipedia.org/wiki/Hipertexto

http://es.wikipedia.org/wiki/Est%C3%A1ndar

http://es.wikipedia.org/wiki/P%C3%A1gina_web

http://es.wikipedia.org/wiki/Lenguaje_interpretado

http://es.wikipedia.org/wiki/Compilaci%C3%B3n

http://es.wikipedia.org/wiki/Lenguaje_de_programaci%C3%B3n_Java

http://es.wikipedia.org/wiki/Lenguaje_C

96

OpenSource.- Calificación de software que cumple una serie de requisitos,

principalmente aquel que permite una libre redistribución, distribuye el código

fuente, y permite modificaciones y trabajos derivados.

PHP.- Hypertext Pre-processor" (inicialmente PHP Tools, o, Personal Home

Page Tools), se trata de un lenguaje interpretado usado para la creación de

aplicaciones para servidores, o creación de contenido dinámico para sitios

web.

Script.- En informática, un script es un guión o conjunto de instrucciones.

Permiten la automatización de tareas creando pequeñas utilidades. Es muy

utilizado para la administración de sistemas UNIX. Son ejecutados por un

intérprete de línea de comandos y usualmente son archivos de texto.

Service Packs.- Un Service Pack (más conocido como SP) es un software

que corrige errores conocidos, problemas, o añade nueva funcionalidad a un

sistema.

UML.- El Lenguaje Unificado de Modelado prescribe un conjunto de

notaciones y diagramas estándar para modelar sistemas orientados a

objetos, y describe la semántica esencial de lo que estos diagramas y

símbolos significan.

http://es.wikipedia.org/wiki/Gui%C3%B3n_%28inform%C3%A1tica%29

http://es.wikipedia.org/wiki/UNIX

http://es.wikipedia.org/wiki/Int%C3%A9rprete

97

XML.- Sigla en inglés de eXtensible Markup Language (lenguaje de marcas

extensible), es un metalenguaje extensible de etiquetas desarrollado por el

World Wide Web Consortium (W3C).

3wC.- Consorcio mundial sobre el Web, conocido como 3wC, que intenta

regular un correcto uso de Internet y proponer pautas de creación y

organización. En 1995 se crea dentro del 3wc un grupo de trabajo que intenta

velar por la accesibilidad en Internet, conocido como WAI (Web Accesibility

Iniciative) que significa iniciativa de accesibilidad en la web.

http://es.wikipedia.org/wiki/Ingl%C3%A9s

http://es.wikipedia.org/wiki/Lenguaje_de_marcas

http://es.wikipedia.org/wiki/Metalenguaje

http://es.wikipedia.org/wiki/World_Wide_Web_Consortium

ÍNDICE

Capítulo 1 1

1. Manual técnico 1

1.1 Introducción 1

1.2 Estructura del Módulo de atención al Cliente (SAT) 1

1.3 Diagrama objeto relación 3

1.4 Script para creación de la base de datos 4

1.5 Edición de los scripts del lado del cliente y servidor 26

1.6 Instalación de Apache Web Server, Php y Mysql 26

1.7 Administración de la base de datos 27

Capítulo 2 28

2 Detalle técnico y lógico de los objetos del sitio web 28

2.1 Funcionalidad ajax 28

2.2 Crear imagen captcha 28

2.3 Verificar imagen captcha 29

2.4 Generar ventanas flotantes dentro del navegador 29

2.5 Generar objetos select html combinados usando AJAX 30

2.6 Registro de usuarios usando AJAX 30

2.7 Paginación de búsquedas usando ajax 30

2.8 Identificación de Usuarios usando AJAX 30

2.9 Comprobar disponibilidad de un identificador dentro de la base de

Datos usando ajax 31

2.10 Controlar el carro de compras y las listas recurrentes usando ajax 31

Capítulo 4 32

3 Codificación de los componentes 32

Capítulo 4 68

4 Manual de usuario 68

4.1 Vista global de la página principal 68

4.2 Partes del sitio web 69

4.3 Registro 74

4.4 Realizar compras 77

4.5 Carrito de compras 80

ÍNDICE DE FIGURAS

Figura 1. Tabla administrador 4

Figura 2. Tabla atributo_prod 5

Figura 3. Tabla atributo_valor 6

Figura 4. Tabla atributos 7

Figura 5. Tabla Cadpedido 8

Figura 6. Tabla carrocompra 9

Figura 7. Tabla categoría 10

Figura 8. Tabla Cliente 11

Figura 9. Tabla datos_sucursales 12

Figura 10. Tabla detpedido 13

Figura 11. Tabla direccioncliente 14

Figura 12. Tabla impuesto 15

Figura 13. Tabla listacompra 16

Figura 14. Tabla país 17

Figura 15. Tabla pasillo 18

Figura 16. Tabla producto 19

Figura 17. Tabla proveedores 20

Figura 18. Tabla provincia 21

Figura 19. Tabla publicacion 22

Figura 20. Tabla sucursal 23

Figura 21. Tabla tipo_publicacion 24

Figura 22. Tabla zona impuesto 25

1

CAPÍTULO 1

1. MANUAL TÉCNICO

1.1 INTRODUCCIÓN

Se procederá en este manual a detallar todas las características técnicas

así como las entidades lógicas y scripts del lado del cliente como del

administrador que hace posible el funcionamiento del módulo de atención

al cliente (SAT) de una empresa PYMES con tecnología RIA.

1.2 ESTRUCTURA DEL MODULO DE SAT

Carpeta sql.- contiene el archivo de texto que es el script de la base

de datos.

Carpeta SpryAssets.- contiene los archivos SpryAccordion.css,

SpryAccordion.js, SpryValidationTextField.css,

SpryValidationTextField.js.

Carpeta png.- contiene los archivos fuentes del todo el diseño grafico

del sitio web.

Carpeta xml.- contiene los archivos con extensión xml para el

funcionamiento de la sección Mi carrito de compras del cliente.

Carpeta img.- contiene todos los archivos objetos (gif, jpg) del diseño

grafico del sitio, generados a partir de los archivos con extensión png.

2

Carpeta css.- contiene todos los archivos de diseño de estilo en

cascada, donde se almacenan tipos de letras y diseño gráfico de

objetos de formularios.

Carpeta Connections.- contiene dentro de un archivo php la tercer

capa de este proyecto. Esta capa es la de acceso a datos y encapsula

dentro de métodos tanto la conexión como las diversas transacciones

desde y hacia la base de datos.

Carpeta clases.- contiene subestructuras de carpetas que anidan

toda la lógica de procesos del negocio y brinda toda la funcionalidad

Adobe Spry - AJAX - XML.

Carpeta thickbox.- contiene los archivos: thickbox.js, thickbox.css,

loador.gif, jquery.js.

Carpeta Templates.- contiene el archivo plantillaMeVoyalSuper.dwt.

Este archivo es usado como plantilla de diseño para las demás

páginas del sitio.

Carpeta js.- contiene todos los programas fuentes javascript para

brindar la operatividad AJAX del sitio, así como el algoritmo de

encriptación MD5.

Carpeta admin.- contiene todo el módulo de administración del

sistema y su estructura es idéntica a la detallada en puntos

anteriores.

3

1.3 Diagrama Objeto Relación

4

1.4 ESTRUCTURA DE LA BASE DE DATOS

1.4.1 Estructura de tabla administrador

FIGURA 1: Estructura de tabla administrador

5

1.4.2 Estructura de tabla para la tabla atributo_prod

FIGURA 2: Estructura de tabla atributo_prod

6

1.4.3 Estructura de tabla para la tabla atributo_valor

FIGURA 3: Estructura de tabla atributo_valor

7

1.4.4 Estructura de tabla para la tabla atributos

FIGURA 4: Estructura de tabla atributos

8

1.4.5 Estructura de tabla para la tabla cabpedido

FIGURA 5: Estructura de tabla cabpedido

9

1.4.6 Estructura de tabla para la tabla carrocompra

FIGURA 6: Estructura de tabla carrocompra

10

1.4.7 Estructura de tabla para la tabla categoría

FIGURA 7: Estructura de tabla categoria

11

1.4.8 Estructura de tabla para la tabla cliente

FIGURA 8: Estructura de tabla cliente

12

1.4.9 Estructura de tabla para la tabla datos_sucursales

FIGURA 9: Estructura de tabla datos_sucursales

13

1.4.10 Estructura de tabla para la tabla detpedido

FIGURA 10: Estructura de tabla detpedido

14

1.4.11 Estructura de tabla para la tabla direccioncliente

FIGURA 11: Estructura de tabla direccioncliente

15

1.4.12 Estructura de tabla para la tabla impuesto

FIGURA 12: Estructura de tabla impuesto

16

1.4.13 Estructura de tabla para la tabla listacompra

FIGURA 13: Estructura de tabla listacompra

17

1.4.14 Estructura de tabla para la tabla pais

FIGURA 14: Estructura de tabla pais

18

1.4.15 Estructura de tabla para la tabla pasillo

FIGURA 15: Estructura de tabla pasillo

19

1.4.16 Estructura de tabla para la tabla producto

FIGURA 16: Estructura de tabla producto

20

1.4.17 Estructura de tabla para la tabla proveedores

FIGURA 17: Estructura de tabla proveedores

21

1.4.18 Estructura de tabla para la tabla provincia

FIGURA 18: Estructura de tabla provincia

22

1.4.19 Estructura de tabla para la tabla publicación

FIGURA 19: Estructura de tabla publicacion

23

1.4.20 Estructura de tabla para la tabla sucursal

FIGURA 20: Estructura de tabla sucursal

24

1.4.21 Estructura de tabla para la tabla tipo_publicacion

FIGURA 21: Estructura de tabla tipo_publicacion

25

1.4.22 Estructura de tabla para la tabla zona_impuesto

FIGURA 1: Estructura de tabla zona_impuesto

26

1.5 EDICIÓN DE LOS SCRIPTS DEL LADO DEL CLIENTE Y SERVIDOR

Basta contar con algún editor de texto. Nosotros recomendamos usar Adobe

Dreamwaver CS3 ya que dispone de un editor para archivos con extensión

php y archivos con extensión javascript.

Ofrece compatibilidad con las principales tecnologías de desarrollo de este

sitio web, HTML, XHTML, CSS, XML, JavaScript, Ajax, PHP.

1.6 INSTALACIÓN DE APACHE WEB SERVER, PHP Y MYSQL

Las herramientas y versiones de las herramientas de software a instalar son

las siguientes:

PHP 4.1 ó superior

Apache 2.2.6 openSSL

MySQL 5.0.45

Trabajamos con el software WAMP5 Server 1.7.4 que instala y configura de

forma automática las tres herramientas mencionadas anteriormente.

Una vez instalada esta herramientas basta con iniciar el servicio desde el

archivo launch_wampserver.bat ubicado en c:\wamp

27

Luego se proceda a copiar la carpeta CARRO DE COMPRA IR contenida en

los cd’s de instalación dentro del directorio c:\wamp\www

1.7 ADMINISTRACIÓN DE LA BASE DE DATOS

Para administrar la base de datos MySQL utilizaremos un interfaz web.

PhpMyAdmin es una herramienta muy completa que permite acceder a todas

las funciones típicas de la base de datos MySQL a través de una interfaz

web.

28

CAPÍTULO 2

2 DETALLE TÉCNICO Y LÓGICO DE LOS OBJETOS DEL SITIO WEB

Toda la lógica y funcionalidad del sitio se encuentra dentro de la carpeta

clases y se detallan sus archivos y funciones principales a continuación:

2.1 FUNCIONALIDAD AJAX

archivo: varios procesos: Instanciar un objeto para el control de las solicitudes

cliente desde javascrip hacia los scripts de php en el servidor

salida: Retorna objeto xmlhttp conteniendo la referencia XMLHttpRequest para navegadores que no son IE ó ActiveXObject para el caso de navegadores IE

uso: var ajax=nuevoAjax();

2.2 CREAR IMAGEN CAPTCHA

archivo: clases/crear_imagen.php procesos: Genera aleatoriamente una imagen para el captcha

para el registro de clientes parámetros: El id actual de la sesión iniciada salida Envía una salida de imagen al navegador

29

2.3 VERIFICAR IMAGEN CAPTCHA

archivo: clases/verificar.php procesos: Verificar que el ingreso del cliente coincida por lo

generado por la imagen captcha salida Mensaje de control uso: Se invoca cuando se ejecuta el action del

formulario que contiene la imagen captcha

2.4 GENERAR VENTANAS FLOTANTES DENTRO DEL NAVEGADOR

archivo: clases/ js/ themes clases/ js/ javascripts clases/ thickbox

procesos: Todas las clases javascript necesarias para generar las ventanas flotantes dentro del navegador

parámetros: Página a mostrar dentro de la ventana flotante salida Interfase gráfica ventana flotante

2.5 GENERAR OBJETOS SELECT HTML COMBINADOS USANDO

AJAX

archivo: clases/selectCombi/select_dependientes_proceso.php clases/selectCombi/select_dependientes.js clases/selectCombi/ select_dependientes.css

procesos: Genera listas desplegables con acceso a datos en la base de datos de forma combinada. Esto quiere decir que el contenido de una lista puede guardar relación con una segunda lista Ej: País y Provincia.

parámetros: Id combo actual, valor para mantener en el segundo combo, tabla a la cual se accederá en la base d datos

salida Lista desplegable de forma dinámica que guarda relación con la primera lista que la invocó en su evento onchage

30

2.6 REGISTRO DE USUARIOS USANDO AJAX

archivo: clases/registroUser/regUser.php clases/registroUser/ regUser.js

procesos: Registra un usuario en la tabla clientes de la base de datos de forma asincrónica usando AJAX

parámetros: txtNombreReg, txtApellidoReg, txtEmailReg, hiddenTxtPass2, txtProvinciaReg, txtMovilReg, txtTelefonoReg, cmbPais2, txtPassReg, txtCPassReg, texto_ingresado, texto_oculto

salida Mensajes de control, registro de sesiones y envío a la página micuenta.php

2.7 PAGINACIÓN DE BÚSQUEDAS USANDO AJAX

archivo: clases/paginarAjax/style.css clases/paginarAjax/buscar.php

procesos: Genera dinámicamente la estructura de tablas que contiene el detalle de una búsqueda de productos

parámetros: Búsqueda detallada conteniendo lo que se escribió en el campo búsqueda de la plantilla, id de las categorías de productos si se selecciona una búsqueda desde los pasillos, variable $TAMANO_PAGINA

salida Estructura html de tablas conteniendo el resultado de las búsquedas.

2.8 INDENTIFICACIÒN DE USUARIOS USANDO AJAX

archivo: clases/login/login.php clases/login/ login.js

procesos: Verificar si un usuario cliente o administrador existe dentro de la base de datos.

parámetros: Email, password, página actual salida Mensajes de control, inicio de variables de sesión y

redirección a la página actual

31

2.9 COMPROBAR DISPONIBILIDAD DE UN IDENTIFICADOR DENTRO

DE LA BASE DE DATOS USANDO AJAX

archivo: clases/ComprobarDisp/ comprobar_disponibilidad_de_apodo.js clases/ComprobarDisp/ comprobar_disponibilidad_de_apodo.css clases/ComprobarDisp/ comprobar_disponibilidad.php

procesos: Verificar si un dato ingresado dentro de una caja de texto se encuentra ya ingresado en la base de datos

parámetros: Id objeto donde se ingresa el valor, tabla de la base de datos, campo a evaluar dentro de la tabla

salida Mensajes de control indicando la disponibilidad o no disponibilidad del dato ingresado

2.10 CONTROLAR EL CARRO DE COMPRAS Y LAS LISTAS

RECURRENTES USANDO AJAX

archivo: clases/carroCompra/carroCompra.js clases/carroCompra/carroCompra.php

procesos: Añadir un item nuevo al carro de compras Eliminar un item del carro de compras Crear una lista a partir de un carro de compras Cargar lista dentro de un archivo XML Modificar un item dentro del carro de compras Borrar el contenido del carro de compras

parámetros: Varios parámetros se detallan a continuación addCarroCompra(codigo,descripcion,path,cantidad, LlenarListaCarroCompra(parent) cargarListaXML(nombreLista) SetcargarListaXML() insertarContenido(idItem,cant){ setCarroCompra(totalFilas) redondear(cantidad, decimales) sumColumn(id) multiplicar(val1,val2)

salida Archivos XML

32

CAPÍTULO 3

3.1 CODIFICACIÓN DE LOS COMPONENTES

xml/carroCompra.xml

<?xml version="1.0" encoding="UTF-8"?>  <inicio> <linea> <codigo>TPD001</codigo> <descripcion>Gelatina Royal</descripcion> <path>../img/sssasdasd.jpg</path> <cantidad>4</cantidad> <valUnidad>0.50</valUnidad> <SubTotal>20</SubTotal> </linea> <linea> <codigo>PRODU012</codigo> <descripcion>Aceite La Favorita Light</descripcion> <path>../img/56tyfgdfg.jpg</path> <cantidad>12</cantidad> <valUnidad>1.00</valUnidad> <SubTotal>12.00</SubTotal> </linea> </inicio>

33

Connections/AccesoDatos.php

<?php $TAMANO_PAGINA = 10; $hostname = "localhost"; $database = "shopping"; $username = "root"; $password = ""; $shopping = mysql_pconnect($hostname, $username, $password) or trigger_error(mysql_error(),E_USER_ERROR); mysql_select_db($database, $shopping); function insert_db ($link,$campos,$valores,$tab) { $inicio="INSERT INTO $tab("; $meio=") VALUES ("; $fim=")"; $valor = sizeof($campos); //verifica o numero de elementos do array $strc=""; for($i=0;$i <= ($valor-1);$i++){ $strc.=$campos[$i]; if($i != ($valor-1)){ $strc.=","; } } // echo $strc."\n"; $strv=""; for($k=0;$k <= ($valor-1);$k++){ $strv.="\"$valores[$k]\""; if($k != ($valor-1)){ $strv.=","; } } $insere="$inicio$strc$meio$strv$fim"; mysql_query($insere,$link) or die ( mysql_error() ); }

34

function update_db ($tabla,$campos,$condicion,$link){ $sql="update ".$tabla." set ".$campos." where ".$condicion; mysql_query($sql,$link) or die ( mysql_error() ); } function select_db ($tabla,$campos,$condicion,$order,$link,$inicio=-1,$registro=-1){ $sql="select ".$campos." from ".$tabla." where ".$condicion." order by ".$order; if (($inicio>-1) and ($registro>-1)){ $sql= $sql." LIMIT ".$inicio.",".$registro;} $rs = mysql_query($sql,$link) or die ( mysql_error() ); $total_registros = mysql_num_rows($rs); $val[0]=$rs; $val[1]=$total_registros; return $val; } function select_inner_db ($tabla1,$tabla2,$campos,$on,$condicion,$order,$link,$inicio=-1,$registro=-1){ $sql="select ".$campos." from ".$tabla1." inner join ".$tabla2." on ".$on." where ".$condicion." order by ".$order; if (($inicio>-1) and ($registro>-1)){ $sql= $sql." LIMIT ".$inicio.",".$registro;} $rs = mysql_query($sql,$link) or die ( mysql_error() ); $total_registros = mysql_num_rows($rs); $val[0]=$rs; $val[1]=$total_registros; return $val; } function select_inner_db_tres ($tabla1,$tabla2,$tabla3,$tabla4,$campos,$on1,$on2,$on3,$condicion,$order,$link,$inicio=-1,$registro=-1){ $sql="select ".$campos." from ".$tabla1." inner join ".$tabla2." on ".$on1." inner join ".$tabla3." on ".$on2." inner join ".$tabla4." on ".$on3." where ".$condicion." order by ".$order; if (($inicio>-1) and ($registro>-1)){ $sql= $sql." LIMIT ".$inicio.",".$registro;} $rs = mysql_query($sql,$link) or die ( mysql_error() ); $total_registros = mysql_num_rows($rs); $val[0]=$rs; $val[1]=$total_registros; return $val; }

35

function select_inner_db_3 ($tabla1,$tabla2,$tabla3,$campos,$on1,$on2,$condicion,$order,$link,$inicio=-1,$registro=-1){ $sql="select ".$campos." from ".$tabla1." inner join ".$tabla2." on ".$on1." inner join ".$tabla3." on ".$on2." where ".$condicion." order by ".$order; if (($inicio>-1) and ($registro>-1)){ $sql= $sql." LIMIT ".$inicio.",".$registro;} $rs = mysql_query($sql,$link) or die ( mysql_error() ); $total_registros = mysql_num_rows($rs); $val[0]=$rs; $val[1]=$total_registros; return $val; } function delete_db ($link,$tabla,$condicion){ $sql="delete from ".$tabla." where ".$condicion; $rs = mysql_query($sql,$link) or die ( mysql_error() ); } function begin_trans ($link){ $rs = mysql_query("begin",$link) or die ("problemas al inciar begin"); } function commit_trans ($link){ $rs = mysql_query("commit",$link) or die ("problemas al inciar comitt"); } function roolback_trans ($link){ $rs = mysql_query("rollback",$link) or die ("problemas al inciar rollback"); } ?>

36

clases/verificar.php

<? session_start(); $texto_ingresado = $HTTP_POST_VARS["texto_ingresado"]; $captcha_texto = $HTTP_SESSION_VARS["captcha_texto_session"]; if ($texto_ingresado == $captcha_texto) { echo "Usted ingreso el codigo correctamente."; } else { echo "El texto ingresado no coincide. Por favor inténtelo de nuevo!"; } session_unset(); session_destroy(); ?>

37

clases/verificar.php

<? session_start(); $texto_ingresado = $HTTP_POST_VARS["texto_ingresado"]; $captcha_texto = $HTTP_SESSION_VARS["captcha_texto_session"]; if ($texto_ingresado == $captcha_texto) { echo "Usted ingreso el codigo correctamente."; } else { echo "El texto ingresado no coincide. Por favor intentelo de nuevo!"; } session_unset(); session_destroy(); ?>

38

clases/crear_imagen.php

<? $captcha_imagen = imagecreate(150,40); $color_negro = imagecolorallocate ($captcha_imagen, 0, 0, 0); $color_blanco = imagecolorallocate ($captcha_imagen, 255, 255, 255); imagefill($captcha_imagen, 0, 0, $color_negro); session_start(); $captcha_texto = $_SESSION["captcha_texto_session"]; imagechar($captcha_imagen, 4, 20, 13, $captcha_texto[0] ,$color_blanco); imagechar($captcha_imagen, 5, 40, 13, $captcha_texto[1] ,$color_blanco); imagechar($captcha_imagen, 3, 60, 13, $captcha_texto[2] ,$color_blanco); imagechar($captcha_imagen, 4, 80, 13, $captcha_texto[3] ,$color_blanco); imagechar($captcha_imagen, 5, 100, 13, $captcha_texto[4] ,$color_blanco); imagechar($captcha_imagen, 3, 120, 13, $captcha_texto[5] ,$color_blanco); header("Content-type: image/jpeg"); imagejpeg($captcha_imagen); ?>

39

clases/sesion.php

<?php require_once('../Connections/AccesoDatos.php'); if (isset($_POST['txtEmail'])){ if (isset($_POST['txtPass'])) { $email=$_POST['txtEmail']; $pass=$_POST['txtPass']; $query_rs4 = "SELECT nombre,apellido,email,pais,provincia,tarjeta from cliente where email='".$email."' and pass='".$pass."'"; $rs4 = mysql_query($query_rs4, $shopping) or die(mysql_error()); while ($row_rs4 = mysql_fetch_assoc($rs4)){ $filas4[] = $row_rs4; } if ($filas4) { foreach ($filas4 as $registro1) { session_start(); $_SESSION["emailCliente"]= $registro1["email"]; $_SESSION["nombreCliente"]= $registro1["nombre"]; $_SESSION["apellidoCliente"]= $registro1["apellido"]; $sql="select pais from pais where id_pais=".$registro1["pais"]; $rs = mysql_query($sql, $shopping) or die(mysql_error()); while ($row = mysql_fetch_array($rs)){ $_SESSION["pais"]= $row["pais"]; } $sql="select provincia from provincia where id_provincia=".$registro1["provincia"]; $rsp = mysql_query($sql, $shopping) or die(mysql_error()); while ($rowp = mysql_fetch_array($rs)){ $_SESSION["provincia"]= $rowp["provincia"]; } $_SESSION["tarjeta"]= $registro1["tarjeta"]; $_SESSION["identificado"]= "si"; exit(); } }else{ echo "Usuario o password incorrectos"; exit(); } } } ?>

40

clases/selectCombi/select_dependientes.js

function nuevoAjax(){ /* Crea el objeto AJAX. Esta función es genérica para cualquier utilidad de este tipo, por lo que se puede copiar tal como esta aquí */ var xmlhttp=false; try { // Creación del objeto AJAX para navegadores no IE xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch(e){ try{ // Creación del objet AJAX para IE xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch(E){ if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest(); } } return xmlhttp; } // Declaro los selects que componen el documento HTML. Su atributo ID debe figurar aquí. var listadoSelects=new Array(); function cambiarArray(val1,val2,tabla1,tabla2){ listadoSelects[0]= val1; listadoSelects[1]= val2; listadoSelects[2]= tabla1; listadoSelects[3]= tabla2; } function buscarEnArray(array, dato){ // Retorna el índice de la posición donde se encuentra el elemento en el array o null si no se encuentra var x=0; while(array[x]) { if(array[x]==dato) return x; x++; } return null; }

41

function cargaContenido(idSelectOrigen,valCmb2,consulta){ // Obtengo la posición que ocupa el select que debe ser cargado en el array declarado mas arriba var posicionSelectDestino=buscarEnArray(listadoSelects, idSelectOrigen)+1; // Obtengo el select que el usuario modifico var selectOrigen=document.getElementById(idSelectOrigen); // Obtengo la opción que el usuario selecciono var opcionSeleccionada=selectOrigen.options[selectOrigen.selectedIndex].value; // Si el usuario eligió la opción "Elige", no voy al servidor y pongo los selects siguientes en estado "Selecciona opción..." if(opcionSeleccionada==0){ try{ var x=posicionSelectDestino, selectActual=null; // Busco todos los selects siguientes al que inicio el evento onChange y les cambio el estado y deshabilito while(listadoSelects[x]){ selectActual=document.getElementById(listadoSelects[x]); selectActual.length=0; var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Selecciona Opción..."; selectActual.appendChild(nuevaOpcion); selectActual.disabled=true; x++; } }catch(e){} } // Compruebo que el select modificado no sea el ultimo de la cadena else if(idSelectOrigen!=listadoSelects[listadoSelects.length-1]){ // Obtengo el elemento del select que debo cargar var idSelectDestino=listadoSelects[posicionSelectDestino]; var selectDestino=document.getElementById(idSelectDestino); // Creo el nuevo objeto AJAX y envío al servidor el ID del select a cargar y la opción seleccionada del select origen var ajax=nuevoAjax();

42

clases/selectCombi/select_dependientes_proceso.php

ajax.open("GET", "clases/selectCombi/select_dependientes_proceso.php?select="+idSelectDestino+"&opcion="+opcionSeleccionada+"&tabla1="+listadoSelects[2]+"&tabla2="+listadoSelects[3]+"&valCmb2="+valCmb2+"&consulta="+consulta, true); ajax.onreadystatechange=function() { if (ajax.readyState==1){ // Mientras carga elimino la opcion "Selecciona Opcion..." y pongo una que dice "Cargando..." selectDestino.length=0; var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Cargando..."; selectDestino.appendChild(nuevaOpcion); selectDestino.disabled=true; } if (ajax.readyState==4){ selectDestino.parentNode.innerHTML=ajax.responseText; } } ajax.send(null); } } function cargaProveedores(nombre,ruc){ var ajax=nuevoAjax(); ajax.open("GET", "clases/buscaProveedor/proceso.php?nombre="+nombre+"&ruc="+ruc, true); ajax.onreadystatechange=function() { if (ajax.readyState==4){ document.getElementById('buscaProveedor').innerHTML=ajax.responseText; } } ajax.send(null); }

43

<? header("Cache-Control: no-store, no-cache, must-revalidate"); ?> <?php // Array que vincula los IDs de los selects declarados en el HTML con el nombre de la tabla donde se encuentra su contenido $tabla1=$_GET["tabla1"]; $tabla2=$_GET["tabla2"]; $listadoSelects=array( "cmbPasillo"=>$tabla1, "cmbCategoria"=>$tabla2 ); $consulta= $_GET["consulta"]; $consulta1= $_GET["consulta"]; $selectDestino=$_GET["select"]; $opcionSeleccionada=$_GET["opcion"]; $valCmb2=$_GET["valCmb2"]; include 'conexion.php'; conectar(); if ($consulta=="atributo_pasillo"){ $consulta=mysql_query("SELECT id_valor, valor FROM atributo_valor WHERE id_atributo ='$opcionSeleccionada'") or die(mysql_error()); }else{ $consulta=mysql_query("SELECT id_categoria, nombre FROM categoria WHERE id_pasillo='$opcionSeleccionada'") or die(mysql_error()); } if ($consulta1=="pais_provincia"){ $sql="SELECT id_provincia,provincia FROM provincia WHERE id_pais='$opcionSeleccionada'"; $consulta=mysql_query($sql) or die(mysql_error()); }

44

desconectar(); // Comienzo a imprimir el select $combo=$combo."<select name='".$selectDestino."' id='".$selectDestino."'>"; $combo=$combo."<option value='0'>Elige</option>"; while($registro=mysql_fetch_row($consulta)) { // Convierto los caracteres conflictivos a sus entidades HTML correspondientes para su correcta visualizacion $registro[1]=htmlentities($registro[1]); // Imprimo las opciones del select if ($valCmb2==$registro[0]){ $combo=$combo."<option value='".$registro[0]."' selected='selected'>".$registro[1]."</option>"; }else{ $combo=$combo."<option value='".$registro[0]."'>".$registro[1]."</option>"; } } $combo=$combo."</select>"; echo ($combo); ?>

45

clases/registroUser/regUser.js

function nuevoAjax(){ /* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por lo que se puede copiar tal como esta aquí */ var xmlhttp=false; try{ // Creación del objeto AJAX para navegadores no IE xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch(e){ try{ // Creación del objet AJAX para IE xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch(E){ if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest(); } } return xmlhttp; } function regUser(txtNombreReg,txtApellidoReg,txtEmailReg,hiddenTxtPass2,txtProvinciaReg,txtMovilReg,txtTelefonoReg,cmbPais2,txtPassReg,txtCPassReg,texto_ingresado,texto_oculto,txtNumTarjetaAfiliacion) { if (txtPassReg!=txtCPassReg){ alert ("Confirmacion de Password incorrecta"); return true; } if (txtNombreReg!="" && txtApellidoReg!="" && txtEmailReg!="" && hiddenTxtPass2!="" && txtProvinciaReg!="" && txtTelefonoReg!="" && cmbPais2!=""){ var ajax=nuevoAjax(); ajax.open("POST", "clases/registroUser/regUser.php", true); ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); ajax.send("txtNombreReg="+txtNombreReg+"&txtApellidoReg="+txtApellidoReg+"&txtEmailReg="+txtEmailReg+"&hiddenTxtPass2="+hiddenTxtPass2+"&txtProvinciaReg="+txtProvinciaReg+"&txtMovilReg="+txtMovilReg+"&txtTelefonoReg="+txtTelefonoReg+"&cmbPais2="+cmbPais2+"&texto_ingresado="+texto_ingresado+"&texto_oculto="+texto_oculto+"&txtNumTarjetaAfiliacion="+txtNumTarjetaAfiliacion);

46

ajax.onreadystatechange=function() { if (ajax.readyState==4) { var url= ajax.responseText if (ajax.responseText=="0"){ document.getElementById('captcha').innerHTML = 'El texto ingresado no coincide'; } if (ajax.responseText=="1"){ window.location.href = "micuenta.php"; } } } }else{ document.getElementById('mensajeRegistro').innerHTML = "Los datos marcados con * son obligatorios"; } } function setUser(txtNombre,txtApellido,txtPais,txtProvincia,txtTelefono,txtCelular,txtEmail,txtPassword,txtRePassword,hiddenTxtPass2,chkCambiar,txtTarjetaAfiliacion) { if (txtPassword!=txtRePassword){ alert ("Confirmacion de Password incorrecta"); return true; } if (txtNombre!="" && txtApellido!="" && txtPais!="" && txtProvincia!="" && txtTelefono!="" && txtEmail!="" && txtPassword!="" && txtRePassword!=""){ var ajax=nuevoAjax(); ajax.open("POST", "clases/registroUser/regUser.php", true); ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); ajax.send("txtNombre="+txtNombre+"&txtApellido="+txtApellido+"&txtPais="+txtPais+"&txtProvincia="+txtProvincia+"&txtTelefono="+txtTelefono+"&txtCelular="+txtCelular+"&txtEmail="+txtEmail+"&hiddenTxtPass2="+hiddenTxtPass2+"&set="+1+"&txtTarjetaAfiliacion="+txtTarjetaAfiliacion);

47

ajax.onreadystatechange=function(){ if (ajax.readyState==1){ parent.document.getElementById('divCargando').style.visibility = 'visible'; } if (ajax.readyState==4){ parent.document.getElementById('divCargando').style.visibility = 'hidden'; alert(ajax.responseText); } } }else{ document.getElementById('mensajeRegistro').innerHTML = "Los datos marcados con * son obligatorios"; } } function setDireccion(txtDireccion,txtReferencia,txtPersonaContacto,txtTelefono1,txtTelefono2,hiddenIdDireccion,accion) { if (txtDireccion!="" && txtReferencia!="" && txtPersonaContacto!="" && txtTelefono1!=""){ var ajax=nuevoAjax(); ajax.open("POST", "clases/registroUser/regUser.php", true); ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); ajax.send("txtDireccion="+txtDireccion+"&txtReferencia="+txtReferencia+"&txtPersonaContacto="+txtPersonaContacto+"&txtTelefono1="+txtTelefono1+"&txtTelefono2="+txtTelefono2+"&hiddenIdDireccion="+hiddenIdDireccion+"&accion="+accion+"&direccion="+1); ajax.onreadystatechange=function(){ if (ajax.readyState==1){ parent.document.getElementById('divCargando').style.visibility = 'visible'; } if (ajax.readyState==4){ parent.document.getElementById('divCargando').style.visibility = 'hidden'; alert(ajax.responseText); window.location.href = "misDirecciones.php"; } } }else{ document.getElementById('mensajeRegistro').innerHTML = "Los datos marcados con * son obligatorios";}}

48

clases/registroUser/regUser.php

<? session_start(); $emailCliente= $_SESSION["emailCliente"]; ?> <? header("Cache-Control: no-store, no-cache, must-revalidate"); $fecha_creacion= date("Y-m-d"); include_once ("../../Connections/AccesoDatos.php"); $shop = mysql_pconnect($hostname, $username, $password) or trigger_error(mysql_error(),E_USER_ERROR); mysql_select_db($database, $shopping); ?> <? $texto_ingresado = $_POST["texto_ingresado"]; $captcha_texto = $_POST["texto_oculto"]; if ($texto_ingresado == $captcha_texto) { //echo "Usted ingreso el codigo correctamente."; } else { echo "0"; exit(); } ?> <? //esto es para modificar un registro if ($_POST['set']=="1"){ $txtNombre= $_POST['txtNombre']; $txtApellido= $_POST['txtApellido']; $txtPais= $_POST['txtPais']; $txtProvincia= $_POST['txtProvincia']; $txtTelefono= $_POST['txtTelefono']; $txtCelular= $_POST['txtCelular']; $txtEmail= $_POST['txtEmail']; $hiddenTxtPass2= $_POST['hiddenTxtPass2']; $txtTarjetaAfiliacion= $_POST['txtTarjetaAfiliacion']; $sql="update cliente set nombre='$txtNombre',apellido='$txtApellido',email='$txtEmail',pass='$hiddenTxtPass2',telefono='$txtTelefono',celular='$txtCelular',tarjeta='$txtTarjetaAfiliacion' where email='$emailCliente'"; mysql_query($sql); $sql="update cabpedido set email_cliente='$txtEmail' where email_cliente='$emailCliente'"; mysql_query($sql); $sql="update direccioncliente set email_cliente='$txtEmail' where email_cliente='$emailCliente'"; mysql_query($sql);

49

session_start(); session_destroy(); session_start(); $_SESSION["emailCliente"]= $txtEmail; $_SESSION["nombreCliente"]= $txtNombre; $_SESSION["apellidoCliente"]= $txtApellido; $_SESSION["identificado"]= "si"; $_SESSION["pais"]= $txtPais; $_SESSION["provincia"]= $txtProvincia; $_SESSION["tarjeta"]= $txtTarjetaAfiliacion; echo "Datos actualizados correctamente"; exit(); } ?> <? //esto es para agregar y/o modificar una direccion if ($_POST['direccion']=="1"){ $txtDireccion= $_POST['txtDireccion']; $txtReferencia= $_POST['txtReferencia']; $txtPersonaContacto= $_POST['txtPersonaContacto']; $txtTelefono1= $_POST['txtTelefono1']; $txtTelefono2= $_POST['txtTelefono2']; $hiddenIdDireccion= $_POST['hiddenIdDireccion']; $accion= $_POST['accion']; //echo $accion; if ($accion=="update"){ $sql="update direccioncliente set direccion='$txtDireccion',referencia='$txtReferencia',contacto='$txtPersonaContacto',telefono1='$txtTelefono1',telefono2='$txtTelefono2' where id_direccion=$hiddenIdDireccion"; mysql_query($sql); }else{ $sql="insert into direccioncliente (email_cliente,direccion,referencia,contacto,telefono1,telefono2) values ('$emailCliente','$txtDireccion','$txtReferencia','$txtPersonaContacto','$txtTelefono1','$txtTelefono2')"; mysql_query($sql); } echo "Direcciones guardadas correctamente"; exit(); } ?>

50

<? //esto es para agregar un nuevo registro $txtNombreReg= $_POST['txtNombreReg']; $txtApellidoReg= $_POST['txtApellidoReg']; $txtEmailReg= $_POST['txtEmailReg']; $hiddenTxtPass2= $_POST['hiddenTxtPass2']; $cmbPais2= $_POST['cmbPais2']; $txtProvinciaReg= $_POST['txtProvinciaReg']; $txtMovilReg= $_POST['txtMovilReg']; $txtTelefonoReg= $_POST['txtTelefonoReg']; $txtNumTarjetaAfiliacion= $_POST['txtNumTarjetaAfiliacion']; $sql="insert into cliente (nombre,apellido,email,pass,pais,provincia,telefono,celular,fecha_creacion,estado,tarjeta) values ('".$txtNombreReg."','".$txtApellidoReg."','".$txtEmailReg."','".$hiddenTxtPass2."','".$cmbPais2."','".$txtProvinciaReg."','".$txtTelefonoReg."','".$txtMovilReg."','".$fecha_creacion."','A',".$txtNumTarjetaAfiliacion.")"; mysql_query($sql); session_start(); session_destroy(); session_start(); $_SESSION["emailCliente"]= $txtEmailReg; $_SESSION["nombreCliente"]= $txtNombreReg; $_SESSION["apellidoCliente"]= $txtApellidoReg; $_SESSION["identificado"]= "si"; $sql="select pais from pais where id_pais=".$cmbPais2; $rs = mysql_query($sql, $shopping) or die(mysql_error()); while ($row = mysql_fetch_array($rs)){ $_SESSION["pais"]= $row["pais"]; } $sql="select provincia from provincia where id_provincia=".$txtProvinciaReg; $rsp = mysql_query($sql, $shopping) or die(mysql_error()); while ($rowp = mysql_fetch_array($rs)){ $_SESSION["provincia"]= $rowp["provincia"]; } $_SESSION["tarjeta"]= $txtNumTarjetaAfiliacion; echo "1"; ?>

51

clases/login/login.js

function nuevoAjax() { /* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por lo que se puede copiar tal como esta aqui */ var xmlhttp=false; try{ // Creación del objeto AJAX para navegadores no IE xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch(e){ try{ // Creación del objet AJAX para IE xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch(E){ if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest(); } } return xmlhttp; } function Validarlogin(email,pass,pagina){ var ajax=nuevoAjax(); ajax.open("POST", "clases/sesion.php", true); ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); ajax.send("txtEmail="+email+"&txtPass="+pass+"&pagina="+pagina); ajax.onreadystatechange=function(){ if (ajax.readyState==1){ document.getElementById('mensajeLogin').style.visibility = 'visible';} if (ajax.readyState==4){ document.getElementById('mensajeLogin').style.visibility = 'visible'; document.getElementById('mensajeLogin').innerHTML=ajax.responseText; var url= ajax.responseText if (ajax.responseText!="Usuario o password incorrectos"){ document.getElementById('loginFrame').style.visibility = 'hidden'; window.location.href = pagina; } } }}

52

clases/login/login.php

function nuevoAjax() { /* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por lo que se puede copiar tal como esta aqui */ var xmlhttp=false; try{ // Creacion del objeto AJAX para navegadores no IE xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch(e){ try{ // Creacion del objet AJAX para IE xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch(E){ if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest(); } } return xmlhttp; } function Validarlogin(email,pass,pagina){ var ajax=nuevoAjax(); ajax.open("POST", "clases/sesion.php", true); ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); ajax.send("txtEmail="+email+"&txtPass="+pass+"&pagina="+pagina); ajax.onreadystatechange=function(){ if (ajax.readyState==1){ document.getElementById('mensajeLogin').style.visibility = 'visible';} if (ajax.readyState==4){ document.getElementById('mensajeLogin').style.visibility = 'visible' document.getElementById('mensajeLogin').innerHTML=ajax.responseText; var url= ajax.responseText if (ajax.responseText!="Usuario o password incorrectos"){ document.getElementById('loginFrame').style.visibility = 'hidden'; window.location.href = pagina; } } }}

53

function nuevoEvento(id,tabla,campo){ // Obtengo el div donde se mostraran las advertencias y errores if (id=="txtEmailIndex"){ var divMensaje=document.getElementById("error"); } if (id=="txtEmailReg"){ var divMensaje2=document.getElementById("errorRegEmail"); } var valor=document.getElementById(id).value; // Texto a colocar en el input mientras se esta cargando la respuesta del servidor var textoAccion="Comprobando..."; valor=eliminaEspacios(valor); // Si el ingreso es invalido coloco un mensaje de error en la capa correspondiente valor_anterior= document.getElementById(id).value document.getElementById(id).value=textoAccion; document.getElementById(id).disabled=true; // Creo la conexion con el servidor y le envio la variable evento (que le indica si debe ingresar o verificar) y el dato a utilizar var ajax=nuevoAjax(); ajax.open("POST", "clases/ComprobarDisp/comprobar_disponibilidad.php", true); ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); ajax.send("valor="+valor+"&tabla="+tabla+"&campo="+campo); ajax.onreadystatechange=function(){ if (ajax.readyState==4){ // Habilito nuevamente el inputs document.getElementById(id).disabled=false; // Muestro el mensaje enviado desde el servidor if (ajax.responseText=="email No Disponible para registro"){ document.getElementById(id).value=""; }else{ document.getElementById(id).value= valor_anterior } try{ if (id=="txtEmailReg"){ divMensaje2.innerHTML=ajax.responseText; divMensaje.innerHTML="" } if (id=="txtEmailIndex"){ divMensaje.innerHTML=ajax.responseText; divMensaje2.innerHTML="" } }catch(e){} }}}

54

clases/ComprobarDisp/comprobar_disponibilidad.php

<? header("Cache-Control: no-store, no-cache, must-revalidate"); ?> <?php include_once ("../../Connections/AccesoDatos.php"); function desconectar() { mysql_close(); } function validaIngreso($valor) { // Funcion utilizada para validar el dato a ingresar recibido por POST if(eregi("^[a-zA-Z0-9.@ ]{2,40}$", $valor)) return TRUE; else return FALSE; } function verificaExistencia($valor,$tabla,$campo) { /* Funcion encargada de verificar la existencia del apodo recibido en base de datos. Devuelve TRUE si el apodo existe, FALSE de lo contrario */ $sql="SELECT * FROM ".$tabla." WHERE ".$campo."='$valor'"; //echo $sql; $consulta=mysql_query($sql) or die(mysql_error()); $registro=mysql_fetch_row($consulta); if(!empty($registro)) return TRUE; else return FALSE; } if(isset($_POST["valor"])) { // Quito espacios en blanco al comienzo y fin de la cadena $valor=trim($_POST["valor"]); $tabla=trim($_POST["tabla"]); $campo=trim($_POST["campo"]); // Si el valor recibido es valido... //conectar(); // Si el apodo ya existe en base de datos... if(verificaExistencia($valor,$tabla,$campo)){ echo "email No Disponible para registro"; }else{echo "Su email se encuentra disponible"; } desconectar(); } ?>

55

clases/carroCompra/carroCompra.js

function nuevoAjax(){ /* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por lo que se puede copiar tal como esta aqui */ var xmlhttp=false; try{ // Creacion del objeto AJAX para navegadores no IE xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch(e){ try{ // Creacion del objet AJAX para IE xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch(E){ if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest(); } } return xmlhttp; } function addCarroCompra(codigo,descripcion,path,cantidad,valUnidad,SubTotal){ var ajax=nuevoAjax(); ajax.open("GET", "clases/carroCompra/carroCompra.php?codigo="+codigo+"&descripcion="+descripcion+"&path="+path+"&cantidad="+cantidad+"&valUnidad="+valUnidad+"&SubTotal="+SubTotal, true); ajax.onreadystatechange=function() { if (ajax.readyState==1){ document.getElementById('divCargando').style.visibility = 'visible' } if (ajax.readyState==4){ document.getElementById('divCargando').style.visibility = 'hidden' var a= ajax.responseText; alert(a) } } ajax.send(null); }

56

function EliminarCarroCompra(pagina){ if (!confirm("Realmente desea eliminar el contenido del carro de compras")){ return false; }else{ var ajax=nuevoAjax(); ajax.open("GET", "clases/carroCompra/carroCompra.php?eliminar=1", true); ajax.onreadystatechange=function() { if (ajax.readyState==4){ var mensaje= ajax.responseText; alert(mensaje) window.location.href = pagina; } } ajax.send(null); return true; } } function CrearListaCarroCompra(pagina){ var nombreLista = prompt ("Nombre de la Lista","dale un nombre a tu lista"); if (nombreLista=="dale un nombre a tu lista" || nombreLista=="" || nombreLista==null){ alert("Nombre incorrecto"); }else{ var ajax=nuevoAjax(); ajax.open("GET", "clases/carroCompra/carroCompra.php?crearLista=1&nombreLista="+nombreLista, true); ajax.onreadystatechange=function() { if (ajax.readyState==1){ document.getElementById('divCargando').style.visibility = 'visible' } if (ajax.readyState==4){ document.getElementById('divCargando').style.visibility = 'hidden' var mensaje= ajax.responseText;

57

if (mensaje==0){ alert("Esta lista ya existe en sus registros") }else{ if (mensaje==1){ alert("Su carro de compras se encuentra vacio") }else{ document.getElementById('listasCompras').innerHTML = mensaje; } } } } ajax.send(null); } } function LlenarListaCarroCompra(parent){ var ajax=nuevoAjax(); ajax.open("GET", "clases/carroCompra/carroCompra.php?LlenarLista=1", true); ajax.onreadystatechange=function() { if (ajax.readyState==4){ var mensaje= ajax.responseText; } } ajax.send(null); } function cargarListaXML(nombreLista){ var ajax=nuevoAjax(); ajax.open("GET", "clases/carroCompra/carroCompra.php?nombreLista="+nombreLista, true); ajax.onreadystatechange=function() { if (ajax.readyState==1){ document.getElementById('divCargando').style.visibility = 'visible'} if (ajax.readyState==4){ document.getElementById('divCargando').style.visibility = 'hidden'} } ajax.send(null); }

58

function SetcargarListaXML(){ var ajax=nuevoAjax(); ajax.open("GET", "clases/carroCompra/carroCompra.php?soloCargaDiv=1", true); ajax.onreadystatechange=function() { if (ajax.readyState==1){ document.getElementById('divCargando').style.visibility = 'visible' } if (ajax.readyState==4){ document.getElementById('divCargando').style.visibility = 'hidden' } } ajax.send(null); } function insertarContenido(idItem,cant){ var ajax=nuevoAjax() ajax.open("GET", "clases/carroCompra/carroCompra.php?idProducto="+idItem+"&cant="+cant, true); ajax.onreadystatechange=function() { if (ajax.readyState==1){ document.getElementById('divCargando').style.visibility = 'visible' } if (ajax.readyState==4){ document.getElementById('divCargando').style.visibility = 'hidden' } } ajax.send(null); } function setCarroCompra(totalFilas){ var ajax=nuevoAjax(); ajax.open("GET", "clases/carroCompra/carroCompra.php?borrarCarroXML=1", true); ajax.onreadystatechange=function() { if (ajax.readyState==4){ for(i=1;i<=totalFilas-1;i++){ idItem= document.getElementById('cod'+i).innerHTML cant= document.getElementById('cant'+i).value insertarContenido(idItem,cant) } } } ajax.send(null); }

59

function redondear(cantidad, decimales) { var cantidad = parseFloat(cantidad); var decimales = parseFloat(decimales); decimales = (!decimales ? 2 : decimales); return Math.round(cantidad * Math.pow(10, decimales)) / Math.pow(10, decimales); } function sumColumn(id) { // Cargar Documento XML en Arbol DOM // Iniciar condicional para Detectar Browsers Explorer/Netscape if (window.ActiveXObject) { var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async=false; } else if (document.implementation && document.implementation.createDocument) { var xmlDoc= document.implementation.createDocument("","doc",null); } // Todas las declaraciones DOM posteriores son interoperables // Cargar el Documento XML xmlDoc.load("xml/carroCompra.xml"); document.getElementById(id).value=""; for (i=0;i<=xmlDoc.getElementsByTagName("inicio")[0].childNodes.length-1;i++){ val = xmlDoc.getElementsByTagName("linea")[i].getElementsByTagName("SubTotal")[0].firstChild.data document.getElementById(id).value = redondear((new Number(document.getElementById(id).value)+ new Number(val)),2) } } function multiplicar(val1,val2) { return redondear(val1*val2) }

60

clases/carroCompra/carroCompra.php

<? session_start(); $ruta= "../../xml/".session_id().".xml"; $fecha_creacion= date("Y-m-d"); $formatear = explode(' ', strftime("%A %d de %B %Y")); $formatear_mes = $formatear[3]; $formatear_semana = $formatear[0]; $mes = array("Enero"=>"January","Febrero"=>"February","Marzo"=>"March","Abril"=>"April","Mayo"=>"May","Junio"=>"June","Julio"=>"July","Agosto"=>"August","Septiembre"=>"September","Octubre"=>"October","Noviembre"=>"November","Diciembre"=>"December"); $semana = array("Lunes"=>"Monday,","Martes"=>"Tuesday","Miercoles"=>"Wednesday","Jueves"=>"Thursday","Viernes"=>"Friday","Sábado"=>"Saturday","Domingo"=>"Sunday"); foreach ($mes as $k => $v) { if ($v == $formatear_mes) { $formatear[2] = $k; } } foreach ($semana as $k => $v) { if ($v == $formatear_semana) { $formatear[0] = $k; } } $create_date = $formatear[0].', '.$formatear[1].' '.$formatear[2].' '.$formatear[4].' '.$formatear[5].' '.$formatear[6]; $fecha_creacion1= $create_date; $email = $_SESSION["emailCliente"]; ?> <? header("Cache-Control: no-store, no-cache, must-revalidate"); ?> <? include_once ("../../Connections/AccesoDatos.php"); $shop = mysql_pconnect($hostname, $username, $password) or trigger_error(mysql_error(),E_USER_ERROR); mysql_select_db($database, $shopping); ?>

61

<? function borrarCarroCompraXML($shop,$ruta){ $sql="delete from carrocompra where session_id='".session_id()."'"; mysql_query($sql,$shop); //tambien borro el archivo xml $datos=""; $datos=$datos."<?xml version=\"1.0\" encoding=\"UTF-8\"?>"; $dc = fopen($ruta,"w"); if (is_writable($ruta)) { if (fwrite($dc,$datos) === FALSE) { echo "No se puede escribir al archivo ($ruta)"; }else{ echo "Contenido eliminado"; } } fclose($dc); } ?> <? if (isset($_GET['eliminar']) and $_GET['eliminar']=="1"){ borrarCarroCompraXML($shop,$ruta); exit(); } ?> <? function ExisteLista($shop,$email){ $sql="select nombre_lista,count( id_producto ) as can_lista from listacompra where email_cliente='".$email."' GROUP BY nombre_lista"; $rs= mysql_query($sql); $sqlCarroActual= "select DISTINCT codigo from carroCompra where session_id='".session_id()."'"; $rs2= mysql_query($sqlCarroActual); $total_registros1= mysql_num_rows($rs2); if ($total_registros1==0){ return "1"; } while ($row = mysql_fetch_array($rs)){ $sql="select DISTINCT id_producto from listacompra as a inner join carroCompra as b on a.id_producto=b.codigo where a.email_cliente='".$email."' and a.nombre_lista='".$row['nombre_lista']."' and b.session_id='".session_id()."'"; $rs3= mysql_query($sql);

62

$total_registros2= mysql_num_rows($rs3); if ($row['can_lista']==$total_registros2 and $total_registros2==$total_registros1){ return "0"; exit(); } } return "3"; } ?> <? function llenar_DIV_Lista($shop,$email){ //esta parte es para llenar el DIV de la plantilla q tiene las listas de compras $sql="select distinct nombre_lista,fecha_creacion from listacompra where email_cliente='".$email."'"; $rs=""; $rs= mysql_query($sql); echo "<table width='262' border='0' cellspacing='0'>"; echo "<tr>"; echo "<td width='127' class='style2'><strong>Lista</strong></td>"; echo "<td width='131' class='style2'><strong>Fecha Creacion</strong></td>"; echo "</tr>"; while ($row = mysql_fetch_array($rs)){ echo "<tr>"; echo "<td class='style3'><a href='#' onclick=\"cargarListaXML('".$row['nombre_lista']."');\">".$row['nombre_lista']."</a></td>"; echo "<td class='style3'>".$row['fecha_creacion']."</td>"; echo "</tr>"; } echo "</table>"; //fin } ?>

63

<? if (isset($_GET['crearLista']) and $_GET['crearLista']=="1"){ $nombreLista= $_GET['nombreLista']; $funcion= ExisteLista($shop,$email); if ($funcion=="3"){ $sql="select * from carrocompra where session_id='".session_id()."'"; //echo $sql; $rs= mysql_query($sql); $total_registros2= mysql_num_rows($rs); while ($row_rs = mysql_fetch_assoc($rs)){ $filas_reg[] = $row_rs; } if ($filas_reg){ $b=0; foreach ($filas_reg as $reg){ $sql="insert into listacompra (fecha_creacion,id_producto,nombre_lista,email_cliente) values('".$fecha_creacion1."','".$reg['codigo']."','".$nombreLista."','".$email."')"; mysql_query($sql); } llenar_DIV_Lista($shop,$email); } }else{ echo $funcion; } exit(); } ?> <? if (isset($_GET['LlenarLista']) and $_GET['LlenarLista']=="1"){ //esta parte es para llenar el DIV de la plantilla q tiene las listas de compras session_start(); if ($_SESSION["identificado"] =="si") { $emailCliente= $_SESSION["emailCliente"]; } llenar_DIV_Lista($shop,$emailCliente); exit(); //fin } ?>

64

<? function llenar_XML($shop,$ruta){ //empiezo a armar el file xml que lleva como nombre la sesion actual $datos=""; $datos=$datos."<?xml version=\"1.0\" encoding=\"UTF-8\"?>"; $datos=$datos."<inicio>"; $sql="select * from carrocompra where session_id='".session_id()."' order by descripcion"; $rs= mysql_query($sql,$shop); $filas[]=""; while ($row_rs = mysql_fetch_assoc($rs)){ $filas[] = $row_rs; } if ($filas){ foreach ($filas as $registro){ if ($registro['codigo']!=""){ $datos=$datos."<linea>"; $datos=$datos."<codigo>".$registro['codigo']."</codigo>"; $datos=$datos."<descripcion>".$registro['descripcion']."</descripcion>"; $datos=$datos."<path>".$registro['path']."</path>"; $datos=$datos."<cantidad>".$registro['cantidad']."</cantidad>"; $datos=$datos."<valUnidad>".$registro['valUnidad']."</valUnidad>"; $datos=$datos."<SubTotal>".$registro['SubTotal']."</SubTotal>"; $datos=$datos."</linea>"; } } } $datos=$datos."</inicio>"; //fin de la creacion //añado la porción nueva al texto leído arriba y escribo en el archivo todo el contenido de nuevo $dc = fopen($ruta,"w"); if (is_writable($ruta)) { if (fwrite($dc, $datos) === FALSE) { echo "No se puede escribir al archivo ($ruta)"; }else{ } } fclose($dc); } ?>

65

<? //esta parte es para cargar una lista dentro del XML para mostrarlo en el carrito de compras if (isset($_GET['nombreLista'])){ $nombreLista= $_GET['nombreLista']; mysql_query("delete from carrocompra where session_id='".session_id()."'"); $sql="select a.id_producto,nombreProducto_es,path,precio from producto as a inner join listacompra as b on a.id_producto=b.id_producto where b.nombre_lista='".$nombreLista."' and b.email_cliente='".$email."'"; $rs=""; $rs= mysql_query($sql,$shop); while ($row = mysql_fetch_array($rs)){ $sql="insert into carrocompra (session_id,codigo,descripcion,path,cantidad,valUnidad,SubTotal) values ('".session_id()."','".$row['id_producto']."','".$row['nombreProducto_es']."','".$row['path']."',1,".$row['precio'].",0)"; mysql_query($sql,$shop); } llenar_XML($shop,$ruta); exit(); } ?> <? if ( isset($_GET['borrarCarroXML']) ){ borrarCarroCompraXML($shop,$ruta); exit(); } ?> <? //esta parte es para modificar el carrito de compras y el XML if ( isset($_GET['idProducto']) && isset($_GET['cant']) ){ $idProducto= $_GET['idProducto']; $cant= $_GET['cant']; echo "cantidad: ".$cant; $sql="select nombreProducto_es,path,precio from producto where id_producto ='".$idProducto."'";

66

acceso a los datos xml, se activa cada cuatro segundos dentro de la plantilla

$rs=""; $rs= mysql_query($sql,$shop); while ($row = mysql_fetch_array($rs)){ $subTotal= $cant*$row['precio']; $sql="insert into carrocompra (session_id,codigo,descripcion,path,cantidad,valUnidad,SubTotal) values ('".session_id()."','".$idProducto."','".$row['nombreProducto_es']."','".$row['path']."',".$cant.",".$row['precio'].",".$subTotal.")"; mysql_query($sql,$shop); } llenar_XML($shop,$ruta); exit(); } ?> <? $codigo= $_GET['codigo']; $descripcion= $_GET['descripcion']; $path= $_GET['path']; $cantidad= $_GET['cantidad']; $valUnidad= $_GET['valUnidad']; $SubTotal= $_GET['SubTotal']; //para comprobar el producto en el carro de comrpas, si es nuevo lo ingreso sino lo actualizo $sql="update carrocompra set cantidad=cantidad+".$cantidad.",SubTotal=valUnidad*".cantidad." where session_id='".session_id()."' and codigo='".$codigo."'"; mysql_query($sql,$shop); if ((mysql_affected_rows()==0) or (mysql_affected_rows()==-1)){ $sql="insert into carrocompra (session_id,codigo,descripcion,path,cantidad,valUnidad,SubTotal) values ('".session_id()."','".$codigo."','".$descripcion."','".$path."',".$cantidad.",".$valUnidad.",".$SubTotal.")"; mysql_query($sql,$shop); }else{ //echo "no es nuevo"; } //fin de la comprobación llenar_XML($shop,$ruta); echo "Articulo: ".$descripcion." agregados a la lista"; exit(); ?>

67

1.6 PREPARAR AMBIENTE DE DESARROLLO

<? session_start(); if (isset($_GET['cerrarSesion']) and $_GET['cerrarSesion']="1"){ session_unset(); //elimino tambien el archivo xml q almacena los datos del carro de compras if (file_exists("xml/".session_id().".xml")){ unlink("xml/".session_id().".xml");} //borrar tambien el contenido de la tabla del carro de comrpas delete_db ($shopping,"carrocompra","session_id='".session_id()."'"); $emailCliente= "sesión no iniciada"; }else{ if ($_SESSION["identificado"] =="si") { $emailCliente= $_SESSION["emailCliente"]; $nombreCliente= $_SESSION["nombreCliente"]; $apellidoCliente= $_SESSION["apellidoCliente"]; $identificado= $_SESSION["identificado"]; $fileXML="xml/".session_id().".xml"; //xml para el carro de compras $urlXML= "http://www.mevoyalsuper.com/".$fileXML; $urlXML= $fileXML; if (!(file_exists ($fileXML))){ $da= fopen($fileXML,"w+"); fclose($da);} }else{ $urlXML= "xml/blanco.xml"; $emailCliente= "sesión no iniciada"; } } ?> <script> function getAleatorio(){ return (aleatorio= Math.random() *10000)} function RecargarXML(){ url= "<? echo $fileXML ?>?num="+getAleatorio() dsRSSdet.setURL(url); dsRSSdet.loadData();} var dsRSSdet = new Spry.Data.XMLDataSet("<? echo $urlXML ?>?num="+getAleatorio()) dsRSSdet.setXPath("/inicio/linea"); dsRSSdet.loadData() //alert("<? echo $urlXML ?>") setInterval('RecargarXML()',4000); </script>

68

CAPÍTULO 4

4 MANUAL DE USUARIO

4.1 VISTA DE LA PÁGINA PRINCIPAL

69

4.2 PARTES DEL SITIO WEB

El Modulo de Atención al cliente consta de las siguientes partes:

Barra de tareas: Aquí encontraremos un menú el cual le servirá para

poder iniciar sesión, registrarse, verificar cuenta, verificar la cesta de la

compra. Además esta barra de tarea nos permitirá saber si esta iniciada

o no la sesión.

Pasillos: Aquí dispondremos de todas los productos, que estarán

clasificados por categorías (Aceites, alimentos dietéticos, aperitivos,

etc.) con la finalidad de encontrar los productos de una manera ágil.

70

Novedades y Ofertas: Esta Sección estarán todas las novedades y las

ofertas de cada semana, mes según como lo haya determinado la

empresa..

Identifícate: Esta ubicado en la barra de tarea y sirve para poder

acceder a la cuenta del usuario , y así pueda verifica algún producto..

71

Inicio: Vuelve a la pagina de principal del sito.

Mi cuenta: Aquí encontraremos todos los datos de la persona que inicio

la sesión, también podrá realizar alguna modificación si el caso

requiere.

Cerrar Sesión: Cierra la sesión.

Mi carrito de compras: Aquí estarán los productos que haya escogido

y saber cuanto va hacer el valor total de su compra y así llevar el control

de sus gastos.

72

Productos de la Cesta: Aquí se mostrara la lista o listas de compras,

además se podrá añadir la cantidad de productos que desee.

Ayuda en línea: Este chat permitirá al cliente poder tener un contacto

instantáneo de cualquier inquietud del momento.

73

Buscar producto por nombre: Esta sección nos ayudara a buscar un

producto determinado mucho mas ágil, en lugar de recorrer todos los

productos.

Buzón de quejas y reclamos: Esto nos ayudara a corregir anomalías

que tengamos en la empresa, gracias a las quejas y reclamos recibidas

por el cliente. La empresa se deberá de encargar de solucionar en un

tiempo determinado las inquietudes del cliente.

74

4.3 REGISTRO

Para poder acceder a realizar compras se debe de seguir los siguientes

pasos:

1. Dar Clic en link Identifícate.

2. Saldrá una pantalla para poder acceder al modulo siempre y cuando

estés registrado, sino presiona Registrarse.

75

3. Al no estar registrado daremos clic en Registrarse e ingresaremos los

datos en la siguiente ventana

Una vez realizados estos pasos deberá llenar datos personales y direcciones

de envío, que nos ayudaran a enviar sus compras correctamente hasta

donde usted nos indique y no olvide grabar sus datos en el botón. Y con esto

se esta listo para acceder al sistema.

76

4. Luego aparecerá una pantalla con todos nuestros datos, estos se pueden

modificar en el caso que sea necesario.

Después de Grabar aparecerá un cuadro de confirmación del proceso de

grabación.

77

4.4 REALIZAR COMPRAS

Para comprar solo debe seleccionar los productos que desee, los mismos

que encontrará organizados por categorías en la sección Pasillos.

Cuando encuentre el producto que desea, debe seleccionar la cantidad y dar

clic en el botón Añadir.

Una vez realizadas estas acciones aparece una ventana que indica que su

producto ha sido agregado y ahora es parte del carrito de compras.

78

Cuando usted haya terminado de seleccionar sus productos debe dar clic en

el botón Pasar por caja y le aparecerá la información de lo que ha comprado,

aquí debe cumplir con 4 pasos que le servirán para completar la información

de la compra:

1. Paso1: Revise el contenido de su pedido.- Aquí se podrá confirmar la

compra que haya realizado

2. Paso 2: Seleccione una dirección de envío.- Aquí seleccionamos una

dirección para recibir el pedido.

Paso 3: Realizar Pedido.- Sirve para realizar el pedido.

79

Luego presionamos pagar el total del pedido y nos saldrá una ventana en la

cual nos detalla los productos que hemos escogido e imprimir si lo

deseamos.

80

4.5 CARRITO DE COMPRAS

En la sección “Mi carrito de Compras” puedo ampliar, guardar como lista y

eliminar todo. Estas opciones me ayudan a manejar mis compras de una

manera más rápida y eficiente, debido a:

Aumentar la cantidad: aquí puedo ampliar la cantidad del producto que

desee.

Actualizar Carro de Compras: Actualiza el contenido del carro de

compra.

Eliminar todo: Elimina el contenido de su compra, sin eliminar la lista.

ingeniero en sistemas computacionalesrepositorio.ug.edu.ec/bitstream/redug/6792/1/tesis... · 2017....

Documents