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

Laravel Tutoriales | | Comunidad: Crear un Post, Eventos Devs, Foro

Demo

Vamos a continuar en este Post, con la anterior parte llamada Como crear un CRUD con Galería de Imágenes en Laravel 6.2 y Bootstrap 4 – Parte 2 en donde creamos los modelos Bicicletas e Imgbicicletas, ambos necesarios para poder trabajar con las tablas bicicletas e img_bicicletas de la base de datos productos, también creamos el Controlador BicicletasController en donde llevamos acabo todos los procesos del sistema CRUD con la galería de imágenes, en esta Parte 3 continuaremos con otros aspectos de la aplicación web.

Partes

Antes de continuar con este Post te invito a escuchar el Podcast: “5 Consejos para ser un Programador más Productivo” (No son los clásicos consejos técnicos de programación, si no de rutinas y buenos hábitos cotidianos):

Spotify:

Sound Cloud:

Bien ahora continuemos con el Post: Como crear un CRUD con Galería de Imágenes en Laravel 6.2 y Bootstrap 4 – Parte 3.

Para que el sistema CRUD con Galería de imágenes ejecute determinadas tareas, necesita de ciertas rutas importantes y las vamos a crear a continuación.

Rutas

Para definir las rutas de mi Sistema CRUD voy a utilizar el archivo web.php, dentro de este archivo agrego las siguientes rutas (Antes de cada ruta he colocado un comentario, indicando para que sirve dicha ruta):

La mayoría de rutas del sistema CRUD apuntan al controlador BicicletasController y luego al método correspondiente.

Vistas

Vamos a crear las vistas para el usuario final, las creare en el orden Crear, Leer, Actualizar y Eliminar. Creo 4 archivos HTML Blade en resources > views > admin > bicicletas.

Dentro de la carpeta bicicletas creo los archivos crear.blade.php, actualizar.blade.php, detallesproducto.blade.php e index.blade.php

Con esto ya tenemos los archivos HTML en donde empezaré a crear las vistas con Bootstrap 4.

Crear (Vista)

Abro el archivo crear.blade.php y agrego un formulario para crear un nuevo registro, estoy llamando al formulario que se encuentra dentro del archivo prt.blade.php el cual veremos mas adelante.

El formulario de la vista Crear envía un solicitud a la ruta route(‘admin/bicicletas/store’) y procede con la inserción del nuevo registro en la base de datos.

Esta vista se debería de ver de la siguiente manera:

Leer (Vista)

Esta vista servirá para ver los detalles de un producto, abro el archivo detallesproducto.blade.php y agrego los campos o datos que quiero mostrar de un determinado producto

En la parte de abajo hago un @foreach para obtener todas las imágenes pertenecientes al registro o producto correspondiente.

La  vista Leer para ver los detalles de un registro o producto, se debe ver de la siguiente manera.

En esta vista Leer he implementado una galería de imágenes con Fancybox, solo instancio los archivos correspondientes:

A las imágenes le he colocado <a data-fancybox=”gallery” href=”../../../uploads/{{ $img->nombre }}”>, entonces si hago clic por ejemplo en la primera imagen de la bicicleta, se ampliará como una galería de imágenes.

Actualizar (Vista)

Para esta vista abriré el archivo actualizar.blade.php y agrego un formulario para crear editar los registros de la base de datos, estoy llamando al formulario que se encuentra dentro del archivo prt.blade.php el cual veremos mas adelante.

El formulario de actualización envia una solicitud a la ruta route(‘admin/bicicletas/update’,$bicicletas->id), pasamos el id del registro que el controlador BicicletasController.php debe actualizar y proceder con la actualización de los campos correspondientes.

La vista del formulario para editar los registros se debe ver de la siguiente manera.

En la parte inferior de la imagen puedes ver que hay varias imágenes de una bicicleta, estas corresponden a una bicicleta, y cada imagen tiene un botón para eliminar cada imagen individualmente, esta lógica lo veremos en el archivo prt.blade.php mas adelante.

Eliminar (Vista)

Para esta vista no usaremos un formulario o página en específica, en la Vista Principal que  veremos a continuación he colocado un botón Eliminar que envía una solicitud a la ruta route(‘admin/bicicletas/eliminar’,$bic->id), pero antes que envíe una solicitud a esa ruta, le preguntamos al usuario si desea eliminar dicho registro.

Para preguntarle al usuario si desea eliminar dicho registro, cuando el usuario hace clic en el botón eliminar, llama a la función JavaScript confirmarEliminar()

Muestra el mensaje Esta seguro de Eliminar ? si el usuario le da Aceptar, el sistema procede a eliminar el  registro y si le da Cancelar, no pasa nada.

Vista Principal

Por último voy a crear una vista principal, abro el archivo index.blade.php y agrego una tabla HTML de Bootstrap 4 en donde listaré todos los registros disponibles en la tabla bicicletas de la base de datos.

Al lado derecho de la tabla he agregado una columna llamada Acciones en donde muestro 3 botones: Ver, Editar y Eliminar, cada uno realiza su determinada tarea para el registro correspondiente. En la parte superior de la tabla he agregado un botón Agregar que nos envía a la vista Crear en donde tenemos un formulario para crear un nuevo registro en la base de datos.

La Vista Principal se debe de ver de la siguiente manera.

En resumen en esta Parte 3, hemos creado las rutas del sistema CRUD y las Vistas HTML con Bootstrap 4 que permitirán insertar los datos mediante un formulario.

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 la siguiente Parte de este Tutorial veremos al detalle el archivo prt.blade.php
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

 

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

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required
Subscribirse
Notificar a
guest
0 Comments
Inline Feedbacks
View all comments