symfony + Ajax で Helloworld

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 を使った実用ソースコード集。