Laravel 11 Livewire CRUD Application Tutorial Part 2

1 month ago admin Laravel

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

Next, inside "routes/web.php" add the following code:


Download the source code from here.

                                                        
                                                                                                                        
<?php

use App\Livewire\Tasks;
use Illuminate\Support\Facades\Route;

Route::get('/', Tasks::class);


Related Tuorials

How to Prevent the Loop Incrementing Operator from Resetting Back to 1 in the Next Pagination Pages in Laravel

In this lesson, we will see how to prevent the loop incrementing operator from resetting back to 1 i...


How to Logout a User from the Other Devices in Laravel 11

In this lesson, we will see how to logout a user from the other devices in Laravel 11, sometimes you...


How to Logout a User from the Current Device in Laravel 11

In this lesson, we will see how to logout a user from the current device in Laravel 11, sometimes yo...


How to Import Multiple Classes from a Single Namespace in Laravel

In this lesson, we will see how to import multiple classes from a single namespace in Laravel by add...


Laravel 11 Livewire CRUD Application Tutorial Part 1

This tutorial will show us how to create a Laravel 11 Livewire CRUD application. The user can c...


How to Conditionally Include a Blade Template in Laravel

In this lesson, we will see how to conditionally include a blade template in Laravel.Sometimes,...


How to Include a Blade Template Only if it Exists in Laravel

In this lesson, we will see how to include a blade template only if it exists in Laravel.Sometimes,&...


How to Pass a Variable to Include in Laravel

In this lesson, we will see how to pass a variable to include in Laravel. Sometimes, we want to pass...


How to the Get the Previous and Next Posts in Laravel

In this lesson, we will see how to get the previous and next posts in Laravel, sometimes when you ge...


How Do you Format a Number as K/M/B in Laravel

In this lesson, we will see how to format a number as K/M/B in Laravel, sometimes we want to display...