CakePHP 2.xでFormを作成してみた


PHPを勉強し初めてから早9ヶ月、最近はCakePHPについて勉強中です。
CakePHPで確認画面付きフォームを作るのが思ったより苦戦したので書き起こしてみました。

CakePHPでフォームを作るのはそこまで難しくないのですが、確認画面をもう1ページ用意するなが嫌だったのでViewのページを一つControllerのメッソッドを一つを使って「入力画面」「確認画面」を1ページで作ってみました。

用意するもの

  • cakePHP 2.x
  • Xformjp
  • Cakeplus

Xformjpとは
入力画面から確認画面へ移行する際フィールドを簡単にフリーズさせてくれるcakePHPのプラグインです。

ダウンロードはコチラから↓
フォーム入力画面と確認画面で共通で使えるXFormヘルパーをCakePHP2.0対応しました

Cakeplusとは
フォームのデータを持ち回れるようにフォーム内のフィールドをhidden化してくれるものです。その他にも機能があります。

ダウンロードはコチラから↓
CakeplusがCakePHP2に対応しました

この2つのプラグインは確認画面を挟むフォームにはかなり重宝しております。

CakePHPにXformjp, Cakeplusプラグインを設置する

配布先様のページにプラグインの設置方法が記入されていますが一応説明しておきます。
CakePHPを一通り使える状態にしておいてください。

まずダウンロードしてきたファイルをCakePHPの「Plugin」フォルダに設置します。
app/Plugin/Xform/(ダウンロードしてきたXformのプラグイン)
app/Plugin/Cakeplus/(ダウンロードしてきたCakeplusのプラグイン)
に設置してください

次にapp/Config/bootstrap.phpに下記を記述

CakePlugin::load('Xform');
CakePlugin::load('Cakeplus');

Xformjp, Cakeplusを使いたいコントローラのpublic $helper に下記を記述

public $helpers = array('form', 'Xform.Xformjp', 'Cakeplus.Formhidden');

これで準備完了です.

フォームを作ってみる

ここでは、Model名などはContactとしておきます

■コントローラ

public function form() {
   if ($this->request->is('post')) {
      if (!empty($this->request->data)) {

         //valideteチェック
         $this->Contact->set($this->request->data);
         if($this->Contact->validates()){
            //submitのタイプの判定
            if (isset($_POST['confirm'])) {
               $type = 'confirm';
            } elseif (isset($_POST['submit'])) {
               $type = 'submit';
            } elseif (isset($_POST['back'])) {
               $type = 'back';
            }
            //sbumit tyep ごとに処理を分ける
            switch ($type) {
               case 'back': //修正などがあった時のback処理
                  break;

               case 'confirm': //確認画面の処理
                 //これを宣言するとフォームがフリーズしてくれる
                  $this->params['xformHelperConfirmFlag'] = true;

                  break;
               case 'submit': //送信する
                  /*
                   * このへんでメールを飛ばすなり
                   * thanksページに飛ばすなりする
                   */
                  break;
            }
         }
      }
   }
}

DB操作しないときは$this->Contact->save()ではなく$this->Contact->validates() でエラーのチェックを行います。セットするのもお忘れなく$this->Contact->set($this->request->data);

■ビュー

<h2>お問い合せフォーム</h2>
<?php echo $this->Form->create('Contact'); ?>
<?php echo $this->Xformjp->input('Contact.name');?>
<?php if ($this->params['xformHelperConfirmFlag']) {
echo $this->Formhidden->hiddenVars();
echo $this->Xformjp->submit('修正する', array(
'name' => 'back',
'div' => false));
echo $this->Xformjp->submit('送信する', array(
'name' => 'submit',
'div' => false));
} else {
echo $this->Xformjp->submit('入力内容を確認する', array(
'name' => 'confirm'));
}
?>
<?php echo $this->Form->end() ;?>

■モデル

〜省略〜
各自でvalidateを作ってみてください
モデルは使うけどDBは使わないって時はモデルの上の方で下記を書いてください

public $useTable = false;

モデル=DB使うみたいな雰囲気はCakePHPにはありますがこうやってオフにもできます。というかお問い合せフォームにはDB使いませんよねw

最後に

どうでしょうかでできたでしょうか?
ここ間違ってるとかこうやって描いた方がいいとかあればお気軽にコメントを書いていただければとても嬉しいです。

今度はvalidateで複数フィールドをまたぐ場合
例えば電話番号や郵便番号のエラーの出し方を書いてみようかなっと思います。

でわでわ

“CakePHP 2.xでFormを作成してみた” への1件の返信

  1. ピンバック: CakePHPでFormを作ってみた~validate編~ | お絵描きするプログラマ

コメントする

*