1.Tienda_conPHP y MySQLi_POST

Creación de una tienda en línea con PHP y MySQLi 1 DEARROLLO DE UNA TIENDA ON LINE CON PHP Y MYSQLIPRIMERA PARTE: CATALOGO DE PRODUCTOSLECCION 1 Preparación del proyectoEmpezamos con la lección 1 de creación de una pequeña tienda online en PHP y veremos quenecesitamos para nuestro proyecto:  Servidor local: XAMPP o WAMP server que contiene Apache, PHP y MySQL PHPMyAdmin  Software: PHP designer en demo versión para 21 días  Software: NotePad ++ o SublimeTExt, u otro porque hay muchos  Necesitamos de una maqueta o modelo en base al cual crearemos nuestra tienda en línea. Previamente podemos diseñar o maquetar en Photoshop nuestra página.  En esta práctica tenemos un proyecto realizado y se encuentra en la carpeta layouts1. Una vez instalado el servidor local XAMPP, ingresamos a su directorio HTDOCS2. Creamos una carpeta denominada: www y dentro creamos “shop”3. Creamos dentro las siguientes carpetas: Images, style, userfiles, includes4. En la carpeta images estarán las imágenes del sitio, en style los archivos CSS, en userfiles, los archivos que subamos a la tienda, como imágenes de productos, en la carpeta includes estarán nuestros trozos de códigos, que incluiremos a nuestro proyecto.5. Ejecutamos PHP designer y vamos al menú: Proyecto Administrador de proyectos (tecla F11),6. Presionamos NUEVO,7. Escribimos un nombre al proyecto: shop presionamos Siguiente seleccionamos nuestra carpeta del proyecto “shop”8. Presionamos siguiente, siguiente, siguiente… hasta que salga el botón OK o Aceptar,9. En la ventana final ubicamos nuestro proyecto y hacemos un clic sobre él y aceptamos…10. Fijar la mirada en el lado derecho, habrá u n panel donde se visualiza el proyecto con todas las carpetas que creamos,11. En NotePad++ o SublimeText solamente abrimos el programa para dirigirnos a la carpeta del pryecto.En la siguiente lección creamos la base de datos y un usuario con su contraseñaProfesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 2LECCION 2 Creación de la base de datos (BD) y tablas1. Creación de BD usuario y las tablas necesarias además d llenar con datos2. Entramos a PHPMyAdmin desde el control de XAMPP (Clic en Admin)3. En la ventana de PhP MyAdmin hacer clic en Nuevo4. Colocamos de nombre: shop y seleccionamos la codificación: utf8_general_ui5. Creamos u nuevo usuario: shop_user, HOST: localhost, Paswword: 123 con todos los privilegios6. Hacer clic en el nombre de la base de datos: shop7. Hacer clic en nueva tabla: products cantidad de campos 6 Id INT AUTINCREMENT LLAVE PRIMARIA 100 title varchar 8,2 description text 100 100 price decimal AUTOINCREMENT LLAVE PRIMARIA image varchar 100 100 cat varchar AUTOINCREMENT LLAVE PRIMARIA8. Tabla categories 100 Id INT 8,2 10 name varchar 100 100 cat_id varchar 100 1009. Tabla orders 100 Id INT product varchar prod_id int price decimal qty varchar name varchar s_name varchar address varchar post_index varchar email varchar date date time time10. Agregar datos a la table categories Name 1 Notebook, cat-id: Laptop name 2 Computadoras cat-id: PC11. Llenar la tabla Product con 8 datosDELL N5050 Asus X54C i5 Gaming GTX2 i7 Storm Enforcer235.00 577.00 1000.00 1400.00Acer Aspire 5349 Toshiba C660 DELL Aurora i7 Predator GTX655.55 855.00 1200.00 1500.00LOS 4 PRIMEROS DATOS son Laptops:En descripción colocar texto falso de Lorem ipsumEn el campo image: 1.png, 2.png, 3.png, 4.png el nombre de la imagen con su extensiónEn el campo: cat NotebookLOS SIGUIENTES 4 DATOS SON PC:En descripción colocar texto falso de Lorem ipsumEn el campo image: 4png, 5.png, 7.png, 8.png el nombre de la imagen con su extensiónEn el campo: cat PC Profesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 3LECCION 3 Conexión a la base de datosEstructura y diseño del sitioAplicamos el diseño del sitio con un método estándar. Este método es muy práctico y permite crearplantillas con modelos estructurales que se aplican a las páginas en cuestión.¿QUE SE NECESITA?  Necesitamos de un diseño predefinido. Este diseño se puede realizar en Photoshop o en otro programa.  Como este curso no tratamos de HTML y CSS, aquí tengo preparado un pequeño diseño desde el cual comenzaremos.  Aquí les muestro mi diseño, simple que contiene una imagen en el contenedor y en el lado derecho, el carrito con el símbolo del nuevo sol peruano.¿QUE HAREMOS?1. Abrimos la carpeta del proyecto “shop” creada anteriormente, además abrimos nuestro directorio con el diseño predefinido, la carpeta se llama: layouts2. Copiamos el contenido de las carpetas a la carpeta del proyecto, images, style y userfiles3. También copiamos el archivo index.html.NOTA: abrir el index.html y ver su código: ahí vemos una tabla con tres filas y dentro de la segunda fila seencuentra otra tabla con etiquetas DIV donde se encuentra la imagen de un producto. Dentro de esa 2databla es donde se verán los productos de nuestra tienda.Creamos en el sitio un archivo index.php y nuestras plantillas4. Ejecutamos XAMPP o el servidor local que tengamos, Abrimos PHP designer y abrimos el archivo “index.html”. Lo guardamos como index.php5. Abrimos el navegador y escribimos: localhost/www/shop y presionamos enter,6. No debe variar nada. Volvemos al editor de códigos,7. HEADER: Creamos archivo nuevo y guardamos con el nombre: header.php en la carpeta: includes8. Abrimos index.php y ubicamos la 1ra fila (tr) de la tabla, seleccionamos y cortamos9. Lo pegamos dentro del archivo header.php y guardamos10. FOOTER: Ahora nos vamos al pie de página de index.php vemos la fila (tr) lo seleccionamos y cortamos,11. Creamos un archivo nuevo y lo guardamos en la carpeta includes con el nombre: footer.php12. En index.php, y en el lugar donde estaban esas filas que cortamos, incluimos esos trozos de códigos <?php include(includes/ header.php); ?> y <?php include(includes/ footer.php); ?>13. Guardamos todo y probamos en el navegador, no debe cambia nada.CONEXIÓN A LA BASE DE DATOS1. Creamos un nuevo documento y lo almacenamos en la carpeta INCLUDES con el nombre db_connect.php. ahí estableceremos la conexión a nuestra base de datos.2. Abrimos el archivo db_connect.php y nos conectamos: <?phpProfesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 4 $host = 'localhost'; $user = 'root'; $pswd = ''; $db = 'shop'; //creamos la variable para nuestra conexión: $connection = new mysqli($host, $user, $pswd,$db); mysqli_set_charset($connection ,\"utf8\"); //comprobamos la conexión if($connection->connect_errno){ return 'No se pudo conectar'; }else{ return 'Conexión exitosa!'; } ?>NOTA:  Para la conexión mysqli necesitamos 4 parámetros: EL nombre del servidor, el usuario y su contraseña y el nombre de la base de datos.  Esa información la almacenamos en la variable: $connection  Añadimos el setcharset con codificación utf8 para los acentos y las Ñ  Luego verificamos la conexión con la condicional IF - ELSE:  Para ello, ¡Cambiemos, return 'Conexión exitosa!' por echo 'Conexión exitosa!'  Probamos en el navegador. Si sale el texto escrito es porque se conectó sin inconvenientes.  Volvemos a dejar el código RETURN como estaba.3. Abrimos también index.php y enlazamos la conexión a nuestra página:4. Sobre la cabecera de la página, encima de <!DOCTYPE> escribimos: <?php include(includes/ db_connect.php); ?>Realizar consulta para mostrar los productos1. En index.php, ubicamos la tabla que está dentro de las etiquetas TR2. Por encima de la tabla abrimos las etiquetas <?php ?> y dentro de ellas hacemos nuestra consultaa. A nuestra consulta le asignamos una variable: $query, y le decimos que nos seleccione todos los campos de la tabla “products”: SELECT * FROM productsProfesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 5 b. Luego el resultado de la consulta también le asignamos una variable $result c. Después abrimos el ciclo WHILE para que nos vaya recorriendo los datos por la tabla en la BD convirtiendo en una matriz $row al resultado de la consulta con el mysqli_fetch_array d. $row es el elemento que contiene toda la información de nuestra tabla “products” e. Para que el ciclo se realice, envolvemos la tabla o el lugar donde se mostrarán los datos con la apertura y cierre del WHILE3. Guardamos y probamos en el navegador:4. Debe mostrase la imagen que venía en el diseño, y se está repitiendo con los mismos datos.Mostar los productosComo $row es un arreglo que contiene la información de nuestra tabla, la iremos colocando y extrayendopara que se muestre en el lugar exacto.1. Comencemos con la imagen: Ubiquemos la tabla de index.php luego, ubicamos el DIV que contiene la imagen 1.png2. En el mismo lugar, cambiemos 1.png por: <?=$row['image']?>3. Hagamos lo mismo con Nombre y el precio: 555 <?=$row[title]?> <?=$row[price]?>4. $row tiene la información completa y ['image'] extrae solamente el elemento necesario5. Guardamos todo y probamos en el navegador, todo se mostrará correctamente.Programando la línea de los filtrosEn nuestra página index.php tenemos una línea de filtros, que nos permitirá filtrar los productos porprecio de mayor a menor o viceversa y también por orden alfabético. Enviaremos parámetros por la URL(método GET) para realizarlo.1. Primeramente, modificamos nuestros textos en la línea de filtros: Asignamos etiquetas A si no las tiene y dentro de esa etiqueta agregamos los códigos de enlace: a. Decimos que se muestre en la misma página con: index.php? b. Seguidamente creamos la variable que llevará nuestra acción sort= c. Para nuestras acciones escribimos según lo que haremos: pricedesc (para mostrar los valores mayores), priceasc (para los menores), titleup (de A - Z) y titledown (de Z - A) d. Las acciones: pricedesc, priceasc… etc, serán nuestros ejecutables gracias a los CASE – BREAK que insertaremos dentro de un SWITCH e. SORT se encargará de recogerlos desde la URL y enviarlos a nuestra página f. Para el primer enlace sería: <a href=\"index.php?sort=pricedesc\">Mayor</a>2. Realizar eso para los 4 enlaces. El resultado de nuestra modificación en la siguiente imagen:Profesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 6 Por ahora no muestra nada ya que debemos recibir primero el envío de la variable SORT y aplicarlo en un conmutador para que según hagamos clic se pueda visualizar cada una de las opciones.3. En index.php nos ubicamos en la cabecera del archivo, debajo de la conexión a la BD escribimos el siguiente código: $sorting = $_GET['sort']; switch ($sorting){ case 'priceasc'; $sorting = 'price ASC'; $sort_name= 'Mayor'; break; case 'pricedesc'; $sorting = 'price DESC'; $sort_name= 'Menor'; break; case 'titleup'; $sorting = 'title ASC'; $sort_name= 'A-Z'; break; case 'titledown'; $sorting = 'title DESC'; $sort_name= 'Z-A'; break; default: $sorting = 'id DESC'; $sorting_name = 'No estamos ordenando'; break; } a. Primeramente, recibimos SORT vía GET, y asignamos una variable $sorting, luego conectamos el conmutador switch con ese envío b. Seguidamente, asignamos a cada caso las acciones que le enviamos al hacer clic en una u otra opción c. Asignamos esa acción para que ejecute el orden de SELECCIÓN en la BD y lo muestre en la página, d. Cerramos cada caso con un BREAK para terminar dicha acción e. De lo contrario ELSE, si no se ejecutó nada, se mostrará lo que esté por defecto,4. Después de esto, dentro de la consulta agregamos la variable $sorting en ORDER BY,Profesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 7LECCION 4 - Mostrar el menú de categorías1. Abrimos la página header.php ya que ahí tenemos nuestro menú que empieza con INICIO2. Ubicamos el DIV <div id=\"cart\"> y encima de éste insertamos un div nuevo <div><a href=\"#\">Categorías</a></div>3. Encima de este DIV abrimos las etiquetas PHP y dentro hacemos nuestra consulta a la BD4. Realizamos los mismos pasos como hicimos con los productos, a. A nuestra consulta le asignamos una variable: $query, y le decimos que nos seleccione todos los campos de la tabla “categories” b. Luego el resultado de la consulta también le asignamos una variable $result c. Después abrimos el ciclo WHILE para que nos vaya recorriendo los datos por la tabla en la BD convirtiendo en una matriz $catename al resultado de la consulta con el mysqli_fetch_array d. $catename es el elemento que contiene toda la información de nuestra tabla “categories” e. Para que el ciclo se realice, envolvemos la tabla o el lugar donde se mostrarán los datos con la apertura y cierre del WHILE DIV Envuelto por WHILE5. Seguidamente en el div que agregamos donde dice Categorías, insertamos el código para mostrar el menú con las categorías,6. Guardamos y probamos en el navegador:CORRIGIENDO AVISOS DE ADVERTENCIAS POR EL $SORTINGAl abrir la página tal vez veamos un aviso sobre la variable SORT no definida, eso puede pasar porque alcargarse la página por primera vez la variable SORT que se envía por GET, en realidad no se estáenviando por eso sale ese aviso, ya que, al presionar los enlaces de filtro Mayor, Menor etc, todofunciona normal.Profesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 81. Abrimos index.php y ubicamos la cabecera de la página justo por encima del código $sorting= $_GET['sort'];2. Para solucionar esto nos valemos de una de las siguientes opciones:  @$sorting = $_GET['sort'];  $sorting = isset($_GET['sort']) ? $_GET['sort'] : 'default_value';3. El primero usa el símbolo @, cosa que solamente oculta el error4. El segundo, Nos dice que, si existe \"sort\" y se está enviando vía GET, entonces la igualamos a $sorting, de lo contrario se toma como por defecto. Esta expresión es la forma abreviada de la condicional IF – ELSE.5. En realidad, ese aviso no es de error porque simplemente al cargar la página sort no se ejecuta, pero si se indica, y por eso no sabe qué hacer y muestra el aviso de variable indefinida.6. Al presionar los botones de filtrado ahí si funciona perfectamente ya que se envía por el método GET.7. RESUMIENDO: Eliminamos: $sorting = $_GET['sort'];8. En su lugar colocamos la segunda opción: $sorting = isset($_GET['sort']) ? $_GET['sort'] : 'default_value';9. Guardamos y probamos en el navegador.10. Ahora abrimos header.php y ubicamos el enlace de inicio y lo modificamos11. Con esto le estamos enviando por la URL la variable “sort”, pero sin ninguna acción.12. Guardar todo y comprobar… haciendo clic en los filtros y en el menú “inicio” y refrescando la página.ENLAZAR EL MENU DE CATEGORIAS CON LAS PÁGINAS  En header.php hemos agregado el menú de categorías mostrando el nombre de ellas en el menú, empleando la consulta a la BD: <?=$catname['name']?>  Seguidamente debemos enlazar ese menú con las páginas que mostrarán los productos que pertenecen a una categoría en específico  Como podemos ver en header.php aún no está el enlace en las etiquetas A1. Dentro del enlace en header.php, eliminamos el símbolo “#” y hacemos referencia a la página de categorías que crearemos después, <a href=\"view_cat.php?cat=<?=strtolower($catname['name'])?>\"><?=$catname['name']?></a>  Empezando: view_cat.php es el nombre de la página donde se mostrarán los productos por categoría,  El símbolo de interrogación ? indica que se verán en la misma página,  La variable inventada cat (muy importante), se encargará de transportar la información,  La palabra strtolower, se encargará de convertir mayúsculas a minúsculas  Después está ($catname['name']) que llevará la información sobre qué categoría mostrar,2. Debe quedarnos como en la imagenProfesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 9AGREGAR CATEGORIAS1. Abrir la BD e insertar a la tabla “categories” una categoría, a. En name escribir: Celulares o Netbook u otra y en cat_id colocar: Teléfonos2. Guardar y probar. No debe mostrar problemas.3. CREAMOS la Página view_cat.php: hacemos una copia de la página index.php y lo renombramos como view_cat.php4. Seguidamente vamos a recibir la variable CAT que nos envía desde la página header.php para ello nos ubicamos en la cabecera de la página por debajo de la línea de include de db_connect5. Escribimos: $cat= $_GET['cat'];Ahí estamos creando la variable $cat que almacenará la información que proviene desde header.php por la URLLECCION 5 - MOSTRAR PRODUCTOS POR CATEGORÍASNOTAS: Antes de mostrar los productos por categorías  Anteriormente cuando agregamos el enlace desde el menú de categorías asignamos a una variable CAT que se encargará de llevar la información via GET, quiere decir que por la URL se verá el envío y todo lo que se vea en la URL es la que se transporta,  Vamos a proteger la URL para evitar la inyección de códigos o elementos no deseados y puedan afectar la seguridad de nuestro sitio.LIMPIEZA DE LA URL1. Creamos una carpeta de nombre: “functions” y creamos un archivo nuevo y lo guardamos en esa carpeta con el nombre: function.php2. En functions.php abrimos las etiquetas <?php ?> y dentro escribimos: function clear_string($cl_str) { $cl_str = strip_tags($cl_str); //limpia los símbolos HTML o PHP $cl_str = htmlspecialchars($cl_str); // Limpia caracteres especiales $cl_str = trim($cl_str); //limpia de espacios vacíos. Línea limpia return $cl_str; //retorna después de la limpieza }  función para limpiar la URL de símbolos no deseados  Se usa a los arreglos que están ligados a la BD.  Entre paréntesis escribimos la variable dentro de la cual se transmitirá el arreglo Global $_GET que lleva consigo las variables requeridas ejm. $cat  Por ejm nombramos a la función: Clear String (Limpieza)3. Nos vamos ahora a nuestra página view_cat y modificamos $cat= $_GET['cat']; agregando el nombre de nuestra función encargada de la limpieza $cat = clear_string($_GET['cat']);4. Enlazar: en view_cat.php debajo del include db_connect, escribir: include ('functions/functions.php');Mostrar los productos por categorías1. Estando en nuestra página view_cat.php, nos desplazamos hacia abajo para ver nuestra consulta que realizamos cuando mostramos todos los productos.Profesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 10La tenemos de esta manera Agregamos aquí después de products, nuestra selección: WHERE cat='$cat'2. Después de la palabra “products” agregar la condición de nuestra consulta selectiva: WHERE cat='$cat'3. Al realizar el cambio anterior guardamos y visualizamos en el navegador… debe funcionar correctamente,4. Hacer clic en la categoría que agregamos y que no tiene productos. Ahí nos damos cuenta que no muestra nada ya que en verdad no hay productos,  Al no tener productos, lo lógico sería que no muestre nada y dé un aviso diciendo que no hay productos en esa categoría.  Para lograr eso vamos a modificar el código o mejor dicho vamos a variar la posición de nuestros códigos de consulta para que cuando muestre el aviso que no hay productos también nos oculte la línea de filtros,  También se quiere, que no oculte el nombre de la categoría (En este caso la palabra Nuevos)AVISO: NO HAY PRODUCTOS EN ESTA CATEGORIA. Veamos nuestro código:1. Fijémonos en <h3>Nuevos</h3>, eso no debemos ocultar, pero si vamos a ocultar los filtros,2. Entonces la condicional de mostrar, como también nuestra consulta la trasladamos por debajo de <h3>Nuevos</h3>,3. A nuestra consulta agregamos mysqli_num_rows que nos devuelve el número de filas en el resultado de la consultaProfesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 114. Ponemos la condicional IF si hay filas o es mayor a cero, que nos las muestre de lo contrario ELSE nos dará el aviso diciendo que no hay productos.5. El cierre de la condicional IF la colocamos al final de nuestro ciclo WHILE6. Guardamos todo y probamos en el navegador.Profesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 12LECCION 6 – MOSTRAR NOMBRES DE CATEGORIAS  En nuestro archivo index.php cuando iniciamos el proyecto, tenemos una línea de códigos que nos muestra los filtros y hay una palabra que dice Nuevos. Ese Título es lógico que se muestre al abrir la página ya que los productos se muestran desde los últimos agregados, es decir los más Nuevos.  Cuando creamos la página view_cat.php hicimos una copia de index, por eso tenemos heredado ese título Nuevos. Lo que se quiere ahora es que cada vez que presionemos en el enlace de alguna categoría también se nos muestre el título de la categoría a la que pertenecen los productos mostrados.  En la página header.php tenemos nuestro enlace a la página view_cat, pero la variable cat solamente está llevando los productos de la categoría más no los nombres.  Tenemos que llevar los nombres en otra variable.1. Abrimos header.php,y ubicamos el enlace en la etiqueta A,2. Agregamos después de la variable CAT la variable NAME concatenando con el símbolo & <a href=\"view_cat.php?cat&name=<?=$catname['name']?>\"><?=$catname['name']?></a>3. Podemos eliminar el elemento strtolower para que se vean los nombres en mayúsculas, o también se puede enviar la variable NAME de otra forma<a href=\"view_cat.php?cat =<?= strtolower ($catname['name'])?> &name=<?=$catname['name']?>\"><?=$catname['name']?></a>4. Nos quedamos con la primera opción: cat&name=<?=$catname['name']?>5. Guardamos y abrimos la página view_cat.php y ubicamos las etiquetas H36. Escribimos el código para que se muestre el nombre de la categoría: <h3><?=$cat=$_GET['name']?></h3> Aquí estamos recibiendo por GET la variable cat extrayendo el nombre del arreglo global.7. Guardamos todo y probamos en el navegador, haciendo clic en los enlaces del menú horizontal.LECCION 7 – Crear página de detalles y mostrar el detalle del producto  Para mostrar el detalle de un producto debemos tener una página preparada para eso.  A esa página en este caso la llamaremos: view_product.php1. Hacemos una copia de index.php y la renombramos como view_product.php2. Vemos su cabecera donde está la etiqueta PHP, eliminamos todo su contenido de esa etiqueta a excepción de: include (\"includes/db_connect.php\");3. También eliminamos el div: <div class=\"film-filter\"> de la línea de filtros,4. Seguidamente, tomamos el código para crear una línea de navegación denominada: “migas de pan” (breadcrumbs). Esa línea nos va permitir tener una ruta desde inicio - Categoría - Título del producto. Y poder navegar por ella.5. Ese código lo escribimos encima de la tabla que servirá para ver el detalle del producto, y debajo de las etiquetas PHP donde tenemos la consulta a la BD. Está en la carpeta “Adds”.<!--Migas de pan (breadcrumbs)-->Profesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 13<div class=\"menubar\"> <p class=\"links\"><a href=\"index.php\">Inicio</a></p> <p class=\"links\"><img src=\"img/nav-arrow.png\" alt=\"\"></p> <p class=\"links\"><a href=\"#\">Nombre de categoría</a></p> <p class=\"links\"><img src=\"img/nav-arrow.png\" width=\"9\" height=\"8\" alt=\"\"></p> <p>Título</p></div>Estos códigos ya tienen sus estilos en el archivo style.css.AHORA SI MOSTRAMOS EL DETALLE DEL PRODUCTO6. A nuestra consulta agregamos la línea: $row = mysqli_fetch_array($result); para convertir el resultado de la consulta en un array. Pero sin el ciclo WHILE. Seleccionamos por ID Quitamos el $sorting No utilizamos el WHILE Agregamos las “migas de pan”7. Ahora vamos a index.php y en la tabla ubicamos el ID de la imagen8. Agregamos el enlace hacia la página: viewproduct.php <a href=\"view_product.php?id=<?=$row['id']?>\">Estamos enviando por la URL la variable ID que lleva la información de la tabla productsProfesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 149. Guardamos todo y ahora vamos a recibir esa variable en el archivo view-products10. Vamos a view_product y en la cabecera de la página debajo de include dbd_connect escribimos el código para recibir la variable ID. $id=$_GET['id'];11. Guardamos todo y probamos en el navegador. Haciendo clic en cualquier producto, ya debemos ver el detalle del producto seleccionadoMostramos la descripción del producto1. En view_product.php copiamos la columna TD y lo pegamos abajo, para que haya dos TD,2. Eliminamos el DIV con clase: description y el contenido del otro DIV3. Dentro del DIV que queda vacío escribimos el código para llamar la descripción del producto4. Guardamos y probamos en el navegador,Aunque no estamos trabajando mucho con el diseño vamos hacer unos ajustes a los estilos CSS para mostrar bien el contenido de la descripción5. Estando en la página view_product.php, vemos la tabla e insertamos una clase=”details”6. Al DIV con la descrición asignamos un <div id=\"description\">7. Abrimos style.css y nos vamos al final de todos los estilos, luego escribimos estas reglas para distribuir más o menos nuestra tabla:8. Guardamos y probamos.9. En la base de datos y en la tabla products en description agregamos un salto de línea </br>. Probamos.10. Hacemos clic n el enlace INICIO de la página, ahí se muestra el catálogo de nuestros productos11. Luego hacemos un clic en cualquier producto y se debe abrir la página de sus detalles.LECCION 8 MENU DE NAVEGACION EN EL DETALLE DE PRODUCTO  En la lección anterior N° 7 paso 5, habíamos insertado las líneas de “migas de pan”. Vamos a programar esa cadena de navegación.  Se les denomina: Migas de pan, en honor al cuento “Ansel y Gretel”  Cuando se abre el detalle de un producto debe mostrarse la cadena de navegación,  Mostrar: INICIO -> CATEGORIA -> nombre de producto1. Abrir la página: view_product.php en el editor de códigoProfesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 152. Sobre la tabla class=\"details\" , tenemos el DIV del siguiente modelo:<div class=\"menubar\"> <p class=\"links\"><a href=\"#\">Inicio</a></p> <p class=\"links\"><img src=\"img/nav-arrow.png\" alt=\"\"></p> <p class=\"links\"><a href=\"#\">Nombre de Categoría</a></p> <p class=\"links\"><img src=\"img/nav-arrow.png\" width=\"9\" height=\"8\" alt=\"\"></p> <p>Nombre del producto</p></div>3. Abrimos el archivo style.css y creamos las reglas para el DIV: /* === MIGAS DE PAN EN PAGINA PRODUCT === */ /*Estilos para el DIV \"menubar\"*/ /* Tamaño y color del texto y alineado al centro */ .menubar{ font-family: Segoe UI, verdana; font-size: 15px; color: #154895; margin-bottom: 25px; text-align: center; margin-left: 10px; } /*Ponemos el texto en línea*/ /*Lo separamos a 10px por la derecha*/ .menubar p{ display: inline; padding-right: 10px; color:#ccff33; } /*Mostramos el texto con los links y las flechas*/ .menubar .links{ display: inline; } /*Aplicamos un color HOVER a la eiqueta de enlace en el DIV=\"menubar\"*/ .menubar a:hover{ color: #125E0C; }NOTA: Las imágenes son creadas en Photoshop y se almacenan como GIF dentro de la carpeta \"img\" delproyecto.PROGRAMAR:1. En el primer enlace: Inicio, dentro de la etiqueta A escribir el enlace a la página de inicio: index.php2. En el segundo enlace: En lugar de \"Nombre de Categoría\" escribir: <?=$row['cat']?>, es decir mostrar el contenido de la columna \"cat\" de la BD que se encuentra almacenada dentro de la variable $row.Sabemos que $row es el arreglo que contiene la información de la tabla products en la BDProfesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 163. En el Tercer enlace: Nombre del producto, extraemos de la BD la columna \"title\" que se encuentra almacenada dentro de la variable \"$row\": <?=$row['title']?>.4. Luego, desde el enlace de Categoría debemos re direccionar la página hasta el grupo de categorías a la cual pertenece el producto, Es decir tenemos que abrir la página view_cat.php con los productos de esa categoría… para eso en la misma página view_product.php nos ubicamos dentro del enlace en la línea de categorías:5. Ahí escribimos la página a la que se direcciona: view_cat.php seguido del símbolo ?,6. Después escribimos la variable “CAT” que ya la tenemos declarada en view_cat.php7. Seguidamente concatenamos con & la variable “name” que también está declarada en las etiquetas H3 de la misma págin view_cat.php.8. Después escribimos el arreglo ROW desde donde extraemos “CAT” \"view_cat.php?cat&name=<?=$row['cat']?>\"9. Guardar todo y probar en el navegador.NOTA: Si no agregamos &name nos da error ya que en view_cat.php tenemos un etiqueta H3 que nosmuestra el nombre de la categoría <h3><?=$cat=$_GET['name']?></h3>ll y la estaríamos dejando sola.Por eso tenemos que enviar esa variable por la URL que a su vez contendrá la información para mostrarlos productos de esa categoría.LECCION 9 CAMPO DE BÚSQUEDAPara realizar el campo de búsqueda debemos de tener un formulario con ese campo y ungestor de nuestro formulario para poder ejecutar el envío de búsqueda.FORMULARIO para la búsqueda:1. Abrimos nuestro header.php y ubicamos el DIV=”header”,2. Dentro de ese DIV escribimos nuestro formulario o copiamos el código ya preparado:<!-- Formuario de búsqueda --><div class=\"search\"> <!-- campo de búsqueda --><form name=\"s\" action=\"search.php\" method=\"get\" id=\"buscar\"> <div class=\"lupa\"> <!-- onclick ejecuta el ACTION del formulario --> <a class=\"icon-search\" href=\"#\" onclick = \"document.s.submit()\"></a> </div>Profesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 17 <input type=\"text\" name=\"q\" value=\"Buscar\" onfocus=\"if(this.value =='Buscar')this.value=''\" onblur=\"if(this.value == '') this.value='Buscar'\"></form></div><!-- fin del id=search -->3. Después de eso abrimos style.css y escribimos las reglas. Lupa se refiere a un icono-texto que en este ejemplo no se incluye, solamente el DIV que lo contiene./* === Bloque de búsqueda ==== *//* 1. Aplicamos estilos a la caja DIV */.search{ position:relative; line-height:38px; background:#c1f0a1; float:right; width:153px; height:24px; margin-top:8px; margin-right:10px; padding-left:10px; border-radius:9px; display:inline;}/* 2. Estilos para el campo de texto para la búsqueda */.search input{ height:22px; width:115px; position:absolute; background-color:#c1f0a1; border:0; margin-left:26px; margin-top: 0px; padding:0; text-align:right; font-family:verdana, sans-serif; color:#fff; font-weight:bold;Profesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 18 font-style:italic; outline: none; /* Esto poner.. solo al finalizar el footer */}/* 3. Aplicamos dimensiones para el Texto vectorial del enlace (lupa) */.icon-search{ width:22px; height:14px;}/* 4. Estilos para el DIV que contiene a la lupa */.lupa{ height: 18px; width: 22px; float:left; margin-top:2px; position:absolute; font-size:16px;}/* 5. Aplicamos estilos para la A de la caja LUPA y su A:HOVER */.lupa a{ float:left; margin-left:-9px; margin-top:1px; background-image:none; color:#5cc508; text-decoration:none;}.lupa a:hover{ color:#000; text-decoration:none;}PAGINA search.php PARA GESTIONAR LA BÚSQUEDA4. Copiamos index.php y guardamos como search.php5. Eliminamos todo el $sorting y case – Break, dejamos solo el include db_conecction6. Más abajo en la consulta $query también eliminamos el $sorting  Como nuestro formulario tiene un INPUT con nombre \"q\", todo lo que se escriba dentro del INPUT se enviará por la URL,  Vamos a recibir esa variable \"q\" en nuestra página search.php7. En la cabecera de la página, debajo de los includes escribimos:8. $search = clear_string($_GET['q']); claro que agregamos el código de limpieza, ya que los datos irán a la BD,9. Ahora nos dirigimos más abajo... donde está <title></title> escribimos:Profesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 19 <title>Búsqueda de: ...<?php echo $search;?></title>10. Ahora más abajo... en la consulta a la BD, debemos reconocer las palabras que se escribe en el buscador y compararlas con las que están en la BD, para eso hay una función especial: LIKE11. En la consulta despues de FROM products debe estar: WHERE title LIKE $search,  Es decir, se buscará en la columna \"title\" de la tabla y con LIKE se va comparar lo que tiene la variable $search  En la consulta a la BD debemos tener: $query = \"SELECT * FROM products WHERE title LIKE '%$search%'\";  Los símbolos de % indican que donde se encuentre algo del nombre del producto eso y hay que mostrar.  Si colocamos NOT LIKE, se mostrarán los productos que no contengan la palabra que tiene el buscador,12. En el ciclo WHILE agregamos MYSQL_ASSOC a nuestro arreglo: $row después de $result13. En la página: search.php nada más14. GUARDAR TODO Y DEBE FUNCIONAR MUY BIEN.Pero ¿qué pasa si no hay resultados de búsqueda?1. Para solucionar esto, abrimos search.php2. Ubicamos el ciclo WHILE3. Encima de ese código agregamos las siguientes líneas que ya la utilizamos cuando realizamos view_cat.php: $totalRowsCat= mysqli_num_rows($result); if($totalRowsCat > 0) //si hay resultados en la fila, lo mostramos... {4. Luego debajo del ciclo, del cierre de WHILE y aún más abajo después de la etiqueta de cierre ?> agregamos:<?php } else {echo \"<p align='center' style='color:#fff;'>No hay productos con ese criterio debúsqueda</p>\";} ?>  Estamos contando las filas que tienen datos y colocamos la condicional, comprobando si el número de filas es mayor a cero entonces que realice todo el ciclo WHILE…  Más abajo…ELSE, de lo contrario que nos muestre el aviso de no haber encontrado nada…5. Guardamos y probamos todo6. Busquemos algún producto que no exista en la base de datos, por ejm. samsung o ACER7. PERFECTO, pero en la página del resultado de la búsqueda se ven la línea de filtros y el Nombre de la categoria.8. Miremos nuestra consulta.Profesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 209. Veamos en el código, donde están <h3>Nuevos</h3> y <div class=\"filtro\">10. En medio de ellos abrimos <?php ?>11. Hasta ese lugar vamos a mover nuestro código12. Guardar todo y probar. FUNCIONA.13. Eliminemos el Titulo H3, las etiquetas las dejamos.NOTA: La línea de los filtros podemos eliminarla tanto en la página SEARCH.PHP como en la deview_cat.Por lo menos en search.php ya que ahí, por lo general no hay muchos resultados y no esindispensable los filtros.Profesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 21SEGUNDA PARTE: CARRITO DE LA COMPRALECCION 1 – AGREGAR PRODUCTOS AL CARRITO  Hasta ahora tenemos los productos en nuestro catálogo, tenemos la página con los detalles del producto y el menú de categorías.  Vamos para comenzar esta lección agregar un botón que sirva para agregar el producto al carrito.Crear la página para el carrito: cart.php1. copiamos view_product.php y la renombramos como cart.php2. Abrimos y eliminamos todo el contenido de la columna TD: <td id=\"main-block\" valign=\"top\">3. Eliminamos también: $id=$_GET['id']; de la cabecera. Dentro de TD escribimos: CARRITOASI NOS DEBE QUEDAR TODA LA PAGINA:4. Guardamos todo y abrimos el navegador y en la URL escribimos: localhost/www/shop/cart.php, luego presionamos ENTER para visualizar la página en el navegador… Lo único que debemos ver ahí es la palabra CARRITO  Seguidamente en la página cart.php vamos a colocar nuestra tabla para el carrito y tendrá un formulario para que el cliente pueda visualizar sus compras.  Dentro de la etiqueta TD de cart.php digitamos o nos valemos del código preparado:  Ese código lo podemos encontrar en la carpeta Adds del proyecto: cart.txt,5. Copiamos el código y lo pegamos dentro de <td id=\"main-block\" valign=\"top\"> CARRITO </td>Profesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 22<h2 align=\"center\">Su carrito de compra</h2><table id=\"mycart\" align=\"center\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\"> <tr> <th>Producto</th> <th>Precio</th> <th>Cantidad</th> <th>Subtotal</th> </tr> <tr> <td align=\"center\">Samsung S7</td> <td align=\"right\">S/. 980.00 </td> <td align=\"center\"><input type=\"text\" name=\"\" value=\"1\" size=\"2\" required/></td> <td align=\"left\">S/. 980.00 </td> </tr> <tr> <td> </td> <td> </td> <td align=\"right”><p>Precio de compra: </p></td> <td align=\"left\"><p><span class=\"product-price\">S/. 980.00</span> </p></td> </tr> <tr> <td> </td> <td> </td> <td align=\"right”><p>Total incl. 18% IGV: </p></td> <td align=\"left\"><p><span class=\"product-price\">S/. 1156.40</span> </p></td> </tr></table>6. Guardamos cart.php y visualizamos en el navegador, como en el paso 4 anterior,  Lo que debemos ver en la página es una tabla con los encabezados y en la 2da fila, los símbolos de S/. y un campo de texto debajo de Cantidad.7. Volvemos al editor de códigos,  Lo que haremos a continuación es abrir nuestra página: view_product.php y agregar un botón de “Agregar al carrito”  Verificamos de tener preparado un BTN para la acción: En este caso contamos con las imágenes btn-cartH y btn-cartN (es opcional, podemos usar el estándar)8. Abrimos view_product.php y ubicamos el DIV=”description” casi al final de la página9. debajo del DIV con el elemento description y debajo de la etiqueta </TR>, insertamos una fila TR para la tabla y un TD dentro de la fila.10. Ahora insertamos un formulario dentro del TD anterior, con los datos necesarios para enviarlos por POST:  Input tipo HIDDEN Con el poducto y el Precio y una cantidad 1 por defecto<form name=\"s\" method=\"post\" action=\"cart.php\"> <input name=\"nombre\" type=\"hidden\" id=\"producto\" value=\"<?php echo $row['title']; ?>\" /> <input name=\"precio\" type=\"hidden\" id=\"precio\" value=\"<?php echo $row['price']; ?>\" /> <input name=\"cantidad\" type=\"hidden\" id=\"cantidad\" value=\"1\" /> <!--botón con imagen para agregar al carrito--> <input type=\"image\" src=\"img/btn-cartN.png\" alt=\"Recibir descuento\"onmouseover=\"this.src='img/btn-cartH.png'\" onmouseout=\"this.src='img/btn-cartN.png'\"name=\"submit\"></form>11. Probamos en el navegador esta página: view_product.phpProfesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 2312. Probamos en el navegador, actualizando el navegador, ya que lo teníamos abierto, En esta tabla se mostrarán los productos agregados desde la tienda o desde el detalle del producto, aparecerán el nombre del producto, su precio, la cantidad de productos y el precio total. Agregaremos después un botón para actualizar la cantidad de productos si se cambia manualmente la cantidad de productos en el campo Cantidad. y otro para eliminar.Activamos el enlace: “Ver el Carrito”13. Abrimos header.php y ubicamos el DIV que tiene el ID=cart al final de la página,14. En la etiqueta A asignamos el enlace hacia la página del carrito: \"cart.php\" Podemos cambiar “Su Carrito” por “Ver el carrito”15. Guardamos y Probamos en el navegador y hacemos clic en: carritoSi parece que no responde es porque estamos en la página cart.php; hagamos clic en cualquiera de los enlaces en el menú de categorías o en Inicio y cliqueamos en “Su Carrito” en la cabecera de la página.16. Debe llevarnos lógicamente a la página: cart.php donde está la tabla del carritoYa tenemos el carrito ahora solo hay que ir por compras, para ir agregando productos a nuestro carritoAgregar productos al carrito: Programar el botón “Agregar…”Para agregar productos al carrito debemos trabajar con sesiones1. Vamos a cart.php, la que está en la raíz del sitio:2. Ubicamos: include(includes/db_connect.php); Utilizaremos las variables de sesión, para que se pueda memorizar todos los datos que se envían desde el formulario de pedido. Se podrá mantener en memoria mientras dura la sesión del visitante. Tener en cuenta que si el visitante sale del carrito esos datos se eliminarán.3. Primero le decimos a PHP que queremos utilizar las variables de sesión, digitamos: Digitamos por encima de la página… debajo de include(includes/db_connect.php); Session_start();4. Ahora le preguntamos si está dado de alta el carrito o le están enviando datos, creamos una variable: pedido – Tener en cuenta que las variables se escriben con el símbolo del dólar. Con la condicional if($_SESSION['pedido']) y entre las comillas simples digitamos pedido es decir el nombre de la variable de sesión que queremos recuperar, luego digitamos dos líneas verticales con ALT+124 luego por el método que estamos enviando $_POST y entre comillas simples ponemos el dato que nos envía ['producto'] en este caso producto. Abrimos y cerramos llaves:Profesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 24if($_SESSION['pedido'] || $_POST['nombre']){ } Hay un carrito dado de alta… o me han enviado algo? if($_SESSION['pedido']) {  Si esta dado de alta… vamos a recuperar los datos…$compras=$_SESSION['pedido']; Le estamos diciendo que recupere el pedido y lo coloque en unavariable: compras, la variable pedido tiene varios elementos por eso será una matriz.5. Ahora vamos a recuperar los datos que me han enviado y añadirlo a la matriz, para ello vamos a crear una serie de variables y lo recuperamos lo que enviaron por el método POST en otras palabras recupera los datos que le han enviado por el formulario.  Debajo de $compras escribimos: $nombre=$_POST['nombre']; $precio=$_POST['precio']; $cantidad=$_POST['cantidad'];6. Luego añadimos a la matriz $compras lo que me han enviado – los corchetes vacíos indican que se trata de una matriz.  Debajo de los datos recuperados (los 3 de arriba) escribimos: $compras[]=array(\"nombre\"=>$nombre,\"precio\"=>$precio,\"cantidad\"=>$cantidad);7. Después de la última línea escrita cerramos la llave } que proviene de la primera línea escrita (arriba if($_SESSION['pedido']) .8. Si no existe carrito de alta (Escribimos ELSE), entonces hará lo mismo pero no recupere la variable de sesión.  Copiar y pegar los códigos de entrada de datos en la tabla (los datos recuperados desde el POST… ver la repetición en el código completo desde ELSE. En la página de código completo.9. Por último, actualizamos la matriz pedido que contiene una matriz asociativa del o de los nuevos elementos enviados dependiendo si había pedido o no, ya sea porque hay nuevos elementos o porque es la primera vez que la utilizan.  Debajo del ARRAY del ELSE escribimos: $_SESSION['pedido']=$compras;10. Si guardamos y visualizamos nos dará un error ya que no hemos verificado si existen tales variables, o si están dadas de alta.  Para verificar, modificamos el código inicial de arriba después del IF y entre paréntesis digitamos isset, ver el código completo. if(isset($_SESSION['pedido']) || isset($_POST[nombre]) ) {11. Después de esto guardar y probar en el navegador. Se debe mostrar sin errores. Aquí el código completo hasta ahora:<?php session_start(); if(isset($_SESSION['pedido']) || isset($_POST['nombre'])) { if(isset($_SESSION['pedido'])) { $compras=$_SESSION['pedido']; $nombre=$_POST['producto']; $precio=$_POST['precio']; $cantidad=$_POST['cantidad']; $compras[]=array(\"nombre\"=>$nombre,\"precio\"=>$precio,\"cantidad\"=>$cantidad);Profesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 25 } else { $nombre=$_POST[nombre]; $precio=$_POST['precio']; $cantidad=$_POST['cantidad']; $compras[]=array(\"nombre\"=>$nombre,\"precio\"=>$precio,\"cantidad\"=>$cantidad); } $_SESSION['pedido']=$compras;}?>CREAMOS EL BUCLE CON FOR1. Ahora trabajaremos en la fila 2da fila de la tabla de nuestro carrito, para visualizar en esta tabla los datos enviados del pedido de productos:2. Ubicamos la posición en la tabla En esta fila de la tabla trabajaremos3. Ponemos el cursor del mouse encima de TR y escribimos: <?php if(isset($_SESSION['pedido'])){ //si existe la session PEDIDO comenzamos a contar desde CERO $total=0;  agregamos este código al sacar el cálculo del total de la compra yañadimos la suma a la parte de debajo de TR (ver más abajo) for($i=0;$i<=count($compras)-1;$i ++){ //iniciamos el bucle contando mientras el índice sea menor o igual a lo que haya en la matriz $compras (El -1 es porque las matrices empiezan en cero), entones se agregará uno. ?>4. Ahora abajo donde termina la fila </tr> vamos a cerrar las llaves del IF y del FOR.  Ahí también aprovechamos para crear la variable del total de la compra que encada ciclo se va aumentando <?php $total=$total + ($compras[$i]['precio'] * $compras[$i]['cantidad']); } } ?>Profesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 26Cálculos en el carrito1. Nos colocamos en la celda del nombre (donde dice Samsung S7), correspondiente al Nombre del producto y colocamos la siguiente etiqueta: <td align=\"center\"><?php echo $compras[$i]['nombre'] ?></td>2. Nos colocamos en la siguiente celda, correspondiente al Precio del producto y colocamos la siguiente etiqueta: <td align=\"right\"><?php echo (number_format(($compras[$i]['precio']),2)); ?></td>3. Nos colocamos en la siguiente celda, correspondiente a la Cantidad del producto y colocamos la siguiente etiqueta dentro del value del INPUT: <td align=\"center\"> <input type=\"text\" name=\" \" value= \"<?php echo $compras[$i]['cantidad'] ?>\"></td>4. Nos colocamos en la celda correspondiente al Sub-total de la mercancía y colocamos la siguiente etiqueta: <td align=\"right\"><?php echo $compras[$i]['precio'] * $compras[$i]['cantidad'] ?></td>5. Nos colocamos en la celda, correspondiente a Precio de compra: del producto y dentro del SPAN colocamos la siguiente etiqueta: <span class=\"product-price\">S/. <?php if(isset($total)){ echo $total; }?></span>6. Nos colocamos en la celda correspondiente al Total incl. 18% IGV: del producto y dentro del SPAN, colocamos la siguiente etiqueta: <span class=\"product-price\">S/. <?php if(isset($total)){ echo $total*1.18;}?></span>7. Guardamos todo y probamos en el navegador. DEBE FUNCIONAR TODO BIEN.EL CODIGO COMPLETO DEL BUCLE y los totales ES EL SIGUIENTE:Profesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 27CONTROLAR DATOS DUPLICADOS  Hasta ahora en el carrito al agregar el mismo producto varias veces, este no se suma, si no que se va añadiendo ocupando nueva fila en el carrito.  Vamos a controlar esos datos duplicados para que al agregar un producto varias veces se vaya sumando en la misma fila.1. En carrito.php ubicamos el siguiente Código:if(isset($_SESSION['pedido'])) { $compras=$_SESSION['pedido']; y agregamos el siguiente para comprobar queme escriban los datos solo si me lo envian por el POST: if(isset($_POST['nombre'])){ Es decir si existe ese dato ya no lo volverá a escribir,antes de digitarlo en la matriz se tiene que cuestionar si ya existe. Su llave de cierre colocamos despuésdel array: $compras[]… }2. Seguidamente creamos un Programa de control si existen datos, Digitamos después de los rellenos,es decir después de lo siguiente: $producto=$_POST['compras']; $precio=$_POST['precio']; $cantidad=$_POST['cantidad'];Nos creamos una variable $existe $existe=-1; -- > menos 1 significa que no hay elementos for($i=0;$i<=count($compras)-1;$i ++){ - >Nos creamos un pequeño buclecomprobando si en la matriz existen datos if($nombre==$compras[$i]['nombre']){ $existe=$i; -> si hay elementos iguales que lo modifique alnuevo elemento enviado - a la variable $existe. } //cierre del IF dentro del FOR } //cierre del FOR if($existe != -1){$compras[$existe]=array(\"nombre\"=>$nombre,\"precio\"=>$precio,\"cantidad\"=>$cantidad); ->se añade en un elemento concreto en la variable $existe, si el elemento ya existe entonces que loremplace. } else{ Este es el cierre del IF anterior $compras[]=array(\"nombre\"=>$nombre,\"precio\"=>$precio,\"cantidad\"=>$cantidad); -> esto se cumplirá si el elemento es igual a -1 es decir no existe: si no hay datos pues lo escribe. } //Cierre del ELSE anterior } // cierre del if(isset($_POST['nombre'])){ } // cierre del if(isset($_SESSION['pedido'])) { Arriba al inicio del código* Para que me actualicen los datos cuando el visitante presiona dos veces el mismo producto aumentela cantidad en la tabla de pedido:Después del código: if($existe != -1){ digitamos lo siguiente para que realice la suma:$cuanto=$compras[$existe]['cantidad']+$cantidad;Y en el siguiente reglón modificamos el código:$compras[$existe]=array(\"nombre\"=>$nombre,\"precio\"=>$precio,\"cantidad\"=>$cuanto); -> Esta partede código es opcional - si se utiliza no olvidar cambiar la variable cuanto. Profesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 28 CODIGO COMPLETO DEL CARRITO<?phpinclude (\"includes/db_connect.php\"); session_start();if(isset($_SESSION['pedido']) || isset($_POST['nombre'])) { if(isset($_SESSION['pedido'])) { $compras=$_SESSION['pedido']; //en esta posición el enlace \"Su carrito\" funciona if(isset($_POST['nombre'])){ //para controlar duplicados $nombre=$_POST['nombre']; $precio=$_POST['precio']; $cantidad=$_POST['cantidad']; $existe=-1; //sigue aquí control de duplicados for($i=0;$i<=count($compras)-1;$i ++){ if($nombre==$compras[$i]['nombre']){ $existe=$i; } } if($existe != -1){ $cuanto=$compras[$existe]['cantidad']+$cantidad; //Actualiza datos alpresionar un producto varias veces. En cantidad modificamos a $cuanto... ver la sig. línea $compras[$existe]=array(\"nombre\"=>$nombre,\"precio\"=>$precio,\"cantidad\"=>$cuanto); }else{ $compras[]=array(\"nombre\"=>$nombre,\"precio\"=>$precio,\"cantidad\"=>$cantidad); } } // cierre del if(isset($_POST['nombre'])) .. Hasta aquí control de duplicados } else { $nombre=$_POST['nombre']; $precio=$_POST['precio']; $cantidad=$_POST['cantidad']; $compras[]=array(\"nombre\"=>$nombre,\"precio\"=>$precio,\"cantidad\"=>$cantidad); } $_SESSION['pedido']=$compras;}?>Profesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 29LECCION 2 -- ACTUALIZAR Y ELIMINAR PRODUCTOS DEL CARRITOEl usuario tendrá la posibilidad de aumentar o disminuir manualmente la cantidad de productosdirectamente en el carrito.ACCIONES PREVIAS:  Crear unas imágenes que servirán de botón en el formulario para actualizar o eliminar  Guardarlas en la carpeta IMG del sitio: actualizar.png y eliminar.png¿Qué vamos hacer?  Botón Actualizar y botón Eliminar dentro de su respectivos formulario  Vamos a crear un formulario en la columna de la Cantidad y otro en la columna SubtotalACTUALIZAR1. Abrimos la página cart.php y ubicamos en el código, la fila de la tabla TR donde tenemos el bucle FOR. Nos interesa la línea de la cantidad siguiente:2. Dentro de la etiqueta TTD donde está la “cantidad” insertamos un formulario:<td align=\"center\"><form name=\"form1\" method=\"post\" action=\"\"><input type=\"text\" name=\" \" value=\"<?php echo $pedido_mio[$i]['cantidad'] ?>\" size=\"2\" required></form></td>3. Encima de la línea del input “cantidad” insertamos un INPUT tipo HIDDEN y de nombre “id”. En el value insertamos el índice del bucle $i, que corresponde a la secuencia de la matriz. <input type=\"hidden\" name=\"id\" id=\"id\" value=\"<?php echo $i;?>\" >4. Guardamos y probamos en el navegador. Ahí en el navegador hacer clic derecho en la página y seleccionar: “Ver código fuente”  En ese código fuente se muestra el código HTML que es el resultado del PHP. Ahí ubicamos el input tipo HIDDEN y vemos su VAUE… empieza de cero y la secuencia 1, 2, etc., dependiendo de la cantidad de filas en el carrito. Volver al proyecto.5. Después, en la línea de “cantidad”, colocar en el name=”actualizada”6. Seguidamente debajo de la línea de código de “cantidad” insertamos un campo tipo “image” que nos servirá de botón. De nombre ponemos: “actualizar”. En src= colocamos la dirección a la imagen. <input type=\"image\" name=\"actualizar\" id=\"actualizar\" src=\"img/actualizar.png\">  La imagen la debemos tener almacenada en la carpeta “img” del sitio.  Con esto ya tenemos listo el formulario de actualización.7. EL código completo de la etiqueta TD donde está la cantidad en la siguiente imagen:Profesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 30PROGRAMAR EL BOTÓN ACTUALIZAR CARRITO8. Nos vamos al código PHP encima de la página del cart.9. Ubicamos la última línea de código: $_SESSION['pedido']=$compras;10. Encima de esa línea escribimos: if(isset($_POST['actualizada'])){ $id=$_POST['id']; $contador_cant=$_POST['actualizada']; if($contador_cant<1){ $compras[$id]=NULL; }else{ $compras[$id]['cantidad']=$contador_cant; } } EXPLICACION:  Si existe vía POST el parámetro del input de nombre “actualizada” (IF) entonces, significa que queremos modificar la cantidad del mismo producto que queremos comprar, para ello vamos a recuperar el “id” que nos envían del POST $id.  Creamos una variable “$contador_cant” donde asignamos el valor que el usuario a introducido en el campo de texto llamada “actualizada”.  Después comprobamos si el usuario a introducido el CERO (2do IF), si lo ha introducido entonces eliminamos de la matriz $compras.  De lo contrario (ELSE), si hay otro valor mayor a cero, actualizamos la matriz: la matriz se llama $compras11. Guardar y probar en el navegador.ELIMINAR PRODUCTO DEL CARRITODebajo de la línea de código “Actualizar” está la línea del subtotal.1. Insertar un formulario para el botón “Eliminar” dentro de esa etiqueta TD2. Ahora, antes de la etiqueta de cierre del formulario insertar un input tipo image para nuestro botón e indicamos la dirección a esa imagen: <input type=\"image\" name=\"eliminar\" id=\"eliminar\" src=\"img/eliminar.png\" >Profesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 313. Debajo de la línea anterior inserter un Input de tipo HIDDEN para enviar los valors del índice. De nombre poner: id2 y de value el índice$i <input name=\"id2\" type=\"hidden\" id=\"id2\" value=\"<?php echo $i;?>\"> Código completo para el botón ELIMINARPROGRAMAR EL BOTÓN ELIMINAR DEL CARRITO4. Nos ubicamos por debajo del código “actualizar” encima de la página5. Escribimos las siguientes líneas: if(isset($_POST['id2'])){ //si existe el envío $id=$_POST['id2']; //guardamos el envío en una variable $compras[$id]=NULL; // y eliminamos el registro de la matriz }LECCION 3 - MOSTRAR IMAGEN EN EL CARRITO DE LA COMPRA  Para mostrar la imagen del producto que se compra, debemos agregar en el envío por POST desde la página view_product.php, después debemos recuperar ese envío en la página cart.php,  Ahí en los códigos debemos agregar el parámetro de la imagen dentro de la matriz “$compras” en todas las líneas donde estén los demás parámetros como nombre, precio, cantidad.  Después debemos agregar una columna en la tabla para la imagen, tanto en el encabezado como en el contenido del bucle,  Después dentro de la línea TD de la imagen (en el bucle) debemos señalar la dirección a la carpeta donde están almacenadas las imágenes1. Abrimos view_product.php y ubicamos en la tabla de “detalles del producto” el formulario de nombre:”s”2. Inmediatamente después de la apertura del formulario escribimos la línea de código de insersión de un INPUT de tipo HIDDEN con nombre “imagen” y en value insertamos el valor de la BD, <input name=\"imagen\" type=\"hidden\" id=\"imagen\" value=\"<?php echo $row['image']; ?>\" /> CODIGO MODIFICADO EN LA TABLA DE VIEW_PRODUCT.PHPProfesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 323. Guardamos y nos vamos a cart.php y ubicamos el código donde se recuperan las variables enviadas por POST.4. Debajo del $nombre escribimos la variable para la imagen:5. Seguidamente vamos agregando esa variable en todos los lugares donde se hace referencia a los parámetros recuperados por POST. Insertamos la imagen en la matriz $compras,6. Después nos vamos al código HTML en la misma página cart.php7. Ubicamos la tabla: <table id=\"mycart\" y agregamos una columna “Imagen”8. Ahora nos vamos al bucle FOR, más abajo y dentro de TR del bucle encima de la línea de código “nombre”:  insertamos la columna para visualizar la imagen insertada ya en la matriz “$compras”,  Indicamos la dirección a la carpeta donde están almacenadas las imágenes.  También le aplicamos un tamaño acorde a la tabla.9. Verificar las columnas del “Precio de compra” y “Total incl. IGV” y agregar columnas vacías para corregir la posición con respecto a los subtotales.10. Guardamos todo y probamos en el navegador. ¡Todo debe estar funcionando muy bien!!!NOTA:1. Si es necesario, modificar el ancho de la tabla del carrito. “#mycart” a 70%2. Agregar number format a: subtotal, Precio de compra y Total incl IGV o S/. <?php echo (number_format(($compras[$i]['precio'] * $compras[$i]['cantidad']),2)); ?> o S/. <?php if(isset($total)){echo(number_format($total,2)); }?> o S/. <?php if(isset($total)){ echo (number_format(($total*1.18),2));}?>Profesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 33CODIGO COMPLETO PARA EL CARRITO<?phpinclude (\"includes/db_connect.php\"); session_start();if(isset($_SESSION['pedido']) || isset($_POST['nombre'])) { if(isset($_SESSION['pedido'])) { $compras=$_SESSION['pedido']; //en esta posición el enlace \"Su carrito\" funciona if(isset($_POST['nombre'])){ //para controlar duplicados $nombre=$_POST['nombre']; $imagen=$_POST['imagen']; $precio=$_POST['precio']; $cantidad=$_POST['cantidad']; $existe=-1; //sigue aquí control de duplicados for($i=0;$i<=count($compras)-1;$i ++){ if($nombre==$compras[$i]['nombre']){ $existe=$i; } } if($existe != -1){ $cuanto=$compras[$existe]['cantidad']+$cantidad; //Actualia datos al presionar unproducto varias veces. En cantidad modifcamos a $cuanto... ver la sig línea $compras[$existe]=array(\"nombre\"=>$nombre,\"imagen\"=>$imagen,\"precio\"=>$precio,\"cantidad\"=>$cuanto); }else{ $compras[]=array(\"nombre\"=>$nombre,\"imagen\"=>$imagen,\"precio\"=>$precio,\"cantidad\"=>$cantidad); } } // cierre del if(isset($_POST['nombre'])) .. Hasta aquí control de duplicados } else { $nombre=$_POST['nombre']; $imagen=$_POST['imagen']; $precio=$_POST['precio']; $cantidad=$_POST['cantidad']; $compras[]=array(\"nombre\"=>$nombre,\"imagen\"=>$imagen,\"precio\"=>$precio,\"cantidad\"=>$cantidad); }// Actualizar nuevos ingresos en campo de textoif(isset($_POST['actualizada'])){ $id=$_POST['id']; $contador_cant=$_POST['actualizada']; if($contador_cant<1){ $compras[$id]=NULL; }else{ $compras[$id]['cantidad']=$contador_cant; }}// Para eliminar produtos del carrito// despues de este código, ir al bucle FOR de la tablay debajo del FOR agregar if($compras[$i]!=NULL){ }<-- esta llave de cierreal final de TR debajo de \"$total\"if(isset($_POST['id2'])){ $id=$_POST['id2']; $compras[$id]=NULL;} $_SESSION['pedido']=$compras;}?>Profesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 34Profesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 35Profesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 36LECCION 4 - ENVIAR PEDIDO (página order.php)Una vez llenado el carrito nos vamos a enviar el pedido de compras preparando con esto la orden decompra.¿Qué haremos?  Crearemos una página nueva con el nombre: order.php conde tendremos una tabla con el resumen de la compra la cual enviaremos al proveedor.La tabla será na copia de la tabla del carrito a diferencia que no tendrá la imagen, no tendrá la opción de modificar la cantidad ni eliminar.  Tendrá también los datos principales del comprador, para ello debemos agregar campos de texto para los datos a enviar.  En cart.php vamos a crear un botón con imagen para hacer el enlace hasta la página order.  Debemos crear botones para el envío del pedido y otro botón para el envío final de la orden de compra: un botón para estado normal y otro para cuando se ponga el mouse encima del botón. “enviar_N.png y enviar_H.png” y “order_N.png y order_H.png”.CREAR PÁGINA ORDER.PHP1. Abrimos cart.php y lo guardamos como: order.php2. Eliminamos todo el código PHP de la cabecera pero no las etiquetas <?php ?> ni el include de la conexión a la BD y guardamos,3. Dentro de esas etiquetas escribimos: session_start(); //Abrimos sesión if(isset($_SESSION['pedido'])) { //si está dada de alta la sesión $compras=$_SESSION['pedido']; //vamos a recuperar las variables de sesión }4. Ahora abrimos otra vez cart.php y nos ubicamos al final de la <tabla: id=\"mycart\"> … </table>5. Insertamos las siguientes etiquetas en este modelo: <form name=\"enviar\" method=\"post\" action=\"order.php\"> <p align=\"center\"><span>ENVIAR</span></p> </form>6. Guardamos cart.php y probamos en el navegador. Debe estar centrado  Seguidamente, como ya tenemos en la carpeta “img” nuestros botones, vamos a utilizarlo.7. En la etiqueta <p> que agregamos en la página cart.php en lugar del texto que escribimos: ENVIAR, colocamos el siguiente código. <p align=\"center\"><span> <!--botón con imagen para enviar pedido--> <input type=\"image\" src=\"img/enviar_N.png\" alt=\"Enviar pedido\" onmouseover=\"this.src='img/enviar_H.png'\" onmouseout=\"this.src='img/enviar_N.png'\" name=\"submit\"> </span></p>  Con estas líneas de código el botón del formulario enviará los datos del carrito hacia la página order.php8. Guardamos la página, probamos en el navegador y cerramos.9. Volvemos a la página order.php10. EN order vamos hacer las siguientes modificaciones en la tabla:Profesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 37 Eliminamos la columna del encabezado: imagen, y eliminamos las demás columnas en la tabla del bucle FOR, que agregamos en cart.php para mostrar la imagen, Ahora vamos a la TD donde tenemos la “cantidad” dentro del bucle FOR, ahí tenemos el FORM de actualizar, como ya no necesitamos actualizar vamos a eliminarlo. Primero eliminamos las etiquetas de apertura y cierre del formulario Eliminamos el INPUT tipo HIDDEN y eliminamos el INPUT tipo image. Seguidamente el contenido del value en el INPUT que nos queda, lo copiamos y pegamos inmediatamente después de apertura de la etiqueta <td>11. Hacemos lo mismo con el formulario “Eliminar”12. Guardar y probar. Si se ven muy juntas las líneas de los totales con las filas de compras podemos modificar el CSS o agregar un salto de línea <br/>13. Seguidamente ubicamos nuestra tabla entera del pedido: <table id=\"mycart\">…</table>14. Antes y después de la apertura de sus etiquetas insertamos etiquetas de formulario: <form action=\"enviar.php\" method=\"post\"><table id=\"mycart\">…</ table> </form>15. Ubicamos H2 y cambiamos el título por: <h2 align=\"center\">Boleta de envío de compra</h2>INSERTAR BOTON ENVIAR ORDEN DE COMPRA AL PROVEEDOR16. En la página order, dentro del formulario y al final de la etiqueta de cierre de la tabla. Entre el cierre de la tabla y el cierre del formulario, insertar etiqueta <p> y dentro un INPUT tipo imagen con el siguiente código: <p align=\"center\"><span> <input type=\"image\" src=\"img/order_N.png\" alt=\"Enviar compra\" onmouseover=\"this.src='img/order_H.png'\" onmouseout=\"this.src='img/order_N.png'\" name=\"submit\"> </span></p> Las imágenes de botón previamente preparadas están en la carpeta “img” del sitio17. Guardamos y probamos. Todo hasta aquí muy bien.Agregar campos en el formulario de compra para los datos del cliente1. En order.php ubicar el cierre de la tabla y la etiqueta <p> del botón que agregamos2. Encima del código del botón insertar una etiqueta <p> y dentro escribimos los campos de texto para los datos del cliente:Profesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 383. Guardar y probar.4. Presionar el botón para enviar con los campos vacíos y ver lo que pasa.Seguidamente es realizar el archivo PHP que se encargará de enviar el pedido al proveedor y una copiaal cliente.Profesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 39LECCION 5 – ENVIAR DATOS AL PROVEEDOREnvío de correo al proveedor y alerta de envío. ENVIAR CORREO¿Qué haremos?  En esta lección veremos la última parte del carrito de compras, esta página se encargará de enviar y mostrar en pantalla una copia del correo enviado.  Crearemos una página nueva a partir de order.php que guardaremos con el nombre: enviar.php1. Abrir order.php y guardarlo con el nombre: enviar.php2. Eliminar todo el contenido dentro del formulario, incluyendo la tabla. Todo lo que está dentro.3. En el título H2 cambiamos el texto a : “Enviando formulario de compra…”4. Debajo de esa línea agregar un H3 y dentro escribir: “Espere unos instantes…”  EL usuario lo vera unos segundos, ya que después en forma oculta enviará los datos del formulario de compra.  Seguidamente escribiremos el código necesario para que se envíe los datos insertados en el formulario de compra.5. Nos dirigimos a la cabecera de la página enviar.php y abrimos las etiquetas PHP6. Abrimos la sesión session_start();Enviar datos del carrito7. Preguntamos si está dada de alta la sesión (aunque no haga falta lo haremos) if(isset($_SESSION['pedido'])){ la llave de cierre estará al final de todo el código,8. Recuperamos los datos enviados. Para eso nos creamos una variable llamada $compras y asignamos la variable de sesión $compras=$_SESSION['pedido']; (con esto guardamos en memoria)9. Seguidamente crearemos una variable que contendrá todo el mensaje que se enviará, es decir el formulario de compra, le llamaremos FACTURA, $factura=\"Detalle de la compra. <br><br>\";  Esto le enviaremos en formato HTML para que se pueda leer,  Los <br> son saltos de línea  Seguidamente creamos un bucle para que vaya recorriendo toda la matriz $compras y vaya extrayendo elementos y poniéndolos en la variable $factura  Y como queremos memoria el contenido creamos una variable $total par empezar de cero,10. Aquí el bucle que irá recorriendo por la matriz $compras y añadiendo dentro de la variable $factura, for($i=0;$i<=count($compras)-1;$i ++){ }11. Dentro de las llaves preguntaremos si $compras es diferente a NULO if($compras[$i]!= NULL){ }12. Si es diferente a nulo entonces que rellene la variable $factura con cada uno de los elementos, Concatenando lo que se visualizará en la página (. Es el punto)$factura .= $compras[$i][nombre] . \"********\" . $compras[$i]['precio'] . \" x \" . $compras[$i]['cantidad'] . \"Total : \" . $compras[$i]['precio'] * $compras[$i]['cantidad'] . \" Soles <br> \";  Los asteriscos son para dejar espacios y la X para indicar que es una multiplicación.  El total esta en otra línea al final que ahí si es el código el que multiplica, el otro (X) es solo para indicar.13. Ahora actualiza el total: $total = $total + $compras[$i]['precio'] * $compras[$i]['cantidad'];Profesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 40  Después de ese total se cierra la llave del IF dentro del FOR14. Nos salimos del bucle FOR y concatenamos la variable $factura con el total que como está dentro del bule se irá actualizando al total a pagar. $factura .= \"<br><br> Total: \" . $total;  Con esto ya tenemos el texto de nuestro pedido  Seguidamente vamos a recuperar los datos del cliente que nos envían por POST  Tendremos en cuenta los nombres asignados a esos campos: en la página order.php. Para el nombre: name, para la dirección address y para el correo email,Recuperar y enviar datos del cliente $name=$_POST['name']; //Nombre del remitente $address=$_POST['address']; //Dirección del remitente $email=$_POST['email']; //Quien envía el correo15. Ahora enviamos esos datos $factura .= \"<br><br>De: \". $name; //Recuperamos el nombre del remitente para decir De quién es el envío $asunto=\"Pedido de cursos\"; $empresa=\"Andrés - ServiciosG\"; //Nombre de la empresa $email_empresa=\"[email protected]\"; //El correo de la empresa16. Código para envío automático del correo //Menu Ventana - Referencia - O'REILLY PHP Pocket Reference; Mail Functions; mail: Eso explica el envío del correo. Eso es en DW; Pero del manual el siguiente código. mail($email,$asunto,$factura,\"MIME-Version:1.0\nContent-type:text/html;charset=UTF- 8\nFrom:$empresa<$email_empresa>\"); $asunto .= \" Copia \"; //Recibirá la empresa mail($email_empresa,$asunto,$factura,\"MIME-Version:1.0\nContent- type:text/html;charset=UTF-8\nFrom:$empresa<$email_empresa>\");  La función mail es el que se encarga de enviar los datos: primero el email, seguido del asunto y los datos de la factura.  El código MIMEVersion:1.0 nos permite escribir el mensaje en formato HTML  El código es copiado de un manual para el envío de datos con la función mail.  $empresa, $email_empresa es de quien se envía el mensaje.NOTA:  Si se requiere añadir líneas como el total con IGV se hace lo siguiente:  Arriba donde dice $factura=”Detalle de la compra” debajo de esa línea escribir: $factura2=\"Estamos incluyendo el IGV. <br>\";  Luego abajo donde dice: $total= $totl+$compras[$i] escribir: $totpagar=$total*1.18;  Yendo abajo, después de: $factura.=”<br> Total:… escribir: $factura2 .=\"<br> Total incluye IGV: \" .$totpagar;  Despues en la función mail aumentar esa variable $factura2Pero presenta error. Si se elimina $factura y se deja $factura2 en la función mail, solo sale el total conIGV, no salen los demás datos.Solución: En la línea del total escribir así: $total = $total + ($compras[$i]['precio'] * $compras[$i]['cantidad'])*1.18;Profesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 41CODIGO COMPLETO DEL ARCHIVO ENVIAR.PHP<?phpinclude (\"includes/db_connect.php\"); session_start(); //Abrimos sesiónif(isset($_SESSION['pedido'])){ //Si existe o está dada de alta la variable de sesión pedido $compras=$_SESSION['pedido']; //Recuperamos lo que hay en la variable pedido (con estoguardamos en memoria) $factura=\"Detalle de la compra. <br><br>\"; /* $factura2=\"Estamos incluyendo el IGV. <br>\"; */ $total=0; //Creamos la variable total for($i=0;$i<=count($compras)-1;$i ++){ //creamos un bucle FOR para recorrer toda la matrizpedido_mio que vaya extrayendo elementos y los ponga dentro de la variable factura if($compras[$i]!= NULL){ //Antes de rellenar los datos le preguntamos si hay elementos que han sido borrados // Luego rellena la variable pedido con cada uno de los elementos: Concatenando lo que se visualizará en la página (.) $factura .= $compras[$i]['nombre'] . \"********\" . $compras[$i]['precio'] . \" x\" . $compras[$i]['cantidad'] . \" Total : \" . $compras[$i]['precio'] * $compras[$i]['cantidad'] . \" Soles<br> \"; // la X solo muestra que se trata de multiplicaión //Actualiza la variable Total como producto del precio por la cantidad $total = $total + ($compras[$i]['precio'] * $compras[$i]['cantidad'])*1.18; /* $totpagar=$total*1.18; */ } } //cierre del FOR// Informamos el total del pedido en la factura$factura .= \"<br><br> Total incluye 18% IGV: \" . $total .\" soles\"; // El texto Total se concadena con lo quecontiene la variable $total y con la palabra: soles/* $factura2 .=\"<br> Total incluye IGV: \" .$totpagar; *///Recuperamos datos desde la página order.php$name=$_POST['name'];$address=$_POST['address'];$email=$_POST['email'];//Enviamos los datos$factura .= \"<br><br>De: \". $name;$asunto=\"Pedido de cursos\";$empresa=\"Andrés - ServiciosG\";$email_empresa=\"[email protected]\";//código para envío automático del correomail($email,$asunto,$factura,\"MIME-Version:1.0\nContent-type:text/html;charset=UTF-8\nFrom:$empresa<$email_empresa>\");$asunto .= \" Copia \"; //Recibirá la empresamail($email_empresa,$asunto,$factura,\"MIME-Version:1.0\nContent-type:text/html;charset=UTF-8\nFrom:$empresa<$email_empresa>\");} //cierre del IF inicial?>Profesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 42LECCION 6 – Enviar correos por el servidor de correos localHaremos pruebas enviando correos en el servidor local¿Qué necesitamos para enviar emails?  Necesitamos tener configurado un servidor de correos local, en nuestro ejemplo vamos a emplear el programa: “TestMailServerTool” si estamos trabajando en Windows 10. Si tenemos el Windows 7 podemos utilizar el “Minirelay”.  Ambos programas son simples y nos permiten utilizar el puerto 25 y enviar emails.1. En nuestra carpeta “adds” tenemos el programa para ejecutarlo.2. Ejecutamos el programa “TestMailServerTool” y en modo silencioso estará activo,3. Ahora simplemente abrimos en el navegador nuestro proyecto y hacemos las compras y hacer el envío.4. Después de presionar el botón de enviar en el formulario de compra, se nos abrirá el programa Outlook u otro programa de gestor de correos local y nos mostrará el mensaje.5. Vemos el código que se encarga de enviar el email al correo del proveedor:mail($email,$asunto,$factura,\"MIME-Version:1.0\nContent-type:text/html;charset=UTF-8\nFrom:$empresa<$email_empresa>\");mail($email_empresa,$asunto,$factura,\"MIME-Version:1.0\nContent-type:text/html;charset=UTF-8\nFrom:$empresa<$email_empresa>\");  diferencia del código de envío al cliente solo se cambia el email, ya que el asunto y la $factura se envían a los dos emails.NOTA: vea que se puede hacer modificaciones en el contenido del mensaje, por ejemplo: que apartedel envío del monto TOTAL, en una segunda línea por separado se puede indicar el total a pagarincluyendo IGV.6. Vamos al código del bucle FOR donde está nuestro $total,7. Esta es la línea que hay que modificar: $total = $total + ($compras[$i]['precio'] * $compras[$i]['cantidad'])*1.18;8. Lo dejamos así: $total = $total + $compras[$i]['precio'] * $compras[$i]['cantidad'];9. Luego modificamos el mensaje $factura que está después del cierre del FOR $factura .= \"<br><br> Total incluye 18% IGV: \" . $total .\" soles\";10. Cambiamos el texto a mostrar “Total de la compra y Total incluye IGV por separado”11. A la variable $total multiplicamos por 1.18 correspondiente al IGV,12. Con la etiqueta <br> de salto de línea agregamos una línea nueva:$factura .= \"<br><br> Total de la compra: \" . $total .\" soles <br>\" . \" Total incluye 18% IGV: \" .$total*1.18 .\" soles\";13. Guardamos y probamos haciendo envíos nuevos.Profesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 43LECCION 7 - PAGO POR PAYPAL (opcional)Utilizando Pago en PayPal: Se debe crear una cuenta en la página de PayPal para enviar a la pasarelade pago los datos del comprador.1. Acceder a la página Paypal: https://www.paypal.com/es/webapps/mpp/home2. Registrarse apretando el botón Crear cuenta3. Saldrá una ventana donde se indica el país y el idioma4. Seleccionar si es solo para compras y pagos en línea o para empresa que venden y compran con su razón social,5. Clic en Abrir una cuenta6. Llenar los datos del formulario como se indica, leer las condiciones de uso de PayPal7. Clic en el botón Aceptar y abrir cuenta.8. Para ingresar debe identificarse y entrar a la plataforma de PayPal9. Hacer clic en la pestaña Vender en su web (Considerar que el diseño de la página de PayPal puede cambiar con el tiempo)10. Ubicar en la página Botones Comprar ahora: Ahí definiremos un botón el cual no se verá en la página, pero si debemos utilizar el código que se generará y ejecutar la compra en la página web.11. Al entrar a esa opción debemos llenar un formulario Crear botón Comprar ahora: detalles del artículo. Los datos que se rellena en ese formulario se puede modificar después cuando ya se obtenga el código. Tener en cuenta que hay puntos opcionales,12. En Codificación de botones Activar el radio botón NO para poder luego modificar el código13. Presionar el botón Crear botón ahora14. Esperar y aparecerá un código que debemos copiar y luego ir a nuestra página enviar.php,15. Ubicar en la página el form vacío – seleccionar esas etiquetas de formulario y pegar lo que copiamos desde PayPal. <form action=\"https://www.paypal.com/cgi-bin/webscr\" method=\"post\" name=\"pago\" id=\"pago\"> <input type=\"hidden\" name=\"cmd\" value=\"_xclick\"> <input type=\"hidden\" name=\"business\" value=\"[email protected]\"> <input type=\"hidden\" name=\"item_name\" value=\" Cursos Reyand \"> <input type=\"hidden\" name=\"item_number\" value=\"CR\"> <input type=\"hidden\" name=\"amount\" value=\"<?php echo $total*1.18;?>\"> <input type=\"hidden\" name=\"no_shipping\" value=\"0\"> <input type=\"hidden\" name=\"no_note\" value=\"1\"> <input type=\"hidden\" name=\"currency_code\" value=\"Soles\"> <input type=\"hidden\" name=\"lc\" value=\"ES\"> <input type=\"hidden\" name=\"bn\" value=\"PP-BuyNowBF\"> <img alt=\"\" border=\"0\" src=\"https://www.paypal.com/es_ES/i/scr/pixel.gif\" width=\"1\" height=\"1\"> </form>16. Una vez pegado el código dentro de la página, modificaremos algunos puntos (no los nombres): a. Poner un nombre al formulario: pago b. Ubicar ítem_name y digitar el nombre de elementos por ejm. Cursos Reyand c. Modificar el valor de amount a <? print $total*1.18;?> se mostrará el total, incluido 18% del IGV. d. En el value del input “currency_code” poner la moneda nacional: Soles17. Seguidamente eliminar el botón de PayPal que viene en el formularioNOTA: con esto el formulario no se ejecutará ya que no tiene botón de submit. Para que se ejecuteautomáticamente pondremos un pequeño código java script para ejecutarlo.Profesor Andrés Email: [email protected]

Creación de una tienda en línea con PHP y MySQLi 44Ejecutar el formulario de pago. 1. Utilizaremos código JavaScript para ejecutar el formulario: 2. Vamos l código de nuestra página y nos ubicamos después del párrafo del formulario de pago, pero antes de la etiqueta de cierre </td> 3. Digitamos el Script siguiente: <script > function ejecutar(){ //creamos la función ejecutar document.pago.submit(); //va ejecutar el formulario que se llama pago por Submit } ejecutar(); //Esta línea ejecuta la función </script> En la web se puede encontrar infinidades de manuales de Java Script o simplemente encontrar códigos hechos que se pueden modificar a su manera solo se necesita pequeños conocimientos de cómo funcionan viendo ejemplos de páginas activas. 4. Guardar y probar, pero probar en el servidor. 5. Verificamos que tenemos activo el programa “TestMailServerTool” o el “Mini mail Replay” y probar, aunque se puede presentar error por no estar en un servidor web sino en local. Pero lo que importa es ver que si se envía. 6. Abrir la página con los productos, y comprar algunos productos, presionar el botón de Enviar pedido y ver el envío de compra, 7. Escribir sus datos y presionar el botón: Enviar el pedido al proveedor 8. Aparecerá la ventana de Enviando… 9. Luego aparece la página de PayPal donde se efectuará el pago, pero en nuestro ejemplo saldrá la página de PayPal, pero no mostrará porque es solo una prueba, en casos reales de compra y teniendo una cuenta real en PayPal aparecerá los datos del pedido y al visitante de la página como al proveedor le llegará un correo con los mismos datos.Todo el proceso de envío del formulario de compra lo realiza el código de JavaScript más el código delformulario de PayPal.Por medio de variables de sesión, podemos memorizar todo aquello que pase a lo largo del paseo delvisitante por nuestra página de compra. Hemos creado el carrito por medio de matrices yadministrado todo eso por medio de ellos.NOTA: Tal vez PayPal no admita pagos en soles, en ese caso toda la transacción de pago en los cálculos  del carrito de la compra realizarlo en Dólares o euros o dentro del carrito hacer el cambio de divisas.  Dentro del código de “enviar” se puede hacer el cambio de divisas colocando en el formulario de PayPal el monto ya convertido a Dólares o euros.Con esto, el carrito de la compra con el método estándar queda terminado.Adicionalmente se puede crear una parte administrativa donde se pueda subir imágenes osimplemente administrar la base de datos. Profesor Andrés Email: [email protected]