Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

Como crear un CRUD con Laravel 10 y Bootstrap 5 – Parte 4

Demo

En la parte anterior de este tutorial, creamos el modelo Productos, en donde definimos la tabla productos, la cual es la tabla que usaremos para el sistema CRUD y también definimos los campos de la tabla productos: nombre, precio, stock e img. Asimismo organizamos los directorios correspondientes para las vistas HTML, creamos nuestro formulario con Bootstrap 5 que servirá para crear y actualizar un registro. En esta Parte 4 continamos con el tutorial Como crear un CRUD con Laravel 10 y Bootstrap 5, vamos con ello.

Partes

Antes de continuar, te invito a leer los siguientes artículos:

Asimismo te invito a escuchar el Podcast: “Como Hacer De La Programación Un Estilo De Vida“¿ Se Debe Escuchar Música Mientras Se Programa ?” (Anchor Podcast): 

Spotify: Sound Cloud: Apple Podcasts Anchor Podcasts

Bien ahora continuemos con el Post: Como crear un CRUD con Laravel 10 y Bootstrap 5 – Parte 4. 

Vistas

En esta parte vamos a crear las vistas para el usuario final, estas son Crear (crear.blade.php), Leer (detalles.blade.php), Actualizar (actualizar.blade.php) y Delete (Esta la manejaremos de una manera especial por cierto motivo que explicaré más adelante). Para crear esta vista y las demás vistas de nuestro CRUD usaremos Bootstrap 5.

Crear (Create)

En esta vista llamaremos al formulario (prt.blade.php) con sus respectivos campos que creamos en la Parte 3 de este tutorial. Usaremos el archivo crear.blade.php el cual creamos en la Parte 3 de este tutorial, este archivo se encuentra en resources > views > admin > productos > crear.blade.php


Abro el archivo con el nombre crear.blade.php y agrego lo siguiente: 


He definido las etiquetas <form></form> en mi vista Crear y dentro de estas etiquetas coloco un elemento input de tipo oculto (hidden)  con el nombre _method y en el value le digo a Laravel que usare el método PUT:


También he colocado otro input oculto (hidden) con el nombre _token y el método PUT como valor o value: 


Laravel nos pide que en cada ejecución de un formulario le pasemos el método correspondiente en este caso PUT y un csrf_token el cual Laravel lo genera automáticamente, solo debemos colocar {{ csrf_token() }} y Laravel hara el trabajo.

El csrf_token tiene las iniciales CSRF que sinifica Cross-site Request Forgery o en español Falsificación de Petición en Sitios Cruzados el cual Laravel utiliza como medidad de seguridad ante estos posibles ataques de tipo CSRF.

Por ultimo mediante la directiva @include llamamos al formulario que creamos en la Parte 3 de este tutorial con el nombre prt.blade.php y basta con solo colocar la ruta y el nombre prt para que Laravel lo imprima en la vista:


Entonces mi vista para Crear un registro o producto se veria de la siguiente manera: 

Leer (Read)

En esta Vista voy a mostrar o leer los datos Nombre, Precio, Stock e Imagen de cada producto independientemente.

Para esta vista usare el archivo detalles.blade.php que he creado en la Parte 3 de este tutorial, este archivo se encuentra en resources > views > admin > productos > detalles.blade.php


Abro el archivo detalles.blade.php y agrego lo siguiente: 


Entonces mi vista para Leer un registro o producto se veria de la siguiente manera: 

Actualizar (Update)

Para esta vista creare un formulario HTML, igualmente usare los campos del formulario que he creado en la Parte 3 de este tutorial.

Usare el archivo actualizar.blade.php el cual también lo he creado en la Parte 3 de este tutorial, este archivo se encuentra en resources > views > admin > productos > actualizar.blade.php


Abro el archivo actualizar.blade.php y agrego lo siguiente: 


Al formulario para editar un producto o registro le asigno el método POST y en le paso la ruta con el id del producto que deseo Editar $productos->id

Dentro del formulario coloco un input de tipo oculto (hidden) con el nombre _method y el valor PUT, con estos datos le digo a Laravel el método que usaré para procesar mi formulario:


También agrego otro input oculto (hidden) con el nombre _token y el valor {{ csrf_token  }}, con estos datos le paso un token de seguridad ante ataques de tipo CSRF, basta con agregar {{ csrf_token }} y Laravel hará el resto el trabajo: 


El csrf_token tiene las iniciales CSRF que sinifica Cross-site Request Forgery o en español Falsificación de Petición en Sitios Cruzados el cual Laravel utiliza como medidad de seguridad ante estos posibles ataques de tipo CSRF.

Por último imprimo los campos del Formulario que he creado en la Parte 3 de este tutorial, utilizo la directiva @include para llamar al archivo prt.blade.php que contiene los campos del formulario, solo coloco la ruta y el nombre prt para que los campos del formulario se muestren:


Mi vista Actualizar se debe de ver de la siguiente manera: 

Eliminar (Delete)

Para la acción Eliminar un registro no voy a crear una vista HTML, por criterio o al menos es la forma en que quiero que se haga esto, lo que hare es crear una función con JavaScript que muestre una ventana preguntando al usuario: Estas seguro de Eliminar?

En la Vista Principal crearé la función confirmarEliminar() con Javascript. La colocaré antes del cierre de la etiqueta </body>:


Esta función frena la acción para eliminar un jproducto o registro de la Base de Datos por Seguridad, cuando el usuario presiona el botón Eliminar, impido que se elimine el producto y primero le pido una confirmación para continuar con la eliminación del producto.

A continuación un ejemplo del mensaje de confirmación cuando el botón Eliminar es presionado:

Vista Principal

Esta seria la vista home en donde muestro o leo los datos Nombre, Precio, Stock e Imagen de todos los productos que se han creado en la Base de Datos y una columna adicional llamada Acciones en donde colocaré 2 botones para Editar y Eliminar el registro o producto correspondiente.

Para esta vista usare el archivo index.blade.php que he creado en la Parte 3 de este tutorial, este archivo se encuentra en resources > views > admin > productos > index.blade.php


Abro el archivo index.blade.php y agrego lo siguiente: 


Arriba de la tabla creo un botón para Agregar un nuevo producto o registro: 


Para llamar a los datos uso el loop @foreach y coloco cada producto en una fila y columna correspondiente en la Tabla HTML, a continuación los valores tal cual pero sin la tabla HTML: 


En la columna Imagen uso la carpeta uploads que es en donde se guardan las imágenes de cada registro o producto: 


La columna Acciones contiene 2 botones, uno es Editar y tiene una ruta a la cual le paso el id del producto que deseo editar $prod->id


El otro botón es Eliminar y funciona sobre un elemento de tipo formulario al cual tiene una ruta a la cual le paso también el id del producto que deseo eliminar $prod->id, este formulario usa el método POST y antes de ejecutar la eliminación del producto, va llamar a la función confirmarEliminar(), esta función arrojará una pregunta al usuario preguntandole si desea eliminar el producto o registro: 


La función confirmarEliminar() para Eliminar un registro la creamos antes, en la tarea Eliminar (Delete).

Mi vista principal que muestra todos los registros en una tabla HTML, se ver así:

Hasta acá ya tenemos las vistas del usuario final para las operaciones CRUD (Create, Read, Update y Delete). Ahora crearé las rutas. 

Rutas

Ahora voy a crear las rutas para que funciones las vistas de nuestro CRUD y demás, abro el archivo web.php que se encuentra en routes > web.php


En este archivo web.php agregamos las rutas de nuestra aplicación, agregamos lo siguiente (En el código he agregado comentarios para explicar a que ruta pertenece cada una):


Bien, hasta aquí ya tenemos las vistas y las rutas de nuestro CRUD (Create, Read, Update y Delete) listas. Asimismo creamos la vista principal en donde listamos todos los registros con sus botones para realizar ciertas tareas u operaciones. 

Ten Paciencia, lo que quiero es que conozcas bien como se crea este proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje. 

Nota (s)

 

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

Salir de la versión móvil