CakePHP1.3.6:フォーム・ヘルパー(Form Helper)をつかってみる。
今回は、以下のような画面をフォーム・ヘルパーで作ってみる。JavaEEをやっていた頃、Strutsのタグリブ(Taglib)で大はまりしたことがある。フォーム・ヘルパー(Form Helper)やHTMLヘルパー(HTML Helper)は、タグリブの臭いがするので、なんとなく気が進まなかったりする。
とりあえず、やってみよう。
ここで、サブミットすると、以下のようなレスポンスが帰る。
おもしろいのは、入力フィールドに値が残っていること。便利な機能だ。
プログラム名はTestFormHelperとする。
コントローラーの作成
/app/controllersにtest_form_helper.phpというファイルを作成する。
<?php class TestFormHelperController extends AppController{ public $name = 'TestFormHelper'; public $uses = null; public $layout = 'myznala'; public $autoLayout = true; public $autoRender = true; function index(){ $this->set('title_for_layout', "フォームヘルパーのテスト"); $rParm=null; if(!empty($this->data)){ require_once '../vendors/MyConverter.class.php'; $rParm = MyConverter::getRequestParams($this->data["TestForm"]); } $this->set("result",$rParm); } } ?>
ビューを作成する。
/app/viewsにtest_form_helperディレクトリを作成し、以下のようなindex.ctpを配置した。
JSPで作成したコード(もしくは、PHPでベタ書きしたコード)のようでまことに不本意であるが、フォーム・ヘルパーのテストということで、以下のようなコードにしてみた。
<h1>CakePHPのサンプル</h1> <p> これはCakePHPのサンプル画面です。 </p> <!-- 出力フィールド --> <?php if($result){ echo "<br>"; echo "<table>"; echo "<tr>"; echo "<th>key</th>"; echo "<th>value</th>"; echo "</tr>"; foreach($result as $key => $value){ echo "<tr><td>"; echo $key; echo "</td>"; echo "<td>"; echo $value; echo "</td></tr>"; } echo "</table><br>"; echo "<hr>"; }; ?> <br> <?php echo $form->create(null,array('type'=>'post','action'=>'.')); echo $form->text("TestForm.text1"); echo '<br>'; echo $form->password("TestForm.text2"); echo '<br>'; echo $form->hidden("TestForm.hidden1",array('value'=>'hidden_value')); echo '<br>'; echo $form->select("TestForm.select1",array('1'=>'1','2'=>'2','3'=>'3'), '3',array('empty'=>'選択してください')); echo '<br>'; echo $form->checkbox("TestForm.check1",array('checked'=>'true')); echo '<br>'; echo $form->checkbox("TestForm.check2",array('checked'=>'false')); echo '<br>'; echo $form->radio("TestForm.radio1",array('a'=>'a','b'=>'b','c'=>'c'), array('legend'=>'ラジオ','value'=>'c')); echo $form->end('送信'); ?>
ソースの表示
2番目の画像のソースを表示すると、以下のようになっている。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title> フォームヘルパーのテスト</title> <link rel="stylesheet" type="text/css" href="/workspace/cakesample/css/myznala.default.layout.css" /><link rel="stylesheet" type="text/css" href="/workspace/cakesample/css/myznala.layout.css" /><link rel="stylesheet" type="text/css" href="/workspace/cakesample/css/myznala.design.css" /></head> <body> <div id="egp-my-container"> <div id="egp-my-header"> <div class="egp-my-inner"> <img src="/workspace/cakesample/img/obs.logo.gif" alt="openBusinessSuite" />2010-11-27 </div> </div> <div id="egp-my-content"> <div class="egp-my-inner"> <h1>CakePHPのサンプル</h1> <p> これはCakePHPのサンプル画面です。 </p> <!-- 出力フィールド --> <br><table><tr><th>key</th><th>value</th></tr> <tr><td>text1</td><td>テスト</td></tr> <tr><td>text2</td><td>test</td></tr> <tr><td>hidden1</td><td>hidden_value</td></tr> <tr><td>select1</td><td>3</td></tr> <tr><td>check1</td><td>1</td></tr> <tr><td>check2</td><td>0</td></tr> <tr><td>radio1</td><td>c</td></tr> </table> <br><hr><br> <form id="Form" method="post" action="/workspace/cakesample/test_form_helper/." accept-charset="utf-8"> <div style="display:none;"> <input type="hidden" name="_method" value="POST" /></div> <input name="data[TestForm][text1]" type="text" value="テスト" id="TestFormText1" /><br> <input type="password" name="data[TestForm][text2]" value="test" id="TestFormText2" /><br> <input type="hidden" name="data[TestForm][hidden1]" value="hidden_value" id="TestFormHidden1" /><br> <select name="data[TestForm][select1]" id="TestFormSelect1"> <option value="">選択してください</option> <option value="1">1</option> <option value="2">2</option> <option value="3" selected="selected">3</option> </select><br><input type="hidden" name="data[TestForm][check1]" id="TestFormCheck1_" value="0" /> <input type="checkbox" name="data[TestForm][check1]" checked="checked" value="1" id="TestFormCheck1" /><br> <input type="hidden" name="data[TestForm][check2]" id="TestFormCheck2_" value="0" /> <input type="checkbox" name="data[TestForm][check2]" value="1" id="TestFormCheck2" /><br> <fieldset> <legend>ラジオ</legend> <input type="radio" name="data[TestForm][radio1]" id="TestFormRadio1A" value="a" /> <label for="TestFormRadio1A">a</label><input type="radio" name="data[TestForm][radio1]" id="TestFormRadio1B" value="b" /> <label for="TestFormRadio1B">b</label><input type="radio" name="data[TestForm][radio1]" id="TestFormRadio1C" value="c" checked="checked" /> <label for="TestFormRadio1C">c</label> </fieldset> <div class="submit"> <input type="submit" value="送信" /> </div> </form> </div> </div> <div id="egp-my-footer"> <div class="egp-my-inner"> Some rights reserved by EzoGP Project. </div> </div> </div> </body> </html>