[0005]Formファザードを利用してViewを作成

■インストール

この例では、Lalavelフレームワークのバージョンは5.5のため、Formファザードを利用するにはComposerでコンポーネントを追加する必要があります。

インストールするにはComposerが実行できる環境で接続し、composerコマンドを実行します。Composerを実行できる場所はご自身の環境に合わせて変更してください。composerの実行コマンドもご自身の環境によって違うと思います。この例の場合は、php composer.pharで繋いでおり、プロジェクト名は[sample]です。

コマンドプロンプト

              
#プロジェクトのTOPにいるか確認。違う場合はcdコマンドで移動
% pwd
/home/failibere/sample
#Composerが実行権限はプロジェクトの上の階層のため、../をつけて、プロジェクトTOPで実行
% php ../composer.phar require "laravelcollective/html":"^5.5.0"
#環境によってはphpなしの.pharなしでプロジェクトTOPで実行　※環境によります
% composer require "laravelcollective/html":"^5.5.0"
#Lalavel5.7の場合はlaravelcollective/htmlも5.7を指定
% composer require "laravelcollective/html":"^5.7.0"

インストールが実行され、Formファザードが利用できるようになります。Lalavel5.5の場合はconfig/app.phpの手動変更は要りません。インストール完了と共に使えるようになります。

■Formファザード利用

Formファザード利用前のViewです。View名は[index]です。

index.blade.php

              
@extends('layouts.user')

@section('title')
Failibere
@endsection

@section('h2')
会員登録
@endsection

@section('h2_en')
registration
@endsection


@section('content')
		<form action="./conf.html" method="get">
            <div class="formArea01">
              <p class="topText">会員登録は下記フォームからお願いいたします<br>
              必須の項目は必ずご入力のうえ、「登録内容を確認」ボタンを押してください。</p>

                <table class="form01">
                  <tbody>
                    <tr>
                      <th>担当者氏名<span class="required">必須</span></th>
                      <td>
                        <input type="text" name="name" class="medium">
                      </td>
                    </tr>
                    <tr>
                      <th>電話番号<span class="required">必須</span></th>
                      <td>
                        <input type="tel" name="tel" placeholder="012-345-6789" class="medium">
                      </td>
                    </tr>
                  </tbody>
                </table>

                <p class="btn01">
                  <button type="submit" name="searchSubmit" value="conf">登録内容を確認</button>
                </p>
              </div>
            </form>
@endsection

@section('after_script')
<script src="/jquery.min.js"></script>
@endsection

Formファザード利用後のViewです。View名は[index]です。

index.blade.php

              
@extends('layouts.user')

@section('title')
Failibere
@endsection

@section('h2')
会員登録
@endsection

@section('h2_en')
registration
@endsection


@section('content')
	{!! Form::open(['route'=>['user.tenant.confirm'],'method'=>'POST','id'=>'form','autocomplete'=>'off']) !!}
            <div class="formArea01">
              <p class="topText">会員登録は下記フォームからお願いいたします<br>
              必須の項目は必ずご入力のうえ、「登録内容を確認」ボタンを押してください。</p>

                <table class="form01">
                  <tbody>
                    <tr>
                      <th>担当者氏名<span class="required">必須</span></th>
                      <td>
                        {!! Form::text('name',null, ['class'=>'medium','id' => 'name','placeholder'=>'例）山田 太郎']) !!}
                        <p class="error displayNon" id="err_name"></p>
                      </td>
                    </tr>
                    <tr>
                      <th>電話番号<span class="required">必須</span></th>
                      <td>
                        {!! Form::text('tel',null, ['class'=>'medium','id' => 'tel','placeholder'=>'例）012-345-6789']) !!}
                        <p class="error displayNon" id="err_tel"></p>
                      </td>
                    </tr>
                  </tbody>
                </table>

                <p class="btn01">
                  {!! Form::button("登録内容を確認", ['value'=>'conf','id'=>'btn-submit']) !!}
                </p>
              </div>
    {!! Form::close() !!}
@endsection

@section('after_script')
<script src="/jquery.min.js"></script>
@endsection

@section('script')
$("#btn-submit").click(function(){
  //2重送信禁止
  $("#btn-submit").prop("disabled", true);
  //エラーCHECK後、エラー以外でSubmit実行
  $('#form').submit();
});
@endsection

Formタグ、inputタグ、buttonタグがそれぞれFomrファザードにしています。

Formタグ{!! Form::open(['route'=>['user.tenant.confirm'],'method'=>'POST','id'=>'form','autocomplete'=>'off']) !!}

Formタグ閉じる{!! Form::close() !!}

inputタグ{!! Form::text('name',null, ['class'=>'medium','id' => 'name','placeholder'=>'例）山田 太郎']) !!}

buttonタグ{!! Form::button("登録内容を確認", ['value'=>'conf','id'=>'btn-submit']) !!}

Formファザードを利用してViewが作成できました！