@ CakePHP

エレメント

エレメントは、アプリケーション全体もしくは一部で利用する「共通パーツを定義したテンプレート」です。

エレメントの作成

「src」フォルダ内の「Template」フォルダ内にある「Element」フォルダに「Practices」フォルダを作成し、「header.ctp」「footer.ctp」2つのエレメントを作成します。

cake3app\src\Template\Element\Practices\header.ctp

<div class="header">
  <?= $msg ?>
</div>

cake3app\src\Template\Element\Practices\footer.ctp

<div class="footer">
  <div style="text-decoration:underline">
    Copyright © 20x1 Anonymous.
  </div>
</div>

レイアウトを作成する

エレメントを利用するようにレイアウトテンプレート(practices.ctp)を作成します。

cake3app\src\Template\Layout\practices.ctp

<!DOCTYPE html>
<html lang="ja">

<head>
  <?= $this->Html->charset() ?>
  <title>
    <?= $this->fetch('title') ?>
  </title>
  <?php
  echo $this->Html->css('styles');
  echo $this->Html->script('scripts');
  echo $this->fetch('meta');
  echo $this->fetch('css');
  echo $this->fetch('js');
  ?>
</head>

<body>
  <div id="container">
    <div id="header">
      <?= $this->element('Practices\header', ['msg' => $msg]) ?>
    </div>
    <div id="content">
      <?= $this->fetch('content') ?>
    </div>
    <div id="footer">
      <?= $this->element($footer) ?>
    </div>
  </div>
</body>
</html>

「Template」フォルダ内にある「Element」フォルダに用意したエレメントは、レイアウトテンプレートから次にのように読み込み、表示させることができます。 <?= $this->element('elementname') ?>

「Practices」フォルダーに格納されている header.ctp というエレメントであれば、 <?= $this->element('Practices\header', ['msg' => $msg]) ?>と指定します。

今回は、第2引数に['msg' => $msg]として$msgという変数をエレメントに渡しています。

<?= $this->element($footer) ?>では、$footerという変数をエレメントに渡しています。

コントローラを作成する

コントローラでは、index メソッド内で、エレメントで利用する変数を用意し、レイアウトテンプレートに渡します。

cake3app\src\Controller\PracticesController.php

<?php
namespace App\Controller;

class PracticesController extends AppController
{
    public function initialize()
    {
        $this->name = 'Practices';
        $this->viewBuilder()->autoLayout(true);
        $this->viewBuilder()->Layout('Practices');
    }

    public function index()
    {
        $this->set('msg', 'Practices/index');
        $this->set('footer', 'Practices\footer');
    }
}

set メソッドによる変数の設定

テンプレートに値を渡すには、set()メソッドを使い$this->set('msg', 'Practices/index');とすることで、テンプレートに$msgという変数が用意され(変数が利用できるようになる)、「Practices/index」という値が代入されます。

$this->set('footer', 'Practices\footer');では、エレメントのファイルのパス(Practices\footer)を変数$footerに代入し、テンプレートに渡しています。

以下の URL で、アプリケーションにアクセスできます。

< http://localhost/cake3app/practices/ >