Laravel 10 入門トップページ

« 戻る 次へ »

目次

  1. プロジェクトを作成する
  2. データベースファイルを作成する
  3. Visual Studio Code を設定する
  4. .env を編集して初期設定する
  5. タイムゾーンと言語を設定する
  6. Webサーバを起動して終了する
  7. マイグレーションファイルを生成する
  8. テスト用データを設定する
  9. モデルを作成する
  10. コントローラを作成する
  11. ルートを定義する
  12. データベースからデータを取り出す
  13. トップページにリンクを設置する
  14. ビューを使ってレコードを表示する
  15. コメントを個別に表示するページを作成する
  16. コメント投稿機能を実装する
  17. 投稿内容を検証する
  18. 投稿内容を編集する
  19. 投稿コメントを削除する
  20. テストの自動化を実現する
  21. テストカバレッジを計測する
  22. 複数のLinuxコマンドを実行し，履歴からも実行する
  23. ビューをレイアウト化する
  24. Bootstrap を導入する
  25. SQLite を操作する
  26. フェイカでシーダを拡張する
  27. ページネーションを作る
  28. シーダに登録日時と更新日時を追加する
  29. 一覧表示を更新日時の降順にする
  30. フラッシュメッセージを表示する
  31. スタイルシートでデザインを整える

Laravel によるコメント掲示板の開発

コメント投稿機能を実装する

データベースに登録されたコメントの一覧表示と個別表示ができるようになったので，今度は新規にコメントを投稿する機能を実装しよう．

まずは，投稿ボタンが押下された時のルートを routes/web.php に定義します．フォームからデータを送信してデータベースに登録するような場合には，HTTP（または HTTPS）の POST メソッドを利用します．次のように /comments に POST でアクセスしたときに CommentsController の store 関数を呼び出すようにします． 

routes/web.php（抜粋）Route::get('/comments', [CommentsController::class, 'index']) -> name('comments.index');
Route::get('/comments/{comment_id}', [CommentsController::class, 'show']) -> name('comments.show');
Route::post('/comments', [CommentsController::class, 'store']) -> name('comments.store');

次に，コメント一覧ページ (/comments) に新規投稿フォームを設置します．なお，16行目の @csrf は，フォームにトークンを仕込むための命令です． 

resources/views/comments/index.blade.php<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>コメント一覧</title>
</head>
<body>
    <h1>コメント一覧</h1>
    <ul>
        @foreach ($comments as $comment)
            <li>
                <a href="{{ route('comments.show', ['comment_id' => $comment->id]) }}">
                    {{ $comment->title }}
                </a>
            </li>
        @endforeach
    </ul>

    <h1>コメント投稿</h1>
    <div>
        <form method="post" action="{{ route('comments.store') }}">
            @csrf
            <p>
                <label for="title">Title: </label>
                <input type="text" name="title" id="title" value="">
            </p>

            <p>
                <label for="body">Body: </label>
                <textarea name="body" id="body" rows="4" cols="50"></textarea>
            </p>
            <p>
                <input type="submit" value="投稿">
            </p>
        </form>
    </div>
</body>
</html>

一覧ページを表示すると，コメント投稿フォームを確認できました．このページの HTML ソースをブラウザで確認します．

laravel10-2023-comment-25.png

すると，29行目で，method="post" になっていることが確認できると同時に，30行目にある通りトークンが仕込まれていることも確認できます．このトークンはランダムな値が自動的に与えられるので，毎回異なるはずです．このトークンは不正な書き込みを防止するための仕組みで，トークンが含まれないアクセス，不正なトークンを持つアクセス，有効期限切れトークンを持つアクセスなどを Laravel が自動的に排除してくれます．

laravel10-2023-comment-26.png

コントローラに store 関数を定義します．とりあえずはフォームに入力されたパラメータを取り出す方法を確認します． 

app/HTTP/Controllers/CommentsController.php（抜粋）public function store(Request $request)
{
    dd($request, $request->title, $request->body);
}

実際にタイトルと本文を入力して投稿ボタンを押下します．この結果，dd() によってパラメータの内容が表示されました．$request にはさまざまな値が記録されており，$request->title や $request->body のようにすると入力内容を取得できることがわかります．

laravel10-2023-comment-27.png

それでは，投稿内容を実際にデータベースに登録します．具体的には Comment クラスのインスタンスを生成して，タイトルと本文の内容をセットし，save() によってデータベースに登録します．登録後は一覧ページにリダイレクトします．CommentsController の store 関数を次のように変更します． 

app/HTTP/Controllers/CommentsController.php（抜粋）public function store(Request $request)
{
    $comment = new Comment();          // インスタンスを生成する
    $comment->title = $request->title; // タイトルをセット
    $comment->body = $request->body;   // 本文をセット
    $comment->save();                  // データベースに登録
    return redirect('/comments');      // リダイレクト
}

実際に投稿できることを確認してください．

laravel10-2023-comment-28.png

目次に戻る

« 戻る 次へ »