WEBエンジニアによるキンスレと技術系ブログ

今はまっているゲームと技術系の記事をメインに投稿を続けるブログ

ページ内リンク

【Laravel】requestを使用して画面で入力した内容を遷移後の画面に表示する方法

今回はLaravelでWEBページでよくある入力した内容を確認画面に表示するやり方を紹介していきます。

処理の流れ

Laravelでの入力画面の内容を確認画面に表示する処理の流れは下記のようになります。

  1. 入力画面に内容を入力
  2. 入力画面で送信ボタン(submit)を押下
  3. Controller内でrequestパラメータを取得し確認画面に送信
  4. 確認画面で送信した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」に接続

f:id:raruspeer:20190224223202p:plain

内容を入力

f:id:raruspeer:20190224223257p:plain

送信ボタンを押下し確認画面を表示

GETで送信しているので入力画面で入力した内容がURLの「?」の後に表示されています。
f:id:raruspeer:20190224223335p:plain

確認画面から入力画面に戻る機能を追加

今のままでは確認画面に遷移すると内容の修正が出来ないので「戻る」ボタンを追加します。

画面に戻るボタンを追加

戻る機能を実装する為に、確認画面に下記オブジェクトを追加します。

  • 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>

戻る機能を画面で確認

入力画面

f:id:raruspeer:20190226020701p:plain

確認画面

戻るボタンを押します。

f:id:raruspeer:20190226020721p:plain

入力画面

確認画面で表示されていた値が表示されました。
これで内容の修正が行えます。

f:id:raruspeer:20190226020735p:plain

さいごに

Laravelでの画面間の値渡しは慣れるまで操作するファイルが多いので難しいのですが、コントローラーで入力した値に対してのチェックをしたり、入力した値に紐づいたデータをDBから取得し加工したりなど色んな事ができます。

色んなサンプル画面を作成してLaravelに慣れていきましょう。