作業例を動画に収録したので参考にする。
以下の画像は2023年度の再試験課題
アンケート作成サービス
のテーブル設計をChatGPTで再設計して機能を追加したものである
概略
管理者が調査書を作成して登録する。調査書には複数の質問が記載されている。調査書自身も複数登録できる
学生は調査書を選択して回答する。ログイン機能は無いので学生と調査書を組み合わせて回答する
質問の回答方法は
数値 / 文章 / はいorいいえ / 単数選択 / 複数選択
を設定できる
テーブルの役割
students / genders 学生の情報を記録(回答者として学生を登録しておく)
surveys 調査を登録
survey_questions 調査の質問を登録
survey_responses 調査の回答者を登録
int_answers / text_answers / yes_no_answers / single_choice_answers / multi_choice_answers 各調査の個別の質問の回答内容を記録
question_options 多肢選択式の質問の選択項目を登録(各質問ごとに登録が必要)
パソコンにXAMPPをダウンロードしてインストールする(夏休み中のメンテナンスでXAMPPは削除された)
解説動画を参照にしてC:\XAMPPフォルダーにインストールする
8/29追記
C107情報自習室の以下の8台にXAMPPをインストールしました。D:\XAMPPにインストールしてあります。
PC01 PC02 PC11 PC12 PC21 PC22 PC31 PC32
cakephpで上記のテーブルのCRUDを作成する。
例) アンケート作成画面
例) アンケート回答画面
第12回の資料を参考に作業する。
次のコード全体をSQLタブにコピペして実行するだけで良い。
データベースの準備
再試験のデータベースを作成する。学番を使う。
データベース名 3123888survey_form
-- 外部キー制約を一時解除
SET FOREIGN_KEY_CHECKS = 0;
-- 性別マスタ
drop table if exists genders;
CREATE TABLE genders (
id INT AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(10) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-- 学生マスタ
drop table if exists students;
CREATE TABLE students (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(20) NOT NULL,
gender_id INT,
birth_date DATE,
FOREIGN KEY (gender_id) REFERENCES genders(id) ON DELETE SET NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-- 調査フォーム
drop table if exists surveys;
CREATE TABLE surveys (
id INT AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(100) NOT NULL,
description TEXT,
start_at DATETIME,
end_at DATETIME
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-- 設問埋込型テーブル
DROP TABLE IF EXISTS survey_questions;
CREATE TABLE survey_questions (
id INT AUTO_INCREMENT PRIMARY KEY,
survey_id INT NOT NULL,
title VARCHAR(255) NOT NULL COMMENT '設問の短いタイトル',
content TEXT NOT NULL COMMENT '設問の詳細本文',
display_order INT NOT NULL DEFAULT 0,
answer_type ENUM('text','int','yes_no','single_choice','multi_choice') NOT NULL,
FOREIGN KEY (survey_id) REFERENCES surveys(id) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-- 選択肢テーブル
drop table if exists question_options;
CREATE TABLE question_options (
id INT AUTO_INCREMENT PRIMARY KEY,
survey_question_id INT NOT NULL,
option_text VARCHAR(255) NOT NULL,
display_order INT NOT NULL DEFAULT 0,
FOREIGN KEY (survey_question_id) REFERENCES survey_questions(id) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-- 回答セッション
drop table if exists survey_responses;
CREATE TABLE survey_responses (
id INT AUTO_INCREMENT PRIMARY KEY,
survey_id INT NOT NULL,
student_id INT NOT NULL,
responded_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (survey_id) REFERENCES surveys(id) ON DELETE CASCADE,
FOREIGN KEY (student_id) REFERENCES students(id) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-- テキスト回答
drop table if exists text_answers;
CREATE TABLE text_answers (
id INT AUTO_INCREMENT PRIMARY KEY,
survey_response_id INT NOT NULL,
survey_question_id INT NOT NULL,
answer TEXT,
FOREIGN KEY (survey_response_id) REFERENCES survey_responses(id) ON DELETE CASCADE,
FOREIGN KEY (survey_question_id) REFERENCES survey_questions(id) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-- 数値回答
drop table if exists int_answers;
CREATE TABLE int_answers (
id INT AUTO_INCREMENT PRIMARY KEY,
survey_response_id INT NOT NULL,
survey_question_id INT NOT NULL,
answer INT,
FOREIGN KEY (survey_response_id) REFERENCES survey_responses(id) ON DELETE CASCADE,
FOREIGN KEY (survey_question_id) REFERENCES survey_questions(id) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-- Yes/No回答
drop table if exists yes_no_answers;
CREATE TABLE yes_no_answers (
id INT AUTO_INCREMENT PRIMARY KEY,
survey_response_id INT NOT NULL,
survey_question_id INT NOT NULL,
answer BOOLEAN,
FOREIGN KEY (survey_response_id) REFERENCES survey_responses(id) ON DELETE CASCADE,
FOREIGN KEY (survey_question_id) REFERENCES survey_questions(id) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-- 単一選択回答
drop table if exists single_choice_answers;
CREATE TABLE single_choice_answers (
id INT AUTO_INCREMENT PRIMARY KEY,
survey_response_id INT NOT NULL,
survey_question_id INT NOT NULL,
question_option_id INT NOT NULL,
UNIQUE KEY uq_sca(survey_response_id, survey_question_id),
FOREIGN KEY (survey_response_id) REFERENCES survey_responses(id) ON DELETE CASCADE,
FOREIGN KEY (survey_question_id) REFERENCES survey_questions(id) ON DELETE CASCADE,
FOREIGN KEY (question_option_id) REFERENCES question_options(id) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-- 複数選択回答
drop table if exists multi_choice_answers;
CREATE TABLE multi_choice_answers (
id INT AUTO_INCREMENT PRIMARY KEY,
survey_response_id INT NOT NULL,
survey_question_id INT NOT NULL,
question_option_id INT NOT NULL,
UNIQUE KEY uq_mca(survey_response_id, survey_question_id, question_option_id),
FOREIGN KEY (survey_response_id) REFERENCES survey_responses(id) ON DELETE CASCADE,
FOREIGN KEY (survey_question_id) REFERENCES survey_questions(id) ON DELETE CASCADE,
FOREIGN KEY (question_option_id) REFERENCES question_options(id) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-- 外部キー制約を元に戻す
SET FOREIGN_KEY_CHECKS = 1;
第13回の資料を参考にしてCakePHPをセットアップする
以下の手順は再試用に抜粋して修正したもの
CakePHPを以下の手順でインストールする。
ステップ1a
レポートフォルダの データベース から演習用のファイルをコピーして使用する。
レポートフォルダ → 小橋 一秀 → データベース →
cms3123888.zip
を
C:\xampp\htdocs
にコピーする。
ステップ1b
C:\xampp\htdocsの cms3123888.zip を右クリックして「すべて展開」を選ぶ
展開先フォルダを C:\xampp\htdocs に修正
「展開」を押す
ステップ1c
展開してできたフォルダの名前を修正する
例) 3123888survey_form
ステップ2
PHPの設定ファイル php.ini を編集し国際化対応モジュール intl を有効にする。
VS Code で C:\xampp\php\php.ini を開いてphp.ini の934行目を編集 (XAMPPをステップ1でインストールしていない場合はD:\xampp\php\php.ini)
;extension=intl
先頭の ;だけを1文字削除してファイルを保存する。
xampp-controlからWebサーバーを再起動すると設定変更が有効になる。
ステップ4a
vs code のメニューから作業フォルダを設定する
File → Open Folder→ C:\xampp\htdocs\3123888survey_form
(XAMPPをステップ1でインストールしていない場合はD:\xampp\htdocs\3123888survey_form)
ステップ4b
データベース接続設定ファイルの編集
configフォルダの中のapp_local.phpを開く
データベースの接続パスワードは無し 'password' => '',
database の設定は「3123888survey_form」自分の学番に修正
ステップ5
XAMPPコントーロールのShellボタンを押してコマンドプロンプト(shell)を開く
以下のコマンドを入力する。
自分の学籍番号に合わせて修正すること。
cd htdocs\3123888survey_form
bin\cake bake all genders
bin\cake bake all students
bin\cake bake model single_choice_answers
bin\cake bake model multi_choice_answers
bin\cake bake model int_answers
bin\cake bake model text_answers
bin\cake bake model yes_no_answers
bin\cake bake model question_options
bin\cake bake model survey_questions
bin\cake bake all surveys
bin\cake bake all survey_responses
vs code でファイルの修正を行う
SurveyResponsesController.php
を編集
6行目に次を挿入
use Cake\Datasource\ConnectionManager;
add()を差し替える
public function add() { // 新しい SurveyResponse エンティティを作成 $surveyResponse = $this->SurveyResponses->newEmptyEntity();SurveysController.php
を編集
add()とedit()を差し替える
public function add() { $survey = $this->Surveys->newEmptyEntity();QuestionOptionsTable.php
を以下に差し替える
<?phpnamespace App\Model\Table;SurveyQuestionsTable.php
を以下に差し替える
<?phpnamespace App\Model\Table;SurveysTable.php
を以下に差し替える
<?phpnamespace App\Model\Table;vs code でファイルの修正を行う
SurveyResponsesフォルダのadd.php
を以下に差し替える
<h1>アンケート回答</h1>Surveysフォルダのadd.php
を以下に差し替える
<h1>アンケート作成</h1>Surveysフォルダのedit.php
を以下に差し替える
<h1>アンケート編集</h1>vs code でファイルを作成する
webrootの中のjsフォルダの中に
survey_form.jsを作成して以下をコピペする
document.addEventListener('DOMContentLoaded', function () { const addQuestionBtn = document.getElementById('add-question'); const questionsContainer = document.getElementById('questions-container'); let questionIndex = questionsContainer.children.length;jsフォルダの中に
survey_response.jsを作成して以下をコピペする
document.addEventListener('DOMContentLoaded', function () { const surveySelect = document.getElementById('survey-select'); const questionsContainer = document.getElementById('questions-container'); const submitBtn = document.getElementById('submit-btn');例
性別を追加する
http://localhost/3123888survey_form/genders/add
アンケートに回答する学生を登録する
http://localhost/3123888survey_form/students/add
アンケートに回答する
http://localhost/3123888survey_form/survey-responses/add
回答を記入して、
送信する直前に画面のスクショ
を撮ること
例
スクショしてますね?
アンケートの回答を送信する
phpMyAdminから回答が記録されたテーブルを1つ選んでレコードを確認する
Webclassから提出する
問1 アンケート回答画面のスクショ
問2 回答テーブルのスクショ
担当者の出勤予定
8月19日 成績発表・フィードバック期間 休暇
8月20日 再試験申し込み日 休暇
8月21日 再試験申し込み日 出勤 質問対応OK
8月22日 再試験申し込み日 出勤 質問対応OK
8月27日 受験者に再試験の内容をWebclassのメッセージで連絡 提出場所もWebclassに設置
9月2日(火) 再試験 課題提出締め切り 出勤 質問対応OK
テーブル設計の修正メモ(次年度用)
現状の設計では回答方式ごとにテーブルを用意しているので回答方式の追加・修正でテーブル設計の修正が必要になる。→メンテナンス性低下
回答結果の集計でもテーブルのJOINが多くなる。→パフォーマンス低下
この2つの問題に対応するための設計修正をChatGPT5で検討した。
A案 テーブルを統合:回答方式を1つに限定する制約+複数回答は複数行に
B案 回答をJSONで記録:複数値は配列化
C案 単一回答と複数回答を分離して統合:テーブル2個に
D案 回答をJSONで全て記録:集計はコードで
設計の修正点メモ(課題ではない)
選択式回答は単一選択と複数選択を共通化
選択必須個数と最大選択数を設定してバリデーションでチェック
複数のテキストや数値などを回答可能にする
再試応用編(課題ではない)
ユーザ認証を付ける。ログイン後に回答期間中のアンケートを選択して回答
回答済みアンケートは提出期限内なら編集を許可する
提出期限後は閲覧のみ許可
アンケートの集計結果をビジュアライズして表示するビューを追加