2
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ECCUBE4 Symfony Twigの書き方、フォームの書き方メモ

Last updated at Posted at 2020-12-13

#はじめに
個人的なメモです

#Twigファイルを書く
こちらのQiita記事が大変参考になります。
【PHP】Twigまとめ リンク

hogehoge.twigファイル
{% extends '@admin/default_frame.twig' %}         //継承

{% set menus = ['product', 'product_master'] %}   //menus配列定義

{% block title %} タイトル {% endblock %}           //任意
{% block sub_title %} サブタイトル {% endblock %}   //任意

//CSS Bbootstrap4参照
{% block stylesheet %}
    <link rel="stylesheet" href="{{ asset('assets/css/tempusdominus-bootstrap-4.min.css', 'admin') }}">
{% endblock stylesheet %}

//Js、jQueryを任意に記述するところ
{% block javascript %}
    <script>
       //セレクトボックス選択発火
       $('#hogehoge').change(function() {     //selectが変更されたとき
          $("#hogehoge").submit();            //form submit実行
       });
    </script>
{% endblock %}

//HTMLコード記述するところ
{% block main %}

 //フォーム記述以外は、だいたい、いつものHTMLの感じ

##フォームの表示

'なまえ'というインプットテキストのフォームの表示
 //POSTフォーム
     //コントローラーでルーティングしている'admin_hogeroute'にリクエスト
    <form class='' id='' method="post" action="{{ path('admin_hogeroute') }}">
        <div class="">
            <label class="">なまえ</label>
                {{ form_widget(form.name) }}  //formはcontrollerから返すform変数  
                {{ form_errors(form.name) }}  //.nameはそのform変数の中にあるFormType.phpのフォーム部品名
        </div>
    </form>

こんなふうに表示される
image.png

##フォームにHTML属性を追加 attr の書き方
この辺りは公式ドキュにもある程度載っていた
javascript/jQueryのセレクタに必要になってくるclass名やid名は自動命名されます。
どんなid値なのかは、ブラウザ側検証ツールで見てコピペしてます
textareaとか、selectとか、HTMLオプションは、FormType.phpかTwigのどちらかで設定してます

'フォームに属性追加

    <form class='' id='' method="post" action="{{ path('admin_hogeroute') }}">
        <div class="">
            <label class="">なまえ</label>
                {{ form_widget(form.name, { 'attr': {'autocomplete': 'on' }} ) }}
               {{ form_errors(form.name) }}
        </div>
    </form>
ブラウザ側コードはこうなっている(検証)
       <div class="">
          <label class="">なまえ</label>
          <input type="text"
                 id="admin_user_name"        //勝手に命名される
                 name="admin_user[name]"     //勝手に命名される
                 autocomplete="on"           //さっきattrで追加したやつ
           />
       </div>   

##フォームタイプファイルを準備

Customize/Form/Type/Admin/HogeType.php
<?php

namespace Customize\Form\Type\Admin;

use Customize\Entity\Hoge;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;

class HogeType extends AbstractType
{
    public function __construct()
    {
    }

    /**
     * {@inheritdoc}
     */
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('name', TextType::class, [    //nameはEntity.phpの変数名(テーブルカラム)
                                                //この変数名をTwig表示で使う
                'required' => false,            //オプションは公式を参考に..
            ])
      ;
    }
                          //※use 名前空間 を忘れずに!!

公式ドキュ:フォーム https://symfony.com/doc/current/reference/forms/types/form.html

##フォームの例いくつか

Customize/Form/Type/Admin/HogeType.php
<?php

namespace Customize\Form\Type\Admin;

use Customize\Entity\Hogetype;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
use Symfony\Component\Form\Extension\Core\Type\DateType;
use Symfony\Component\Form\Extension\Core\Type\IntegerType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;

class SearchDeckType extends AbstractType
{
    public function __construct()
    {
    }

    /**
     * {@inheritdoc}
     */
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder

   //IntegerType input=numberができる

            ->add('id', IntegerType::class, [  //第一引数は保存や呼び出したいレコードカラム    
                'required' => false,            //に対応するEntityファイルの変数名 
                'empty_data' => null,
                'attr' => [
                'min' => 0,
                ]
            ])

IntegerType は input=number
image.png


   //ChoiceType  selectbox,radiobottun,checkbox,listboxができる
   //ラジオボタンの例
            ->add('releaseId', ChoiceType::class, [  //第一引数は保存や呼び出したいレコードカラム 
                'choices' => [                       //に対応するEntityファイルの変数名   
                    '公開' => false,
                    '非公開' => true
                ],
                'expanded' => true,
                'multiple' => false,
                'required' => false,
                'placeholder' => '未選択'
            ])

ChoiceType の ラジオボタン
image.png

  //DateType  input type="datetime-local"

            ->add('eventDate', DateType::class, [  //第一引数は保存や呼び出したいレコードカラム
                'widget' => 'single_text',        // に対応するEntityファイルの変数名 
                'input' => 'datetime',
                'format' => 'yyyy-MM-dd',
                'placeholder' => ['year' => '----', 'month' => '--', 'day' => '--'],
                'required' => false
            ]);
    }

DateType は input type="datetime-local"
image.png

#おわりに
ECCUBE4、SymfonyフレームワークについてはRubyOnRailsと違って
参考書や日本語ソースや新しい情報が少ないです
Symfony公式ドキュのが情報網羅性がう~~んな感じ。
現在ネットに公表されている情報が貴重でとても参考になっております。
公表してくださっている先輩エンジニアの方々にお礼申し上げます。

2
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?