Cakephp WEB開発

[Cakephp4]素のradio inputフォームをFormヘルパーに置き換え例

※本サイトはPR表記を含みます。

Cakephpではお問い合わせなどに使用するinputタグをそのまま使用することもできますし、Formヘルパーという機能を使って作成することもできます。

(セキュリティ観点、効率性から考慮すると、完全にFormヘルパーを使用することを推奨)

でも、Cakephpを触り始めた人が結構難儀するのが、各パーツをどのようにFormヘルパーで作成するのか?または、業務的によくあるケースだと、「素で書かれているinputフォームをFormヘルパーに置き換える」ということがあります。

単純なtextタイプとかだと、楽勝なんだけども、チェックボックス、ラジオボタン、セレクトとかどうすんだ?てな話。(ドキュメント読めば解決するんだけれども)

今回は、ラジオボタンを例にしてみます。

例①: 素のラジオボタンをCake4フォームヘルパーへ置き換え

こういう素のinputフォームがあるのは過去のシステムではよくある?ケースだとは思う。

// $typesには配列のデータがあるとする。[1 => '男性', 2 => '女性']とか。
<ul>
    <?php // Formヘルパーを使うと入れ子でない<label><input>を出力できないので素のHTMLで書く?>
    <?php foreach ($types as $key => $value) : ?>
    <li>
        <input type='radio' name='type' value=<?= h($key) ?>>
        <label for='formselect' . h($key)><?= h($value) ?></label>
    </li>
    <?php endforeach ?>
</ul>

radioやcheckboxなど風変りのWEBパーツは結構使いこなすのに手間がかかる。
上記コメントアウトにあるように、特に<label><input>タグの入れ子に対応するマークアップの都合でFormヘルパーを使っていない場合とかよくあるケース。

これを以下のようにする。

<?php
// labelとinputの入れ変えはnestingLabelなどで設定する
$this->Form->setTemplates([
    'nestingLabel' => '<li>{{hidden}}{{input}}<label{{attrs}}>{{text}}</label></li>',
    'formGroup' => '{{input}}{{label}}',
]);
?>

<?php
$radioData = [];
$i = 0;
// $typesには配列のデータがあるとする。[1 => '男性', 2 => '女性']とか。
foreach ($types as $key => $value) {
    // radioの配列データを作成
    $radioData[$i] = [
        'value' => h($key),
        'text' => h($value),
        'id' => 'formselect' . h($key),
    ];
    $i++;
}
?>
<ul>
<?= $this->Form->radio('type', $radioData) ?>
</ul>

for()でもええやんとか、まんまコピペで動かんやんのツッコミはムシ

もはや、inputパーツforeach()でぶん回す必要は無くなります。

必要な属性やら値の配列を事前に作成しておき、radioにはフィールド名指定と、作成した配列データを渡すだけでよいのであります。(わかってしまえば、あら簡単)

余談として、必要なHTMLタグ(今回の例でいえば<li>)はsetTemplates()内で付与しておけばよい。これが理解できれば、おそらくどんな形のマークアップでも応用がきくんではなかろうかと勝手に思ってます。

 

例②: Cake2で書かれていたオプションのラジオボタンをCake4フォームヘルパーへ置き換え

Q. Cake2でのradioなどで使用するオプションseparator afterなど、どこいった?

(やってることは同じ。クラス属性などもsetTemplates()内で設定可。主にわし専用)

labelの指定の仕方
<?php $this->Form->setTemplates([
    'nestingLabel' => '{{hidden}}{{input}}<label{{attrs}} class="label-radio">{{text}}</label>',
    'formGroup' => '{{input}}{{label}}',
]); ?>
<?= $this->Form->control('sex', ['type' => 'radio', 'legend' => false, 'options' => [2 => '女性', 1 => '男性']]) ?>

 

Cakephp4: ラジオボタンの作成
https://book.cakephp.org/4/ja/views/helpers/form.html#create-radio-button

Cakephp4: チェックボックスとラジオのラベル外への移動
https://book.cakephp.org/4/ja/views/helpers/form.html#id48

-Cakephp, WEB開発
-