Embedded Files
期末課題制作の導入編
期末課題制作の導入編
データベースを利用したWebサービスの設計と実装の開発演習を行う。
期末課題制作の練習を兼ねている。この演習と同様の手順で期末課題の制作も進めることになる。
開発環境 XAMPP
データベース MySQL
フレームワーク CakePHP
CakePHPによるWebサービスのUIはHTMLやCSSでデザインされている。関連技術を習得している受講生は自分好みに修正することができる。
人気の言語PythonのWebフレーワークDjangoでもいいかも。
Webアプリケーションフレームワーク(Wikipedia)
フロントエンドとバックエンドのフレーワークがあって、CakePHPはバックエンド。
【XのGrok】
CakePHP
CakePHP
CakePHP は Webアプリケーションフレームワークの一種。
他のWebアプリケーションフレームワークとしては、Ruby on Rails が有名。
ほかにもLaravel、CodeIgnitor など数々のフレームワークが登場している。
フレームワークを利用することでWebサービス構築に必要な一連の作業を簡略化できサービス構築の手間を軽減できる。
CakePHP はプログラム言語PHPを使用するフレームワークである。
PHPの深い知識を必要とせず基本的な使用方法が分かればサービスを構築することができる。
ＭＶＣ
ＭＶＣ
システムの設計コンセプト。CakePHPではMVCに基づいてプログラムを3タイプに分けて記述する。
Model データベースのテーブルやレコードへのアクセスを処理する
View システムのUIを扱う。データの表示、入力、修正などで利用者が操作する画面
Controller URLとサービスを関連付けるコード。画面遷移、入力データチェックを処理する
CRUD
CRUD
データベースのレコードの操作で
Create(追加)
Read (表示)
Update（修正）
Delete（削除）
の４操作をまとめてCRUDと呼ぶ。
bakeコマンド
bakeコマンド
CakePHPにはCRUDのPHPコードを自動生成するbakeコマンドが用意されている。
bake で自動生成した CRUD のコードを scaffold （足場）と呼ぶ。
CakePHPの設計方針
CakePHPの設計方針
CoC Convention over Configuration 設定より規約（を優先する)
ファイルに付ける名前、コード中の変数名、データベースのテーブル名は CakePHP のルールに従ったものを使う。
ルール通りの名前を使用することでシステム設定を省略できる。
CakePHPの命名規約について http://qiita.com/nvtomo1029/items/1147b8796af3d906c3a9
課題１／３
課題１／３
CakePHPのCMSチュートリアルの前半を作成する。
CakePHPを以下の手順でインストールする。※CMSチュートリアルとは異なる手順で実施する（公式サイトの手順用資料）
ステップ１a
レポートフォルダの データベース から演習用のファイルをコピーして使用する。
レポートフォルダ → 小橋 一秀 → データベース →
cms3123888.zip
を
temp(T:) > xampp > htdocs
にコピーする
ステップ１b
T:\xampp\htdocsの cms3123888.zip を右クリックして「すべて展開」を選ぶ
展開先フォルダを T:\xampp\htdocs に修正（\cms3123888 を削除）
「展開」を押す
ファイル数と容量が大きいので展開が完了するまでしばらく待つ。
ステップ１c
展開してできたフォルダの番号を学籍番号に修正する
ステップ2a
PHPの設定ファイル php.ini を編集し国際化対応モジュール intl を有効にする。（intl は internationalization）
VS Code を開く（スタート → code と入力）または（Windowsキー＋Ｑ から 検索窓に code と入力）
メニュー File→Open File から
T:\xampp\php\php.ini
を開いてphp.ini の934行目を編集
;extension=intl
先頭（左端）の「 ; 」だけを１文字削除してファイルを保存する。
(操作 934行までスクロール → 934行目をクリック → homeキー → deleteキー)
ステップ2b
既にxamppからWebサーバ(Apache)を起動していたら再起動（PHPの設定変更を有効化するため）
ステップ3a
Webサービス用データベースを作成する
xampp から Apache と MySQL を起動
データベース「cms学籍番号」を新規作成
※データベース名に空白など余分な文字が入らないように注意。照合順序はデフォルトの utf8mb4_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:\xampp\htdocs\cms3123888
ステップ4b
configフォルダを開く
ステップ4c
データベース接続設定ファイルapp_local.phpの47、48，50行を編集
config/app_local.php
トラブル対応
トラブル対応
データベースが緑マークにならず × になる場合は、第2回の講義資料を利用してMySQLにパスワードを設定してください。
第2回 2.XAMPP(1/2)
phpMyAdminをパスワードを利用するように設定 （２/６）
以上の作業後に
MySQLを再起動（StopしてStart）
ステップ5
【コード開発経験者・実力者向け】
CMSチュートリアルに従ってPHPのファイルをいくつか作成する
作業済みコード 作業を完了した例
templateのコードはPHPとHTMLが混在
【時短バージョン・授業用】
省略手順１で行う
XAMPPコントーロールのShellボタンを押してコマンドプロンプト(shell)を開く
コマンド プロンプト が開く。以下のコマンドを入力する
補助機能
Tabキー ファイルやフォルダ名を補完入力
上下矢印キー コマンド入力履歴
cd htdocs\cms3123888
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 アクションの追加
ここまでスキップ
省略手順２ こちらを授業で進める
省略手順１ではbakeコマンドでarticlesテーブルのMVCを自動生成した
このままチュートリアル通りにURLから記事(articles)を一覧表示するとエラーになる。
articlesテーブルの記者（user_id）の外部参照テーブルusersのMVC を同様にbakeコマンドで生成してから記事の一覧表示をするとエラーにならない。
ステップ6a
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ここまで
例）
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で対処する。削除用画面が必要なら自作する。
課題提出
課題提出
タグを一覧表示してスクリーンショットを記録する。
【もっとチュートリアルを試したい受講生は】
※Slugは記事へのリンク用URLに使うキーワード。ここでは適当に設定してよい
記事作成時に新規に記述したタグが自動的にTagsに追加されていることを確認する。
http://localhost/cms3123888/tags
記事やタグの詳細表示・編集・削除について
Action 欄のリンクを利用する
View が詳細表示 CRUDの READ
Edit が編集 CRUDの UPDATE
Delete が削除 CRUDの DELTE
作業結果のコードを置いておく。コピーして利用してよい。
カスタム検索機能によるタグ検索の動作を確認する。
http://localhost/cms3123888/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