Friction River Software

  • お問い合わせ

CakePHP5入門【CakePHP5応用編③】プロジェクト作成

Ａ子

今回は「CakePHP」のプロジェクトを作成して、Webアプリケーションとしての体裁を整えていくよ

Ｃ菜

やるです～

まずは「プロジェクト名」を決めないと…ですよね～？

Ａ子

掲示板アプリなんだから「bbsapp」で良いんじゃない？

Ｃ菜

めっちゃ適当ですけど、異存はありませんよ～

とりあえず「MATE端末」を開いておきますね～

Ａ子

前に経験済みだから（CakePHP5基礎編①を参照）さくっとやっちゃいましょう

cd html[Enter]
composer create-project --prefer-dist cakephp/app bbsapp[Enter]

…で、いったん止まったら「Y」を入力して[Enter]キーを押す…っと

↓

Ｃ菜

このあと、「bbsapp/config」ディレクトリ内にある「app.php」と「app_local.php」を修正するです～

「app_local.php」に記述するデータベース名は、もちろん（前回作った）「bbsdb」ですね～

Ａ子

・「app.php」の52行目、53行目、285行目
・「app_local.php」の47行目、48行目、50行目

…だったよね？
（CakePHP5基礎編①を参照）



Ｃ菜

続けて「MVC」全てをコマンドで作っちゃいましょう～
（CakePHP5基礎編⑤を参照）

cd bbsapp[Enter]
bin/cake bake all posts[Enter]

これで投稿テーブル（posts）に関する「MVC」が自動生成されたはずです～

↓

Ａ子

「logs」テーブルのほうも同じようにやっちゃう？

Ｂ美

あ、ちょっと口を挟むけど…

やるなら「bake all」ではなく「bake model」だけにしておいたほうが良いと思うわよ
（だってViewビューやControllerコントローラーは不要だし…）

Ｃ菜

了解です～

bin/cake bake model logs[Enter]

を実行です～

↓

Ａ子

ここまでの内容を一度ブラウザで確認しておこう

URLには「localhost/bbsapp」を入れてっと…

Ｃ菜

エラーは出ていないみたいですね～

それではURLとして「localhost/bbsapp/posts」を入力してみるです～

Ａ子

データが全然入ってないから、ちょっと分かりにくいね

「NEW POST」をクリックすると…

Ｃ菜

相変わらず、すごいですよね～
（まだ何もプログラムコードを打ち込んでいないのに…）

あ、何か適当なテストデータを入れてみますか～？

Ｂ美

3～4件くらいのテストデータを入れておけば、画面レイアウトの設計をするときにイメージしやすいと思うわよ

別にリリース時には削除しちゃえば良いんだし…

Ｃ菜

えっと適当に三件ほど入力してみましたけど～
（削除フラグの値は「0」で…）

一覧には「本文」が表示されてないですね～

Ｂ美

「View」をクリックすれば、きちんと入力されてるのが分かると思うけどね

Ｃ菜

あ、たしかに～

Ａ子

ねぇ、それよりも「localhost/bbsapp」というURLだけで、「posts」のページを表示できるようにしたいんだけど…

Ｂ美

もちろん可能よ

「bbsapp/config」ディレクトリ内に「routes.php」ってファイルがあるから開いてみて

Ｂ美

その中の58行目をコピーして、すぐ下に貼り付けます
（その58行目の先頭には「//」を入れて、コメントアウトしてね）

そうしたら、今コピペした59行目を次のように書き換えてちょうだい

$builder->connect('/', ['controller' => 'Posts', 'action' => 'index']);

↓

Ａ子

書き換えてから上書き保存して、ブラウザで確認してみたよ

なんというか、めっちゃ簡単ね（苦笑）

Ｂ美

でしょ？

このあたりのお手軽さが私の好みに合ってるのよね
（ほかの「Webフレームワーク」の中には、もっと面倒くさいやつもあったりするから…（苦笑））

Ｃ菜

あ、フレームワークという言葉で思い出しましたけど、「CSSフレームワーク」の「Bulma」を適用してないです～

Ａ子

そういえば…

えーっと、たしか「templates/layout」ディレクトリの中にある「default.php」だったよね？

Ｂ美

そのファイル（default.php）の30行目を削除して、代わりに下記の一文を記述してね

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">

↓

Ｃ菜

変更しましたけど、なんだかおかしくなっちゃいましたよ～

Ａ子

これって、CSSが全く反映されてないんじゃないの？

Ｂ美

その通り！
だって、さっきの「default.php」の中のbodyタグの中を見てみてよ

「class」指定が「cake.css」ファイルのままじゃん

Ａ子

助けて！
Ｂ美先生

Ｂ美

仕方ないなぁ、のび太君は（苦笑）
それじゃ「<body>」から「</body>」の間に下記を入力してね

<div class="hero is-info is-bold">
  <div class="hero-body">
    <div class="container"><h1 class="title">画像投稿掲示板</h1></div>
  </div>
</div>
<main>
  <?= $this->Flash->render() ?>
  <?= $this->fetch('content') ?>
</main>
<footer class="footer">
  <div class="container">
    <div class="content has-text-centered">
      Copyright©2025 ふりくしょんりばー<br />All Rights Reserved.<br />Ver.0.5.0
    </div>
  </div>
</footer>

面倒くさければ、コピペでもOKよ

Ｃ菜

やってみました～

Ａ子

Webページの真ん中部分が変わってないのは、Viewビューファイルである「index.php」を書き換えていないからかー

要するに、ここから試行錯誤していけば良いってことでしょ？

Ｂ美

そういうこと

以前紹介したこちらのサイトを見ながら、デザインしていってね
（クリックすると別ウィンドウで開きます）

Ａ子

あ、それよりさぁ
下の画像の赤丸部分って、defineを使って「定数化」したほうが良いんじゃないの？

特にバージョンなんかは頻繁に書き換えると思うんだけど…

Ｂ美

おぉ、まじか！

Ａ子の口からそんな言葉が出るなんて…
（ちょっと感動（笑））

Ａ子

なんかディスってない？（怒）

それでどこに「define」を書けば良いのよ？

Ｂ美

「bbsapp/config」ディレクトリ内に新たなファイルを作るの
（ファイル名はなんでもいいんだけど、私はいつも「const.php」にしているわ）

その内容は下記の通り

<?php
//ユーザ定義定数
define("APPLICATION_NAME", "画像投稿掲示板");

//著作権情報
define("COPYRIGHT", "ふりくしょんりばー");
define("NENGOU", "2025");
define("VERSION", "0.5.0");

//この記述は必須
return [];

注意点としては、末尾に必ず「return [];」を記述しなければいけない…ってことくらいね

Ｂ美

次に同じ「bbsapp/config」ディレクトリ内の「bootstrap.php」を開いてね
（さっきの「const.php」をロードするためよ）

その中の84行目と85行目の間に次の一文を挿入してちょうだい
Configure::load('const', 'default');

これで、このWebアプリを利用するとき、自動的に「const.php」が読み込まれるようになる…ってわけ


↓

Ｂ美

あとは、さっきの「default.php」も変更しなきゃね
（定数の値を表示するための記述…ってこと）

<div class="hero is-info is-bold">
  <div class="hero-body">
    <div class="container"><h1 class="title"><?= APPLICATION_NAME ?></h1></div>
  </div>
</div>
<main>
  <?= $this->Flash->render() ?>
  <?= $this->fetch('content') ?>
</main>
<footer class="footer">
  <div class="container">
    <div class="content has-text-centered">
      Copyright©<?= NENGOU ?> <?= COPYRIGHT ?><br />All Rights Reserved.<br />Ver.<?= VERSION ?>
    </div>
  </div>
</footer>

Ｂ美

おっと、そうだった 「default.php」の17行目も変更してね

$cakeDescription = 'CakePHP: the rapid development php framework';
を

$cakeDescription = APPLICATION_NAME;
に！

Ｃ菜

全て完了したので、もう一度ブラウザで確認してみました～

Ａ子

おお！
バッチリじゃん

ついでに「bbsapp/templates/Posts」の中の「index.php」も見ておこう


Ｂ美

あ、ちょっと注意！

下のほうで「paginator」や「pagination」というCSSクラスを指定しているけど、同名のクラスが「Bulma」にもあるのよ
んで、「$this->Paginator()」を使っている関係で、うまくCSSが適用されません（苦笑）

Ａ子

は？
どうすりゃいいのさ

Ｂ美

「paginator」及び「pagination」クラスだけ「cake.css」を適用すれば良い…ってわけ

Ｃ菜

さきほど「default.php」内から削除した30行目を復活させるんですか～？

Ｂ美

いいえ
それをやると「Bulma」と競合（クラス名が衝突）しちゃうのよね

Ａ子

あ、分かったわ

「cake.css」を参考にして、新しいCSSファイルを作成する…とか？

Ｂ美

その通り！
んじゃ、さっそくやってみましょう

「bbsapp/webroot/css」ディレクトリの中に「cake.css」があるから、「paginator」及び「pagination」以外を削除します
このあと、「Bulma」とクラス名が衝突しないように、「paginator-cake」及び「pagination-cake」というクラス名に変更しましょう

できあがったら、それを「paginate.css」というファイル名で保存してね
（赤い下線を引いた箇所が、追加・変更したところよ）


Ｃ菜

このCSSファイルを読み込むために「default.php」も変更するんですよね～？

Ｂ美

もちろんよ
「Bulma」のCDNの下に、以下の一文を追加してね

<?= $this->Html->css(['paginate']) ?>

Ａ子

これでクラス名として「paginator-cake」や「pagination-cake」を指定すればOK…ってことかー

んじゃ、あとはトップ画面のレイアウトについて、色々と試行錯誤してみるよ
（「bbsapp/templates/Posts」の中の「index.php」のことね）

Ｂ美

ふふ
良い姿勢ね

それじゃ次回は、その成果発表ってことにしましょう
楽しみにしてるからね