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 でユーザ認証とマルチ認証を実現する

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

コメントの一覧表示

すでにコントローラでコメントの一覧を取得してダンプすることはできたので，ここでは一覧をビューに渡して表示する機能を実装します．具体的には resources/views ディレクトリに comments ディレクトリを作成し，その中に index.blade.php を作成することになります．

その前に，/dashboard のビューに該当する resources/views/dashboard.blade.php を確認すると，すでにビューがレイアウト化されていることが分かります． 

resources/views/dashboard.blade.php
<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Dashboard') }}
        </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">
                    {{ __("You're logged in!") }}
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

上の dashboard.blade.php をコピーして index.blade.php の雛形を作成します．なお，このファイルは resources/views に 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">
                    {{ __("コメント一覧ページです！") }}
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

コントローラを次のように書き換えて，comments フォルダの index.blade.php ビューを呼び出すようにします． 

app/Http/Controllers/CommentController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Comment;

class CommentController extends Controller
{
    public function index()
    {
        $comments = Comment::get();
        // dd($comments);
        return view('comments.index')
                ->with('comments', $comments);
    }
}

ログインした状態で /comments にアクセスすると，次のような結果になるはずです．レイアウト化されているので，コメント一覧ページの雛形から Dashboard に移動したり，ログアウトの機能なども利用できます．

laravel10-2023-auth-55.png

コントローラからビューに 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">
                    <ul>
                        @foreach ($comments as $comment)
                            <li>{{ $comment->title }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

もう一度 /comments ページを表示すると，コメントのタイトルが一覧で表示されていることがわかります．ただし，<ul> タグによる箇条書きを指定しましたが，行頭の箇条書き記号が表示されていないことにも注意してください．これは Tailwind CSS を利用しているためです．Tailwind CSS を使ったスタイリングは後のステップで行います．

laravel10-2023-auth-56.png

目次に戻る

« 戻る 次へ »