Skip to content

tutorial-4.md

Latest commit

 

History

History
320 lines (223 loc) · 10.8 KB

tutorial-4.md

File metadata and controls

320 lines (223 loc) · 10.8 KB
layout default
title フォームを表示してみよう

{{ page.title }}

Formとフォームビルダー

  • 前章までは、ルーティング、レンダリングの簡単な例を示しました。

  • 本章では、画面入力のためにフォームを作成します。

  • EC-CUBE 3ではフォームの作成はフォームビルダーを用いて行います。

本章メニュー

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

    1. コントローラーからフォームビルダを利用します。

    2. フォームビルダーでフォーム要素を構築します。

    3. フォームビルダーの概要を説明します。

    4. フォームビルダーからフォームビューを作成し、Twigに渡す方法を説明します。

    5. Twigで受け取ったフォームビューの表示方法を説明します。

コントローラーファイルにForm定義を追加する

  • まずコントローラーにFormを定義します。

  • 以下の修正をコントローラーに行います。

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

フォームビルダーを用いた項目の追加

  • Silex(Symfony2)では前述の通り、フォームビルダーでフォーム項目を定義します。

フォーム項目追加メソッド

  • [フォームビルダー]->add([name属性], [type属性], [オプション])

引数の説明

  • addメソッドの引数の説明を行います。

    1. [name属性]

      • html上で識別される、フォームの項目名です。

    2. [type属性]

      • フォーム項目の種類です(text、checkbox、textareaなど)

    3. [オプション]は以下の内容を、適宜連想配列で設定します。

      1. 必須の設定
      • 項目の入力必須の設定
      1. デフォルト値
      • value値の初期値
      1. バリデーション(次章で説明)
      • 入力値の精査
      1. value属性の設定
      • ユーザー入力値(hiddenを除く)
      1. htmlでformに対して指定出来る属性全て
      • id、class、placeholderなど、htmlで指定出来るものは全て

エンティティとフォーム項目のマッピング

  • 上記のオプション項目に以下が設定されていると思います。

'mapped' => false,
  • 上記は後の章でてくるエンティティとフォーム項目を紐付けるかどうかを設定します。
  • エンティティを用いない場合は必ずfalseを設定してください。
  • 設定がtrueの場合、ビルダーが項目とエンティティのマッピングを行うためエラーとなります。

特殊な項目

  • 以下のフォーム項目については、通常のhtmlを作成する際と、概念が違います。

    1. セレクトボックス

    2. チェックボックス

    3. ラジオボックス

    • 上記に示したものは、選択値をフォームビルダーの設定項目によって設定します。

      • 上記の場合は、**addメソッド第二引数の[type属性]**に「choices」を指定し、連想配列を与える事で実現できます。

ビルダーの取得

  • フォームビルダーは以下で取得が出来ます。

    • **$app['form.factory']**から以下メソッドを呼び出します。

      • createBuilder([タイプ名称], [エンティティ(データーモデルオブジェクト)], [オプション])

        1. [タイプ名称] : 次章で説明する「FormType」のメソッドgetNameで定義した名前を指定します。
        • あまりおすすめしませんが、FormTypeがなくビルダーのみで生成する際は、「form」を指定してください。
        1. [エンティティ(データーモデルオブジェクト)] : 通常は内部で利用するエンティティを設定します。
        • エンティティを用いない際は、「null」を指定してください。
        1. [オプション] : フォーム生成時オプションを設定します。
        • 使用頻度も少ないため、本チュートリアルでは割愛いたします。

フォームビルダーからフォームのビューオブジェクトを取得する

  • フォームビルダーで項目の定義が完了したら、以下の順で「フォームのビューオブジェクト」生成を行います。

    1. フォームの取得

      • [フォームビルダー]->getForm();

    2. フォームのビューオブジェクト取得

      • [フォームオブジェクト]->createView()

Twigファイルでフォームビューオブジェクトの内容を表示する

  • コントローラー側の実装が完了しました。

  • 次はTwigに以下修正を加え、フォームのビューオブジェクトをhtmlとして表示出来る様にしましょう。

  • 以下の様にcrud_test.twigを修正します。

    • crud_test.twig
<script src="http://gist-it.appspot.com/https://github.com/EC-CUBE/ec-cube.github.io/blob/master/Source/tutorial_4/crud_top_add_form.twig"></script>

  • ここで重要なのは以下2行です。

    • ｛｛ form_widget(forms._token) ｝｝
    • ｛｛ form_widget(forms)｝｝

  • 上記の設定によって、フォームオブジェクトがビューに書きだされます。

    • 本当は1項目づつ表示することも可能ですが、本チュートリアルでは全項目を一度に書き出しています。
    • forms._tokenは本画面から、サーバーへアクセスした事をサーバーで判断するために、必ず記述します。
    • 上記はセキュリティのために行います。
    • サーバー側での判断はフォームオブジェクトが自動で行なってくれます。

表示内容の確認

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

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

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

フォームのレンダリング

この章のまとめ

  1. コントローラーでFormを定義しました。
  2. フォームビルダーでフォーム項目を構築しました。
  3. フォームビルダーからフォームオブジェクト、そこからビューオブジェクトを取得しました。
  4. フォームのビューオブジェクトをTwigで表示しました。