Como crear un CRUD con Laravel 5.8 y Bootstrap 4 – Parte 4

Laravel

En el capitulo anterior llamado Como crear un CRUD con Laravel 5.8 y Bootstrap 4 – Parte 3 creamos la vista del formulario que sera usado en la página Crear y Editar un registro (jugo), en este capitulo 4 crearemos las vistas para el usuario final, estas vistas son Crear, Leer (Vista Principal) y Actualizar, vamos con este Post.

En cuanto a la Vista Eliminar no necesitare una vista, ya que se solicitará directamente al servidor eliminar un registro, previamente un mensaje de confirmación al usuario con Javascript, esta parte lo veremos más abajo.

Crear (Create)

Para crear esta vista y las demás vistas de nuestro CRUD usaremos Bootstrap 4, en esta vista llamaremos al formulario con sus respectivos campos que creamos en la Parte 3 de este tutorial.

Para esta vista usaremos el archivo crear.blade.php el cual creamos en la Parte 3 de este tutorial, este archivo se encuentra en resources > views > admin > jugos > crear.blade.php

Abre el archivo con el nombre crear.blade.php y agrega 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 debemos pasar el método correspondiente en este caso PUT y un csrf_token el cual Laravel lo genera automáticamente, los Desarrolladores 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

Bien mi vista para Crear un registro o jugo se veria de la siguiente manera

Leer (Read)

En esta Vista voy a crear una tabla HTML con Bootstrap 4 en donde muestro o leo los datos Nombre, Precio, Stock e Imagen de todos los jugos 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 jugo 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 > jugos > index.blade.php

Abre el archivo index.blade.php y agrega lo siguiente

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

Para llamar a los datos uso el loop @foreach y coloco cada jugo 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 jugo

La columna Acciones contiene 2 botones, uno es Editar y tiene una ruta a la cual le paso el id del jugo que deseo editar $jug->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 jugo que deseo eliminar $jug->id, este formulario usa el método POST y antes de ejecutar la eliminación del jugo, va llamar a la función confirmarEliminar(), esta función arrojará una pregunta al usuario preguntaldole si desea eliminar el jugo o registro

La función confirmarEliminar() para Eliminar un registro la veremos más abajo en la Vista Eliminar (Delete).

Mi vista para Leer los registros se ve así

Actualizar (Update)

Para esta vista creare un formulario HTML con Bootstrap 4, 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 > jugos > actualizar.blade.php

Abre el archivo actualizar.blade.php y agrega lo siguiente

Al formulario para editar un jugo o registro le asigno el método POST y en le paso la ruta con el id del jugo que deseo Editar $jugos->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, pro 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 Leer (Read) mencione que usare la función confirmarEliminar(), debajo de la tabla para listar los registros colocare el código con la función Javascript confirmarEliminar() 

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

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

Bien hasta acá ya tenemos las vistas del usuario final para las operaciones CRUD (Create, Read, Update y Delete).

Si hago todo el tutorial en una sola página se va hacer muy extenso y no tendrás un correcto aprendizaje, es por eso que opto por avanzar este tutorial por Partes, el siguiente capitulo es el último de este tutorial.

Notas

  • En la Parte 5 y última de este tutorial, trabajaremos con las validaciones (Requests), personalizaremos los mensajes de validación y realizaremos otras configuraciones adicionales para que nuestro sistema CRUD funcione correctamente.
  • Los Pasos y opciones mencionadas en este capitulo del tutorial pueden cambiar, esto no depende de nosotros, si no de las empresas que dan soporte a estas herramientas como Laravel y Bootstrap, que suelen cambiar sus opciones de despliegue y configuración en futuras versiones.

 

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