ページのレイアウトを管理しやすくする(ci4)

CodeIgniter

Codeigniter4よりコンテンツつを表示するページのレイアウトを柔軟に管理する機能が追加されました。

バージョン4のリリース直前ですが、この扱い方法を以下のサンプルを参考に説明します。

サンプルの概要

作成するサンプルページは以下の通りです。

HTMLソースコードは以下の通りです。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>My Layout</title>
</head>
<body>
  <head>
    <h3>title</h3>
  </head>
  <main>
    <p>description</p>
  </main>
  <footer>
    <address>Coptright &copy; example.com All right reserved.</address>
  </footer>
</body>
</html>

枠組みの管理方法

枠組みの管理方法は以下の仕様とします。

  • <header/>タグは動的に再利用できる事
  • <footer/>タグが再利用できる事
  • <main/>タグはアプリケーション本体のコンテンツが表示される事
  • <html/>タグの枠組が簡単に変更できる事
  • 再利用するデータおよび枠組みのデータをそれぞれ纏めて管理しやすいようにする事

手順

ディレクトリの作成

再利用するデータ及び枠組みのデータを管理しやすくする為にそれぞれディレクトリを作成します。

再利用ディレクトリapp/View/elements
枠組みのディレクトリapp/Views/Layouts

メインコンテンツの作成

コントローラーの追加

以下の通りHomeコントローラーを追加します。

<?php namespace App\Controllers;

class Home extends BaseController
{
	public function index()
	{
		return view('home/index', [
      'title' => 'title',
      'description' => 'description',
    ]);
	}
}

ビューの追加

以下のパスにてhomeディレクトリを追加します。

app/Views/home

追加したhomeディレクトリ内にindex.phpを作成し以下の内容に編集します。

<?= $this->extend('App\Views\Layouts\default') ?>

<?= $this->section('content') ?>
    <p><?= $description ?></p>
<?= $this->endSection() ?>

1行目の $this->extend() は、「extend 継承」の意味より枠組みディレクトリの「defaut」のテンプレートを継承する事を意味します。

この $this->entend() の値を変更する事で様々な枠組への変更を簡単に行う事ができます。

$this->section(‘content’) ~ $this->endSection() は、この間のソースは content というセクションに反映させるデータである事が読み取れます。

枠組みの追加

枠組みディレクトリに、default.phpを追加に以下の内容に編集します。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>My Layout</title>
</head>
<body>
  <?= $this->include('elements/header') ?>
  <main><?= $this->renderSection('content') ?></main>
  <?= $this->include('elements/footer') ?>
</body>
</html>

$this->renderSection(‘content’) は、前述の contentのセクションのソースを反映します。

$this->include(‘elements/header’) は、再利用ディレクトリ( app/View/elements)内のheader.phpをインクルードしますが、現時点ではheader.phpを作成していない為、エラーになります。

$this->include(‘elements/footer’)も、 header.phpと同様です。

再利用データの追加

ヘッダーの作成

再利用ディレクトリに、header.php を追加に以下の内容に編集します。

<head>
  <h3><?= $title ?></h3>
</head>

フッターの作成

再利用ディレクトリに、footer.php を追加し以下の内容に編集します。

<footer>
  <address>Coptright &copy; example.com All right reserved.</address>
</footer>

確認

ブラウザか以下のURLへアクセスして表示確認をします。

http://<ホスト名>/home/index

補足

画面に表示されている「title」は、HomeコントローラーからViewへ渡した値が枠組みを通して再利用で作成したheader.phpのテンプレート側へ引き継がれている事が確認できます。

コントローラーからビューへ渡した値は、枠組みでも以下のように使用できます。

app/View/Layouts/default.php
  <?= $this->include('elements/header') ?>
  <!-- 以下を追加 -->
  <h4>タイトル:<?= $title ?></h4>
  <main><?= $this->renderSection('content') ?></main>

最後に

Codeigniter3までテンプレートに枠組みという概念がありませんでしたが、バージョン4より非常に強力な機能として追加されました。

テンプレートに機能はこれ以外にも沢山ありますので、興味がある方は公式ドキュメントを見ると良いでしょう。

CodeIgniter4 User Guide — CodeIgniter4 4.0.0-rc.4 documentation

コメント

タイトルとURLをコピーしました