Carrito de compra - BD PHP.pdf

Programación Web

Bases de datos + PHP

CARRITO DE COMPRA EN PHP CON PAGO PAYPAL

Copyright © 2013. Dr.c. Niels Henryk Aranda Cuevas. This document is ITSFCP Public Information

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

Contenido

• Parte 1: Introducción

• Parte 2: ¿Qué nos hace falta?

• Parte 3: Diagrama de Flujo

• Parte 4: Base de datos de un carro de compra

• Parte 5.1: Scripts necesarios para un carro de compra en PHP y MySQL

• Parte 5.2: Scripts necesarios para un carro de compra en PHP y MySQL

• Parte 6: Añadir PayPal como método de pago a nuestro carro de compra

Programación Web




I. INTRODUCCIÓN

Una de las tareas que todo desarrollador web tiene que afrontar en un determinado momento es la creación de una tienda virtual. Para este proyecto, es necesario tener conocimientos de programación, bases de datos y desarrollo web con Html, CSS.

Se puede crear una tienda virtual con distintos lenguajes, en este caso hemos optado por PHP y MySQL, por tanto, necesitaremos conocimientos básicos en estas dos vertientes, si no es nuestro caso pueden ayudarse con los tutoriales: PHP_SQL.pdf

II. REQUERIMIENTOS

1. AppServ

• Servidor Web Local Apache • Php • Base de dat MySql

2. Cuenta Paypal

1. AppServ (Apache, Php, MySQL)

Podemos obtener cada una de las partes por separado, pero se recomienda AppServ, que es un pack que instala en algunos clics y dentro de una misma ejecución Apache, Php y MySql. Existen otras opciones para este tipo de instalación “todo en uno” como Wamp (Si tu Sistema Operativo es Windows) o Lamp (Si tu Sistema Operativo es Linux) o Mamp (Si tu Sistema Operativo es Mac), aunque en este caso se ha utilizado AppServ 2.5.10 que contiene las siguientes versiones:

• Apache Web Server Versión 2.2.8 • PHP Script Language Version 5.2.6 • MySQL Database Version 5.0.51b • phpMyAdmin Database Manager Version 2.10.3

Apóyate de la guía de instalación del AppServ: AppServInstalación.doc

3. Cuenta Paypal

Programación Web




Ahora hay que crear una cuenta en PayPal. A continuación se explica de qué se trata este sistema de pago.

Existen varias maneras de cobrar a clientes a través de sitios web como pueden ser tarjeta de crédito, transferencia bancaria o una forma que consolidada en Internet y que la mayoría conoce, el PayPal.

Bien es cierto que no hace mucho tiempo el porcentaje de compras por Internet con tarjeta de crédito no era abundante en México, debido a la desconfianza generalizada, pero ante tal animadversión de no comprar por Internet surgió un sistema de pago llamado PayPal que vino a solucionar estos problemas.

PayPal es un sistema fiable y bastante generalizado en sitios web e-commerce, con él los usuariosos pueden comprar sus productos sin necesidad de informar sobre datos privados como el número de tarjeta de crédito, PIN, fecha de caducidad y número de seguridad, con el que un usuarioso potencialmente peligra o podría dejar una cuenta sin fondos.

Definición Wikipedia de PayPal

”PayPal es una empresa estadounidense, propiedad de eBay, perteneciente al sector del comercio electrónico por Internet que permite la transferencia de dinero entre usuarios que tengan correo electrónico, una alternativa al tradicional método en papel como los cheques o giros postales. PayPal también procesa peticiones de pago en comercio electrónico y otro servicio webs, por lo que cobra un porcentaje.”

Ahora que conocemos el sistema ha llegado la hora de crear una cuenta PayPal. Para ello, tan sólo hay que acceder a la página web oficial y pulsar el botón Regístrese, como se muestra en la imagen:

Programación Web




PayPal pone a nuestra disposición 2 tipos de cuentas

• Cuenta PayPal para particulares: Particulares que compran y venden por internet • Cuenta PayPal para empresas: Empresas que venden en Internet

En los dos casos, crearse una cuenta en PayPal es gratuito, lo único que tendremos que hacer es rellenar una serie de datos personales junto con el correo electrónico, que lo más importante de la cuenta.

La que nos interesa para este proyecto es el primer caso: “Cuenta PayPal para particulares”, ya que aunque sea limitado Vender en tu web un máximo de 2500€ anuales, este registro servirá solamente para esta práctica.

Ahora ya disponemos de todos lo necesario para empezar a crear la base de datos en MySQL para el carrito de compra (siguiente tutorial) y todo lo que sigue.

III. Diagrama de Flujo

En todo proyecto web, por muy simple que parezca, es bueno hacer un diagrama de flujo, una especie de croquis con los procesos que tendremos que seguir a la hora de ponernos a codificar. Estos pueden ser desde una visualización general hasta un diagrama de flujo refleja el más mínimo detalle.

Siguiendo con el tutorial, genera un diagrama de flujo para crear un carrito de compras.

… Comparar con diagrama del profesor

¿En qué porcentaje se parece?

Programación Web




Viendo el diagrama podemos tener una idea de lo que hay que hacer, pero para el que no haya visto algo parecido, se explican a continuación los apartados:

De acuerdo a la dirección de las flechas vamos a ir explicando cada uno de las partes del proceso:

1. Login.

En la mayoría de aplicaciones web está presente el logueo de usuario, para así tener un acceso restringido a los datos de la aplicación, pero si hablamos de crear un carrito de compra o una tienda virtual, esto no es necesario incluso no es beneficioso.

Teniendo en cuenta que la finalidad de toda tienda es que el cliente compre, no debemos poner trabas ni le vamos a hacer perder el tiempo en formularios de registros y demás, mejor vamos al grano para comprar.

Por tanto, el formulario de login de usuario no lo tendremos en cuenta en esta ocasión.

2. Ver Productos.

Cuando un usuario accede a nuestra aplicación, lo primero que le debemos mostrar es lo que realmente quiere ver, es decir, los productos.

Los productos que verán los usuarios en la aplicación pueden contener tanta información como queramos mostrar, pero para nuestro proyecto bastará con:

• Producto: Descripción del Producto • Precio: Precio en pesos del producto. • Imagen (añadir al carro o eliminar del carro): La imagen servirá al usuario para añadir al carro los productos que desee. Debido

a que puede volver a la página de productos para agregar más productos su carro, Debemos tener en cuenta que si por ejemplo el producto “Camiseta Negra (L)” ya ha sido elegido por el usuario, no le podemos mostrar de nuevo la imagen de añadir, sino la de eliminar. Esto veremos cómo se hace cuando empecemos con el código.

Si analizamos nuestro diagrama de flujo, vemos que esa primera acción del usuario de visitar nuestra página de productos, conlleva una serie de cosas:

1. Iniciamos variables de sesión: Cada vez que un usuario entra en la aplicación se le abre una sesión única para diferenciarlo de los demás usuarios y pasar información como productos, cantidad de productos, IP, etc... entre todas las páginas de nuestra aplicación.

2. Acceso a la tabla Productos de la base de datos: Para recuperar la lista de productos de nuestra “tienda”, hay que acceder a la tabla PRODUCTOS de la base de datos y mostrarlos uno a uno en la tabla de nuestra página.

3. Añadir al carro.

Una vez el usuario ha visto todos los productos disponibles, ya puede elegir el que desee. Haciendo clic en la imagen “añadir al carro” estará iniciando el proceso de compra, que en nuestra aplicación generará una serie de procesos:

Programación Web




1. Añadir producto a la variable de sesión. 2. Enviar al usuario a la cesta de la compra “VerCarrito” para darle la opción realizar el pago o bien seguir comprando. 3. Cambiar la imagen “añadir al carro” del producto elegido en el archivo VerProductos por la imagen “eliminar del

carro“. 4. Incluir una parte de la web para informar la cantidad de productos elegidos y el importe acumulado.

4. Ver carrito.

Habrán dos motivos por los que el usuario puede visualizar el carrito: Cuando añade el primer producto o cuando el usuario haga clic en “Ver Carrito”.

5. Realizar Compra.

En esta parte del proceso el usuario podrá realizar la compra mediante PayPal informando una serie de datos, entre ellos el más importante el e-mail que es la premisa principal para realizar pagos.

6. Envío de la Factura.

Cuando se haya realizado el pago finalmente, informaremos al usuario mediante un reporte o factura de los datos de la compra y además se le enviará un mail con el número de factura, datos de la compra, etc .. para que le sirva como comprobante.

Una vez explicada la parte más tediosa del tutorial, llega la hora de ponerse manos a la obra para crear la base de datos y empezar a introducir datos para seguir con el código de la aplicación.

IV. Base de datos

La estructura de una base de datos para una tienda virtual puede diferir en cuanto a complejidad, seguridad o incluso en cada analista. En nuestro caso será algo sencillo, útil y simplificado que nos servirá para crear el carro de compra.

Empecemos por hacer un análisis de las tablas que nos harán falta para la base de datos que llamaremos “colorate_paypal”.

Lo primero que analizaremos será la distinción y relación de tablas, que conseguiremos con una simple hoja y un bolígrafo como inicio del proceso.

Genera un diagrama de análisis de una base de datos para un carrito de la compra.

Programación Web




… Comparar tu diagrama con el del profesor

¿En qué porcentaje se parece?

Tal y como se ve en la imagen del profesor, se han definido 4 tablas y aunque son bastante intuitivas por su descripción, a continuación se explica a detalle:

• CLIENTES: Esta tabla tiene que estar informada siempre que se realice un pedido, los datos quedan almacenados para hacer las facturas en el momento en que la compra se haya realizado correctamente.

• PRODUCTOS: Tabla donde guardaremos aquellos productos que el usuario podrá comprar, así como información del nombre del producto, precio, etc ..

• PEDIDOS: Cada compra que el Cliente realice, debe estar ligada con un pedido donde tendremos información de quién lo ha realizado (CLIENTE) y detalles de la compra (DET_PEDIDOS).

• DET_PEDIDOS: Almacena el detalle del pedido, y algo muy importante como es la cantidad del producto elegido con lo que calcularemos el importe total. Debemos tener en cuenta que si el precio del Producto cambia después de haberse dado de alta el detalle de un pedido, éste no cambiará en esta tabla (imaginaros el precio de un producto en promoción durante 2 meses, si al cabo de los 3 meses miramos el precio del producto veremos que es más caro, pero en esta tabla seguirá siendo el mismo).

Una vez analizada cada una de las tablas de nuestra base de datos “Colorate_Paypal”, vamos con su creación en MySQL.

Crear base de datos Carrito de Compra en MySQL

Para empezar vamos a crear la base de datos “Colorate_Paypal”.

Accedemos a PhpMyAdmin (localhost/phpMyAdmin/) y damos de alta a las tablas:

Programación Web




Es hora de ir incluyendo las tablas que hemos enumerado anteriormente. Para saber los campos que nos hacen falta, basta con mirar nuestro análisis de la base de datos que tenemos escrito en papel.

Antes de empezar a crear las tablas, se recomienda leer el documento: Integridad referencial.doc. En él se explica cómo han de utilizarse las tablas relacionadas con Foreign Keys.

Así que tenemos que dar de alta las tablas: CLIENTES, PRODUCTOS, PEDIDOS, DET_PEDIDOS.

*Nota: Es muy importante que demos de alta las tablas con el motor de almacenamiento InnoDb para poder relacionar unas tablas con otras.

CLIENTES:

• id_cliente (clave primaria): Numérico con autoincremento de 5 posiciones. • nombre: Alfanumérico de 80 posiciones • e-mail: Alfanumérico de 100 posiciones e índice único. • direccion: Alfanumérico de 200 posiciones • telefono: Numérico de 50 posiciones • fec_alta: Date de 10 posiciones

Programación Web




A continuación se proporciona el código SQL para añadir la tabla CLIENTES a la base de datos:

MySQL: CREATE TABLE `clientes` ( ìd_cliente` INT( 5 ) NOT NULL AUTO_INCREMENT PRIMARY KEY , `nombre` VARCHAR( 80 ) NOT NULL , è-mail` VARCHAR( 100 ) NOT NULL , `telefono` VARCHAR( 50 ) NULL , `direccion` VARCHAR( 50 ) NULL , `fec_alta` DATE NOT NULL , UNIQUE (è-mail`)) ENGINE = INNODB;

PRODUCTOS:

• id_producto (clave primaria): Numérico con autoincremento de 5 posiciones. • nombre: Alfanumérico de 80 posiciones. • descripcion: Alfanumérico de 250 posiciones. • precio: Numérico de 10 posiciones. • foto: Alfanumérico de 250 posiciones

**Nota: El campo foto no contendrá ninguna imagen, solo estará informado con la ruta donde esté guardada dicha foto, para así no sobrecargar nuestra base de datos con datos innecesarios.

A continuación se proporciona el código SQL para añadir la tabla PRODUCTOS a la base de datos:

MySQL: CREATE TABLE `productos` ( ìd_producto` INT( 5 ) NOT NULL AUTO_INCREMENT PRIMARY KEY , `nombre` VARCHAR( 80 ) NOT NULL , `descripcion` VARCHAR( 250 ) NOT NULL , `precio` INT( 10 ) NOT NULL , `foto` VARCHAR( 250 ) NOT NULL , INDEX ( `nombre` ) ) ENGINE = INNODB;

PEDIDOS:

• id_pedido (clave primaria): Numérico con autoincremento de 5 posiciones. • id_cliente (clave foránea de CLIENTES): Numérico de 5 posiciones • fec_alta

A continuación se proporciona el código SQL para añadir la tabla PEDIDOS a la base de datos:

DET_PEDIDOS:

MySQL:

Programación Web




CREATE TABLE `pedidos` ( ìd_pedido` INT( 5 ) NOT NULL AUTO_INCREMENT PRIMARY KEY , ìd_cliente` INT( 5 ) NOT NULL , `fec_alta` DATE NOT NULL , INDEX ( ìd_cliente` ) ) ENGINE = MYISAM ;

• id_detPedido (primaria): Numérico con autoincremento de 5 posiciones. • id_pedido (clave foránea de PEDIDOS): Numérico de 5 posiciones • id_producto (clave foránea de PRODUCTOS): Numérico de 5 posiciones • cantidad: Numérico de 5 posiciones. • precio: Numérico de 5 posiciones.

A continuación se proporciona el código SQL para añadir la tabla DET_PEDIDOS a la base de datos:

MySQL: CREATE TABLE `det_pedidos` ( ìd_detpedido` INT( 5 ) NOT NULL AUTO_INCREMENT , ìd_pedido` INT( 5 ) NOT NULL , ìd_producto` INT( 5 ) NOT NULL , `cantidad` INT( 5 ) NOT NULL , `precio` INT( 5 ) NOT NULL , PRIMARY KEY ( ìd_detpedido` ) , KEY ìd_pedido` ( ìd_pedido` , ìd_producto` ) , KEY ìd_producto` ( ìd_producto` ) ) ENGINE = INNODB DEFAULT CHARSET = utf8 AUTO_INCREMENT =1;

Con estas 4 tablas ya tenemos completa nuestra base de datos MySQL para crear un carrito de compras. Es momento de empezar a codificar nuestra aplicación en PHP.

Inserta algunos registros en tu base de datos: Ejemplo: INSERT INTO tablaX VALUES (2, 'Jimmy Martínez'); INSERT INTO tablaX VALUES (3, 'Daniel Mena');

Programación Web




V. Scripts en 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 que el usuario está conforme con el carro de la compra y la cantidad de productos, realiza la compra.

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. Vamos a dividir la página en 9 archivos distintos para tener un código más entendible y no tener que repetir las mismas líneas en cada una de las páginas, permitiendo una modificación más amena a futuro.

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".

Opina sobre este código.

• 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 • 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.

Estos archivos se encuentran en la carpeta carroCompras1, en el que está la base de la interfaz, la cual se ira modificando durante el avance de este tutorial.

Como se puede observar el diseño de este carro de compras es básico, de lo que se trata en este tutorial es de tener unos conocimientos fundamentales de PHP. Una vez que 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 dados de alta en la tabla “productos”. Para el tutorial, hemos dado de alta unos cuantos y aquí está el código para que también puedas incluirlos nuevos productos.

Programación Web




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);

1. INSERT INTO `productos` VALUES (9, 'Alojamiento Web', 34.00);

INSERT INTO `productos` VALUES (10, 'Dominio', 9.00);

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 se presenta en esta imagen:

Programación Web




Ahora hay que abrir el archivo "productos.php" para añadir algunas líneas. Para empezar, lo primero que tenemos que hacer es iniciar sesión, así que antes de definir la variable $titulo, pondremos lo siguiente:

PHP: //Iniciamos sesión o continuamos la que ya exista session_start();

Algunos estaréis pensando ¿Qué es una sesión en PHP?, 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 se entienda, si entramos 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

Programación Web




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 qué 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

Otra imagen para entenderlo.

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 se muestra, 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 "productos.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 configurar de acuerdo a la base de datos) lo único que nos faltará será definir la sentencia SQL que nos devolverá lo que queremos:

PHP:

Programación Web




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

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 descargado), vamos a realizar dicho bucle de la siguiente manera:

PLAIN TEXT PHP:

// comienza un bucle que leera todos los registros y ejecutara las ordenes //que siguen while ($productos = mysql_fetch_array($resultado)) { echo "<tr class='borde_tabla'><td style='display:none'>" . $productos['id'] . "</td>"; // id del producto que no se verá por pantalla echo "<td>" . $productos['producto'] . "</td>"; // imprime el nombre del producto echo "<td style='text-align:right'>" . $productos['precio'] . " € </td>"; // imprime el precio echo "<td style='text-align:right'> <a href='carro.php?id=" . $productos['id'] . "&action=add' alt='Añadir al carro'> <img src='img/add_carro.png' width='48' height='48' alt='Añadir al carrito' title='Añadir producto al carrito'> </a> </td>"; echo "</tr>"; } // fin del bucle de ordenes

Aquí tenemos bastantes cosas que explicar. Como puede verse 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 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 se puede apreciar en el enlace que generamos, vamos a pasarle a la página "carro.php" un enlace con la siguiente estructura:

Programación Web




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, 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.

Carrito de compra - BD PHP.pdf

Documents

Transcript of Carrito de compra - BD PHP.pdf