Pagination in Laravel - Mini Project: Build & Apply

Pagination in Laravel

📖 Scenario: You are building a simple blog website using Laravel. You want to show a list of blog posts on a page, but only a few posts at a time so the page does not get too long. This is called pagination.Pagination helps users see content in smaller chunks and navigate between pages easily.

🎯 Goal: Create a Laravel controller method that fetches blog posts from the database and paginates them, then display the paginated posts in a Blade view with navigation links.

📋 What You'll Learn

Create a Laravel Eloquent query to get all posts

Set a pagination limit of 5 posts per page

Pass the paginated posts to a Blade view

Display the posts and pagination links in the Blade view

💡 Why This Matters

🌍 Real World

Pagination is used in almost every website that shows lists of items, like blogs, products, or users, to improve user experience and performance.

💼 Career

Knowing how to implement pagination in Laravel is a common task for web developers working with databases and user interfaces.

1

Set up the Posts data retrieval

In the PostController, create a method called index that retrieves all posts using Post::query() and stores it in a variable called postsQuery.

Laravel

<?php

namespace App\Http\Controllers;

use App\Models\Post;

class PostController extends Controller
{
    // Create a method called index
    // Your code here
}

Hint

Use Post::query() to start building a query for posts.

2

Add pagination configuration

Inside the index method, create a variable called perPage and set it to 5 to define how many posts to show per page.

Laravel

<?php

namespace App\Http\Controllers;

use App\Models\Post;

class PostController extends Controller
{
    public function index()
    {
        $postsQuery = Post::query();
        // Set posts per page
        // Your code here
    }
}

Hint

Set $perPage to 5 to limit posts per page.

3

Apply pagination to the posts query

Use the paginate method on $postsQuery with $perPage as argument, and store the result in a variable called posts.

Laravel

<?php

namespace App\Http\Controllers;

use App\Models\Post;

class PostController extends Controller
{
    public function index()
    {
        $postsQuery = Post::query();
        $perPage = 5;
        // Paginate posts
        // Your code here
    }
}

Hint

Call paginate($perPage) on $postsQuery and save to $posts.

4

Return view with paginated posts and display links

Return the Blade view posts.index from the index method, passing the posts variable. In the Blade view, loop over $posts to show each post's title inside an <li>. Below the list, add the pagination links using {{ $posts->links() }}.

Laravel

paginate($perPage);
        // Return view with posts
        // Your code here
    }
}

// In resources/views/posts/index.blade.php
// Loop over $posts and show titles
// Add pagination links
// Your code here

Hint

Use return view('posts.index', ['posts' => $posts]) in controller.
In Blade, use @foreach ($posts as $post) to loop and {{ $posts->links() }} for pagination links.

Practice

1. What is the main purpose of using paginate() in Laravel?

easy

A. To join multiple tables in a query

B. To sort data alphabetically

C. To delete records from the database

D. To split large data sets into smaller pages for easier viewing

Solution

1. Step 1: Understand the function of paginate()

   The paginate() method divides a large set of data into smaller chunks or pages.

2. Step 2: Recognize the benefit of pagination

   This makes data easier to view and improves website speed by loading only a subset of data at a time.

3. Final Answer:

   To split large data sets into smaller pages for easier viewing -> Option D

4. Quick Check:

   Pagination = split data into pages [OK]

Hint: Remember paginate() breaks data into pages [OK]

Common Mistakes:

• Confusing paginate() with sorting methods
• Thinking paginate() deletes data
• Assuming paginate() merges tables

2. Which of the following is the correct way to paginate 10 items per page in a Laravel Eloquent query?

easy

A. $users = User::get(10);

B. $users = User::paginate(10);

C. $users = User::limit(10)->paginate();

D. $users = User::paginate()->take(10);

Solution

1. Step 1: Identify correct paginate() usage

   The paginate() method accepts the number of items per page as an argument, like paginate(10).

2. Step 2: Check other options for syntax errors

   get(10) does not paginate, limit(10)->paginate() is incorrect usage, and paginate()->take(10) is invalid chaining.

3. Final Answer:

   $users = User::paginate(10); -> Option B

4. Quick Check:

   paginate(10) sets items per page [OK]

Hint: Use paginate(number) to set items per page [OK]

Common Mistakes:

• Using get() instead of paginate()
• Chaining limit() before paginate() incorrectly
• Calling take() after paginate()

3. Given this code in a Laravel controller:

$posts = Post::paginate(5);

And this Blade snippet:

@foreach ($posts as $post)
  {{ $post->title }}
@endforeach
{{ $posts->links() }}

What will be the output behavior when visiting the page?

medium

A. Shows 5 post titles per page with navigation links to other pages

B. Shows all posts without any pagination links

C. Shows only the first post title without navigation

D. Throws an error because links() is not a valid method

Solution

1. Step 1: Understand paginate() and links() usage

   paginate(5) limits results to 5 per page. links() generates page navigation links automatically.

2. Step 2: Predict output behavior

   The page will display 5 post titles and show links to navigate between pages.

3. Final Answer:

   Shows 5 post titles per page with navigation links to other pages -> Option A

4. Quick Check:

   paginate(5) + links() = paged list with navigation [OK]

Hint: paginate() limits items, links() shows page navigation [OK]

Common Mistakes:

• Thinking links() is not a method
• Expecting all posts to show at once
• Assuming only one post shows

4. You wrote this code but get an error:

$users = User::paginate;

What is the problem and how to fix it?

medium

A. Missing parentheses after paginate; fix with paginate()

B. paginate is not a method; use get() instead

C. paginate requires a parameter; add paginate(10)

D. User model does not support pagination

Solution

1. Step 1: Identify syntax error

   paginate is a method and must be called with parentheses ().

2. Step 2: Correct the code

   Change User::paginate to User::paginate() to fix the error.

3. Final Answer:

   Missing parentheses after paginate; fix with paginate() -> Option A

4. Quick Check:

   Method calls need () [OK]

Hint: Always add () when calling methods [OK]

Common Mistakes:

• Forgetting parentheses on method calls
• Using get() instead of paginate() for pagination
• Assuming paginate needs a parameter always

5. You want to customize the pagination to show 15 items per page and use a Bootstrap 5 style in your Blade view. Which code snippet correctly achieves this?

hard

A. $posts = Post::paginate(15, 'bootstrap-5');

{{ $posts->links() }}

B. $posts = Post::paginate(15);

{{ $posts->links('bootstrap') }}

C. $posts = Post::paginate(15);

{{ $posts->links('pagination::bootstrap-5') }}

D. $posts = Post::paginate(15);

{{ $posts->links() }}

Solution

1. Step 1: Set items per page correctly

   Use paginate(15) to show 15 items per page.

2. Step 2: Use correct Bootstrap 5 pagination view

   Pass 'pagination::bootstrap-5' to links() to apply Bootstrap 5 styles.

3. Step 3: Verify other options

   The option with paginate(15, 'bootstrap-5') incorrectly passes the style to paginate(), links('bootstrap') uses wrong view name, and plain links() uses default style.

4. Final Answer:

   $posts = Post::paginate(15); {{ $posts->links('pagination::bootstrap-5') }} -> Option C

5. Quick Check:

   paginate(15) + links('pagination::bootstrap-5') = custom styled pagination [OK]

Hint: Use links('pagination::bootstrap-5') for Bootstrap 5 style [OK]

Common Mistakes:

• Passing style name to paginate() instead of links()
• Using wrong view name for Bootstrap
• Forgetting to set items per page