Todo Laravel Project - Edit action button for the todo tasks

In this Laravel project tutorial we will create an edit action button for the todo tasks.

In the previous tutorial we created the Edit form for the todo task. Now we will add an edit action button that will take us to the edit page.

Include Font Awesome for the icons

Open the app.blade.php file that is inside the resources/views/layouts directory.

In the head add the font awesome CSS file.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

Adding edit button to the home page

Open the home.blade.php file and add the edit button using the following HTML code.

<div>
  <a data-toggle="collapse" href="#collapse-id-{{ $todo->id }}">{{ $todo->title }}</a>
  <div class="btn-group btn-group-sm float-right" role="group" aria-label="Basic example">
    <a href='/todo/{{ $todo->id }}' 
       class="btn btn-secondary"><i class="fa fa-pencil"></i></a>
  </div>
</div>

So, the home page will start to look like the following.

@extends('layouts.app')

@section('title', 'Todo Laravel - Yusuf Shakeel')

@section('content')
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 offset-sm-3 col-md-6 offset-md-3">
      
      <div class="my-3">
        
        @if (count($todos) > 0)

          <ul class="list-group">
          @foreach ($todos as $todo)

            <li class="list-group-item">
              <div>
                <a data-toggle="collapse" href="#collapse-id-{{ $todo->id }}">{{ $todo->title }}</a>
                <div class="btn-group btn-group-sm float-right" role="group" aria-label="Basic example">
                  <a href='/todo/{{ $todo->id }}' 
                     class="btn btn-secondary"><i class="fa fa-pencil"></i></a>
                </div>
              </div>
              <div class="collapse" id="collapse-id-{{ $todo->id }}">
                <div class="card card-body">
                  <div class="todo-description">{{ $todo->description }}</div>
                  <hr>
                  <p>Status: {{ $todo->status }}</p>
                  <p title="{{ $todo->created_at }}">Created: {{ $todo->created_at->diffForHumans() }}</p>
                </div>
              </div>
            </li>

          @endforeach
          </ul>

        @else
          <p class="lead">No ACTIVE todo tasks</p>
        @endif

      </div>

    </div>
  </div>
</div>
@endsection

If we now open the home page we will get to see the following.

If the user clicks on the edit button then the todo task will be opened in the edit page.

Exercise for you

Go ahead and add the edit button to the active.blade.php, done.blade.php and deleted.blade.php files.

In case you need the code then please check my GitHub repository todo-laravel. You will find the code of this project there.

Alright, in the next tutorial we will handle the update request.

If you find the tutorials on this website helpful and interesting then please share the links.

See you in the next tutorial. Have fun coding :-)