ITを学ぶなら
｢テックプロジン｣

Developer

Laravelで簡単な掲示板を作成の巻　第４話　魁！小野の塾
2022.11.02
Lv2

Laravelで簡単な掲示板を作成の巻　第４話　魁！小野の塾

ono

Laravelで簡単な掲示板を作成

魁！小野の塾　PHPで簡単なプログラムを作ってみようの巻　第１話 では、簡単な掲示板をPHPで作成しました。

今回は、同じような機能をLaravelで構築していきます。
機能的には、登録処理、削除処理、エラーチェックなどを実装していきます。

前回のソースは、200行程度の１ファイルだったのですが、今回はどのように書き方が変わるのか、見ていければ良いかと思います。
また、フレームワークを利用する機会は増えましたので、しっかり開発手順を覚えて頂きたいです。

Bootstrapを利用したサンプルを作成していますが、Laravelは Tailwind をCSSのフレームワークとして押しています。
Tailwindはコンポーネント開発を前提としたCSSフレームワークで、CSSを知っている人には使いやすいですが、Bootstrapを長年利用している人には、少し難易度が高いと思います。

対象のスキルレベル

構築環境

  • Windows10
  • XAMPP 8.1.2(PHP 8.1.2, MariaDB 10.4.22)
  • Laravel v9.33.0

リスト表示処理実装

リスト表示は、初期表示の/bbs のURLで実行されます。
Controllerでは、index 関数でリストを取得します。

app/Http/Controllers/BbsController.php

index 関数に、掲示板のリストを取得する部分を追加します。

・・省略・・
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('bbs', ['bbses' => Bbs::all()]);
    }
・・省略・・

return で返却する部分の、view 関数の指定で、第２引数に、連想配列を入れていきます。
Bladeでは、キーに指定している文字列が変数として利用可能です。

Bbs はモデルですが、Eloquentに all 関数が用意されており、全件を取得します。

ページング処理 (Laravel公式)

全件表示ではなく、１ページ２０行、前ページや次ページなどのページング処理を行うには、結構手間がかかります。
Laravelでは、ページング処理（ペジネーション）が簡単に出来る仕掛けを用意しています。

ペジネーション

resources/views/bbs.blade.php

Blade側では、Controllerで指定したキーである、$bbses を利用して、ループ処理で全件出力します。

・・省略・・
        </form>
        <hr>
        @foreach($bbses as $b)
        <div class="card">
            <div class="card-header">
                <div class="row">
                    <div class="col-sm-6">
                        <strong>{{ $b->title }}</strong>
                    </div>
                    <div class="col-sm-6 text-right">
                        <small>{{ $b->update_at }}</small>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="float-end">
                    <button type="submit" class="btn btn-outline-danger btn-sm">
                        <i class="far fa-trash-alt"></i> 削除
                    </button>
                </div>
                <div class="card-text">
                    <p class="white-space" style="white-space: break-spaces;">{{ $b->contents }}</p>
                </div>
            </div>
        </div>
        <div class="mt-3"></div>
        @endforeach
        <div class="mt-5"></div>
    </main>
・・省略・・

@foreach にて、Contollerで指定したキー bbses を利用してループしています。
今回は、リストがない場合に何も表示しないようにしています。

リストの中身は、一行ごとに $b 変数に代入されますので、あとはアロー演算子（->) の後に項目名を指定します。
表示する際は、XSS対応を意識して、{{ $var }} の形で表示させます。

内容部部は改行を含みますので、<pre>を利用するか、styleに white-space: break-spaces; を指定しましょう。
※Bootstrapには、break-spaces を指定するものが無いようです。

削除処理実装

削除処理を実行していきます。–resource オプションを指定時は、URL /bbs/{id}、HTTP METHOD DELETE で送信された場合に、
Controllerの destroy 関数が実行されます。

app/Http/Controllers/BbsController.php

destroy 関数の実装を行います。

・・省略・・
    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Models\Bbs  $bbs
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        Bbs::destroy($id);
        return redirect('/bbs');
    }
}

destroy 関数の引数ですが、Controllerを作成する際に自動生成される、destroy 関数の引数は、$bbs となっています。
URL の引数に id が入っている為、Bbsのモデルが取れると思いきや、とれませんでした。残念。

ですので、$id に変更しています。これは URL の引数になるので、値が入ります。

Eloquentに、主キー指定でモデルを削除する destroy 関数が用意されています。
引数の $id を指定していモデルの削除を実行します。

indexへリダイレクトすると、リストの再取得が行われて、削除完了になります。

削除後のメッセージ表示 (Laravel公式)

登録後や削除後はページをリダイレクトします。リダイレクトする場合は、パラメータが消えてしまいます。
その場合に、メッセージを表示した場合は、セッションを利用するのですが、Laravelには、セッションに一時的にメッセージを保存する仕掛けが用意されています。

データの一時保存

resources/views/bbs.blade.php

Blade側では、HTTP METHOD DELETE で送信します。あまり聞き覚えのないメソッドだと思います。
書き方がありますので、しっかりと覚えて下さい。

・・省略・・
            <div class="card-body">
                <div class="float-end">
                    <form method="post" action="{{ route('bbs.destroy', $b->id) }}">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-outline-danger btn-sm">
                            <i class="far fa-trash-alt"></i> 削除
                        </button>
                    </form>
                </div>
                <div class="card-text">
                    <p class="white-space" style="white-space: break-spaces;">{{ $b->contents }}</p>
                </div>
            </div>
・・省略・・

formタグのmethod属性には、post を指定しています。
action属性には、{{ route(‘bbs.destroy’, $b->id) }} を指定していますが、route 関数では、routes/web.php で指定した、Route::resource(‘bbs’, BbsController::class); のキー部分（bbs)に関数名を指定すると、URLが生成されます。
その際、destoryのURLには、{id} が必用になるため、引数に $b->id を指定しています。

@csrf は、登録時と同様にクロスサイト・リクエスト・フォージェリ対応です。

@method(‘DELETE’) をつけることで、HTTP METHOD を DELETE に指定して送信することができます。ちなみに、PUT や PATCH も同様に行います。
ちなみに、HTMLではのformタグでは、HTTP METHODの指定は、POST及びGETのみをサポートしています。なので、PUT、PATCH、DELETEなどは送信することが出来ません。

これで一通りの実装が終了しましたので、ブラウザにて確認してください。
http://localhost/bbs/public/bbs

画面がでて、未入力時にエラーが出たり、入力時に登録できたり、削除出来れば完成です。
動かない場合は、もう一度最初から読み直してください。

次回は、Laravelでの簡単な開発のまとめをお届けします。

魁！小野の塾　連載目次リンク

【PHP問題演習】if文 プログラム作成問題
Laravelで簡単な掲示板を作成の巻　第５話　魁！小野の塾
一覧へ戻る