Bài 20: Phân trang trong Laravel 5

Phân trang trong laravel 5 (Pagination) là một tính năng rất quan trọng với nhiều trang web để hiển thị nội dung đặc biệt với những trang web có rất nhiều nội dung truy xuất từ cơ sở dữ liệu. Trong bài viết này mình sẽ giới thiệu cho các bạn về phân trang và cách thực hiện phân trang trong Laravel 5

1. Giới thiệu về phân trang

Phân trang (pagination) được sử dụng khi bạn có quá nhiều dữ liệu cần phải hiển thị lên trang web của mình tuy nhiên chúng không thể hiển thị cùng lúc được. Do đó, bạn phải phân trang để hiển thị kết quả theo từng trang (page) để giúp người dùng có thể xem kết quả trực quan hơn và giúp giảm việc phải tải một lượng dữ liệu quá lớn từ CSDL tại cùng một thời điểm.

Thông thường nếu không sử dụng framework hoặc với các framework không hỗ trợ hoặc hỗ trợ rất ít với việc phân trang thì các bạn sẽ phải làm tương đối khó khăn thông qua 4 bước sau:

• Tính tổng số record trong CSDL.
• Xác định số record trên một trang.
• Tính tổng số trang dựa trên tổng số record và số record trên một trang.
• In ra trình duyệt.

Tuy nhiên trong Laravel, việc phân trang rất đơn giản, bạn có thể tạo ra một phạm vi “thông minh” cho các liên kết (các trang) dựa trên trang hiện tại và tạo ra các mã HTML tương thích với framework CSS Bootstrap chỉ với việc sử dụng phương thức paginate.

2. Xây dựng Model Customer và thêm dữ liệu với thư viện Faker

Đầu tiên mình sẽ hướng dẫn các bạn cách tạo một danh sách khách hàng và thêm dữ liệu vào. Các bạn vào trong console di chuyển đến thư mục ứng dụng và gõ lệnh  php artisan make:model Customer -m để tạo model mới:

Tiếp theo, các bạn vào file migration vừa được Laravel tạo tại database/migrations/_create_customers_table và nhập các trường thông tin cho khách hàng tại hàm up() như sau:

PHP

1 2 3 4 5 6 7 8 9 10

public function up()     {         Schema::create('customers', function (Blueprint $table) {             $table->increments('id');             $table->string('name');             $table->integer('age');             $table->string('phone');             $table->timestamps();         });     }

Sau đó các bạn vào trong console và gõ lệnh php artisan migrate để tạo bảng trong CSDL:

Thông thường, để thêm dữ liệu vào CSDL các bạn phải thêm từng bản ghi một và cách làm này tương đối mất thời gian nếu các bạn muốn có một số lượng bản ghi mẫu lớn để kiểm tra các kết quả truy vấn. Tuy nhiên, có một công cụ được tạo ra để giúp chúng ta giải quyết vấn đề đó chính là thư viện tạo dữ liệu Faker. Để cài đặt ta vào console và gõ lệnh composer require fzaninotto/faker:

Thông thường để thêm (seed) dữ liệu vào trong CSDL thông qua Laravel các bạn sẽ sử dụng lệnh php artisan db:seed để gọi đến filedatabase/seeds/DatabaseSeeder.php trông như sau:

Lệnh run() là nơi gọi đến các hàm dùng để thêm dữ liệu vào trong CSDL. Đầu tiên ta cập nhật hàm run() của file DatabaseSeeder.php như sau:

PHP

1 2 3 4 5 6 7

public function run()     {         Model::unguard();         DB::table('customers')->delete();         $this->call(CustomersTableSeeder::class);         Model::reguard();     }

Tiếp theo, ta tạo một file mới đặt tên là CustomersTableSeeder và đặt nó trong thư mục database/seeds như sau:

Ta thêm nội dung vào cho file CustomersTableSeeder như sau:

PHP

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<?php   use Illuminate\Database\Seeder; use Illuminate\Database\Eloquent\Model; use App\Customer;   class CustomersTableSeeder extends Seeder{     public function run()     {         $faker = Faker\Factory::create();         foreach(range(1,50) as $index)         {             Customer::create([                 'name' => $faker->name,                 'age'  => $faker->randomNumber(2),                 'phone'=> $faker->phoneNumber             ]);         }     } }

Sau khi lưu xong nội dung file ta vào trong console và gõ lệnh composer dump-autoload rồi chạy lệnh php artisan db:seed:

Kết quả thấy được trong CSDL như sau:

Tiếp theo ta vào trong console gõ lệnh php artisan make:controller CustomerController –m để tạo Controller cho Customer:

Vào file App\Http\Controllers\CustomerController và thêm hàm index() để hiển thị dữ liệu ra như sau:

PHP

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<?php   namespace App\Http\Controllers;   use Illuminate\Http\Request;   use App\Http\Requests; use App\Http\Controllers\Controller; use App\Customer; class CustomerController extends Controller {     public function index()     {         $customers = Customer::all();         return view("customers.index")->with('customers',$customers);     } }

Việc tiếp theo cần làm là tạo view để hiển thị toàn bộ danh sách khách hàng. Các bạn tạo file index.blade.php và đặt trong resources/views/customers (lưu ý là ta sử dụng framework CSS Bootstrap để hiển thị giao diện):

//========================================================

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>Danh sách khách hàng</title>

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

 <h1>Danh sách khách hàng</h1>

 <table class="table">

  <tr>

   <td>ID</td>

   <td>Tên khách hàng</td>

   <td>Tuổi</td>;

   <td>Số điện thoại</td>

  </tr>

  @foreach($customers as $customer)

   <tr>

    <td>{{$customer->id}}</td>

    <td>{{$customer->name}}</td>

    <td>{{$customer->age}}</td>

    <td>{{$customer->phone}}</td>

   </tr>

  @endforeach

 </table>;

 {!! $customers->render() !!}

</div>

</body>

</html>

==================================================

Việc cuối cùng cần làm đó là tạo đường dẫn (route), ta vào file App\Http\routes.php và thêm dòng lệnh sau:

PHP

1	Route::get('/customer','CustomerController@index');

Kết quả sau khi ta vào trang /customer như sau:

Tuy nhiên thông thường ta sẽ không hiển thị toàn bộ danh sách ra như vậy đặc biệt đối với những danh sách dài có hàng trăm ngàn bản ghi. Đó là lí do ta cần phải sử dụng phân trang và trong phần sau mình sẽ hướng dẫn các bạn cách phân trang trong Laravel.

3. Phân trang trong Laravel 5 với phương thức paginate

Trong Laravel 5, việc phân trang dữ liệu có một vài phương thức tuy nhiên phương thức đơn giản nhất là sử dụng phương thức paginate trên query builder hoặc trên các query của Eloquent được xây dựng sẵn. Phương thức paginate sẽ tự động tính số trang, số bản ghi trên một trang hay trang trước, trang sau dựa trên trang hiện tại đang được xem bởi người dùng.

Theo mặc định, trang hiện tại được xác định theo giá trị của tham số ?page trên chuỗi truy vấn request HTTP (Ví dụ:http://kungfuphp.com/laravel/post?page=3) và giá trị này sẽ được Laravel sử dụng để tạo ra liên kết tới thanh phân trang (paginator).

Đầu tiên ta vào trong file App\Http\Controllers\CustomerController thay đổi nội dung hàm index() như sau:

PHP

1 2 3 4 5

public function index() {   $customers = Customer::paginate(10);   return view("customers.index")->with('customers',$customers); }

Ta vào file resources/view/customers/index.blade.php và thêm vào dưới </table> một dòng code sau:

PHP

1	{!! $customers->render() !!}

Sau đó vào lại trang /customer ta sẽ thấy bảng sẽ chỉ hiện ra 10 bản ghi và 1 thanh chuyển trang (paginator) ở phía dưới như sau:

Ấn vào các trang tiếp theo ta thấy kết quả sẽ hiển thi từng trang một ví dụ như khi kích chuột vào trang 2:

Chỉ với phương thức paginate ta có thể phân trang một cách dễ dàng và hiển thị thông qua phương thức render() tại view. Đối với khi các bạn truy vấn có điều kiện thì cách làm cũng rất đơn giản đó là thêm phương thức paginate vào phía sau chẳng hạn như ta truy vấn tất cả khách hàng có tuổi lớn hơn 30 thì ta chỉ việc vào file App\Http\Controllers\CustomerController.php và cập nhật hàm index() như sau:

PHP

1 2 3 4 5

public function index() {   $customers = Customer::where('age','>',30)->paginate(10);   return view("customers.index")->with('customers',$customers); }

Kết quả hiện ra sẽ như sau:

Như vậy trong bài viết này mình đã hướng dẫn các bạn cách thêm một lượng dữ liệu mẫu vào trong CSDL thông qua thư viện Faker và cách sử dụng phân trang trong Laravel sử dụng hàm paginate. Các bạn nếu có thắc mắc gì hãy comment phía dưới và hẹn gặp lại các bạn trong bài viết sau.

Nguồn: http://kungfuphp.com/