Build a To-Do App in Laravel: Step-by-Step Livewire Example

Table of Contents

Hide Show

• 1 Content
• 2 Conclusion

Summary :

In this article, we will explore how to create a dynamic TODO list application using Livewire 3 with Laravel. This tutorial is for all of you who are pro in these frameworks and also a complete beginner, we will be showing how building up a simple TODO list can turn so powerful with this simplistic Livewire + Laravel combo (Love). So, let's crack it down and walk through how to use Livewire 3 - the latest set of features as an example by making a live ToDoList app that will enhance your development skills for the web and give you underlying functionality upending antics on which future projects can be built.

Overview Of Laravel and Livewire

Laravel is a robust and stylish PHP framework created for building web applications with a clear and elegant syntax. Thanks to its expressive syntax and powerful tools, many developers love using it to craft top-notch web applications. This post demonstrates a new approach for achieving this with Livewire, billed as the Laravel way to build better dynamic interfaces using PHP instead of JavaScript.

Livewire 3, the latest version, introduces new features and improvements that make building interactive and dynamic applications even more straightforward. With Livewire, you can create dynamic components that update in real-time, offering a seamless user experience without writing a single line of JavaScript.

Content

Create a new Laravel Project using the below command:

• composer create-project –prefer-dist laravel/laravel livewire-todo
• cd livewire-todo

After successfully creating a new project, install Livewire:

• composer require livewire/livewire

Create Migration and Model

• php artisan make:model Todo -m

database\migrations\2024_07_05_073256_create_todos_table.php

Schema::create('todos', function (Blueprint $table) {
  $table->id();
  $table->string('name');
  $table->boolean('completed')->default(false);
  $table->timestamps();
});

App\Models\Todo

class Todo extends Model{
use HasFactory;
protected $guarded = [];
}

Create the Livewire Component

• php artisan make:livewire TodoList

This command will create two files:

1.TodoList.php(app/Http/Livewire).
2.todo-list.blade.php(resources/views/livewire).

1.TodoList.php

<?php
namespace App\Livewire;
use Livewire\Attributes\Rule;
use Livewire\Component;
use Livewire\WithPagination;
class TodoList extends Component
{
    use WithPagination;
    #[Rule('required|min:3|max:50')]
    public $name;
    #[Rule('required|min:3|max:50')]
    public $EditingNewName;
    public $EditingTodoID;
    public $search;
    public function create(){
        $this->validateOnly('name');
        Todo::create(['name' => $this->name]);
        $this->reset('name');
        $this->resetPage();
        session()->flash('success', 'Todo Created Successfully.');
    }
    public function delete($id){
        try {
            Todo::findOrFail($id)->delete();
        } catch (\Throwable $th) {
            session()->flash('error', 'Failed to delete todo!');
            Log::error($th->getMessage());
            return;
        }
    }

    public function edit($id){
        $this->EditingTodoID = $id;
        $this->EditingNewName = Todo::find($id)->name;
    }

    function toggle($id){
        $todo = Todo::find($id);
        $todo->completed = !$todo->completed;
        $todo->save();
    }

    public function update(){
        $this->validateOnly('EditingNewName');
        Todo::find($this->EditingTodoID)->update([
            'name' => $this->EditingNewName,
            'created_at' => now(),
        ]);
        $this->cancel();
    }

    public function cancel(){
        $this->reset('EditingTodoID', 'EditingNewName');
    }
    public function render(){
        return view('livewire.todo-list', [
            'todos' => Todo::latest()->where('name', 'like', "%{$this->search}%")->paginate(3),
        ]);
    }
}

2.todo-list.blade.php

    @if (session('error'))
        

            

                

                

                    
Error
                    
{{ session('error') }}
                
            
        
    @endif
    @include('includes.create-todo-list')
    @include('includes.search-box')
    

        @foreach ($todos as $todo)
            @include('includes.todo-card', ['todo' => $todo])
        @endforeach
        

            
            {{ $todos->links() }}
        
    
    

For the main Livewire component, we’re going to create a subview for the TODO list items so that our file is kept
clean and organized. This is the responsible subview that will render an individual TODO item.

First, Create a New Blade File (todo-item.blade.php) inside the resources/views/includes directory:

resources/views/includes/create-todo-list.blade.php

    

        

            

                
Create New Todo
            
            

                

                    

                        *
                            Todo 
                        
                        @error('name')
                            {{ $message }}
                        @enderror
                    
                    Create
                        +
                    @if (session('success'))
                        {{ session('success') }}
                    @endif
                
            
        
    

resources/views/includes/search-box.blade.php

resources/views/includes/todo-card.blade.php

    

        

            @if ($EditingTodoID == $todo->id)
            
            

                @error('EditingNewName')
                {{ $message }}
                @enderror
            
            @else
            
{{ $todo->name }}
            @endif
        
        

            
            
                
            
            
            
                
            
        
    
     {{ $todo->created_at }} 
    

        

            @if ($EditingTodoID == $todo->id)
            

                
                    Update
                
                
                    Cancel
                
            
            @else
            

                completed ? 'checked' : '' }} />
                
                    @if ($todo->completed)
                    
                    Completed
                    @else
                    
                    Mark as Completed
                    @endif
                
            
            @endif
        
    
          

Finally, include the Livewire scripts in your resources/views/welcome.blade.php:

Running the Application

Now, run the code to see that TODO list on your application screen. Type the following command and hit enter.

php artisan serve

Now go to your browser and visit http://localhost:8000 doing some magician 🙂

GitHub Repository

Here is a complete code for this project on my GitHub repository: GitHub Repository Link

Conclusion

And that’s it! In literally 5 minutes you built a dynamic TODO list app in Laravel + Livewire v3. Join us to build interactive applications using very little code, and see how simple and powerful Livewire is while building something practical There you have it, feel free to keep going on this project by continuing with such as storing tasks in a database or user authentication and more complex interactions.

Stay tuned for more tutorials and happy coding!🙂

Dolphin Web Solution has dedicated and skilled Laravel developers. Are you looking for a Laravel expert? If yes, then without wasting a second, contact us and hire a Laravel developer. We ensure to provide the best and most proficient Laravel developers who can meet your requirements.

Bhadresh Kotadiya

Author

Meet Bhadresh Kotadiya, a skilled Laravel developer known for his passion for fitness, knack for problem-solving, love for reading, and expertise in code debugging. Always ready to take on new challenges. he brings his experience in Laravel development to the table, seamlessly blending it with his current projects.