Con el presente documento se pretende introducir a los alumnos en la creacin de un sitio web de comercio electrnico usando las tecnologas

de PHP, MySQL, JavaScript y AJAX

Comercio Electrnico con AJAX

UTM

NELSON CROZBY PADILLA ALVAREZ

Contenido
Introduccin ........................................................................................................................................ 2 Estructura ............................................................................................................................................ 2 Lenguaje del servidor ...................................................................................................................... 2 Base de datos .................................................................................................................................. 2 Creacin de base de datos y tablas. ................................................................................................ 3 Consideraciones en la Base de Datos .............................................................................................. 3 Creacin de clase de conexin ........................................................................................................ 4 Diseo web .......................................................................................................................................... 7 Comportamiento Inicial....................................................................................................................... 9 Script de inicio ............................................................................................................................... 11 Resultados de bsqueda ............................................................................................................... 14 Bsqueda por seleccin de categora ........................................................................................ 14 Bsqueda por palabras.............................................................................................................. 18 Detalle de producto ...................................................................................................................... 20 Agregando al canasto .................................................................................................................... 24 Mostrando el canasto ............................................................................................................... 25 Quitando del canasto .................................................................................................................... 27 Modificando cantidades ................................................................................................................ 28 Agregando un carrusel de imgenes esttico ............................................................................... 30 Finalizando la compra ....................................................................................................................... 33

Introduccion
A esta altura todos conocen qu es un sitio web de comercio electrnico. El asunto es, qu puede aportar una aplicacin rica de Internet en un desarrollo de este tipo? Aportar muchas caractersticas interesantes, que harn aumentar la cantidad de compras que se hagan en nuestro sitio web. Un sitio web rico tiene mayor tasa de conversin; esto es, la gente compra ms cuando se trata de una aplicacin rica. A continuacin se detallan algunas caractersticas de un comercio electrnico con AJAX: El proceso de compra es notoriamente ms veloz. Es posible obtener estadsticas detalladas del comportamiento del usuario para ofrecerle sugerencias, ofertas o paquetes de productos. El usuario puede interactuar mejor con el sistema, puede comparar productos, arrastrar productos al canasto de compras o tener su lista de productos deseados (wish list). El usuario nunca sale de una sola interfaz donde navega por categoras, busca, elije y compra.

Estructura
Lenguaje del servidor
Para demostrar que AJAX en realidad puede comunicarse con cualquier plataforma del servidor, se va a hacer uso de la tecnologa Apache con lenguaje PHP y con MySQL. Fcilmente se podra utilizado tambin Visual Basic, C#, IronPython u otro lenguaje .NET.

Base de datos
Se va a utilizar MySQL como motor de base de datos con la estructura de un e-commerce que se puede ver en la Imagen 1. La estructura es simple, y lo es a los efectos de demostrar las capacidades de AJAX en un sitio de estas caractersticas. Un sitio en produccin debera tener mayores capacidades, clculo de estadsticas y probablemente mayor informacin y filtros acerca de los productos. Tambin se debera almacenar ms informacin del usuario que hace la compra. Ntese que en la tabla pedidos hay un campo finalizado. La idea es ofrecer un servicio de autoguardado que guarde el pedido en el servidor por si se cierra el navegador o el usuario tiene algn problema. Esto es un servicio muy til en aplicaciones ricas en Internet, que le ofrece al usuario una nueva experiencia de navegacin.

Imagen 1

Creacin de base de datos y tablas.

No es caso de este manual explicar la manera y formas de crear una base de datos para este caso, lo nico que se pide es que se respete la estructura mostrada en la Imagen 1. Por la naturaleza de este caso y dado que muy probablemente se est usando XAMPP, MAMP, WAMP, LAMP (o cualquier paquete de instalacin para desarrollo de aplicaciones web dinmicas que termine en AMP), se recomienda usar phpMyAdmin. Si no es el caso se puede usar cualquier DBMS para MySQL para la creacin y administracin de la base de datos.

Consideraciones en la Base de Datos

1. Todas las tablas (y la base de datos en s mismo) deben de tener el motor de almacenamiento InnoDB. 2. El nombre de la base de datos en nuestro ejemplo es carrito_compras 3. En phpMyAdmin tambin es posible crear relaciones con llaves forneas solo es necesario entrar a la seccin Estructura de cada una de las tablas y hacer click en la opcin Vista de relaciones en donde se pueden crear las relaciones entre las tablas deseadas, ver Imagen 2.

Imagen 2

Creacin de clase de conexin

Hagamos entonces una librera simple de PHP para manejar la base de datos. Esto permitir simplificar mucho ms todos los scripts que se usarn a partir de ahora. Siempre es recomendable utilizar una clase de este tipo para crear una capa de datos y no hacer consultas directamente a los objetos de la base de datos (como se muestra en las Imgenes 2 y 3). Esto permite realizar aplicaciones ms escalables en el futuro. La clase tiene mtodos (funciones) para distintas tareas, entre ellas: Mtodo Descripcin Recibe una consulta SQL y devuelve un vector d registros con todos los Execute resultados Recibe el nombre de la tabla y un filtro SQL para el WHERE, y trae un solo ExecuteRecord registro Trae un vector con todos los valores que tiene un solo campo en cada ExecuteField uno de los registros de la tabla indicada con un filtro particular Recibe el nombre de una tabla y un campo de orden y devuelve todos los ExecuteTable registros con todos sus campos Muy til, devuelve el resultado de una consulta que retorna un solo ExecuteScalar valor. Por Ejemplo, un COUNT(*) RecordCount Recibe el nombre de una tabla y devuelve la cantidad de registros totales ExecuteRecords Recibe el nombre de la tabla y un filtro SQL para el WHERE
Tabla 1

Con esta clase se tendr centralizado el acceso para realizar consultas a la base de datos en forma sencilla.

Diseno web
El diseo del sitio de comercio electrnico se basar en una Rich Inernet Application (RIA), o sea, una sola URL donde el usuario podr realizar todas las acciones de la aplicacin web. La pgina web tendr las zonas siguientes (Imagen 5): Zona de men: permitir acceder a distintas opciones de men, como buscar por categoras, buscar por palabra o ver el canasto de compras. Zona de resultados: mostrar el resultado de una bsqueda con el nombre y el precio del producto. Zona de detalle: mostrar el detalle de un producto seleccionado. Esta informacin puede ubicarse debajo de cada resultado o en una zona predefinida. Zona de canasto: permitir ver todos los productos que hay en el canasto; se pueden modificar cantidades, eliminar productos y limpiar el canasto. Zona de finalizacin de compra: confirmar los datos de envo de los productos y finalizar la compra.

Imagen 5

Se tendr la estructura XHTML siguiente:

Imagen 6

Y el CSS adjunto

Imagen 7

Comportamiento Inicial
Ahora tambin se le agrega algo de informacin a cada seccin y se van incorporando los archivos de inclusin de JavaScript. Los JavaScript que importaremos son: jquery.1.7.1.js: es una biblioteca de JavaScript, que permite simplificar la manera de interactuar con los documentos HTML, manipular el rbol DOM, manejar eventos, desarrollar animaciones y agregar interaccin con la tcnica AJAX a pginas web jquery.ui.1.8.16.js: es una biblioteca de componentes para el framework jQuery que le aaden un conjunto de plug-ins, widgets y efectos visuales. index.js: El controlador de nuestra aplicacin. Todos estos archivos sern colocados en una carpeta de nombre lib.

Tambin ser necesario crear una carpeta css en donde colocaremos: jquery.ui.css: Es la hoja de estilo para el framework jQuery.

Tambin se agregar un DIV que permitir mostrar un aviso de cargando. Con todos estos cambios el cdigo queda as (Imagen 8):

Imagen 8

Y el archivo de estilo hay que agregarle lo siguiente (Imagen 9):

Imagen 9

Quedando nuestra pgina como se ve en la Imagen 10:

Imagen 10

Ahora se vern los pasos a seguir en el controlador: 1. Traer va AJAX todas las categoras para completar la lista (es imperioso tener registrados datos en la tabla de categoras). 2. Cargar los productos disponibles en la primera categora. 3. Darle funcionalidad a la lista de categoras y al buscador. 4. Apagar el cartel de cargando.

10

Script de inicio
Como primer paso procederemos a crear una rutina de inicio en nuestro controlador (index.js), esta ser una rutina de inicio de jQuery que utilizar la funcin $.ajax(), para cargar los datos de las categoras existentes en la base de datos. El cdigo es el que sigue:

Imagen 11

Como vemos en la funcin $.ajax() hay varios parmetros que sirven para configurar el comportamiento del proceso del proceso AJAX, veamos a detalle ahoar: type : Especifica el tipo de consulta que se realizar, puede ser GET o POST. url : Indica la ubicacin del archivo que se encargar de hacer la consulta y entregar el JSON debidamente armado. error : Aqu se especifica el mtodo que se va a ejecutar en caso de existir algn error. success : Especifica el proceso a ejecutar en caso de que se haya ejecutado con xito la consulta. dataType : indica el tipo de formato del resultado de la consulta.

En el atributo url se indica que el archivo categorias.php ser el indicado para realizar la consulta inicial de donde se obtendrn las categoras ya existentes en la base de datos, adems de que aqu es donde se realiza la consulta a la base de datos tambin es aqu en donde se realiza el armado del json con la informacin de las categoras existentes en la base de datos. Veamos el cdigo:

11

Imagen 12

El cdigo de la Imagen 12 genera un JSON como se muestra en la Imagen 13:

Imagen 13

El mtodo que se manda a llamar en el atributo error se llama callback_error, este mtodo lo que hace es mostrar un mensaje en caso de que haya ocurrido un error con el proceso de recuperar las categoras, a continuacin podemos ver el cdigo:

Imagen 14

Por ultimo tenemos el mtodo recuperarCategorias_callback que es llamado por el parmetro success, este mtodo solo es llamado cuando la consulta ha sido exitosa, y de lo que se encarga es de recuperar la informacin enviada por el servidor en formato JSON, y en este caso en particular agrega options a un elemento select, A continuacin podemos ver el cdigo:

12

Imagen 15

En el mtodo anterior tambin es llamado el mtodo procesarRespuesta, en el cual asumimos que el resultado es un objeto serializado en JSON razn por la cual utilizamos la rutina "eval" para recuperar dicho resultado y convertirlo a un objeto que podamos manejar fcilmente, veamos el cdigo:

Imagen 16

El resultado de lo que va hasta el momento en nuestro proyecto se puede observar en la siguiente Imagen:

13

Imagen 17

Resultados de bsqueda
Teniendo en cuenta que nuestro sistema puede tener muchos productos incorporados, desde el servidor se van a enviar el id, el nombre y el precio de los productos a incorporar en el canasto en los resultados de bsqueda. Recordemos que se pueden recibir resultados de dos maneras: Por seleccin de categora. Por bsqueda de palabra.

Bsqueda por seleccin de categora Este tipo de bsqueda ocurre cuando es cambiada algunas de las categoras, la funcin que es llamada es buscarCategoria(), este mtodo es declarado en nuestro controlador index.js, a continuacin podemos el cdigo de dicha funcin:

Imagen 18

14

En esta funcin lo que hacemos es recuperar el id de la categora seleccionada, este id es el valor que mandaremos como parmetro al archivo buscar_categorias.php (ver la Imagen 19), y este nos regresar un JSON, que podemos ver la forma en la que est formado en la Imagen 20.

Imagen 19

Imagen 20

En la funcin buscarCategoria() se declara la funcin $.ajax() que tiene configurado el parmetro success para llamar la funcin cargarResultados(), esta funcin se encargar de poner cada uno de los resultados de la bsqueda en pantalla, el cdigo de dicha funcin se ve en la Imagen 21.

Imagen 21

15

En la imagen anterior se ve que es llamada la funcin agregarResultado() es en dicha funcin donde se procesa la informacin de tal modo que sea agregada a nuestra pgina y le es dado un formato a cada uno de los registros, veamos la Imagen 22 para ver el cdigo:

Imagen 22

Es necesario notar que en los divs que se han agregado para mostrar los resultados por medio de las categoras a cada uno se le ha agregado una clase de estilo diferente por lo tanto es necesario especificar dichas clases en el archivo estilos.css, en las Imagen 23 podemos ver el cdigo nuevo en el CSS.

16

Imagen 23

En la siguiente imagen podemos ver en accin el resultado de una bsqueda al momento de cambiar una de las categoras:

17

Imagen 24

Bsqueda por palabras Esta bsqueda es realizada al momento de seleccionar el botn Buscar, y realizar una bsqueda de coincidencias de la(s) palabra(s) en los campos nombre o descripcion de la tabla producto. Cuando se da click al botn se solicita la ejecucin del mtodo enviarBusqueda(), ver Imagen 25:

Imagen 25

En este mtodo tambin es usada una llamada a la funcin $.ajax() de jQuery, est funcin hace una solicitud de datos en formato JSON al archivo buscar.php (el cdigo de dicho archivo lo vemos en la Imagen 26).

18

Imagen 26

El resultado de ejecutar una bsqueda en este archivo, es un JSON similar al que vemos en la Imagen 27.

Imagen 27

Los mtodos callback_error y cargarResultados que son llamados en los parmetros error y success de la funcin enviarBusqueda() ya fueron definidos en la seccin anterior (Bsqueda por seleccin, ver Imgenes 14 y 21 respectivamente), son usados de la misma manera, por lo tanto no los explicare, pero si veremos la Imagen 28 que contiene un ejemplo de cmo se vera realizar una bsqueda por alguna palabra en especfico.

Imagen 28

19

Al igual que las funciones que ya vimos en temas anteriores los estilos son los mismos que ya fueron definidos anteriormente (ver Imagen 23), adems se puede apreciar que cada resultado de la bsqueda est encapsulado en un DIV de la clase productoResultado. Cada fila tiene el nombre del producto, que al pulsar invoca la funcin detalle, el precio y un texto con apariencia de link que permite agregar el producto al canasto de compras, llamando a la funcin agregar. Ambas funciones todava no estn implementadas. Ntese que mediante CSS se le dio cursor:pointer tanto al nombre como al link de agregar, para dar al usuario la idea de que puede utilizar esas opciones.

Detalle de producto
Cuando se selecciona un producto del resultado de la bsqueda, la idea es que debajo aparezca el detalle de ella, que emule un sistema de ventanas estilo Outlook donde se observa la vista previa de un producto. Para ello se tena preparada la zona de Detalle. Lo que se debe hacer es, cuando se hace clic en un producto, ir a buscar sus datos completos y ubicarlos en esta zona. Veamos el cdigo que se agrega al index.js en la Imagen 29:

Imagen 29

Esta es la funcin que se manda a ejecutar al momento que hacemos click en el DIV que envuelve al nombre del producto, y cmo podemos ver se ejecuta una funcin $.ajax(), que manda ejecutar un script al servidor (producto.php) para obtener la informacin de un producto en especfico y regresa un JSON con el detalle completo de un producto, para poder leer esta informacin y poder mostrar el detalle completo del producto en pantalla es necesario declarar la funcin mostrarDetalle, a la cual podemos ver a detalle su cdigo en la Imagen 30.

20

Imagen 30

An falta definir el script de servidor producto.php, en la Imagen 31 tenemos el cdigo de dicho archivo.

Imagen 31

No olvidemos agregar la funcin ExecuteInnerQuery (ver Imagen 32) en el archivo funciones_mysql.php para que podamos ejecutar la consulta solicitada que nos aparece en la Imagen 31.

Imagen 32

Por ltimo solo queda agregar unos estilos CSS para el detalle del producto (ver Imagen 33)

21

Imagen 33

En la Imagen 34 podemos ver como se muestra el detalle de un producto en nuestra pgina web:

Imagen 34

Slo resta la funcionalidad del canasto de compras. Aqu se deben cumplir las funcionalidades siguientes: Incorporar productos que el usuario agrega desde las zonas de Resultados y Detalle. Aumentar o reducir la cantidad de un producto ya agregado. Eliminar un producto del canasto. Vaciar el canasto.

22

Mostrar el total por facturar. Permitirle al usuario finalizar la compra.

Todas estas funciones se van a resolver en la zona de Canasto. Adems, hay que decidir dnde almacenar el canasto como tal. Se va a crear un modelo de datos local en el cliente que almacene el canasto de compras. La estructura ser un vector que, en cada posicin, tenga un objeto con las propiedades: id, nombre, precio y cantidad. ste ser un objeto global llamado canasto. Ahora bien, si la funcin agregar slo recibe el id del producto que se desea incorporar, de dnde se obtiene su nombre y su precio? Parece lgico hacer una nueva peticin al servidor para ir a buscar esa informacin cuando en realidad ya estaba disponible con anterioridad cuando se trajo el resultado de la bsqueda. Para resolver este problema hay varias soluciones posibles: una de ellas es guardar en un vector tipo hash, tambin conocido como asociativo, todos los productos que se van leyendo desde resultados de bsqueda. Esto sera algo similar a una memoria cach de los productos que alguna vez pasaron por el resultado de bsqueda. Los vectores tipo hash mantienen como ndice cualquier valor alfanumrico. En este caso se puede utilizar el ID del producto como ndice y guardar un objeto con las propiedades nombre y precio adentro. Esto lo realizaremos en la funcin agregarResultado, y tambin declararemos una variable array global de nombre cacheProductos, todo este cdigo lo veremos en la Imagen 35 y los casos especficos estarn encerrados en un recuadro rojo.

23

Imagen 35

Agregando al canasto
Entonces, ahora se puede agregar la funcin agregar, esta funcin agregar los artculos al canasto y tambin declaramos el array global canasto, veamos la Imagen 36 para comprobar el cdigo de dicha funcin:

Imagen 36

24

La funcin realiza los siguientes pasos: 1) Busca primero si el producto agregado al canasto no se haba agregado ya. a) En caso positivo, lo que hace es utilizar la posicin encontrada en el canasto para aumentar la cantidad. b) En caso negativo, genera una entrada nueva en el canasto. i) Trae del hash global el producto buscado por ID. ii) Genera un objeto nuevo con los datos del producto y la cantidad en 1. iii) Agrega el objeto al array global canasto. 2) Llama la funcin que actualiza en pantalla al canasto. Mostrando el canasto Entonces lo nico que resta es genera la funcin que muestre el resultado en el canasto de compras. Se crea una funcin que recorre el vector del canasto y lo va dibujando sobre la pantalla (actualizarCanasto, Imagen 37), y otra que dibuja el total (generarFilaTotal, Imagen 38), y tambin se crean los estilos que sern necesarios para darle el formato adecuado al canasto (Imagen 39).

Imagen 37

Imagen 38

25

Imagen 39

Ya se puede ver cmo quedo el canasto de compras. Ntese que si se agrega un producto ms de una vez, en lugar de sumarse una fila nueva se le cambia la cantidad al producto ms de una vez, en lugar de sumarse una fila nueva se le cambia la cantidad al producto agregado con anterioridad (Imgenes 40 y 41).

Imagen 40

26

Imagen 41

Quitando del canasto

Ahora queda implementar las funciones de quitar y vaciar, que eliminan un producto en particular o todos a la vez, respectivamente. La funcin de finalizar la compra se dej para ms adelante. Para quitar un elemento de un vector se utiliza la funcin splice que incorpora la librera jQuery a todos los arrays (Imagen 42).

Imagen 42

Al quitar todos los productos o vaciar todo el canasto, se observa la leyenda que indica que no hay productos en el canasto (Imagen 43).

27

Imagen 43

Modificando cantidades
Hasta ahora slo se puede modificar la cantidad de un producto dado buscndolo por categora o nombre y agregando una cantidad de nuevo, y no es posible disminuir la cantidad. Solo quitar todo el producto en cuestin. Falta la posibilidad de modificar la cantidad de un producto ya agregado en el canasto. Para ello hay varias metodologas. Una sera implementar un editor en el mismo lugar. Otra de las soluciones sera incluir dos imgenes (flecha arriba y flecha abajo) que permitan aumentar o disminuir los valores junto a cada cantidad. Se implementar esta opcin utilizando dos archivos PNG para cada flecha: uparrow.png y downarrow.png. Lo que se hace, entonces, es modificar el cdigo de la funcin actualizarCanasto() con el cdigo siguiente:

28

Imagen 44

As mismo, se agregan las dos funciones para subir y bajar la cantidad (Imagen 45).

Imagen 45

Para la funcin subir reutilizamos la funcin agregar(), pero en el caso de la funcin bajar ser necesario crear una nueva funcin que se encargue de restar un elemento del producto seleccionado, en la Imagen 46 podemos ver el cdigo de esta funcin:

29

Imagen 46

En la Imagen 47 podemos ver el resultado de esta nueva modificacin.

Imagen 47

Agregando un carrusel de imgenes esttico

Es muy comn que en las pginas web aparezcan una serie de imgenes (carrusel) y estas imgenes pueden cambiar de forma automtica o pueden cambiar cada vez que el usuario lo quiera, otra opcin es que puede cambiar la lista de imgenes variando dependiendo de ciertas condiciones o cmo ser en nuestro caso ser una lista de imgenes esttica. Para facilitar el trabajo utilizaremos un plugin basado en jQuery (no es necesario reinventar la rueda), el plugin que utilizaremos ser el de esta pgina http://caroufredsel.dev7studios.com/ y para descargarlo este es el enlace: http://dev7studios.com/downloads/64. Procederemos ahora a configurar nuestro proyecto.

30

1. Del archivo descargado (carouFredSel-6.2.0.zip), solo utilizaremos los archivos jquery.carouFredSel-6.2.0-packed.js y jquery.carouFredSel-6.2.0.js, estos archivos los copiamos a la carpeta lib de nuestro proyecto:

Imagen 48

2. Ahora agregamos los scripts a la seccin head de nuestra pgina en dnde queremos que sea visto el carrusel en nuestro caso ser en index.php:

Imagen 49

3. Ahora ser necesario agregar las imgenes que deseamos que aparezcan en nuestro carrusel, dichas imgenes las colocaremos en una carpeta que se llama imagenes. 4. Para que se pueda ver el carrusel ser necesario agregar el cdigo de la Imagen 50 (que est encerrado en el recuadro rojo), este cdigo ser agregado en el div con id resultados. Nota: Tomemos en cuenta que el cdigo necesario u obligatorio es el que se encuentra dentro del recuadro rojo y este ser requerido en el caso de que se desee agregar un carrusel en nuestro proyecto, lo que puede cambiar son los nombres y la cantidad de imgenes que deseamos que aparezcan en nuestro carrusel.

Imagen 50

31

5. Bueno ahora ser necesario agregar los estilos necesarios al archivo estilos.css en la Imagen 51 podemos ver las reglas necesarias para nuestro carrusel.

Imagen 51

32

6. Ahora el cdigo jQuery para configurar y hacer funcionar el carrusel, este lo veremos en la imagen 52, dicho cdigo debe de estar ubicado en el cdigo de inicio de jQuery.

Imagen 52

Una vez que hemos agregado y hecho todas las modificaciones anteriores el resultado de se ver en la Imagen 53.

Imagen 53

Finalizando la compra
Ahora le toca el turno a la finalizacin de la compra. Se haba colocado el botn de Finalizar, pero que por el momento no haca nada. Lo primero que se debe hacer es agregarle comportamiento, esto se agrega en la funcin actualizarCanasto(), se agrega el cdigo que est en el recuadro rojo de la Imagen 54, este cdigo va hasta el final de la funcin antes de cerrar.

33

Imagen 54

El paso siguiente es armar el formulario con XHTML y CSS en el div que se haba quedado originalmente vaco, dicho div es el que tiene el id=finalizacin

Imagen 55

Agregar el siguiente cdigo al CSS:

Imagen 56

34

Ahora es necesario agregar el cdigo de inicializacin y/o configuracin de nuestro dialogo de registro de la compra para esto utilizaremos la funcin .dialog(), este cdigo se agrega a la funcin de inicio de jQuery, en la Imagen 57 vemos el cdigo.

Imagen 57

El resultado ahora es lo que vemos en la Imagen 57.

Imagen 58

Lo siguiente que haremos ser dar la funcionalidad al botn Crear un pedido el botn Cancelar ya tiene definida su funcionalidad (ver la Imagen 57), lo que modificaremos ser la configuracin de la funcin dialog() y el cdigo que agregaremos lo vemos en la Imagen 59 dentro del recuadro rojo:

35

Imagen 59

Como se ve en el cdigo de la Imagen 59 en la seccin de configuracin de la funcin $.ajax() se utiliza un archivo enviar.php que es donde se hace la insercin de los registros del pedido, dicho cdigo se ve en la Imagen 60.

Imagen 60

36

Para poder realizar de forma adecuada la insercin es necesario agregar la funcin InsertPedido en el archivo funciones_mysql.php, este cdigo se puede ver en la Imagen 61.

Imagen 61

37