ingeniero en sistemas computacionalesrepositorio.ug.edu.ec/bitstream/redug/6792/1/tesis... · 2017....
TRANSCRIPT
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.
Antonio Rodríguez Condoy
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.
Antonio Rodríguez Condoy
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
* Usuario * Módulo * 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
Responsabilidades: Colaboradores:
* 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
Características: Intangible, atómica, concurrente, permanente, protegida
Responsabilidades: Colaboradores:
* Datos de un módulo del sistema
Clase Privilegio: Contiene los datos de un privilegio.
Nombre de la clase: Privilegio
Tipo: Datos
Características: Intangible, atómica, concurrente, permanente, protegida
Responsabilidades: Colaboradores:
* 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
Características: Intangible, atómica, concurrente, temporal, protegida
Responsabilidades: Colaboradores:
* 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
* Usuario * Módulo * 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
Características: Intangible, atómica, concurrente, temporal, protegida
Responsabilidades: Colaboradores:
* 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
Características: Intangible, atómica, concurrente, permanente, protegida
Responsabilidades: Colaboradores:
* 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
Características: Intangible, atómica, concurrente, permanente, protegida
Responsabilidades: Colaboradores:
* 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
Características: Intangible, atómica, concurrente, temporal, protegida
Responsabilidades: Colaboradores:
* 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
Características: Intangible, atómica, concurrente, temporal, protegida
Responsabilidades: Colaboradores:
* 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
Características: Intangible, atómica, concurrente, permanente, protegida
Responsabilidades: Colaboradores:
* 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
Características: Intangible, atómica, concurrente, temporal, protegida
Responsabilidades: Colaboradores:
* 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
fecha_creacion Varchar 10
fecha_modifi Varchar 10
id_impuesto Varchar 15
id_zona_impuesto Varchar 15
id_asigna_imp (PK) Varchar 15
Descripción Varchar 150
Estado Varchar 1
usuario_crea Varchar 10
TABLA 16: Tabla Impuesto por zona
39
TABLA: atributos
Nombre de Campo Tipo Tamaño
fecha_creacion Varchar 10
fecha_modifi Varchar 10
id_atributo (PK) Int 11
atributo Varchar 80
estado Varchar 1
usuario_crea Varchar 10
TABLA 17: Tabla Atributos
40
TABLA: atributo_prod
Nombre de Campo Tipo Tamaño
fecha_creacion Varchar 10
id_producto Varchar 10
id_valor Int 11
usuario_crea Varchar 10
TABLA 18: Tabla Atributo Producto
41
TABLA: atributo_valor
Nombre de Campo Tipo Tamaño
fecha_creacion Varchar 10
fecha_modifi Varchar 10
id_valor (PK) Int 11
id_atributo Int 11
valor Varchar 70
estado Varchar 1
usuario_crea Varchar 10
TABLA 19: Tabla Atributo Valor
42
TABLA: cabpedido
Nombre de Campo Tipo Tamaño
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
Nombre de Campo Tipo Tamaño
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
Nombre de Campo Tipo Tamaño
fecha_creacion varchar 10
fecha_modifi Varchar 10
id_categoria (PK) Varchar 10
nombre Varchar 50
id_pasillo Varchar 15
estado Varchar 1
usuario_crea Varchar 10
TABLA 22: Tabla Categoría
45
TABLA: cliente
Nombre de Campo Tipo Tamaño
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
fecha_creacion varchar 10
TABLA 23: Tabla Cliente
46
TABLA: datos_sucursales
Nombre de Campo Tipo Tamaño
fecha_creacion varchar 10
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
provincia varchar 50
zona varchar 50
path varchar 150
representante_legal varchar 100
direccion_repres varchar 150
usuario_crea varchar 10
TABLA 24: Tabla Datos Sucursales
47
TABLA: detpedido
Nombre de Campo Tipo Tamaño
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
Nombre de Campo Tipo Tamaño
id_direccion (PK) int 11
email_cliente varchar 200
direccion varchar 300
referencia varchar 300
contacto varchar 250
telefono1 varchar 25
telefono2 varchar 25
TABLA 26: Tabla Dirección Cliente
49
TABLA: impuesto
Nombre de Campo Tipo Tamaño
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
Nombre de Campo Tipo Tamaño
Id (Pk) int 11
fecha_creacion varchar 100
id_producto varchar 25
nombre_lista varchar 150
email_cliente varchar 150
TABLA 28: Tabla Lista de Compra
51
TABLA: otrosvalores
Nombre de Campo Tipo Tamaño
idValor (PK) varchar 5
valor float
descripcion varchar 200
TABLA 29: Tabla Otros Valores
52
TABLA: pais
Nombre de Campo Tipo Tamaño
fecha_creacion varchar 10
fecha_modifi varchar 10
id_pais (PK) int 11
pais varchar 150
estado varchar 1
usuario_crea varchar 10
TABLA 30: Tabla País
53
TABLA: pasillo
Nombre de Campo Tipo Tamaño
id_tabla (PK) int 11
id_pasillo varchar 15
fecha_creacion varchar 10
fecha_modifi varchar 10
nombre varchar 50
usuario_crea varchar 10
estado varchar(1) 1
TABLA 31: Tabla Pasillo
54
TABLA: producto
Nombre de Campo Tipo Tamaño
fecha_creacion varchar 10
fecha_modifi varchar 10
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
usuario_crea varchar 10
TABLA 32: Tabla Producto
55
TABLA: proveedores
Nombre de Campo Tipo Tamaño
fecha_creacion varchar 10
fecha_modifi varchar 10
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
usuario_crea varchar 10
TABLA 33: Tabla Proveedores
56
TABLA: provincia
Nombre de Campo Tipo Tamaño
fecha_creacion varchar 10
fecha_modifi varchar 10
id_pais int 11
id_provincia (PK) int 11
provincia varchar 100
estado varchar 1
usuario_crea varchar 10
TABLA 34: Tabla Provincia
57
TABLA: publicacion
Nombre de Campo Tipo Tamaño
id_publicacion (PK) varchar 25
fecha_crea varchar 10
fecha_modifi varchar 10
id_producto varchar 25
id_tipo varchar 25
Precio float
Estado varchar 1
descripcion_es varchar 250
descripcion_en varchar 250
Path varchar 100
usuario_crea varchar 10
TABLA 35: Tabla Publicación
58
TABLA: tipo_publicacion
Nombre de Campo Tipo Tamaño
id_tipo (Pk) varchar 25
tipo varchar 80
TABLA 36: Tabla Tipo Publicación
59
TABLA: zona_impuesto
Nombre de Campo Tipo Tamaño
fecha_creacion varchar 10
fecha_modifi varchar 10
id_pais int 11
id_provincia int 11
id_zona_impuesto
(PK) varchar 15
nombre varchar 50
estado varchar 1
usuario_crea varchar 10
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
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.
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
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
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.
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.
Í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"?> <!-- generator="wordpress/2.0.2" --> <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.