JSP - chapter06

ZiSoOm·2021년 8월 2일
jsp
0

JSP

목록 보기
10/12

🚩 include

비교 항목 jsp:include 액션 태그 (동적) include 디렉티브 (정적)
처리 시간 요청 시간에 처리 JSP 파일을 자바 소스로 변환 시 처리
기능 별도 파일로 요청 처리 흐름 이동 현재 파일로 대상 페이지가 들어감
데이터 전달 request, jsp:param 이용 페이지 내 변수 선언 후 변수에 값 저장
용도 화면 레이아웃의 일부분을 모듈화 저작권, 공통 변수 지정

🚩 jsp:include 액션 태그

  • page : 포함할 jsp 페이지의 경로를 지정
  • flush : 지정한 jsp 페이지를 실행하기 전에 버퍼를 플러시할지 여부 지정(기본 false)
    -false는 요청이 모두 끝나면 flush, true는 하나의 요청 후 바로 flush

- jsp:include 액션 태그 처리 순서(flush="false"일 때)

- main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>main</title>
</head>
<body>

main.jsp에서 생성한 내용.<br>

<jsp:include page="sub.jsp" />

include 이후의 내용<br>

</body>
</html>

- sub.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<p>
sub.jsp에서 생성한 내용
</p>
  1. main.jsp가 웹 브라우저의 요청을 받음
  2. "main.jsp에서 생성한 내용."을 버퍼에 저장
  3. 요청 흐름이 sub.jsp로 이동
  4. "sub.jsp에서 생성한 내용"을 버퍼에 저장
  5. 다시 main.jsp로 요청 흐름이 돌아옴
  6. "include 이후의 내용"을 버퍼에 저장
  7. 출력 버퍼의 내용을 응답 데이터로 전송

🚩 jsp:include 연습

1) layout.jsp

  • 레이아웃을 table로 잡아두고 상단, 좌측, 하단 메뉴에 들어갈 페이지를 jsp:include 액션 태그를 사용하여 적용함
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>laylout</title>
</head>
<body>
<table border="1" style="width: 100%;" cellpadding="0" cellspacing="0">
	<!-- cellpadding : 셀과 내용 사이의 여백, cellspacing : 셀과 테이블 사이의 여백 -->
		<tr>
			<td colspan="2">
				<jsp:include page="/module/top.jsp"  flush="false" />  
			</td>
		</tr>
		<tr>
			<td style="width: 30%" valign="top">
				<jsp:include page="/module/left.jsp" />
			</td>
			<td>
				<!-- 내용 부분 : 시작 -->
				레이아웃1<br><br><br>
				<!-- 내용 부분 : 끝 -->
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<jsp:include page="/module/bottom.jsp" />
			</td>
		</tr>
	</table>
</body>
</html>

2) top.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
상단 메뉴 : 
<a href="<%=request.getContextPath() %>/chapter07/layout.jsp">홈</a>&nbsp;
<a href="<%=request.getContextPath() %>/chapter07/info.jsp">정보</a>&nbsp;

3-1) info.jsp [top.jsp의 정보 클릭시]

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>INFO</title>
</head>
<body>
	<table border="1" style="width: 100%;" cellpadding="0" cellspacing="0">
		<tr>
			<td colspan="2">
				<jsp:include page="/module/top.jsp" flush="false" />
			</td>
		</tr>
		<tr>
			<td style="width: 30%" valign="top">
				<jsp:include page="/module/left.jsp" />
			</td>
			<td>
				<!-- 내용 부분 : 시작 -->
				<table style="width: 100%;" border="1">
					<tr>
						<th>제품번호</th><td>P101000001</td>
					</tr>
					<tr>
						<th>가격</th><td>10,000원</td>
					</tr>
				</table>
				<!-- 
					info.jsp?type=B
					jsp:param 액션 태그로 추가한 파라미터가 기존 파라미터보다 우선한다.
				 -->
				<jsp:include page="/chapter07/infoSub.jsp">
					<jsp:param name="type" value="A" />
				</jsp:include>
<%-- 					<%@ include file="/chapter07/infoSub.jsp" %> --%>
				<!-- 내용 부분 : 끝 -->
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<jsp:include page="/module/bottom.jsp" />
			</td>
		</tr>
	</table>
</body>
</html>

3-2) infoSub.jsp [info.jsp에 포함되는 jsp]

  • info.jsp?type=B를 경로로 치더라도, info.jsp에서 <jsp:param name="type" value="A" />에 의해서 type은 A가 됨
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%
// <jsp:param name="type" value="A" />
	String type = request.getParameter("type").toUpperCase(); // A가 받아짐
// 	if(type == null){
// 		return;
// 	}
	
	// type : info.jsp?type=B + jsp:param의 A
	String[] names = request.getParameterValues("type");
	for(String name : names){
		out.print("name : " + name + "<br>");
	}
%>
<!-- info.jsp페이지에 include되는 sub 페이지 -->
<br>
<table style="width: 100%;" border="1">
	<tr>
		<th>타입</th>
		<td><b><%=type %></b></td>
	</tr>
	<tr>
		<th>특징</th>
		<td>
	<%
	if(type.equals("A")){
		out.print("강한 내구성");
	}else if(type.equals("B")){
		out.print("뛰어난 대처 능력");
	}else{
		out.print("저렴한 가격");
	}
	%>
		</td>
	</tr>
</table>

4) left.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
좌측 메뉴 : <br>

5) bottom.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
하단 메뉴 : 소개 | 도움말 | 약관 | 사이트맵
  • layout.jsp 출력 결과 :
  • layout.jsp에서 정보 클릭 시
  • 주소창에 info.jsp?type=B를 입력했을 때

🚩 jsp:include 연습(2)

[DB 연결 안한 것]

1) left.jsp에 자유 게시판 추가하기

  • 현재 페이지 기본 : 1페이지로 설정함
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
좌측 메뉴 : <br>
<a href="/chapter07/freeboard.jsp?currentPage=1">자유게시판</a>
  • left.jsp에 자유게시판으로 이동하는 a태그 추가

2) freeboard.jsp [left.jsp에 자유게시판 클릭시]

[게시글 조회는 1부터 130까지 임의로 나타낸 것이고, 게시글 등록을 통해 등록한 글이 조회는 되지 않음]

  • 자유 게시판 목록 조회
  • <페이징 처리>
  • 총 페이지 수는 데이터 갯수를 페이지 당 보여줄 행의 갯수로 나눔. 이때, 나머지가 0보다 큰 경우 총 페이지 수를 1개 증가시킴.
    ex)데이터 갯수는 121개, 페이지 당 보여줄 행의 갯수는 10개라고 가정했을 때, 121/10=12 12페이지가 나오지만 12페이지까지 보여주면 121개 중 120개까지만 나오기 때문에 남은 1개를 표시해줄 페이지를 1개 추가해야함 => 121%10=1이므로 총 페이지 수는 13개
  • 글 시작 번호는 (현재 페이지 번호 페이지 당 보여줄 행의 갯수)-(페이지 당 보여줄 행의 갯수-1)
    ex)현재 페이지가 1일 경우 1     10 - 9 = 1번부터 시작하고, 현재 페이지가 2일 경우 2 * 10 -9 = 11번 부터 시작함
  • 글 끝 번호는 (현재 페이지 번호 페이지 당 보여줄 행의 갯수)
    ex) 현재 페이지가 1일 경우 1     10 = 10번까지 보여주고, 현재 페이지가 2일 경우 2 * 10 = 20번까지 보여줌
  • 페이지의 번호를 한 페이지당 5개씩 보여준다고 가정했을 때, 페이지 시작 번호는 현재 페이지 / 페이지 당 보여줄 페이지 번호 갯수 페이지 당 보여줄 페이지 번호 갯수 + 1
    ex) 정수와 정수의 나누기는 정수가 나오기 때문에 1 / 5     5 + 1 =0(0.2지만 정수표현시 0) * 5 + 1 = 1이고, 1~4까지는 1이 됨. 하지만, 5는 5로 나눴을 때 1(정수)로 나오기 때문에 결과가 6이 됨. 보정작업을 통해 6 - 페이지 당 보여줄 페이지 번호 갯수(5)를 해서 1로 만들어 줘야됨
  • 페이지 끝 번호는 페이지 시작번호 + (페이지 당 보여줄 페이지 번호 갯수 -1)을 해주면 됨
    ex) 페이지 시작 번호를 1이라고 가정했을 때, 1 + (5 - 1) = 5 페이지 끝 번호는 5가 됨
  • [이전] 버튼은 페이지 번호가 6일 때 부터 나와야 하기 때문에 페이지 시작 번호 > 5일 때만 [이전] 버튼이 나오게 함
    ex) 1페이지부터 5페이지까지는 이전으로 보여줄 페이지가 없음
  • [다음] 버튼은 페이지 끝 번호가 총 페이지갯수보다 작을 때만 나와야 하기 때문에 페이지 끝 번호 < 총 페이지 갯수일 때만 [다음] 버튼이 나오게 함
    ex) 6페이지부터 10페이지까지는 다음으로 보여줄 페이지가 있지만, 11페이지부터 13페이지까지는 다음으로 보여줄 페이지가 없음
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>    
<!DOCTYPE html>
<html>
<head>
<title>자유게시판 목록</title>
</head>
<body>
	<table border="1" style="width: 100%;" cellpadding="0" cellspacing="0">
		<tr>
			<td colspan="2">
				<jsp:include page="/module/top.jsp" flush="false" />
			</td>
		</tr>
		<tr>
			<td style="width: 30%" valign="top">
				<jsp:include page="/module/left.jsp" />
			</td>
			<td>
				<!-- 내용 부분 : 시작 -->
				<table border="1" style="width: 100%;">
					<tr>
						<td colspan="4"><a href="/chapter07/freeboardwrite.jsp">[게시글 쓰기]</a></td>
					</tr>
					<tr>
						<th>번호</th>
						<th>제목</th>
						<th>작성자</th>
						<th>조회수</th>
					</tr>
					<%
					//freeboard.jsp?currentPage=1 기본 currentPage 파라미터 값 : 1
					String currentPageStr = request.getParameter("currentPage"); 
					int currentPage = Integer.parseInt(currentPageStr);
					
					//글 전체 개수(120행)
					//SELECT COUNT(*) TOTAL FROM FREEBOARD; => 120행
					int total = 121;
					
					//전체 페이지 수
					int totalPages = total /10; //12페이지
					//121 % 10 => 1 => 전체 페이지 수를 1 증가
					//(전체 행의 수/ 한 화면에 보여지는 size 했을 때 딱 떨어지지 않고 넘쳤을 때..)
					//12페이지는 120행을 커버하는데 문제는 121행처럼 1행이 넘쳤을 때에는 13페이지로 처리해줘야 하므로..
					if(total % 10 > 0) { 
						totalPages++;
					}
					
					//글 시작 번호(1페이지일 경우 시작번호 : 1, 2페이지일 경우 시작번호 : 11)
					int startNum = (currentPage * 10) - 9;
					
					//글 종료 번호
					int endNum = currentPage * 10;
					//int endNum = startNum + 9;
					
					//시작 페이지 [이전] 1 2 3 4 5 [다음] => 1
					//정수 / 정수 => 정수
					// 1 / 5 => 0.2지만 정수로 0임
					int startPage = currentPage / 5 * 5 + 1;
					
					//현재 페이지를 5개로 나눈 나머지
					//5같은 경우는 5/5 => 1이 되기 때문에 1 * 5 + 1 = 6이 됨
					int modVal = currentPage % 5;
					//6-5를 빼줌 => 1이 됨
					if(modVal == 0) startPage -= 5; //보정작업
					
					//종료 페이지 [이전] 1 2 3 4 5 [다음] => 5
					int endPage = startPage + 4;
					
					//종료 페이지 [이전] 11 12 13 14 15 [다음] => 15
					if(endPage > totalPages) endPage = totalPages; //totalPages : 13(121행일때)
					
					for(int i=startNum; i<=endNum; i++) { %>
					<tr>
						<th><%=i%></th>
						<th>제목<%=i%></th>
						<th>작성자<%=i%></th>
						<th>0</th>
					</tr>
					<%} %>
					<tr style="text-align: center;">
						<td colspan="4">
						<%if(startPage > 5) {%>
							<a href="/chapter07/freeboard.jsp?currentPage=<%=startPage - 5%>">[이전]</a>
						<%} %>	
						<%for(int j=startPage; j<=endPage; j++) {%>
							<a href="/chapter07/freeboard.jsp?currentPage=<%=(j)%>">
								<%=(j)%>
							</a>&nbsp;
						<%} %>
						<%if(endPage < totalPages) { %>
							<a href="/chapter07/freeboard.jsp?currentPage=<%=startPage + 5%>">[다음]</a>
						<%} %>
						</td>
					</tr>
				</table>
				<!-- 내용 부분 : 끝 -->
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<jsp:include page="/module/bottom.jsp" />
			</td>
		</tr>
	</table>
</body>
</html>
  • 현재 페이지가 1일 때(자유게시판 클릭했을 때 기본값, 이전 버튼 없음)
  • 현재 페이지가 8일 때(이전, 다음 버튼 있음)
  • 현재 페이지가 13일 때(마지막 페이지, 다음 버튼 없음)

2) freeboardwrite.jsp [freeboard.jsp에서 게시글 쓰기 클릭시]

  • 새글 등록 버튼 클릭 시 freeboardreg.jsp를 통해 등록 수행
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>새글작성</title>
<script type="text/javascript">
	function fn_list() {
		history.go(-1); //이전 화면으로 이동
	}
</script>
</head>
<body>
	<table border="1" style="width: 100%;" cellpadding="0" cellspacing="0">
		<tr>
			<td colspan="2">
				<jsp:include page="/module/top.jsp" flush="false" />
			</td>
		</tr>
		<tr>
			<td style="width: 30%" valign="top">
				<jsp:include page="/module/left.jsp" />
			</td>
			<td>
				<!-- 내용 부분 : 시작 -->
				<form action="/chapter07/freeboardreg.jsp" method="post">
					<p>제목 : <br><input type="text" name="title" placeholder="제목을 입력해주세요"></p>
					<p>내용 : <br><textarea name="content" rows="5" cols="30"></textarea></p>
					<input type="submit" value="새글등록">&nbsp;&nbsp;
					<input type="button" value="목록" onclick="fn_list()">
				</form>
				<!-- 내용 부분 : 끝 -->
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<jsp:include page="/module/bottom.jsp" />
			</td>
		</tr>
	</table>
</body>
</html>
  • 게시글 쓰기 화면

3) freeboardreg.jsp [freeboardwrite.jsp에서 새글등록 클릭시]

  • form 태그 안의 name이 있는 파라미터를 가져와 title, content로 변수를 선언하고, hashMap에 저장한 후 session에 map을 저장함
  • 게시글 내용 보기 버튼 클릭 시 freeboardview.jsp를 통해 게시글 내용 상세 보기할 수 있음
<%@page import="java.util.Map"%>
<%@page import="java.util.HashMap"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String title = request.getParameter("title");
	String content = request.getParameter("content");
	//out.print("title : " + title + "<br>");
	//out.print("content : " + content + "<br>");
	
	//Map : java.util 패키지에 있는 interface
	Map<String, Object> map = new HashMap<>();
	map.put("title", title);
	map.put("content", content);
	
	session.setAttribute("map", map);
	
%>    
<!DOCTYPE html>
<html>
<head>
<title>게시글 등록</title>
</head>
<body>
게시글을 등록했습니다. <br>
<a href="/chapter07/freeboardview.jsp">[게시글 내용 보기]</a>
</body>
</html>
  • 새글 등록 버튼 클릭시

4) freeboardview.jsp [freeboardreg.jsp에서 게시글 내용 보기 클릭시]

  • 등록한 글의 상세보기
  • 세션에 저장한 속성을 가져와 값에 넣어주기
<%@page import="java.util.Map"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	Map<String, Object> map = (Map<String, Object>)session.getAttribute("map");
	
%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상세보기</title>
<script type="text/javascript">
	function fn_list() {
		location.href="/chapter07/freeboard.jsp?currentPage=1";
	}
</script>
</head>
<body>
	<table border="1" style="width: 100%;" cellpadding="0" cellspacing="0">
		<tr>
			<td colspan="2">
				<jsp:include page="/module/top.jsp" flush="false" />
			</td>
		</tr>
		<tr>
			<td style="width: 30%" valign="top">
				<jsp:include page="/module/left.jsp" />
			</td>
			<td>
				<!-- 내용 부분 : 시작 -->
				<form action="/chapter07/freeboardreg.jsp" method="post">
					<p>제목 : <br><input type="text" name="title" placeholder="제목을 입력해주세요" value="<%=map.get("title")%>"></p>
					<p>내용 : <br><textarea name="content" rows="5" cols="30"><%=map.get("content")%></textarea></p>
					<input type="button" value="목록" onclick="fn_list()">
				</form>
				<!-- 내용 부분 : 끝 -->
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<jsp:include page="/module/bottom.jsp" />
			</td>
		</tr>
	</table>
</body>
</html>

게시글 내용 보기 클릭시

profile
ZiSoOm
이전 포스트

JSP - chapter05

다음 포스트

JSP - chapter07

0개의 댓글