tutorial-2.md

layout	title
default	コントローラーからビューを表示してみよう

---

{{ page.title }}

ビューのレンダリング

• 前章でルーティングの設定が完了しました。

• 本章では、作成したルーティングに対してビューを表示してみましょう。

本章メニュー

• 本章では以下を行います。

  1. コントローラーの作成とビューのレンダリング方法を説明します。

  2. ビュー ( Twig ) の作成と役割の説明を行います。

コントローラーの作成

フォルダの作成

• まずは以下フォルダを作成してください。

1. /src/Eccube/Controller/Tutorial
   • 関連するコントローラーは一つのフォルダにまとめます。
   • 作成方法はそれぞれの環境で異なると思いますので、割愛いたします。
   • 以下の様にディレクトリを作成してください。

---

---

ファイルの作成

• 次にCrudController.phpを作成します。

• TopControllerをコピー、リネームします。

• CrudController.php( 中身はTopController.phpのコピー )

<script src="http://gist-it.appspot.com/https://github.com/EC-CUBE/ec-cube.github.io/blob/master/Source/tutorial_2/CrudController_before.php"></script>

• 下記の様に修正を行います。

<script src="http://gist-it.appspot.com/https://github.com/EC-CUBE/ec-cube.github.io/blob/master/Source/tutorial_2/CrudController_after.php"></script>

ルーティングの確認

• 一度確認のためにブラウザにアクセスしてみましょう。

  1. ブラウザのURLに「http://[ドメイン + インストールディレクトリ]/tutorial/crud」を入力してください。

  2. 次はエラーではなく、以下が表示されているはずです。

---

---

• ルーティングの設定とコントローラーには問題がなさそうです。

ビューの作成

• 以下フォルダにTwigファイルを追加します。

  1. /src/Eccube/Resource/template/default/Tutorial

     • 関係するコントローラーのビューをフォルダ毎にまとめます。
     • 作成方法はそれぞれの環境で異なるため、割愛します。
     • 以下の様にディレクトリを作成してください。

---

---

ファイルの作成

• 次に、crud_top.twigを作成します。

• index.twigをコピー、リネームします。

• crud_top.twig( 中身はindex.twigのコピー )

<script src="http://gist-it.appspot.com/https://github.com/EC-CUBE/ec-cube.github.io/blob/master/Source/tutorial_2/crud_top_before.twig"></script>

• 下記の様に修正を行います。

<script src="http://gist-it.appspot.com/https://github.com/EC-CUBE/ec-cube.github.io/blob/master/Source/tutorial_2/crud_top_after.twig"></script>

コントローラーの修正

• コントローラーで「echo」していた箇所を以下の内容に修正します。

<script src="http://gist-it.appspot.com/https://github.com/EC-CUBE/ec-cube.github.io/blob/master/Source/tutorial_2/CrudController_modified.php"></script>

• コントローラーとメソッドについて簡単な説明を行います。

  1. 引数 : $app
     • $appにはEC-CUBEで用いるあらゆるクラスが格納されています。
     • 正しくはApplication.php/ServiceProviderで設定した内容が、実行時にインスタンス化されて利用できる構造になっています。
     • ここでは詳細に解説は行いませんが、「$app」からいろいろな機能を呼び出してアプリケーションを構築していくとだけ覚えてください。
  2. 名前空間 : use Eccube\Application;
     • 1.で説明した「$app」を利用するためには、クラスのスコープ外に必ず、名前空間を指定しなければなりません。
     • 簡単にいうと、コントローラーに利用するクラスの保管場所を教えてあげるという事です。
     • 名前空間で指定するパスは、使用するクラスによって変わりますが、「/src/Eccube」以下にあるクラスを利用する場合は、「Eccube」からの相対パスを指定してください。(先頭に「\」は必要ありません)
  3. 名前空間 : use Eccube\Controller\AbstractControler;
     • コントローラーの親クラスを上記と同じ理由により設定いたします。
  4. $app->render([表示したいTwigのパス])
     • 「render」にTwigのパスを引数として渡すと、対象のTwigが解析され、htmlに変換されます。
     • 通常はコントローラーのメソッドの戻り値として、renderの戻り値をそのまま「return」すると、変換されたhtmlが返却され、画面が表示されます。
     • 「引数」として指定するパスは「/src/Eccube/Resource/template/」がルートパスとして設定されています。
     • ルートパスはApplication.phpの初期化が終わった時点で設定されます。
     • 管理者側のコントローラーであれば、上記フォルダの「/admin/」が対象、ユーザー画面であれば「/default/」がルートフォルダになります。

表示内容の確認

• 最後に確認のためにブラウザにアクセスしてみましょう。

  1. ブラウザのURLに「http://[ドメイン + インストールディレクトリ]/tutorial/crud」を入力してください。

  2. Twigに記載した内容が表示されます。

     • ヘッダーやフッターが表示されていませんが、現状はこれで正しい状態です。
     • ヘッダーやフッターの表示設定は後で行います。

---

---

本章のまとめ

• 内容量も増えてきたので、章の内容をまとめておきます。
• 本章で以下を行いました。

1. 既存コントローラーをコピーして新しいコントローラーを作成しました。
2. 既存Twigをコピーして新しいTwigを作成しました。
3. コントローラー・Twigともに、関連するフォルダにまとめる事を説明しました。
4. $appは各コントローラーのメソッドの引数として渡され、いろいろな機能が格納されている事を説明しました。
5. renderでTwigをhtmlに変換しメソッドの戻り値とする事で画面が描画される事を説明しました。