cakePHP入門(3) – ビュー

前回コントローラーを扱った際に「次回はビューについてやります!」とか言っておきながら、堂々のスルーでした笑。
すみません。

cakePHPのインストールはcakePHP入門(1)をご覧ください。(※最新版は少し違う部分があります。)

cakePHPのビューについて

さて、ビューファイルについてですが、コントローラーで処理をした後に表示処理を行うのがビューの役割です。
例えば、コントローラーに以下の記述をします。

<?php
// app/Controller/TestsController.php
class TestsController extends AppController {
	public $name = 'Tests';
	function index(){
		//ページタイトル
		$title_for_layout = "cakePHPはこうやって使え!";
		//内容
		$content = "Hello World!!";
		//ビューファイルに値を渡す。
		$this->set(compact('title_for_layout','content'));
		//Layoutを無効化する
		$this->layout = null;
	}
}
?>

cakePHPではURLにアクセスがあった場合に、対応するアクションが自動的に読み込まれて処理され、ページが表示されます。
そして、このfunction index()というのが(Testsコントローラーの中の)indexページを表示するために必要な処理部分です。
これをindexアクションといいます。

ここでは、$title_for_layoutにタイトルを、$contentにHello World!!という文字列を入力しています。
そして$this->set()という関数でビューに値を渡しています。

ビューファイルの作成

それでは、ビューファイルを作成しましょう。
ビューファイルはappフォルダの中のViewフォルダ内にコントローラー名に準じたフォルダを作成します。
今回は”Tests”Controllerなので、「Tests」フォルダを作成します。
その中にindex.ctpを作成してください。

<?php
// app/View/Tests/index.ctp
?>
<html>
<head>
	<title><?=$title_for_layout?></title>
	<!-- 上記の省略形タグが使えない場合は<?php echo $title_for_layout; ?>で対応 -->
</head>
<body>
	<p><?=$content?></p>
	<!-- 上記の省略形タグが使えない場合は<?php echo $content; ?>で対応 -->
</body>
</html>

はphpの省略形で環境によっては利用できません。その場合はと記述してください。
これで、ビューファイルは完成です。

ページへのアクセス

cakePHPのインストールされている場所にアクセスしてみましょう。
URLにコントローラー名とアクション名(indexの場合のみ省略可)をつけるとアクセスできます。
例:
http://www.hogehoge.com/tests/(index)

ページの追加

index以外のページも作成してみましょう。
まずコントローラーを編集します。
mypageというアクションを追加します。

<?php
// app/Controller/TestsController.php
class TestsController extends AppController {
	public $name = 'Tests';
	function index(){
		//ページタイトル
		$title_for_layout = "cakePHPはこうやって使え!";
		//内容
		$content = "Hello World!!";
		//ビューファイルに値を渡す。
		$this->set(compact('title_for_layout','content'));
		//Layoutを無効化する
		$this->layout = null;
	}
	function mypage(){
		//ページタイトル
		$title_for_layout = "僕のページ";
		//内容
		$content = "Coffee Mild!!";
		//ビューファイルに値を渡す。
		$this->set(compact('title_for_layout','content'));
		//Layoutを無効化する
		$this->layout = null;
	}
}
?>

mypageビューの作成

次にapp/View/Tests/内にmypage.ctpを作成します。(index.ctpのコピーで良い。)

<?php
// app/View/Tests/mypage.ctp
?>
<html>
<head>
	<title><?=$title_for_layout?></title>
</head>
<body>
	<h1>mypageだよ</h1>
	<p><?=$content?></p>
</body>
</html>

ファイルが完成したのでアクセスします。
URLにコントローラー名とアクション名(Controller内のfunctionの名前)をつけるとアクセスできます。
例:
http://www.hogehoge.com/tests/mypage/

共通部分はレイアウトにまとめる

さて、indexアクションとmypageアクションのビューファイルの共通部分が多いのでまとめたいと思いませんか?
そんな時はレイアウト(Layout)を使います。
ViewフォルダのLayoutsフォルダを覗いてみてください。
default.ctpというファイルがあると思います。
これを書き換えて共通部分をまとめましょう。

<?php
// app/View/Layouts/default.ctp
?>
<!DOCTYPE html>
<html lang="ja">
<head>
	<?php echo $this->Html->charset();?>
	<title><?=$title_for_layout;?></title>
</head>
<body>
<?php echo $this->fetch('content'); ?>
</body>
</html>

これでOKです。元々書いてあったごちゃごちゃは全て消しましょう。
fetch(‘content’)という部分にビューファイルの中身を表示させることができます。

レイアウトの使用方法

では、このレイアウトを利用するようにコントローラー(Controller)も書き換えていきます。

<?php
// app/Controller/TestsController.php
class TestsController extends AppController {
	public $name = 'Tests';
	//Layoutの指定(defaultを使用する場合は指定不要)
	public $layout;
	//Layoutの指定(その他レイアウトの場合)
	//※View/Layouts/myweb.ctpなどを予め作成
	//public $layout = 'myweb';

	function index(){
		//ページタイトル
		$title_for_layout = "cakePHPはこうやって使え!";
		//内容
		$content = "Hello World!!";
		//ビューファイルに値を渡す。
		$this->set(compact('title_for_layout','content'));
	}
	function mypage(){
		//ページタイトル
		$title_for_layout = "僕のページ";
		//内容
		$content = "Coffee Mild!!";
		//ビューファイルに値を渡す。
		$this->set(compact('title_for_layout','content'));
	}
}
?>

これで、レイアウトを利用するようになりました。

ビューファイルから共通部分を削除します。

<?php // app/View/Tests/index.ctp ?>
<p><?=$content?></p>
<?php // app/View/Tests/mypage.ctp ?>
<h1>mypageだよ</h1>
<p><?=$content?></p>

むちゃくちゃシンプルになりましたね。
表示はそれぞれで確認してみてください。

このようにphp処理部分と表示をわけることによってシンプルに、編集しやすいコードとなります。
レイアウト以外にもElements(エレメント)というものを利用することによって部分ごとに共通部分のパーツを構成して読み込めるのですが、これはまた次回にでも。

これで基本的にはcakePHPの処理と表示ができるのですが、データベースを扱うのに必要なModelなどもありますし、便利機能もまだまだあるので、また時間ある時に書いていきたいと思います。

より詳しく学びたい方はcakePHP CookBookやMVCモデルを専門に取扱っている書籍などをご覧になってください。

  1. コメント 0

  1. トラックバック 0

return top