今回はLaravelでWEBページでよくある入力した内容を確認画面に表示するやり方を紹介していきます。
処理の流れ
Laravelでの入力画面の内容を確認画面に表示する処理の流れは下記のようになります。
- 入力画面に内容を入力
- 入力画面で送信ボタン(submit)を押下
- Controller内でrequestパラメータを取得し確認画面に送信
- 確認画面で送信したrequestパラメータを表示
今回は下記オブジェクトを入力画面に表示します。
- お名前
- 電話番号
ルーティングの設定
入力画面と確認画面を設定します。
[ファイル名]
web.php
// 入力画面
Route::get('/sample/input', function () {
return view('input');
});
// 入力確認画面
Route::get('/sample/confirm', 'SampleController@inputConfirm');
入力画面の作成
入力フォームを表示します。
[ファイル名] input.blade.php
<form action="/sample/confirm" method="GET"> <div> <label>お名前：</label> <input name="name" type="text"> </div> <div> <label>電話番号：</label> <input name="tel" type="text"> </div> <button type="submit">送信</button> </form>
コントローラーの作成
サンプルコントローラー作成コマンド
$ php artisan make:controller SampleController
[ファイル名] SampleController.php
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; class SampleController extends Controller { public function inputConfirm(Request $request) { // お名前 $name = $request->name; // 電話番号 $tel = $request->tel; // 確認画面に表示する値を格納 $input_data = [ 'name' => $name, 'tel' => $tel ]; return view('confirm', $input_data); } }
$request->name 部分で入力画面で設定していた「nameパラメータ」の値を取得しています。
$request->tel も同様に「name="tel"」で設定した値を取得しています。
return view('confirm', $input_data); の$input_data部分では配列に格納した値を確認画面に渡す処理を意味しています。
入力確認画面の作成
入力内容を表示します。
Laravelでは「{{ 」と 「}}」で囲んだ部分は、
「<?php echo ?>」を省略した定義となっています。
$name、$tel を記入して送信された内容を表示しています。
[ファイル名] confirm.blade.php
<div> <label>お名前：</label> <span>{{$name}}</span> </div> <div> <label>電話番号：</label> <span>{{$tel}}</span> </div>
画面で確認
入力画面を表示
「http://127.0.0.1:8000/sample/input」に接続
内容を入力
送信ボタンを押下し確認画面を表示
GETで送信しているので入力画面で入力した内容がURLの「?」の後に表示されています。
確認画面から入力画面に戻る機能を追加
今のままでは確認画面に遷移すると内容の修正が出来ないので「戻る」ボタンを追加します。
画面に戻るボタンを追加
戻る機能を実装する為に、確認画面に下記オブジェクトを追加します。
- hiddenオブジェクト
入力画面の内容を保持 - 戻るボタン
formでオブジェクトを囲みその中にname属性が「back」のボタンを追加しています。
formのアクション名がregist(登録)となっていますが、今回は登録を行いません。
戻る・登録処理は同じメソッドを通りname属性がback(戻る)のボタンが押された場合、処理を中断し入力画面に戻るという実装にする為です。
また、各ボタンにはvalue属性にtrueを設定しており、押したボタンのパラメータがrequestとして送られるようになっています。
例）戻るボタンを押した場合のリクエストパラメータ
- 戻るボタン：true
- 登録ボタン：リクエストに送信されない。
[ファイル名] confirm.blade.php
<form action="/sample/regist" method="GET"> <div> <label>お名前：</label> <span>{{$name}}</span> <input name="name" value="{{$name}}" type="hidden"> </div> <div> <label>電話番号：</label> <span>{{$tel}}</span> <input name="tel" value="{{$tel}}" type="hidden"> </div> <button name="back" type="submit" value="true">戻る</button> <button name="regist" type="submit" value="true">登録</button> </form>
ルーティング
[ファイル名]
web.php
// 登録処理
Route::get('/sample/regist', 'SampleController@regist');
コントローラーの修正
戻るボタンが押された場合、入力画面にリダイレクトするようにしています。
「$request->get('back')」で戻るボタンのvalueを取得しており、Trueを設定していた為、if文の中に入るようにしています。
withInput()を付けることで入力内容をフラッシュデータに保存して入力画面に返す事ができます。
[ファイル名] SampleController.php
<?php public function regist(Request $request) { // 戻るボタンが押された場合 if ($request->get('back')) { return redirect('/sample/input')->withInput(); } // 登録処理・・・・ return; }
入力画面の修正
入力項目に「value="{{ old('XXXX') }}"」を追加しています。
withInputで送られたデータを表示する事ができます。
[ファイル名] input.blade.php
<form action="/sample/confirm" method="GET"> <div> <label>お名前：</label> <input name="name" type="text" value="{{ old('name') }}"> </div> <div> <label>電話番号：</label> <input name="tel" type="text"value="{{ old('tel') }}"> </div> <button type="submit">送信</button> </form>
戻る機能を画面で確認
入力画面
確認画面
戻るボタンを押します。
入力画面
確認画面で表示されていた値が表示されました。
これで内容の修正が行えます。
さいごに
Laravelでの画面間の値渡しは慣れるまで操作するファイルが多いので難しいのですが、コントローラーで入力した値に対してのチェックをしたり、入力した値に紐づいたデータをDBから取得し加工したりなど色んな事ができます。
色んなサンプル画面を作成してLaravelに慣れていきましょう。