【CakePHP3】FormHelperとBootstrapを使ってフォームを作る

CakePHP3の便利な機能である『FormHelper』

他のフレームワークにもある機能で、面倒なHTMLの記述もしなくていいですし、CSRF対策も勝手にやってくれます。

ですが細かいカスタマイズをしようとすると、FormHelperのリファレンスをしっかり読まなければいけませんし、最初は大変ですよね。

というわけで今回は簡単にBootstrapを使ったフォームをCakePHPでも使えるようにやり方を説明していこうと思います。

FormHelperの使い方をおさらい

FormHelperとは、コードを書くのが面倒なフォームをすばやく簡単に作成するための機能。

・フォームの検証（バリデーション）

・フォームのレイアウト、デザイン

などが簡単に設定できるようになる。

使い方

FormHelper::create(mixed $context=null, array $options = [])

細かい設定は$options配列で行う

$option配列には以下のようなキーと値を入れることができる。

type : get, file,post,put,delete,patchなど。作成するフォームの種類を選ぶ。フォームのmethodも自動的に設定してくれる

method : 値はtypeと同じ。typeでもmethodを設定できるが、こちらは明示的にフォームのmethodを設定する。

template: フォームで使うタグに自由に<div>などのタグで囲ったり、タグ自身にclassやstyleなどを追加できる。

FormHelperを使って自由自在にフォームをカスタマイズするには、templateを使うと簡単にできます。

詳しいことはCakePHP3のcookbookをみましょう。

https://book.cakephp.org/3.0/ja/views/helpers/form.html

実際にフォームを使ってみる

フォームをカスタマイズには、先ほど紹介した$option配列にtemplateを追加する方法が一番わかりやすくてオススメです。

サンプルコード

ごく普通のログイン画面で使われてるような、ユーザー名とパスワード、そしてログインボタンだけのフォームを作成してみました。

実際にコードを書いてみると、


<?php
 
$form_template = [
    // inputの設定
    'input' => '<div class="col-8"><input class="form-control" type="{{type}}" name="{{name}}"{{attrs}}></div>',
    // labelの設定
    'label' => '<div class="col-3"><label class="control-label" {{attrs}}>{{text}}</label></div>',
    // inputとlabelを包むコンテナの設定
    'inputContainer' => '<div class="form-group"><div class="row">{{content}}</div></div>',
    // buttonの設定
    'button' => '<button{{attrs}} class="btn btn-primary">{{text}}</button>'
];
 
echo $this->Form->create($userAuth, [
    'type' => 'post',
    'templates' => $form_template
]);
 
echo $this->Form->control('username', ['label' => 'ユーザー名']);
echo $this->Form->control('password', ['label' => 'パスワード']);
echo $this->Form->button('検索', ['type' => 'submit']);
echo $this->Form->end();
 
?>

<?php

$form_template = [

// inputの設定

'input' => '<div class="col-8"><input class="form-control" type="{{type}}" name="{{name}}"{{attrs}}></div>',

// labelの設定

'label' => '<div class="col-3"><label class="control-label" {{attrs}}>{{text}}</label></div>',

// inputとlabelを包むコンテナの設定

'inputContainer' => '<div class="form-group"><div class="row">{{content}}</div></div>',

// buttonの設定

'button' => '<button{{attrs}} class="btn btn-primary">{{text}}</button>'

];

echo $this->Form->create($userAuth, [

'type' => 'post',

'templates' => $form_template

]);

echo $this->Form->control('username', ['label' => 'ユーザー名']);

echo $this->Form->control('password', ['label' => 'パスワード']);

echo $this->Form->button('検索', ['type' => 'submit']);

echo $this->Form->end();

こんな感じになります。

$userAuthはバリデーションのために勝手に自分が作ったものを使っているだけなので、気にする必要はありません。

サンプルコードの解説

フォームはこんな感じです。

普通にBootstrapを使用した綺麗なフォームになりましたね。

コードを解説していくと、

From::create()の$option配列で使用するtemplateに与える配列$form_templateを作ります。

例えば$form_templateの’input’の場合、何もしなければ普通の<input>タグだけが生成されるのですが、

<input class=”form-control”>とすることでBootstrapのCSSを適用することができます。

これと同じ要領でlabelやbuttonにもBootstrapを適用することができます。

あとはいつもFormHelperを使っているようにForm::control()やForm::button()を呼んであげればいいだけです。

作成したフォームの値を受け取る方法

フォームを作成したあとは簡単で、いつもどおりに値を受け取ってやればいいだけなのですが、

一応サンプルコードを作ってみました。


// postのとき
    if ($this->request->is('post')) {
      $data = $this->request->getData();
      if (isset($data["username"]) && $data["username"] != "") {
        $this->set('username', $data["username"]);
        $this->autoLayout = false;
        $this->render('index');
      }
    }