会員編集フォーム – Laravel Collective

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

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

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

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,
...
  ],

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

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

@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' => '選択してください']) !!}