[정보처리산업기사 과정평가형 실기] 지역구의원투표

구현 순서 ( 데이터베이스 👉🏻 서버 👉🏻 프론트 👉🏻 백엔드 )

1) [정보처리산업기사 과정평가형] 실기시험 문제 - 지역구의원투표

2) [정보처리산업기사 과정평가형] 실기 MVC 패턴 구조 / 흐름

3) [정보처리산업기사 과정평가형] 지역구의원투표 - DB 생성하기
4) [정보처리산업기사 과정평가형] 지역구의원투표 - Java / Servlet 생성
5) [정보처리산업기사 과정평가형] 지역구의원투표 - View 화면 만들기
6) [정보처리산업기사 과정평가형] 지역구의원투표 - 데이터 입/출력

✨ Step3. View 화면 만들기 ( JSP 파일 생성)

topmenu.jsp (<header>, <nav>)
footer.jsp (<footer>)
index.jsp (홈으로)
memberList.jsp (후보조회)
voteMember.jsp (투표하기)
voteList.jsp (투표검수조회)
voteResult.jsp (후보자 등수)
style.css
script.js

화면을 보시면 <header>, <nav>, <section>, <footer> 로 나누어져있습니다.

JSP 의 include를 활용하기 위해 topmenu.jsp, footer.jsp, style.css, script.js(유효성체크) 를 생성하겠습니다.

(전체 소스파일은 마지막 포스팅에 업로드 하겠습니다.)

∙topmenu.jsp ( css 파일을 연결 (link) 해줌으로써 topmenu를 include하는 모든 파일에 적용되게 합니다.)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>지역구의원투표</title>
<link rel="stylesheet" href="style.css?ver=1">
</head>
<body>
<header>
	<h1>(과정평가형 정보처리산업기사)지역구의원투표 프로그램 ver 2020-05</h1>
</header>
<nav>
	<ul>
		<li><a href="memberList.do">∙후보조회</a></li>
		<li><a href="voteMember.do">∙투표하기</a></li>
		<li><a href="voteList.do">∙투표검수조회</a></li>
		<li><a href="voteResult.do">∙후보자등수</a></li>
		<li><a href="main.do">∙홈으로</a></li>	
	</ul>
</nav>
</body>
</html>

∙footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<footer>
HRDKOREA Copyright@2015 All rights reserved. Human Resources Development Service of Korea
</footer>
</body>
</html>

∙style.css

@charset "UTF-8";
*{
	margin:0;
	padding:0;	
}
body{
	font-family:gulim;
	font-size:1.2em;
	color:#454545;
	text-align:center;
}
header{
	width:100%;
	height:160px;
	line-height:160px;
	background-color:#7d9caf;
	color:#f1f1f1;
}
nav ul{
	width:100%;
	height:60px;
	line-height:60px;
	background-color:#555f6d;
	color:#f1f1f1;
}
nav ul li{
	font-size:1em;
	list-style:none; /* li 앞에 표시를 제거한다. */
	float:left; 
	padding:0 10px;
}
a{
	text-decoration:none;
	color:#f1f1f1;
}
a:hover{
	background-color:#f1f1f1;
	color:#555f6d;
	border-radius:2em;
}
section{
	position:absolute;
	overflow:auto;
	width:100%;
	height:100%;
	background-color:#e1effa;
}
h2{
	padding:1.6rem;
}
.table{
	display:flex;
	justify-content:center;
	align-items:center;
}
.table table,th,td{
	border:1px solid #454545;
	border-collapse:collapse;
	padding:5px;
}
table{
	width: 500px;
}
td input, select{
	float: left;
	padding: 0.3rem;
}
.btn{
	padding: 0.3rem;
}
.btn:hover{
	cursor: pointer;
}

ul li{
	list-style:none;
	text-align:left;
	padding:0 10px 20px;
}
footer{
	position:fixed;
	bottom:0px;
	width:100%;
	height:30px;
	line-height:30px;
	background-color:#7d9caf;
	color:#f1f1f1;
}

∙script.js (유효성 체크)

function fn_submit(){
		var f = document.frm;	
		
		var v_jumin = f.v_jumin.value;
		if(v_jumin == ""){
			alert("주민번호가 입력되지 않았습니다!");
			f.v_jumin.focus(); return false;
		}
		var jumin = /([0-9]{2}(0[1-9]|1[0-2])(0[1-9]|[1,2][0-9]|3[0,1]))/;
		//주민번호 유효성 검사
		if(!jumin.test(v_jumin) || v_jumin.length <13 || v_jumin.length >13){
			alert("유효하지않은 주민번호 입니다.\n 숫자 13자리로 입력해주세요.");
			f.v_jumin.focus(); return false;
		}
		var v_name = f.v_name.value;
		if(v_name == ""){
			alert("성명이 입력되지 않았습니다!");
			f.v_name.focus(); return false;
		}
		var name = /^[가-힣]+$/; //한글이름 유효성 검사
		if(!name.test(v_name)){
			alert("한글이름으로 입력해주세요.");
			f.v_name.focus(); return false;
		}	
		if(f.m_no.value == ""){
			alert("후보번호가 선택되지 않았습니다!");
			f.m_no.focus(); return false;
		}
		if(f.v_time.value == ""){
			alert("투표시간이 입력되지 않았습니다!");
			f.v_time.focus(); return false;
		}
		if(f.v_time.value.length < 4 || f.v_time.value.length > 4){
			alert("투표시간을 숫자4자 로 입력해주세요! 예)0930");
			f.v_time.focus(); return false;
		}
		if(f.v_area.value == ""){
			alert("투표장소가 입력되지 않았습니다!");
			f.v_area.focus(); return false;
		}
		if(f.v_area.value != "제1투표장" && f.v_area.value != "제2투표장"){
			alert("투표장소를 제1투표장 or 제2투표장 으로 입력해주세요 :D");
			f.v_area.focus(); return false;
		}		
		if(f.v_confirm.value == ""){
			alert("유권자확인이 선택되지 않았습니다!");
			return false;
		}
		f.submit();
	}
function fn_reset(){
	alert("정보를 지우고 처음부터 다시 입력합니다!");
	location="voteMember.jsp";
}

function fn_onload(){
	document.frm.v_jumin.focus();
	document.frm.onload();
}

∙index.jsp (메인)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>main</title>
</head>
<body>
<%@ include file="topmenu.jsp" %>
<section>

<h2>과정평가형 자격 CBQ</h2>

</section>
<%@ include file="footer.jsp" %>
</body>
</html>

∙voteMember.jsp (투표하기 화면)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>voteMember</title>
</head>
<body>
<%@ include file="topmenu.jsp" %>
<section>
<h2>∙ 투표하기 ∙</h2>
<form name="frm" method="post" action="vote.do">
<div class="table">
	<table>
		<tr>
			<th>주민번호</th>
			<td>
			<input type="text" name="v_jumin"> 예 : 8906153154726
			</td>
		</tr>
		<tr>
			<th>성명</th>
			<td>
			<input type="text" name="v_name">
			</td>
		</tr>
		<tr>
			<th>투표번호</th>
			<td>
			<select name="m_no">
				<option></option>
				<option value="1">[1]김후보</option>
				<option value="2">[2]이후보</option>
				<option value="3">[3]박후보</option>
				<option value="4">[4]조후보</option>
				<option value="5">[5]최후보</option>
			</select>		
			</td>
		</tr>
		<tr>
			<th>투표시간</th>
			<td>
			<input type="text" name="v_time" placeholder="예)0930">
			</td>
		</tr>
		<tr>
			<th>투표장소</th>
			<td>
			<input type="text" name="v_area" placeholder="예)제1투표장">
			</td>
		</tr>
		<tr>
			<th>유권자확인</th>
			<td>
			<input style="float:none;" type="radio" name="v_confirm" value="Y">확인 
			<input style="float:none;" type="radio" name="v_confirm" value="N">미확인
			</td>
		</tr>
		<tr>
			<td colspan="2" style="text-align:center">
			<button class="btn" type="submit" onclick="fn_submit();return false;">투표하기</button>
			<button class="btn" type="button" onclick="fn_reset()">다시하기</button>
			</td>
		</tr>
	</table>
</div>
</form>
</section>
<%@ include file="footer.jsp" %>
</body>
<script src="script.js"></script>
</html>

문제에서 화면의 구성요소를 제외한 스타일 (화면의 색, 폰트 등)은 선택 사항이므로 디자인은 최대한 간단하게 구현합니다.

∙memberList.jsp (후보조회)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>memberList</title>
</head>
<body>
<%@ include file="topmenu.jsp" %>
<section>
<h2>∙ 후보조회 ∙</h2>
<div class="table">
	<table style="width:700px;">
		<tr>
			<th>후보번호</th>
			<th>성명</th>
			<th>소속정당</th>
			<th>학력</th>
			<th>주민번호</th>
			<th>지역구</th>
			<th>대표전화</th>
		</tr>
	</table>
</div>
</section>
<%@ include file="footer.jsp" %>
</body>
</html>

∙voteList.jsp (투표검수조회)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>voteList</title>
</head>
<body>
<%@ include file="topmenu.jsp" %>
<section>
<h2>∙ 투표검수조회 ∙</h2>
<div class="table">
	<table style="width:700px;">
		<tr>
			<th>성명</th>
			<th>생년월일</th>
			<th>나이</th>
			<th>성별</th>
			<th>후보번호</th>
			<th>투표시간</th>
			<th>유권자확인</th>
		</tr>
	</table>
</div>
</section>
<%@ include file="footer.jsp" %>
</body>
</html>

∙voteResult.jsp (후보자 등수)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>voteResult</title>
</head>
<body>
<%@ include file="topmenu.jsp" %>
<section>
<h2>∙ 후보자등수 ∙</h2>
<div class="table">
	<table>
		<tr>
			<th>후보번호</th>
			<th>성명</th>
			<th>총투표건수</th>
		</tr>
	</table>
</div>
</section>
<%@ include file="footer.jsp" %>
</body>
</html>

이렇게 View 화면부분을 마무리 하겠습니다 :D

다음시간 (Step4. 백엔드) 에는 데이터를 불러와서 View 화면에 출력될수있게 하는방법을 포스팅하겠습니다 😊

'IT자격증 공부 > 정보처리산업기사 실기' 카테고리의 다른 글

[정보처리산업기사 과정평가형 실기] 지역구의원투표 - 마무리 (0)	2022.04.29
[정보처리산업기사 과정평가형 실기] 지역구의원투표 - 데이터 입/출력 (0)	2022.04.28
[정보처리산업기사 과정평가형 실기] 지역구의원투표 - Java 생성 (1)	2022.04.27
[정보처리산업기사 과정평가형 실기] 지역구의원투표 - DB 생성하기 (0)	2022.04.26
[정보처리산업기사 과정평가형 실기] MVC 패턴 구조 / 흐름 (0)	2022.04.26

Study with yuna🌷

[정보처리산업기사 과정평가형 실기] 지역구의원투표 - View 화면

✨ Step3. View 화면 만들기 ( JSP 파일 생성)

'IT자격증 공부 > 정보처리산업기사 실기' 카테고리의 다른 글

티스토리툴바

[정보처리산업기사 과정평가형 실기] 지역구의원투표 - View 화면

✨ Step3. View 화면 만들기 ( JSP 파일 생성)

'IT자격증 공부 > 정보처리산업기사 실기' 카테고리의 다른 글

관련글

티스토리툴바