Advertisement
  1. Code
  2. PHP

Construyendo un Carro de Compras con PHP y MySQL

by
Read Time:14 minsLanguages:

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

Para la presentación en vídeo + el tutorial de esta semana, vamos a enseñarle a cómo construir su propio carro de compras con PHP y MySQL. Encontrará que no es tan difícil como podría haber pensado.


Vista previa del grabación.



Paso 1

Vamos a comenzar echando un vistazo a la estructura de la carpeta:


Estructura

  • reset.css - usted puede conseguir el archivo reset desde éste enlace.
  • style.css - nuestro propio archivo css que estaremos usando para aplicar un diseño a nuestro documento HTML.
  • connection.php - éste es el archivo que hará la conexión de nuestra base de datos.
  • index.php - la plantilla para nuestro carro de compras.
  • cart.php - el archivo donde cambiaremos nuestros productos desde el carro (añadir, eliminar).
  • products.php - los productos registrados en la página.

Paso 2

Empezaremos escribiendo el marcado del documento html y luego le aplicaremos estilo. Así que abra el archivo index.php y después copia/pegar el código siguiente:

Como puede ver, nuestra página tiene dos columnas: la columna principal y la barra lateral. Continuemos con el archivo CSS. Abra el archivo style.css y escriba el siguiente código:

A continuación veremos cómo debería de verse nuestra página de productos hasta ahora:



Grabación digital completa



Paso 3

Antes de seguir adelante hasta la parte PHP/MySQL, necesitamos crear la base de datos. Así que abra phpMyadmin y siga estos pasos:

  1. Diríjase a la pestaña Privilegios, haga clic sobre el botón añadir usuario nuevo y use el siguiente ajuste: Username : tutorial; Host: localhost; Password: supersecretpassword. Ahora, asegúrese de que los privilegios Global están configurados, luego siga hacia el siguiente paso.
  2. Crear una nueva base de datos llamada tutorials.
  3. Crear una nueva tabla llamada products y ajuste el número de campos a 4. Ahora, complete estos campos de manera que tenga: id_integer - asegúrese de que está ajustado a INT y marque éste campo como PRIMARY (además, configure éste campo como auto_increment); name - hágalo de tipo VARCHAR con una longitud de 100; description - también de tipo VARCHAR con una longitud d 250; price - asegúrese de que está configurado como DECIMAL(2,6).  
  4. Rellene su tabla con algunas muestras de productos

Para ahorrar tiempo, he exportado mi tabla de productos para que pueda simplemente ejecutar la siguiente consulta:





Paso 4

Antes de empezar a extraer datos desde la base de datos, haré mi index.php una plantilla para la lista de productos y el carro de compras. Así que añada el siguiente código en la parte superior de su página index.php:

  1. session_start() - esto es para usarlo más adelante, de hecho, nos permitirá usar sesiones (es vital que session_start esté escrito antes de que cualquier otro dato sea enviado al navegador).
  2. En la segunda línea, incluimos connection.php que establecerá la conexión a la base de datos (abordaremos esto en un momento). Una cosa más: la diferencia entre include y require es que si usted usa require y el archivo no puede ser encontrado, entonces la ejecución del código terminará. Por otro lado, si usted usa "include", entonces el código continuará funcionando.
  3. En lugar de copiar el código html por completo (el enlace hacia el css y hacia js) para cada archivo en su archivo, usted podría hacer que relativamente todos estén en un solo archivo. Así que primero, voy a revisar si hay una variable GET llamada "page set".  Si no está, voy a crear una variable nueva llamada _pages. Si la variable GET llamada pages ésta de primero, yo quiero asegurarme que el siguiente archivo el cual voy a incluir es una página valida.

Para hacer esto, necesitamos incluir el archivo, añadir esta línea en el archivo index.php entre el div con el id de "main".

Ahora, aquí está el archivo completo index.php que tenemos hasta ahora:


Vamos a crear la conexión con MySQL. Abra el archivo connections.php y escriba lo siguiente:


Paso 5

Ahora es el momento de escribir el marcado html para la página de productos. Así que abra el archivo y escriba lo siguiente:

Vamos a echar un vistazo a la página:


Como puede ver está horrible. Así que vamos aplicar algunos estilos añadiendo el archivo extra CSS.

OK: ahora vamos a echar otro vistazo:


Se ve mucho mejor, ¿no lo cree? A continuación tiene el código style.css completo:


Paso 6

Antes de extraer el producto desde la base de datos, vamos a eliminar los dos últimas filas de nuestra tabla (las utilizamos para ver cómo se miraba nuestra tabla). Quite esto:

¡Estupendo! Ahora, en el lugar donde estaban las filas de la tabla, escriba el siguiente código PHP:

  1. Por lo tanto, primero usamos SELECT para sacar los productos, luego revisamos cada fila de la base de datos y usamos el método echo para mostrarlas en la página en una fila de una tabla.
  2. Puede ver que los enlaces de anclaje llevan hacia la misma página (cuando el usuario hace clic sobre el enlace del producto, éste es añadido al carrito/sesión). Solamente pasamos algunas variable extras como el id del producto.

Si usted pasa el mouse sobre uno de los productos agregados a los enlaces del carro de compras, usted podrá ver al fondo de la página, que el id del producto fue pasado.



Paso 7

Hagamos que funcionen las etiquetas de anclaje añadiendo el siguiente código arriba de nuestra página:

  1. Si la variable GET llamada action está configurada y su valor es ADD, entonces ejecutamos el código.
  2. Nos aseguramos que el id pasao a través de la variable GET es de un valor integer.
  3. Si el id del producto está en la carro de compras SESSION, entonces solamente incrementamos la cantidad por 1.
  4. Si el id no está en la sesión, necesitamos asegurarnos que el id pasado a través de la variable GET existe en la base de datos. Si lo hace, agarramos el precio y creamos esta sesión. Si no lo hace, ajustamos la variable llamada mensaje que mantendrá nuestro error.

Vamos a revisar si esa variable message está ajustada y si puede mostrarse en la página a través de echo (escriba éste código debajo del título de la página, es decir, debajo de la etiqueta h1).

Aquí puede ver la página completa products.php.

Aquí está el mensaje de error si el id del producto no es válido.



Paso 8

Vamos a regresar el archivo index.php y a construir la barra lateral. Añada el siguiente código:

  1. Primero, revisamos si la sesión del carro de compras está configurada. Si no lo está, mostramos el mensaje, mostrando una alerta al usuario de que el carro de compras está vacío.
  2. Luego, hacemos un mysql SELECT, pero estamos seleccionando solamente el producto que existe en la sesión. Para lograr esto, usamos la función foreach. Así que estamos bucleando a través de la sesión y añadiendo el id del producto al SELECT. Después, vamos a usar la función substr para quitar la última coma desde el SELECT.
  3. Al final, cargamos los datos al navegador.

Eche un vistazo a las siguientes imágenes:



Ya que el archivo index.php es una plantilla para todos los archivos, la barra lateral, también estará visible en el archivo cart.php ¡¿No es tan bueno?!


Paso 9

Finalmente, abra el archivo cart.php y empiece escribiendo el siguiente código:

El código es parecido al del archivo index.php y products.php, así que no voy a explicar todo nuevamente. Debería notar que en lugar de mostrar la cantidad un un formulario, ahora está presentada en una caja entrada (para que podamos cambiar la cantidad). Además, la tabla está envuelta en una etiqueta form. Para conseguir el precio total de los artículos, vamos a multiplicar la cantidad de de los id de productos específicos (desde la sesión) con su precio. Esto se hace en cada ciclo.

NOTA: El input es un arreglo la key es el id del producto y la cantidad es el valor de cantidad.



Paso 10

Lo último que necesitamos hacer es hacer que el formulario funcione. Así que añada este código arriba de la página cart.php

  1. Primero, revise si el formulario fue enviado. Si éste fue enviado y el valor del input fue cero, entonces desconecte esa sesión.
  2. Si es cualquier otro valor, ajustamos al cantidad en lugar del valor.

Aquí está el código completo para el archivo cart.php


Espero que haya disfrutado este tutorial. Si tiene algunas preguntas, ¡asegúrese de mirar el vídeo del tutorial!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.