Laravel 11 Livewire CRUD Application Tutorial Part 1
4 months ago
admin
Laravel
This tutorial will show us how to create a Laravel 11 Livewire CRUD application.
The user can create, update, and delete tasks, and he can also mark a task as done.
Create the Task model and migration
First, let's create the task model and migration:
php artisan make:model Task -m
and add the following code inside:
<?php
use Illuminate\Database\Migrations\Migration;use Illuminate\Database\Schema\Blueprint;use Illuminate\Support\Facades\Schema;
return new class extends Migration{ /** * Run the migrations. */ public function up(): void { Schema::create('tasks', function (Blueprint $table) { $table->id(); $table->longText('body'); $table->boolean('done')->default(0); $table->timestamps(); }); }
/** * Reverse the migrations. */ public function down(): void { Schema::dropIfExists('tasks'); }};
Update the Task model
Next, let's update the task model and add the fillable array.
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class Task extends Model{ // protected $fillable = ['body','done'];}
Create livewire layout
First, let's add Livewire to our Laravel application run the command:
composer require livewire/livewire
Next, let's generate the layout:
php artisan livewire:layout
Inside the "views/components/layouts/app.blade.php" add the following code:
<!DOCTYPE html><html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <title>{{ $title ?? 'Task CRUD App' }}</title> </head> <body class="bg-light"> {{ $slot }} <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> </body></html>