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.
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.
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.
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>© {{ 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>
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:
PHPpublic 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')); }
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.
layouts/app.blade.php (you can use a simple CDN link for Tailwind CSS to make it look professional instantly).$tasks array in the TasksController to include a completed boolean.index.blade.php, use an @if directive inside your loop to strike through the task title if completed is true.@endsection: If your layout isn't rendering, check that you closed your section with @endsection. Blade is strict about these tags.@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.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.
Learn to customize Laravel validation error messages to provide clear, helpful feedback to your users. Master field-specific errors and language files.
Read moreLearn how to use Blade directives like @if, @foreach, and @forelse to control your view logic and render dynamic lists in your Laravel applications efficiently.
Task Manager: Building the User Interface
Protecting Routes with Middleware
Understanding CSRF Protection
Preventing Mass Assignment
Task Manager: Securing the Application
Introduction to Route Model Binding
Updating Existing Records
Deleting Records
Using Named Routes
Task Manager: Completing CRUD Functionality
Introduction to Database Relationships
Querying Related Data
Handling File Uploads
Using Flash Messages for User Feedback
Task Manager: Adding Status and Priorities
Introduction to Artisan Commands
Debugging with Laravel Tinker
Understanding Service Providers
Using View Composers
Task Manager: Refactoring for Clean Code
Introduction to Testing
Testing Forms and Validation
Using Database Transactions
Handling Global Exceptions
Preparing for Production
Environment Security Best Practices
Managing Assets in Production
Task Manager: Deployment Preparation