🎀 회원가입 페이지 (JSP)
📕 입력페이지 (JSP문서)
-
사용자에게 회원정보를 입력받기 위한 JSP 문서 (입력페이지)
-
[가입]을 클릭한 경우 form 태그를 실행하여 처리페이지(join_action.jsp)를 [post] 방식으로
요청해 페이지 이동 : 사용자 입력값(회원정보) 전달
- 에러메시지 전달 방법
- 전달값(에러메세지)을 반환받아 저장
- 전달값(임의값)을 반환받아 저장
- session 내장객체에 저장된 속성값(에러메세지])을 반환받아 저장
(session 내장객체에 저장된 속성값이 있는 경우 session 내장객체에 저장된 속성값 삭제
→ 다른 JSP 문서에서 session 내장객체에 저장된 속성값을 반환받아 사용하지 못하도록 삭제 처리)
- 표현식(Expression)으로 변수값 출력시 변수에 [null]이 저장된 경우 [null] 문자열로 변환되어 출력
<p align="center" style="color: red;"><%=message %></p>
🐣 예제
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
/*
//전달값(에러메세지)을 반환받아 저장
String message=request.getParameter("message");
if(message==null) {//전달값이 없는 경우
message="";
}
//전달값(임의값)을 반환받아 저장
String message=request.getParameter("message");
if(message==null) {//전달값이 없는 경우
message="";
} else {//전달값이 있는 경우
message="비정상적인 방법으로 요청 하였습니다.";
}
*/
//session 내장객체에 저장된 속성값(에러메세지])을 반환받아 저장
String message=(String)session.getAttribute("message");
if(message==null) {//session 내장객체에 저장된 속성값이 없는 경우
message="";
} else {//session 내장객체에 저장된 속성값이 있는 경우
//session 내장객체에 저장된 속성값 삭제
session.removeAttribute("message");
}
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JSP</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript">
function loading() {
window.document.join.id.focus();
}
function inputCheck(form) {
if(is_null(form.id)) {
alert("아이디를 입력해 주세요.");
form.id.focus();
return false;
}
if(!isID(form.id)) {
alert("아이디는 영문자로 시작되며 영문자,숫자,_의 조합만 가능합니다.");
form.id.focus();
return false;
}
if(is_null(form.pass)) {
alert("비밀번호를 입력해 주세요.");
form.pass.focus();
return false;
}
if(is_null(form.repass)) {
alert("비밀번호확인을 입력해 주세요.");
form.repass.focus();
return false;
}
if(isShort(form.pass, 6, "비밀번호는 6글자 이상 입력해 주세요.")) {
return false;
}
if(!isSame(form.pass, form.repass)) {
alert("비밀번호와 비밀번호확인이 서로 같지 않습니다.");
form.pass.focus();
return false;
}
if(is_null(form.name)) {
alert("이름을 입력해 주세요.");
form.name.focus();
return false;
}
if(is_null(form.addr)) {
alert("주소를 입력해 주세요.");
form.addr.focus();
return false;
}
return true;
}
</script>
<link rel="stylesheet" href="css/common.css" type="text/css"/>
</head>
<body onload="loading();">
<h3 align="center">◆◆◆ 회원가입 ◆◆◆</h3>
<form name="join" method="post" action="join_action.jsp"
onsubmit="return inputCheck(join);">
<table bgcolor="black" cellspacing="1" cellpadding="5" align="center">
<tr>
<th bgcolor="44ff44"><font size="2">아이디</font></th>
<td bgcolor="white" width="300">
<input type="text" size="10" name="id" class="TXTFLD">
</td>
</tr>
<tr>
<th bgcolor="44ff44"><font size="2">비밀번호</font></th>
<td bgcolor="white" width="300">
<input type="password" size="10" name="pass" class="TXTFLD">
</td>
</tr>
<tr>
<th bgcolor="44ff44"><font size="2">비밀번호확인</font></th>
<td bgcolor="white" width="300">
<input type="password" size="10" name="repass" class="TXTFLD">
</td>
</tr>
<tr>
<th bgcolor="44ff44"><font size="2">이름</font></th>
<td bgcolor="white" width="300">
<input type="text" size="10" name="name" class="TXTFLD">
</td>
</tr>
<tr>
<th bgcolor="44ff44"><font size="2">주소</font></th>
<td bgcolor="white" width="300">
<input type="text" size="30" name="addr" class="TXTFLD">
</td>
</tr>
<tr>
<th bgcolor="44ff44"><font size="2">성별</font></th>
<td bgcolor="white" width="300">
<input type="radio" name="gender" value="남자" checked><font size="2">남자</font>
<input type="radio" name="gender" value="여자"><font size="2">여자</font>
</td>
</tr>
<tr>
<th bgcolor="44ff44"><font size="2">직업</font></th>
<td bgcolor="white" width="300">
<select name="job">
<option value="학생">학생</option>
<option value="주부">주부</option>
<option value="회사원">회사원</option>
<option value="기타">기타</option>
</select>
</td>
</tr>
<tr>
<th bgcolor="44ff44"><font size="2">취미</font></th>
<td bgcolor="white" width="300">
<input type="checkbox" name="hobby" value="게임" checked><font size="2">게임</font>
<input type="checkbox" name="hobby" value="등산"><font size="2">등산</font>
<input type="checkbox" name="hobby" value="낚시"><font size="2">낚시</font>
<input type="checkbox" name="hobby" value="운동"><font size="2">운동</font>
<input type="checkbox" name="hobby" value="기타"><font size="2">기타</font>
</td>
</tr>
<tr>
<th bgcolor="44ff44"><font size="2">자기소개</font></th>
<td bgcolor="white" width="300">
<textarea rows="5" cols="40" name="profile"></textarea>
</td>
</tr>
<tr>
<th colspan="2" bgcolor="ff8888">
<input type="submit" value="가입">
<input type="reset" value="취소">
</th>
</tr>
</table>
</form>
<%-- 표현식으로 변수값 출력시 변수에 [null]이 저장된 경우 [null] 문자열로 변환되어 출력 --%>
<p align="center" style="color: red;"><%=message %></p>
</body>
</html>
📕 처리페이지 (입력값 반환)
-
입력페이지(join_form.jsp)에서 전달된 회원정보를 반환받아 클라이언트에게 전달하는 JSP 문서 : 처리(출력)페이지
-
request.getMethod() : 클라이언트의 요청방식(GET or POST)을 반환하는 메소드
- 비정상적인 요청에 대한 처리 (1. 클라이언트에게 에러코드 전달하거나 2. 에러페이지(입력페이지)로 이동하기 위한 URL 주소 전달)
- 1. response.sendError(int sc) : 클라이언트에게 에러코드(4XX or 5XX)를 전달하는 메소드
- 응답 관련 상태코드는 HttpServletResponse 인터페이스의 상수(Constant)로 제공
response.sendError(HttpServletResponse.SC_METHOD_NOT_ALLOWED): 에러코드405- 3. response.sendRedirect(String location) : 클라이언트에게 요청 URL 주소를 전달하는 메소드
- 클라이언트는 요청 URL 주소를 전달받아 브라우저의 URL 주소를 변경하고 웹프로그램을 요청하여 결과를 응답받아 출력 : 리다이렉트 이동
- 리다이렉트 이동의 URL 주소는 서버의 최상위 디렉토리를 이용하여 절대경로로 표현 가능
response.sendRedirect("/jsp/error/error_400.jsp");: 에러페이지 이동
- 질의문자열(QueryString)을 이용하여 요청 JSP 문서에 값 전달 가능
- 질의문자열을 이용하여 전달할 수 있는 값은 영문자, 숫자, 일부 특수문자만으로 구성된 값만 가능
- 문제점) 영문자, 숫자, 일부 특수문자를 제외한 문자는 질의문자열로 전달 불가능
- 해결법) 영문자, 숫자, 일부 특수문자를 제외한 문자를 부호화 처리하여 전달
- URLEncoder.encode(String s,String charset) : 문자열을 전달받아 원하는 문자형태의 문자열로 부호화 처리하여 반환하는 메소드 (Javascript의 encodeURIComponent 함수와 동일)
String message=URLEncoder.encode("비정상적인 방법으로 요청 하였습니다.","utf-8")
- session 내장객체에 에러메세지를 속성값으로 저장
- 같은 클라이언트의 모든 JSP 문서에서 속성값을 반환받아 사용 가능
- [POST] 방식으로 요청하여 전달된 값에 대한 캐릭터셋 변경 (입력값에 한글 포함될 경우 작성)
- request.setCharacterEncoding(String encoding) : 리퀘스트 메세지 몸체부에 저장된 값에 대한 문자형태(CharacterSet)를 변경하는 메소드 (기본값 : ISO-8859-1)
request.setCharacterEncoding("utf-8");
- 전달값을 반환받아 저장
- request.getParameter(String name) : 전달값을 문자열(String 객체)로 반환하는 메소드
- 입력태그의 name 속성값 또는 질의문자열(QueryString)의 이름으로 전달값 구분
- 매개변수의 이름으로 전달된 값이 없는 경우 null 반환
String id=request.getParameter("id");- request.getParameterValues(String name) : 같은 이름으로 전달되는 모든 값을 문자열(String 객체) 배열로 반환하는 메소드
String[] hobby=request.getParameterValues("hobby");
🐣 예제
<%@page import="java.net.URLEncoder"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//request.getMethod() : 클라이언트의 요청방식(GET or POST)을 반환
if(request.getMethod().equals("GET")) {
//JSP 문서를 [GET]방식으로 요청한 경우 (비정상적인 요청)
/*
//response.sendError(int sc) : 클라이언트에게 에러코드를 전달하는 메소드
//응답 관련 상태코드는 HttpServletResponse 인터페이스의 상수로 제공
response.sendError(HttpServletResponse.SC_METHOD_NOT_ALLOWED);//에러코드 405 전달
return;
//response.sendRedirect(String location) : client에게 요청 URL 주소를 전달하는 메소드
response.sendRedirect("/jsp/error/error_400.jsp");//에러페이지 이동
return;
out.println("<script type='text/javascript'>");
out.println("alert('비정상적인 방법으로 요청 하였습니다.');");
out.println("location.href='join_form.jsp';");
out.println("</script>");
return;
//질의문자열(QueryString)을 이용하여 요청 JSP 문서에 값 전달 가능
//URLEncoder.encode(String s,String charset) : 문자열을 전달받아 원하는 문자형태의
//문자열로 부호화 처리하여 반환하는 메소드
String message=URLEncoder.encode("비정상적인 방법으로 요청 하였습니다.","utf-8");
response.sendRedirect("join_form.jsp?message="+message);//입력페이지 이동(값 전달)
return;
response.sendRedirect("join_form.jsp?message=1");//입력페이지 이동 (값 전달)
return;
*/
//session 내장객체에 에러메세지를 속성값으로 저장
//→ 같은 클라이언트의 모든 JSP 문서에서 속성값을 반환받아 사용 가능
session.setAttribute("message", "비정상적인 방법으로 요청 하였습니다.");
response.sendRedirect("join_form.jsp");//입력페이지 이동
return;
}
//[POST] 방식으로 요청하여 전달된 값에 대한 캐릭터셋 변경
//request.setCharacterEncoding(String encoding) : 리퀘스트 메세지 몸체부에 저장된 값에
//대한 문자형태(CharacterSet)를 변경하는 메소드 - 기본값 : ISO-8859-1
request.setCharacterEncoding("utf-8");
//request.getParameter(String name) : 전달값을 문자열(String 객체)로 반환하는 메소드
// → 매개변수의 이름으로 전달된 값이 없는 경우 null 반환
String id=request.getParameter("id");
String pass=request.getParameter("pass");
String name=request.getParameter("name");
String addr=request.getParameter("addr");
String gender=request.getParameter("gender");
String job=request.getParameter("job");
//request.getParameterValues(String name) : 같은 이름으로 전달되는 모든 값을 문자열
//(String 객체) 배열로 반환하는 메소드
String[] hobby=request.getParameterValues("hobby");
String profile=request.getParameter("profile");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP</title>
</head>
<body>
<h1>회원정보확인</h1>
<hr>
<p>아이디 = <%=id %></p>
<p>비밀번호 = <%=pass %></p>
<p>이름 = <%=name %></p>
<p>주소 = <%=addr %></p>
<p>성별 = <%=gender %></p>
<p>직업 = <%=job %></p>
<% if(hobby==null) { %>
<p>취미 = 미선택</p>
<% } else { %>
<p>취미 =
<% for(String temp:hobby) { %>
<%=temp %>
<% } %>
<% } %>
<%-- 엔터(Enter)를 br 태그로 변환하여 출력 처리 --%>
<p>자기소개 = <br><%=profile.replace("\n", "<br>")%></p>
</body>
</html>
🎀 로그인 페이지
📙 입력페이지
- 비로그인 사용자 : 사용자로부터 로그인정보(아이디와 비밀번호)를 입력받기 위한 JSP 문서
- [로그인]을 클릭한 경우 form 태그를 실행하여 로그인 처리페이지(login_action.jsp)를 [post] 방식으로 요청하여 이동 (로그인정보 전달)
- 로그인 사용자 : 클라이언트에게 환영메세지를 전달하는 JSP 문서
- [로그아웃]을 클릭한 경우 로그아웃 처리페이지(logout_action.jsp)로 이동
- [마이페이지]을 클릭한 경우 사용자 출력페이지(login_user.jsp)로 이동
- session 내장객체에 저장된 속성값(에러메세지)을 반환받아 저장 후 다른 JSP 문서에서 session 내장객체에 저장된 속성값(에러메세지)을 사용하지 못하도록 속성값 삭제
🐣 예제
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//session 내장객체에 저장된 권한 관련 속성값(아이디)를 반환받아 저장
String loginId=(String)session.getAttribute("loginId");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP</title>
</head>
<body>
<% if(loginId==null) {//비로그인 사용자가 JSP 문서를 요청한 경우 %>
<%
//session 내장객체에 저장된 속성값(에러메세지)을 반환받아 저장
String message=(String)session.getAttribute("message");
if(message==null) {
message="";
} else {
//다른 JSP 문서에서 session 내장객체에 저장된 속성값(에러메세지)을 사용하지 못하도록 속성값 삭제
session.removeAttribute("message");
}
//session 내장객체에 저장된 속성값(아이디)을 반환받아 저장
String id=(String)session.getAttribute("id");
if(id==null) {
id="";
} else {
session.removeAttribute("id");
}
%>
<h1>로그인</h1>
<hr>
<form action="login_action.jsp" method="post" name="loginForm">
<table>
<tr>
<td>아이디</td>
<td><input type="text" name="id" value="<%=id%>"></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" name="passwd"></td>
</tr>
<tr>
<td colspan="2"><button type="button" id="loginBtn">로그인</button></td>
</tr>
</table>
</form>
<p id="message" style="color: red;"><%=message %></p>
<script type="text/javascript">
loginForm.id.focus();
document.getElementById("loginBtn").onclick=function() {
if(loginForm.id.value=="") {
document.getElementById("message").innerHTML="아이디를 입력해 주세요.";
loginForm.id.focus();
return;
}
if(loginForm.passwd.value=="") {
document.getElementById("message").innerHTML="비밀번호를 입력해 주세요.";
loginForm.passwd.focus();
return;
}
loginForm.submit();
}
</script>
<% } else {//로그인 사용자가 JSP 문서를 요청한 경우 %>
<h1>메인페이지</h1>
<hr>
<p><%=loginId %>님, 환영합니다.
<a href="logout_action.jsp">[로그아웃]</a>
<a href="login_user.jsp">[마이페이지]</a>
<% } %>
</body>
</html>
📙 처리페이지 (권한획득)
-
로그인정보 입력페이지(login_form.jsp)에서 전달된 로그인정보를 반환받아 인증 처리하고 처리결과에 따라 다른 요청 URL 주소를 클라이언트에게 전달하는 JSP 문서
-
로그인(Login) : 인증을 통한 권한 획득 과정
- 인증 실패 : 클라이언트가 입력페이지(login_form.jsp)로 이동되도록 URL 주소 전달
- 인증 성공 : 클라이언트가 출력페이지(login_user.jsp)로 이동되도록 URL 주소 전달
- 로그인처리를 위해 session 내장객체에 권한 관련 정보를 속성값으로 저장
- 권한 획득 순서
-
전달값을 반환받아 저장
String id=request.getParameter("id"); -
아이디와 비밀번호를 비교 (인증 처리)
if(!id.equals("abc123") || !passwd.equals("123456")) { }- 인증실패 시 속성명 id값 입력값으로 저장
session.setAttribute("id", id);- 인증 성공 시 로그인아이디 속성값으로 저장
session.setAttribute("loginId", id);
🐣 예제
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
//비정상적인 요청에 대한 처리
if(request.getMethod().equals("GET")) {//JSP 문서를 [GET] 방식으로 요청한 경우
//session 내장객체에 에러메세지를 속성값으로 저장하고 클라이언트에게 입력페이지의 URL 주소 전달
session.setAttribute("message", "비정상적인 방법으로 페이지를 요청 하였습니다.");
response.sendRedirect("login_form.jsp");//입력페이지 이동
return;
}
//전달값을 반환받아 저장
String id=request.getParameter("id");
String passwd=request.getParameter("passwd");
//아이디와 비밀번호를 비교 (인증 처리)
if(!id.equals("abc123") || !passwd.equals("123456")) {//인증 실패
session.setAttribute("message", "아이디 또는 비밀번호를 잘못 입력 하였습니다.");
session.setAttribute("id", id);
response.sendRedirect("login_form.jsp");//입력페이지 이동
return;
}
//인증 성공
//session 내장객체에 권한 관련 정보(아이디)를 속성값으로 저장
session.setAttribute("loginId", id);
response.sendRedirect("login_user.jsp");//출력페이지 이동
%>
📙 처리페이지 (인증성공)
-
로그인 사용자에게 환영메세지를 전달하는 JSP 문서 (로그인 인증된 사용자만 접근 가능)
-
비로그인 사용자가 JSP 문서를 요청한 경우 로그인 입력페이지(login_form.jsp)로 이동하기 위한 URL 주소 전달
(비정상적인 요청에 대한 처리) -
[로그아웃]을 클릭한 경우 로그아웃 처리페이지(logout_action.jsp)로 이동
-
[메인으로]을 클릭한 경우 메인페이지(login_form.jsp)로 이동
🐣 예제
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//session 내장객체에 저장된 권한 관련 속성값(아이디)를 반환받아 저장
String loginId=(String)session.getAttribute("loginId");
//session 내장객체에 저장된 권한 관련 속성값이 없는 경우 (비로그인 사용자인 경우)
if(loginId==null) {//비정상적인 방법으로 JSP 문서를 요청한 경우
session.setAttribute("message", "로그인 사용자만 접근 가능한 페이지입니다.");
response.sendRedirect("login_form.jsp");
return;
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP</title>
</head>
<body>
<h1>로그인 사용자 전용 페이지</h1>
<hr>
<p><%=loginId %>님, 환영합니다.
<a href="logout_action.jsp">[로그아웃]</a>
<a href="login_form.jsp">[메인으로]</a>
</p>
<hr>
<p>로그인 사용자만 확인 가능한 중요한 내용입니다.</p>
</body>
</html>
📙 처리페이지 (로그아웃)
-
로그아웃 처리 후 클라이언트에게 로그인정보 입력페이지(login_form.jsp)로 이동하기 위한 URL 주소를 전달하는 JSP 문서
-
로그아웃 : 권한 관련 정보를 제거하는 작업
-
session 내장객체에 저장된 권한 관련 정보(아이디)의 속성값을 삭제
session.removeAttribute("loginId");
-
session.invalidate() : 바인딩 세션을 언바인딩 처리하는 메소드 (session 내장객체 제거)
session.invalidate();
🐣 예제
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//session 내장객체에 저장된 권한 관련 정보(아이디)의 속성값을 삭제
//session.removeAttribute("loginId");
//session.invalidate() : 바인딩 세션을 언바인딩 처리하는 메소드 (session 내장객체 제거)
session.invalidate();
//클라이언트에게 URL 주소 전달
response.sendRedirect("login_form.jsp");
%>
🎀 웹페이지 실행 (include directive)
📒 index.jsp (메인페이지)
-
메인페이지 : index.jsp로 작성 (client가 요청하지 않아도 응답 가능)
-
jsp문서가 공통적으로 사용할 수 있는 스타일은 css파일로 작성 (style변경시 유지보수 효율성 좋아)
<link href="style.css" type="text/css" rel="stylesheet">- rel: 연결방식, link 태그로 연결해서 작성 권장
-
header, content, footer(공통되는 영역)는 include Directive를 사용하여 메인페이지에 포함시켜 작성하는 것을 권장
-
Header 영역 : 로고, 메뉴 등 출력하기 위한 영역
<%@include file="header.jspf"%>
-
Content 영역 : 요청에 대한 처리결과를 출력하기 위한 영역
-
Footer 영역 : 저작권, 약관, 개인정보 보호정책 등을 출력하기 위한 영역
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<%-- Header 영역 : 로고, 메뉴 등 출력하기 위한 영역 --%>
<%--
<div id="header">
<h1><a href="index.jsp">쇼핑몰</a></h1>
<div id="menu">
<a href="company.jsp">회사소개</a>
<a href="product.jsp">제품소개</a>
<a href="review.jsp">사용후기</a>
<a href="event.jsp">이벤트</a>
</div>
</div>
--%>
<%@include file="header.jspf"%>
<%-- Content 영역 : 요청에 대한 처리결과를 출력하기 위한 영역 --%>
<div id="content">
<h2>메인 페이지</h2>
</div>
<%-- Footer 영역 : 저작권, 약관, 개인정보 보호정책 등을 출력하기 위한 영역 --%>
<%--
<div id="footer">
<p>Copyright ©itwill Corp. All rights reserved.</p>
</div>
--%>
<%@include file="footer.jspf" %>
</body>
</html>
📒 menu.jsp (메인페이지 복사)
- company, product, review, event 출력 파일
- index.jsp (메인페이지) 복사하여 제목만 수정
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<%-- Header 영역 : 로고, 메뉴 등 출력하기 위한 영역 --%>
<%@include file="header.jspf"%>
<%-- Content 영역 : 요청에 대한 처리결과를 출력하기 위한 영역 --%>
<div id="content">
<h2>회사소개 페이지</h2>
</div>
<%-- Footer 영역 : 저작권, 약관, 개인정보 보호정책 등을 출력하기 위한 영역 --%>
<%@include file="footer.jspf" %>
</body>
</html>
📒 header.jspf
- menu.jsp에 공통으로 작성되는 header, content, footer를 include directive 사용하여 작성
- 클라이언트 요청에 의한 실행이 목적이 아닌 JSP 문서에 소스코드를 제공하기 위한 파일로 확장자는 jspf로 작성하는 것을 권장
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div id="header">
<h1><a href="index.jsp">쇼핑몰</a></h1>
<div id="menu">
<a href="company.jsp">회사소개</a>
<a href="product.jsp">제품소개</a>
<a href="review.jsp">사용후기</a>
<a href="event.jsp">이벤트</a>
</div>
</div>
📒 style.css (link로 연결)
- jsp문서가 공통적으로 사용할 수 있는 스타일은 css파일로 작성 (style변경시 유지보수 효율성 좋아)
@charset "UTF-8";
div {
margin: 5px;
padding: 5px;
}
#header {
height: 200px;
border: 1px solid red;
}
#header h1 {
text-align: center;
}
#menu {
font-size: 1.5em;
text-align: right;
}
#menu a, #menu a:visited {
text-decoration: none;
color: black;
}
#menu a:hover {
color: orange;
}
#content {
min-height: 500px;
border: 1px solid green;
text-align: center;
}
#footer {
height: 150px;
border: 1px solid blue;
text-align: center;
font-size: 1.2em;
}
🎀 웹페이지 실행 (include action tag)
📗 index.jsp (메인페이지)
-
클라이언트의 모든 요청에 응답 결과를 제공하기 위한 JSP 문서 (템플릿 페이지)
-
Content 영역은 템플릿 페이지(index.jsp) 요청시 전달되는 값에 따라 다른 JSP 문서의
실행 결과를 가져와 동적으로 포함하여 응답 처리- include 태그 사용
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//전달값을 반환받아 저장
String workgroup=request.getParameter("workgroup");//작업폴더명
if(workgroup==null) {
workgroup="main";
}
String process=request.getParameter("process");//작업파일명
if(process==null) {
process="view";
}
//반환받은 전달값을 이용하여 Content 영역에 포함될 JSP 문서의 파일 경로 저장
String contentFilePath=workgroup+"/"+process+".jsp";
System.out.println("contentFilePath = "+contentFilePath);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP</title>
<style type="text/css">
div {
margin: 5px;
padding: 5px;
}
#header {
height: 200px;
border: 1px solid red;
}
#header h1 {
text-align: center;
}
#menu {
font-size: 1.5em;
text-align: right;
}
a, a:visited {
text-decoration: none;
color: black;
}
a:hover {
color: orange;
}
#content {
min-height: 500px;
border: 1px solid green;
text-align: center;
}
#footer {
height: 150px;
border: 1px solid blue;
text-align: center;
font-size: 1.2em;
}
</style>
</head>
<body>
<div id="header">
<h1><a href="index.jsp?workgroup=main&process=view">쇼핑몰</a></h1>
<div id="menu">
<a href="index.jsp?workgroup=company&process=history">회사연혁</a>
<a href="index.jsp?workgroup=product&process=list">제품소개</a>
<a href="index.jsp?workgroup=order&process=display">주문내역</a>
<a href="index.jsp?workgroup=board&process=review">사용후기</a>
</div>
</div>
<div id="content">
<%-- <h2>메인 페이지</h2> --%>
<%-- include 태그를 사용하여 전달값에 의해 생성된 JSP 문서의 파일경로로 스레드를
이동하여 실행결과를 제공받아 Content 영역에 동적으로 포함 --%>
<%-- => 스레드가 이동될 JSP 문서가 없는 경우 에러 발생 --%>
<jsp:include page="<%=contentFilePath %>"/>
</div>
<div id="footer">
<div>
<a href="index.jsp?workgroup=main&process=terms">이용약관</a>
<a href="index.jsp?workgroup=main&process=info">개인정보</a>
<a href="index.jsp?workgroup=main&process=center">고객센터</a>
</div>
<p>Copyright © itwill Corp. All rights reserved.</p>
</div>
</body>
</html>
📗 content, footer 영역
- company 폴더안의 history.jsp 파일
- product 폴더안의 list.jsp파일
- order 폴더안의 display.jsp파일
- board폴더안의 review.jsp파일
- main폴더안의 terms, info, center.jsp 파일
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<h1>회사연혁</h1>
<p>우리 회사는 오늘 만들었습니다.</p>
📌 절대경로, 상대경로
-
상대경로 : 클라이언트의 요청 JSP 문서의 경로를 기준으로 자원의 경로 표현
- 문제점) 템플릿 페이지(index.jsp)가 아닌 스레드가 이동된 JSP 문서(view.jsp)를 요청한 경우
해당 자원을 찾을 수 없어 404 에러코드 발생 가능 - 요청하는 JSP 문서와 응답 결과를 제공하는 JSP 문서의 경로가 다른 경우 문제 발생
- 해결법) JSP 문서에서 필요한 자원을 표현할 경우 절대경로로 표현하는 것을 권장
<img src="images/Koala.jpg" width="300">
- 문제점) 템플릿 페이지(index.jsp)가 아닌 스레드가 이동된 JSP 문서(view.jsp)를 요청한 경우
-
절대경로 : 최상위 디렉토리를 기준으로 자원의 경로 표현
- CSL(HTML, CSS, JavaScript)은 1. ServerRoot 디렉토리를 최상위 디렉토리로 표현하여 사용
- SSL(Java)은 2. ContextRoot 디렉토리를 최상위 디렉토리로 표현하여 사용
<img src="/jsp/action/template_site/images/Koala.jpg" width="300">- 문제점) 웹자원이 저장된 ContextRoot 디렉토리의 경로가 변경될 경우 해당 자원을 찾을 수 없어 404 에러코드 발생 가능
- 해결법) 메소드를 호출하여 ContextRoot 디렉토리의 경로를 반환받아 절대경로로 표현하는 것을 권장
- request.getContextPath() : 요청 JSP 문서가 위치한 ContextRoot 디렉토리의 경로를 반환하는 메소드
<img src="<%=request.getContextPath() %>/action/template_site/images/Koala.jpg" width="300">
Study Log 📂