CakePHPでToDo管理アプリケーションを作る[4]

チュートリアルの続き。今回はタスクの追加を「Ajax化」する。
http://gihyo.jp/dev/serial/01/cakephp/0008

CakePHPにはAjax化を支援する「AJAXヘルパー」というヘルパークラスが存在する。
http://book.cakephp.org/ja/view/208/AJAX

これを活用することで、よくあるAjax処理を自分ではJavaScriptをまったく記述せずに実装することができる。

JavaScriptライブラリのインストール

CakePHP本体のパッケージにはJavaScriptのライブラリは含まれていないので、http://script.aculo.usから最新版のものをDLして、app/webroot/jsディレクトリに設置する。

http://script.aculo.us
> Downloads page > scriptaculous-js-1.8.2.zip
をDLして展開。

展開して出現したscriptaculous-js-1.8.2内のlib内にある

prototype.js

同じくscriptaculous-js-1.8.2内のsrc内にある

builder.js
controls.js
dragdrop.js
effects.js
scriptaculous.js
slider.js
sound.js
unittest.js

を、app/webroot/jsにコピーする。

これでCakePHPでAJAXヘルパーを利用する準備が出来た。

Tasksコントローラを修正する

Ajax化するにあたって、コントローラとビューを対応させる。まずはTasksコントローラにメンバー変数として$helperを定義する。（既存のvar $uses = array(‘Task’);の次に追加する）

app/controllers/tasks_controller.php

    // JavaScriptヘルパーとAjaxヘルパーの使用を明示
    var $helpers = array(
        'Javascript',
        'Ajax',
    ); 

続いて、addアクションを次の内容に変更する。

    // addアクション
    function add() {
        if(empty($this->data)) return;
        $this->Task->save($this->data, true, array('content', 'created', 'modified'));
        $this->set('yet_tasks', $this->Task->findAllByStatus('yet', null, 'Task.created ASC'));
        $this->layout = 'ajax';
    }

indexビューの修正

indexビューにおける、未完了タスクの表示までを書き換える。

※これもHtmlHelperを使ったチュートリアルどおりの書き方だとエラーになるので、適宜FormHelperでの記述に変更した。

app/views/tasks/index.ctp

link('prototype');

// form要素の開始タグをAJAXヘルパーで行うよう変更
echo $ajax->form('add', 'post', array('update'=>'yet_tasks'));

echo $form->input('content');
echo $form->submit('タスクを追加');
echo $form->end();
?>
未完了タスク

    renderElement('yet_tasks_table') ?>

yet_tasks_tableエレメントの作成

indexビュー内で

$this->renderElement()

と記述されているメソッドは、app/views/elements/エレメント名.ctpファイルを読み込むためのもの。

PHPのinclude関数に近いものらしい。

このyet_tasks_tableエレメントを用意するために、app/views/elements/yet_tasks_table.ctpファイルを作成する。

app/views/elements/yet_tasks_table.ctp
記述内容は、既に作成済みのビューファイル「app/views/tasks/index.ctp」の中の部分をカットして持ってきたもの。（未完了タスクと完了タスクのちょうど間の部分）

Id
タスク内容
状態
操作
作成日








    link('完了', '/tasks/done/'.$task['Task']['id'], null, '完了してもいいですか？') ?>
    link('編集', '/tasks/edit/'.$task['Task']['id']) ?>
    link('削除', '/tasks/del/'.$task['Task']['id'], null, '削除してもいいですか？') ?>

addビューを作成する

app/views/tasks/add.cptファイルをあらたに作成し、以下の内容を記述する。

renderElement('yet_tasks_table') ?>

以上で「タスク追加のAjax化」が完了した。

見た目は前回とまったく変化なし。しかし、タスクを新規追加するとブラウザ上で一切画面遷移が発生しなくなっている。これが今回の「Ajax化」で実装された部分。

AJAXヘルパーについては、マニュアルを参照のこと。
http://book.cakephp.org/ja/view/208/AJAX