以下の手順に従ってデータベースを作成してCakePHPでWebシステムにする。
作業日: 9月4日(月) F201情報実習室にて作業の解説と対応をします。必要な受験生は来てください。
対応時間 10:00~終日
作業日に来れない受験者は〆切に間に合うように自力で進めてください。
提出〆切: 9月6日(水)
データベースの作成とCakePHPのbake作業はこの動画の通り進めてください。
多少修正して進めても構いません。
チャプターが設定してあるのでここの埋め込み動画ではなくYoutubeから視聴するとよいでしょう。
【重要】アンケートの質問項目や回答の入力は受講生が自分で考えて工夫して下さい。
CakePHPのインストールとセットアップ、MySQL(phpMyadmin)のデータベースの作成は「第10回」とほぼ同じ。
テーブル作成のSQLはデータベースのテーブル をコピペして利用してよい。
bakeの手順は少し異なる。動画とbakeでCRUD作成 を参照。
データの入力方法は動画とWebシステムにデータ入力 を参照。
ビューの定義とリンクの作成については動画と「第14回」とビューの作成 を参照。
TOPページの設定とDebugモードの解除については動画と「第15回」を参照。
おまけ の作業については行っても行わなくても点数に影響しない。
「アンケート」
アンケートを実施して回答を記録する
アンケートの内容と回答データは受験者が考えること
アンケートの回答結果をデータベースで集計して表示する
例としてGoogle Formで作成したアンケートを示します。
この演習ではCakePHPでアンケートフォームを作成します。
アンケートの質問と回答をテーブルに記録する
以下でアンケートとテーブルの関係を示す。
CakePHPで作成したデータ入力フォームをそのまま利用するのでGoogle Formの様な1枚のアンケートフォームになっていない。
回答者・質問・質問割当て・選択肢・回答記録を別々に行う。
回答者の情報を登録するテーブル
回答者にIDを割り当てる
質問を登録する
質問にIDを割り当てる
質問IDと回答者IDを結び付けて記録する
回答者に応じて質問を変えることも可能。
例え話)
1枚の用紙に複数の質問を掲載するアンケートではなく、1つの質問と回答欄があるカードを用意して配布するような状況
質問IDと回答者IDを結び付け、回答IDを割り当てる
回答方式を複数用意して、回答IDと結びつける
つまり、回答IDから質問の内容と回答者が分かるようになっている
ここで、回答内容は各回答テーブルに回答IDと共に記録される
回答用の選択肢をテーブルに登録する。
選択肢にはIDを割り当てる。
この選択肢は全ての質問で共通に使用するものとする。
回答IDと選択肢IDを結び付けて選択結果として記録する。
ここで、1つの回答IDに対して複数の選択肢を結びつけることで複数選択の回答として記録できる。
create table genders (
id int AUTO_INCREMENT PRIMARY KEY,
title varchar(10)
);
create table students (
id int AUTO_INCREMENT PRIMARY KEY,
name varchar(20) not null,
gender_id int,
FOREIGN key (gender_id) REFERENCES genders(id),
birth_date date
);
create table questions (
id int AUTO_INCREMENT PRIMARY KEY,
title text not null
);
create table questions_students (
id int AUTO_INCREMENT PRIMARY KEY,
question_id int not null,
FOREIGN key (question_id) REFERENCES questions(id),
student_id int not null,
FOREIGN key (student_id) REFERENCES students(id)
);
create table text_answers (
id int AUTO_INCREMENT PRIMARY KEY,
questions_student_id int not null,
foreign key (questions_student_id) references questions_students(id),
answer text
);
create table int_answers (
id int AUTO_INCREMENT PRIMARY KEY,
questions_student_id int not null,
foreign key (questions_student_id) references questions_students(id),
answer int
);
create table yes_no_answers (
id int AUTO_INCREMENT PRIMARY KEY,
questions_student_id int not null,
foreign key (questions_student_id) references questions_students(id),
answer boolean
);
create table options (
id int primary key AUTO_INCREMENT,
title varchar(30)
);
create table options_questions_students (
option_id int not null,
foreign key (option_id) references options(id),
questions_student_id int not null,
foreign key (questions_student_id) references questions_students(id),
primary key (option_id,questions_student_id)
);
スタート → cmd と入力して Enterを押す
d:
cd xampp\htdocs\3121999qanda
bin\cake bake model all
bin\cake bake controller all
bin\cake bake template all
質問の登録 http://localhost/3121999qanda/questions
性別の登録 http://localhost/3121999qanda/genders
回答者の登録 http://localhost/3121999qanda/students
質問を回答者に割当て http://localhost/3121999qanda/students
質問と回答者の一覧 http://localhost/3121999qanda/questions-students
記述回答の登録 http://localhost/3121999qanda/text-answers
数値回答の登録 http://localhost/3121999qanda/int-answers
はい・いいえ回答の登録 http://localhost/3121999qanda/yes-no-answers
回答語群の登録 http://localhost/3121999qanda/options
複数選択式回答の登録 http://localhost/3121999qanda/questions-students 回答者を選んで edit する
CREATE VIEW all_lists (a, b, c, d, e, f, g) AS
SELECT `questions`.`title`, `students`.`name`, `genders`.`title`, `text_answers`.`answer`, `int_answers`.`answer`, `yes_no_answers`.`answer`, `options`.`title`
FROM `questions_students`
LEFT JOIN `students` ON `questions_students`.`student_id` = `students`.`id`
LEFT JOIN `genders` ON `students`.`gender_id` = `genders`.`id`
LEFT JOIN `questions` ON `questions_students`.`question_id` = `questions`.`id`
LEFT JOIN `text_answers` ON `text_answers`.`questions_student_id` = `questions_students`.`id`
LEFT JOIN `int_answers` ON `int_answers`.`questions_student_id` = `questions_students`.`id`
LEFT JOIN `yes_no_answers` ON `yes_no_answers`.`questions_student_id` = `questions_students`.`id`
LEFT JOIN `options_questions_students` ON `options_questions_students`.`questions_student_id` = `questions_students`.`id`
LEFT JOIN `options` ON `options_questions_students`.`option_id` = `options`.`id`;
CREATE VIEW count_dep (a, b) AS
SELECT count(*), `options`.`title`
FROM `questions_students`
LEFT JOIN `students` ON `questions_students`.`student_id` = `students`.`id`
LEFT JOIN `genders` ON `students`.`gender_id` = `genders`.`id`
LEFT JOIN `questions` ON `questions_students`.`question_id` = `questions`.`id`
LEFT JOIN `text_answers` ON `text_answers`.`questions_student_id` = `questions_students`.`id`
LEFT JOIN `int_answers` ON `int_answers`.`questions_student_id` = `questions_students`.`id`
LEFT JOIN `yes_no_answers` ON `yes_no_answers`.`questions_student_id` = `questions_students`.`id`
LEFT JOIN `options_questions_students` ON `options_questions_students`.`questions_student_id` = `questions_students`.`id`
LEFT JOIN `options` ON `options_questions_students`.`option_id` = `options`.`id`
group by `options`.`id`;
Webclassの再試課題にスクリーンショットを2点提出する。
TOPページを表示したスクリーンショット(1/2)
※質問リストの表示は狭くなったままでOK
TOPページを表示したスクリーンショット(2/2)
選択リストの高さ調整について
CSSを修正して対応できる。
ファイルの編集無しでブラウザの開発者ツールを利用してCSSを設定するとよい。
Google Chromeの場合:
Ctrl + Shift + I で開発者ツールを表示
Elements から select タグを見つける
Styles(CSS) のselectタグの + ボタンからID #questions-ids を追加
select#questions-ids に height: auto; を記入