画面をカスタマイズしたい(CakePHP修行 #014)
June 30, 2007 12:13 AM written by Gen Taguchi

さて今回は画面のカスタマイズをします。参考にしたのはこちら。

» CakePHP Manual

いくつかポイントがありそうです。

  • /app/views/layout/default.thtmlを作ればそれがデフォルトのレイアウトを上書きしてくれるらしい。
  • titleタグの中身はcontroller中に$pageTitleで指定すればいけるらしい(つか、レイアウト中の変数をControllerで指定できるつうことか)
  • レイアウトは複数作って$layoutで切り替えられるらしい。
  • レイアウト中の小さなパーツは/app/views/elementsに入れておいて使い回しできるらしい。

なるほど。つうことで以下をやってみます。

  • /app/views/layout/default.thtmlを作って以前作ったレイアウトを適用させます。
  • ページタイトルを適宜変更します(LoginとMy Homeかな)。
  • $layoutの切り替えをしたいので、なにかでテストします。
  • ヘッダーとフッターは/app/views/elementsにいれてレイアウト中から使ってみます。

■ やってみた結果

前回までのログイン画面はこんな感じでした。いけてません。

login_1.gif

↑ ま、デフォルトですね。

そこで/app/views/layout/default.thtmlを作ってみます。

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" href="/css/core.css" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" />
<title><?php echo $title_for_layout?></title>
</head>
<body>
<div id="container" class="clear"> 
<div id="header" class="clear">
<h1><a href=""><img src="/img/codexcode_logo.png" width="400" height="50" border="0" alt="" /></a></h1>
</div>
<?php echo $content_for_layout ?>
</div><!-- end of container -->
<div id="footer">
<p>Copyright 2007 code*code.com, All rights reserved.</p>
</div>
</body>
</html>

それから必要なCSS、画像は/app/webroot以下に配置します。そしておもむろにhttp://www.codexcode.com/にアクセス!

login_updated.gif

↑ キタコレ!

そしてuser_controller.phpのlogin()に$pageTitleを入れてみます。

  function login()
  {
    $this->pageTitle = 'Welcome to CODE*CODE!';
    $this->set('error', false);

そしてアクセスすると確かにタイトルタグが変更されました。これは問題なし。

次にヘッダーとフッターをelementにしてみたいと思います。/app/views/elements/header.thtml、/app/views/elements/footer.thtmlを作ってみます。そしてdault.thtmlの方には次のように記述。

<div id="container" class="clear"> 
<?php echo $this->renderElement('header'); ?>
<?php echo $content_for_layout ?>
</div><!-- end of container -->
<?php echo $this->renderElement('footer'); ?>

そんでもってアクセス。これもうまくいったっぽいです。elementsでは変数とか渡せるようですが、それは後々使うことにしましょう。

■ レイアウトの切り替えがわからない

さてここまでは順調ですが、ちょっとはまった点(そしてまだ解決していない)。

わからないのはsetLayout()の使い方。マニュアル上ではレイアウトファイルを複数作って切り替えることが可能、とあります。そこでLogin中は/app/views/layout/login.thtmlを使いたいと思い、次のように記述しました。

  function login()
  {
    $this->setLayout('login');
    $this->pageTitle = 'Welcome to CODE*CODE!';
    $this->set('error', false);

すると・・・。

login_error.gif

↑ なんかエラー・・・なぜだ?

とんでもないケアレスミスのような気がしないでもないですが・・・まぁ、恥をかくのが修行の目的なんでさらしておきます・・・。もちょっと調べてわかったら報告しますね。

しかし今のところ特に必要な機能でもないので、問題解決に飽きたら次のステップに進んじゃいますw。

※ CakePHP修業は百式管理人がSNSっぽいものをCakePHPで作ろうとして挫折するまでの日記です。前回までのあらすじはこちらへ。

この記事のトラックバックURL (トラックバックは承認後に公開されます)

コメント一覧

コメント投稿 (コメントは承認後に公開されます)

名前
メールアドレス (表示されませんのでご安心を)
URL
情報保存?
コメント
あわせて読みたい

クリエイティブ・コモンズ・ライセンス

ユーザビリティ向上支援ビービット
Usability tested by BeBit

タブブラウザ Sleipnir 公式ページ(上級者向け)

Powered by
MovableType 3.33-ja

人気ブログランキング - idea*idea
ワード
www.flickr.com
This is a Flickr badge showing photos in a set called 自炊生活. Make your own badge here.