symfony で Ajax を使って HellowWorld を表示するまでの手順は以下のようになります。
(前提として Apache, PHP, symfony がインストールされているものとします)
1. まずは symfony のお約束、project, application, module 作成から。
$ pwd
/usr/local
$ mkdir sf_ajax
$ cd sf_ajax
$ symfony new sf_ajax
$ symfony app helloworld
$ symfony module helloworld ajax
プロジェクト名、アプリケーション名、モジュール名は任意の名前で構いませんが、ここではそれぞれ sf_ajax, helloworld, ajax としました。
ここで、プロジェクトフォルダの web/ に sf ディレクトリがない場合は
$ cp -pr /usr/local/share/pear/data/symfony/web/sf ./web/
または
$ ln -s /usr/local/share/pear/data/symfony/web/sf ./web/
のように、symfony のインストールフォルダからコピーするかシンボリックリンクを張ります。
2. プロジェクトフォルダの web/ を web からアクセスできるようにします
(注: Apacheの Rewrite エンジンを使ってアプリケーション名を判別させる場合は web/ を DocumentRootにする必要があります)。
$ # /var/www が Apache の DocumentRoot の場合
$ ln -s /usr/local/sf_ajax/web /var/www/sf
この時点で
http://localhost/sf/helloworld_dev/ajax
(DocumentRootにした場合は http://localhost/helloworld/ajax )
のようにして web ページを開くと
Module “ajax” created
という symfony のデフォルトページが表示されるはずです。
3. ajax モジュールのアクションを編集する
$ cd apps/hello
$ cd apps/helloworld/modules/ajax/
$ vi actions/actions.class.php
actions.class.php: (編集前)
class ajaxActions extends sfActions
{
/**
* Executes index action
*
*/
public function executeIndex()
{
// $this->forward(‘default’, ‘module’);
}
}
actions.class.php: (編集後)
class ajaxActions extends sfActions
{
/**
* Executes index action
*
*/
public function executeIndex()
{
// $this->forward(‘default’, ‘module’); ←コメントアウト
}
// ↓ 追加
public function executeTime()
{
return $this->renderText(“Hello world!! (at “.date(“Y-m-d H:i:s”).”)”);
}
}
4. ajax モジュールのテンプレートを編集する
$ vi templates/indexSuccess.php
indexSuccess.php:
<?php use_helper(“Javascript”);?>
<div id=”res”></div>
<?= link_to_remote(“Click!!”,array(‘url’=>”ajax/time”, ‘update’=>”res”,)) ?>
1 行目: symfony で Ajax を使うために JavaScriptHelper を読み込みます。
2 行目: 結果表示先のタグ。
3 行目: Javascript を実行するアンカータグを生成します。
url: クリック時に HTTP リクエストを行うURLのモジュール以降の部分を指定します。GET パラメータを指定する場合は ajax/time?key=value のようにします。
update: url で指定したページの読み込みが完了した際に表示先にするDOM の id を指定します。
ここで再び先程のページ(http://localhost/sf/helloworld_dev/ajax)を開き、 Click!! という文字をクリックすれば, 押すたびに
Hello, world!! (at 2007-07-05 23:30:12)
の日時の部分が更新されて表示されるはずです。
5. さらに link_to_remote() の引数の配列パラメータを追加することでよりインタラクティブな動作を実現できます。
<?php use_helper(“Javascript”);?>
<div id=”res”></div>
<div id=”error” style=”color:red”></div>
<div id=”loading” style=”display:none”>Now loading…</div>
<?= link_to_remote(“Click!!”,array(
‘url’=>”ajax/time”,
‘update’=> array( // update は失敗時と成功時で反映先を変えることができます
‘success’ => ‘res’, // HTTP コード 2XX
‘failure’ => ‘error’, // それ以外
),
// 以下コールバックイベント指定
‘loading’ => “Element.show(‘loading’)”, // 読み込み開始時に実行する JavaScript
‘success’ => “Element.hide(‘loading’)”, // 読み込み結果 HTTP コードが 2XX の場合実行する JavaScript
‘failure’ => “Element.show(‘error’); alert(‘Error!!’)”, // 読み込み結果 HTTP コードが 2XX 以外の場合実行する JavaScript
‘complete’ => visual_effect(‘blind_down’, ‘res’, array(‘duration’=>0.5)), // 読み込みの成否にかかわらず、読み込み完了後(success,failure 判別,実行後)に実行する JavaScript
)) ?>
コールバックイベントには他にも before, after, loaded, interactive, 404 といったものがあります。詳しくはsymfony bookの Javascript ヘルパー – コールバックの項を参照してください。
参考:
– symfony book 日本語ドキュメント Javascript ヘルパー
Javascript ヘルパーの使い方について。
– script.aculo.us Documentation
symfony で利用している Javascript クラスライブラリ scriptaculous のドキュメントページ。symfony に最初から組み込まれているので、 use_helper(“Javascript”) とすればそのまま使えます。
– symfony Code Snippets – ajax
symfony を使った実用ソースコード集。