10.CakePHP演習

期末課題制作の導入編

データベースを利用したWebサービスの設計と実装の開発演習を行う。

期末課題制作の練習を兼ねている。この演習と同様の手順で期末課題の制作も進めることになる。

開発環境 MAMP

データベース MySQL

フレームワーク CakePHP

CakePHPによるWebサービスのUIはHTMLやCSSでデザインされている。関連技術を習得している受講生は自分好みに修正することができる。

カスタマイズ例

人気の言語PythonのWebフレーワークDjangoでもいいかも。

Webアプリケーションフレームワーク(Wikipedia)

フロントエンドとバックエンドのフレーワークがあって、CakePHPはバックエンド。

【2024年版】現役エンジニアがWebフロントエンドのお勧めフレームワークを解説！！

【XのGrok】

CakePHPについて解説＆他のフレームワークと比較

CakePHP

CakePHP は Webアプリケーションフレームワークの一種

フレームワークによる開発ではサービス構築の一連の作業を簡略化して手間を軽減できる

CakePHP はプログラム言語PHPを使用するフレームワークである

PHPの深い知識を必要とせず基本的な使用方法だけで手早くサービスを構築できる

PHPフレームワークにはLaravel、CodeIgnitorなどがある

他の言語ではRuby on Rails(Ruby)、React/Next.js(Javascript)、Django(Python)がなどが有名

ＭＶＣ

システムの設計コンセプト。CakePHPではMVCに基づいてプログラムを3タイプに分けて記述する。

Model データベースのテーブルやレコードへのアクセスを処理する

View システムのUIを扱う。データの表示、入力、修正などで利用者が操作する画面

Controller URLとサービスを関連付けるコード。画面遷移、入力データチェックを処理する

CRUD

データベースのレコードの操作で

Create(追加)

Read (表示)

Update（修正）

Delete（削除）

の４操作をまとめてCRUDと呼ぶ。

bakeコマンド

CakePHPにはCRUDのPHPコードを自動生成するbakeコマンドがある。

bake で自動生成した CRUD のコードを scaffold （足場）と呼ぶ。

scaffoldを元にしてサービスを構築することもできる。

CakePHPの設計方針

CoC Convention over Configuration　規約は設定に勝る

ファイル名
コードの変数名
テーブル名

については CakePHP のルールに従ったものを使う

ルール通りの名前を付けることでシステム設定が不要となる設計方針でできている

CakePHPの命名規約について http://qiita.com/nvtomo1029/items/1147b8796af3d906c3a9

課題１／３

CakePHPのCMSチュートリアルの前半を作成する。

CakePHPを以下の手順でインストールする。※CMSチュートリアルとは異なる手順で実施する（公式サイトの手順用資料）

ステップ１a

レポートフォルダのデータベースから演習用のファイルをコピーして使用する。

レポートフォルダ → 小橋一秀 → データベース →

cms3123888.zip

を

temp(T:) > MAMP > htdocs

にコピーする

ステップ１b

T:\mamp\htdocsの cms3123888.zip を右クリックして「すべて展開」を選ぶ

展開先フォルダを T:\MAMP\htdocs に修正

（\cms3123888　を削除）

削除後に「展開」を押す

ファイル数と容量が大きいので展開が完了するまでしばらく待つ。

ステップ１c

展開してできたフォルダの番号を学籍番号に修正する

ステップ2a 実習室PCは作業済み

PHPの設定ファイル php.ini を編集し国際化対応モジュール　intl　を有効にする。（intl は internationalization）

VS Code を開く（スタート → code と入力）または（Windowsキー＋Ｑから検索窓に code と入力）

メニュー　File→Open File から

T:\MAMP\conf\php8.3.1\php.ini

を開いてphp.ini の688行目を編集

;extension=intl

先頭（左端）の「 ; 」だけを１文字削除してファイルを保存する。

698行目に次を追記する

extension=php_sodium.dll

ステップ2b 実習室PCは作業済み

既にmampからWebサーバ(Apache)を起動していたら再起動（PHPの設定変更を有効化するため）

ステップ3a

Webサービス用データベースを作成する

mamp から Apache と MySQL を起動

データベース「cms学籍番号」を新規作成

※データベース名に空白など余分な文字が入らないように注意。照合順序はデフォルトの utf8_general_ci のままでOK

ステップ3b

phpMyAdminのSQLタブから以下のテーブル定義SQLとサンプルデータ追加SQLを実行する。

CREATE TABLE users (

id INT AUTO_INCREMENT PRIMARY KEY,

email VARCHAR(255) NOT NULL,

password VARCHAR(255) NOT NULL,

created DATETIME,

modified DATETIME

);

CREATE TABLE articles (

id INT AUTO_INCREMENT PRIMARY KEY,

user_id INT NOT NULL,

title VARCHAR(255) NOT NULL,

slug VARCHAR(191) NOT NULL,

body TEXT,

published BOOLEAN DEFAULT FALSE,

created DATETIME,

modified DATETIME,

UNIQUE KEY (slug),

FOREIGN KEY user_key (user_id) REFERENCES users(id)

) CHARSET=utf8mb4;

CREATE TABLE tags (

id INT AUTO_INCREMENT PRIMARY KEY,

title VARCHAR(191),

created DATETIME,

modified DATETIME,

UNIQUE KEY (title)

) CHARSET=utf8mb4;

CREATE TABLE articles_tags (

article_id INT NOT NULL,

tag_id INT NOT NULL,

PRIMARY KEY (article_id, tag_id),

FOREIGN KEY tag_key(tag_id) REFERENCES tags(id),

FOREIGN KEY article_key(article_id) REFERENCES articles(id)

);

INSERT INTO users (email, password, created, modified)

VALUES

('cakephp@example.com', 'secret', NOW(), NOW());

INSERT INTO articles (user_id, title, slug, body, published, created, modified)

VALUES

(1, 'First Post', 'first-post', 'This is the first post.', 1, now(), now());

課題提出

デザイナビューを利用してテーブルと参照制約の様子をスクリーンショットに記録する。

課題２／３

ステップ4a

vscode のメニューから作業フォルダを設定する

File→ Open Folder → T:\MAMP\htdocs\cms3123888

ステップ4b

configフォルダを開く

ステップ4c

データベース接続設定ファイルapp_local.phpの47、48，50行を編集

config/app_local.php

設定状況を確認する。

ブラウザで以下のURLを開く。

http://localhost/cms3124888/

全て緑マークになっていればＯＫ

ステップ5

【コード開発経験者・実力者向け】

CMSチュートリアルに従ってPHPのファイルをいくつか作成する

作業済みコード　作業を完了した例

templateのコードはPHPとHTMLが混在

【時短バージョン・授業用】

省略手順１で行う

ウインドウズキーを押して「cmd」でコマンドプロンプトを検索して起動

コマンドプロンプトが開く。以下のコマンドを入力する

補助機能

Tabキーファイルやフォルダ名を補完入力

上下矢印キーコマンド入力履歴

cd mamp\htdocs\cms3124888

bin\cake bake all articles

コマンド入力の様子

正常に実行完了した状態(旧版）

省略手順１ここまで

【コード開発経験者・実力者向け】

授業ではスキップする

・「最初のモデルの作成」から終わりまで作業する。

ここではCakePHPのMVCのPHPコードを作成しながら機能を確認している。

以下の2つのPHPファイルを作成する。

src/Model/Table/ArticlesTable.php

src/Model/Entity/Article.php

・「Articles コントローラーの作成」の最初から「記事一覧のテンプレート作成」まで進める。

以下の2つのPHPファイルを作成する。

src/Controller/ArticlesController.php

templates/Articles/index.php

同様に以下の作業が続く

view アクションの作成
view テンプレートの作成
記事の追加
add テンプレートの作成
シンプルなスラグ生成の追加
edit アクションの追加
edit テンプレートの作成
Articles の検証ルールの更新
delete アクションの追加

ここまでスキップ

ステップ6a

省略手順２　こちらを授業で進める

省略手順１でbakeコマンドによるarticlesテーブルのMVCを自動生成済みである。

ところがarticles用のコードに不足はないにもかかわらず、チュートリアル通りにURLから記事(articles)を一覧表示するとエラーになる。

これは、articlesテーブルの記者（user_id）フィールドがテーブルusersを外部参照しているのにusersはまだbakeしていないためである。

usersのMVC を同様にbakeコマンドで生成してから記事の一覧表示をするとエラーにならない。

作業内容

CakePHP の bake コマンドを実行して、Webサービスに最低限必要なCRUDのコードを自動生成する。

以下のbakeコマンドを1行ずつ実行する。

bin\cake bake model users

bin\cake bake controller users

bin\cake bake template users

上の作業では　users テーブルに対応した　model と controller と template を作成している。

CakePHPはシステム設計でMVCモデル（Model View Controller）を採用している。

コードの役割

model データベースのテーブルやレコードの処理

template MVCのViewを処理する。templateにCRUDのUIを実装

controller ルーティング（URLと各コードの紐づけ、ページ間の遷移）やデータ整合性チェック

省略手順2ここまで

課題提出

このURLからサンプル記事（１件入力済み）を表示してスクリーンショットを記録する

http://localhost/cms3124888/articles

例）

Tagsテーブルを bakeしていないので、この段階では　NEW　ARTICLE ボタンや VIEW EDIT などのリンクをクリックしてもはエラーになる。

課題３／３

ステップ7

tags テーブルに対するMVCを作成する

bin\cake bake all tags

例）

「Bake All complete」と表示されていたら成功。失敗した場合は作業手順を見直してやり直す。

テーブル関連のファイルが自動生成されていることをVS Codeの作業フォルダから確認する。

フォルダ　src （ソース）を開く。その中の、

Controller と Modelにコントローラとモデルのコードがある。
ModelフォルダにはEntityとTableフォルダがあり、レコードやテーブルの処理コードがある。

ビューのコードはViewフォルダではなく、templateフォルダにある

テーブルごとにフォルダがあり、CRUD用のコードが存在する。
add.php Createレコード追加
edit.php Updateレコード修正（編集）
index.php Readレコード一覧表示
view.php Readレコード詳細表示

※Deleteレコード削除用のコードはtemplateには存在しない。Controllerで対処する。削除用画面が必要なら自作する。

ステップ8

以下のURLからTagを何種類か入力する。

NEW TAG

ボタンを押すと入力画面に移動できる。

http://localhost/cms3124888/tags

課題提出

タグを一覧表示してスクリーンショットを記録する。

補足

articles_tagsはbakeしなくてよい。
CakePHPの仕様でこの様な多対多の関係を記録する中間テーブルはbakeでMVCを構築しなくても機能するようになっている。

【もっとチュートリアルを試したい受講生は】

記事を適当に書き込んで動作を確認する。

メニューの【NEW Article】のボタンから記事を３件ほど登録する。

http://localhost/cms3124888/articles

※Slugは記事へのリンク用URLに使うキーワード。ここでは適当に設定してよい

記事作成時に新規に記述したタグが自動的にTagsに追加されていることを確認する。

http://localhost/cms3124888/tags

記事やタグの詳細表示・編集・削除について

Action 欄のリンクを利用する

View が詳細表示 CRUDの READ

Edit が編集 CRUDの UPDATE

Delete が削除 CRUDの DELTE

チャレンジ課題

・「view アクションの作成」から作業を再開して最後まで進める。

・「記事へのタグ付けの追加」の”initialize メソッドに以下を追加する ”の作業から最後まで進める。

作業結果のコードを置いておく。コピーして利用してよい。

カスタム検索機能によるタグ検索の動作を確認する。

http://localhost/cms3124888/articles/tagged/funny/cat/gifs

※検索する記事のタグの指定（URLの赤字部分）はここまでに入力した記事に合わせて変更して試す。

CakePHPのCMSチュートリアルは更に続きます。学習は各自に任せます。

・ログイン認証機能　

に興味がある人はチュートリアルを最後まで進めるとよいでしょう。
※チュートリアルの記事が古いので修正※
元は2.0ですが、3.0にバージョンアップが必要です
composer require "cakephp/authentication:^3.0"
参考記事：cakephp5系で認証機能のプラグインがインストールできない

トラブル対応メモ2025：

なぜかcakephpのフットプリントが2GBに膨れ上がっている→原因と対処法

トラブル対応メモ2024：

・phpMyAdminのSQL実行でエラー。CREATE TABLEに失敗した。USERSテーブルが使用中になり状態が変わらない。再起動しても同様。DROP TABLE で削除してもTABLE SPACEが存在するというエラーが出てUSERSテーブルを作成できない。dataフォルダのusers.ibdファイルを削除する必要があった。

・php.ini の編集ミス int ではない。intl

・MySQLが　gone away する。再起動で復旧した。SQL発行してこけた感じ。

・SQL実行時にエラーが起きてテーブルが破損する。データベースを作成し直して対処した。テーブルが使用中になったまま戻らない。再起動でも変わらす。phpMyAdminから削除するには drop tableが必要

トラブル対応メモ2022：

・php ファイル名の打ち間違い Entity は単数形　Tableは複数形

トラブル対応メモ2021：

・cms3119333の展開先がズレている

・vs code で編集したファイルの保存し忘れ

・php ファイル名の打ち間違い

・bakeコマンドを実行する際のパスの区切り文字　バックスラッシュ「\」または「￥」をWindowsでは使用する。

CakePHPのデバッグ

logs/debug.log に出力

use Cake\Log\Log;

Log::debug(serialize($変数));

Page updated

Google Sites

Report abuse