- バックアップ一覧
- 差分 を表示
- 現在との差分 を表示
- ソース を表示
- 会議室予約システム/スパイラル3 へ行く。
- 1 (2015-10-24 (土) 05:11:01)
- 2 (2015-10-24 (土) 08:49:58)
- 3 (2015-10-24 (土) 09:28:53)
スパイラル3ではログインを可能にする。
企画書 †
- カレンダー画面はだれでも表示できる。
- 制御パネルの右側にログインへのリンクがあり、これをクリックすることでログイン画面へと遷移する。
- ユーザ名とパスワードを入力してログインする。
- ログインに成功すると、そのユーザでログインした状態になり、ブラウザを終了するまでの間はログインが継続する。
- ログインすると、ログアウトできるようになる。
- 管理者でログインすると「管理」画面へ遷移できる。
要求分析 †
ユースケース図 †
ユースケース記述の作成 †
ログインページを表示する †
- 能動アクター：ユーザ
- 受動アクター：なし
- メインフロー
- ユーザはログインのリンクをクリックしログインページを表示させる。
- データベース管理者とログイン管理者が生成される。
- ログインページが表示される。
- 例外フロー
- 例外は発生しない。
ログインする †
- 能動アクター：ユーザ
- 受動アクター：データベース
- メインフロー：
- ユーザはユーザ名とパスワードを入力しログインボタンを押す。
- ログインボタンが押されたことがログイン管理者に通知される。
- ログイン管理者はユーザ名とパスワードを取り出し、データベース管理者に渡してログイン処理を行う。
- ログインの結果がデータベースからログイン管理者へ通知される。
- ログイン管理者は結果をチェックし、ログインに成功していた場合はクッキーを設定してカレンダー画面に戻る。
- ログインに失敗していた場合はアラートを表示する。
- 例外フロー：
- データベースエラーが発生した場合はアラートを表示する。
ログアウトする †
- 能動アクター：ユーザ
- 受動アクター：なし
- メインフロー：
- ユーザはログアウトのリンクをクリックする。
- ログアウトページがロードされ、データベース管理者とログイン管理者が生成される。
- ログイン管理者へログアウトが通知される。
- ログアウト処理が行われカレンダー画面に戻る。
- 例外フロー：
- 例外は発生しない。
管理画面を開く †
- 能動アクター：管理ユーザ
- 受動アクター：データベース
- メインフロー：
- 管理ユーザは管理画面を開く。
- ログイン管理者に管理者でログインしているかどうかをチェックする。
- ユーザ管理者はデータベース管理者にユーザリストを要求する。
- データベース管理者はデータベースからユーザリストを取り出しユーザ管理者に渡す。
- ユーザ管理者はユーザリストを更新する。
- 例外フロー：
- 管理者でログインしていない場合はカレンダー画面に戻る。
- データベースアクセスにおいてエラーが発生した場合は、その旨のアラートを表示し、処理を中断する。
シナリオの作成 †
省略。
システム分析 †
オブジェクトの抽出 †
初期シーケンス図の作成 †
- ログインページを開く
- ログインする
- ログアウトする
- 管理ページを開く
初期クラス図の作成 †
設計 †
詳細シーケンス図の作成 †
- ログインページを開く
- ログインする
- ログアウトする
- 管理ページを開く
詳細クラス図の作成 †
実装 †
PHPコード †
doLogin.php †
<?php
// ログインする
// un: ユーザ名
// pw: パスワード
// 戻り値：
// result: 'ok' or 'ng'
// user_name: ユーザ名
try {
$pdo = new PDO("mysql:host=mysql514.db.sakura.ne.jp; dbname=forcreate_fuchida; charset=utf8", "forcreate", "junior2015");
$q = "select password,level from users where name=:name";
$s = $pdo->prepare($q);
$sa = array(":name" => $_POST['un']);
$s->execute($sa);
if ($s->rowCount() != 1) {
print json_encode(array("result" => "ng"));
} else {
$r = $s->fetch();
if ($r['password'] == $_POST['pw']) {
print json_encode(array("result" => "ok", "user_name" => $_POST['un'],"user_level"=>$r['level']));
} else {
print json_encode(array("result" => "ng"));
}
}
} catch (PDOException $e) {
print json_encode(array("msg" => $e->getMessage()));
}
$pdo = null;
HTMLコード †
index.html †
<!DOCTYPE html>
<html>
<head>
<title>会議室予約システムSP3</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="js/libs/jquery/jquery.js"></script>
<script type="text/javascript" src="js/libs/jquery-cookie/jquery.cookie.js"></script>
<script type="text/javascript" src="js/DBManager.js"></script>
<script type="text/javascript" src="js/SystemManager.js"></script>
<script type="text/javascript" src="js/CalendarManager.js"></script>
<script type="text/javascript" src="js/ControlPanel.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link type="text/css" rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="title"><h1>会議室予約システムSP3</h1></div>
<div id="control_panel">
<input id="year" type="text" size="5"/>年
<input id="month" type="text" size="3"/>月
会議室：<select id="room">
<option value="全会議室">全会議室</option>
<option value="中会議室">中会議室</option>
</select>
<input type="button" value="表示する" id="bt_disp"/>
<span id="manage">
<span id="login_name"></span>
<a id="login_link" href="login.html">ログイン</a>
<a id="admin_link" href="admin.html">管理</a>
</span>
</div>
<div id="reservation_list">
<table id="reservation_table" border="1">
<tr><th>予約ID</th><th>会議室</th><th>開始日時</th><th>終了日時</th><th>予約者</th><th>予約日</th></tr>
</table>
</div>
</body>
</html>
login.html †
<!DOCTYPE html>
<html>
<head>
<title>ログイン</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="js/libs/jquery/jquery.js"></script>
<script type="text/javascript" src="js/libs/jquery-cookie/jquery.cookie.js"></script>
<script type="text/javascript" src="js/DBManager.js"></script>
<script type="text/javascript" src="js/LoginManager.js"></script>
<script type="text/javascript" src="js/login.js"></script>
</head>
<body>
<h1>会議室予約システム ログイン</h1>
<table>
<tr><td>ユーザ名：</td><td><input type="text" size="20" id="user_name"/></td></tr>
<tr><td>パスワード：</td><td><input type="password" size="20" id="password"/></td></tr>
<tr><td><input type="button" value="ログイン" id="bt_login"/></td></tr>
</table>
</body>
</html>
CSSコード †
index.css †
html,body{
margin:0px;
width:100%;
height:100%;
}
div#title{
padding:8px;
position:absolute;
top:0px;
left:0px;
right:0px;
height:50px;
background-color:#ccccff;
}
div#title h1{
margin:0px;
}
div#control_panel{
padding:8px;
position:absolute;
top:50px;
left:0px;
right:0px;
height:40px;
background-color:#ffffcc;
}
div#reservation_list{
padding:8px;
position:absolute;
top:90px;
left:0px;
right:0px;
bottom:0px;
background-color:#ccffcc;
}
table#reservation_table{
width:100%;
border-collapse: collapse;
background-color:white;
}
#manage{
position:absolute;
right:8px;
}
#admin_link{
visibility: hidden;
}
JavaScriptスケルトンコード †
DBManager.js †
// ログインする
this.doLogin=function(un,pw,lgm){};
LoginManager.js †
// ログイン管理者
var LoginManager = function (dbm) {
// ログインする
this.doLogin = function () {};
// ログイン結果の通知
this.loginResult = function (re) {};
// ログアウトする
this.doLogout = function () {};
// ログイン状態をチェックする
this.checkLogin = function () {};
// 生成
this.dbm = dbm;
$('#bt_login').click($.proxy(this.doLogin, this));
};
