前回、HTMLとLaravelのフォームリクエストを使ってバリデーションをかけたフォームを作成しました。
Bootstrap4 フォーム(HTML×Laravel バリデーション)
上記のエントリーでは確認画面の作成までは紹介していなかったので、今回は確認画面の作成についてエントリーします。
ソースコード
<!-- Page Content -->
<div class="container mt-5 p-lg-5">
<section>
<h1>{{ $subtitle }}</h1>
</section>
<section class="bg-light p-5">
<form action="{{ url('/contact') }}" method="post" class="needs-validation" novalidate>
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<table class="table">
<!--氏名-->
<tr>
<th scope="row">名字</th>
<td>{{ $request->last_name }}</td>
</tr>
<tr>
<th scope="row">名前</th>
<td>{{ $request->first_name }}</td>
</tr>
<input type="hidden" name="last_name" value="{{ $request->last_name }}" />
<input type="hidden" name="first_name" value="{{ $request->first_name }}" />
<!--/氏名-->
<!--Eメール-->
<tr>
<th scope="row">Eメール</th>
<td>{{ $request->mail }}</td>
</tr>
<input type="hidden" name="last_name" value="{{ $request->mail }}" />
<!--/Eメール-->
<!--パスワード-->
<tr>
<th scope="row">Eメール</th>
<td>{{ $request->password }}</td>
</tr>
<input type="hidden" name="last_name" value="{{ $request->password }}" />
<!--/パスワード-->
<!--住所-->
<tr>
<th scope="row">郵便番号(7桁)</th>
<td>{{ $request->zip01 }}</td>
</tr>
<tr>
<th scope="row">都道府県</th>
<td>{{ $request->pref01 }}</td>
</tr>
<tr>
<th scope="row">住所</th>
<td>{{ $request->addr01 }}</td>
</tr>
<input type="hidden" name="last_name" value="{{ $request->zip01 }}" />
<input type="hidden" name="last_name" value="{{ $request->pref01 }}" />
<input type="hidden" name="last_name" value="{{ $request->addr01 }}" />
<!--/住所-->
<!--性別-->
<tr>
<th scope="row">性別</th>
<td>{{ $request->gender }}</td>
</tr>
<input type="hidden" name="last_name" value="{{ $request->gender }}" />
<!--/性別-->
<!--スキル-->
<?php $skill = implode("、",$request->skill); // チェックボックスからの配列を整形 ?>
<tr>
<th scope="row">スキル</th>
<td>{{ $skill }}</td>
</tr>
<input type="hidden" name="skill" value="{{ $skill }}" />
<!--/スキル-->
<!---備考欄-->
<tr>
<th scope="row">備考欄</th>
<td>{{ $request->remarks }}</td>
</tr>
<input type="hidden" name="last_name" value="{{ $request->remarks }}" />
<!--/-備考欄-->
<!--利用規約-->
<tr>
<th scope="row">利用規約</th>
<td>{{ $request->terms }}</td>
</tr>
<input type="hidden" name="last_name" value="{{ $request->terms }}" />
<!--/利用規約-->
</table>
<!--ボタンブロック-->
<div class="form-group row">
<div class="col-sm-12 text-center">
<button type="button" class="btn btn-info" onClick="history.back()">戻る</button>
<button type="submit" class="btn btn-info" disabled>送信 (※無効にしています)</button>
</div>
</div>
<!--/ボタンブロック-->
</form>
</section>
</div><!-- /container -->
ポイント解説
リクエスト処理
入力フォームから受け取った値の処理については以前エントリーしました。よければご参考ください。
今回はリクエストフォームを経由したデータをそのままビューに持っていくので、以下のような記述になります。
:
// 確認画面
public function confirm(\App\Http\Requests\ContactRequest $request)
{
// Bladeで使う変数
$hash = array(
'subtitle' => '確認画面',
'request' => $request,
);
return view('contact.confirm')->with($hash);
}
ビューでの表示は以下のように記述します。
:
<tr>
<th scope="row">名字</th>
<td>{{ $request->last_name }}</td>
</tr>
:
以下のような記述でもOKです。
:
<tr>
<th scope="row">名字</th>
<td>{{ $request['last_name'] }}</td>
</tr>
:
inputタグのhidden属性で送信
確認画面で受け取った入力フォームの値を次の処理をするためにコントローラに飛ばす必要があります。
inputタグのhidden属性で値を飛ばします。
:
<!--氏名-->
<tr>
<th scope="row">名字</th>
<td>{{ $request->last_name }}</td>
</tr>
<tr>
<th scope="row">名前</th>
<td>{{ $request->first_name }}</td>
</tr>
<input type="hidden" name="last_name" value="{{ $request->last_name }}" />
<input type="hidden" name="first_name" value="{{ $request->first_name }}" />
<!--/氏名-->
:
チェックボックスの処理
「スキル」の項目に該当するチェックボックスではname属性を配列として取り扱っています。
配列をそのまま表示するとエラーになるので、表示する前に配列の要素を結合して文字列に変換する必要があります。
<!--スキル-->
<?php $skill = implode("、",$request->skill); // チェックボックスからの配列を整形 ?>
<tr>
<th scope="row">スキル</th>
<td>{{ $skill }}</td>
</tr>
<input type="hidden" name="skill" value="{{ $skill }}" />
<!--/スキル-->
確認画面ができたら、あとはhiddenで入力されたデータを再びコントローラに投げて、メール送信やデータベースの登録を行います。
メール送信(ログに出力)
mailtrapでメール送信(ローカル環境向け)
レンタルサーバでメール送信(さくらレンタルサーバ)
以上です。
仕事で Laravel を使っています。気づいたことや新しい発見など情報を発信していきます。問い合わせはこちら。