Skip to content

Latest commit

 

History

History
855 lines (670 loc) · 29.8 KB

tutorial-5.md

File metadata and controls

855 lines (670 loc) · 29.8 KB
layout title
default
フォーム情報を整理して入力値チェックも追加しよう

{{ page.title }}

FormType

  • 前章で作成した、フォーム定義の内容を、FormTypeに切り分けます。

  • 目的としては、フォームの定義が一箇所に集まっているとメンテナンスが容易になるからです。

  • EC-CUBE 3でフォームを作成する際は、通常本章の方法を用います。

本章メニュー

  • 本章では以下を行います。

    1. FormTypeファイルの作成します。

    2. バリデーションの定義方法を説明します。

    3. FormTypeをコントローラーから利用するために、サービスプロバイダへの登録方法を説明します。

    4. コントローラーメソッドにRequestを渡す方法を説明します。

    5. ビルダーからFormTypeファイルを用い、フォームオブジェクトを作成する方法を説明します。

    6. Requestとフォームオブジェクトの連携を説明します。

    7. バリデーションの判定方法を説明します。

    8. バリデーション機構の簡単な説明を行います。

    9. Twigファイルの修正します。

    10. Twigファイルでの判定方法を説明します。

    11. Twigファイルの判定による表示内容の変更方法を説明します。

FormTypeの作成

ファイルの作成

  • 以下にFormTypeが保存されています。
  1. /src/Eccube/Form/Type/Front
    • 「Type」フォルダまでは、「管理画面」「ユーザー画面」共通です
      1. 管理画面 : Admin
      2. ユーザー画面 : Front

ファイルのリネーム

  • 次にCrudType.phpを作成します。

  • ContactType.phpをコピー、リネームします。

    • CrudType.php( 中身はContactType.phpのコピー )
<script src="http://gist-it.appspot.com/https://github.com/EC-CUBE/ec-cube.github.io/blob/master/Source/tutorial_5/CrudType_before.php"></script>

CrudTypeの作成

  • 上記を以下に変更します。
<script src="http://gist-it.appspot.com/https://github.com/EC-CUBE/ec-cube.github.io/blob/master/Source/tutorial_5/CrudType_after.php"></script>
  • 上記でコントローラーに記述していた、フォーム構成を「FormType」へ転記を行いました。

入力値チェック(バリデーション)の定義

  • 上記でFormTypeを作成しましたが、ここで、フォームの各項目の入力値チェック(以後、バリデーションと呼びます)を定義していきます。

  • 作成した「CrudType」の各項目のオプション欄に追記していきます。

    • CrudType.php
<script src="http://gist-it.appspot.com/https://github.com/EC-CUBE/ec-cube.github.io/blob/master/Source/tutorial_5/CrudType_add_valodate.php"></script>

バリデーションの記述方法

  • 上記で記述した通り、バリデーションは以下構文で追加します。
<script src="http://gist-it.appspot.com/https://github.com/EC-CUBE/ec-cube.github.io/blob/master/Source/tutorial_5/CrudType_example.php"></script>

今回利用しているバリデーション

Length

Regex

バリデーションの種類

  • Symfony2のサイトで確認してください。

Validation

補足

  • 上記ソース内のフォームビルダーの最後に以下が定義されています。

->addEventSubscriber(new \Eccube\Event\FormEventSubscriber());
  • 上記はフォームの処理に対して割り込むイベントを定義していますが、慣例的なものとして、記述を削除しないでくだい。
  • 通常は利用の必要がないため、ここでの説明は割愛させていただきます。

FromTypeのサービス登録

  • FormTypeの定義が完了したら、コントローラー内「$app」で呼び出せる様に、サービスプロバイダーへの登録が必要です。

サービスプロバイダの修正

  • 以下にServiceProviderが保存されています。

    1. /src/Eccube/ServiceProvider

      • フォルダの中のEccubeServiceProvider.phpが該当ファイルです。

      • 今回はユーザー画面(フロント画面)に関する「FormType」です。そのために、ファイルを開いたら「front」を検索してください。

      • 「front」を検索すると、ユーザー画面に関する、「Type定義」がまとまっているはずですので、その最下部に以下の様に、作成した「CrudType」の定義を行いましょう。

        • EccubeServiceProvider.php
<script src="http://gist-it.appspot.com/https://github.com/EC-CUBE/ec-cube.github.io/blob/master/Source/tutorial_5/EccubeServiceProvider_add_type.php"></script>
  • 今回は必要ありませんが、引数にコンフィグ情報を渡しています。

コントローラーの修正

  • 次はコントローラーに記述していた、Form項目の設定を削除し、CrudTypeの読み込みを記述していきます。

  • まずcreateBuilderでビルダーを生成している箇所から、Form定義部を全て削除します。

  • 以下の通りになります。

    • CrudController.php
<script src="http://gist-it.appspot.com/https://github.com/EC-CUBE/ec-cube.github.io/blob/master/Source/tutorial_5/CrudController_remove_form.php"></script>

FormTypeの呼び出しとサブミット値のバリデーション

  • 次はコントローラーに「FormType」の呼び出しと、サブミットされた値に対して、入力値チェックを行います。

  • コントローラーに以下を追加します。

<script src="http://gist-it.appspot.com/https://github.com/EC-CUBE/ec-cube.github.io/blob/master/Source/tutorial_5/CrudController_call_form.php"></script>

  • 上記内容の説明を行います

    1. まずはじめに、リクエストを受け取るために「名前空間」とメソッドの引数を設定します。
    • 名前空間に「Silex(Symfony2)」のリクエストクラスの読み込み宣言を行います。
    • メソッドの引数に、タイプヒンティングを設定、Request型を指定し、リクエストオブジェクトを受け取れるようにします。
    • リクエストオブジェクトは「Silex(Symfony2)」が自動で処理を行い、クライアントからのリクエスト内容を渡してくれます。
    1. 次にフォーム生成のために、$app[form.factory]のcreateBuilderメソッドでフォームオブジェクトを生成します。
    • CrudTypeのgetNameメソッドで定義した、FormType名称crudをcreateBuilderの第一引数として渡します。
    • 第二引数には、今回は関連エンティティがないため「null」を指定します。
    • オプションは指定しません。
    1. 次にhandleRequestで取得したリクエストオブジェクトとFormTypeを関連付けます。
    • 厳密にはサブミット値とFormType値の突き合わせが行われています。

    1. 次に入力値チェックですが、以下の様に記述しているかと思います。

      if ($form->isSubmitted() && $form->isValid()) {

    • 以下入力値チェックの説明です。

    • まず「isSubmitted」でFormからサブミットされた値かどうかチェックしています。

      • セキュリティのためです

    • 次に「isValid」でFormTypeの内容に基づき、入力値チェックを行います。

      • 入力値に問題がなければ、trueを、内容に問題あればfalseが返却されます。
      • またフォームオブジェクト内で、エラーがあった項目と、それに対して設定されていたエラーメッセージも格納されているため、ビューの設定でエラーメッセージが表示されます。
      • ※ただし、バリデーションエラーが保持されるためには、エンティティが必要ですが、本章では、エンティティを保持していないため、ビューで自動でエラーが表示されるわけではありません。そのため今回は、コントローラーで判定し、判定に応じたメッセージをビューに渡しています。

Twigファイルの修正

  • 最後にTwigファイルを修正しましょう

    • crud_top.twig

    • 現状では以下表示となります。

<script src="http://gist-it.appspot.com/https://github.com/EC-CUBE/ec-cube.github.io/blob/master/Source/tutorial_5/crud_top_add_form_before.twig"></script>
  • コントローラーの修正にあわせて以下の様に追記、変更を行います。
<script src="http://gist-it.appspot.com/https://github.com/EC-CUBE/ec-cube.github.io/blob/master/Source/tutorial_5/crud_top_add_form_after.twig"></script>

  • 上記の説明を行います。

    1. Twigでのif文

      • メッセージ表示箇所で、変数の有無を判定しています。
      • if [変数] is definedがそうですが、この記述中のdefinedはPHPのissetと同義です。
      • Twigの**ロジック部は｛％％｝**で囲っています。
      • 条件により、表示されるタグが異なります。

    2. フォームの追加

      • 次にhtmlのフォームを定義します。
      • action属性以外は通常のフォーム定義と同様です。
      • action属性に記載されているのが、Twig構文でurl([ルーティング名])、指定したURLを取得できます。
        • ここで云うルーティング名とはFrontControllerProviderでルーティングの設定を行なった際に、bind()に設定した値です。

表示内容の確認

通常表示

  • 最後に確認のためにブラウザにアクセスしてみましょう。

    1. ブラウザのURLに「http://[ドメイン + インストールディレクトリ]/tutorial/crud」を入力してください。

    2. フォームビルダーで構築したフォームが表示されています。

FormTypeのレンダリング

入力値正常表示

  • 入力値が正常な場合の表示を確認します。

    1. 投稿ハンドルネームに「a」、投稿のタイトルに「a」を入力

    2. この内容で登録するをクリック

FormTypeのレンダリング

入力値エラー表示

  • 入力値にエラーがある場合の表示を確認します。

    1. 投稿ハンドルネームに「あ」、投稿のタイトルに「あ」を入力

    2. この内容で登録するをクリック

FormTypeのレンダリング

この章のまとめ

  1. コントローラーに記述された、Form定義情報をFormTypeに移設しました。
  2. FormTypeで、バリデーションを設定しました。
  3. サービスプロバイダに作成したFormTypeを登録しました。
  4. Twigにformを記述する際、「action」で「url構文」を利用しルーティング名により「URL」の取得を行いました。
  5. $app['form.factory']の「createBuilder」の第一引数にフォームタイプ名を記述し、フォーム定義を取得しました。
  6. フォーム定義をフォームオブジェクトへ変換した後に、リクエストオブジェクトに紐付けしました。
  7. コントローラーのメソッドからリクエストオブジェクトを取得しました。
  8. リクエストがサブミット値か、さらに入力値に異常がないかの判定を行いました。
  9. 取得結果で、表示文言がかわるように、Twigで「if文」を用いました。
  10. Twigの構文「defined」を利用して、変数の有無を判定しました。