ToDoアプリ(4/5)をトレースしてみたのバックアップソース(No.13)

#freeze
閲覧総計：&counter();　　（本日：&counter(today);　　昨日：&counter(yesterday);)

CakePHPの入門者トレーニングとして、gihyo.jpサイトの「CakePHPで高速Webアプリ開発」
がすばらしい。しかし、このサンプル例題はCakePHP1.1で解説されている為、CakePHP1.2
では少し異なるコード表現になりそうな所がある。
サンプル例題「ToDoアプリ」をCakePHP1.2でトレースしてみた。　09/01/01

【目次】(項目をクリックすると、そこに飛べます)
#contents
~
*必要なJavaScriptライブラリの入手 [#e960bb33]

（原典）http://gihyo.jp/dev/serial/01/cakephp/0008

http://script.aculo.usからJavaScriptライブラリを入手

|&attachref(Ajaxツール導入１.JPG,zoom,300x300,button){新しい画像添付};|&attachref(Ajaxツール導入２.JPG,zoom,300x300,button){新しい画像添付};|
|１．Download pageをクリック|２．current versionのzipファイルをダウンロード|

９個のファイルを/cake/app/webroot/js/フォルダへ配置
1.prototype.js
2.builder.js
3.controls.js
4.dragdrop.js
5.effects.js
6.scriptaculous.js
7.slider.js
8.sound.js
9.unittest.js

（はまりポイント）ファイルが２つのフォルダにわかれているとは思わなかった。
prototype.jsの１つだけがlibフォルダに、他の8個のファイルはsrcフォルダ内にあった。


*Tasksコントローラの修正 [#j9e5b29c]

（原典）http://gihyo.jp/dev/serial/01/cakephp/0008?page=1

Ajax化にあたって、tasks_controller.phpのaddアクションを書き換えます。

/cake/app/controllers/tasks_controller.php
 <?php
 // app/controllers/tasks_controller.php
 class TasksController extends AppController { //AppControllerを継承
   var $name = 'Tasks'; //controller名を定義（頭が大文字を覚える）
   var $uses = array('Task'); //使用するmodel名を定義
   var $helpers = array( //利用ヘルパーの追加
     'Javascript',
     'Ajax',
   );
   
   function index() { //indexアクションの定義
     $this->set('yet_tasks', $this->Task->findAllByStatus('yet', null, 'Task.created ASC'));
     $this->set('done_tasks', $this->Task->findAllByStatus('done', null, 'Task.modified DESC'));
   }
   
   function add() {
     if (empty($this->data)) return; //モデルへの値が渡されてきているかチェック
     $this->Task->save($this->data, true, array('content', 'created', 'modified'));
     //DBへのレコード追加、saveの第3引数でホワイトリスト設定をした
     $this->set('yet_tasks', $this->Task->findAllByStatus('yet', null, 'Task.created ASC'));
     $this->layout = 'ajax';
   }
   
   function done($id) {
     if ($this->Task->findById($id)) {
       $this->Task->id = $id;
       $this->Task->save(array('status' => 'done'));
     }
     $this->redirect('/tasks');
   }
   function edit($id) {
     $task = $this->Task->findById($id);
     if (!$task) {
       $this->redirect('/tasks');
       return;
     }
     if (!empty($this->data)) {
       $task['Task']['content'] = $this->data['Task']['content'];
       $this->Task->save($task);
       $this->redirect(array('action'=>'index'));
     }
     $this->set('task', $task);
   }
   function del($id) {
     $this->Task->del($id);
     $this->redirect('/tasks');
   }
 
 }


*indexビューの修正 [#p8a7b149]

（原典）http://gihyo.jp/dev/serial/01/cakephp/0008?page=2

Ajax化にあたって、index.ctpを書き換えます。

/cake/app/views/tasks/index.ctp
 <?php echo $javascript->link('prototype') ?>
 
 <?php echo $ajax->form('/add', 'post', array('update' => 'yet_tasks')) ?>
 <p><?php echo $form->input('Task.content', array('type'=>"text", 'label'=>"")) ?>
 <?php echo $form->submit('タスクを追加') ?></p>
 
 </form>
 
 <h2>未完了タスク</h2>
 
 <div id="yet_tasks">
   <?php echo $this->renderElement('yet_tasks_table') ?>
 </div>
 
 <h2>完了タスク</h2>
 
 <table>
   <tr>
     <th>Id</th>
     <th>タスク内容</th>
     <th>状態</th>
     <th>操作</th>
     <th>作成日</th>
   </tr>
   <?php foreach ($done_tasks as $task) { ?>
     <tr>
       <td><?php echo h($task['Task']['id']) ?></td>
       <td><?php echo h($task['Task']['content']) ?></td>
       <td><?php echo h($task['Task']['status']) ?></td>
       <td><?php echo $html->link('削除', '/tasks/del/' . $task['Task']['id'], null, '削除してもよろしい ですか？') ?></td>
       <td><?php echo h($task['Task']['created']) ?></td>
     </tr>
   <?php } ?>
 </table>


*yet_tasks_tableエレメントとaddビューの作成 [#z8ff27c3]

（原典）http://gihyo.jp/dev/serial/01/cakephp/0008?page=2

yet_tasks_table.ctpを作成し
cake/app/views/elements/フォルダに保存します。

cake/app/views/elements/yet_tasks_table.ctp
 <table>
   <tr>
     <th>Id</th>
     <th>タスク内容</th>
     <th>状態</th>
     <th>操作</th>
     <th>作成日</th>
   </tr>
   <?php foreach ($yet_tasks as $task) { ?>
     <tr>
       <td><?php echo h($task['Task']['id']) ?></td>
       <td><?php echo h($task['Task']['content']) ?></td>
       <td><?php echo h($task['Task']['status']) ?></td>
       <td>
         <?php echo $html->link('完了', '/tasks/done/' . $task['Task']['id'], null, '完了してもよろしいで すか？') ?>
         <?php echo $html->link('編集', '/tasks/edit/' . $task['Task']['id']) ?>
         <?php echo $html->link('削除',  '/tasks/del/'  . $task['Task']['id'], null, '削除してもよろしい ですか？') ?>
       </td>
       <td><?php echo h($task['Task']['created']) ?></td>
     </tr>
   <?php } ?>
 </table>

add.ctpを作成し
cake/app/views/tasks/フォルダに保存します。

cake/app/views/tasks/add.ctp
 <?php echo $this->renderElement('yet_tasks_table') ?>


*動作確認（×正常に稼働しません） [#ce610053]

動作確認をしましたが「タスクの追加」機能が正常に稼働しません。
原因を調べましたが、日本語EUCを使っている関係では？との所までわかりましたが
現時点では解決法がわかっていません。　09/01/01

●indexビュー画面は正しく表示された
&attachref(LH_tasks_index_Ajax画面.JPG,zoom,300x300,button){新しい画像添付};

●英数文字を入力し「タスク追加」すると異常画面を表示
&attachref(LH_tasks_Ajaxタスク追加エラー画面１.JPG,zoom,300x300,button){新しい画像添付};

●日本語データを入力し「タスク追加」すると日本語データがDBに入力されない
&attachref(LH_tasks_Ajaxタスク追加エラー画面２.JPG,zoom,300x300,button){新しい画像添付};

原因追究しましたが、日本語文字コードをEUCとしているためと想像されますが
解決方法は皆目見当がつきません。
だれかアドバイス願います。　09/01/03
- 自分の環境では正常にできました。ちなみにUFT-8にしています。 -- [[通りすがり]] &new{2009-05-06 (水) 23:10:20};
- 当方でも正常にできました。上に同じくUTF-8です。 -- [[ごんべー]] &new{2009-06-25 (木) 16:30:56};
- 私の環境(UTF-8)でも問題ありませんでした。 -- [[通りすがり]] &new{2009-07-07 (火) 13:37:42};
- saveする前に、$this->data['Task']['content'] = mb_convert_encoding($this->data['Task']['content'], "EUC-JP", "UTF-8"); でいけましたよー --  &new{2009-11-17 (火) 13:16:14};

#comment_nospam
#vote(参考になった[7],ふつう[0],参考にならなかった[1])
ToDoアプリ(4/5)をトレースしてみた のバックアップソース(No.13)

ToDoアプリ(4/5)をトレースしてみたのバックアップソース(No.13)
