画面をカスタマイズしたい(CakePHP修行 #014)

SPONSORED LINK

Pocket

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

» 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で作ろうとして挫折するまでの日記です。前回までのあらすじはこちらへ。

ツイッターもやっています!

SPONSORED LINK

  1. CakePHP / レイアウトを変更して緑色の帯を消す

    Cakeはとりあえず動かすと、デフォルトのスタイルシートが邪魔をして、緑色の帯が上下に出てしまいます。

    これを解決するには、自分で以下のテンプレート…