6月 02
09.レイアウト
で、ついでなので管理画面っぽく、レフトメニューがあって作業を選べるようなページレイアウトに変更します。
/cake/libs/view/layouts/default.ctp がもともとのレイアウトファイルなので、これを開いて参考にしながら、自分の admin 用のレイアウト admin.ctp を作ります。それは /app/views/layouts に保存します。
ヘッダー部分はひとまずこんな感じで
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<?php echo $html->charset("utf-8"); ?>
<title><?php echo $title_for_layout; ?></title>
<?php echo $html->css('cake.generic'); ?>
<?php echo $scripts_for_layout ?>
</head>
body の中の構造はこんな感じで、
<body> <div id="header"></div> <div id="content"> <div id="menu"></div> <div id="main"></div> </div> <div id="footer"></div> </body>
まあ普通にシンプルに作ればいいと思います。
私は以下のようにしてみました。
<body>
<div id="header">
<h1>会員管理システム</h1>
</div>
<div id="content">
<div id="menu">
<ul>
<li><?php echo $html->link(__('会員管理', true), array('controller'=>'members','action'=>'index'));?></li>
<li><?php echo $html->link(__('担当者アカウント管理', true), array('controller'=>'users','action'=>'index'));?></li>
<li><?php echo $html->link(__('ログアウト', true), array('controller'=>'users','action'=>'logout'));?></li>
</ul>
</div>
<div id="main">
<?php $session->flash(); ?>
<?php echo $content_for_layout; ?>
</div>
</div>
<div id="footer">
<?php echo $html->link(
$html->image('cake.power.gif', array('alt'=> __("CakePHP: the rapid development php framework", true))),
'http://www.cakephp.org/',
null, null, false
);
?>
</div>
<?php echo $cakeDebug; ?>
</body>
</html>
で、このレイアウトを反映させます。 /app/controllers/members_controller.php を開いて、 var $helpers の下に、
class MembersController extends AppController {
var $name = 'Members';
var $helpers = array('Html', 'Form');
function beforeFilter() {
$this->layout = 'admin';
}
とレイアウトの指定を追加します。（上記6〜8行目）
ブラウザで見てみます。
・・・
おっとこれは、やはりCSSを書かないとだめですね(^^:
CSSは次でやるとして、とりあえずついでなので、レフトメニューのない場合のレイアウトも作っておきます。管理側のログイン画面で使います。
適当に no_menu.ctp とかの名前で保存しておきます。
<body>
<div id="header">
<h1>会員管理システム</h1>
</div>
<div id="main_nomenu">
<?php echo $content_for_layout; ?>
</div>
<div id="footer">
<?php echo $html->link(
$html->image('cake.power.gif', array('alt'=> __("CakePHP: the rapid development php framework", true))),
'http://www.cakephp.org/',
null, null, false
);
?>
</div>
<?php echo $cakeDebug; ?>
</body>
あと他に一般の人が登録する画面（公開側）のレイアウトも必要ですが、まあ、公開側はデザイナーさんがかっちりデザインしてくるでしょうから、どっちみちそれに合わせて作ることになるでしょう。
シンプルなものに適当な名前をつけてファイルだけ作っておけばいいと思います。
とりあえずここでは、公開側は、
- レイアウト：/app/views/layouts/member.ctp
- CSS：/app/webroot/css/member.css
ということで作りました。
で、ここまで来てよく考えてみると、管理側と公開側のレイアウトがそれぞれあって、それを $this->layout を使って切り替えるにしても、片方を beforeFilter() の中へ入れてしまったら、もう片方はそれぞれのアクションの中に書くしかありません。
これはちょっと面倒なので、大元で切り替えるように変更します。
まず直下の /app/app_controller.php に以下を追加します。
function beforeFilter(){
if (!empty($this->params['admin'])) {
$this->layout = "admin";
}else{
$this->layout = "member";
}
}
で、最初に入れた member_controller.php のこいつを
function beforeFilter() {
$this->layout = 'admin';
}
削除します。
これで /admin がついているときは左メニューがあって、ついていないときは左メニューがない、というレイアウトになります。