[WEB-jsp/servlet] jsp에 jsp 삽입하기

티스토리 뷰

WEB/Java BackEnd

[WEB-jsp/servlet] jsp에 jsp 삽입하기

Happyoon ~ 2021. 11. 24. 14:23

728x90

네비게이션 바, footer 등은 거의 모든 페이지에서 반복되는 속성들이다.

따라서, 각각을 jsp 파일로 만들어놓고 삽입하는 방법을 생각해볼 수 있다.

WebContent에 include 폴더를 만들고 각각의 jsp 파일을 만들어보자.

파일 구조

navbar.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<% 
//로직을 사용할 수 있다. 
String thisPage = request.getParameter("thisPage");

%>
<p><%=thisPage.equals("member") ?"member active" :""%></p>
<p><%=thisPage.equals("company") ?"company active" :""%></p>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
	<div class="container-fluid">
		<a class="navbar-brand" href="${pageContext.request.contextPath}/"><strong>Acorn</strong></a>
		<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
			<div class="navbar-nav">
				<a class="nav-link <%=thisPage.equals("member") ?"active":"" %>" href="${pageContext.request.contextPath}/member/list.jsp">회원목록</a>
				<a class="nav-link <%=thisPage.equals("company") ? "active":"" %>" href="${pageContext.request.contextPath}/company/list.jsp">사원목록</a>
				
			</div>
		</div>
	</div>
</nav>

list.jsp에서 navbar.jsp 사용 모습

<jsp:include page="/include/navbar.jsp">
	<jsp:param value="company" name="thisPage"/>
	</jsp:include>

active 설정은 페이지 마다 다르므로,thisPage라는 변수명으로 company값을 넘겨주어, company 관련 페이지일 때 active 시킬 수 있다.

String thisPage = request.getParameter("thisPage");
<a class="nav-link <%=thisPage.equals("company") ? "active":"" %>" href="${pageContext.request.contextPath}/company/list.jsp">사원목록</a>

※주의※

include 될 페이지의 위치를 지정할 때 상대경로, 절대경로 모두 사용가능하다.
단, 주의할 점은 절대경로에서 /는 WebContent를 가리킨다.
context path는 넣으면 안된다.
context path는 클라이언트가 요청하는 경로이고, jsp:include는 클라이언트와 상관없이 서버에서 해석되는 부분이기 때문에 context path가 의미가 없는 것이다.

footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<div class="container">
   <footer class="py-3 my-4">
      <ul class="nav justify-content-center border-bottom pb-3 mb-3">
         <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Home</a></li>
         <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Features</a></li>
         <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Pricing</a></li>
         <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">FAQs</a></li>
         <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">About</a></li>
      </ul>
      <p class="text-center text-muted">&copy; 2021 Company, Inc</p>
   </footer>
</div>

사용할 파일에 다음 코드 삽입

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

'WEB > Java BackEnd' 카테고리의 다른 글

[WEB-jsp/servlet] jsp와 servlet에서 session 구현하기 (0)	2021.11.30
[WEB] 회원가입 폼 만들기 / getParameterValues() , trim(), join(), contains() (0)	2021.11.25
[WEB] DBcpBean(DataBase Connection Pool Bean) (0)	2021.11.24
[WEB-jsp/servlet] jsp (0)	2021.11.24
[WEB] Get, Post (0)	2021.11.23

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/06 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

글 보관함

yoon's Devlog

티스토리 뷰