Laravel 10 入門トップページ

---

目次

1. 全体の概要
2. Laravel によるユーザ認証
3. ユーザ認証を備えたコメント掲示板の開発
   1. 概要
   2. データベースのマイグレーション
   3. シーダによるコメントデータの登録
   4. モデルとコントローラの生成
   5. ルートの定義と確認
   6. 未検証ユーザの動作検証
   7. コメントの一覧表示
   8. ナビゲーションメニューの追加
   9. コメント一覧の Tailwind CSS によるスタイリング
   10. コメントの詳細ページ
   11. リレーションシップの設定と投稿者名の表示
   12. ページネーションの作成
   13. コメントの投稿
   14. コメントの編集
   15. コメントの削除
   16. ナビゲーションのハイライトを調整
4. マルチ認証の実現

---

Laravel でユーザ認証とマルチ認証を実現する

ユーザ認証を備えたコメント掲示板の開発

ページネーションの作成

コメントの件数が増加したときには，すべてのコメントを一度に表示することは考えられず，例えば10件ごとにページを分けて表示するというページネーションの機能が必須になります．Laravel ではこのページネーションを非常に簡単に実装することができます．

すでにコメントデータが100件ほど登録されているので，これを更新日時 (updated_at) の降順にソートして先頭の3件だけを取得するようにコントローラを修正します．

app/Http/Controllers/CommentController.php（抜粋）コピー
    public function index()
    {
        $comments = Comment::orderBy('updated_at','DESC')
                    ->paginate(3);
        // dd($comments);
        return view('comments.index')
                ->with('comments', $comments);
    }

表示ページを切り替えるためのリンクを適当な場所に配置します．

resources/views/comments/index.blade.phpコピー
<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Comments') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    @foreach ($comments as $comment)
                        <div class="my-2 border border-gray-300 rounded-md p-3">
                            <div class="text-sm text-gray-700">{{ $comment->user->name }}</div>
                            <div class="font-semibold">
                                <a href="{{ route('comments.show', $comment->id) }}" class="text-blue-500 hover:text-blue-800 hover:underline active:text-blue-900 active:bg-gray-200 transition ease-in-out duration-150">
                                    {{ $comment->title }}
                                </a>
                            </div>
                            <div class="text-sm text-gray-700">{{ $comment->body }}</div>
                        </div>
                    @endforeach
                    {{ $comments->links() }}
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

僅かなコードを追加するだけでページネーションが完成しました．

2ページ目を表示します．

最後のページに移動しました．（この時，さらに次のページへは進めないことも確認してください．）

レスポンシブ Web デザインなので，スマートフォンなどではメニューだけでなくページネーションのボタンデザインも変化します．

目次に戻る

---