Fix: apply bootstrap - register

src/web/js/main.js

@@ -62,4 +62,34 @@ function logout() {
 	maestroID = -1;
 	sessionStorage.setItem("maestroID", maestroID);
 	location.href = './../main/index.html';
+}
+
+function showErrorMessage(message, type) {
+	console.log("showErrorMessage : " + message);
+	let messageBox = $("#message_box");
+
+	if(!messageBox)
+		return;
+
+	let alertType = "";
+	switch(type) {
+		case "success":
+		alertType = "alert-success";
+		break;
+		case "warning":
+		alertType = "alert-warning";
+		break;
+		case "info":
+		alertType = "alert-info";
+		break;
+		case "error":
+		default:
+		alertType = "alert-danger";
+	}
+	messageBox.html(
+		'<div class="alert ' + alertType + '" role="alert">'
+			+ '<button type="button" class="close" data-dismiss="alert">&times;</button>'
+			+ message
+		+ '</div>'
+	);
 }

src/web/main/login.html

@@ -41,6 +41,9 @@
 
 	</div>
 
+	<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> -->
+	<script src="../../../resources/bootstrap/js/bootstrap.min.js" rel="stylesheet"></script>
+
 </body>
 
 

src/web/main/register.html

@@ -42,7 +42,6 @@
 
 	</div>
 
-
 	<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> -->
 	<script src="../../../resources/bootstrap/js/bootstrap.min.js" rel="stylesheet"></script>
 

src/web/module/footer.html

@@ -1,4 +1,4 @@
-<footer class="page-footer bg-dark text-white blue py-2">
+<footer class="page-footer bg-dark text-white blue pt-4 pb-2">
     <div class="container text-center text-md-left">
       <div class="row">
 

src/web/module/maestro_section_login.html

@@ -4,6 +4,16 @@ function login() {
 	let name = $("#maestro_name").val();
 	let password = $("#password").val();
 
+	if(name.length === 0) {
+		showErrorMessage("아이디를 입력해 주세요.", "error");
+		$("#maestro_name").focus();
+		return;
+	} else if(password.length === 0) {
+		showErrorMessage("암호를 입력해 주세요.", "error");
+		$("#password").focus();
+		return;
+	}
+
 	sendRequestServer(	//url, sendParams, onSuccess, onFail, isDebugMode);
 		"./../server/maestro/login.php",
 		"maestro_name=" + name + "&password=" + password,
@@ -16,12 +26,9 @@ function login() {
 		},
 
 		(errorMessage, errorCode) => {
-			if($("#error_message").length) {
-				$("#error_message").text(errorMessage);
-			}
-
 			console.log("errorCode : " + errorCode);
 
+			let errorType = "error";
 			switch(errorCode) {
 				case "not_registered_id":
 				$("#maestro_name").val("");
@@ -33,6 +40,8 @@ function login() {
 				$("#password").focus();
 				break;
 			}
+
+			showErrorMessage(errorMessage, errorType);
 		}
 
 	);
@@ -43,17 +52,14 @@ function login() {
 
 <div class="container">
 
-	<div>
-		<span id="error_message">
-		</span>
-	</div>
-
-
 	<div class="px-5 py-4 my-3" style="background-color: #99ccff">
 
 		<h4 class="mb-4">로그인</h4>
 
-		<form class="mx-4">
+		<div id="message_box">
+		</div>
+
+ 		<form class="mx-4">
 			<div class="form-group row">
 				<label for="maestro_name" class="col-sm-2 col-form-label">* 아이디</label>
 				<div class="col-sm-4">
@@ -65,23 +71,41 @@ function login() {
 				<label for="password" class="col-sm-2 col-form-label">* 암호</label>
 				<div class="col-sm-4">
 					<input type="password" class="form-control" id="password" placeholder="Password">
+					<p><br/></p>
+					<button type="button" class="btn btn-primary btn-lg px-5" onClick="login()">로그인</button>
 				</div>
 			</div>
 
-			<button type="submit" class="btn btn-primary btn-lg" onClick="login()">로그인</button>
 		</form>
 	</div>
 
 
-	<div class="px-5 py-4 my-3" style="background-color: #99ccff">
+	<div class="px-5 py-4 my-3" style="background-color: #66ccff">
 
 		<h4 class="mb-4">마에스트로 계정 가입</h4>
 
-		<ul>
+		<div class="row justify-content-center mb-3">
-			<li>1만원 : 학생 20명</li>
+			<div class="col-4">
-			<li>2만원 : 학생 30명</li>
+				<h5>마에스트로 관리 기능</h5>
-			<li>3만원 : 학생 100명</li>
+				<ul>
-		</ul>
+					<li>학생 등록 및 삭제</li>
+					<li>학생 정보 수정</li>
+					<li>앱 활성화 / 비활성화</li>
+					<li class="d-none">랭킹</li>
+					<li class="d-none">기록</li>
+		 		</ul>
+		 	</div>
+
+			<div class="col-4">
+				<h5>계정 등록 비용 (금액 / 1년)</h5>
+				<ul>
+					<li>1만원 : 학생 20명</li>
+					<li>2만원 : 학생 30명</li>
+					<li>3만원 : 학생 100명</li>
+				</ul>
+
+			</div>
+		</div>
 
 		<p><a class="btn btn-primary btn-block btn-lg" role="button" href="./../main/register.html">마에스트로 가입</a>
 

src/web/module/maestro_section_register.html

@@ -1,30 +1,13 @@
 <style>
 
-.login {
+.nav-tabs li.disabled a {
-	background-color: #ff0000;
+    pointer-events: none;
-	padding: 20px;
-}
-
-.register {
-	background-color: #0000ff;
-	padding: 20px;
-}
-
-
-#page-tabs ul li {
-	/*width: 341px;*/
-	list-style: none;
-	color: #dddddd;
-	float: left;
-	font-size: 1.3em;
-	line-height: 60px;
-	vertical-align: middle;
-	text-align: center;
 }
 
 </style>
 
 
+
 <script type="text/javascript">
 
 let maestroName = "";
@@ -36,14 +19,19 @@ let accountType = 0;
 let selectedAccountTypeValue = -1;
 let selectedAccountTypeText = "";
 
-let tab1, tab2, tab3;
+let tabs = new Array();
+let tabContents = new Array();
 
 let accountValidator = new AccountValidator();
 
 $(document).ready(function() {
-	tab1 = $("#page-tabs li").filter(":eq(0)");
+	tabs.push($("#input-info"));
-	tab2 = $("#page-tabs li").filter(":eq(1)");
+	tabs.push($("#check-info"));
-	tab3 = $("#page-tabs li").filter(":eq(2)");
+	tabs.push($("#registered-account"));
+
+	tabContents.push($("#input"));
+	tabContents.push($("#check"));
+	tabContents.push($("#registered"));
 });
 
 function checkMaestroID() {
@@ -60,7 +48,11 @@ function checkMaestroID() {
 
 		(jsonData) => {
 			isAvailableID = true;
-			$("#error_message").text(maestroName + " : 생성 가능한 마에스트로 계정 이름입니다.");
+			let message = maestroName + " : 새로 등록할 수 있는 마에스트로 아이디입니다.";
+			showErrorMessage(message, "success");
+
+			$("#id_ckeck_help").text("");
+			$("#password").focus();
 		},
 
 		(errorMessage, errorCode) => {
@@ -72,81 +64,112 @@ function checkMaestroID() {
 }
 
 function onErrorMaestroID(message) {
-	if($("#error_message").length) {
+	showErrorMessage(message, "error");
-		$("#error_message").text(message);
-	}
 
 	$("#maestro_name").val("");
 	$("#maestro_name").focus();
 }
 
 function onErrorMaestroPW(message) {
-	if($("#error_message").length) {
+	showErrorMessage(message, "error");
-		$("#error_message").text(message);
-	}
 
 	$("#password").val("");
 	$("#password").focus();
 }
 
 function checkData() {
-	if(!isAvailableID) {
+	maestroName = $("#maestro_name").val();
-		$("#error_message").text("아이디 중복 확인을 해 주세요.");
+	if(maestroName.length === 0) {
+		showErrorMessage("아이디를 입력해 주세요.", "error");
+		$("#maestro_name").focus();
+		return;
+	}else if(!isAvailableID) {
+		onErrorMaestroID("아이디 중복 확인을 해 주세요.", "error");
 		$("#check_id").focus();
 		return;
 	}
 
 	password = $("#password").val();
-	if(!accountValidator.isValidMaestroPW(password)) {
+	if(password.length === 0) {
+		showErrorMessage("암호를 입력해 주세요.", "error");
+		$("#password").focus();
+		return;
+	} else if(!accountValidator.isValidMaestroPW(password)) {
 		onErrorMaestroPW(accountValidator.messageForInvalidMaestroPW(password));
 		return;
 	}
-	// if(password.length === 0) {
-	// 	$("#error_message").text("패스워드를 입력해 주세요.");
-	// 	$("#password").focus();
-	// 	return;
-	// }
 
 	email = $("#email").val();
 	if(email.length === 0) {
-		$("#error_message").text("이메일을 입력해 주세요.");
+		showErrorMessage("이메일을 입력해 주세요.", "error");
 		$("#email").focus();
 		return;
 	}
 
-	selectedAccountTypeValue = $("#account_type option:selected").val();
+	selectedAccountTypeValue = $("#account_type").val();
-	selectedAccountTypeText = $("#account_type option:selected").text();
+	// selectedAccountTypeText = $("#account_type option:selected").text();
 	console.log(selectedAccountTypeValue);
-	console.log(selectedAccountTypeText);
+	// console.log(selectedAccountTypeText);
 
 	let isCheckAcceptClauses = $("#check_accept_clauses").is(":checked");
 	if(!isCheckAcceptClauses) {
-		$("#error_message").text("약관을 읽고, 동의 체크 버튼을 눌러 주세요.");
+		showErrorMessage("약관을 읽고, 위에 있는 체크 버튼을 눌러 주세요.", "error");
 		$("#check_accept_clauses").focus();
 		return;
 	}
 
-	$(".maestro_name").append(maestro_name);
+	let playerCount = "명";
-	$(".password").append(password);
+	let price = "0원";
-	$(".email").append(email);
+	switch(Number(selectedAccountTypeValue)) {
-	$(".account_type").append(selectedAccountTypeText);
+		case 1:
-	$(".price_account").append(selectedAccountTypeText);
+		playerCount = "20명";
+		price = "1만원";
+		break;
 
-	$("#error_message").text("");
+		case 2:
+		playerCount = "50명";
+		price = "2만원";
+		break;
+
+		case 3:
+		playerCount = "100명";
+		price = "3만원";
+		break;
+	}
+
+	$(".maestro_name_data").text(maestroName);
+	$(".password_data").text(password);
+	$(".email_data").text(email);
+	$(".player_count").text(playerCount);
+	$(".price_account").text(price);
 
 	$("#input_data").css("display", "none");
 	$("#register_account").css("display", "block");
 
-	tab1.removeClass("activated");
+	tabs[0].removeClass("text-primary active show");
-	tab2.addClass("activated");
+	tabs[0].addClass("text-secondary");
+	tabs[1].removeClass("text-secondary active show");
+	tabs[1].addClass("text-primary active show");
+
+	tabContents[0].removeClass("active");
+	tabContents[0].removeClass("show");
+	tabContents[1].addClass("active");
+	tabContents[1].addClass("show");
 }
 
 function register_account() {
 	$("#register_account").css("display", "none");
 	$("#banking_guide").css("display", "block");
 
-	tab2.removeClass("activated");
+	tabs[1].removeClass("text-primary active show");
-	tab3.addClass("activated");
+	tabs[1].addClass("text-secondary");
+	tabs[2].removeClass("text-secondary active show");
+	tabs[2].addClass("text-primary active show");
+
+	tabContents[1].removeClass("active");
+	tabContents[1].removeClass("show");
+	tabContents[2].addClass("active");
+	tabContents[2].addClass("show");
 
 	sendRequestServer(	//url, sendParams, onSuccess, onFail, isDebugMode);
 		"./../server/maestro/add_maestro.php",
@@ -160,7 +183,7 @@ function register_account() {
 			isAvailableID = false;
 
 			if($("#error_message").length) {
-				$("#error_message").text(errorMessage);
+				showErrorMessage(errorMessage, "error");
 			}
 
 			$("#maestro_name").val("");
@@ -172,38 +195,26 @@ function register_account() {
 
 $('#myTab a').on('click', function (e) {
   e.preventDefault()
-  $(this).tab('show')
+  // $(this).tab('show')
 })
 
 </script>
 
 
 
-<style>
-
-/*
-.nav-tabs li.disabled a {
-    pointer-events: none;
-}
-*/
-
-</style>
-
-
-
 <div class="container">
 
 	<ul class="nav nav-tabs" id="myTab" role="tablist">
-		<li class="nav-item">
+		<li class="nav-item disabled">
-			<a class="nav-link active" id="input-info" data-toggle="tab" href="#input" role="tab" aria-controls="input" aria-selected="true">마에스트로 계정 신청</a>
+			<a class="nav-link text-primary active" id="input-info" data-toggle="tab" href="#input" role="tab" aria-controls="input" aria-selected="true">마에스트로 계정 신청</a>
 		</li>
 
 		<li class="nav-item disabled">
-			<a class="nav-link" id="check-info" data-toggle="tab" href="#check" role="tab" aria-controls="check" aria-selected="false">신청 정보 확인</a>
+			<a class="nav-link text-secondary" id="check-info" data-toggle="tab" href="#check" role="tab" aria-controls="check" aria-selected="false">신청 정보 확인</a>
 		</li>
 
 		<li class="nav-item disabled">
-			<a class="nav-link" id="registered-account" data-toggle="tab" href="#registered" role="tab" aria-controls="registered" aria-selected="false">신청 완료</a>
+			<a class="nav-link text-secondary" id="registered-account" data-toggle="tab" href="#registered" role="tab" aria-controls="registered" aria-selected="false">신청 완료</a>
 		</li>
 	</ul>	<!-- 탭 -->
 
@@ -216,6 +227,9 @@ $('#myTab a').on('click', function (e) {
 
 				<h4 class="mb-4">마에스트로 계정 정보 입력</h4>
 
+				<div id="message_box">
+				</div>
+
 				<form class="mx-4">
 					<div class="form-group row">
 						<label for="maestro_name" class="col-sm-2 col-form-label">* 아이디</label>
@@ -223,8 +237,9 @@ $('#myTab a').on('click', function (e) {
 							<input type="text" class="form-control" id="maestro_name" placeholder="아이디 입력">
 							<small class="form-text text-muted">4~16 글자. 영문, 숫자만 사용 가능합니다.</small>
 						</div>
-						<div class="col-sm-2">
+						<div class="col-sm-6">
-							<input type="button" class="form-control btn btn-warning" value="중복 체크" onClick="checkMaestroID()">
+							<input type="button" id="id_ckeck" class="btn btn-warning" value="중복 체크" onClick="checkMaestroID()">
+							<small id="id_ckeck_help" class="form-text text-muted">아이디 입력 후, [중복 체크] 버튼을 눌러주세요.</small>
 						</div>
 					</div>
 
@@ -247,10 +262,11 @@ $('#myTab a').on('click', function (e) {
 						<label for="account_type" class="col-sm-2 col-form-label">* 학생 수</label>
 						<div class="col-sm-4">
 							<select id="account_type" class="form-control">
-								<option selected>20명 (1만원 / 1년)</option>
+								<option value="1" selected>20명 (1만원)</option>
-								<option>50명 (2만원 / 1년)</option>
+								<option value="2">50명 (2만원)</option>
-								<option>100명 (3만원 / 1년)</option>
+								<option value="3">100명 (3만원)</option>
 							</select>
+							<small class="form-text text-muted">계정 활성화 날짜로부터 1년동안 유효합니다.</small>
 						</div>
 					</div>
 
@@ -259,7 +275,7 @@ $('#myTab a').on('click', function (e) {
 						<label class="form-check-label" for="check_accept_clauses">아래 주요 약관을 읽었으며, 모든 내용에 동의합니다.</label>
 					</div>
 
-					<button type="submit" class="btn btn-primary btn-block btn-lg" onClick="checkData()">등록 신청</button>
+					<button type="button" class="btn btn-primary btn-block btn-lg" onClick="checkData()">등록 신청</button>
 				</form>
 
 			</div>
@@ -290,15 +306,15 @@ $('#myTab a').on('click', function (e) {
 			<div class="px-5 py-4 my-3" style="background-color: #66ccff">
 				<h4>신청 정보 확인</h4>
 
-				마에스트로 아이디 : <span class="maestro_name"></span><br/>
+				마에스트로 아이디 : <span class="maestro_name_data"></span><br/>
-				암호 : <span class="password"></span><br/>
+				암호 : <span class="password_data"></span><br/>
-				이메일 : <span class="email"></span><br/>
+				이메일 : <span class="email_data"></span><br/>
-				학생 수 : <span class="account_type"></span><br/>
+				학생 수 : <span class="player_count"></span><br/>
 
 		 		<div>
 					위의 내용이 모두 맞는지 확인해주세요.
 					아래의 등록 신청 버튼을 누르면, 입력하신 이메일 주소로도 입금 내용을 보내드립니다.
-					신청후에 <span class="price_account"></span>원을 송금해주세요.
+					신청후에 <span class="price_account"></span>을 송금해주세요.
 				</div>
 
 			<br/>
@@ -319,21 +335,21 @@ $('#myTab a').on('click', function (e) {
 
 				<h4>신청 완료</h4>
 
-				<p>마에스트로 아이디 <span class="maestro_name">????</span> 가 신청되었습니다.</p>
+				<p>마에스트로 아이디 <span class="maestro_name_data">????</span> 가 신청되었습니다.</p>
 
 				<h5>입금 계좌</h5>
 				<div>
 					카카오뱅크 : 9999-999999<br/>
 					계좌 이름 : 박지상<br/>
-					금액 : <span class="price_account"></span>원
+					금액 : <span class="price_account"></span>
-					<div>보내는 사람 이름 : 요청하신 마에스트로 아이디 <span class="maestro_name"></span>로 입력해주세요.</div>
+					<div>보내는 사람 이름 : 요청하신 마에스트로 아이디 <span class="maestro_name_data"></span>로 입력해주세요.</div>
 					<div class="tip">보내는 사람 이름을 마에스트로 아이디로 해주실 경우, 가장 빠르게 계정을 활성화 해드릴 수 있습니다.</div>
 				</div>
 
 				<br/>
 
 				<div>
-					방금 <span class="email"></span> 이메일로 입금 안내 내용을 보내드렸습니다.
+					방금 <span class="email_data"></span> 이메일로 입금 안내 내용을 보내드렸습니다.
 				</div>
 
 			</div>

src/web/server/maestro/add_maestro.php

@@ -19,16 +19,16 @@ if(!is_numeric($enterCode)) {
 */
 
 
-$maestroID = hasMaestroName($maestro_name);
+$maestroID = has_maestro_name($maestro_name);
 if($maestroID !== null) {
 	set_error_message($maestro_name." : 이미 등록된 마에스트로 계정입니다.");
 	send_result_fail();
 	exit;
 }
 
-addMaestro($maestro_name, $password, $email, $account_type);
+add_maestro($maestro_name, $password, $email, $account_type);
 
-$maestroID = hasMaestroName($maestro_name);
+$maestroID = has_maestro_name($maestro_name);
 if($maestroID === null) {
 	set_error_message($maestro_name." : 알 수 없는 이유로 마에스트로 계정 등록이 취소되었습니다.");
 	send_result_fail();
@@ -41,7 +41,7 @@ exit;
 
 
 
-function hasMaestroName($maestroName) {
+function has_maestro_name($maestroName) {
 	global $db_conn;
 
 	$query = "
@@ -60,11 +60,11 @@ function hasMaestroName($maestroName) {
 	return $maestroID;
 }
 
-function addMaestro($maestro_name, $password, $email, $account_type) {
+function add_maestro($maestro_name, $password, $email, $account_type) {
 	global $db_conn;
 
 	$query = "
-		INSERT INTO moty_maestro (Name, Password, Email, AccountType, ActivateStatus, UserCount, AcceptClausesDateTime, MaestroTestID)
+		INSERT INTO moty_maestro (Name, Password, Email, AccountType, ActivateStatus, PlayerCount, AcceptClausesDateTime, MaestroTestID)
 		VALUES (?, PASSWORD(?), ?, ?, 0, 0, NOW(), -1)";
 	$stmt = $db_conn->prepare($query);
 	$stmt->bind_param("sssi", $maestro_name, $password, $email, $account_type);