CakePHP1.3.6のレイアウトの利用

php cakephp

先のログでは、CakePHPに用意されたレイアウト使ってビューを作成した。
今回は、CSSやイメージを用意して、レイアウトをカスタマイズしてみる。
プログラム名はTestViewとするので、/app/controllers/にtest_view_controller.php、/app/viewsにtest_viewディレクトリを作成する。

注意すべきなのは、ページ表示に利用するリソースは/app/webroot下におくこと。
CSSは/app/webroot/css、画像は/app/webroot/imgにおく。
今回のサンプルでは、/app/webroot/cssに

  • myznala.default.layout.css
  • myznala.layout.css
  • myznala.design.css

の３つをおき、/app/webroot/imgには、obs.logo.gif（下画像）をおく。

以下はディレクトリ構成。

テンプレートの作成

表示のテンプレートは、/app/layoutsにmyznala.ctpを作成する。

以下が、myznala.ctp。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
	<?php echo $title_for_layout; ?>
</title>
<?php
	echo $html->css('myznala.default.layout');
	echo $html->css('myznala.layout');
	echo $html->css('myznala.design');
	echo $scripts_for_layout;
	?>
</head>
<body>
<div id="egp-my-container">

	<div id="egp-my-header">
		<div class="egp-my-inner">
		<?php
		    echo $html->image("obs.logo.gif",array('alt'=>'openBusinessSuite'));
		    echo date("Y-m-d"); 
		?>
      	</div>
	</div>

	<div id="egp-my-content">
		<div class="egp-my-inner">
		<?php echo $content_for_layout; ?>
		</div>
	</div>

	<div id="egp-my-footer">
		<div class="egp-my-inner">
		Some rights reserved by EzoGP Project.
		</div>
	</div>

</div>

</body>
</html>

ここで、$htmlはCakeに用意されているHTMLヘルパー。JSPのタグリブ（TagLib）を思い出す。app/webroot/css、app/webroot/imgに入れたCSSと画像への相対パスは自動的に生成される。（逆に、ヘルパーを使わないとうまくいかない場合があるようだ。規約の一つということかな）
この中では、以下の3つの固有の変数が利用されているだけで、他は単純な「表示用のPHP」スクリプトとなっている。これらの変数は、Cakeによってテンプレートに引き渡される。

$title_for_layout ページタイトル
$scripts_for_layout Javascript
$content_for_layout コンテンツ

コントローラーの作成

コントローラーは以下を準備する。$layoutメンバ変数で、上で作成したテンプレートを指定している。レイアウトを利用するのは、index()メソッドのみである。

<?php

class TestLayoutController extends AppController{
	
	public $name = 'TestLayout';
	public $uses = null;
	public $layout = 'myznala';
	public $autoLayout = true;
	public $autoRender = true;
	
	function index(){
		// 参考；http://book.cakephp.org/ja/view/1564/Controller-Components
		// $pageTitleは削除。
		$this->set('title_for_layout', "レイアウトのテスト");
	}
	
	function index2(){
		$this->autoLayout=false;
	}
	
}
?>

ビューの作成

コントローラーのindex()、index2()の2つのメソッドに対応して/app/views/test_layoutにindex.ctp、index2.ctpをを準備する。

index.ctp
<h1>CakePHPのサンプル</h1>
<p>
これはCakePHPのサンプル画面です。
</p>

/localhost/workspace/samplecake/TestViewにアクセスすると、このビューにテンプレートが適用されて以下の画面が戻る。

index2.ctp

このビューではテンプレートを利用しない。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sample</title>
</head>
<body>
This is a test screen of CakePHP.

</body>
</html>

/localhost/workspace/samplecake/TestView/index2にアクセスすると、以下の画面が戻る。