Task Manager: Building the User Interface with Blade

Learn how to build a professional UI for your Task Manager using Blade layouts and dynamic loops. We'll connect your controller logic to a clean, DRY view.

LaravelBladeUIPHPBeginnerbackend

Previously in this course, we covered Implementing Blade Partials: A Guide to DRY Laravel Views and Mastering Blade Directives for Loops and Conditionals. In this lesson, we’re going to stop working with isolated snippets and bring everything together to build the actual frontend for our Task Manager.

By the end of this session, you’ll have a professional, reusable layout structure and a dynamic task list that renders data directly from your controller.

The Power of a Master Layout

When building a web application, you rarely want to rewrite your <head>, navigation, or footer tags for every single page. That’s a recipe for maintenance nightmares. Instead, we use a master layout—a "skeleton" that defines the structure of your site, into which individual page content is "injected."

Think of your master layout as a template that holds the constant parts of your application, while yield directives act as placeholders for the unique content of each specific route.

Step 1: Creating the Master Layout

Create a new file at resources/views/layouts/app.blade.php. This will be our base structure.


HTML
<!DOCTYPE html>
style="color:#808080"><style="color:#4EC9B0">html lang="en">
style="color:#808080"><style="color:#4EC9B0">head>
    style="color:#808080"><style="color:#4EC9B0">meta charset="UTF-8">
    style="color:#808080"><style="color:#4EC9B0">title>Task Managerstyle="color:#808080"></style="color:#4EC9B0">title>
style="color:#808080"></style="color:#4EC9B0">head>
style="color:#808080"><style="color:#4EC9B0">body>
    style="color:#808080"><style="color:#4EC9B0">nav>
        style="color:#808080"><style="color:#4EC9B0">h1>Task Managerstyle="color:#808080"></style="color:#4EC9B0">h1>
    style="color:#808080"></style="color:#4EC9B0">nav>

    style="color:#808080"><style="color:#4EC9B0">main>
        @yield('content')
    style="color:#808080"></style="color:#4EC9B0">main>

    style="color:#808080"><style="color:#4EC9B0">footer>
        style="color:#808080"><style="color:#4EC9B0">p>&copy; {{ date('Y') }} Task Manager Appstyle="color:#808080"></style="color:#4EC9B0">p>
    style="color:#808080"></style="color:#4EC9B0">footer>
style="color:#808080"></style="color:#4EC9B0">body>
style="color:#808080"></style="color:#4EC9B0">html>

Building the Task List View

Now that we have a structure, we need to display our tasks. In a real-world app, you'd fetch these from a database (which we’ll cover in upcoming lessons), but for now, we will pass a hardcoded array from our controller to our view to practice the rendering logic.

First, ensure your TasksController is passing data to the view. If you followed Task Manager: Implementing the Task List Route, your controller should look like this:


PHP
public function index()
{
    $tasks = [
        ['id' => 1, 'title' => 'Learn Laravel'],
        ['id' => 2, 'title' => 'Build a Task Manager'],
        ['id' => 3, 'title' => 'Deploy to production'],
    ];

    return view('tasks.index', compact('tasks'));
}

Step 2: Implementing Dynamic Loops

Create resources/views/tasks/index.blade.php. We will use the @extends directive to pull in our layout and @section to fill the content.


BLADE
@extends('layouts.app')

@section('content')
    <h2>Your Tasks</h2>

    <ul>
        @forelse ($tasks as $task)
            <li>{{ $task['title'] }}</li>
        @empty
            <li>No tasks found. Get to work!</li>
        @endforelse
    </ul>
@endsection

Using @forelse is a best practice here. It handles the empty state automatically, ensuring the user isn't staring at a blank screen if the task list is empty.

Hands-on Exercise

Refactor your layout: Add a CSS link to your layouts/app.blade.php (you can use a simple CDN link for Tailwind CSS to make it look professional instantly).
Add a status: Update your hardcoded $tasks array in the TasksController to include a completed boolean.
Use conditionals: In your index.blade.php, use an @if directive inside your loop to strike through the task title if completed is true.

Common Pitfalls

Forgetting @endsection: If your layout isn't rendering, check that you closed your section with @endsection. Blade is strict about these tags.
Case Sensitivity: Blade filenames and folder structures are case-sensitive on Linux-based servers (like those used in production). Always use lowercase for directory and file names to avoid "View not found" errors when you eventually deploy.
Nesting Issues: Avoid putting your @extends directive inside a @section. The @extends must be at the very top of the file to tell Laravel which layout to wrap the content in.

Recap

We've moved from simple routes to a structured UI architecture. By using a master layout, we ensure our Task Manager remains DRY. By leveraging Blade directives like @forelse and @extends, we’ve created a clean, maintainable view layer that is ready to handle real database records.

Up next: We will dive into the database layer by exploring Database Migrations to store our tasks permanently.

Work with me

Laravel REST API Development

Clean, secure, well-documented Laravel REST APIs — the backend engine for your app, mobile client, or SaaS. Built by an API specialist.

From $180

FilamentPHP Admin Panel & Dashboard Development

A powerful admin panel for your Laravel app — built with FilamentPHP so you can manage everything without touching the database.

From $250

Back to Blog