Webシステムプログラミング設計書2015

Webシステムプログラミングb
サンプル課題設計書
2015年12月18日（金）
Webシステムプログラミング講義資料

TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES
到達目標
 到達目標
 Webシステムを設計し、開発できること
 最終成果物：学生生活で利用できるWebシステム
 授業計画
 第10講：Webシステムの基本設計 (1)
 第11講：Webシステムの基本設計 (2)
 第12講：WebシステムのDB設計
 第13講：WebシステムのUI設計
 第14講：Webシステムの処理
 第15講：まとめ、平常試験 (2)
2

システム設計の流れ
 DB設計はシステム設計の一部
3
業務分析
要件定義
基本設計
論理設計
詳細設計
今の業務はどうなっているのか
何をしたいのか
どんなシステムにすべきか
どのように実現するか
方法を明確にする
今回はこの部分が中心

各工程での成果物
 成果物
4
業務分析
要件定義
基本設計
論理設計
詳細設計
要件定義書
基本設計書
ER図、テーブル定義表
画面遷移図
詳細設計書

サンプル課題
 タイトル：ゼミ室の蔵書管理システム
 業務分析
 ゼミ室には教員の専門分野に関する書籍が豊富にある
 研究を進める際に、ゼミ生はゼミ室で書籍を読んだり、
必要に応じて教員から許可を得て書籍を借りたりする
 教員は誰に何の書籍を貸しているかは管理できていない
 要件定義
 ゼミ室の蔵書と貸し出し記録を管理したい
 教員はゼミ生の名簿と蔵書を管理したい
 教員、またはゼミ生は貸し出し記録を付けた
 書籍の貸し出し冊数は5冊まで、期限は2週間とする 5

基本設計（1）
 機能
 ログイン機能
 ユーザのID、パスワードでログイン
 ユーザ管理機能
 ユーザの追加・更新・削除が可能
 ユーザ毎に権限を付与し、利用できる機能を制限
 蔵書登録機能
 書籍の追加・更新・削除が可能
 書籍のタイトル、カテゴリ、出版社、発行年などを管理
 条件を指定した蔵書検索が可能
 貸し出し機能
 ユーザへの書籍貸し出しを台帳に記録
 ユーザへの貸し出し冊数の上限と期限を設ける
6

レポー基本設計（2）
 データ構造
 ユーザ情報
 ユーザID、パスワード、名前、権限（管理者 or 利用者）
 ユーザ情報を変更できるのは管理者のみ
 蔵書情報
 書籍のタイトル、カテゴリ、出版社、発行年
 貸出台帳
 書籍と貸し出したユーザの紐付け
 貸出日、返却予定日、貸出状態（貸出OK or 貸出中）
7

画面設計（1）
 画面設計図：蔵書リスト画面
8
書籍の新規登録
各レコードの操作が可能書籍リストを表形式で表示
※図作成には、リアルタイムコラボレーションツール「Cacoo」を利用

画面設計（2）
 画面設計図：蔵書新規登録画面
 すべての項目を入力し、「登録」ボタンで登録可
 タイトル、出版社：テキストボックス
 カテゴリ、発行年：選択ボックス
9

画面設計（3）
 画面設計図：蔵書貸出画面
 「貸出可」より蔵書の貸出が可能
 「貸出書籍」より自分の書籍貸出状況を確認可
10
貸出操作が可能

ER図
 以下の5テーブルで構成される
 users：利用者テーブル, books：蔵書テーブル
 categories：カテゴリテーブル, publishers：出版社テーブル
 circulations：貸出テーブル
11
1対多多対1

DBの正規化補足説明（1）
 正規化されていないテーブル
12
ID タイトルカテゴリ出版社発行年
1 Webエンジニアの教科書理工系シーアンドアール研究所 2015
2 たのしいRuby 理工系ソフトバンククリエイ
ティブ
2010
3 嫌われる勇気心理学ダイヤモンド社 2013
4 PHP+MySQLマスターブッ
ク
理工系マイナビ 2014
5 量子力学で生命の謎を解く物理学ソフトバンククリエイ
ティブ
2015
繰り返しが発生するフィールドは正規化
表．蔵書テーブル

 正規化したテーブル
13
ID タイトルカテゴリID 出版社ID 発行年
1 Webエンジニアの教科書 1 1 2015
2 たのしいRuby 1 2 2010
3 嫌われる勇気 2 3 2013
4 PHP+MySQLマスターブック 1 4 2014
5 量子力学で生命の謎を解く 3 2 2015
ID 名前
1 理工系
2 心理学
3 物理学
ID 名前
1 シーアンドアール研究所
2 ソフトバンククリエイティブ
3 ダイヤモンド社
4 マイナビ
表．蔵書テーブル
表．カテゴリテーブル
表．出版社テーブル

テーブル定義表（1）
フィールド名型 Not
null
Key Auto
increment
Default 意味
id INT(11) YES 主キー YES NULL 利用者ID
name VARCHAR
(40)
NULL 名前
role INT(1) NULL 権限
（0：学生、1：教員）
14
表．利用者テーブル：users

null
Key Auto
increment
Default 意味
id INT(11) YES 主キー YES NULL 蔵書ID
title VARCHAR
(40)
NULL 書籍名
category_id INT(11) YES 外部
キー
NULL カテゴリID
publisher_id INT(11) YES 外部
キー
NULL 出版社ID
year INT(4) NULL 発行年
15
表．蔵書テーブル：books

null
Key Auto
increment
Default 意味
id INT(11) YES 主キー YES NULL カテゴリID
name VARCHAR
(20)
NULL カテゴリ名
16
表．カテゴリテーブル：categories

null
Key Auto
increment
Default 意味
id INT(11) YES 主キー YES NULL 出版社ID
name VARCHAR
(40)
NULL 出版社名
17
表．出版社テーブル：publishers

null
Key Auto
increment
Default 意味
id INT(11) YES 主キー YES NULL 貸出ID
user_id INT(11) YES 外部
キー
NULL 利用者ID
book_id INT(11) YES 外部
キー
NULL 蔵書ID
issue_date DATE NULL 貸出日
return_date DATE NULL 返却予定日
status INT(1) NULL 貸出状態
（0：貸出OK、
1：貸出中）
18
表．貸出テーブル：circulations

 正規化が必要な理由
 データの矛盾を防ぐ
 フィールドの内容に変更があった場合の修正漏れを防ぐ
 例：出版社名に変更があった場合
 DB処理の効率化
 フィールドの内容に変更があった場合の修正は1箇所のみでOK
 同じ項目（例：同じ出版社）のレコードを全検索する場合の高速化
 カテゴリの再編時の手間を削減する
 例：理工系と物理学は理系に統合する場合
⇒カテゴリテーブルの修正のみでOK
 必ず第三正規形にすること
19

DB設計とSQL文の対応（1）
 蔵書テーブル（books）のSQL文
20
CREATE TABLE `books` (
ìd` int(11) NOT NULL AUTO_INCREMENT,
`title` varchar(40) DEFAULT NULL,
`category_id` int(11) DEFAULT NULL,
`publisher_id` int(11) DEFAULT NULL,
`year` int(4) DEFAULT NULL,
PRIMARY KEY (ìd`),
CONSTRAINT `category_id_fk` FOREIGN KEY (`category_id`)
REFERENCES `categories` (ìd`) ON DELETE CASCADE
ON UPDATE CASCADE,
CONSTRAINT `publiser_id_fk` FOREIGN KEY (`publisher_id`)
REFERENCES `publishers` (ìd`) ON DELETE CASCADE
ON UPDATE CASCADE
) ;
主キー
外部キー制約
※ CASCADE：親テーブルの更新
に合わせて更新
外部キー

DB設計とSQL文の対応（2）
 カテゴリテーブル（books）のSQL文
 出版社テーブル（publishers）のSQL文
21
CREATE TABLE `categories` (
`name` varchar(40) DEFAULT NULL,
PRIMARY KEY (`id`)
);
CREATE TABLE `publishers` (
`name` varchar(40) DEFAULT NULL,
PRIMARY KEY (`id`)
);

画面遷移図
 業務フローに従い画面遷移とその条件を図示する
 構成要素
 画面ID／画面名
 画面を一意に識別する識別子（画面一覧やレイアウトの照合用）
 遷移矢線
 画面の順序関係を記述。交錯しないように配置
 ボタン名（イベント）
 画面遷移を起こすトリガーを記述
 ボタン名を記述しておけば、押下時に画面遷移することが分かる
 アクション（データの発生やメール配信など）
 画面遷移に伴って起動される動作を記述
 データ登録やメール配信のアクションを記述 22

レポート作成例：画面遷移図
 ゼミ室蔵書管理システムの画面遷移図
23

開発について
 想定される構成例
 画面のフォーム：HTML, JS
 DB登録処理：PHP
 DB：MySQL
 進め方
 複数人で相談して役割分担（画面、DB、DB登録処理など）
 最低限できて欲しい機能：蔵書リスト画面、蔵書貸出画面
 できなくてもよい機能：
 ログイン機能：勉強にはなるが、セッション管理が必要
 ユーザ管理機能：ユーザはDBから直接追加でもよい
 開発期間：2週間程度が目安
24

Webシステムプログラミング設計書2015

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (11)

Similaire à Webシステムプログラミング設計書2015

Similaire à Webシステムプログラミング設計書2015 (20)

Plus de 義広河野

Plus de 義広河野 (20)