CRUD en Laravel Livewire: Incluye proyecto final

arrow_back Blog

En este tutorial aprenderás a crear un CRUD en Laravel Livewire de forma completa haciendo uso de las herramientas más típicas en el desarrollo de aplicaciones web con Laravel.

Si tienes dudas acerca de cómo crear un CRUD en Laravel, no te pierdas esta entrada, tienes un paso a paso completo desde cero incluido el proyecto final para que lo puedas descargar.

Proyecto final

Descarga el proyecto final desde GitHub.

Crear proyecto Laravel Livewire con Jetstream

Lo primero que debemos hacer para desarrollar un CRUD en Laravel Livewire es crear nuestro proyecto, en nuestro caso lo haremos con el instalador de Laravel haciendo uso del flag --jet, con eso añadiremos Jetstream a nuestro proyecto y podremos instalar y configurar de forma automática Livewire en nuestro proyecto.

Con los comandos anteriores ya tendremos nuestro proyecto Laravel creado y Laravel Livewire instalado y listo para funcionar.

Modelo y migración

Ahora vamos a crear nuestro modelo y nuestra migración con el siguiente comando, el cual también creará el controlador con el que gestionaremos más adelante los proyectos de nuestro CRUD.

Vamos a abrir nuestra migración para modificar el código por lo siguiente:

Ahora vamos a abrir nuestro modelo Project para hacer algunos ajustes:

Con todo lo anterior, vamos a generar nuestra base de datos con la tabla de proyectos, pero recuerda primero actualizar las credenciales de tu base de datos en el archivo .env:

Rutas CRUD en Laravel Livewire

Vamos a actualizar nuestro archivo de rutas web.php para añadir una ruta resource que nos permita llevar a cabo todas las operaciones de CRUD:

El método resource generará los siguientes endpoints en nuestra aplicación:

CRUD Laravel Livewire: Listar proyectos con paginación

Vamos a añadir el método index a nuestro controlador ProjectController para renderizar más adelante un componente Livewire que muestre los proyectos paginados:

Ahora, vamos a crear el componente Livewire Paginated para nuestro listado de proyectos:

Nuestro componente Paginated simplemente obtendrá los proyectos y los paginará en un listado:

La parte más importante de nuestro componente y la única diferencia con un controlador Laravel es el uso del trait WithPagination.

Ahora, vamos a actualizar la vista vinculada a nuestro componente:

La parte más importante del listado es ver cómo el enlace que elimina un proyecto al pulsarlo utiliza wire:click.prevent="delete('{{ $project->id }}')", con eso podremos eliminar un proyecto llamando al método delete de nuestro componente Livewire.

En este punto, sólo nos queda actualizar la vista index.blade.php vinculada al método index de nuestro controlador para decirle que utilice nuestro componente Livewire:

CRUD Laravel Livewire: Crear proyectos

Vamos a añadir el método create a nuestro controlador ProjectController para mostrar un formulario que nos permita crear nuevos proyectos, veremos que tenemos algunas diferencias con respecto a utilizar plantillas Blade:

Ahora vamos a crear el componente Livewire Form, el cual representará el formulario de alta y edición:

Como he dicho, nuestro componente servirá para crear y editar, pero será muy sencillo:

Sólo necesitamos recibir en forma de props el proyecto y el texto del botón. El proyecto será una instancia del modelo Project, y nos servirá para representarlo en el formulario y también para crear o actualizar su información.

  • método rules: definimos las reglas de validación, las cuales servirán para crear y actualizar.

  • método messages: definimos los mensajes de error de la validación para cada campo/regla.

  • método save: creará o actualizará un proyecto cuando el formulario sea procesado y validado.

Fíjate que tanto en el método rules como en el método messages siempre accedemos al proyecto con project.*.

Ahora vamos a abrir el archivo form.blade.php de nuestro componente Livewire para añadir el siguiente código:

Ya tenemos nuestro formulario de alta y edición en Laravel Livewire, ahora actualicemos la vista form.blade.php que renderiza el método create de nuestro controlador.

CRUD Laravel Livewire: Editar proyectos

Vamos a añadir el método edit a nuestro controlador ProjectController para mostrar el componente Form de Livewire, el cual nos permitirá editar proyectos existentes:

No tenemos que hacer nada más, con la configuración que hemos llevado a cabo anteriormente nuestro componente Livewire sabrá cómo redenrizar los datos del formulario, validar y actualizar sus datos.

CRUD Laravel Livewire: Detalle de un proyecto

Empecemos por añadir el método show a nuestro controlador ProjectController para mostrar el componente Detail de Livewire, el cual nos permitirá más adelante ver el detalle de un proyecto:

Vamos a crear el componente Livewire Detail, el cual representará el detalle de un proyecto:

Ahora, vamos a actualizar el componente Detail de Livewire para poder llevar a cabo la lógica necesaria para mostrar el detalle de un proyecto:

Como puedes ver, tenemos que pasarle un proyecto en forma de prop, que será el proyecto que mostraremos en el detalle, además, también tenemos un método delete que nos permitirá eliminar el proyecto en cuestión.

Abre la vista detail.blade.php y actualiza el código por el siguiente:

Para terminar nuestro CRUD en Laravel Livewire, vamos a abrir el archivo que renderiza el método show de nuestro controlador para utilizar nuestro nuevo componente Livewire:


Hasta aquí hemos cubierto cómo crear un CRUD en Laravel Livewire, si quieres seguir aprendiendo a trabajar con Laravel Livewire, no te pierdas nuestros cursos:

Cursosdesarrolloweb Cursosdesarrolloweb

Cursosdesarrolloweb es una plataforma educativa con cursos y tutoriales en texto y vídeo.

Términos y condiciones Política de privacidad Formulario de contacto

Copyright 2024 © Todos los derechos reservados.

Contacto