Pedir presupuesto

Carrito de compra en PHP, MySql y forma de pago Paypal (Parte 5.1: Scripts necesarios para un carro de compra en PHP y MySQL)

Comenzamos la parte que seguro todos estabais esperando, nos adentramos en el código de un carrito de compras con PHP y MySQL.

Un carrito de compra funciona básicamente de la siguiente forma:

  1. El usuario entra en la web y se crea una sesión nueva.
  2. El usuario añade un producto al carro de la compra.
  3. Una página PHP recibe los datos y lo almacena en variables de sesión.
  4. PHP redirecciona a otra página que muestra los datos del carro al Usuario dándole la opción de seguir comprando o bien realizar la compra.
  5. Una vez el usuario está conforme con el carro de la compra y la cantidad de productos, realiza la compra.

Iremos viendo esta 5ª entrega del tutorial en distintas partes para que no se haga pesado y se concentre todo en un mismo POST.

Diseño y estructura en el código de la interfaz

Vamos a dar una breve explicación de cómo estructuraremos la página donde mostraremos los productos, la cual la construiremos de manera modular al igual que todo el resto de la interfaz, ¿Y esto que significa?, pues para que me entendáis, vamos a dividir la página en 9 archivos distintos para tener un código más usable y no tener que repetir las mismas líneas en cada una de las páginas, siendo más fácil su modificación.

La interfaz se compondrá de los siguientes archivos:

  • main.css: Hoja de estilos de la página.
  • conecta.php: Nos conecta con la base de datos. Este archivo tenéis que modificarlo según vuestros datos de acceso «host», «user», «pass».
  • meta_tags.php: Incluye las etiquetas de inicio de html, meta tags y enlaces a las hojas de estilo.
  • cabecera.php: Parte superior de la web, con el título y lo que se quiere añadir
  • izquierda.php: En nuestro tutorial no lo usaremos, aunque no lo descarto para una futura versión ampliada del mismo, en el que crearemos un diseño algo más elaborado.
  • pie.php: Incluye la parte del CopyRight o cualquier cosa que se quiera poner fuera del cuerpo.
  • cierra_tags.php: Como su nombre indica, cerramos las etiquetas body y html
  • productos.php: Una de las páginas más importante del tutorial donde se muestran todos los productos que vamos a «vender».
  • carro.php: Esta página mostrará la cesta de la compra y podremos aumentar y disminuir la cantidad de productos.

Os voy a dejar un archivo llamado «carroCompras.rar» en el que está la base de la interfaz, la cual iréis modificando según vayamos avanzando en el tutorial, para ello hacer clic en el siguiente enlace:

Archivos carro de compra

Como habréis podido observar el diseño no es el fuerte de este carro de compras, de lo que se trata en este tutorial es de tener unos conocimientos básicos de PHP sobre este tema para después poder ir ampliándolo a vuestro antojo.

Una vez disponemos de nuestra base de archivos, vamos a empezar a codificar nuestro carro de la compra:

productos.php

En esta página se mostrarán los productos que hayamos dado de alta en la tabla “productos”. Para el tutorial, hemos dado de alta unos cuantos y aquí tenéis el código para que vosotros también podáis incluirlos en vuestra base de datos. (importar estas líneas de código en la paret SQL de phpmyadmin)

[mysql]
INSERT INTO `productos` VALUES (1, ‘Diseño Web Estática’, 850.00);
INSERT INTO `productos` VALUES (2, ‘Desarrollo CMS PHP y MySql’, 2150.00);
INSERT INTO `productos` VALUES (3, ‘Diseño Logo’, 210.00);
INSERT INTO `productos` VALUES (4, ‘Diseño Web (PSD)’, 540.00);
INSERT INTO `productos` VALUES (5, ‘Formulario de Contacto’, 52.00);
INSERT INTO `productos` VALUES (6, ‘Registro de Usuarios’, 42.00);
INSERT INTO `productos` VALUES (7, ‘Animación Flash’, 120.00);
INSERT INTO `productos` VALUES (8, ‘Carrito de Compra’, 590.00);
INSERT INTO `productos` VALUES (9, ‘Alojamiento Web’, 34.00);
INSERT INTO `productos` VALUES (10, ‘Dominio’, 9.00);
[/mysql]

Ahora que tenemos los registros necesarios, es hora de mostrarlos en nuestra página de productos.

¿Qué necesitamos en este archivo?

  1. Iniciamos sesión
  2. Conectar con nuestra base de datos
  3. Acceder a la tabla productos y seleccionarlos
  4. Mostrar tabla con Productos, Precio

La página debe quedar como os presento en esta imagen (Clic para ampliar):

Productos carrito de compra

Si habéis descargado los archivos de la interfaz, es hora de abrir «productos.php» porque vamos a añadir algunas líenas.

Para empezar, lo primero que tenemos que hacer es iniciar sesión, asi que antes de definir la variable $titulo, pondremos lo siguiente:

[php]
//Iniciamos sesión o continuamos la que ya exista
session_start();
[/php]

Algunos estaréis pensando ¿Qué es una sesión en PHP?, pues a pesar de lo que podáis pensar, no es una serie de temas unidos creados por un DJ (bromas a parte). Cuando hablamos de sesión en PHP hablamos de un entorno que consiste en controlar el acceso individual a una página o grupo de páginas por medio de un identificador único por visitante/usuario.

Para que me entendáis, imaginaros que no existieran las sesiones ni las cookies (otra forma de hacerlo, pero que no aconsejo pues hay navegadores que lo tienen desactivado) y entráis en una tienda virtual como puede ser la de Nike. Si nos vamos a la zona de productos y añadimos un producto para después seguir navegando por la web y buscar otro, cuando queramos añadir un segundo producto, al no tener sesiones activas en el sistema, no podrá recordar los productos que ya hemos elegido con anterioridad, perdiendo así los datos.

Por tanto el uso de sesiones es imprescindible para montar una carrito de compra online.

Una vez que conocemos para que sirven las sesiones, vamos a ver como se almacenarán los datos en las variables de sesión.

Crearemos un array bidimensional para almacenar el producto y la cantidad, de todos los productos que se vayan añadiendo al carrito de la compra. Para hacernos una idea más gráfica lo plasmaremos en una tabla:

INDICE PRODUCTO (id) CANTIDAD
0 10 1
1 8 3
2 4 1

Si aun así no os aclaráis os muestro una imagen de ejemplo de nuestra aplicación que seguro os hará entenderlo:

Sesiones en PHP

Si os fijáis en la cesta de la compra del ejemplo de la imagen de arriba hay 2 productos, en concreto se han añadido a la cesta 3 “Desarrollos CMS PHP y mySQL” y 5 Diseños Web (PSD). En el array que os muestro, se ve claramente el ID del producto y su cantidad, que es con lo que vamos a “jugar” en todo momento dentro de nuestros archivos «prodcutos.php» y «carro.php«.

Después de esta pequeña explicación sobre sesiones en PHP y cómo utilizarlas en nuestra aplicación, vamos a seguir con el código.

Una vez que tenemos nuestra sesión iniciada, tenemos que mostrar los productos en nuestra página, así que hay que conectar nuestro archivo PHP con la tabla de productos. Esto se consigue gracias al archivo que hemos incluido «conecta.php» (acordaros de poner vuestras credenciales), lo único que nos faltará será definir la sentencia SQL que nos devolverá lo que queremos:

[php]
//Sentencia SQL para obtener los productos de la tabla prodcuto
$resultado = mysql_query(«SELECT id, producto, precio FROM productos»);
[/php]

Bien, ya hemos definido la sentencia, la cual sólo recoge los campos id, producto y precio (utilizar «SELECT *» en este caso es una manera absurda de sobrecargar nuestra base de datos, ya que los demás campos no nos hacen falta para nada), ahora quedaría mostrarlos por pantalla.

Como hay más de un registro en la tabla productos tendremos que hacer uso de un bucle como puede ser la sentencia «while«, asi que justo después de definir las cabeceras de la tabla (que ya tenemos en el archivo que hemos descagado), vamos a realizar dicho bucle de la siguiente manera:

[php]
// comienza un bucle que leera todos los registros y ejecutara las ordenes que siguen
while ($productos = mysql_fetch_array($resultado)) {
echo «

» . $productos[‘id’] . «

«; // id del producto que no se verá por pantalla
echo «

» . $productos[‘producto’] . «

«; // imprime el nombre del producto
echo «

» . $productos[‘precio’] . » €

«; // imprime el precio
echo «


Añadir al carrito

«;
echo «

«;
} // fin del bucle de ordenes
[/php]

Aquí tenemos bastantes cosas que explicar. Como veis el bucle recorrerá uno por uno los registros que se han recogido de la sentencia SQL guardándolos en un array que hemos llamado «$productos«. Cada uno de los campos se guardará en el array tal y como lo hemos nombrado en la sentencia SQL, es decir, cada registro se guardará en las siguientes variables del array:

  • $productos[‘id’]
  • $productos[‘producto’]
  • $productos[‘precio’]

Una vez tenemos impreso el id (aunque este lo hacemos invisible al navegador gracias al estilo display:none), el nombre del producto y el precio, falta por asignar en enlace en forma de imagen donde el usuario hará clic para añadir o eliminar de la cesta según ya lo haya añadido o no.

Como podéis apreciar en el enlace que generamos, vamos a pasarle a la página «carro.php» un enlace con la siguiente estructura:

Ejemplo: carro.php?id=2&action=add

Este enlace lo que hace es pasarle el id del producto (en el caso del ejemplo sería el 2) y como variable acción el valor add, con lo cual le estamos diciendo al archivo carro.php, que añada a la cesta el producto número 2 (id=2 de la tabla productos).

Con esto ya tenemos el archivo «productos.php» casi completo, acordaros que faltaría añadir la funcionalidad para que muestre un icono de añadir o un icono de eliminar según si se haya añadido o no el producto en la cesta.

En la próxima parte del tutorial (5.2) explicaremos el archivo «carro.php» y ya sabéis que podéis hacer cualquier pregunta al respecto e intentaré respondérosla lo más pronto posible.

Guía Carrito de Compra en Php con forma de pago Paypal

¿Te ha gustado?, Comparte!!

Compartir en facebook
Compartir en twitter
Compartir en linkedin
Compartir en whatsapp
Compartir en email

23 comentarios

    1. erick, primero quiero acabar el tutorial haciendolo solo con PHP, pero en una futura ampliación del tutorial no lo descarto, ya que no es la primera vez que me lo preguntan.. saludos.

  1. Hola a todos! estoy siguiendo el tutorial con muchas ganas, pero me e quedado atascado en un error en la pagina productlos…..
    Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in C:\AppServ\www\tienda\productos.php on line 47

    y no me muestra nada… alguien sabe donde puede estar el fallo???

    Saludos!!!!

    1. Josele, tendrías que poner por lo menos algo de código para saber donde puede estar el fallo.
      Sería bueno que pegaras el código de la SELECT que le eche un vistazo. Te aconsejo que con esa misma select que tienes en PHP te vayas a tu base de datos en PhpMyAdmin y en la pestaña SQL lo pegues, a ver si está bien definida la query.

  2. Tienes algún producto añadido en la tabla «productos»?….

    Mira bien los datos de conexión si son los buenos, es decir,

    [php]

    [/php]

    Si no ves el error mirando esta conexión pásame los archivos por mail. (me envias un mail desde contacto).

    Vigila que esas variables en la pagina conectar.php tienen los datos correctos de tu servidor.

  3. hola admin! e revisado el codigo y esta todo bien, tambien e probado directamente usando el codigo que pones en la descarga del 5.2 y me hace exactamente lo mismo…. no se donde esta el problema…

    Saludos!

  4. Asi la verdad es que es algo dificil, si quieres enviarme los archivos los reviso. Con los detalles que me has dado no puedo hacer mucho.

    TIene que haber algo mal en la consulta o en los datos de conexión.. no se ..

  5. Hola, hay una cosa que no me acaba de quedar clara. Cuando apretamos el enlace «añadir al carro»pasamos en el enlace la variable con el valor id del producto, pero no pasamos ningún valor a la sesión?, quiero decir, no debería haber un código de este estilo?:$_SESSION[‘carro’][‘id’]=$productos[‘id’].
    Un saludo y gran trabajo.

  6. Buen dia, Admin, estaba analizando tu tutorial, en la tabla de «Productos» de la base datos de que descargue del blog «colorate_paypal» la tabla mencionada tiene 5 campos: id_producto nombre descripcion precio foto Y en el inset de la imagen que tienes en la parte de arriba nada mas insertas tres campos el cual no existen en la table de productos. Que pasa o acaso no lo estoy haciendo bien estaba siguiendo tu tuto paso a paso. De ante mano gracias!!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¡Pide tu presupuesto!

Completa los campos para poder enviarte un presupuesto

Todos y tu presupuesto son a medida y totalmente personalizados, entendemos que dos proyectos online no pueden ser iguales y que cada cliente tiene unos objetivos y necesidades muy diferentes, es por eso que para elaborar un presupuesto, necesitamos saber de ti, tu proyecto y objetivos.

Los campos marcados con (*) son obligatorios.

La comunicación enviada quedará incorporada a un fichero del que es responsable COLORDEU. Esta comunicación se utilizará exclusivamente para tratar sus datos para atender su solicitud, siempre de acuerdo al Reglamento (UE) 2016/679 (RGPD), la Ley Orgánica 15/1999 (LOPD) y el Real Decreto 1720/2007 de desarrollo de la LOPD), sobre protección de datos. Sus datos no se comunicarán a terceros, excepto por obligación legal, y se mantendrán mientras no solicite su cancelación. En cualquier momento usted puede ejercer los derechos de acceso, rectificación, portabilidad y oposición, o si procede, a la limitación y/o cancelación del tratamiento, comunicándolo por escrito, indicando sus datos personales mediante un email a hola@colordeu.es