Todo Laravel Project

Todo Laravel Project - Getting StartedTodo Laravel Project - Migration - Creating todos tableTodo Laravel Project - Model - Working with todos tableTodo Laravel Project - Laravel TinkerTodo Laravel Project - RoutesTodo Laravel Project - Routes - Home page routeTodo Laravel Project - Routes - Active, Done, Deleted page routesTodo Laravel Project - Blade Template - The master layoutTodo Laravel Project - Home page viewTodo Laravel Project - Navigation barTodo Laravel Project - Views for Active, Done and Deleted pagesTodo Laravel Project - Form to create new todo tasksTodo Laravel Project - Handle form submission - Create new todo taskTodo Laravel Project - Show todo task detailTodo Laravel Project - Controller - Creating the TodoControllerTodo Laravel Project - Form to edit todo tasksTodo Laravel Project - Edit action button for the todo tasksTodo Laravel Project - Handling update requestTodo Laravel Project - Delete action button for the todo tasksTodo Laravel Project - Handling delete request

Todo Laravel Project - Edit action button for the todo tasks

Laravel Project

← PrevNext →

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 :-)

← PrevNext →