ハトネコエ Web がくしゅうちょう

プログラミングやサーバー・Web制作、チームマネジメントなど得た技術のまとめ

cakePHP のトップページは、どこのファイルを見てるの?

前々回 → PHP + cakePHP 導入メモ(Mac) - ハトネコエ Web がくしゅうちょう
前回 → CakePHP is NOT able to connect to the database. を解決する - ハトネコエ Web がくしゅうちょう

このページが表示されるところまでは行きました。
f:id:nekonenene:20160401010512p:plain

でも、これってどうやって構成されているのでしょうか?

cakePHP の基礎でもあるので、確認していきましょう。
なお、cakePHP のバージョンは 3.2.6 です。

プロジェクトフォルダーをルートディレクトリーとした上で以下、説明していきます。

まず、どこを表示するかは /config/routes.php で決まっています。
45行目以降、こう書かれています。

Router::scope('/', function (RouteBuilder $routes) {
    /**
     * Here, we are connecting '/' (base path) to a controller called 'Pages',
     * its action called 'display', and we pass a param to select the view file
     * to use (in this case, src/Template/Pages/home.ctp)...
     */
    $routes->connect('/', ['controller' => 'Pages', 'action' => 'display', 'home']);

['controller' => 'Pages', 'action' => 'display', 'home']
って書いてあるので、
/src/Controller/PagesController.php 内のメソッド display() を通して、
/src/Template/Pages/home.ctp
をトップページとして表示するよ。っていう、そんな感じです。

なので、
http://local.web/the_project_name/pages/home
にアクセスしても全く同じページにつながります。(※"http://local.web/the_project_name/" の部分は個々人で異なります)

今後 cakePHP でWebアプリをいじっていくにあたり、特にデータベース操作、ページ生成をおこなうために必要なコードは
/src 以下に作ったり書き換えたりするので、
そのうち /src/Template/Pages 以下にトップページにしたいテンプレートファイルを作るでしょう。
ファイル名が toppage.ctp だとしたら、先ほどのところを
['controller' => 'Pages', 'action' => 'display', 'toppage']
と書き換えてあげれば大丈夫なわけです。


ところで、 /src/Template/Pages/home.ctp をもっとよく見てみましょう。

まず 21行目

$this->layout = false;

ここの false を 'default' と書き換えてみましょう。
こうなります。
f:id:nekonenene:20160403061620p:plain

上の方に、Pages とか Documentation とか書かれたヘッダーがつきましたね。
これは /src/Template/Layout/default.ctp をレイアウトとして読み込んだためです。

この default.ctp の 52行目

<?= $this->fetch('content') ?>

と書かれている部分に home.ctp がハメ込まれて表示される、という仕組みです。

ためしに先ほどの部分を今度は 'error' と書き換えると
/src/Template/Layout/error.ctp がレイアウトとして読み込まれるように変化したのが確認できることでしょう。
f:id:nekonenene:20160403062141p:plain

とりあえず、この 'error' のレイアウトのままにしておきましょうか。
( false はどのレイアウトも読み込まないという指定ですね)

さて、/src/Template/Pages/home.ctp の話に戻りましょう。
38〜39行目にはこう書かれています。

    <?= $this->Html->css('base.css') ?>
    <?= $this->Html->css('cake.css') ?>

ここで CSS を読み込んでいます。
そのファイルはどこにあるのか?
/webroot/css 内にあります。
/webroot には、他にも js フォルダと img フォルダがあり、リソースファイルはそこに置いていきます。
また、 /webroot ディレクトリに例えば test.html ファイルを置いたら

http://local.web/the_project_name/test.html
でそこにアクセスすることが出来ます。
http://local.web/the_project_name/webroot/test.html でなくていいのです!

なお、これらのフォルダ指定は、
/config/app.php の 44行目以降

        'webroot' => 'webroot',
        'wwwRoot' => WWW_ROOT,
        // 'baseUrl' => env('SCRIPT_NAME'),
        'fullBaseUrl' => false,
        'imageBaseUrl' => 'img/',
        'cssBaseUrl' => 'css/',
        'jsBaseUrl' => 'js/',

で設定されています。

最後に、41行目

<body class="home">

body タグが始まっていますね。
せっかくなので、このすぐ下に1行、てきとうに文章を書いてみましょう。
f:id:nekonenene:20160403064544p:plain

吾輩は猫である。と書かれていますね。
このことで、home.ctp が使われていることが改めて確認できました。