Como crear un CRUD con Laravel 5.6 – Parte 3

Laravel Sin categoría

En el capitulo anterior Como crear un CRUD con Laravel 5.6 – Parte 2 creamos el Controlador Postres, dentro de este controlador colocamos los métodos CRUD junto a métodos de Laravel para gestionar los registros de la base de datos, en este capitulo numero tres, crearemos las vistas con los formularios para crear, editar, eliminar y claro la vista para listar o leer los registros.

En el core de Laravel existe una carpeta predeterminada para colocar las vistas de nuestro proyecto, vamos a crear una carpeta para colocar las vistas del sistema CRUD.

Dirigete a resources > views y dentro de esta carpeta crea una carpeta con el nombre admin y dentro de este crea otra carpeta llamada postres, para colocar allí las vistas de nuestro sistema CRUD, por último dentro de la carpeta postres crea una carpeta más llamada frm para colocar allí los formularios y llamarlos dinámicamente, así evitamos escribir código repetitivo.

Vamos a crear las vistas con Bootstrap 4 Framework, si no sabes que es te recomendamos leer nuestro artículo Que es Bootstrap, Historia y tu Primer Hola Mundo y estés familiarizado con las vistas de este tutorial.

Vistas

Crearemos las vistas en el orden Crear, Leer, Actualizar y Eliminar.

Para crear los formularios en las Vistas vamos a usar Laravel Collective, para que no estés perdido te recomendamos leer nuestro articulo Que es Laravel Collective y como implementarlo en Laravel.

Crear (Create)

En esta vista vamos a crear un formulario en donde apunta a la ruta postres.store que es básicamente el método que creamos en el Controlador PostresController del capitulo 3 de este tutorial. Asimismo le damos soporte para archivos enctype=”multipart/form-data” con ‘files’ => ‘true’ vía Laravel Collective.

Puedes ver que dentro del formulario estamos llamando a una vista creada en el archivo prt.php dentro de la carpeta frm es decir:

Con esto usaremos únicamente un archivo para el formulario, así evitamos reescribir el código del formulario.

Leer (Read)

La siguiente vista va ser la principal en donde se listarán todos los registros de la base de datos, vamos a recorrer y listar los registros de la base de datos con @foreach dentro de una tabla HTML

Las clases que se ven son clases nativas de Bootstrap 4 y en la tabla crearemos 5 columnas que son nombre, precio, stock, imagen y acciones, en esta última columna colocaremos 2 botones para editar y eliminar el registro correspondiente y un botón que dice Agregar que al hacerle clic nos envía a la vista para Crear nuevo registro

Actualizar (Update)

En la siguiente vista vamos a llamar a nuestro formulario prt.php al igual que hicimos en la Vista Crear, pero esta  vez lo usaremos para editar los datos de un registro seleccionado.

Lo que hacemos es pasar el id del registro que queremos editar en la ruta del formulario ‘route’=>[‘postres.update’

Eliminar (Delete)

En esta parte no crearemos una Vista, mas bien para que sea dinámico crearemos un botón para eliminar un registro que hará llamado al método destroy que creamos en Nuestro Controlador PostresController en el capítulo 2 de este tutorial y también agregamos de paso un botón para Editar el registro, cuando le haces clic a este  botón te envía a la Vista para Actualizar el registro determinado

Vamos a validar el borrado de un registro para esto cada ves que el usuario haga clic en el  botón Eliminar le lanzaremos una ventana de confirmación si desea eliminar el registro, con esto evitamos que se borren registros por error, agregamos el siguiente código Javascript para hacer esto, agregalo después de la tabla en donde listas los registros (Vista Leer)

Por ejemplo agregamos un registro y nos aparecen botones uno para editar y otro para eliminar el registro

Conclusión

En este capitulo hemos visto como crear las Vistas para el sistema CRUD, repásalos bien. En el siguiente y último capitulo hablaremos sobre validaciones y mensajes al Crear, Editar y Eliminar un registro y otros detalles muy importantes.

Al Final del tutorial colocaremos el código en nuestro repositorio Github para que no tengas problemas en implementarlo.

 

Síguenos en las 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