symfony vol.11

symfony

【授業内容】
askeet ８日目(1/2)

☆　レイアウトにインジケータを追加しよう！

？？　インジケータ……って何？
[画像挿入予定地１]

○　ページ全体に反映させたいから、大本のlayout.phpを開こう！

　　askeet/apps/frontend/modules/templates/layout.php

○　開いたら以下をの１番上に書く。

<div id="indicator" style="display: none"></div>

[画像挿入予定地２]

○　main.cssを開こう！

　　askeet/web/css/main.css

○　開いたら、以下の内容を追加しよう

div#indicator
{
  position: absolute;
  width: 100px;
  height: 40px;
  left: 10px;
  top: 10px;
  z-index: 900;
  background: url(/images/indicator.gif) no-repeat 0 0;
}

☆　質問に対して、Userが「興味あるよ！」って言えるようにする！(AJAXインタラクションを追加する)

[画像挿入予定地３]

１　呼び出し元

[画像挿入予定地４]

……ということで、

　　askeet/apps/frontend/modules/question/tenplates/_interested_user.php

○　開いたら、Userが「興味あるよ！」っておせるlinkをくっつけまっしょい。

<?php use_helper('User') ?>
 
<div class="interested_mark" id="mark_<?php echo $question->getId() ?>">
  <?php echo $question->getInterestedUsers() ?>
</div>
 
<?php echo link_to_user_interested($sf_user, $question) ?>

[画像挿入予定地５]

○　上で宣言されているUserHelperを実装しよう！

askeet/apps/frontend/kib/helper/UserHelper.php

○　開いたら、以下を追加

<?php
 
use_helper('Javascript');
 
function link_to_user_interested($user, $question)
{
  if ($user->isAuthenticated())
  {
    $interested = InterestPeer::retrieveByPk($question->getId(), $user->getSubscriberId());
    if ($interested)
    {
      // 既に興味を持っている
      return 'interested!';
    }
    else
    {
      // 興味があることをまだ宣言していなかった
      return link_to_remote('interested?', array(
        'url'      => 'user/interested?id='.$question->getId(),
        'update'   => array('success' => 'block_'.$question->getId()),
        'loading'  => "Element.show('indicator')",
        'complete' => "Element.hide('indicator');".visual_effect('highlight', 'mark_'.$question->getId()),
      ));
    }
  }
  else
  {
    return link_to('interested?', 'user/login');
  }
}
 
?>

[画像挿入予定地６]



？１　link_to_remote……って何？

[画像挿入予定地７]

？２　prototype……って何？

[画像挿入予定地８]



○　questionの_list.phpにも変更を与えるよ！

　　askeet/apps/frontend/modules/question/tenplates/_list.php

○　開いたら、

<div class="interested_block">

<?php include-parcial('interested_user', arrat('question' => $question)) ?>

</div>

ってところを

<div class="interested_block">

<?php include-parcial('interested_user', arrat('question' => $question->getId())) ?>

</div>

に変更。

○　symfony ccしてから動作確認
　→　ログインしてみて、数字の画像の下に"interested?"って出たらOK！

(２の前に)　３　結果領域(アクションの結果をユーザに表示する処理)

[画像挿入予定地９]


○　さっき書いた、_list.phpのinterested_userの部分を下のように書き換える

<div class="interested_block" id="block_<?php echo $question->getId() ?>">
  <!-- between here -->
  <?php use_helper('User') ?>
  <div class="interested_mark" id="mark_<?php echo $question->getId() ?>">
    <?php echo $question->getInterestedUsers() ?>
  </div>
  <?php echo link_to_user_interested($sf_user, $question) ?>
  <!-- and there -->
</div>

[画像挿入予定地１０]

２　サーバアクション

AJAXの呼び出しはuser/interestedってactionを示しているよ！
[画像挿入予定地１１]

…ってことで、actionの中にexecuteInterested()を作るよ！

　　askeet/apps/frontend/modules/user/actions/action.class.php

○　開いたら、以下の内容を追加する

public function executeInterested()
{
  $this->question = QuestionPeer::retrieveByPk($this->getRequestParameter('id'));
  $this->forward404Unless($this->question);
 
  $user = $this->getUser()->getSubscriber();
 
  $interest = new Interest();
  $interest->setQuestion($this->question);
  $interest->setUser($user);
  $interest->save();
}

[画像挿入予定地１２]

○　interestedSuccess.php

　　askeet/apps/frontend/modules/user/templates/interestedSuccess.php

○　開いたら、以下の１行を書いて保存

<?php include_partial('question/interested_user', array('question' => $question)) ?>

↑こう書くことで、/modules/questionのモジュール、_interested_user.phpのパーシャルを再表示できる。


！！　このテンプレートに関してはlayoutを無効にしておきたい

　　askeet/apps/frontend/modules/user/config/view.yml

○　開いたら、以下を書き込み。

interestedSuccess:
  has_layout: off

○　symfony cc　でクリアしたら内容を確認する
　→interested?を押して、interested!になる。
　　数字のところがぴかっとなって１つ増える。
　→成功！


☆☆☆続きはまた明日☆☆☆


以上、今日の授業でした！