【CakePHP入門】hidden属性を設定する方法

みなさんこんにちは、亀田です。

今回は、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という名前の値を1として渡すことが出来ます。

inputタグはtypeをtextにすれば文字列を、passwordにすればパスワードを渡すことが出来ます。

属性を変えればテキスト入力チェックボックスラジオボタンなどが作れますが、
typeを、hiddenにすると、「見えない」値を渡すことが出来るのです。

これが使われるのは、提供するデータのうち、ユーザーに見せる必要がないデータを渡したいときです。

ただし、それはあくまでも見た目上のことで、htmlタグとしては確かに存在します。

そのため、HTMLのソースコードを見ると中身はわかってしまいます

ですから、セキュリティにかかわるデータは入れてはいけません

なお、ここで紹介したFormHelperについては、以下の記事でも詳しく解説しています。さらに知りたい方はこちらをご覧ください。

【CakePHP入門】フォームを作成する方法(FormHelper)
更新日 : 2017年7月6日

hidden属性の設定方法

このようにかわったinputタグのhidden属性なのですが、意外と使い道が多いのです。

そのため、FormHelperクラスでは、1つのメソッドとして用意されています。

使い方は、以下のようになります。操作は、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を活用する必要がある場合、ぜひこの記事の内容を参考にしてみてください。

LINEで送る
Pocket

SEからWebエンジニアへ転職した理由

侍エンジニア塾卒業生の小池さんは、以前は社内SEとして約5年ほど勤務していました。しかし業務内容は社内のヘルプデスク対応など、プログラムを書く仕事は全くなかったそうです。

SEながらプログラムを書けない現状に「将来仕事がなくなるんじゃないか」と不安を感じ、プログラミング学習を決意。

弊社スクールで学習し、無事ベンチャー企業のプログラマーとして転職に成功しました。そんな小池さんの学習法や転職体験談を伺いましたので、是非ご覧ください。

「プログラミングができないSEは仕事がなくなる」不安を感じたSEが未経験から転職成功するまで
更新日 : 2019年10月7日

書いた人

亀田

亀田

エンジニアとして独自の製品やサービスを開発する傍ら、エンジニア教育にも力を入れています。企業研修や専門学校での非常勤講師もしながら、独自の言語学習サイト「一週間でわかるシリーズ」を運営し、エンジニアになりた人をサポートする活動をライフワークにしています。
【一週間で学べるシリーズ】
http://sevendays-study.com/

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説