Cómo Crear un Sistema CRUD con Laravel-Livewire

Laravel + Laravel Livewire !

En esta oportunidad realizaremos un proyecto que nos permita implementar un sistema de contactos utilizando Laravel Livewire (awesome work! Caleb Porzio) a través del método CRUD (Create, Read, Update, Delete) pero con toda la magia y funcionalidad que nos entrega laravel-livewire.

1. Crear nuestro proyecto en Laravel

2. Ingresar a tu proyecto e instalar Tailwindcss

Para Tailwindcss como preset puedes utilizar el comando (más info):

en mi caso utilizo la opción “yes” para la generación de los archivos necesarios para para la autenticación de usuarios “auth files”.

O seguir la documentación oficial para instalar y configurar lo que requieras.

“Siempre recuerda que debes configurar tu entorno con las variables correspondientes a la base de datos, idioma y lo que requieras”

3. Definir la ruta

Abrir el archivo routes/web.php y definir la ruta que utilizaremos para todas las operaciones CRUD (puesto que laravel livewire manejará todo lo demás por nosotros).

4. Genera la vistas para el CRUD

Si te fijas, al determinar una ruta del tipo users.contacts implica que deberás crearla dentro de la ruta resources/views/ y luego generar el archivo contacts.blade.php debiera quedar así:

Dentro del archivo contacts.blade.php debemos agregar el componente de laravel-livewire que crearemos en el próximo paso, quedando de la siguiente manera:

5. Generar el modelo ‘Contact’

La alternativa más simple y directa es generar el modelo a través del siguiente comando (adicionando el flag -mpara generar la migración de inmediato):

El modelo debiera incorporar solo la variable protected $guarded = []; esto puesto que estamos en un ambiente de prueba y nos permite agregar todos los campos que quisiéramos pasar a la BD. Debiera verse así:

En este ejemplo solo utilizaremos dos campos, el Nombre y el correo electrónico, por lo que la migración debiera ser muy simple. Solo agrega las siguientes dos líneas a la migración nueva generada:

El correo está marcado como unique() con el objeto de evitar agregar dos usuarios con el mismo email.

Por úlitmo, correr el siguiente comando para generar la tabla en tu base de datos:

6. Instalar Laravel Livewire

Es muy simple, solo debes correr el siguiente comando en tu terminal:

Hay que incorporar @livewireStyles antes del </head> y @livewireScripts antes de la etiqueta </body> en el archivo resources/views/layouts/app.blade.php quedando así:

7. Crear el componente de Laravel-Livewire

Es posible crear los componentes de Laravel-Livewire a través de un comando artisan:

Con ello se crearán dos archivos. El primero app/Http/Livewire/Contact.php y el otro resources/views/livewire/contact.blade.php .

La estructura del primer archivo deberá quedar así:

Hay que observar con detención todos los componentes de esta clase. Es acá donde se realizarán todas las operaciones CRUD. Hemos declarado las siguientes propiedades como públicas ( $data, $name, $email, $select_id, $updateMode ) las que serán cargadas de nuestro componente en la vista. Esta clase de componente realiza las acciones típicas de un controlador en Laravel.

8. Crear las vistas de los componentes de Laravel-Livewire

Ahora hay que crear dos archivos adicionales en la carpeta resources/views/livewire , el primero create.blade.php y el segundo update.blade.php . Con esto tendremos tres archivos dentro de esa carpeta:

El archivo contact.blade.php debe contener la siguiente estructura y contenido:

El siguiente archivo, create.blade.php posee el siguiente código:

El último archivo update.blade.php debe contener el código:

9. Capturas de pantalla del flujo

Ingresa primero a la dirección de tu proyecto, en este caso contactos.test/contacts y debieras ver una pantalla similar a esta:

En esta primera vista debieras notar que por defecto se presenta la palabra “no hay información” esto se debe a la utilización del loop @forelse y luego @empty lo que nos permite pasar un mensaje en caso que no existan valores.

Agrega el nombre completo y el correo de tu primer contacto (los archivos están con la validación de ambos campos y los mensajes de error incluidos). Debieras tener una pantalla similar a esta:

Ahora puedes editar la información presionando el botón “editar”:

update con otros datos
vista con los datos actualizados

Por último, puedes borrar el contacto presionando el botón “borrar”. El usuario automáticamente será eliminado de tu base de datos y de la pantalla.

10. Consideraciones finales

Tu sistema está listo para ser utilizado en algún proyecto. Espero te motives a aprender más de Laravel, Laravel-Livewire (pssst… te paso un dato, Caleb además ha creado un microframework de javascript llamado “alpine.js”, la magia se amplifica!)

https://github.com/alpinejs/alpine

Finalmente podrás utilizar un sistema totalmente “mágico” para el ingreso, edición o borrado de tus contactos. Espero que esta aplicación CRUD explicada paso a paso sirva para comenzar a utilizar de mayor y mejor forma Laravel-Livewire.

Gracias por tu lectura.

Si te ha gustado, podrías darme un aplauso y seguirme :)

Wine, programmer, diver & photographer lover. Agronomist Engineer. CEO & Founder of Intelvid.la More: cvallejo.me

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store