Laravel 11 Livewire CRUD Application Tutorial Part 2
In the second part of this tutorial, we will display all the tasks on the home page and later we will add the links so the user can create update, and delete tasks.
Create the Tasks component
First, let's create the Tasks component run the command:
php artisan make:livewire Tasks
Once done inside "app/Livewire/Tasks.php" add the following code:
<?php
namespace App\Livewire;
use App\Models\Task;use Livewire\Attributes\Validate; use Livewire\Component;use Livewire\WithPagination;
class Tasks extends Component{ use WithPagination;
#[Validate('required',message:'Please provide the task details.')] public $body = ''; public $taskToUpdate = null; public $updating = false;
public function storeTask() { $validated = $this->validate(); Task::create($validated); $this->clearData(); }
public function editTask(Task $task) { $this->resetValidation(); $this->body = $task->body; $this->taskToUpdate = $task; $this->updating = true; }
public function updateTask() { $validated = $this->validate(); $this->taskToUpdate->update($validated); $this->clearData(); }
public function taskDone() { $this->taskToUpdate->update([ 'done' => 1 ]); $this->clearData(); }
public function deleteTask(Task $task) { $task->delete(); $this->clearData(); return redirect('/'); }
public function clearData() { $this->body = ''; if($this->updating) { $this->taskToUpdate = null; $this->updating = false; } $this->resetValidation(); }
public function render() { return view('livewire.task',[ 'tasks' => Task::latest()->simplePaginate(3) ]); }}
Display all the tasks
Next, inside "resources/views/livewire/tasks.blade.php" add the following code:
<div class="container"> <div class="row my-5"> <div class="col-md-10 mx-auto"> <div class="row my-5"> <div class="col-md-4"> <div class="card"> <div class="card-body"> @if ($tasks->count()) <ul class="list-group"> @foreach ($tasks as $task) <li wire:key="{{$task->id}}" class="list-group-item d-flex justify-content-between align-items-center"> <p @class(['text-decoration-line-through' => $task->done])> {{ $task->body }} </p> <div class="dropdown ms-auto"> <i class="fa-solid fa-ellipsis-vertical" data-bs-toggle="dropdown" style="cursor: pointer" ></i> <ul class="dropdown-menu"> <li> <span class="dropdown-item" style="cursor: pointer" wire:click="editTask({{$task->id}})" > <i class="fas fa-edit text-warning"></i> </span> </li> <li> <span class="dropdown-item" style="cursor: pointer" wire:click="deleteTask({{$task->id}})" > <i class="fas fa-trash text-danger"></i> </span> </li> </ul> </div> </li> @endforeach </ul> <div class="mt-3 d-flex justify-content-center"> {{ $tasks->links() }} </div> @else <div class="alert alert-primary"> No tasks yet! </div> @endif </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="card-body"> <div class="mb-3"> <textarea class="form-control @error('body') is-invalid @enderror" name="body" wire:model="body" placeholder="Task Details" rows="5"></textarea> @error('body') <div class="invalid-feedback"> {{ $message }} </div> @enderror </div> </div> <div class="card-footer bg-white d-flex justify-content-between"> @if($updating) @if(!$taskToUpdate->done) <button class="btn btn-sm btn-success" wire:click="taskDone" > <i class="fas fa-check-double"></i> </button> @endif <div> <button class="btn btn-sm btn-primary" wire:click="clearData" > <i class="fas fa-arrow-left"></i> </button> <button class="btn btn-sm btn-warning" wire:click="updateTask({{$task->id}})" > <i class="fas fa-edit"></i> </button> </div> @else <button class="btn btn-sm btn-dark" wire:click="storeTask" > <i class="fas fa-paper-plane"></i> </button> @endif </div> </div> </div> </div> </div> </div></div>
Add routes
<?php
use App\Livewire\Tasks;use Illuminate\Support\Facades\Route;
Route::get('/', Tasks::class);