#03 View を使ってみる

画面表示まわりの処理のことをMVCでは「ビュー(View)」と呼ぶ。
前回、Controller 内に画面表示のHTMLも記述したが、今回は View を作成していく。

ビューファイルの設置場所

「ビュー処理を行うファイル」と「表示するテンプレート」で設置場所が異なる。

「ビュー処理を行うファイル」は、プロジェクトのディレクトリ「chococake」内、「src」の中の「View」ディレクトリ。
「View」ディレクトリ内にある、「AppView.php」ファイルは、ビュー処理を行うファイル。

「表示するテンプレート」は、プロジェクトのディレクトリ「chococake」内、「src」の中の「Template」ディレクトリ。アプリケーションごとにフォルダを用意し、必要なテンプレートを作成していく。

テンプレートの拡張子は .ctp (CakePHP Template) とすることになっている。

ビューテンプレートを作成

前回作成した「Test」アプリケーションの TestController.php に用意した index アクションのビューテンプレートを作成する。

■場所:
\htdocs\chococake\src\Template\Test
■ファイル名
index.ctp

<h1>Index</h1>
<p>このページはindexです</p>

また、前回作成した「TestController.php」の「index」アクションを以下のように変更し、空の状態にする。

public function index()
{
  
}

解説

以下の URL にアクセスすると用意していたテンプレートでレイアウトされる。

http://chococake.localhost/test/index/

CakePHP では、特定のアクションにアクセスされると、「Template」ディレクトリ内の、アプリケーション名のディレクトリ内のアクション名がついているテンプレートを自動的に読み込むようになっている。

例えば今回の場合、アプリケーション名が「Test」なので「Template」ディレクトリ内の「Test」ディレクトリを参照する。さらにアクション名が「index」なので「Test」ディレクトリ内の「index.ctp」を参照するといった具合。

テンプレートファイルに記述していない部分、上部のメニューバーや右下の CakePHP のアイコンなども表示される。これは「\src\Template\Layout」内の default.ctp に設定されているため。

default.ctp にページ全体のレイアウトを記述し、各アクションに用意されているテンプレートをはめ込んでページが作成されるようになっている。

Controller から View へ値を渡す

Controller クラスの「set」メソッドを使用して、View へ値を渡すことができる。

$this->set( 変数名, 値 );

第1引数:変数名
第2引数:値
というように指定する。

ビューテンプレート側では以下のようにして変数を出力する。

<?= 変数名 ?>

「TestController.php」、「index.ctp」をそれぞれ以下のように変更する。

■TestController.php

namespace App\Controller;

use App\Controller\AppController;

/**
* 
*/
class TestController extends AppController
{
  public function index()
  {
    $this->set('variable', '変数の受け渡しテスト');
  }
}

■index.ctp

<h1>Index</h1>
<p>このページはindexです</p>
<?= $variable ?>

解説

以下の URL にアクセスすると Controller 側で設定した変数が View 側に受け渡され表示されている。

http://chococake.localhost/test/index/

Controller のアクション index 内で set メソッドで変数「variable」に「変数の受け渡しテスト」という値を設定。

$this->set('variable', '変数の受け渡しテスト');

View 側では出力部分を追記。

<?= $variable ?>

data メソッド

CakePHP3 のフォームの送信では、「Request」クラスの「data」というメソッドを利用する。
「Request」クラスはリクエストに関する情報を管理するためのクラス。

data メソッドの引数には、取り出したいフォームの名前を指定する。

$変数 = $this->request->data('フォーム名');

// フォーム名が「testform」の場合
$変数 = $this->request->data('testform');

また、data メソッドは以下のように連想配列としてもOK。

$変数 = $this->request->data['testform'];

フォーム送信の例

フォームの入力画面で入力した値が送信されて表示させる例を作成していく。

「TestController.php」、「index.ctp」をそれぞれ以下のように変更する。

■TestController.php

namespace App\Controller;

use App\Controller\AppController;

/**
* 
*/
class TestController extends AppController
{

  public function index()
  {
    $testvar = $this->request->data('text01');
    if ($testvar !== null) {
      $this->set('variable', $testvar);
    } else {
      $this->set('variable', '何も送信されていません');
    }
  }

}

■index.ctp

<h1>Index</h1>
<p>このページはindexです</p>
<?= $variable ?>

<form method="post" action="/test/index">
  <input type="text" name="text01">
  <input type="submit">
</form>

解説

以下の URL にアクセスする。

http://chococake.localhost/test/index/

フォームの入力欄に何か入力し、「送信」ボタンを押下すると、以下のように入力したテキストが表示される。※「送信したテキスト」と表示されている。

テキスト入力欄の値は以下のコードで取り出すことができるが、フォームが送信されていない場合は「null」となる。

$this->request->data('text01');

それを if で判別し処理を行っている。

// フォームが送信された場合
if ($testvar !== null) {
  $this->set('variable', $testvar);
// フォームが送信されていない場合
} else {
  $this->set('variable', '何も送信されていません');
}

上述のような入力欄の値ではなく、「POSTされているかどうか」で処理を分岐させることも可能。
「Request」クラスの「is」メソッドで判別することが可能。

is メソッドで判別する例は以下。
■TestController.php

namespace App\Controller;

use App\Controller\AppController;

/**
* 
*/
class TestController extends AppController
{

  public function index()
  {
    $testvar = $this->request->data('text01');
    // ここで is メソッドを使用
    if ($this->request->is('post')){
      $this->set('variable', $testvar);
    } else {
      $this->set('variable', '何も送信されていません');
    }
  }
}

クエリー文字列パラメーターを取得する

URLにパラメーターついている場合の、クエリー文字列パラメーターを取得する方法について。

以下のようなURLがある場合にパラメーターの値を取得する。

http://chococake.localhost/test/index?id=1&name=taro

上記クエリー文字列パラメーターでは「id」に「1」、「name」に「taro」という値が格納されている。

以下の方法で取り出すことができる。

$変数 = $this->request->getQuery(キー);

クエリー文字列パラメーターを取得する例

TestController の index メソッドを以下のように変更する。

■TestController.php

<?php
namespace App\Controller;

use App\Controller\AppController;

/**
*
*/
class TestController extends AppController
{

  public function index()
  {
    $id = $this->request->getQuery('id');
    $name = $this->request->getQuery('name');
    $this->set('variable', 'id は ' . $id . ' name は ' . $name);
  }
}

以下URLにアクセスする。

http://chococake.localhost/test/index?id=1&name=taro

ビュー内の変数「variable」にデータが受け渡され、パラメータの値が表示される。

なお、CakePHP のバージョン 3.4.0 以前では getQuery メソッドではなく以下のように記述する。

$変数 = $this->request->query(キー);

CakePHP の一覧