Task Manager: Displaying Real Database Records

Previously in this course, we covered Task Manager: Building the User Interface with Blade using hardcoded arrays. Now, it's time to stop faking it. We are moving from static mockups to a dynamic application by querying our database directly.

To build a professional application, your views must reflect the state of your database. In this lesson, we’ll replace those hardcoded variables in your controller with real data fetched via Eloquent, bringing our Task Manager to life.

Fetching Data with Eloquent

In Laravel, the controller acts as the bridge between your database and your view. Instead of defining a $tasks array manually, we will use our Task model—which we explored in our guide to Performing Basic CRUD Operations in Laravel with Eloquent—to retrieve records from the tasks table.

Eloquent models provide a clean, object-oriented syntax for database queries. When you call Task::all(), Laravel executes a SELECT * FROM tasks query and returns a collection of model instances.

Worked Example: Updating the TasksController

Open your app/Http/Controllers/TasksController.php. We need to import the Task model and update the index method to fetch records from the database instead of using a local variable.

PHP
<?php

namespace App\Http\Controllers;

use App\Models\Task; #6A9955">// 1. Import the model
use Illuminate\View\View;

class TasksController extends Controller
{
    public function index(): View
    {
        #6A9955">// 2. Fetch all tasks from the database
        $tasks = Task::all();

        #6A9955">// 3. Pass the collection to the view
        return view('tasks.index', ['tasks' => $tasks]);
    }
}

By passing $tasks to the view, the collection becomes available as an $tasks variable inside your Blade template. Because this is an Eloquent collection, you can iterate over it exactly as you did with your mock array in the previous lesson.

Rendering Records in the View

With the controller updated, your view should now automatically display whatever is in your database. If you have followed the previous steps for seeding the database, your table should already contain records.

Open your resources/views/tasks/index.blade.php. If you used an @forelse directive, no changes are required to the template logic itself, but ensure your variable naming remains consistent:

BLADE
@extends('layouts.app')

@section('content')
    <h1>My Tasks</h1>

    <ul>
        @forelse ($tasks as $task)
            <li>{{ $task->title }} - {{ $task->is_completed ? 'Done' : 'Pending' }}</li>
        @empty
            <li>No tasks found.</li>
        @endforelse
    </ul>
@endsection

Hands-on Exercise

1. Verify your database: Open your terminal and run php artisan tinker. Execute \App\Models\Task::count() to ensure your migration and seeding worked correctly.
2. Update the controller: Implement the Task::all() logic in your TasksController as shown above.
3. Refresh your browser: Navigate to your task list route. You should see the records you previously seeded.
4. Add a record: While in Tinker, run \App\Models\Task::create(['title' => 'Learn Laravel', 'is_completed' => false]); and refresh the page to see it appear instantly.

Common Pitfalls

• Missing Imports: Forgetting to add use App\Models\Task; at the top of your controller is the most common cause of "Class not found" errors.
• Database Connection: If you see a "Table not found" error, ensure you have run your migrations (php artisan migrate) and that your .env file points to a valid database file.
• The N+1 Problem: While Task::all() is fine for small lists, as your app grows, you might need to eager load relationships. We will cover this in detail when we discuss database relationships, but keep an eye on your query logs.
• Mass Assignment: If you get a MassAssignmentException when creating records in Tinker or controllers, remember to check your model's $fillable property.

Recap

We have successfully transitioned our Task Manager from static mock data to a dynamic, database-driven application. By importing our Eloquent model into the TasksController and passing the results to our Blade view, we've created a robust foundation for the rest of our CRUD operations. You now have a working UI that reflects real-time database state.

Up next: We will learn how to accept user input by building our first HTML form to create new tasks dynamically.