Tiếng Việt

Hướng dẫn Laravel

Laravel - Tùy chỉnh Phân trang

Xin chào các bạn đang theo đuổi lập trình! Hôm nay, chúng ta sẽ cùng nhau lặn sâu vào thế giới kỳ diệu của các tùy chỉnh phân trang trong Laravel. Là người giáo viên khoa học máy tính ở khu phố của bạn, tôi rất vui mừng được hướng dẫn bạn trong hành trình này. Đừng lo lắng nếu bạn mới bắt đầu học lập trình - chúng ta sẽ bắt đầu từ những điều cơ bản và dần dần nâng cao. Vậy, hãy lấy một tách cà phê (hoặc trà, nếu đó là sở thích của bạn) và bắt đầu nào!

Laravel - Pagination Customizations

Phân trang là gì?

Trước khi chúng ta nhảy vào các tùy chỉnh, hãy hiểu rõ phân trang là gì. Hãy tưởng tượng bạn có một cuốn sách với hàng trăm trang. Đọc tất cả chúng một lần sẽ rất áp lực, phải không? Đó là lúc phân trang ra vào. Trong phát triển web, phân trang giống như chia cuốn sách của bạn thành các phần nhỏ hơn, hiển thị một số lượng item有限 trên mỗi trang.

Laravel, framework siêu anh hùng của chúng ta, đi kèm với các tính năng phân trang tích hợp sẵn giúp cuộc sống của chúng ta dễ dàng hơn. Nhưng đôi khi, chúng ta muốn thêm một chút phong cách riêng vào kết quả phân trang. Đó là lúc các tùy chỉnh trở nên hữu ích!

Phân trang Cơ bản trong Laravel

Hãy bắt đầu với một ví dụ đơn giản về cách phân trang hoạt động trong Laravel:

$users = User::paginate(15);

Dòng mã này lấy danh sách người dùng từ cơ sở dữ liệu và phân trang chúng, hiển thị 15 người dùng trên mỗi trang. Liệu có phải là phép thuật không? Nhưng nếu bạn muốn làm cho phân trang này trông đẹp hơn? Đó là lúc hành trình tùy chỉnh của chúng ta bắt đầu!

Tùy chỉnh Giao diện Phân trang

Bước 1: Phát hành các Giao diện Phân trang

Đầu tiên, chúng ta cần phát hành các giao diện phân trang của Laravel. Đừng lo lắng; điều này rất đơn giản! Chạy lệnh này trong terminal của bạn:

php artisan vendor:publish --tag=laravel-pagination

Lệnh này giống như nói với Laravel, "Hey, tôi muốn xem các tệp phân trang để tôi có thể chỉnh sửa chúng!"

Bước 2: Chỉnh sửa Giao diện

Bây giờ, hãy chuyển đến resources/views/vendor/pagination. Bạn sẽ thấy một số tệp ở đây. Hãy tập trung vào default.blade.php. Tệp này kiểm soát cách liên kết phân trang của bạn trông như thế nào.

Dưới đây là một tùy chỉnh đơn giản:

@if ($paginator->hasPages())
    <nav>
        <ul class="pagination">
            {{-- Liên kết Trang Trước --}}
            @if ($paginator->onFirstPage())
                <li class="disabled"><span>&laquo;</span></li>
            @else
                <li><a href="{{ $paginator->previousPageUrl() }}" rel="prev">&laquo;</a></li>
            @endif

            {{-- Các Element Phân trang --}}
            @foreach ($elements as $element)
                {{-- Dấu "Ba Chấm" Tách Bạch --}}
                @if (is_string($element))
                    <li class="disabled"><span>{{ $element }}</span></li>
                @endif

                {{-- Mảng Các Liên kết --}}
                @if (is_array($element))
                    @foreach ($element as $page => $url)
                        @if ($page == $paginator->currentPage())
                            <li class="active"><span>{{ $page }}</span></li>
                        @else
                            <li><a href="{{ $url }}">{{ $page }}</a></li>
                        @endif
                    @endforeach
                @endif
            @endforeach

            {{-- Liên kết Trang Tiếp Theo --}}
            @if ($paginator->hasMorePages())
                <li><a href="{{ $paginator->nextPageUrl() }}" rel="next">&raquo;</a></li>
            @else
                <li class="disabled"><span>&raquo;</span></li>
            @endif
        </ul>
    </nav>
@endif

Mã này có thể trông rắc rối ban đầu, nhưng hãy cùng phân tích nó:

  1. Chúng ta kiểm tra xem có nhiều trang hay không ($paginator->hasPages()).
  2. Chúng ta tạo một navigation với một danh sách không thứ tự.
  3. Chúng ta thêm một liên kết "Trước" nếu chúng ta không ở trang đầu tiên.
  4. Chúng ta vòng qua các element phân trang, thêm liên kết cho mỗi trang.
  5. Chúng ta thêm một liên kết "Tiếp" nếu có nhiều trang hơn.

Định dạng Phân trang

Bây giờ chúng ta đã tùy chỉnh cấu trúc phân trang, hãy làm cho nó trông đẹp hơn! Thêm một chút CSS vào file stylesheet của bạn:

.pagination {
    display: flex;
    list-style: none;
    padding: 0;
}

.pagination li {
    margin: 0 5px;
}

.pagination li a {
    text-decoration: none;
    padding: 5px 10px;
    border: 1px solid #ddd;
    color: #333;
}

.pagination li.active span {
    background-color: #007bff;
    color: white;
    padding: 5px 10px;
    border: 1px solid #007bff;
}

.pagination li.disabled span {
    color: #ccc;
    padding: 5px 10px;
    border: 1px solid #ddd;
}

CSS này sẽ cho phân trang của bạn một diện mạo sạch sẽ và hiện đại. Đó như mặc một bộ com-lê cho mã của bạn!

Tùy chỉnh Nâng cao

Tùy chỉnh Phân trang Sử dụng Presenter

Đối với các tùy chỉnh nâng cao hơn, Laravel cho phép chúng ta tạo một presenter tùy chỉnh. Hãy tạo một:

  1. Tạo một tệp mới app/Http/Presenters/CustomPaginationPresenter.php:
<?php

namespace App\Http\Presenters;

use Illuminate\Pagination\BootstrapPresenter;

class CustomPaginationPresenter extends BootstrapPresenter
{
    public function render()
    {
        if (!$this->hasPages()) {
            return '';
        }

        return sprintf(
            '<div class="custom-pagination">%s %s %s</div>',
            $this->getPreviousButton(),
            $this->getLinks(),
            $this->getNextButton()
        );
    }

    protected function getAvailablePageWrapper($url, $page, $rel = null)
    {
        $rel = is_null($rel) ? '' : ' rel="' . $rel . '"';

        return '<span class="page-item"><a class="page-link" href="' . $url . '"' . $rel . '>' . $page . '</a></span>';
    }

    protected function getDisabledTextWrapper($text)
    {
        return '<span class="page-item disabled"><span class="page-link">' . $text . '</span></span>';
    }

    protected function getActivePageWrapper($text)
    {
        return '<span class="page-item active"><span class="page-link">' . $text . '</span></span>';
    }
}
  1. Sử dụng presenter này trong controller của bạn:
use App\Http\Presenters\CustomPaginationPresenter;

public function index()
{
    $users = User::paginate(15);
    $presenter = new CustomPaginationPresenter($users);

    return view('users.index', compact('users', 'presenter'));
}
  1. Trong view của bạn, sử dụng presenter tùy chỉnh:
{!! $presenter->render() !!}

Kết luận

Chúc mừng! Bạn vừa học cách tùy chỉnh phân trang trong Laravel. Từ các modification cơ bản đến các presenter nâng cao, bạn bây giờ có quyền lực để làm cho kết quả phân trang của mình trông chính xác như bạn muốn.

Nhớ rằng, chìa khóa để thành thạo các khái niệm này là thực hành. Hãy thử tạo các phong cách khác nhau, thử nghiệm với presenter, và quan trọng nhất, hãy vui vẻ với nó! Phân trang có thể trông như một chi tiết nhỏ, nhưng nó có thể cải thiện trải nghiệm người dùng của ứng dụng bạn rất nhiều.

Khi chúng ta kết thúc, đây là bảng tóm tắt các phương thức chúng ta đã bao gồm:

Phương thức Mô tả
paginate() Phương thức phân trang cơ bản
vendor:publish Phát hành các giao diện phân trang
hasPages() Kiểm tra xem có nhiều trang hay không
onFirstPage() Kiểm tra xem đang ở trang đầu tiên
previousPageUrl() Lấy URL cho trang trước
nextPageUrl() Lấy URL cho trang tiếp theo
currentPage() Lấy số trang hiện tại
hasMorePages() Kiểm tra xem có nhiều trang hơn

Tiếp tục lập trình, tiếp tục học hỏi, và nhớ rằng - mỗi nhà phát triển vĩ đại đều bắt đầu từ việc là một người mới bắt đầu. Bạn đang trên đường trở thành một chuyên gia phân trang Laravel!

Credits: Image by storyset

Hướng Dẫn Trước:
Laravel - Lệnh Artisan
Hướng Dẫn Tiếp Theo:
Laravel - Máy chủ dump