Como crear un CRUD con Galería de Imágenes en Laravel 6.2 y Bootstrap 4 – Parte 1

7 minuto(s)

Demo

En las aplicaciones actuales las imágenes son parte importante de un Proyecto Web, estas muestran al usuario ciertas vistas de un producto o un elemento en particular logrando generar en el usuario una mejor experiencia y Navegación que puede terminar en la compra de un producto por parte del usuario visitante, este es el objetivo de muchas tiendas online, en este Tutorial vamos aprender a insertar un registro en la Base de Datos con múltiples imágenes.

Partes

Antes de continuar con este Tutorial te recomiendo leer los siguientes artículos:

Leyendo los artículos anteriores estarás mas Familiarizado con este Tutorial, si ya conoces sobre Laravel entonces puedes continuar con este Tutorial, no hay problema.

Antes de continuar con el Proyecto recuerda que en la Documentación de Laravel 6.2 nos pide que nuestro servidor cuente con las siguientes características:

  • PHP >= 7.2.0
  • BCMath PHP Extension
  • Ctype PHP Extension
  • JSON PHP Extension
  • Mbstring PHP Extension
  • OpenSSL PHP Extension
  • PDO PHP Extension
  • Tokenizer PHP Extension
  • XML PHP Extension

Si tu servidor tiene las características mencionadas en la lista, no tendrás problemas para trabajar con Laravel 6.2

Nuevo Proyecto

Vamos a crear un nuevo Proyecto en Laravel, me ubico en un directorio en donde quiero crear mi proyecto, luego abro mi consola de comandos y ejecuto el siguiente comando para crear un nuevo proyecto en Laravel 6.2


Con esto se me ha creado la siguiente estructura de directorios y archivos que componen core del Framework Laravel 6.2 con el cual crearé mi Proyecto


Para verificar que mi proyecto se ha creado correctamente, corro el servidor de Laravel e ingreso a la ruta local http://localhost:8000/ en mi navegador


Y compruebo que el proyecto se ha creado correctamente

Nota: Personalmente antes de pasar mi proyecto a producción o subirlo a un servidor, primero lo trabajo en mi servidor local utilizando XAMPP o Laragon.

Bootstrap 4

Para crear mis vistas voy a usar Bootstrap 4, este lo podemos usar mediante el Scaffolding JavaScript y CSS que Laravel nos brinda, este Scaffolding no solamente nos permite trabajar con Bootstrap si no también nos permite trabajar con React y Vue y probablemente agreguen nuevas herramientas en futuras versiones de Laravel.

Para trabajar con el Scaffolding Javascript y CSS debo de instalarlo ejecutando el siguiente comando


Ahora tengo soporte para instalar Bootstrap, React o Vue y como yo usaré Bootstrap entonces lo instalo ejecutando el siguiente comando


Por ultimo ejecuto el siguiente comando para compilar Bootstrap en mi Proyecto


Con esto ya tengo instalado Bootstrap 4 que incluye jQuery y demás librerías necesarias para que Bootstrap funcione correctamente.

Base de Datos

Voy a utilizar el motor de Base de Datos MySQL, entonces creo una base de datos llamada productos y dentro de esta base de datos voy a crear una tabla llamada bicicletas en donde guardare los registros, cada uno con su galería de imágenes.

Mi base de datos productos la he creado manualmente utilizando la interface de PHPMyAdmin y ahora debo indicarle a Laravel 6.2 la Base de Datos que voy a utilizar para mi Proyecto, para esto abro el archivo .env este archivo se encuentra en miproyecto > .env


Y dentro del archivo .env y escribo el nombre de mi Base de Datos productos dentro de la variable DB_DATABASE

Migraciones y Tablas en la Base de Datos

Ahora voy a crear 2 tablas, una la llamaré bicicletas y la otra la llamaré img_bicicletas

Tabla bicicletas

Creo la migración para la tabla bicicletas ejecutando el siguiente comando:


Se me ha creado un archivo PHP para crear la tabla bicicletas, este archivo se encuentra en database > migrations > 2019_12_05_153841_create_bicicletas_table.php


Abro el archivo 2019_12_05_153841_create_bicicletas_table.php y en la función up() agrego los campos para mi tabla bicicletas, mi tabla tendrá los campos id, nombre, precio, stock, imagenes, url y al final mediante $table->timestamps() y $table->softDeletes() agrego los campos created_at, updated_at y deleted_at


A continuación todo el código completo del archivo 2019_12_05_153841_create_bicicletas_table.php


Ahora ejecuto el siguiente comando para ejecutar la migración y crear la tabla bicicletas en la base de datos


Con esto he creado la tabla bicicletas, en esta tabla insertaré los registros y cada registro tendrá múltiples imágenes o su propia galería de imágenes

Tabla img_bicicletas

Esta tabla va servir para almacenar las imágenes que correspondan a una bicicleta o registro de la tabla bicicletas, creo la migración para la tabla img_bicicletas ejecutando el siguiente comando:


Se me ha creado un archivo PHP para crear la tabla img_bicicletas, este archivo se encuentra en database > migrations > 2020_01_20_170852_create_img_bicicletas_table.php


Abro el archivo 2020_01_20_170852_create_img_bicicletas_table.php y en la función up() agrego los campos para mi tabla img_bicicletas, mi tabla tendrá los campos id, nombre, formato e bicicletas_id y al final mediante $table->timestamps() y $table->softDeletes() agrego los campos created_at, updated_at y deleted_at


En el código anterior he colocado la restricción CASCADE a la columna bicicletas_id:


Esto significa que si un registro es eliminado de la tabla bicicletas, las imágenes que pertenecen o están relacionadas a este registro, se eliminarán de la tabla img_bicicletas, así evitamos dejar rastro de registros innecesarios en la tabla img_bicicletas.

A continuación todo el código completo del archivo 2020_01_20_170852_create_img_bicicletas_table.php


Ahora ejecuto el siguiente comando para ejecutar la migración y crear la tabla img_bicicletas en la base de datos


Con esto he creado la tabla img_bicicletas, en esta tabla insertaré el nombre de las imágenes y en la columna bicicletas_id de esta tabla insertaré el id de un registro o bicicleta, de esta manera creo una relación de uno a muchos.

Bien hasta aquí he dejado listo Laravel, Bootstrap y la Base de Datos para en el siguiente capitulo entrar a crear el código necesario para este Proyecto.

Ten Paciencia, lo que quiero es que entiendas todo el proceso para Crear este Proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje.  

Nota (s)

  • En el siguiente capitulo crearé el Controlador, Modelo y demás elementos necesarios.
  • En esta primera Parte he desplegado todos los elementos que necesitaré para llevar a cabo mi Proyecto.

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.