Sumario rápido:

¿Estás cansado de crear interfaces aburridas y agotadoras utilizando métodos tradicionales? Preste toda su atención aquí mientras presentamos un tutorial técnico sobre la ejecución de operaciones CRUD usando Laravel Livewire. Son las cosas simples las que importan; Estos pasos para crear, actualizar y eliminar registros con el paquete Livewire hacen que crear interfaces sea pan comido.

Tabla de contenidos

1. Introducción a Laravel Livewire

2. Requisitos previos y configuración para operaciones CRUD de Laravel Livewire

3. ¿Cómo ejecutar operaciones CRUD usando Laravel Livewire?

4. Conclusión

Introducción a Laravel Livewire

Antes de comenzar con el tutorial de Laravel Livewire CRUD, vamos a llegar a la comprensión básica de Livewire y cómo se utiliza.

¿Qué es Livewire?

Laravel Livewire le permite construir interfaces con la comodidad de Laravel. Livewire es un marco de fullstack que simplifica la complejidad que Vue o React plantea. La primera versión livewire se lanzó en febrero de 2020.

Requisitos previos y configuración para Laravel Livewire CRUD Operations

Debes tener instalado “composer” en su sistema (Solo presione el comando “composer” en el terminal para verificar si el compositor está instalado correctamente o no). Puede obtener Composer aquí https://getcomposer.org/download/  si no lo tiene.

¿Cómo Ejecutar Operaciones CRUD Usando Laravel Livewire?

Aquí hemos descrito cómo puede implementar el paquete Livewire con la última versión de Laravel y, consecutivamente, operar las funciones de creación, actualización y eliminación utilizando el paquete.

Crear una aplicación Laravel

Como está familiarizado con la creación de una aplicación laravel utilizando un terminal, abra un terminal y ejecute el siguiente comando, luego cree una nueva aplicación laravel en su directorio.

composer create-project --prefer-dist laravel/laravel

(Opcional) Instalar los estilos de bootstrap

composer require laravel/ui

php artisan ui bootstrap –auth

Configurar Detalles de la Base de Datos

Abra el archivo .env que se encuentra en la carpeta raíz, si .env no existe, ejecute el siguiente comando para hacer una copia del ejemplo .env

cp .env .env-ejemplo

Debe crear una nueva base de datos, el mismo nombre de base de datos que debe mencionar en DB_DATABASE, y también reemplazar el resto de la variable .env en función de su sistema

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=dblivewire

DB_USERNAME=root

DB_PASSWORD=

Instalación del Paquete Livewire

Vaya al directorio raíz de su aplicación y ejecute el siguiente comando para instalar el paquete livewire

Necesitamos incluir el estilo y el script livewire (en cada página que usará Livewire).

4). Crear migración y modelo

Necesitamos crear migración para la tabla “posts” y también crearemos un modelo para la tabla de publicaciones.

Ejecute el siguiente comando para crear un archivo de Modelo. Después de ejecutar el siguiente comando, se creará un nuevo archivo en la carpeta base de app/database/migrations/ y en la catepta app/Models/Post.php

php artisan make:model Post -m

Reemplace el siguiente código en el archivo de migración create_posts_table:

$table->id();

$table->string('title')->nullable();

$table->text('description')->nullable();

$table->timestamps();

Ejecute el siguiente comando para crear una tabla en la base de datos con las columnas mencionadas en la migración, después de ejecutar el comando a continuación, puede ver nuevo “posts” tabla en la base de datos.

php artisan migrate

Abra la app/Models/Post.php y reemplácela con el siguiente código

5. Crear componente de Post

Ahora vamos a crear un componente de publicación usando el siguiente comando

php artisan make:livewire Post/Index

Después de ejecutar el comando anterior, puede ver una nueva carpeta Livewire en la carpeta app/Http y resources/views.

La salida del comando anterior es:

COMPONENT CREATED 

CLASS: app/Http/Livewire/Post.php

VIEW:  resources/views/livewire/post.blade.php

Ahora, abierto app\Http\Livewire\Post\Index.php y actualice el siguiente código en ese archivo:

Ahora, Abierto recursos/vistas/livewire/post/index.blade.php y actualice el siguiente código en ese archivo:

Necesitamos crear dos archivos más debajo recursos/vistas/livewire/post/create.blade.php y el segundo es update.blade.php.

Después de crear create.blade.php puede reemplazarlo con el siguiente contenido

Después de crear edit.blade.php puede reemplazarlo con el siguiente contenido:

6. Define Routes

Abre routes/web.php y verifique que haya ruta home sino reemplace el archivo con el siguiente código:

Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');

7. Run Project

Finalmente en su terminal ejecute el siguiete código.

php artisan serve
FUENTES:
https://culking.com/