CakePHP3でBootstrapを使う

レスポンシブデザインのページを作成する時にBootstrapをよく使っています。

CakePHP3でBootstrapを使う機会があったので、内容を整理したいと思います。

Form->controlメソッドによるHTMLの出力内容

CakePHP3では、Formヘルパーにより、基本controlメソッドで各項目を定義します。

controlメソッドはテンプレートによって定義されている内容で、inputやlabel、divタグを生成するため、開発者はコードを実装する量が少なくなっています。

デフォルトのテンプレートは以下のようになっています。
↓Formヘルパーページ（公式）
https://api.cakephp.org/3.8/class-Cake.View.Helper.FormHelper.html#%24_defaultConfig

例えば、以下のように項目を定義するとします。

<?= $this->Form->control('id', ['type' => 'text']) ?>

この場合、出力されるHTMLは以下のようになります。

<div class="input text">
  <label for="id">Id</label>
  <input type="text" name="id" id="id"/>
</div>

このようになるのは、先ほどのテンプレートで以下のように定義されているからです。

'input' => '<input type="{{type}}" name="{{name}}"{{attrs}}/>',
'inputContainer' => '<div class="input {{type}}{{required}}">{{content}}</div>',
'label' => '<label{{attrs}}>{{text}}</label>',

一番外のdivタグは、「inputContainer」という名前で定義された内容、そして、inputタグ、labelタグは、それぞれ同名で定義された内容で出力されています。

Form->controlメソッドでBootstrapを使用する

続いて、ここにBootstrapを適用してみます。

Bootstrapを適用したい場合は、inputやdivタグにclass属性を設定したいので、テンプレートを変更することになります。
以下のようにcreateメソッドの前にsetTemplatesメソッドを定義して、各テンプレートの内容を設定します。

<?php
  $this->Form->setTemplates([
    'inputContainer' =>'<div class="form-group">{{content}}</div>',
    'input' => '<input class="form-control" type="{{type}}" name="{{name}}"{{attrs}}/>',
  ]);
?>
<?= $this->Form->create() ?>

テンプレートに上記の内容を設定すると、以下のようにHTMLが出力されるようになります。

<div class="form-group">
  <label for="id">Id</label>
  <input class="form-control" type="text" name="id" id="id"/>
</div>

今回はinputタグの例ですが、他のタグでも同様にテンプレートを設定することで対応可能です。

▼ 業務効率化代行サービス「カワリニ」
「業務効率化って簡単に言うけど、なかなか実現できない。」
そんな状況にいるのなら、お気軽にご相談ください。あなたの代わりに、業務効率化を担当します。

ベルトトルト

IT全般はお任せ。
プログラミングメインに活動中。

Java、PHP、C#、SQL、HTML、CSSやWordPressなどプログラミングから、情シスなど奮闘中。
最近の趣味はGAS。

競馬が好き。そしてスポーツ、読書、食べること、スイーツ好き。
好きなことでサービスやアプリを作りたい。