みなさんこんにちは、亀田です。
今回は、CakePHPのFormHelperのメソッドの一つ、hiddenについて説明します。
Webアプリで使用頻度が最も高い処理の一つが、フォームによるデータの送受信です。
フォームに必要なinputタグのhidden属性の処理を行うのがこのメソッドです。
この記事では、
・hiddenとな何か
といった基本的な内容から
・hiddenの値を取得する方法
・hiddenの値に配列を使用する方法
などについて解説していきます。
hiddenとは
hiddenについて説明する前に、CakePHPのFormHelperについて説明しましょう。
CakePHPには、その入力処理を代行してくれるFormHelperというクラスがあります。
これはアプリのプレゼンテーション層のためのコンポーネントのようなクラスです。
同様なHelperがつくクラスは多数存在します。
例えば、HTML に関連するオプションをより簡単、高速に作成してくれるHtmlHelper、ビューの中でテキストを作成する際に便利なTextHelperなどが存在します。
FormHelperはフォームで用いられる様々な入力タグに関する操作が可能になっています。
その中でちょっと面白いのが、隠された（=hidden）コントロールの処理を代行するhiddenメソッドです。
詳しい説明する前に、そもそも「hidden」とは何かということについて説明しましょう。
「hidden」とは、英語で隠されたということを意味する単語です。
Formでは、いくつかの入力用のタグが設定できますが、そのなかで特に変わったタグがinputタグを、hidden属性として使う方法です。使い方は、
<input type='hidden' name='num1' value='1'>
のようになります。これで、num1という名前の値を１として渡すことが出来ます。
inputタグはtypeをtextにすれば文字列を、passwordにすればパスワードを渡すことが出来ます。
属性を変えればテキスト入力、チェックボックス、ラジオボタンなどが作れますが、
typeを、hiddenにすると、「見えない」値を渡すことが出来るのです。
これが使われるのは、提供するデータのうち、ユーザーに見せる必要がないデータを渡したいときです。
ただし、それはあくまでも見た目上のことで、htmlタグとしては確かに存在します。
そのため、HTMLのソースコードを見ると中身はわかってしまいます。
ですから、セキュリティにかかわるデータは入れてはいけません。
なお、ここで紹介したFormHelperについては、以下の記事でも詳しく解説しています。さらに知りたい方はこちらをご覧ください。
hidden属性の設定方法
このようにかわったinputタグのhidden属性なのですが、意外と使い道が多いのです。
そのため、FormHelperクラスでは、１つのメソッドとして用意されています。
使い方は、以下のようになります。操作は、viewの側で行います。
echo $this->Form->hidden( 名前 ,['value'=> 値 ]) ;
名前の部分が、inputタグのname、値が、valueの値にあたるものです。例えば、
<input type='hidden' name='num' value='123' >
というような設定をしたければ、
echo $this->Form->hidden( 'num' ,['value'=>123 ]) ;
のように記述します。なお、この値をコントローラーで受け取る場合は、
$num = $this->request->data['num']; //123
というようにします。
hiddenの値を取得する方法
以上を踏まえて、実際にhiddenの値を取得するサンプルを紹介してみましょう。
src/template/test/index.ctp
<?php
//index.ctp
?>
<div>
<h1>hiddenタグのサンプル</h1>
<br /><br />
<?php echo $this->Form->create(false, array('type' => 'post', 'url' => '/test')); ?>
<?php echo $this->Form->text('SampleForm.text1'); ?>
<br />
<?php echo $this->Form->checkbox('SampleForm.チェックボックス', array('checked' => true)); ?>
<?php echo $this->Form->label('SampleForm.チェックボックス'); ?>
<br />
<?php echo $this->Form->radio('SampleForm.radio1',
array('日本' => 'Japan',
'アメリカ' => 'America',
'中国' => 'China'),
array('legend' => '国を選択', 'value' => '日本')
); ?>
<br />
<?php echo $this->Form->hidden('SampleForm.hidden1',['value'=>1 ]); ?>
<br />
<?php echo $this->Form->submit('送信'); ?>
<p><?php echo $result; ?></p>
<?php echo $this->Form->end(); ?>
</div>
src/template/layout/test.ctp
<?php
//test.ctp
?>
<!DOCTYPE html>
<html>
<head>
<?= $this->Html->charset() ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
</title>
<?= $this->Html->meta('icon') ?>
<?= $this->Html->css('test.css') ?>
<?= $this->Html->script('test.js') ?>
</head>
<body>
<?= $this->fetch('content') ?>
</body>
</html>
src/controller/TestController.php
<?php
namespace App\Controller;
use Cake\Core\Configure;
use Cake\Network\Exception\ForbiddenException;
use Cake\Network\Exception\NotFoundException;
use Cake\View\Exception\MissingTemplateException;
class TestController extends AppController
{
// コントローラー名
public $name = 'Test';
// モデルを指定しない
public $uses = null;
// レイアウトとしてLayouts フォルダの、test.ctp を使用。
//public $layout = 'test';
public function index() {
$result = '';
if ($this->request->isPost()) {
$result = '<pre>送信された情報<br />';
foreach ($this->request->data['SampleForm'] as $key => $val) {
if(is_array($val)){
$result .= $key . ' => ' . print_r( $val,true) . '<br />';
} else {
$result .= $key . ' => ' . $val . '<br />';
}
}
$result .= '</pre>';
} else {
$result = '※何か書いて送信ボタンを押してください';
}
$this->set('result', $result);
}
}
実行結果は、以下のようになります。
実行結果
送信された情報は、以下の通りです。
送信された情報 text1 => チェックボックス => 1 radio1 => 中国 hidden1 => 1
チェックボックスなどの操作を行って送信ボタンを押すと、入力結果が画面に現れます。
中には、画面上に現れないhidden=>1という結果も現れています。
この部分を構成しているのが、hiddenメソッドです。
このプログラムの詳細を説明していくことにしましょう。
index.tcpの中で使われているのが、FormHelperです。フォームの開始は以下のようになっています。
$this->Form->create(false, array('type' => 'post', 'url' => '/test'));
typeが、送信の種類（get/post)を表し、urlが送信先を指しています。
typeがpostなので、post送信、送信先が「/test」となっています。
つまり、送信先は自分自身ということになります。
そして、フォームの最後は、以下のように締めくくります。
<?php echo $this->Form->end(); ?>
この中に、inputやtextareaなどといったような、フォームの入力に必要な様々なタグを設置します。
フォームの生成にFormHelperを用いなくてはならないという決まりはありません。
しかし、見ればわかるように用いたほうが何かと便利です。
そして、hiddenを使ったデータは、以下のように記述されています。
<?php echo $this->Form->hidden('SampleForm.hidden1',['value'=>1 ]); ?>
これにより、SampleForm.hidden1の値が1となります。
このサンプルでは数値を扱っていますが、文字列なども同様の処理を行います。
hiddenの値に配列を使用する方法
配列の値をhiddenに設定する
また、hiddenのデータとして配列を設定したいようなケースもあります。
例えば、次のように記述します。
<?php
echo $this->Form->hidden('SampleForm.a[]', array('value' => 1));
echo $this->Form->hidden('SampleForm.a[]', array('value' => 2));
echo $this->Form->hidden('SampleForm.a[]', array('value' => 3));
?>
これは、実行すると、以下のようになります。
<input type="hidden" name="SampleForm[a][]" value="1"> <input type="hidden" name="SampleForm[a][]" value="2"> <input type="hidden" name="SampleForm[a][]" value="3">
これにより、Controller側で受け取るときは、配列として受け取ることが出来ます。
a[0],a[1],a[2]の値はそれぞれ1,2,3となります。
配列としてデータを送る必要があるようなケースでは、hiddenのみならず同様の処理を行います。
実際にプログラムを書くときは、for文などの繰り返し処理を用いてデータを生成しましょう。
そうすれば、簡単に配列データを送ることが出来ます。
まとめ
以上が、hiddenメソッドの説明でしたが、皆さんいかがだったでしょうか？
hiddenはフォーム内のタグを作るのに用いられますが、ユーザーが直接視認できないことが特徴です。
Controllerを介して複数ページの間でデータのやり取りをしたいときに、非常に便利です。
CakePHPでhiddenを活用する必要がある場合、ぜひこの記事の内容を参考にしてみてください。
