CakePHP 入門 3日目 - よしかわーるど

前回の記事

レイアウトの使用

今回は、レイアウトを使ったページの表示を行います。 index メソッドを修正します。

public function index(){
}

メソッドの中身がない状態にします。そうすると、 http://localhost:8765/hello にレイアウトが反映されます。

レイアウトを作成

デフォルトをで使われているレイアウトは、どこにあるのか src/Template/Layout/default.ctp

スタイルシートの作成

webroot/css/cake.hello.css

body {
  background: #eee;
  color: #999;
  margin: 10px 0;
}

#header {
  font-size: 18pt;
  font-weight: bold;
  margin: 10px;
}
#content {
  background: #fff;
  color: #999;
  padding: 10px 25px 30px 25px;
  font-size: 14pt;
}
#footer {
  text-align: right;
  font-size: 12pt;
  margin: 10pt;
}
h1 {
  color: #aaa;
  font-size: 24pt;
  margin: 20pt 0pt 50pt 0pt;
}

レイアウトの作成

src/Template/Layout/hello.ctp

<!DOCTYPE html>
<html>
  <head>
    <?= $this->Html->charset();  ?>
    <title>
      <?= $this->fetch('title')  ?>
    </title>
    <?php
    echo $this->Html->css('cake.hello');
    echo $this->Html->script('cake.hello');
    echo $this->fetch('meta');
    echo $this->fetch('css');
    echo $this->fetch('script');
     ?>
  </head>
  <body>
    <div id="container">
      <div id="header">
        掲示板アプリ
      </div>
      <div id="content">
        <?= $this->fetch('content') ?>
      </div>
      <div id="footer">
        &copy; 2017 yoshikawataiki.net
      </div>
    </div>
  </body>
</html>

コントローラの修正

/src/Controller/HelloController.php

<?php
namespace App\Controller;

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

  public function index()
  {
  }
}
 ?>

レイアウトの流れ

HTML の中に、<?= ?>タグや<?php ?>が埋め込まれている。これらは、CakePHP で使用している各種のオブジェクトを利用したコードが使われている。

文字コードの設定とヘルパー

<?= $this->Html->charset(); ?> Html は「HtmlHelper」というクラスのインスタンスが収められている。これは「Html ヘルパー」という、ビューの入力を支援する機能を提供するためのもの。

<?= $this->fetch( ブロック名 )

fetch は、CakePHP のに保管されている「ブロック」と呼ばれる値を取り出す役割を果たします。ブロックというのは、表示するページで使われている各種の値やコンテンツなどのこと。title には、コントローラ側で$nameに設定された値がそのまま利用されています。

CSS と JavaScript の設定

<?php
  echo $this->Html->css('cake.hello');
  echo $this->Html->script('cake.hello');
  echo $this->fetch('meta');
  echo $this->fetch('css');
  echo $this->fetch('script');
?>

fetch 以外に 2 種類のメソッドが使われています。 スタイルシートは、$thisの Html にある「css」というメソッドで設定します。 JavaScript のスクリプトファイルのロードは、$this->Html にある「script」というメソッドを使います。ここで利用したいスクリプトファイルの名前を引数に指定すると、「webroot」の「js」内からそのファイルを読み込んで使用します。script('cake.hello');ならば、「js」内にある「cake.hello.js」というファイルを読み込むためにタグを生成します。

残る 3 行は、「fetch」の呼び出しです。ここでは、「meta」「css」「script」というブロックを読込、出力しています。

エレメントの利用

エレメントは、レイアウトの内部にはめ込んで利用するテンプレートです。

まず、「Template」フォルダ内の「Element」フォルダの中に、「Hello」フォルダを作成します。

レイアウトを修正する

「Layout」内の hello.ctp を開き、書き換えます。

set による変数の設定

index メソッド内で、エレメントで利用する変数を用意し、レイアウトテンプレートに渡す用意をしています。テンプレート l に値を渡すためには、「set」というメソッドを用います。 $this->set( 変数名, 値);

set は、このように 2 つの引数を用意します。これで、テンプレート側に第 1 引数の名前で変数が用意され、そこに第 2 引数の値が代入されます。エレメントの利用は、「コントローラからレイアウトへ」「レイアウトからエレメントへ」といった洗の受け渡しが非常に重要になります。コントローラの set メソッドと、レイアウトの element メソッドの使い方をしっかりと理解し、必要な値を必要なところへ適格に渡せるようにします。