Home > CakePHP関連 > 画面をカスタマイズしたい（CakePHP修行 #014）

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

2007-06-30 (Sat) 0:13
CakePHP関連

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

» 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にいれてレイアウト中から使ってみます。

■ やってみた結果

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

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

そこで/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/にアクセス！

↑ ｷﾀｺﾚ！

そして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);

すると・・・。

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

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

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

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

こちらもあわせてどうぞ

Twitterもやっています！

Posted on June 30th, 2007 and last modified on August 4th, 2009.

Comments:1

とんでもブログ 08-07-18 (Fri) 18:16

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

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

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

Trackbacks:2

Trackback URL for this entry: http://www.ideaxidea.com/archives/2007/06/cakephp_014.html/trackback
Listed below are links to weblogs that reference: 画面をカスタマイズしたい（CakePHP修行 #014） from IDEA*IDEA ～百式管理人のライフハックブログ

pingback from 「CakePHP修行」を追う #8 - ElectronicBrain is eating BreakFast 09-06-04 (Thu) 14:44: [...] 画面をカスタマイズしたい（CakePHP修行 #014） – IDEA*IDEA ～百式管理人のライフハックブログ～ [...]
pingback from setLayout()はそういうことだったのか・・・（CakePHP修行 #021） - IDEA*IDEA ～百式管理人のライフハックブログ 09-08-04 (Tue) 14:50: [...] 以前の記事で悩んでいたsetLayout()の謎ですが、青い人がブログで教えてくれました。今日現在の1.2の最新版ではsetLayout関数は廃止されています。非推奨状態から廃止に至ったようですね [...]