CRUD en Laravel Inertia: Incluye proyecto final
En este tutorial aprenderás a crear un CRUD en Laravel Inertia de forma completa haciendo uso de las herramientas más típicas en el desarrollo de aplicaciones web con Laravel.
Si quieres aprender a crear un CRUD en Laravel y Blade, no te pierdas esta entrada, tienes un paso a paso completo desde cero incluido el proyecto final para que lo puedas descargar.
Si quieres aprender a crear un CRUD en Laravel Livewire, no te pierdas esta entrada, tienes un paso a paso completo desde cero incluido el proyecto final para que lo puedas descargar.
Para llevar a cabo nuestro CRUD en Laravel Inertia, vamos a utilizar Vue 3. Si no tienes conocimientos sólidos de este framework, antes deberás llevar a cabo este curso gratuito.
Proyecto final
Descarga el proyecto final desde GitHub.
Crear proyecto Laravel Inertia
Lo primero que debemos hacer para desarrollar un CRUD en Laravel Inertia es crear nuestro proyecto, en nuestro caso lo haremos con el instalador de Laravel haciendo uso de Jetstream:
En el proceso de creación del proyecto debes seleccionar la opción [1] Inertia:
Con los comandos anteriores ya tendremos nuestro proyecto creado haciendo uso de Jetstream con Inertia.js.
Modelo y migración
Ahora vamos a crear un modelo, una migración y un controlador para gestionar los proyectos que utilizaremos para llevar a cabo nuestro CRUD:
El comando anterior habrá creado el modelo, una migración y un controlador para gestionar los proyectos en nuestra aplicación CRUD, vamos a hacer algunos ajustes:
Ahora vamos a abrir nuestro modelo Project para hacer algunos ajustes más:
Ahora generemos 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 Inertia
Vamos a abrir el archivo de rutas web.php para añadir la siguiente línea, la cual nos ayudará a crear todos los endpoints para nuestro CRUD:
El método resource generará los siguientes endpoints en nuestra aplicación:
Actualizar la navegación de Vue
Cuando trabajamos con Inertia, por defecto el framework es Vue, y cualquier cosa que deseemos modificar en la interfaz se encuentra en el directorio resources/js. En nuestro caso, lo que nos interesa modificar en la navegación que se encuentra en el layout de usuarios identificados. Podemos modificar esto abriendo el archivo resources/js/Layouts/AppLayout.vue:
CRUD Laravel Inertia: Listar proyectos con paginación
Vamos a añadir el método index a nuestro controlador ProjectController para obtener los proyectos paginados y así poder mostrarlos en un componente Vue más adelante:
Nuestro método index simplemente obtiene los proyectos paginados utilizando Eloquent y retorna un componente Vue que contendrá esa información para poder mostrarla a través de sus props, creemos ese componente, recuerda crearlo en el directorio resources/js/Pages, aquí es donde van las vistas que renderizamos con Laravel:
Si tienes dudas acerca de la sintaxis utilizada en el tag script setup, te recomiendo el curso de Vue 3 Script Setup, está todo explicado.
defineProps: Aquí recogemos los proyectos enviados desde el controlador.
deleteProject: Función para eliminar un proyecto con Inertia.
AppLayout: Layout que viene con Jetstream y el stack Inertia.
Link: Componente de Inertia que nos permite navegar por la página sin refrescar.
CRUD Laravel Inertia: Crear proyectos
Vamos a añadir el método create a nuestro controlador ProjectController para mostrar un componente formulario con Vue que nos permita crear nuevos proyectos:
Ahora, vamos a crear nuevo archivo en resources/js/Pages/Projects llamado Create.vue, el cual más adelante utilizaré un componente Vue para representar el formulario de proyectos:
useForm: Helper proporcionado por Inertia para facilitar el trabajo con formularios.
ProjectForm: El componente que generaremos a continuación para representar un formulario de proyectos, sea para alta o edición.
CRUD Laravel Inertia: Formulario proyectos alta/edición
Vamos a crear un nuevo componente en resources/js/Components/Projects llamado Form.vue, este archivo será el formulario que utilizaremos para crear y editar proyectos.
$page.props.errors: Es un objeto que nos proporciona Inertia con los errores de formulario que puedan haber.
Si ahora visitamos la ruta para crear nuevos proyectos deberíamos ver lo siguiente:
CRUD Laravel Inertia: Validar y guardar proyectos en base de datos
Empecemos por crear un FormRequest que nos permita validar tanto el alta como la edición de proyectos:
Ahora vamos a añadir el método store a nuestro controlador para validar y procesar nuestro formulario de alta de proyectos:
Con lo anterior, podrás dar de alta nuevos proyectos validando los datos, en caso de que exista algún error, éstos serán mostrados en el formulario de Vue.
CRUD Laravel Inertia: Detalle de un proyecto
Ahora vamos a añadir el método show a nuestro controlador para poder mostrar el detalle de un proyecto en un nuevo componente Vue:
Crea un archivo resources/js/Pages/Projects/Detail.vue para mostrar el detalle de un proyecto:
CRUD Laravel Inertia: Editar proyectos
Vamos a añadir el método edit a nuestro controlador ProjectController para mostrar una nueva página en Vue que nos permita editar proyectos existentes haciendo uso de nuestro componente Form:
Ahora debemos crear la página Edit.vue dentro del directorio Projects de Vue:
CRUD Laravel Inertia: Validar y actualizar proyectos
Ahora, añadamos el método update a nuestro ProjectController para validar y actualizar los proyectos en base de datos:
Igual que nuestro método store, con la diferencia de que ahora llamamos al método update en lugar de al método create.
CRUD Laravel Inertia: Eliminar proyectos
Para finalizar nuestro CRUD en Laravel Inertia, vamos a añadir el método destroy a nuestro ProjectController, con esto podremos eliminar proyectos y habremos finalizado este tutorial:
Llamando al método delete de nuestro modelo, Eloquent borrará este registro de nuestra base de datos y nuestro trabajo habrá finalizado.
Hasta aquí hemos cubierto cómo crear un CRUD en Laravel Inertia, si quieres seguir mejorando, te invito a que sigas con el curso Laravel Inertia y Vue 3 con arquitectura modular.