前回に引き続き、フォームの作成に関する記事3ということで
続きを書いていきます。
前回までで、個別にフォームを作成する場合と、
バリデーションについて書いていきました。
実は、フォームの生成とバリデーションを一緒にできる方法があるので、
それについて書いていきたいと思います。
INDEX
オブジェクト指向風のフォーム作成方法
さっきも書いたのですけど、Fieldsetはフォームをオブジェクト指向風に作成することが出来ます。
例えば、こういう風に記述した場合には
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $form = Fieldset::forge('registermenu'); | |
| $form->add('name属性の値', 'ラベルの内容', array('type'=>'text', 'value'=>'placeholder')); | |
| $form->add('submit', '', array('type'=>'submit', 'value'=>'送信')); | |
| $this->template->content = View::forge('user/activity/activetarget', $data); | |
| //viewforgeした後に | |
| $this->template->content->set_safe('registermenu', $form->build('user/activity/activetargetreg')); |
こんな感じで書いて
Viewsにset_safeで設定した変数を呼び出すと
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php echo $registermenu; ?> | |
| //こうやって書くと | |
| //こんなHTMLが作成されます。 | |
| <form action="http://mikadukisan.info/tablematches/user/activity/activetargetreg" accept-charset="utf-8" method="post"> | |
| <table id="MainFormTable" class="table"> | |
| <tbody><tr> | |
| <td class=""><label id="label_name属性の値" for="form_mainname属性の値">ラベルの内容</label></td> | |
| <td class=""><input type="text" value="placeholder" id="form_mainname属性の値" name="name属性の値"> <div><small style="color:red"> </small></div></td> | |
| </tr> | |
| <tr> | |
| <td class=""></td> | |
| <td class=""><input type="submit" value="送信" id="form_mainsubmit" name="submit"> <div><small style="color:red"> </small></div></td> | |
| </tr> | |
| </tbody></table> | |
| </form> |
フォームの属性をナントカしたい場合は場合はこうやります。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $form = Fieldset::forge('userinput',array( | |
| 'form_attributes' => array( | |
| 'enctype' => 'multipart/form-data', | |
| 'class' => 'form-horizontal' | |
| ) | |
| )); |
inputの作成方法はaddメソッド
fieldsetクラスに書いてあるメソッドです。
フォームに対して、属性やバリデーションの設定をすることができます！
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $obj = Fieldset::forge('registermenu'); | |
| //-----オブジェクトを作成して | |
| $obj->add('name属性の値', 'ラベルの内容', array('type'=>'text', 'value'=>'placeholder')); | |
| //こうすれば、タイプtextのタグが作成されます。 |
作成したinputの編集をするにはfieldメソッド
さっきの工程を行う事により、呼び出したオブジェクトに、
inputタグを登録というか追加することができます。
でも、あ、やっぱし編集したいとかあると思います。
そんな時にfieldが役に立ちます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $form = Fieldset::forge('registermenu'); | |
| $form->add('name属性の値', 'ラベルの内容', array('type'=>'text', 'value'=>'placeholder')); | |
| $form->field('name属性の値')->set_label("名前")->set_type("checkbox"); |
これでtextboxで作った奴が、checkboxに変更されました！
選択肢が複数ある場合選択肢を設定できる
コンボボックスやチェックボックスやラジオボタン作る場合には
optionsを設定することで、選択肢を指定できます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $form = Fieldset::forge('registermenu'); | |
| $form->add('type','試合区分', | |
| array( | |
| 'options' => array('シングル','ダブルス','混合','混合なしSW','混合ありW','混合ありSW','団体'), | |
| 'type' => 'select', | |
| ) | |
| ); | |
optionsの値に入れた配列が選択肢として出力されます。
後でoptions追加するならこうなります。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $form = Fieldset::forge('registermenu'); | |
| $form->add('type','試合区分', | |
| array( | |
| 'options' => array('シングル','ダブルス','混合','混合なしSW','混合ありW','混合ありSW','団体'), | |
| 'type' => 'select', | |
| ) | |
| ); | |
| $form->field('type')->set_options(array("aa"=>"もげり")); |
バリデーションルールを追加する
バリデーションルールを追加するにはadd_ruleメソッドを使います。
これも同じ感じで、$obj->add_ruleって感じで使っていきます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $form = Fieldset::forge('registermenu'); | |
| $form->add('name属性の値', 'ラベルの内容', array('type'=>'text', 'value'=>'placeholder')); | |
| $form->field('name属性の値')->add_rule('required'); |
こんな感じになります。
モデルのフィールドをinputタグとして使う場合
モデルをフォームにそっくりそのまま作り変えることもできます。
Fieldset::forgeする際にadd_modelメソッドを呼び出す事で可能になります。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $form = Fieldset::forge('registermenu')->add_model("Model_analybasic"); |
この後でbuildすれば、モデルの内容がフォームとして出力されます。
モデルにフォームのタイプを設定する
モデルの配列の中に設定します。コードにコメント入れる形で見ていきます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class Model_Match extends \Orm\Model | |
| { | |
| protected static $_properties = array( | |
| 'id' => array('form' => array('type' => false),), //modelとして出力されない | |
| //この場合name属性の値がuserIDになります。// | |
| 'userID' => array('form' => array('type' => false),), | |
| //この場合name属性の値がtitleになります。// | |
| 'title' => array( | |
| 'datatype' => 'varchar', | |
| 'label' => '大会名', //labelを設定します。 | |
| 'form' => array( | |
| 'type' => 'text', //inputタグがtextとして出力されます。 | |
| 'placeholder' => '○×選手権大会', //placeholderが設定できます。 | |
| 'class' => 'span5', //CSSのクラスを設定することが出来ます。 | |
| ), | |
| ), | |
| } |
こんな感じで、作成されているモデルや、作成したモデルに追加していく形になります。
選択肢がある場合だとこういう風になります。
typeをchekboxやradioにすると、そのようにフォームが変わります。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'form' => array( | |
| 'type' => 'select', | |
| 'options' => array( | |
| 0 => '選択してください。', | |
| '07：00' => '07：00', | |
| '07：30' => '07：30', | |
| '08：00' => '08：00', | |
| '08：30' => '08：30', | |
| '09：00' => '09：00', | |
| '09：30' => '09：30', | |
| '10：00' => '10：00', | |
| ), | |
| 'class' => 'span3', | |
| 'style' => 'height: 30px', | |
| ), |
optionsもこんな感じで設定することができます。
textareaはこう設定します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'form' => array( | |
| 'type' => 'textarea', | |
| 'class' => 'span5', | |
| 'rows' => '8', | |
| ), |
バリデーションの設定
バリデーションもモデルに設定することができます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'menuvalue' => array( | |
| 'label' => '練習メニュー', | |
| 'form' => array('type' => 'text','class' => 'span5'), | |
| 'validation' => array( | |
| 'required' | |
| ), | |
| ), |
validationの中に設定したバリデーションを入れると、
そのバリデーションが実行されます。ちょっとややこしい奴もできます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'validation' => array( | |
| 'required', | |
| 'min_length' => array('8'), | |
| 'match_pattern' => array('/^[a-zA-Z][0-9a-zA-Z]*[0-9]+[0-9a-zA-Z]+$/'), | |
| ), |
こんな感じで正規表現もできたりします。
バリデーションの一覧は公式に詳しく載っていたりします。
ルール表を参考にしてください。
add_modelする際に編集したいものがある時
・fieldメソッドを使って、フォームの追加したり削除する
・fieldメソッドを使ってバリデーションを追加したり削除したりする
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //inputを消したいとき | |
| $obj->disable('フォームのname属性の値'); | |
| //バリデーションのルールを消したい時 | |
| $obj->field('フォームのname属性の値')->delete_rule('消したいルール'); | |
| //inputを増やしたい時 | |
| $form->add('name属性の値', 'ラベルの内容', array('type'=>'text', 'value'=>'placeholder')); | |
| //増やしたinputにバリデーションルールを設定したい時 | |
| $form->field('name属性の値')->add_rule('required'); | |
| //増やしたinputタグの編集がしたいとき | |
| $form->field('name属性の値')->set_label("名前")->set_type("checkbox"); |
こんな感じでmodelからフォームを作成した場合には
$obj->fieldとか$obj->addとかが便利になります。
動いてるコード
自分が書いて動いてるメソッドを取り出してみます。
ポイント
・バリデーションはrunメソッドを呼び出して真偽判定する
・repopulateメソッドで、ユーザーが入力した内容を覚えさせておく（入力しなおしの際のストレス軽減）
・show_errorsメソッドを使う事で、エラーを記憶させる事ができる
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //フォームを生成するメソッド | |
| public function userform() { | |
| $form = Fieldset::forge('userinput')->add_model("Model_User"); | |
| $form->add('submit', '', array('type'=>'submit', 'class'=>'btn btn-inverse', 'value' => '確認へ')); | |
| $form->repopulate(); //これをやると、ユーザーが入力した内容を覚えておいてくれるっていう風に解釈してる | |
| return $form; | |
| } | |
| //ビューに動いてるフォームを渡すメソッド | |
| private function action_activetarget() | |
| { | |
| $data["subnav"] = array('activetarget'=> 'active' ); | |
| $form = $this->get_form(); | |
| $this->template->title = 'メニュー設定'; | |
| $this->template->content = View::forge('user/activity/activetarget', $data); | |
| $this->template->content->set_safe('registermenu', $form->build('user/activity/activetargetreg')); | |
| } | |
| //ビューから受け取った情報を処理するメソッド | |
| public function action_confirm() { | |
| $form = $this->userform(); | |
| $data["post"] = Input::post(); | |
| $data["model"] = Model_account::find('user'); | |
| if ($form->validation()->run()) { //ここでバリデーションをかけて真偽の判定をする | |
| $this->template->title = '確認画面'; | |
| Session::set('post',$data["post"]); | |
| Session::set('input',$form->validated()); | |
| $this->template->content = View::forge('user/userform/confirm', $data); | |
| } else { | |
| $form->repopulate(); | |
| $this->template->title = '入力の訂正をお願いします。'; | |
| $this->template->content = View::forge('user/userform/userinput', $data); | |
| $this->template->content->set_safe('userinputform', $form->build('user/userform/confirm')); //フォームをuserinputform変数にセット | |
| $this->template->content->set_safe('html_error', $form->validation()->show_errors()); //エラーをhtml_error変数にセット | |
| } | |
| } | |
とまぁ、気がついたら長くなってしまいましたが、
今回もお付き合い頂いて下さった方、どうもありがとうございました。
