(原典)http://gihyo.jp/dev/serial/01/cakephp/0008?page=2
Ajax化にあたって、index.ctpを書き換えます。
/cakephp/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>
閲覧総計:3822 (本日:1 昨日:0)
CakePHPの入門者トレーニングとして、gihyo.jpサイトの「CakePHPで高速Webアプリ開発」
がすばらしい。しかし、このサンプル例題はCakePHP1.1で解説されている為、CakePHP1.2
では少し異なるコード表現になりそうな所がある。
サンプル例題「ToDoアプリ」をCakePHP1.2でトレースしてみた。 09/01/01
【目次】(項目をクリックすると、そこに飛べます)
(原典)http://gihyo.jp/dev/serial/01/cakephp/0008
http://script.aculo.usからJavaScript?ライブラリを入手
9個のファイルを/cakephp/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
(はまりポイント)ファイルが2つのフォルダにわかれているとは思わなかった。
prototype.jsの1つだけがlibフォルダに、他の8個のファイルはsrcフォルダ内にあった。
(原典)http://gihyo.jp/dev/serial/01/cakephp/0008?page=1
Ajax化にあたって、tasks_controller.phpのaddアクションを書き換えます。
/cakephp/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'); } }
●完了メッセージが表示されるので,メッセージ上のリンクを辿る
&ref(): File not found: "LH_cake_tasks保存完了メッセージ画面.JPG" at page "ToDoアプリ(4/5)をトレースしてみた";
●タスクが追加された
&ref(): File not found: "LH_cake_tasksデータ入力確認画面.JPG" at page "ToDoアプリ(4/5)をトレースしてみた";