Đa phân trang trong 1 website với Laravel 5.x

DragonKnightMTTh3 2, 201921 Tháng Mười, 20210

Trong Laravel 5.3 trở về trước, nếu một trang web có nhiều hơn 1 phân trang sẽ là một vấn đề thì Laravel 5.4 đã giải quyết vấn đề này khá đơn giản. Tại sao phải có đa phân trang, chúng ta quay lại với ví dụ sau đây: trong một website thương mại điện tử, khi thực hiện tìm kiếm, chúng ta muốn rằng sẽ tìm kiếm từ khóa đó với cả sản phẩm và bài viết. Nhiều website bỏ qua phần tìm kiếm cho bài viết mà chỉ tập trung vào tìm kiếm cho sản phẩm, đây là một sai lầm. Kết quả tìm kiếm đa dạng sẽ giúp giữ chân khách hàng lâu hơn trên website của bạn.

Như vậy, khi thực hiện tìm kiếm trên một website thương mại điện tử chúng ta sẽ phân ra hai kết quả là một cho sản phẩm và một cho tin tức, như vậy chúng ta có 2 phân trang trong cùng một trang. Laravel Pagination giúp bạn phân trang kết quả nhanh chóng, trong bài viết này chúng ta sẽ cùng nhau thực hiện ví dụ đa phân trong trong một trang web.

Sử dụng {{ $model->links() }} trong phân trang

Trong bài viết Laravel Pagination bạn đã được làm quen với cách phân trang hoặc cách thức truyền tham số cho phân trang. Tuy nhiên, nếu trong trang đó có hai tập kết quả và sử dụng hai phân trang bằng {{ $model->links() }} sẽ làm cho tính năng phân trang bị rối loạn do nó sử dụng cùng tham số ?page=x để biết được đang đứng ở trang nào, khi đó cả hai tập kết quả sẽ cùng chuyển đến trang x.

Ví dụ về đa phân trang với Laravel Pagination

Chúng ta sẽ cùng thực hiện ví dụ đa phân trang như đã nói trong phần đầu bài viết. Mô tả kỹ hơn về đầu bài như sau:

Có một website có cả sản phẩm và bài viết, khi tìm kiếm chúng ta muốn kết quả phân thành hai phần: kết quả tìm kiếm sản phẩm và kết quả tìm kiếm bài viết, cả hai kết quả này đều được phân trang.

Ok, đề bài đã rõ ràng, chúng ta cùng thực hiện nhé.

Bước 1: Tạo bảng và thêm dữ liệu với Laravel Migration và Laravel Seeding

(Tham khảo bài viết Laravel Migration và Laravel Seeding trong làm việc với CSDL.)

Bảng products:

id: id sản phẩm
name: tên sản phẩm
price: giá sản phẩm
content: nội dung sản phẩm

Bảng news:

id: id bài viết
title: tiêu đề bài viết
content: nội dung bài viết

Tạo ra các file migration bằng câu lệnh artisan make: migration

c:\xampp\htdocs\laravel-test>php artisan make:migration create_products_table --create=products
Created Migration: 2017_04_24_024728_create_products_table

c:\xampp\htdocs\laravel-test>php artisan make:migration create_news_table --create=news
Created Migration: 2017_04_24_024755_create_news_table

Sửa nội dung các file migration này.

2017_04_24_024728_create_products_table

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateProductsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name', 255);
            $table->integer('price');
            $table->text('content');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('products');
    }
}

Với file 2017_04_24_024755_create_news_table:

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateNewsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('news', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title', 255);
            $table->text('content');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('news');
    }
}

Thực hiện tạo ra các bảng trên bằng lệnh php artisan migration

c:\xampp\htdocs\laravel-test>php artisan migrate
Migrated: 2017_04_24_024728_create_products_table
Migrated: 2017_04_24_024755_create_news_table

Tiếp theo sử dụng Laravel Seeding để thêm dữ liệu test vào: Đầu tiên chúng ta tạo ra hai seeder cho products và news bằng câu lệnh artisan make:seeder

c:\xampp\htdocs\laravel-test>php artisan make:seeder ProductsTablesSeeder
Seeder created successfully.

c:\xampp\htdocs\laravel-test>php artisan make:seeder NewsTablesSeeder
Seeder created successfully.

Thay đổi nội dung của hai file seeder này.

Nội dung file database\seeder\ProductsTableSeeder.php

<?php

use Illuminate\Database\Seeder;

class ProductsTablesSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        DB::table('products')->insert([
           ['name' => 'Sản phẩm 1', 'price' => '300000', 'content' => str_random(255)],
           ['name' => 'Sản phẩm 2', 'price' => '400000', 'content' => str_random(255)],
           ['name' => 'Sản phẩm 3', 'price' => '500000', 'content' => str_random(255)],
           ['name' => 'Sản phẩm 4', 'price' => '600000', 'content' => str_random(255)],
           ['name' => 'Sản phẩm 5', 'price' => '700000', 'content' => str_random(255)],
           ['name' => 'Sản phẩm 6', 'price' => '800000', 'content' => str_random(255)],
           ['name' => 'Sản phẩm 7', 'price' => '900000', 'content' => str_random(255)],
           ['name' => 'Sản phẩm 8', 'price' => '1000000', 'content' => str_random(255)],
        ]);
    }
}

Nội dung file database\seeder\NewsTableSeeder.php

<?php

use Illuminate\Database\Seeder;

class NewsTablesSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        DB::table('news')->insert([
			['title' => 'Bài viết về sản phẩm 1', 'content' => str_random(255)],
			['title' => 'Bài viết về sản phẩm 2', 'content' => str_random(255)],
			['title' => 'Bài viết về sản phẩm 3', 'content' => str_random(255)],
			['title' => 'Bài viết về sản phẩm 4', 'content' => str_random(255)],
			['title' => 'Bài viết về sản phẩm 5', 'content' => str_random(255)],
			['title' => 'Bài viết về sản phẩm 6', 'content' => str_random(255)],
			['title' => 'Bài viết về sản phẩm 7', 'content' => str_random(255)],
			['title' => 'Bài viết về sản phẩm 8', 'content' => str_random(255)],
			['title' => 'Bài viết về sản phẩm 9', 'content' => str_random(255)],
			['title' => 'Bài viết về sản phẩm 10', 'content' => str_random(255)],
        ]);
    }
}

Tiếp theo chúng ta thực hiện insert dữ liệu test vào CSDL

c:\xampp\htdocs\laravel-test>php artisan db:seed --class=ProductsTablesSeeder
c:\xampp\htdocs\laravel-test>php artisan db:seed --class=NewsTablesSeeder

Ok, như vậy chúng ta đã chuẩn bị xong phần dữ liệu.

Bước 2: Tạo view, route, controller xử lý phần tìm kiếm

Thêm route vào routes/web.php:

Route::post('/search', 'SearchController@searchResult');

Chỉnh sửa lại phần menu.blade.php trong resources/views/layouts (Chú ý các ví dụ đều được thực hiện trên project laravel-test nằm trong khuôn khổ khóa học Laravel 7 ngày).

    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">All Laravel TEnv</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="/">Trang chủ</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ví dụ <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="/first-blade-example">Ví dụ Blade 1</a></li>
                            <li><a href="/second-blade-example">Ví dụ Blade 2</a></li>
                        </ul>
                    </li>
                    {!! Form::open(array('url' => '/search', 'class' => 'navbar-form navbar-left', 'method' => 'get')) !!}
                        <div class="form-group">
                            {!! Form::text('keyword', '', array('class' => 'form-control', 'placeholder' => 'Nhập từ khóa...')) !!}
                        </div>
                        {!! Form::submit('Tìm kiếm', array('class' => 'btn btn-default')) !!}
                    {!! Form::close() !!}
                    <li><a href="/contact">Liên hệ</a></li>
                    @if(Session::has('login') && Session::get('login') == true)
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Xin chào {{ Session::get('name') }} <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="/logout">Đăng xuất</a></li>
                        </ul>
                    </li>
                    @endif
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </nav>

Ok, giờ chúng ta thử vào một trang bất kỳ trong project laravel-test chúng ta sẽ thấy xuất hiện công cụ tìm kiếm ở phía trên, ví dụ: http://laravel.dev/register

Tiếp theo chúng ta tạo hai Eloquent Model là Product và News:

c:\xampp\htdocs\laravel-test>php artisan make:model Product
Model created successfully.
c:\xampp\htdocs\laravel-test>php artisan make:model News
Model created successfully.

Và thay đổi nội dung app\Product.php như sau:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    protected $table = 'products';
    public static function productSearch($keyword, $paginate){
    	return Product::where('name', 'like', '%' . $keyword . '%')->paginate($paginate, ['*'], 'pp');
    }
}

Thay đổi nội dung app\News.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class News extends Model
{
    protected $table = 'news';
    public static function newsSearch($keyword, $paginate){
    	return News::where('title', 'like', '%' . $keyword . '%')->paginate($paginate, ['*'], 'np');
    }
}

Ok, tiếp theo tạo SearchController để xử lý tìm kiếm:

c:\xampp\htdocs\laravel-test>php artisan make:controller SearchController
Controller created successfully.

Thêm phương thức searchResult() vào SearchController:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Product;
use App\News;

class SearchController extends Controller
{
    public function searchResult(Request $request){
    	$keyword = $request->input('keyword');
    	$pResult = null;
    	$nResult = null;
    	if($keyword != null){
    		$pResult = Product::productSearch($keyword, 3);
    		$nResult = News::newsSearch($keyword, 3);
    	}
    	return view('fontend.search')->with(compact('pResult', 'nResult'));
    }
}

Tiếp theo chúng ta tạo view search.blade.php trong resources/views/fontend để hiển thị kết quả tìm kiếm:

@extends('layouts.default')

@section('title', 'Kết quả tìm kiếm - Allaravel.com')

@section('content')
    @php
		//dd(Request::all());
    @endphp
    <h2>Kết quả tìm kiếm cho sản phẩm</h2>
    <table class="table table-bordered">
        <tr class="success">
            <th>ID</th>
            <th>Tên sản phẩm</th>
            <th>Giá sản phẩm</th>
            <th>Nội dung</th>
        </tr>
        @foreach($pResult as $p)
        <tr>
            <td>{{ $p->id }}</td>
            <td>{{ $p->name }}</td>
            <td class="text-right">{{ number_format($p->price) }}</td>
            <td>{{ $p->content }}</td>
        </tr>
        @endforeach
    </table>
    {{ $pResult->appends(Request::all())->links() }}

    <h2>Kết quả tìm kiếm cho bài viết</h2>
    <table class="table table-bordered">
        <tr class="success">
            <th>ID</th>
            <th>Tiêu đề</th>
            <th>Nội dung bài viết</th>
        </tr>
        @foreach($pResult as $p)
        <tr>
            <td>{{ $p->id }}</td>
            <td>{{ $p->title }}</td>
            <td>{{ $p->content }}</td>
        </tr>
        @endforeach
    </table>
    {{ $nResult->appends(Request::all())->links() }}
@endsection

Bước 3: Kiểm tra kết quả đạt được trong ví dụ đa phân trang bằng Laravel Pagination

Toàn bộ các bước trên đã chuẩn bị xong, thực hiện kiểm thử ứng dụng. Vào một trang bất kỳ và tìm kiếm từ khóa “sản phẩm”, chú ý là trong bước 1 chúng ta đã cố tình chèn các sản phẩm và bài viết đều có từ sản phẩm. Kết quả cho thấy hai phần phân trang tách biệt nhau rất thuận tiện cho người sử dụng.

Lời kết

Laravel Pagination là tính năng rất hay khi làm việc với kết quả truy vấn từ CSDL, bạn hoàn toàn có thể áp dụng cho nhiều các tình huống thực tế riêng. Với Laravel 5.4, việc đa phân trang trở nên đơn giản và làm cho Laravel càng trở thành một framework tuyệt vời để phát triển các ứng dụng web.

Sử dụng {{ $model->links() }} trong phân trang

Ví dụ về đa phân trang với Laravel Pagination

Bước 1: Tạo bảng và thêm dữ liệu với Laravel Migration và Laravel Seeding

Bước 2: Tạo view, route, controller xử lý phần tìm kiếm

Bước 3: Kiểm tra kết quả đạt được trong ví dụ đa phân trang bằng Laravel Pagination

Lời kết

8 WordPress CRM Plugin có thể thực sự giúp bạn quản lý kinh doanh hiệu quả

26 công cụ hỗ trợ kiếm tiền trên mạng với affiliate hiệu quả

Related posts

File BAK là gì? Cách mở và chuyển đổi đuôi file .bak sang đuôi .dwg

Cách khắc phục lỗi scratch disks are full trong Photoshop trên Windows

Cách khắc phục Lỗi “Trang web này phía trước chứa các chương trình có hại” trong WordPress