Your cart is empty.
Keep shopping
Teach on Udemy
Turn what you know into an opportunity and reach millions around the world.
Learn MoreCrear una tienda virtual con Boostrap JavaScript PHP MySQL
Crear una tienda virtual con Boostrap JavaScript PHP MySQL
Utiliza tus conocimientos para armar esta aplicación
Highest Rated
Created byFrancisco Javier Arce Anguiano
Last updated 4/2023
Spanish
What you'll learn
- Desarrollar la maqueta responsiva de la tienda virtual con Bootstrap
- Conectar la maqueta con una base de datos
- Crear el registro del usuarios, su firma en el sistema y el cambio de la clave de acceso
- Construir el carrito de compras y el ciclo de la venta
- Crear la parte administrativa o back-end de la aplicación
Explore related topics
Course content
10 sections • 107 lectures • 15h 25m total length
- Bienvenida al curso de Desarrollo de una tienda virtual4:58
En este curso partiremos desde una página en blanco hasta tener el front-end o la parte del usuario y el back-end (o la parte administrativa) de una aplicación de tienda virtual desarrollada con Bootstrap, PHP y MySQL.
- Plugins de SublimeText para PHP6:34
Entrar a https://packagecontrol.io/installation
Abrir la consola (view > show console).
Copiar el código en la consola y ejecutarlo.
Cerrar y abrir sublime text.
[Ctrl]-[shift]-[p] o tools > command palette
Escribimos
Install packages > sublime lint > detecta problemas de sintaxis.
Install packages > phpcs
- Documentar con el estándar PHPDoc5:24
PHPDocs es una adaptación de JavaDocs para documentar la programación en PHP.
- Introducción al desarrollo de la maquetación de una tienda virtual con Bootstrap3:23
El primer paso en el desarrollo de nuestra aplicación será crear una maqueta con Boostrap, la poderosa herramienta para dearrollar pàginas responsivas.
- Crear la barras de navegación o navbar11:00
La primera parte que desarrollaremos será la barra de navegación o menú principal.
- Crear el Jumbotron y la estructura de la página principal9:59
En esta lección crearemos la estructura de la página y su encabezado o jumbotron.
- Concluir la página principal con los contenidos10:38
Para terminar nuestra página principal con Boostrap, añadiremos los contenidos
- Crea las páginas de los diferentes productos a la venta9:07
En este video iniciaremos las primeras páginas de contenidos para la venta de nuestros productos.
- Crear la página para los productos, primera parte8:05
En este video iniciaremos la construcción de las páginas de los productos, los cuales tienen diferente estructura a la página principal.
- Crear la página para los productos, segunda parte9:23
Crear la página para los productos, segunda parte
- Crear la página "sobre mi"8:21
Una vez que contamos con el formato de la página, podemos tomarla para crear otras. En este caso haremos la página "sobre mi".
- Crear la página de "contacto" con un formulario13:34
Tomando las páginas bases, crearemos la maqueta de "contacto". Más adelante la programaremos con PHP y MySQL.
- Crear la página de "login" con un formulario9:44
Crearemos la maqueta de la página de inicio o login, la cual dará acceso al registro y la de olvido de la clave de acceso.
- Crear la página de "¿olvidaste tu contraseña?" y la página de agradecimiento6:02
Crearemos la maqueta para que el usuario recupere su clave de acceso.
- Crear la página "registro" con su formulario7:36
Crearemos el formulario para que el usuario se registre en el sistema y que pueda realizar compras.
- Crear la estructura de la página "carrito de compras"9:55
En este video crearemos la maqueta para el carrito de compras.
- Formatear el "carrito de compras" por medio de los estilos en cascada9:46
Añadiremos los estilos en cascada CSS para formatear el carrito de compras.
- Crear la página "checkout" para iniciar el proceso de compra4:12
Crearemos la maqueta del proceso de compras, que es el de checkout, que es muy parecido a la página de login.
- Crear la página con los datos de envío5:05
Crearemos el formato para los datos de envío, donde podemos modificar los mismos.
- Crear la página para la forma de pago5:19
Creamos la maqueta para que el usuario seleccione su forma de pago.
- Crear la página para verificar los datos y la página "Gracias por su compra"8:18
Crearemos la página para verificar los datos antes de lanzar el proceso de pago y una página de agradecimiento a la venta realizada.
- Las tablas del sistema2:02
En esta clase tendremos el primer acercamiento a las tablas entidad-relación.
- Introducción a la maqueta y los pasos para modificarla5:00
Una vez que tenemos la maqueta de nuestro sistema, lo modificaremos para trabajarlo con PHP y MySQL.
- Modificar los archivos a PHP6:42
En este video modificaremos los archivos de la maqueta a PHP.
- Crear la tabla de usuarios10:24
Un punto fundamental en el sistema es la creación de la tabla de usuarios que le permitirá el acceso al sistema y registrarse en el mismo.
- Crear el formulario para el registro del usuario12:41
En este video crearemos el formulario para que el usuario puede registrarse en nuestro sistema.
- Validar e insertar la información en la base de datos7:35
En este video revisaremos la validación e información en la base de datos dentro del proceso de registro del usuario.
- Manejo de los errores en la validación del registro del usuario14:53
Dentro del manejo de un formulario, es fundamental mostrar los errores del mismo.
- Crear y encriptar la clave de acceso en la base de datos y en el formulario8:55
En este video crearemos y encriptaremos la clave de acceso en la base de datos y en el formulario
- Crear el proceso de "login" en nuestra tienda virtual12:25
En este video crearemos el proceso de "login" en nuestra tienda virtual
- Crear las sesiones y el proceso de salida de nuestro sistema6:27
Crear las sesiones y el proceso de salida de nuestro sistema tomando la clave encriptada en la base de datos
- Crear el proceso de "recordarme" por medio de las cookies con PHP8:13
Crear el proceso de "recordarme" por medio de las cookies con PHP.
- Crear la librería para el manejo de las sesiones9:56
Crear la librería para el manejo de las sesiones
- El proceso de recuperación de la clave de acceso14:20
El proceso de recuperación de la clave de acceso
- Cambio de la clave de acceso por el usuarios (primera parte)9:36
Cambio de la clave de acceso por el usuario (primera parte)
- Cambio de la clave de acceso por el usuario (segunda parte)6:21
Cambio de la clave de acceso por el usuario (segunda parte)
- Cambio de la clave de acceso por el usuario (tercera parte)9:15
Cambio de la clave de acceso por el usuario (tercera parte)
- Crear la tabla de productos8:00
Crear la tabla de productos en phpMyAdmin
- Crear el formulario para la alta de productos13:29
Crear el formulario para la alta de productos
- Recuperar y validar la información del formulario11:40
Recuperar y validar la información del formulario.
- Validar la fecha en el formulario de productos13:13
Un proceso importante es la validación de una fecha. Lo haremos desde HTML5 y PHP
- Subir una imagen de la computadora del usuario al servidor10:13
Una tarea muy común en los desarrollos con PHP es subir las imágenes de la computadora del usuario al servidor con PHP.
- Validar la imagen y optimizar su tamaño y su peso13:35
Un caso muy utilizado es la necesidad de optimizar el tamaño de la imagen de manera proporcional.
- Validar las cantidades numéricas del formulario con PHP y HTML511:44
Es muy importante validar que el usuario escriba correctamente las cantidades en nuestros formularios.
- Validar una cadena contra la "inyección de código"9:06
Un paso muy importante en la validación de un formulario es evitar que se "inyecten" código malicioso por parte del usuario.
- Validar los campos "checkbox"4:42
La última validación será las de las cajas de validación, antes de insertar el registro en la tabla de la base de datos.
- Insertar el registro en la base de datos7:47
En este video veremos el proceso de inserción del registro en la tabla de la base de datos y los acentos y letras propias del español.
- Crear regiones dinámicas en nuestra página de Productos ABC10:49
Una forma de administrar una tabla será mantener regiones dinámicas dentro de la misma página de Altas, Bajas y Cambios,
- Mostrar los productos de nuestra tabla para seleccionarlos10:58
En este video recorreremos la tabla de los productos para mostrarlos y poder modificarlos y borrarlos.
- Desplegar los campos para ser modificados9:51
En este video iniciaremos el proceso de modificación del registro de la tabla de productos.
- Crear las listas desplegables y almacenarlas en la base de datos11:08
Crear las listas desplegables y almacenarlas en la base de datos.
- Modificar la imagen y las cajas de verificación o checkbox7:53
Modificar la imagen y las cajas de verificación o checkbox para poder actualizar el registro en la base de datos.
- Actualizar los datos con la instrucción UPDATE11:32
Una vez que contamos con la validación necesaria, podemos guardar nuestros datos en la tabla en la base de datos.
- Borrar el registro de la base de datos (primera parte)6:58
Primero de los videos para el registro de la base de datos
- Borrar el registro de la base de datos (segunda parte)13:33
En este video concluiremos nuestro proceso de baja de los productos de nuestra base de datos.
- Botón de alta y probar el ciclo6:40
Crear el botón de alta y probar el ciclo de altas, bajas y cambios
- Borrar las imágenes y los datos de prueba6:16
En este video borraremos el archivo de la imagen y los datos de prueba.
- Limpiar los productos y desplegarlos en la página principal9:07
Desplegaremos los nuevos datos en la página principal o index.
- Crear la página de detalle del producto8:33
Crear la página de detalle de cada producto leyendo el identificador.
- Crear la columna derecha de productos relacionados12:08
Tomaremos la información de la base de datos para desplegar los productos relacionados a nuestra posible compra.
- Crear los laterales de nuevos productos y los más vendidos en una librería13:34
En este video crearemos los laterales de "más vendidos", "productos nuevos" y "Productos relacionados" los cuales almacenaremos en librerías PHP para ser llamadas en los diferentes páginas.
- Crear la opción de búsqueda, primera parte12:42
Escribiremos la primer parte de la búsqueda de productos según su nombre.
- Crear la opción de búsqueda, segunda parte6:59
Concluiremos el proceso de búsqueda de productos y los aplicaremos a las diferentes páginas relacionadas.
- Planteamiento del carrito de compras7:59
En este video revisaremos las diferentes partes que conforman nuestro carrito de compras.
- Crear la llave del carrito de compras10:32
Crearemos un carrito por medio de una llave antes de que el usuario se registre en nuestro sistemas.
- Agregar un producto al carrito de compras9:49
En este video añadiremos los productos en la tabla del carrito sin duplicarlo.
- Crear el SQL para armar la información del carrito para desplegarla12:02
En este video armamos el SQL de las tablas carrito y productos para poder desplegarlas en una tabla de HTML.
- Desplegar los productos del carrito de compras en una tabla de HTML8:43
Una vez que leemos la información de la base de datos, creamos una tabla con PHP y desplegamos la información.
- Calcular y mostrar el resumen del carrito de compras6:54
En este video calcularemos los totales y los desplegaremos en una tabla dentro del carrito de compras.
- Modificar las cantidades solicitadas en el carrito de compras9:30
Modificar las cantidades del carrito de compras para recalcular los montos del mismo.
- Actualizar la tabla del carrito y recalcular los totales6:52
Una vez que enviamos y recuperamos los datos del formulario, procederemos a guardarlos en la tabla del carrito y recalcular los totales.
- Borrar un producto del carrito de compras8:15
Escribiremos el código para borrar un producto dentro del carrito de compra.
- Añadir el acceso al carrito de compra desde la barra de navegación10:13
En esta lección añadiremos un acceso rápido al carrito de compras en nuestra barra de navegación con el logo respectivo.
- La página de registro o checkout en el proceso del cierre de ventas10:42
En este video realizaremos el proceso de cierre de la venta por medio del registro del usuario.
- La página de los datos de envío, mostrar la información8:28
La página de la dirección de envío, mostrará los datos a donde será enviados los productos, los cuales podrán ser modificados por el usuario.
- La página de los datos de envío, actualizar la información8:42
En este video actualizamos los datos en las variables de sesión y en la base de datos.
- La página de pago en el proceso de cierre de la venta5:34
En este video programaremos la página para que el usuario seleccione su método de pago y lo enviaremos al siguiente paso de nuestro proceso de cierre de venta o checkout.
- La página de verificación de la información antes del pago10:26
En este video crearemos la página de verificación de la información antes de enviar los datos al banco o al servicio de pago.
- La página de agradecimiento para el cierre de la venta10:53
La página final cambiaremos el estado del carrito y eliminaremos las variables del carrito.
- Incluir una nueva línea de productos y manejarla en la tabla de productos5:08
En este video veremos algunas estrategias para manejar varias líneas de productos en una sola tabla.
- Crear el formulario HTML para capturar y modificar el libro6:51
Crear el formulario HTML para capturar y modificar el libro
- El proceso de alta de un libro en la base de datos7:08
El proceso de alta de un libro en la base de datos
- El proceso de modificar y borrar un libro en la base de datos8:41
El proceso de modificar y borrar un libro en la base de datos
- Mostrar los diferentes tipos de productos10:48
Mostrar los diferentes tipos de productos
- Verificación de la venta de los libros y los cursos4:54
En este video verificaremos el proceso de compra con los cursos y los libros hasta cerrar la venta.
- Crear el formulario para entrar al módulo administrativo8:47
En este video veremos la forma de crear el formulario para el registro del usuario para entrar al módulo administrativo.
- La rutina de validación de usuario y la creación de la sesión6:09
La rutina de validación de usuario y la creación de la sesión
- Incluir la validación de la sesión y modificar el menú3:39
En este video incluiremos la validación de la sesión y modificaremos el menú de los archivos de productos y libros ABC.
- Desplegar un usuario de la tienda virtual11:59
Iniciaremos la construcción de las Altas, Bajas y Cambios de la tabla de usuarios.
- Modificar los datos del usuario de la tienda virtual10:36
En este video modificaremos el registro del usuario de a la tienda virtual.
- Borrar el usuario, verificando sus pedidos en el carrito9:06
En este video borraremos el registro pero verificaremos que no existan registro de este usuario en el carrito de compras.
- Terminar el programa de mantenimiento de la tabla de usuarios5:16
En este video terminaremos el programa de mantenimiento de la tabla de usuarios del sistema.
- El módulo para consultar los pedidos realizados la tienda virtual14:58
El módulo para consultar los pedidos realizados en la tienda
- Verificar el pedido antes de ser borrado12:05
En este video haremos una pantalla de verificación antes de borrar y pasar la información al archivo histórico.
- Borrar los datos de la tabla de "carrito" e insertarlas en la tabla "historico"8:08
En este video borraremos un pedido de la tabla de carrito y lo almacenaremos en la tabla de historicoPedidos.
- Modificar la clave de acceso del administrador7:40
En este video haremos el programa para modificar y encriptar la clave de acceso al administrador.
- El proceso de logout del módulo administrativo5:56
Crearemos el proceso del módulo administrativo para concluirlo.
- Seleccionar un color en una página web con ColorZilla3:08
ColorZilla es una herramienta que nos permita detectar un color de un elemento de una página web.
- Herramientas para encontrar colores armónicos10:21
Herramientas para encontrar colores armónicos
- Páginas para descargar fuentes e íconos6:59
Páginas para descargar fuentes e íconos
- Crear gradientes de forma sencilla por medio de dos herramientas10:14
Crear gradientes de forma sencilla por medio de dos herramientas
- Herramientas para las Cajas flexibles8:20
Herramientas para las Cajas flexibles
- Herramientas para objetos SVG y Curvas Bezier Cuadráticas8:04
Herramientas para objetos SVG y Curvas Bezier Cuadráticas
- Herramienta para diseños display: grid;7:51
Herramienta para diseños display: grid;
- Hasta pronto3:21
Con este video damos por concluido el curso de "Desarrollo de una tienda virtual con Bootstrap, PHP y MySQL"
- La maqueta de la tienda virtual desarrollada con Bootstrap0:02
La maqueta de la tienda virtual desarrollada con Boostrap. Puede encontrar los archivos anexos en formato zip.
- La aplicación eCommerce final0:01
La aplicación eCommerce final
Requirements
- Un editor de código, navegador moderno e instalación de Apache-MySQL-PHP
- Contar con una instalación Apache-PHP-MySQL
- Conocimientos básicos de PHP y Bootstrap
Description
Una aplicación que es muy recurrente en Internet es el desarrollo de una Tienda Virtual. Nos sirve para utilizar lenguajes del lado del cliente, como JavaScript y lenguajes del lado del servidor como PHP, así como conectarlo con bases de datos, en este caso como MySQL, herramientas que son las más utilizadas en la Web. En este curso construiremos las páginas web por medio de Bootstrap. lo cual nos permitirá tener una aplicación responsiva.
Partiremos desde una página completamente en blanco hasta concluir la parte del usuario (front-end) y la parte del administrador (back-end). Los objetivos del presente curso son:
- Desarrollar la maqueta responsiva de la tienda virtual con Bootstrap
- Conectar la maqueta con una base de datos
- Crear el registro del usuarios, su firma en el sistema y el cambio de la clave de acceso
- Construir el carrito de compras y el ciclo de la venta
- Crear la parte administrativa o back-end de la aplicación
Este curso intermedio, por lo que usted debe tener las bases de programación en Bootstrap, PHP, JavaScript y MySQL, aunque no debe de ser experto en ellos. Es una buena oportunidad para poner en práctica sus conocimientos. Usted debe de contar con una instalación de Apache-PHP-MySQL, como XAMPP, MAMP p WAMP.
Al final del curso contarás con todos los archivos del curso y los esquemas de la base de datos.
Who this course is for:
- Desarrolladores web con conocimientos previos de PHP y MySQL