Laravel10の公式サイトに説明があるのですが、
暗黙知がかなり含まれているので補足していきます。
前提条件
- Ubuntuで作業していきます。
- PHP8.2以降インストール済。
- Composer v2以降インストール済。
- データベースはSQLiteを使います。
Paginationとは
データベースの検索結果を表示する際によく使われる手法で、１ページあたりの表示件数を設定してページ分けして表示します。
こんな感じのものです↓↓↓
以前はGoogleやYahoo!でもこのようなページネーションをしていましたが、最近ではYoububeやFacebookのようにページ最下部までスクロールすることで次のページを自動読込して追加表示する形式に変更されてしまいました。
ここでは、従来のページネーションを実施します。
環境準備
Laravelの新規プロジェクト「pagination」を作成してデータベースを使えるようにしていきます。
composer create-project laravel/laravel pagination
プロジェクトトップ「pagination」内の「.env」を編集します。
「DB_CONNECTION=mysql」の箇所を
「DB_CONNECTION=sqlite」に修正して
他のDB項目を削除します。
データベースシーダーを設定します。
「database/seeders/DatabaseSeeder.php」を開いて15行目のコメントを外して数字を適当に150とかに書き替えます。
シーダーオプション付きでマイグレーションを実行します。
php artisan migrate --seed「Would you like to create it?」と訊かれるので[←]キーで「Yes」を選択して[Enter]キーを押して確定します。
マイグレーション時にユーザーが150件作成されました。
WEBサービスを起動します。
php artisan serve
WEBブラウザで表示確認してみます。
Laravelデフォルトページが表示されました。
これで準備完了です。
コントローラー作成
まずはコントローラーを作ります。
php artisan make:controller UsersController
「app/Http/Controllers/UsersController.php」を開いて編集します。
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
class UsersController extends Controller
{
public function index()
{
return view('users', [
'users' => User::paginate(10),
]);
}
}
テンプレート変数「users」にページネーションの結果が「Illuminate\Pagination\LengthAwarePaginator」オブジェクトとして格納されます。
テンプレート変数「users」をビュー側でvar_dump()すると次のようになります。
/home/macocci7/work/pagination/storage/framework/views/9be0c4d011c23ae5fb880828745cc740.php:3:
object(Illuminate\Pagination\LengthAwarePaginator)[643]
protected 'items' =>
object(Illuminate\Database\Eloquent\Collection)[1274]
protected 'items' =>
array (size=10)
0 =>
object(App\Models\User)[1276]
...
1 =>
object(App\Models\User)[1277]
...
2 =>
object(App\Models\User)[1278]
...
3 =>
object(App\Models\User)[1279]
...
4 =>
object(App\Models\User)[1280]
...
5 =>
object(App\Models\User)[1281]
...
6 =>
object(App\Models\User)[1282]
...
7 =>
object(App\Models\User)[1283]
...
8 =>
object(App\Models\User)[1284]
...
9 =>
object(App\Models\User)[1285]
...
protected 'escapeWhenCastingToString' => boolean false
protected 'perPage' => int 10
protected 'currentPage' => int 1
protected 'path' => string 'http://localhost:8000/users' (length=27)
protected 'query' =>
array (size=0)
empty
protected 'fragment' => null
protected 'pageName' => string 'page' (length=4)
public 'onEachSide' => int 3
protected 'options' =>
array (size=2)
'path' => string 'http://localhost:8000/users' (length=27)
'pageName' => string 'page' (length=4)
protected 'total' => int 150
protected 'lastPage' => int 15ビュー作成
次にビューを作成します。
php artisan make:view users
「resources/views/users.blade.php」を開いて編集します。
<div>
@isset($users)
<ul>
@foreach ($users as $user)
<li>{{ $user->id }}: {{ $user->name }} <{{ $user->email }}</li>
@endforeach
</ul>
{{ $user->links() }}
@endisset
</div>
「@foreach ()」でユーザー一覧を表示しています。
「$user->links()」メソッドでページ一覧を表示します。
ルーティング
「routes/web.php」を開いて次の行を追記します。
Route::get('/users', [\App\Http\Controllers\UsersController::class, 'index']);
ブラウザで表示確認
- http://locahost:8000/users
にアクセスします。
ユーザー一覧が表示されています。
その下にページネーションの結果が表示されています。
が、スタイルが適用されていないので、とても見れたものではありません。
ページをスクロールするとこのようになっています。
デフォルトはtailwind CSS用に作られているので、
CDN版のtailwind CSSをテンプレートに適用してみます。
「resouces/views/users.blade.php」に次の１行を追記します。
<script src="https://cdn.tailwindcss.com"></script>
WEBブラウザを再読み込みしてみます。
このようにスタイルが適用されて表示が整いました。
他のスタイルも使ってみる
Laravel側でいくつかテンプレートが用意されているので、次のコマンドでpublishします。
php artisan vendor:publish --tag=laravel-pagination
「resources/views/vendor/pagination/」フォルダに
９個のテンプレートファイルが展開されます。
デフォルトで適用されているのが「tailwind.blade.php」です。
ビューファイルで使っている「links()」メソッドの
引数としてビューファイルの指定ができます。
bootstrap-5を使うには
links('vendor.pagination.bootstrap-5')といった形で指定します。
bootstrap v5 のCSSをCDNで適用するように
ビューファイルに次の行を追記します。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">完成形は次の通りです。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div>
@isset($users)
<ul>
@foreach ($users as $user)
<li>{{ $user->id }}: {{ $user->name }} <{{ $user->email }}</li>
@endforeach
</ul>
{{ $users->links('vendor.pagination.bootstrap-5') }}
@endisset
</div>ブラウザを再読み込みすると次のようになります。
筆者は短めのbootstrap-4が好みです。
現在のページ番号の両脇に何件表示させるかの指定もできます。
onEachSide(件数)->links(View名)ビューファイルは次のような感じです。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div>
@isset($users)
<ul>
@foreach ($users as $user)
<li>{{ $user->id }}: {{ $user->name }} <{{ $user->email }}</li>
@endforeach
</ul>
{{ $users->onEachSide(1)->links('vendor.pagination.bootstrap-4') }}
@endisset
</div>
ブラウザを再読み込みすると
現在のページの両脇が１件ずつになっています。
いちいちビュー名の指定が面倒なので、
bootstrap-4をデフォルトにしてしまいます。
「app/Providers/AppServiceProvider.php」を開いて編集します。
<?php
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use Illuminate\Pagination\Paginator;
class AppServiceProvider extends ServiceProvider
{
/**
* Register any application services.
*/
public function register(): void
{
//
}
/**
* Bootstrap any application services.
*/
public function boot(): void
{
Paginator::defaultView('vendor.pagination.bootstrap-4');
Paginator::defaultSimpleView('vendor.pagination.simple-bootstrap-4');
}
}
こうすれば、links()メソッドの引数を省略しても、
bootstrap-4が適用されるようになります。
ビューファイルを編集しなおします。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div>
@isset($users)
<ul>
@foreach ($users as $user)
<li>{{ $user->id }}: {{ $user->name }} <{{ $user->email }}</li>
@endforeach
</ul>
{{ $users->onEachSide(0)->links() }}
@endisset
</div>
ブラウザを再読み込みします。
デフォルトがbootstrap-4になっています。
今回はここまでです。お疲れさまでした。
続きはこちらです。
コメント