본문 바로가기
✨ Back-end/Servlet

[Servlet / JSP ] 템플릿 형태로 JSP 사용하기 <jsp : include>

by 환풍 2023. 2. 23.
728x90
반응형

템플릿이 뭘까?

 코드에서 고정적으로 사용되는 부분은 템플릿으로 만들어두고 동적으로 생성되는 부분만 템플릿의 특정 부분에 끼워 넣는 방식으로 작동되는 메서드이다.

 

템플릿은 왜 사용하는 걸까?

1. 많은 코드를 줄일 수 있다.
 - 템플릿은 간단한 문법을 사용한다. 따라서 코드를 훨씬 간결하게 짤 수 있다.

2. 유지보수에 용이하다.
 - 하나의 템플릿을 미리 만들어 놓고 관리하는 것은 수백개의 비슷한  페이지를 관리하는 것보다 훨씬 효율적이다.

3. 재사용성이 높다.
 - 웹 페이지는 똑같은 디자인의 페이지에 데이터만 바뀌는 경우가 많다. 이럴 때 템플릿을 사용하면 미리 템플릿을 만들어 놓고 데이터만 바꿔가면서 수많은 페이지를 만들어 낼 수 있으므로 효율적이다.

간단히 템플릿을 만들어 보며 개념을 알아보자.

 

index.jsp

index.jsp 파일에서 서블릿 main.do로 이동시켜주자.

 

**중요한 서블릿**

MemberController.java 서블릿

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
package controller;
 
import java.io.IOException;
import java.util.List;
 
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
 
@WebServlet("*.do")
public class MemberController extends HttpServlet {
    private static final long serialVersionUID = 1L;
    
    public MemberController() {
        super();
        // TODO Auto-generated constructor stub
    }
 
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doProcess(request, response);
    }
 
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doProcess(request, response);
    }
    
    public void doProcess(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //한글 인코딩
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html; charset=UTF-8");
        
        //어떤 페이지에서 요청이 왔는지 확인
        String requestURI = request.getRequestURI();
        String contextPath = request.getContextPath();
        String command = requestURI.substring(contextPath.length());
        System.out.println("command = " + command);
        
        //응답 페이지
        String page = "template.jsp";
        boolean isRedirect = false;
        // isRedirect를 주고 안주고의 차이 : 
 
        // 내용부 페이지
        String contentPage = "";
        
        // 메인 페이지 이동.
        if (command.equals("/main.do")) {
            request.setAttribute("name", "홍길동");
            //템플래이트로 이동함.
            
            contentPage = "main.jsp";
        }
        
        //회원가입 페이지로 이동        
        if(command.equals("/join.do"))
        {
            contentPage= "join.jsp";
            
        }
        
        if(command.equals("/login.do"))
        {
            contentPage="login.jsp";
 
        }
        
        request.setAttribute("contentPage", contentPage);
        
        
        //페이지 이동
        if(isRedirect) {
            response.sendRedirect(page);
            //얘는 데이터 안가져간다.
        }
        else{
            RequestDispatcher dispatcher = request.getRequestDispatcher(page);
            dispatcher.forward(request, response);
        }
 
    }
 
}
 
cs

page로 보낼 값이 43번째 줄처럼 if문 밖으로 빠져나와있다.

그리고 if 문안에는 contentPage를 나타내고있다.

request.setAtrribute("contentPage", contentPage) 를 if문 바깥으로 주어 변경된 값을 내보내준다.

그럼 당연히 ${  } 와 같은 꼴로 받게 될 것이다.

 

즉, 응답페이지 (page)는 항상 template.jsp로 고정이며,

do를 받아오는 if 문에서만 내용 페이지 (contentPage)가 바뀌게된다.

우선, template.jsp 페이지를 살펴보자.

 

template.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div>
    <div>
        <jsp:include page="menu.jsp"></jsp:include>
    </div>
    <div>
        <jsp:include page="${contentPage }"></jsp:include>
    </div>
</div> 
</body>
</html>
cs

두개의 <jsp:include page=" "></jsp:include> 으로 나뉘어져 있다.

첫번째 page는 menu.jsp로 이동을 나타낸다.

두번째 page는 ${contentPage}로 이동을 나타낸다.

각각 이동해보자.

 

menu.jsp

 

두번째 page${contentPage}는 

index.jsp에서 설정한 서블릿 main.do로 이동한다.

MemberController.java 서블릿 --> main.jsp

그렇게 하여 ${contentPage}의 첫번 째 값은 서블릿의 main.do에 있는 main.jsp를 받아 올 수 있다.

 

template.jsp

이렇게 template을 사용하면 하나의 jsp에서 두개 이상을 나타내며 바꿔가며 사용할 수있다.

 

위 menu.jsp 파일에서 회원가입과 로그인에 각각 a 태그를 주었다.

 

회원 가입을 눌러 join.do 서블릿으로 이동해보자.

MemberController.java 서블릿

join.jsp

이와 같이 menu.jsp 화면은 고정되어있고, 밑에 join.jsp 파일만 바뀌어 준것을 확인해볼 수 있다.

 

login.jsp

위랑 똑같이 menu.jsp 화면은 고정되어있고, 밑에 login.jsp 파일만 바뀌어 준것을 확인해볼 수 있다.

 

728x90
반응형
저작자표시 비영리 변경금지

'✨ Back-end > Servlet' 카테고리의 다른 글

[Servlet / JSP / SQL / Template / Session] 회원 관리 폼 만들기 (1) - CREATE (DB 테이블 생성)  (1) 2023.02.27
[Servlet / JSP ] 세션(Session) 데이터 저장, 전달, 삭제 방법  (0) 2023.02.26
[Servlet / JSP / SQL] 회원 관리 폼 만들기 (4) - UPDATE(정보 수정)  (0) 2023.02.23
[Servlet / JSP / SQL] 회원 관리 폼 만들기 (3) - DELETE(회원 삭제)  (0) 2023.02.23
[Servlet / JSP / SQL] 회원 관리 폼 만들기 (2) - INSERT(회원 등록)  (0) 2023.02.22

관련글

댓글

티스토리툴바