フォーム on ララジャパン

入力フォームで@error

Sun, 22 Nov 2020 11:03:46 +0900

今回は、またしても新規のLaravelのバージョン対しての私のキャッチアップの話です。もちろん、存在は知っていたのですが、最近まで使用する機会がありませんでした。ブレードで使われる@errorの話なのですが、調べたら登場したのはなんとLaravelバージョン5.8、現在のバージョンが8.xなので遠い昔のように思えます。しかし、5.8がリリースされたのはつい去年のことです。Laravelのバージョン形態が変わってから、どんどん更新が早まっていくように感じられます。

@if vs @error

まず、バリデーションエラー表示において、どう@ifから@errorへ進化したかを比較してみます。

@ifを使用すると、

<label for="title">投稿のタイトル</label>

<input id="title" type="text" class="@if ($errors->has('title') is-invalid @endif">

@if ($errors->has('title')
    <div class="alert alert-danger">{{ $errors->first('title') }}</div>
@endif

これが、@errorを使用すると、

<label for="title">投稿のタイトル</label>

<input id="title" type="text" class="@error('title') is-invalid @enderror">

@error('title')
    <div class="alert alert-danger">{{ $message }}</div>
@enderror

両者とも意味は同じですが、@errorの方がすっきりして意味がわかりやすいですね。

配列の入力があるフォームで@error

さて、先の例と違って、以下のような配列フォームではどう@errorを使うことができるでしょう？

まず、エラー表示のもととなるコントローラのバリデーションは、

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class FormController extends Controller
{
    public function create()
    {
    	return view('form.create');
    }

    public function store(Request $request)
    {
    	$rules = [
            'name.*'  => 'nullable',
            'price.*' => 'nullable|required_with:name.*|integer|gt:0',
    	];

        $messages = [
            'price.*.required_with' => '入力してください',
            'price.*.integer'       => '整数で入力してください',
            'price.*.gt'            => '０超の整数で入力してください',
        ];

    	$validated = $request->validate($rules, $messages);

        // DBに保存...
   }
...

配列だから、name.のように、項目名にが使用されていることに注意してください。 nullableは、空(null)の入力でもOKという意味です。

使用されるブレードは、

@extends('layouts.app')

@section('content')
<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-8">
      <div class="card">
        <div class="card-header">出費</div>

        <div class="card-body">
          <form method="POST" action="{{ route('form.store') }}">
            @csrf

            <div class="table-responsive">
              <table class="table table-bordered table-hover table-sm">
              <thead>
                <tr>
                <th class="">アイテム名</th>
                <th class="">金額</th>
                </tr>
              </thead>
              <tbody>
                @for($i = 0; $i < 5; $i++)
                  <tr>
                    <td>
                      <input type="text" class="form-control @error('name.'.$i) is-invalid @enderror" name="name[]" value="{{ old('name.'.$i) }}">
                      @error('name.'.$i)
                        <span class="invalid-feedback" role="alert">
                          <strong>{{ $message }}</strong>
                        </span>
                      @enderror
                    </td>
                    <td>
                      <input type="text" class="form-control @error('price.'.$i) is-invalid @enderror" name="price[]" value="{{ old('price.'.$i) }}">
                      @error('price.'.$i)
                        <span class="invalid-feedback" role="alert">
                          <strong>{{ $message }}</strong>
                        </span>
                      @enderror
                    </td>
                  </tr>
                @endfor
              </tbody>
              </table>
            </div>

            <div class="row justify-content-center">
              <button type="submit" class="btn btn-primary">
                  保存
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@error(‘price.’.$i)と、price1でなくprice.1となっていることに注意してください。Laravelでは、price.1は指定の配列値で、price[1]と同じことです。同様に、old()でもold(‘price.’.$i)とprice.1となっています。

フォームに複数の投稿ボタン

Sun, 15 Nov 2020 03:04:41 +0900

１つのフォームに複数の投稿ボタンがあるのは稀なことではありません。例えば、「保存」と「キャンセル」ボタンとか、ウィザードなら確認画面において「入力に戻る」と「確定」ボタンとか、結構２つのボタンが存在することあります。さらに、編集画面では「保存」、「削除」、「キャンセル」と３つのボタンのケースも。今回はそれらの対応に関しての話です。

「戻る」ボタン（投稿ボタンではない）

例えば、会員登録において、入力画面、確認画面、完了画面の３つの画面からなるウィザードであるとき、真ん中の確認画面では、最初の入力画面へ「戻る」ボタンと、次の完了画面に行く「確定」ボタンが必要です。

「戻る」ボタンの対応で、一番簡単なのは以下のようなjavascriptでの対応です。

<button onclick="window.history.back()">入力に戻る</button>

onclickの部分は、以下でも同じことです。

<button onclick="window.history.go(-1)">Go Back</button>
<button onclick="history.back()">Go Back</button>

しかし、このボタンはフォームの中にあっても、フォームに投稿（POST）するわけではないので投稿ボタンとは言えないですね。

リダイレクトのボタン（これも投稿ボタンではない）

例えば、以下のように「保存」と「キャンセル」ボタンがあるとき、「キャンセル」ボタンではリダイレクトを使用できます。

これもjavascriptを使用するなら、

<button onclick="location.href='{{ route('home') }}'" type="button">キャンセル</button>

Bootstrapを利用するなら、cssでリンクをボタンにもできます。

<a class="btn" href="{{ route('home') }}">キャンセル</a>

これもフォームの投稿ボタンとは言えないですね。

「保存して新規」のボタン（これは投稿ボタン）

このボタンは、例えば会員において複数の届け先を連続して入力してもらう、とかでの使用ケースあります。つまり、１つの届け先を登録してもらうなら「保存」ボタン１つでいいところ、複数の届け先を連続して登録したいときに、「保存」と「保存して新規」の２つのボタンを装着します。

「保存して新規」のボタンを押したら現在の入力を保存してから、空の新規の画面を表示します。

この場合は、今までのケースとは違って、「保存」あるいは「保存して新規」のボタンのクリックは、両方とも現在入力されたデータの保存のためにPOSTの実行、つまりフォームの投稿が必要となります。それゆえに、コントローラで投稿を受けるメソッドではどちらのボタンがクリックされたかの区別が必要となります。

まずは、ブレードではこんな感じです。

...
<form method="POST" action="{{ route('register') }}">
	@csrf

	<div class="form-group row">
		<label for="name" class="col-md-4 col-form-label text-md-right">名前</label>

		<div class="col-md-6">
			{{ $name }}
		</div>
	</div>

...

	<div class="form-group row mb-0">
		<div class="col-md-6 offset-md-4">
			<input type="submit" class="btn btn-primary" name="submit" value="保存">
			<input type="submit" class="btn btn-primary" name="submit_new" value="保存して新規">
		</div>
	</div>
</form>

２つのボタンはともに投稿ボタンです。どちらかがクリックされたかをコントローラで区別するには、

...
class RegisterController extends Controller
{
    public function store(Request $request)
    {
　　　　 // 新規の届け先のレコードを保存する処理を行う

　　　　 // 新規画面に戻る
        if ($request->has('submit_new')) {
            return redirect()->route('register');
        }

        // ホームに戻る
　　　　return redirect()->route('home');
}

...

というように、ボタンのnameがリクエストに入ってくるので、それで区別できます。

これで解決と思いきや、巷では、のタグでなく

Select2 セレクト複数選択

Sat, 19 Mar 2016 03:42:52 +0900

今回は人気のドロップダウンスクリプト、Select2を紹介します。

通常のドロップダウンリストは、

通常のドロップダウン

<div class="form-group{{ $errors->has('category') ? ' has-error' : '' }}">
    <label class="col-md-4 control-label">分類</label>

    <div class="col-md-6">
        {!! Form::select('category', ['犬', '猫', '猿'], null, ['class' => 'form-control']) !!}
    </div>
</div>

とテンプレートで指定すると、

と表示。

これに、

複数選択

<div class="form-group{{ $errors->has('category') ? ' has-error' : '' }}">
    <label class="col-md-4 control-label">分類</label>

    <div class="col-md-6">
        {!! Form::select('category[]', ['犬', '猫', '猿'], null, ['class' => 'form-control', 'multiple' => 'multiple']) !!}
    </div>
</div>

と‘multiple’ => ‘multiple’を追加すると、

と複数選択に変わります。

しかし、この複数選択にSelect2を使用すれば、

のように、ドロップダウンから複数選択して、最初の行に選択した値を表示してくれます。また、そこでXをクリックすることで削除もできます。

必要な設定は、

まず、

https://github.com/select2/select2/archive/master.zip

よりダウンロードして解凍してから、レイアウトのテンプレートを以下のように編集します。

Select2の設定

...
<head>
...
<link href="{{ url('assets/css/select2/select2.min.css') }}" rel="stylesheet" type="text/css">
...
</head>
<body>
...

<script src="{{ url('assets/js/select2/select2.min.js') }}"></script>
<script src="{{ url('assets/js/select2/ja.js') }}"></script>

<script type="text/javascript">
      $(document).ready(function() {
          $(".js-multiple").select2({ width: 'resolve' });
      });
</script>
...

そして、画面のテンプレートを、

Select2を使用した複数選択

<div class="form-group{{ $errors->has('category') ? ' has-error' : '' }}">
    <label class="col-md-4 control-label">分類</label>

    <div class="col-md-6">
        {!! Form::select('category[]', ['犬', '猫', '猿'], null, ['class' => 'form-control js-multiple', 'multiple' => 'multiple']) !!}
    </div>
</div>

と編集します。

Select２には他にもいろいろな機能があります。

https://select2.github.io/examples.html

会員編集フォーム - Laravel Collective

Sat, 12 Mar 2016 06:47:48 +0900

今回は、前回作成した会員編集フォームを、Laravel CollectiveのForm & HTMLを使用して書き換えてみます。

このForm & HTMLは、Laravelのバージョン4.2には含まれていました。その後、Lumenの登場によりLaravelから分けて、Laravel Collectiveからの配布となりました。Laravel Collectiveではその他にも、Annotation, Remote(SSH)など有用なパッケージが含まれています。

まず、Form & HTMLのインストールから。

composer.jsonを編集します。

composer.json

...
   "require": {
        "php": ">=5.5.9",
        "laravel/framework": "5.2.*",
        "barryvdh/laravel-debugbar": "^2.1",
        "laravelcollective/html": "5.2.*"
    },
...

その後以下をコマンドで実行。

$ composer update

次は、config/app.phpを編集します。

 'providers' => [
 ...
    Collective\Html\HtmlServiceProvider::class,
 ...
  ],
 
 'aliases' => [
...
      'Form' => Collective\Html\FormFacade::class,
      'Html' => Collective\Html\HtmlFacade::class,
...
  ],

これでインストール完了です。

前回のテンプレートは、以下のように変わります。ハイライトの部分が変更した部分です。

profile.blade.php

@extends('user.layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Profile</div>
                <div class="panel-body">
                {!! Form::open(['url' => url('/user/profile'), 'class' => 'form-horizontal', 'role' => 'form']) !!}

                        <div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
                            <label class="col-md-4 control-label">名前</label>

                            <div class="col-md-6">
                            {!! Form::text('name', $user->name, ['class' => 'form-control']) !!}
                                @if ($errors->has('name'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('name') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                            <label class="col-md-4 control-label">Eメール</label>

                            <div class="col-md-6">
                                {!! Form::email('email', $user->email, ['class' => 'form-control']) !!}

                                @if ($errors->has('email'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('email') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-4">
                                {!! Form::submit('保存', ['class' => 'btn btn-primary']) !!}
                            </div>
                        </div>
                {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

デザイナーが編集できるテンプレートというより、どちらかというと開発者向け？と思われるかもしれません。しかし、例えば、前回で追加したクロスサイトリクエストフォージェリ対策の{!! csrf_field() !!}は自動的に生成されるし、タイプする量は減りますね。

また、以下のようにドロップダウンのデフォルト選択ではとても便利です。

前回のフォームでは、以下のように選択値のそれぞれでチェックする必要ありますが、

            <select name="category">
                <option value="">選択してください</option>
                <option value="1" {{ (old("category") == '1') ? "selected":"" }}>犬</option>
                <option value="2" {{ (old("category") == '2') ? "selected":"" }}>猫</option>
                <option value="3" {{ (old("category") == '3') ? "selected":"" }}>猿</option>
            </select>

これをFormで書き換えると、一行で終わってしまいます。

{!! Form::select('category', ['1' => '犬', '2' => '猫', '3' => '猿'], old('category'), ['placeholder' => '選択してください']) !!}

会員編集フォーム

Sat, 05 Mar 2016 07:36:54 +0900

ウェブのプログラミングでなんといっても難しいのはフォーム画面のプログラムです。テキスト入力、ドロップダウン、ファイルのアップロード機能、さらにjqueryやangularなどのフロントエンドのjavascriptも入れば、無限の可能性があります。

以前紹介したLaravelの付録の会員認証サンプルの会員登録画面は、php artisan make:authコマンドで自動作成されますが、ログイン後に会員がEメールアドレスや名前を編集する画面は作成されません。

今回はこの編集画面を作成してみます。

まず、新規のコントローラ作成します。

php artisan make:controller User/UserController

を実行して、それを以下のように編集し、

UserController.php

namespace App\Http\Controllers\User;

use Illuminate\Http\Request;

use App\Http\Requests;
use App\Http\Controllers\Controller;
use App\User;

use Auth;
use Validator;

class UserController extends Controller
{
    protected $user;

    public function __construct()
    {
        $this->middleware('auth:user'); // 認証

        $this->user = Auth::guard('user')->user();
    }

    public function getProfile()
    {
        return view('user/profile')->with(['user' => $this->user]);
    }

    public function postProfile(Request $request)
    {
        $validator = Validator::make($request->all(), [
            'name'  => 'required|max:255',
            'email' => 'required|email|max:255|unique:users,email,'.$this->user->id
        ]);

　　　　//　エラーチェック
        if ($validator->fails())
        {
            return back()->withInput()->withErrors($validator);
        }

　　　　// データを更新
        $this->user->update([
            'name'  => $request->input('name'),
            'email' => $request->input('email')
        ]);

        return redirect('user/home');
    }
}

Validationでは、emailのチェックは、$this->user->idを除くusersのレコードを対象に他に同じEメールが使われていないかチェックします。

次に、以下のようなテンプレートを作成します。

profile.blade.php

@extends('user.layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Profile</div>
                <div class="panel-body">
                    <form class="form-horizontal" role="form" method="POST" action="{{ url('/user/profile') }}">
                        {!! csrf_field() !!}

                        <div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
                            <label class="col-md-4 control-label">名前</label>

                            <div class="col-md-6">
                                <input type="text" class="form-control" name="name" value="{{ old('name', $user->name) }}">

                                @if ($errors->has('name'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('name') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                            <label class="col-md-4 control-label">Eメール</label>

                            <div class="col-md-6">
                                <input type="email" class="form-control" name="email" value="{{ old('email', $user->email) }}">

                                @if ($errors->has('email'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('email') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-4">
                                <button type="submit" class="btn btn-primary">
                                    保存
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

ここ、old()のLaravelの関数が使用されていますが、すでに存在する値を編集するので、デフォルトとしてDBからの値が入っていることに注意してください。

 <input type="text" class="form-control" name="name" value="{{ old('name', $user->name) }}">

コントローラでは、validationエラーが発生して、現在の画面に戻る必要があります。そのときは、withInput()がセッションに入力の値を保存して、back()で現在の画面にリダイレクトします。リダイレクト後には、old()は、デフォルトでなくセッションに保存された入力された値を表示します。

最後に、routes.phpを以下のように編集します。

routes.php

Route::group(['prefix' => 'user', 'middleware' => 'web'], function () {
...
    Route::get('profile', 'User\UserController@getProfile');
    Route::post('profile', 'User\UserController@postProfile');
});

以下のように、認証のミドルウェアをコントローラから移してもOKです。

routes.php

Route::group(['prefix' => 'user', 'middleware' => 'web'], function () {
...
   Route::group(['middleware' => 'auth:user' ], function () {
        Route::get('home', 'User\HomeController@index');
        Route::get('profile', 'User\UserController@getProfile');
        Route::post('profile', 'User\UserController@postProfile');
    });
});

入力画面のユニットテスト

Mon, 21 Sep 2015 03:18:35 +0900

ユニットテスト（PHPの場合は、phpunit）を使い始めて、２，３年。その重要さは理解しているものの、つい最近まで、コードの大変さによりなかなか多用はしていませんでした。

データベース絡みや入力画面絡みのテスト、書くのはやっかいです。しかし、ウェブのアプリの開発には、データベースや入力画面があって当然。ここのテストを自動化をせずにいったいどこでする？とも思う。

しかし、どうしてやっかいなのでしょう、これら？

例えば、前回の会員登録の件では、テストとして考えられるのは、

まずは、エラーを出して確認するテストたち：

必須の項目に値がないときにエラーとなるか。
EメールにEメールでないものを入力したときにエラーとなるか。
すでに登録した会員のEメールを入れたときにエラーとなるか（重複チェック）。

そして、エラーがなく、会員登録成功したときの確認のテストも必要です。

前者のエラーを出して確認するテストは、コントローラーでなくモデルに入れてテストが可能かもしれません。ララベルのバリデーションはすでに一貫しているし、カスタマイズのバリデーションも同様にテスト可能です。

しかし、それらユニットテストは個々のバリデーションをテストするだけで、それら集合した入力画面に対してのファンクショナルテストやアクセプタンステストは難しいです。あたかもユーザーが入力するようなテストです。

さらに、後者のエラーが出ない成功の確認のテストは、実際にDBにレコードが作成されてしまいます。つまり１回成功テストすると、次回は重複でエラーとなり成功のテストができなくなります。もちろん、毎回レコードを削除するという手段もありますが（これはDBテストとして将来に紹介します）、違うDBを用意するとかお膳立てがかなり面倒です。

もちろん、ここで、ララベルがそのフレームワークを活かしたユニットテストの登場です（注意：ララベル5.1での前提です）。

まずは、Eメールアドレスの重複による失敗のテストです。

class SignupTest extends TestCase
{
    public function testSignupFail()
    {
        $this->visit('/signup')
            ->type('dup@gmail.com', 'email')
            ->type('testtest', 'password')
            ->type('testtest', 'password_confirmation')
            ->type('山田', 'last_name')
            ->type('太郎', 'first_name')
            ->press('保存')
            ->dontSee('会員登録完了');
    }
}

このテストは、ユーザーが以下のような画面を経験したと同じ状況をテストします。すでにDBにdup@gmail.comが存在していると仮定です。

16行目の “dontSee(‘会員登録完了’);” では、エラーになるために成功時の「会員登録完了」の文字が画面には見えないよ、つまりdon’t seeということです。

今度は、成功時のテストですが、

use IlluminateFoundationTestingWithoutMiddleware;
use IlluminateFoundationTestingDatabaseMigrations;
use IlluminateFoundationTestingDatabaseTransactions;

class SignupTest extends TestCase
{
    use DatabaseTransactions;

    public function testSignupSuccess()
    {
        $this->visit('/signup')
            ->type('success@gmail.com', 'email')
            ->type('testtest', 'password')
            ->type('testtest', 'password_confirmation')
            ->type('山田', 'last_name')
            ->type('太郎', 'first_name')
            ->press('保存')
            ->see('会員登録完了');
    }
}

先の失敗の例と違って、今度はdon’t seeでなくsee(‘会員登録完了’)となっています。

しかし会員登録完了なのにDBのレコードは作成されません。そう、７行目のuse DatabaseTransactionsの宣言により、レコードの作成を試みるもののDBのトランザクション機能を使用してわざと変更をロールバックさせています。これにより作成あるいは変更されたデータを手動で戻さずに、何回でもテストの実行が可能となるわけです。もちろん、トランザクション機能があるDB、mysqlならinnodbの使用でないとできないことです。

先の２つテストを合わせて、実行すると、「OK」という結果です。

$ phpunit tests/SignupTest
PHPUnit 4.8.2 by Sebastian Bergmann and contributors.

..

Time: 313 ms, Memory: 27.25Mb

OK (2 tests, 7 assertions)