Tutorial Como Crear un Carro de Compras con PHP y MySQL Carro de compras en PHP

Nuestro objetivo es construir un carro de compras muy simple para ver su funcionamiento. Luego, cada uno de ustedes podr adaptarlo a sus necesidades y/o mejorarlo para que sea ms cmodo para el usuario. Pueden ver el ejemplo en marcha de lo que vamos a hacer aqu. Antes de empezar veremos, de manera resumida, para qu se utilizan las sesiones: Las sesiones nos permiten registrar un nmero arbitrario de variables que se conservan durante toda la visita de un usuario a una pgina web. Dichas variables pueden ser diferentes para cada usuario, ya que estn referenciadas por un identificador nico que se le asigna a cada visitante. En otras palabras, una sesin es una manera de almacenar variables de manera temporal, semejante a una cookie, pero con ciertas diferencias: las cookies se almacenan en la PC del usuario y pueden desactivarse; las sesiones, en cambio, se almacenan temporalmente en el servidor, en un fichero que se crea en el momento en que almacenamos la variable. Sabiendo esto, ya estamos en condiciones de entender cmo va a funcionar nuestro carro de compras. Primero crearemos en mysql una tabla para nuestro catlogo de artculos: create table catalogo (id int not null auto_increment primary key,producto varchar(1 00),precio decimal(9,2)) Tambin vamos a necesitar algunas imgenes para ayudar visualmente al usuario que va a utilizar nuestro carrito (en el ejemplo vamos a utilizar estas, luego cada uno las reemplaza por las que quiera): Imagen de producto no agregado al carrito: productonoagregado.gif Imagen de producto agregado: productoagregado.gif Botn para eliminar un producto del carrito:trash.gif Botn para actualizar las cantidades de un producto agregado: actualizar.gif Botn para continuar la seleccin de artculos: continuar.gif Botn para ver el contenido del carrito: vercarrito.gif

Con estos elementos, podemos crear el archivo agregacar.php, que nos servir para introducir productos dentro del carro (y para modificar sus cantidades) y que contendr el siguiente cdigo:
<?php session_start(); //con session_start() creamos la sesin //si no existe o la retomamos si ya ha //sido creada extract($_REQUEST); //la funcin extract toma las claves //de una matriz asoiativa y las //convierte en nombres de variable, //asignndoles a esas variables //valores iguales a los que tena //asociados en la matriz. Es decir, //convierte a $_GET['id'] en $id, //sin que tengamos que tomarnos el //trabajo de escribir //$id=$_GET['id']; mysql_connect("localhost","usuario","password"); mysql_select_db("db"); //inclumos la conexin a nuestra //base de datos if(!isset($cantidad)){$cantidad=1;} //Como tambin vamos a usar este //archivo para actualizar las //cantidades, hacemos que cuando //la misma no est indicada sea //igual a 1 $qry=mysql_query("select * from catalogo where id='".$id."'"); $row=mysql_fetch_array($qry); //Si ya hemos introducido algn //producto en el carro lo //tendremos guardado temporalmente //en el array superglobal //$_SESSION['carro'], de manera //que rescatamos los valores de //dicho array y se los asignamos //a la variable $carro, previa //comprobacin con isset de que //$_SESSION['carro'] ya haya sido //definida if(isset($_SESSION['carro'])) $carro=$_SESSION['carro']; //Ahora introducimos el nuevo //producto en la matriz $carro, //utilizando como ndice el id //del producto en cuestin, //encriptado con md5. //Utilizamos md5 porque genera //un valor alfanumrico que luego, //cuando busquemos un producto //en particular dentro de la

//matriz, no podr ser confundido //con la posicin que ocupa dentro //de dicha matriz, como podra //ocurrir si fuera slo numrico. //Cabe aclarar que si el producto //ya haba sido agregado antes, //los nuevos valores que le //asignemos reemplazarn a los //viejos. //Al mismo tiempo, y no porque //sea estrictamente necesario //sino a modo de ejemplo, //guardamos ms de un valor en //la variable $carro, valindonos //de nuevo de la herramienta array. $carro[md5($id)]=array('identificador'=>md5($id), 'cantidad'=>$cantidad,'producto'=>$row['producto'], 'precio'=>$row['precio'],'id'=>$id); //Ahora dentro de la sesin //($_SESSION['carro']) tenemos //slo los valores que tenamos //(si es que tenamos alguno) //antes de ingresar a esta pgina //y en la variable $carro tenemos //esos mismos valores ms el que //acabamos de sumar. De manera que //tenemos que actualizar (reemplazar) //la variable de sesin por la //variable $carro. $_SESSION['carro']=$carro; //Y volvemos a nuestro catlogo de //artculos. La cadena SID representa //al identificador de la sesin, que, //dependiendo de la configuracin del //servidor y de si el usuario tiene //o no activadas las cookies puede //no ser necesario pasarla por la url. //Pero para que nuestro carro funcione, //independientemente de esos factores, //conviene escribirla siempre. header("Location:catalogo.php?".SID); ?>
Maximizar Seleccionar SQL,PHP

Luego creamos el archivo borracar.php, que nos permitir eliminar artculos que hayamos ingresado:

000 001 002 003 004

<?php session_start(); //con session_start() //creamos la sesin si //no existe o la retomamos

005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 025 026 027 028 029

//si ya ha sido creada extract($_GET); //Como antes, usamos //extract() por comodidad, //pero podemos no hacerlo //tranquilamente $carro=$_SESSION['carro']; //Asignamos a la variable //$carro los valores //guardados en la sessin unset($carro[md5($id)]); //la funcin unset borra //el elemento de un array //que le pasemos por //parmetro. En este caso //la usamos para borrar el //elemento cuyo id le pasemos //a la pgina por la url $_SESSION['carro']=$carro; //Finalmente, actualizamos //la sessin, como hicimos //cuando agregamos un producto //y volvemos al catlogo header("Location:catalogo.php?".SID); ?>
Maximizar Seleccionar PHP

Luego creamos nuestro catlogo de productos, el archivo catalogo.php:

00 0 00 1 00 2 00 3 00 4 00 5 00 6 00 7 00 8 00 9 01 0 01

<?php ob_start("ob_gzhandler"); //Las funciones ob_start y //ob_end_flush te permiten //escojer en qu momento //enviar el resultado de un //script al navegador. Si //no las utilizamos estamos //obligados a que nuestra //primera lnea de cdigo //sea session_start() u //obtendremos un error session_start(); //conectamos a la base de //datos mysql_connect("localhost","usuario","password"); mysql_select_db("db"); //rescatamos los valores //guardados en la variable de //sesin (si es que hay alguno, // cosa que comprobamos con isset) //y los asignamos a $carro. //Si no existen valores, ponemos a false

1 01 2 01 3 01 4 01 5 01 6 01 7 01 8 01 9 02 0 02 1 02 2 02 3 02 4 02 5 02 6 02 7 02 8 02 9 03 0 03 1 03 2 03 3 03 4 03 5 03 6 03 7 03 8 03

//el valor de $carro if(isset($_SESSION['carro'])) $carro=$_SESSION['carro'];else $carro=false; //y hacemos la consulta $qry=mysql_query("select * from catalogo order by producto asc"); ?> <html> <head> <title>CATLOGO</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-.catalogo { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #333333; } --> </style> </head> <body> <table width="272" align="center" cellpadding="0" cellspacing="0" style="border: 1px solid #000000;"> <tr valign="middle" bordercolor="#FFFFFF" bgcolor="#DFDFDF" class="catalogo"> <td width="170"><strong>Producto</strong></td> <td width="77"><strong>Precio</strong></td> <td width="25" align="right"><a href="vercarrito.php?<?php echo SID ?>" title="Ver el contenido del carrito"> <img src="vercarrito.gif" width="25" height="21" border="0"></a></td> </tr> <?php //mostramos todos nuestros //artculos, viendo si han //sido agregados o no a nuestro //carro de compra while($row=mysql_fetch_assoc($qry)){ ?> <tr valign="middle" class="catalogo"> <td><?php echo $row['producto'] ?></td> <td><?php echo $row['precio'] ?></td> <td align="center"> <?php if(!$carro || !isset($carro[md5($row['id'])]['identificador']) || $carro[md5($row['id'])]['identificador']!= md5($row['id'])){ //si el producto no ha sido //agregado, mostramos la imagen //de no agregado, linkeada //a nuestra pgina de agregar //producto y transmitndole a //dicha pgina el id del artculo //y el identificador de la sesin ?> <a href="agregacar.php?<?php echo SID ?>&id=<?php echo $row['id']; ?>"> <img src="productonoagregado.gif" border="0" title="Agregar al Carrito"></a><?php }else //en caso contrario mostramos la

9 04 0 04 1 04 2 04 3 04 4 04 5 04 6 04 7 04 8 04 9 05 0 05 1 05 2 05 3 05 4 05 5 05 6 05 7 05 8 05 9 06 0 06 1 06 2 06 3 06 4 06 5 06 6 06

//otra imagen linkeada., a la //pgina que sirve para borrar el //artculo del carro. {?><a href="borracar.php?<?php echo SID ?>&id=<?php echo $row['id']; ?>"> <img src="productoagregado.gif" border="0" title="Quitar del Carrito"></a><?php } ?></td> </tr><?php } ?> </table> </body> </html> <?php ob_end_flush(); ?>
Maximizar Seleccionar CSS,SQL,XML,PHP

7 06 8 06 9 07 0 07 1 07 2 07 3 07 4 07 5 07 6 07 7 07 8 07 9 08 0 08 1 08 2 08 3 08 4 08 5 08 6

Y por ltimo el archivo en el que mostramos el contenido del carro, llamado vercarrito.php:
00 <?php 0 session_start(); 00 //Iniciamos o retomamos la 1 //sesin 00 if(isset($_SESSION['carro'])) 2 $carro=$_SESSION['carro'];else $carro=false; 00 //La asignamos a la variable 3 //$carro si existe o ponemos a false $carro 00 //en caso contrario 4 ?> 00 <html> 5 <head> 00 <title>PRODUCTOS AGREGADOS AL CARRITO</title>

6 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 00 <style type="text/css"> 7 <!-00 .tit { font-family: Verdana, Arial, Helvetica, sans-serif; 8 00 font-size: 9px; color: #FFFFFF; 9 01 } 0 .prod { 01 font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; 1 01 color: #333333; 2 } 01 h1 { font-family: Verdana, Arial, Helvetica, sans-serif; 3 01 font-size: 20px; color: #990000; 4 01 } 5 --> 01 </style> 6 </head> 01 <body> 7 <h1 align="center">Carrito</h1> 01 <?php 8 if($carro){ 01 //si el carro no est vaco, 9 //mostramos los productos 02 ?> 0 <table width="720" border="0" cellspacing="0" cellpadding="0" align="center"> 02 <tr bgcolor="#333333" class="tit"> 1 <td width="105">Producto</td> 02 <td width="207">Precio</td> 2 <td colspan="2" align="center">Cantidad de Unidades</td> 02 <td width="100" align="center">Borrar</td> 3 <td width="159" align="center">Actualizar</td> 02 </tr> 4 <?php 02 $color=array("#ffffff","#F0F0F0"); 5 $contador=0; 02 //las 2 lneas anteriores 6 //sirven slo para hacer 02 //una tabla con colores 7 //alternos 02 $suma=0; 8 //antes de recorrer todos 02 //los valores de la matriz 9 //$carro, ponemos a cero la 03 //variable $suma, en la que 0 //iremos sumando los subtotales 03 //del costo de cada item por la 1 //cantidad de unidades que se 03 //especifiquen 2 foreach($carro as $k => $v){ 03 //recorremos la matriz que tiene 3 //todos los valores del carro, 03 //calculamos el subtotal y el

4 // total 03 $subto=$v['cantidad']*$v['precio']; 5 $suma=$suma+$subto; 03 $contador++; 6 //este es el contador que usamos 03 //para los colores alternos 7 ?> 03 <form name="a<?php echo $v['identificador'] ?>" method="post" action="agregacar.php?<?php e 8 cho SID ?>" id="a<?php echo $v['identificador'] ?>"> 03 <tr bgcolor="<?php echo $color[$contador%2]; ?>" class='prod'> 9 <td><?php echo $v['producto'] ?></td> 04 <td><?php echo $v['precio'] ?></td> 0 <td width="43" align="center"><?php echo $v['cantidad'] ?></td> 04 <td width="136" align="center"> 1 <input name="cantidad" type="text" id="cantidad" value="<?php echo $v['cantidad'] ?>" size="8" 04 > 2 <input name="id" type="hidden" id="id" value="<?php echo $v['id'] ?>"> </td> 04 <td align="center"><a href="borracar.php?<?php echo SID ?>&id=<?php echo $v['id'] ?>"><img 3 src="trash.gif" width="12" height="14" border="0"></a></td> 04 <td align="center"> 4 <input 04 name="imageField" type="image" src="actualizar.gif" width="20" height="20" border="0"></td> 5 </tr></form> 04 <?php 6 //por cada item creamos un 04 //formulario que submite a 7 //agregar producto y un link 04 //que permite eliminarlos 8 } 04 ?> 9 </table> 05 <div align="center"><span class="prod">Total de Artculos: <?php echo count($carro); 0 //el total de items va a ser igual 05 //a la cantidad de elementos que 1 //tenga la matriz $carro, valor 05 //que obtenemos con la funcin 2 //count o con sizeof 05 ?></span> 3 </div><br> 05 <div align="center"><span class="prod">Total: $<?php echo number_format($suma,2); 4 //mostramos el total de la variable 05 //$suma formatendola a 2 decimales 5 ?></span> 05 </div><br> 6 <div align="center"><span class="prod">Continuar la seleccin de productos</span> 05 <a href="catalogo.php?<?php echo SID;?>"> 7 <img src="continuar.gif" width="13" height="13" border="0"></a> 05 </div> 8 <?php }else{ ?> 05 <p align="center"> <span class="prod">No hay productos seleccionados</span> 9 <a href="catalogo.php?<?php echo SID;?>"> 06 <img src="continuar.gif" width="13" height="13" border="0"></a> 0 <?php }?> 06 </p> 1 </body> 06

2 </html> 06 Maximizar 3 06 4 06 5 06 6 06 7 06 8 06 9 07 0 07 1 07 2 07 3 07 4 07 5 07 6 07 7 07 8 07 9 08 0 08 1 08 2 08 3 08 4 08 5 08 6 08 7 08 8 08 9 09

Seleccionar

CSS,XML,PHP

0 09 1 09 2 09 3 09 4 09 5 09 6 09 7 09 8 09 9 10 0 10 1 10 2 10 3 10 4 10 5 10 6 10 7 10 8 10 9 11 0 11 1 11 2 11 3 11 4 11 5 11 6 11 7 11

8 11 9 12 0 12 1

Y listo, ya tenemos nuestro carrito en funcionamiento.