ビューとレイアウト

基本

CakePHPのビューはいくつかのレイヤーに分かれています。

  • レイアウト 大枠。ページの共通部分。
  • ビュー 各アクションに対応して表示するページ。
  • エレメント 各ビューで使いまわす部分。

このうちビューとエレメントについて説明します。

レイアウト

まずはレイアウトで、ページの共通部分をコーディングします。
レイアウトはいくらでも作ることができ、各コントローラやアクションのビューでどのレイアウトを使うか指定できます。指定しない場合、app/View/Layouts/default.ctpになります。
default.ctpには既に色々書かれていますが、自分で書き直してみます。

app/View/Layouts/default.ctp

<!DOCTYPE html>
<html>
<head>
     <title>default.ctpを使ってます</title>
     <link rel="stylesheet" href="common.css">
</head>
<body>
    <header>ヘッダー</header>
    <?php echo $this->fetch('content') ?>
    <footer>フッター</footer>
</body>
</html>

上記の<?php echo $this->fetch('content') ?>は、ビューの内容を表示する記述です。適当なビューapp/View/Sample/index.ctpを作ってみます。

app/View/Sample/index.ctp

<h1>sample page</h1>
<p>サンプルのビューです</p>

コントローラとアクションも作ってブラウザでアクセスしてみます。

app/Controller/SampleController.php

<?php
class SampleController extends AppController {
    public function index() {}
}

結果

f:id:myhateno:20180529111623p:plain

ビューから変数を渡す

レイアウトを以下に書き換えます。

app/View/Layouts/default.ctp

<!DOCTYPE html>
<html>
<head>
     <title><?php echo $this->fetch('pageTitle') ?></title>
     <link rel="stylesheet" href="common.css">
</head>
<body>
    <header><?php echo $this->fetch('headerTitle') ?></header>
    <?php echo $this->fetch('content') ?>
    <footer>フッター</footer>
</body>
</html>

fetch('pageTitle')やfetch('headerTitle')でビューから渡される変数を取得します。なおビューから渡されないと空文字になります。
ビューを以下のよう変更しましょう。

app/View/Sample/index.ctp

<?php
$this->assign('pageTitle', 'page title | samplesite');
$this->assign('headerTitle', 'sample page header');
?>

<h1>sample page</h1>
<p>サンプルのビューです</p>

assignメソッドで各変数に値をセットしています。ブラウザで見ると

f:id:myhateno:20180529112655p:plain

異なるビューを作ったとき、assign('pageTitle', 'new title')などにすれば、各ビューからレイアウトへ異なる値を渡すことができます。

コントローラから変数を渡す

setメソッドを使って、コントローラから変数を渡すこともできます。

app/Contoller/SampleController.php

<?php
class SampleController extends AppController {
    public function index() {
        $this->set(array(
            'pageTitle' => 'page title | samplesite',
            'headerTitle' => 'sample page header',
            'text' => 'dummy text'
        ));
    }
}

コントローラから渡された変数はfetchメソッドではなくそのまま変数名でアクセスできます。

app/View/Layouts/default.ctp

<!DOCTYPE html>
<html>
<head>
     <title><?php echo $pageTitle ?></title>
     <link rel="stylesheet" href="common.css">
</head>
<body>
    <header><?php echo $headerTitle ?></header>
    <?php echo $this->fetch('content') ?>
    <footer>フッター</footer>
</body>
</html>

app/View/Sample/index.ctp

<h1>sample page</h1>
<p><?php echo $text ?></p>

ブラウザで見ると

f:id:myhateno:20180529113559p:plain

使用するレイアウトを変更する

コントローラかビューから、$this->layout = 'レイアウト名'で変更できます。

<?php
// コントローラから
public function index() {
    $this->layout = 'sample';
}

// ビューファイルから
$this->layout = 'sample';