初心者用CakePHPでブログサイト②コントローラーからページ(ビュー)を表示

初心者用CakePHPでブログサイト②コントローラーからページ(ビュー)を表示

295 回閲覧されました

みなさんこんにちは、jonioです。

まずはビューを作成せずコントローラーからページを表示する方法を解説します。

コントローラーの作成

まずはコントローラーを作成します。

コントローラーを作成するコマンドは下記になります。

bin/cake bake controller コントローラー名

今回はコントローラー名を「Posts」とします、コマンドは下記になります。

bin/cake bake controller Posts

コマンド入力が終わると「CakePHPのプロジェクト > src > Controller」の中に「PostsController.php」が作成されたのが確認できます。

コントローラーに記述を行いページの表示をします。

コントローラーに記述

PostsControllerの中にindexメソッドがあるので下記に変更します。

public function index()
{
  echo "デモで表示";
}

ページにアクセス

コントローラーにビューの内容を書いてページにアクセスする時のURLは下記になります。

localhost:8888/プロジェクト名/コントローラー名/メソッド名

今回はプロジェクト名が「CakeBlog1」でPostsコントローラーのindexメソッドなのでURLは下記になります。

localhost:8888/CakeBlog1/Posts/index

ページにアクセスすると「デモで表示」と表示されます。

なお、indexアクションの時のみコントローラー名を省略していいです。

その場合のURLは下記になります。

localhost:8888/CakeBlog1/Posts

メソッドからページにパラメーターを渡したい時はメソッドを下記にします。

public function view($id = null)
{
  echo $id."view.php";
}

メソッドの引数にパラメーターを設定します。

localhost:8888/CakeBlog1/Posts/view/パラメーター名

パラメーターは今の段階では何でもいいです。

例えば「demo」とすると「localhost:8888/CakeBlog1/Posts/view/demo」にアクセスすると「demoview.php」を表示されます。

ビューファイルを作成して表示

ここまではコントローラーに記述した内容をビューで表示していましたがビューファイルを作成して表示します。

ビューファイルは「CakePHPのプロジェクト > templatesフォルダ」に作成します。

例えばPostコントローラーのindexメソッドに対応したビューファイルを作成する場合はtemplateフルダの下にコントローラー名のPostsフォルダを作りその下にメソッド名のindex.phpを作成します。

index.phpの中には下記の記述をします。

<h1>index.php</h1>

そしてPostsController.phpを一部修正します。

<?php
declare(strict_types=1);

namespace App\Controller;

/**
 * Posts Controller
 *
 * @method \App\Model\Entity\Post[]|\Cake\Datasource\ResultSetInterface paginate($object = null, array $settings = [])
 */
class PostsController extends AppController
{
    public $autoRender = false;         //この行をコメントアウト

    /**
     * Index method
     *
     * @return \Cake\Http\Response|null|void Renders view
     */
    public function index()
    {
        //indexメソッドの中を削除する
    }

13行目をコメントアウトすることでコントローラー名のフォルダに対応したメソッド名のファイルを自動的に表示できるようになります。

「localhost:8888/CakeBlog1/Posts/」(または「localhost:8888/CakeBlog1/Posts/index」)にアクセスすると下記の表示になります。

コントローラーからビューにパラメーターを渡す

postsフォルダの下にview.phpを作成します。

コントローラーのviewメソッドを下記にします。

public function view($id = null)
{
  $this->set(['id' => $id]);
}

3行目ですがパラメーターを渡す時は「setメソッド」を使い引数に連想配列を使います、「id」がkeyで「$id」がvalueです。

valueの$idはviewメソッドの引数と同じにします。

そしてindex.phpを下記にします。

<?= $id>

これで「localhost:8888/CakeBlog1/Posts/view/適当なパラメーター名」にアクセスするとパラメーター名が表示されます。

compact関数

viewメソッドは下記でした。

public function view($id = null)
{
  $this->set(['id' => $id]);
}

3行目のkeyとvalueのidは同じですがこの場合はcompact関数を使ってもよく下記の書き方をします。

public function view($id = null)
{
  $this->set(compact('id'));
}

変数を2つ以上渡す

さっきはコントローラーからビューに渡す変数が1つでしたが2つ以上にする場合は下記4行目のように変数を配列の中(今はidとtitleが入っています)に書きます。

public function view($id = null)
{
  $title = '変数';
  $this->set(compact(['id', 'title']));
}

この時のview.phpは下記になります。

<?= $id ?>
<?= $title ?>

別のビューファイルを表示する

今の状態は例えば「localhost:8888/CakeBlog1/Posts/view」にアクセスするとview.phpが表示されますが他のビューファイルを表示したい場合もあります。

今回はindex.phpを表示してみますがviewメソッドに下記の記述をします。

public function view()
{
  $this->render('/Posts/index');
}

3行目の「render」メソッドで他のファイルを表示できます、「/Posts/index」はtemplatesフォルダの下の階層のパスです。

これで「localhost:8888/CakeBlog1/Posts/view」にアクセスした時にindex.phpの内容が表示されます。

次はデフォルトのレイアウトの表示です。

デフォルトのレイアウト

「localhost:8888/CakeBlog1/Posts/index」にアクセスした時にindex.phpに記述してないはずの下記の赤枠の部分が表示されます。

これはデフォルトのレイアウトが使われています。

「CakePHPのプロジェクト > templates > layout > default.php」がデフォルトのレイアウトになります。

文言を変更して本当にデフォルトのレイアウトなのかの確認をします。

default.phpを下記に変更します。

<?php
/**
 * CakePHP(tm) : Rapid Development Framework (https://cakephp.org)
 * Copyright (c) Cake Software Foundation, Inc. (https://cakefoundation.org)
 *
 * Licensed under The MIT License
 * For full copyright and license information, please see the LICENSE.txt
 * Redistributions of files must retain the above copyright notice.
 *
 * @copyright     Copyright (c) Cake Software Foundation, Inc. (https://cakefoundation.org)
 * @link          https://cakephp.org CakePHP(tm) Project
 * @since         0.10.0
 * @license       https://opensource.org/licenses/mit-license.php MIT License
 * @var \App\View\AppView $this
 */

$cakeDescription = 'CakePHP: the rapid development php framework';
?>
<!DOCTYPE html>
<html>
<head>
    <?= $this->Html->charset() ?>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>
        <?= $cakeDescription ?>:
        <?= $this->fetch('title') ?>
    </title>
    <?= $this->Html->meta('icon') ?>

    <link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">

    <?= $this->Html->css(['normalize.min', 'milligram.min', 'cake']) ?>

    <?= $this->fetch('meta') ?>
    <?= $this->fetch('css') ?>
    <?= $this->fetch('script') ?>
</head>
<body>
    <nav class="top-nav">
        <div class="top-nav-title">
            <a href="<?= $this->Url->build('/') ?>"><span>Cake</span>PHPのデフォルトを確認する</a>   //「PHP」の文言を修正する
        </div>
        <div class="top-nav-links">
            <a target="_blank" rel="noopener" href="https://book.cakephp.org/4/">Documentation</a>
            <a target="_blank" rel="noopener" href="https://api.cakephp.org/4/">API</a>
        </div>
    </nav>
    <main class="main">
        <div class="container">
            <?= $this->Flash->render() ?>
            <?= $this->fetch('content') ?>
        </div>
    </main>
    <footer>
    </footer>
</body>
</html>

変更したのは41行目です。

「localhost:8888/CakeBlog1/Posts/index」にアクセスすると下記に変わります。

ここまでで使ったビューファイルのindex.phptとview.phpはdefault.phpの51行目の部分で表示されています。

デフォルトのレイアウトを無効にする

場合によってはデフォルトのレイアウトを使わない場合もあります。

そんな時はコントローラーに記述を追加します。

Postsコントローラーで先ほど書いたviewメソッドに記述してみます。(ビューはそのままです)

public function view($id = null)
{
  $this->viewBuilder()->disableAutoLayout();         //この行を追加
  $title = '変数';
  $this->set(compact(['id', 'title']));
}

これで「http://localhost:8888/cakephp/CakeBlog1/posts/view/a」にアクセスすると下記の表示になりデフォルトのレイアウトが適用されていないのが確認できます。

自作したレイアウトを使う

デフォルトのレイアウトですが自作したレイアウトを使いたい場合があります。

その場合はこうします。

まずlayoutフォルダの下に任意のphpファイル(test.phpとします)を作成してdefault.phpの中身をコピペします。

そしてPostsコントローラーのviewメソッドを下記に変更します。

public function view($id = null)
{
  $this->viewBuilder()->setLayout('test');      //この行を修正
  $title = '変数';
  $this->set(compact(['id', 'title']));
}

3行目でデフォルトのレイアウトを変更する時は「setLayout」メソッドを使います。

「test」はデフォルトレイアウトのファイル名から「.php」を取った名称です。

これで「http://localhost:8888/cakephp/CakeBlog1/posts/view/a」にアクセスするとtest.phpが反映されているのが確認できます。

全てのビューのレイアウトを変更する

さっきはview.phpだけレイアウトを変更しましたが全てのビューファイルのレイアウトを変更します。

この場合はinitializeメソッドを追加します。

PostsController.phpを下記にします。

//ここから追加
public function initialize(): void{
  parent::initialize();
  $this->viewBuilder()->setLayout('test');
}
//ここまで追加


public function index()
{
    //
}

public function view($id = null)
{
  //$this->viewBuilder()->setLayout('test');を4行目に移動   
  $title = '変数';
  $this->set(compact(['id', 'title']));
}

initializeメソッドですが4行目以外はそのまま書くと思っていいです。

16行目にあったレイアウトを適用する為の記述を4行目に移動します。

これで「http://localhost:8888/cakephp/CakeBlog1/posts/view/a」・「http://localhost:8888/cakephp/CakeBlog1/posts/index」のどちらにアクセスしてもレイアウトにtest.phpが適用されているのが確認できます。

次回の解説

次回の解説はテーブルの作成とテーブルにデータを挿入します。