Jobeet4日目 ControllerとView

ORMはDoctrineでのJobeetプロジェクト、間髪入れず、4日目です。

参考サイトはこちら

3日目で作成したモジュールの基本的カスタマイズをしつつ、
symfony独特のグローバルテンプレート(レイアウト)の性質や、設定ファイルの定義、サイトの構造を理解していきます。

まず、apps/frontend/templates/layout.php
を、以下のように書き換えます。

<!-- apps/frontend/templates/layout.php -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Jobeet - Your best job board</title>
    <link rel="shortcut icon" href="/favicon.ico" />
    <?php include_javascripts() ?>
    <?php include_stylesheets() ?>
  </head>
  <body>
    <div id="container">
      <div id="header">
        <div class="content">
          <h1><a href="/job">
            <img src="/images/logo.jpg" alt="Jobeet Job Board" />
          </a></h1>

          <div id="sub_header">
            <div class="post">
              <h2>Ask for people</h2>
              <div>
                <a href="/job/new">Post a Job</a>
              </div>
            </div>

            <div class="search">
              <h2>Ask for a job</h2>
              <form action="" method="get">
                <input type="text" name="keywords"
                  id="search_keywords" />
                <input type="submit" value="search" />
                <div class="help">
                  Enter some keywords (city, country, position, ...)
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>

      <div id="content">
        <?php if ($sf_user->hasFlash('notice')): ?>
          <div class="flash_notice">
            <?php echo $sf_user->getFlash('notice') ?>
          </div>
        <?php endif; ?>

        <?php if ($sf_user->hasFlash('error')): ?>
          <div class="flash_error">
            <?php echo $sf_user->getFlash('error') ?>
          </div>
        <?php endif; ?>

        <div class="content">
          <?php echo $sf_content ?>
        </div>
      </div>

      <div id="footer">
        <div class="content">
          <span class="symfony">
            <img src="/images/jobeet-mini.png" />
            powered by <a href="http://www.symfony-project.org/">
            <img src="/images/symfony.gif" alt="symfony framework" />
            </a>
          </span>
          <ul>
            <li><a href="">About Jobeet</a></li>
            <li class="feed"><a href="">Full feed</a></li>
            <li><a href="">Jobeet API</a></li>
            <li class="last"><a href="">Affiliates</a></li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

次に、画像ファイルをダウンロードし、 web/images へ
    スタイルシートファイルをダウンロードし、 web/css ディレクトリに配置(上書き)します。
    ファビコンをダウンロードし、web/ディレクトリに設置します。

http://jobeet.kokoro/frontend_dev/new

を確認すると、以下のように。
※http://jobeet.kokoro/frontend_dev/job は、リストが崩れて表示されますが、この時点ではまだ大丈夫です。

jobeet


jobs.cssファイルはホームページに必要とされるときだけ読み込まれ、 job.cssファイルは求人ページだけに適用されます。 view.ymlファイルは単一モジュール単位でカスタマイズすることができます。アプリケーションのview.ymlファイルはmain.cssだけを持つように変更します。

# apps/frontend/config/view.yml
stylesheets:    [main.css]

jobモジュールのViewをカスタマイズするには、 apps/frontend/modules/job/configディレクトリでview.ymlファイルを生成します。

# apps/frontend/modules/job/config/view.yml
indexSuccess:
  stylesheets: [jobs.css]

showSuccess:
  stylesheets: [job.css]

indexSuccess.phpテンプレート(デフォルト)を、以下に変更します。
<div class="br30"></div>

[lang='css']
<!-- apps/frontend/modules/job/templates/indexSuccess.php -->
<?php use_stylesheet('jobs.css') ?>

<div id="jobs">
  <table class="jobs">
    <?php foreach ($jobeet_job_list as $i => $job): ?>
      <tr class="<?php echo fmod($i, 2) ? 'even' : 'odd' ?>">
        <td class="location"><?php echo $job->getLocation() ?></td>
        <td class="position">
          <a href="<?php echo url_for('job/show?id='.$job->getId()) ?>">
            <?php echo $job->getPosition() ?>
          </a>
        </td>
        <td class="company"><?php echo $job->getCompany() ?></td>
      </tr>
    <?php endforeach; ?>
  </table>
</div>

[/lang]

これにより、http://interndev.kokoro/frontend_dev.php/jobは、以下のようにキレイに見えるようになりました。

jobeet

showSuccess.phpファイルを開いて、下記コードに置き換えます。

<!-- apps/frontend/modules/job/templates/showSuccess.php -->
<?php use_stylesheet('job.css') ?>
<?php use_helper('Text') ?>

<div id="job">
  <h1><?php echo $job->getCompany() ?></h1>
  <h2><?php echo $job->getLocation() ?></h2>
  <h3>
    <?php echo $job->getPosition() ?>
    <small> - <?php echo $job->getType() ?></small>
  </h3>

  <?php if ($job->getLogo()): ?>
    <div class="logo">
      <a href="<?php echo $job->getUrl() ?>">
        <img src="/uploads/jobs/<?php echo $job->getLogo() ?>"
          alt="<?php echo $job->getCompany() ?> logo" />
      </a>
    </div>
  <?php endif; ?>

  <div class="description">
    <?php echo simple_format_text($job->getDescription()) ?>
  </div>

  <h4>How to apply?</h4>

  <p class="how_to_apply"><?php echo $job->getHowToApply() ?></p>

  <div class="meta">
    <small>posted on <?php echo date('m/d/Y', strtotime($job->getCreatedAt())) ?></small>
  </div>

  <div style="padding: 20px 0">
    <a href="<?php echo url_for('job/edit?id='.$job->getId()) ?>">
      Edit
    </a>
  </div>
</div>

テンプレートは求人情報を表示するためアクションから渡される$job変数を使います。テンプレートへ渡す変数を$jobeet_jobから$jobへリネームするので、 showアクションの該当箇所を変更します(変数が2カ所にあることに注意してください)

// apps/frontend/modules/job/actions/actions.class.php
public function executeShow(sfWebRequest $request)
{
  $this->job = Doctrine::getTable('JobeetJob')-> find($request->getParameter('id'));
  $this->forward404Unless($this->job);
}

jobeet


http://interndev.kokoro/frontend_dev.php/job のSensio Lab のリンク先↑

見た目変更系は以上です。

スロットと、レイアウトを変更していきます。

動的にタイトルを変更するためにレイアウトにスロットを追加します。

// apps/frontend/templates/layout.php
<title><?php include_slot('title') ?></title>

各スロットは(title)という名前で定義され、include_slot()ヘルパーで表示されます。今からshowSuccess.phpテンプレートの始めに求人ページのコンテンツについて定義したslot()ヘルパーを使うようにします。

// apps/frontend/modules/job/templates/showSuccess.php
<?php slot(
  'title',
  sprintf('%s is looking for a %s', $job->getCompany(), $job->getPosition()))
?>

テンプレート内で同じタイトルを何回も繰り返す代わりに、レイアウトでデフォルトのタイトルを定義します。

// apps/frontend/templates/layout.php
<title>
  <?php if (!include_slot('title')): ?>
    Jobeet - Your best job board
  <?php endif; ?>
</title>

4日目に行う作業は以上になりますが、それぞれ、symfony独特の意味があり、オブジェクト指向フレームワークならではの、慣れない部分がたくさんありました。説明しようと思っても、今はまだ難しいので(実は3日目からです・・・・)、手を動かして、理解できた部分を追記していこうと思います。
そういう学習法の方が、Jobeetプロジェクトも進むのではと、感じました。

関連する投稿


リツイートする

Twitterでのつぶやかれ

  1. コメントはまだありません。
(will not be published)
Subscribe to comments feed
  1. No trackbacks yet.

SetPageWidth