Una de las nuevas características que incluye Laravel 8 es el scaffolding Jetstream, el cual proporciona un punto de inicio para nuestra aplicación que incluye funcionalidades como el login, registro o autenticación. Jetstream está diseñado con Tailwind CSS y nos da la oportunidad de usar el stack de Livewire (con el sistema de plantillas Blade) o Inertia (usando componentes de Vue). Jetstream viene a ser una mejora del scaffolding Laravel UI.
Vamos a seguir una guía paso a paso para crear una SPA (sin la necesidad de construir una API), la cual va a realizar operaciones CRUD sobre una base de datos utilizando el stack Inertia .
La aplicación que vamos a desarrollar nos permite añadir un producto con el nombre y el precio, así como borrarlo o editar uno ya existente. todo ello en el caso de habernos registrado previamente con el correo electrónico.
Los Templates de los componente están maquetados con el Framework Tailwind CSS, y aunque en los ejemplos he prescindido de las clases de css para mayor claridad del código, este se encuentra en su versión completa en el siguiente repositorio de Github: gutifer666/Inertia-Dickinson.
Tabla de contenidos:
- Paso 1: Instalar Laravel 8 e Inertia js
- Paso 2: Conectar Laravel con la Base de Datos
- Paso 3: Crear Modelo y hacer Migración en Laravel
- Paso 4: Crear un controlador con recursos con las operaciones CRUD
- Paso 5: Implementar las funciones del CRUD
- Paso 6: Crear rutas y protegerlas con Laravel Sanctum
- Paso 7: Modificar Layout y crear Páginas con Laravel Inertia
- Puede que te interese :
Paso 1: Instalar Laravel 8 e Inertia js
Para instalar Inertia sólo necesitamos abrir el terminal ejecutando el siguiente comando y eligiendo la opción de Inertia JS cuando nos pregunte el instalador:
Durante la instalación se ejecutan los comandos npm install && npm run dev lo cual nos crea los archivos app.css y app.js ya compilados ( para desarrollo ).
Paso 2: Conectar Laravel con la Base de Datos
Creamos la base de datos product_stock_inertia y editamos el fichero .env como sigue:
Y ejecutamos las migraciones para que se creen las tablas que incorpora Inertia:
Paso 3: Crear Modelo y hacer Migración en Laravel
Al ejecutar el siguiente comando se va a crear el modelo Product y su correspondiente tabla de migración:
A continuación añadiremos las tablas name y price modificando la función up ( ) del siguiente archivo /database/migrations/create_product_table.php:
Para finalizar con el modelo otorgamos la propiedad fillable a los atributos que permitimos ser manipulados desde el exterior:
Y finalmente ejecutamos la migración desde artisan para crear las tablas del modelo en la base de datos:
Paso 4: Crear un controlador con recursos con las operaciones CRUD
La siguiente línea crea el Controlador del Modelo Product y genera el esqueleto de las funciones que vamos a necesitar para implementar el CRUD:
El controlador quedaría ubicado en app/http/controllers:
Paso 5: Implementar las funciones del CRUD
Estas son las clases en las que vamos a apoyarnos:
Listado de Productos
Renderiza la página ‘List‘ pasándole los productos como parámetro:
Añadir Producto
Muestra el formulario para crear un nuevo producto:
Almacena el nuevo producto creado validando previamente la entrada de datos y redirigiéndonos posteriormente al listado de productos:
Editar un Producto
Muestra el formulario para editar un producto específico pasado por parámetro:
Actualiza el producto específico, el cual pasamos por parámetro y devolvemos el listado de productos nuevamente:
Eliminar un Producto
Eliminamos el producto especificado por el parámetro y retornamos a la página del listado:
Paso 6: Crear rutas y protegerlas con Laravel Sanctum
Registramos la ruta de la raíz, la cual nos retorna la vista de bienvenida y las rutas de los recursos de productos redirigidos al controlador. Estas últimas rutas están protegidas mediante Middleware y Laravel Sanctum, siendo necesario estar autenticado para acceder a ellas:
Si ejecutamos la siguiente línea de comando:
Obtendremos información sobre las rutas creadas:
Paso 7: Modificar Layout y crear Páginas con Laravel Inertia
Vamos a modificar el Layout que viene por defecto con Inertia JS y a crear las páginas de formularios y listado para nuestra aplicación.
Modificar Layout en /resources/js/Layouts/AppLayout.vue:
Implementamos el menú de navegación haciendo uso del componente NavLink.vue del cual nos provee Jetstream y que a su vez hace uso del componente <inertia-link>:
De manera similar creamos el menú Responsive. esta vez haciendo uso del componente ResponsiveNavLink.vue:
El script de nuestro Layout quedaría como sigue:
Crear páginas en resources/js/Pages
Página List
En el Template del componente List.vue creamos una tabla en la que mostrar el listado de los productos con la ayuda de la directiva v-for de Vue y el uso de la propiedad products. Todo ello envuelto en la etiqueta <app-layout> del componente AppLayout:
En el script declaramos la propiedad products e importamos el componente AppLayout.vue:
En el Template del formulario, prevenimos el envío de este y ejecutamos el método «submit«. Recogemos los datos y mostramos un mensaje de error si son incorrectos:
Página Form
En el script importamos AppLayout, declaramos la propiedad errors, creamos el objeto form con las propiedades name y price e implementamos el método submit para enviar los datos de form vía post a través de la ruta de almacenamiento:
El Template de Editform.vue es similar al de Form.vue:
Página EditForm
En el script, como propiedad obtenemos el producto específico que queremos editar y los datos de form los inicializamos con los datos del mismo producto. El método submit envía los datos modificados vía put junto con el id del producto a la ruta update:
Puede que te interese :
Entorno de Desarrollo Local Laravel en Ubuntu para Escritorio
Sobre Ubuntu Desktop 20.04 y lo haremos instalando PHP y algunos módulos, CURL, MySQL, Composer y Laravel Installer. Nos será útil porque ciertas aplicaciones ( Multiinquilino ) no se ejecutan correctamente sobre entornos virtuales( XAMP ) o en contenedores ( Docker ).