Todo Laravel Project

Todo Laravel Project - Views for Active, Done and Deleted pages

Laravel Project

← Prev Next →

In this Laravel project tutorial we will create views for the Active, Done and Deleted pages using Blade template.

The Active page

Create a new file active.blade.php inside the resources/views directory and write the following code to create the active view page.

@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">

        <p class="my-3 text-center">ACTIVE</p>
        
        @if (count($todos) > 0)

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

            <li class="list-group-item">{{ $todo->title }}</li>

          @endforeach
          </ul>

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

      </div>

      <!-- nav -->
      <div class="my-3">
        <!-- prev button -->
        @if ($page > 1)
          <a href="/todo/active/{{ $page - 1 }}" class="btn btn-primary">Prev</a>
        @endif

        <!-- next button -->
        @if (count($todos) === 10)
          <a href="/todo/active/{{ $page + 1 }}" class="btn btn-primary float-right">Next</a>
        @endif
      </div>
      <!-- nav ends here -->

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

Active page route

To render the active view page we have to also configure our route so open routes/web.php file and update the active todo tasks route.

Route::get('/todo/active/{page?}', function($page = 1) {
    $todo = new Todo();

    $result = $todo
                ->where('status', '=', 'ACTIVE')
                ->forPage($page, 10)
                ->get();

    // return $result;
    return view('active', ['todos' => $result, 'page' => $page]);
});

Now visit the active page and you will get to see max 10 ACTIVE todo tasks and Prev and Next button at the bottom of the page if there are more tasks.

Similarly we can create the view for the Done and Deleted pages.

The Done page

Create a new file done.blade.php inside the resources/views directory and write the following code.

@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">

        <p class="my-3 text-center">DONE</p>
        
        @if (count($todos) > 0)

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

            <li class="list-group-item">{{ $todo->title }}</li>

          @endforeach
          </ul>

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

      </div>

      <!-- nav -->
      <div class="my-3">
        <!-- prev button -->
        @if ($page > 1)
          <a href="/todo/done/{{ $page - 1 }}" class="btn btn-primary">Prev</a>
        @endif

        <!-- next button -->
        @if (count($todos) === 10)
          <a href="/todo/done/{{ $page + 1 }}" class="btn btn-primary float-right">Next</a>
        @endif
      </div>
      <!-- nav ends here -->

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

And update the Done route.

Route::get('/todo/done/{page?}', function($page = 1) {
    $todo = new Todo();

    $result = $todo
                ->where('status', '=', 'DONE')
                ->forPage($page, 10)
                ->get();

    // return $result;
    return view('done', ['todos' => $result, 'page' => $page]);
});

If we now visit the Done page we will get the following output.

The Deleted page

Create a new file deleted.blade.php inside the resources/views directory and add the following code.

@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">

        <p class="my-3 text-center">DELETED</p>
        
        @if (count($todos) > 0)

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

            <li class="list-group-item">{{ $todo->title }}</li>

          @endforeach
          </ul>

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

      </div>

      <!-- nav -->
      <div class="my-3">
        <!-- prev button -->
        @if ($page > 1)
          <a href="/todo/deleted/{{ $page - 1 }}" class="btn btn-primary">Prev</a>
        @endif

        <!-- next button -->
        @if (count($todos) === 10)
          <a href="/todo/deleted/{{ $page + 1 }}" class="btn btn-primary float-right">Next</a>
        @endif
      </div>
      <!-- nav ends here -->

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

Update the Delete page route.

Route::get('/todo/deleted/{page?}', function($page = 1) {
    $todo = new Todo();

    $result = $todo
                ->where('status', '=', 'DELETED')
                ->forPage($page, 10)
                ->get();

    // return $result;
    return view('deleted', ['todos' => $result, 'page' => $page]);
});

If we now visit the Deleted page we will get the following output.

Exercise for you

If you look at the above code you will notice that we are repeating the bottom navigation Prev Next button code. Feel free to create a separate file for the Prev Next button and use it in these pages.

Okay, now we have pages for the Active, Done and Deleted todo tasks and a working navigation bar to navigate between pages.

In the next tutorial we will create a form that will help up to create new todo task.

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

← Prev Next →