Laravel5.8で掲示板を作ってみる(6）- Advent Calendar 2019に初投稿した！

今回で大体終わりになります！
前回からかなり日が空いて忘れかけていますが、Gitの履歴を見れば大丈夫なはず！

ソースを先に書いて、QiitaのAdvent Calendar 2019に技術ネタとして投稿しました。
もう去年の話ですねー。。

Qiitaの投稿はこちらです。

Laravelを一年間くらいやったので、個人的ハマりポイントと掲示板作成！ - Qiita

こんにちは。Advent Calendar初参加です！😃Advent Calendar 2019の7日目の記事になります。去年の6月からお仕事でLaravelを使えることになって、Webシステムの開発をやってました。自宅でも復習が...

前回はこちら

Laravel5.8で掲示板を作ってみる(5）

かなり日が空きましたが、前回で新規投稿するところが完成したので、今回は投稿した掲示板を表示して、レスを返すところまでやってみます！詳細表示ページ作成詳細ページ作成のために下記コントローラーを新規作成しました。indexで詳細ページの表示用の

では、前回からどんな感じで変えたのか見ていきましょう😃

example5からの変更点
終わりに

example5からの変更点

バリデーションをFormRequestに移動

バリデーションをFormRequestでやるようにしています。
元々Requestでやっていたと思いますが、なぜかコミット履歴にない。。

なぜだぁ・・・
（コミットし忘れてますね。まぁ趣味のプロジェクトだからいっか…）

BoardCreateRequest.php, ResponseCreateRequest.phpを作って
Response配下に持って行きました。

下記はBoardCreateRequestです。

class BoardCreateRequest extends FormRequest
{
    public function authorize()
    {
        return true;
    }

    /**
     * バリデーションルール
     * @return array
     */
    public function rules()
    {
        return [
            'board_title' => 'required|max:30',
            'user_name' => 'required|max:30',
            'about_text' => 'required|max:5000',
            'password' => 'required|max:30'
        ];
    }

    /**
     *  バリデーション項目名定義
     * @return array
     */
    public function attributes()
    {
        return [
            'board_title' => 'タイトル',
            'user_name' => '名前',
            'about_text' => '説明文',
            'password' => 'パスワード'
        ];
    }

    /**
     * バリデーションメッセージ
     * @return array
     */
    public function messages()
    {
        return [
            'board_title.required' => ':attributeを入力してください。',
            'board_title.max' => ':attributeは30文字以下で入力してください。',
            'user_name.required' => ':attributeを入力してください。',
            'user_name.max' => ':attributeは30文字以下で入力してください。',
            'about_text.required' => ':attributeを入力してください。',
            'about_text.max' => ':attributeは5000文字以下で入力してください。',
            'password.required' => ':attributeを入力してください。',
            'password.max' => ':attributeは30文字以下で入力してください。'
        ];
    }
}

Requestを受け取るときの型に作成したレスポンスを書きます。

すると…

アクセスされて、ここを通るときにバリデーションしてくれます。
メイン処理のコントローラーがすっきりしますね。

public function save(BoardCreateRequest $request)

同じようにResponseCreateRequestは返信のリクエストバリデーションで使っています。
ソースは割愛します！

返信フォームの作成(show_bbs.blade.php)

返信フォームをこんな感じで作成しました。

<form method="post" action="{{ route("detail.response") }}">
    @csrf
    <input type="hidden" name="board_id" value="{{ $board->id }}"/>
    <div class="card mt-3">
        <div class="card-body">
            <div class="form-inline">
                <label class="col-form-label">名前</label>
                <input type="text" name="user_name" value="{{ old('user_name') }}" class="form-control ml-2 col-5" placeholder="名前を入力..."/>
            </div>
            <div class="form-inline mt-2">
                <label class="col-form-label">内容</label>
                <textarea name="message" class="form-control ml-2 col-10" placeholder="コメントを入力...">{{ old('message') }}</textarea>
            </div>
            <div class="justify-content-center mt-2">
                <div class="row">
                    <button type="submit" class="btn btn-primary mx-auto d-block col-5">投稿</button>
                    <button type="button" class="btn btn-success mx-auto d-block col-5"
                            onclick="closeMessageBox();">閉じる
                    </button>
                </div>
            </div>
        </div>
    </div>
</form>

投稿ボタンで開閉されるように、jQueryも少し書きました。
削除ボタンを押したときの挙動も書いています。

   <script>
        window.onload = function () {
            $(".message-box").hide();
            $(".message-open").show();
        };

        function closeMessageBox() {
            $(".message-box").hide("slow");
            $(".message-open").show("slow");
        }

        function openMessageBox() {
            $(".message-open").hide("slow");
            $(".message-box").show("slow");
        }

        $(function () {
            $("#btn-delete").on("click", function () {
                if ($("#password").val() === "") {
                    $("#password").show();
                } else {
                    if(confirm("削除しますか？")) {
                        $("#delete_password").val($("#password").val());
                        $("#delete_form").submit();
                    }
                }
            });
        });
    </script>