자세히보기

IT/Programming

[JSP] 수강신청 및 주문 사이트 만들기

COMDORI 2020. 3. 27. 15:00
728x90
반응형

2020/03/04 - [IT/Programming Practice] - [JSP] 상품 구매 페이지 만들기

2020/03/24 - [IT/Programming Practice] - [JSP] 입력받아 출력하기 및 while / for 문 출력 하기

2020/03/25 - [IT/Programming Practice] - [JSP] 간단한 로그인과 라디오버튼을 사용하여 계절 출력 하기

 

 

★ 소스를 복사 하려면 소스코드 오른쪽 상단 "Copy"버튼을 클릭하세요.

▣ 조건

 

▶ 디자인은 아래 소스코드를 활용

<!doctype html>
<html lang="ko">
<head>
<title>main</title>
<meta charset="euc-kr">
<style>
#container {
	width: 940px;
	margin: 0px auto;
	padding: 20px;
	border: 1px solid #bcbcbc;
}

#header {
	padding: 20px;
	margin-bottom: 5px;
	width: 900px;
	height: 10px;
	border: 1px solid #bcbcbc;
	float: right;
	text-align: right;
}

#headermenu {
	padding: 20px;
	margin-bottom: 5px;
	width: 900px;
	height: 50px;
	float: left;
	border: 1px solid #bcbcbc;
}

#content {
	width: 900px;
	padding: 20px;
	margin-bottom: 20px;
	float: right;
	border: 1px solid #bcbcbc;
}

#footer {
	clear: both;
	padding: 20px;
	border: 1px solid #bcbcbc;
}
</style>
</head>
<body>
	<div id="container">
		<!-- header 시작  -->
		<div id="header">
			아이디<input type="text" name="id"> 비밀번호<input type="password"
				name="pwd"> <input type="submit" value="로그인"> <input
				type="button" value="회원가입" onclick="location.href = '#'">
		</div>
		<div id="headermenu">
			<a href="main.jsp">홈</a> | <a href="#"> 개설강좌 </a>
		</div>

		<!-- header 끝  -->
		<!--  content 시작  -->
		<div id="content">내용 </div>
		<!--  content 끝  -->

		<!--  footer 시작   -->
		<div id="footer">
			<p>footer 부분</p>
		</div>
		<!--  footer 끝  -->

	</div>

</body>
</html>

▶ 필요한 페이지는 아래 표를 참고 하여 제작

파일 이름 페이지 설명
header.jsp 로그인 부분
footer.jsp 하단에 표시되는 제작자 이름
menu.jsp 메뉴
intro.jsp 홈화면
apply.jsp 수강신청 페이지
- 로그인 하였을 경우만 페이지에 접근 가능
- 선택한 과목 또는 상품 및 맞는 학년 출력
- 선택한 상품 및 과목의 금액 및 학점을 합산하여 출력
result.jsp 수강신청완료 페이지
template.jsp 레이아웃 페이지
main.jsp 홈페이지 메인 화면
list.jsp 수강 강좌 항목 또는 주문 항목 페이지
- 로그인 후에는 주문이 가능한 체크박스가 표시됨
- 반드시 1과목 또는 1개의 상품을 선택시 주문 가능
join.jsp 회원가입 페이지
logout.jsp 로그아웃 페이지
login_ok.jsp 로그인 처리 페이지(아이디와 비밀번호 검사)

main.jsp-홈화면 및 로그인 전 페이지
join.jsp - 회원가입 페이지
list.jsp - 개설강좌 및 주문 항목 페이지
아이만 입력후 로그인 버튼을 클릭하였을때 나오는 메시지
로그인후 main.jsp
list.jsp-로그인후 수강신청 페에지

 

liust.jsp-반드시 1개의 상품을 선택후 주문이 가능한 메시지
apply.jsp-선택한 주문 및 수강신청 확인 페이지
result.jsp-최종 주문 완료 페이지

 

style.css

@charset "EUC
-KR"
;
#container
{
width: 940px
;
margin: 0px auto
;
padding: 20px
;
border: 1px solid #bcbcbc
;
}
#header
{
padding: 20px
;
margin
-bottom: 5px
;
width: 900px
;
height: 10px
;
border: 1px solid #bcbcbc
;
float: right
;
text
-align: right
;
}
#headermenu
{
padding: 20px
;
margin
-bottom: 5px
;
width: 900px
;
height: 50px
;
float: left
;
border: 1px solid #bcbcbc
;
}
#content
{
width: 900px
;
padding: 20px
;
margin
-bottom: 20px
;
float: right
;
border: 1px solid #bcbcbc
;
}
#footer
{
clear: both
;
padding: 20px
;
border: 1px solid #bcbcbc
;
}

 

template.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<link href="style1.css" type="text/css" rel="stylesheet" />
</head>
<body>
<%
String pagefile=request.getParameter("pagefile");
%>
<div id="container">
<!-- header 시작 -->
<div id="header">
<jsp:include page="login.jsp"/>
</div>
<div id="headermenu"><jsp:include page="menu.jsp"/> </div>
<!-- header 끝 -->
<!-- content 시작 -->
<div id="content">
<jsp:include page ='<%=pagefile+".jsp"%>'/>
</div>
<!-- content 끝 -->
<!-- footer 시작 -->
<div id="footer">
<p><jsp:include page="footer.jsp"></jsp:include></p>
</div>
<!-- footer 끝 -->
</div>
</body>
</html>

main.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<%
request.setCharacterEncoding("euc-kr");
String pagefile=request.getParameter("pagefile");
if(pagefile==null){
pagefile="intro";
}
%>
<jsp:forward page="template.jsp">
<jsp:param name="pagefile" value="<%=pagefile%>"/>
</jsp:forward>
</body>
</html>

intro.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
안녕하세요.
</body>
</html>

join.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
준비중입니다.
</body>
</html>

menu.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<a href ="main.jsp">홈</a> |
<% if (session.getAttribute("id") == null) {%>
<a href="main.jsp?pagefile=list">개설강좌</a>
<% }else {%>
<a href="main.jsp?pagefile=list">수강신청</a>
<% }%>
</body>
</html>

footer.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title></title>
</head>
<body>
copyright by Comdori
</body>
</html>

login.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<%
request.setCharacterEncoding("euc-kr");
if (session.getAttribute("id") == null) {
%>
<form action="login_ok.jsp" method="post">
아이디 <input type="text" name="id"> 비밀번호 <input
type="password" name="pwd"> <input type="submit"
value=" 로그인 ">
<input type="button" value="회원가입" onclick="location.href = 'main.jsp?pagefile=join'">
</form>
<%
} else {
%>
<form action="logout.jsp" method="post">
<%=session.getAttribute("id")%>님 로그인하셨습니다. <input
type="submit" value=" 로그아웃 ">
</form>
<%
}
%>
</body>
</html>

login_ok.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<%
request.setCharacterEncoding("euc-kr");
String id = request.getParameter("id");
String pwd = request.getParameter("pwd");
if (id.equals("test") && pwd.equals("1234"))
session.setAttribute("id", id);
response.sendRedirect("main.jsp");
%>
</body>
</html>

logout.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title></head>
<body>
<% session.invalidate();
response.sendRedirect("main.jsp");
%>
</body>
</html>

list.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>수강</title>
</head>
<script type="text/javascript">
function check() {
var frm = document.getElementById("form");
var found = null;
for (i = 0; i < 4; i++) {
if (frm.item_list[i].checked == true) {
found = frm.item_list[i].value;
}
}
if (found == null) {
alert("하나 이상은 체크해주세요");
return false;
}
}
</script>
<body>
<%
if (session.getAttribute("id") != null) {
%>
<h1>수강신청하기</h1>
<form action="./main.jsp?pagefile=apply" method="post" id="form" onsubmit="return check()">
<table width="100%" border="1">
<tr> <th>강좌코드</th>
<th width="50%">과목명</th>
<th>학년</th>
<th>학점</th>
<th>선택</th>
</tr>
<tr>
<td>IC015-A</td>
<td>웹 시스템 설계 및 개발</td>
<td>3</td>
<td>3</td>
<td><input type="checkbox" value="web" id="item_list" name="item_list"></td>
</tr>
<tr>
<td>IC147-A</td>
<td>자바기반응용프로그래밍</td>
<td>2</td>
<td>3</td>
<td><input type="checkbox" value="java" id="item_list" name="item_list"></td>
</tr>
<tr>
<td>IC136-A</td>
<td>컴퓨터프로그래밍기초</td>
<td>1</td>
<td>3</td>
<td><input type="checkbox" value="comp" id="item_list" name="item_list"></td>
</tr>
<tr>
<td>IC066-A</td>
<td>운영체제</td>
<td>3</td>
<td>3</td>
<td><input type="checkbox" value="OS" id="item_list" name="item_list"></td>
</tr>
</table>
<p align="right"><input type="submit" value="수강신청"></p>
</form>
<%} else
{%>
<h1>개설강좌</h1>
<table width="100%" border="1">
<tr>
<th>강좌코드</th>
<th width="50%">과목명</th>
<th>학년</th>
<th>학점</th>
</tr><tr>
<td>IC015-A</td>
<td>웹 시스템 설계및 개발</td>
<td>3</td>
<td>3</td>
</tr><tr>
<td>IC147-A</td>
<td>자바기반응용프로그래밍</td>
<td>2</td>
<td>3</td>
</tr>
<tr><td>IC136-A</td>
<td>컴퓨터프로그래밍기초</td>
<td>1</td>
<td>3</td>
</tr>
<tr>
<td>IC066-A</td>
<td>운영체제</td>
<td>3</td>
<td>3</td>
</tr></table>
<%}%>
</body>
</html>

apply.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<%request.setCharacterEncoding("euc-kr"); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<% if (session.getAttribute("id") != null) {
String[] checkItem = request.getParameterValues("item_list");
int total = 0;
String item[][]=new String[checkItem.length][3];
for (int i = 0; i < checkItem.length; i++) {
switch (checkItem[i]) {
case "web":
item[i][0]="[웹 시스템 설계 및 개발] ";
item[i][1]="3학점 ";
item[i][2]="3학년 ";
total +=3;
break;
case "java":
item[i][0]="[자바기반응용프로그래밍]";
item[i][1]="3학점 ";
item[i][2]="2학년 ";
total +=3;
break;
case "comp":
item[i][0]="[컴퓨터프로그래밍기초1] ";
item[i][1]="3학점 ";
item[i][2]="1학년 ";
total +=3;
break;
case "OS":
item[i][0]="[운영체제] ";
item[i][1]="3학점";
item[i][2]="3학년";
total +=3;
break;
default:
break;
}
}
%>
<h1
> 수강 신청 </h1
>
<form action
="./main.jsp?pagefile=result" method
="post"
>
<table border
=
1
>
<tr> <th
>번호</th
>
<th colspan
="2"
>선택한 과목 </th
>
<th
>학점</th
>
<th
>학년</th
>
</tr
>
<tr
>
<% for
(int i = 0; i<item.length; i++){%>
<tr
>
<td
><%=i+1 %></td
>
<td colspan
="2"
><%=item[
i][0] %></td
>
<td
><%=item[
i][1] %></td
>
<td
><%=item[
i][2] %></td
>
<%} %>
</tr
>
<tr
>
<th colspan
="4"
>
총 학점 </th
>
<th style="color: red;"
><%=total %></th
>
</tr
>
</table
>
<input type
="submit" value
=
"신청
"
>
</form
>
<%} else
{%>
<script
>
alert(
"로그인되지 않았습니다.");
location.href
=
"main.jsp
"
;
</script
>
<%
}%>
</body
>
</html
>

result.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>정보 </title>
</head>
<body>
<h2> 수강신청 완료 </h2>
</body>
</html>

◈ 소스코드를 보시고 고칠 부분이나 더 좋은 로직이 있다면 코멘트 달아주세요! 

 

 

 

 

컴돌이블로그 | COMDORI BLOG

#JSP #자바스크립트

728x90
반응형
저작자표시 동일조건

'IT > Programming' 카테고리의 다른 글

[Node.js] Puppeteer 퍼피티어 라이브러리  (0) 2022.12.21
[JSP] 음료 주문하기 사이트  (0) 2020.04.09
[JSP] 간단한 로그인과 라디오버튼을 사용하여 계절 출력 하기  (0) 2020.03.25
[JSP] 입력받아 출력하기 및 while / for 문 출력 하기  (0) 2020.03.24
[JSP] 상품 구매 페이지 만들기  (0) 2020.03.04

'IT/Programming'의 다른글

  • 현재글[JSP] 수강신청 및 주문 사이트 만들기

관련글

댓글

티스토리툴바