[정보처리산업 과정평가형 - 실기]JSP 화면 만들기
- 정보처리산업기사 과정평가형/실기
- 2020. 8. 29.
JSP 화면 만들기
DB 만드는 것을 마쳤다면, 이클립스를 통해 JSP를 만들기 시작합니다.
제가 생각하는 기본틀은 JSP의 INCLUDE를 활용하는 방법으로.
이를 통해 작업시간을 좀 더 줄이는 것에 목표를 가졌습니다.
처음보는 사람은 손이 더 가는데? 라는 의견을 제시할 수 있지만.
시험 도중 갑자기 바꿔야하는 문제에 대해서 유지보수가 쉽다는 점에서.
또는 시험이라는 환경 속에 실수를 최소화 하기 위해 이 방법을 채택하게 되었습니다.
JSP의 include를 활용하기 위해 총 5개의 jsp를 생성하게 되었습니다.
가장 기본틀인 template.jsp
html의 Top 부분인 top.jsp
html의 nav 부분인 nav.jsp
html의 footer 부분인 footer.jsp 입니다.
그리고 각 메뉴마다 바뀔 부분을 담당한 첫번째 페이지
join.jsp 입니다.
WebContent안에 위와 같이 5개의 jsp를 생성하게 됩니다.그리고 아래에는 이처럼 html 작성하듯이 표현하면 됩니다.
top.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
%>
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<title>Hi</title>
</head>
<body>
<center>
<h1>쇼핑몰 회원관리 ver1.0</h1>
</center>
</body>
</html>
nav.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
%>
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<title>Hi</title>
</head>
<body>
<table>
<tr>
<td>회원등록</td>
<td>회원목록 조회/수정</td>
<td>회원매출조회</td>
<td>홈으로</td>
</tr>
</table>
</body>
</html>
footer.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
%>
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<title>Hi</title>
</head>
<body>
<center>Mollang 20.08.29 ver1.0</center>
</body>
</html>
여기서 template는 jsp를 다루도록 하였습니다.
request.getParamter("pp") 를 통해서 String pp에 값을 받아오게 합니다.
단, 제일 처음 페이지는 request의 pp값이 존재할 수 없으므로 당연히 null이 발생하게 됩니다.
그러므로 제일 처음일 때 (null)일 경우 미리 만들어 놓은 join페이지로 이동하겠끔 작성 하게 만듭니다.
<jsp include 사용한 부분을 자세히 보신다면, join.jsp가 들어가는 부분만 jsp를 활용한 것을 확인 할 수 있습니다.
template.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String pp = (String) request.getAttribute("pp");
if (pp == null)
{
pp = "join";
}
%>
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<title>Hi</title>
</head>
<body>
<jsp:include page="top.jsp"></jsp:include>
<jsp:include page="nav.jsp"></jsp:include>
<jsp:include page='<%=pp + ".jsp"%>'></jsp:include>
<jsp:include page="footer.jsp"></jsp:include>
</body>
</html>
join.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
%>
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<title>Hi</title>
</head>
<body>
<center>
<h1>홈쇼핑 회원 등록</h1>
<form action="joinAction.me" method="post">
<table border="1">
<tr>
<td>회원번호(자동발생)</td>
<td><input type="text" name="num"></td>
</tr>
<tr>
<td>회원성명</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>회원전화</td>
<td><input type="text" name="tel"></td>
</tr>
<tr>
<td>회원주소</td>
<td><input type="text" name="address"></td>
</tr>
<tr>
<td>가입일자</td>
<td><input type="text" name="joindate"></td>
</tr>
<tr>
<td>고객등급</td>
<td><input type="text" name="grade"></td>
</tr>
<tr>
<td>도시코드</td>
<td><input type="text" name="city"></td>
</tr>
<tr>
<td colspan="2"><center><input type="submit" value="등록"> <input
type="button" value="조회"></center></td>
</tr>
</table>
</form>
</center>
</body>
</html>
위의 5개의 코드가 정상적으로 등록이 되었다면 아래와 같은 화면이 출력하게 됩니다.
문제에서는 css 혹은 html 스타일은 사용자의 마음이라고 지정되어 있으므로,
처음부터 디자인에 손을 쓰는 짓은 되도록 피하도록 합니다.
이로써 첫번째 페이지의 모습이 완성되었습니다.
전체 목록
[정보처리산업기사 과정평가형 - 실기] 회원가입 만들기
[정보처리산업기사 과정평가형 - 실기] 회원가입 만들기2
[정보처리산업기사 과정평가형 - 실기] 회원가입 만들기3
[정보처리산업기사 과정평가형 - 실기] 회원 목록 만들기
[정보처리산업기사 과정평가형 - 실기] 회원 정보 가져오기
[정보처리산업기사 과정평가형 - 실기] 회원 정보 수정하기
'정보처리산업기사 과정평가형 > 실기' 카테고리의 다른 글
| [정보처리산업기사 과정평가형 - 실기] DAO 만들기 (0) | 2020.08.29 |
|---|---|
| [정보처리산업 과정평가형 - 실기] Java 만들기 (0) | 2020.08.29 |
| [정보처리산업 과정평가형 - 실기] DB 만들기 (2) | 2020.08.29 |
| [정보처리산업기사 과정평가형] 0. 만드려는 모습 (0) | 2020.06.29 |
| [정보처리산업기사 과정평가형] 시험보기 앞서 (0) | 2020.06.29 |