Todo Laravel Project - Home page view

In this Laravel project tutorial we will create the home page view using Blade template.

In the Blade Template - The master layout tutorial we created a master layout for our todo-laravel project. Feel free to check that out.

The home page view

Create a new file inside the resources/views directory and save it as home.blade.php. This file will hold the home page view.

Now, inside this file write the folowing 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">
      
      <h1>Home page</h1>

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

In the above code we are first extending the master layout file which is inside the layouts directory and saved by the name app.blade.php.

When we write @extends('layouts.app') it gets translated into resources/views/layouts/app.blade.php file.

We don't have to use the .blade.php extension. Laravel will handle that for us.

Next, we are creating a section @section('title', 'Todo Laravel - Yusuf Shakeel'). This will set the @yield('title') in the master layout. So the title of the home page will be 'Todo Laravel - Yusuf Shakeel'. Feel free to use any title you like.

Then we are creating another section for the @yield('content').

Inside the @section('content') we have the code that will become the home page content.

We are using Bootstrap 4 to style our page. If you are not familiar with Twitter Bootstrap then don't worry. We use it to style our website. Its easy and you can learn it in a couple of days if you are already familiar with HTML, CSS, JavaScript and jQuery.

To check this home page view we have to setup our home page route. So, lets go ahead and fix that.

Using the home page view in the route

Open the routes/web.php file and change the home page route to the following.

Route::get('/', function() {
    $todo = new Todo();

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

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

In the above code we are using Eloquent Todo model to fetch max 10 ACTIVE todo tasks and passing it to the home page view.

The line return view('home', ['todos' => $result]); gets translated into the following.

Use the resources/views/home.blade.php file and pass the value saved in the $result variable to the view file.

Inside the home view file we will access the passed value using the $todos variable.

Using the todos value in the home view

Go back to the home.blade.php file and below the Home Page line write the following code {{ $todos }}.

@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">
      
      <h1>Home page</h1>

      {{ $todos }}

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

Visit the home page

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

We can see that we are printing the ACTIVE todo tasks in JSON format in the home page.

Showing ACTIVE todo tasks as a list

Go back to home.blade.php file and update the code to 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">{{ $todo->title }}</li>

          @endforeach
          </ul>

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

      </div>

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

In the above code we are first checking if there are any todo tasks in the variable $todos using @if directive and count() function.

If there is a todo task then we are taking help of @foreach() directive to loop and construct the list items.

To access title property of a given todo task we are using $todo->title.

If we go back to the home page and reload we will now get the following output.

Alright, the home page is now looking good. But we need a navigation bar at the top to jump between pages.

So lets move to the next tutorial and build the nav bar for the website.

See you there. Have fun coding :-)