본문으로 바로가기

[JSP개발] 페이지 모듈화 <jsp:include> 적용

category 코딩/JSP 2016. 11. 24. 11:52








1. 개요







로그인, 로그아웃을 구현한 이후 페이지 전체를 변경하였다. MainForm.jsp에 <jsp:include> 태그 적용으로 페이지를 모듈화했다. 상단과 하단은 공통 영역, 중단은 메뉴 선택에 따른 내용이 표시된다. 중단에 표시되는 화면은 로그인, 회원가입 화면이다.



■ JSP

  • MainForm.jsp : 메인화면, 지난 포스팅과 달라진 점은 현재 메인화면은 단순한 레이아웃 역할만 한다.

  • Header.jsp : 상단 영역을 담당하는 JSP, 각종 메뉴가 위치하고 있다.

  • FirstView.jsp : 중단 영역에 처음 표시될 화면


■ CSS

  • bootstrap.min.css : 상단 영역 버튼 디자인 관련 CSS




2. 소스 코드



아래의 소스는 지난 포스팅과 동일하다.

  • MemberBean.java

  • DBConnection.java

  • MemberDAO.java


join_style.css는 #wrap 부분을 주석으로 처리하였다. 첨부된 소스코드를 확인하면 될 것이다.



 MainForm.jsp


  • 4 ~ 6 줄

중단 영역을 메뉴 선택마다 변경하기 위해 사용하였다. contentPage라는 파라미터를 받아와 그 정보를 <jsp:include> 태그에 집어넣는다. contentPage는 URL 값이므로 <jsp:include> 에서는 해당 URL의 페이지를 중단 영역에 표시하게 된다.


최초 실행시 contentPage값이 없을 경우에는 첫 화면인 FirstView.jsp를 출력한다.


  • 20 ~ 46 줄

메인 화면의 CSS이다. 상, 중, 하단 영역의 크기와 배경색을 지정한다.


  • 52 ~ 60

<div>로 구분된 영역이다. header는 상단, main은 중단, footer는 하단이다.


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
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%
    String contentPage=request.getParameter("contentPage");
    if(contentPage==null)
        contentPage="FirstView.jsp";
%>
<html>
<head>
    <title>메인 화면</title>
    
    <style>
        /* 
        레이아웃 전체 가운데 정렬 태그  
        - margin:0 auto 0 auto;(시계방향으로 위, 오른쪽, 아래, 왼쪽)
        왼쪽, 오른쪽 바깥여백을 auto로 주면 중앙정렬이 된다. 
        
        전체를 감싸주는 태그 #wrap 
        */
        #wrap {
            width: 800px;
            margin: 0 auto 0 auto;
        }
        
        #header {
            text-align: center;
            width: 800px;
            height: 150px;
            background-color: #92FFFF;
            padding: 60px 0px;
        }
        
        #main {
            float: left;
            width: 800px;
            height: 500px;
            background-color: #FFCA6C;
            text-align:center;
            vertical-align: middle;
        }
        #footer {
            clear: left;
            width: 800px;
            height: 60px;
            background-color: #7DFE74;
        }
    </style>
    
</head>
<body>
 
    <div id="wrap">
        <div id="header">
            <jsp:include page="Header.jsp" />
        </div>
        <div id="main">
            <jsp:include page="<%=contentPage%>" />
        </div>
        <div id="footer"> 하단 </div>
    </div>
    
</body>
</html>
cs



 FirstView.jsp


실행 시 중단 영역에 처음으로 표시되는 화면이다.


  • 8 ~ 18 줄

최초 MainForm.jsp 실행시 그리고 로그인이 안 되어있을 경우에 출력되는 부분이다. 첫 화면이라는 텍스트와 함께 이미지를 출력한다.


  • 19 ~ 25

로그인이 되어있을 경우 로그인된 사용자의 ID를 화면에 출력한다.


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
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<html>
    <head>
        <title>첫화면</title>
    </head>
    <body>        
    <%
        if(session.getAttribute("sessionID"== null// 로그인이 안되었을 때
        { 
    %>
            <br><br><br>
            <b><font size="6" color="gray">첫화면</font></b>
            <br><br><br>
            <img src="img/welcome.jpg">
            <br><br>    
    <%
        }
        else // 로그인 했을 경우
        {
    %>
            <br><br><br>
            <font size=6 color="skyblue"><%=session.getAttribute("sessionID"%></font>
            <font size=6>님 환영합니다.</font>
    <%    } %>
    </body>
</html>
cs



■ Header.jsp 


상단 영역 페이지이다. 메뉴 버튼을 출력한다.


  • 7

버튼 스타일 정보를 담고 있는 CSS 파일을 링크시킨다.


  • 19 ~ 37 줄

각 버튼을 클릭할 시 보여줄 페이지를 지정하는 함수이다. 


  • 44 ~ 60 줄

화면에 표시되는 버튼이다. 로그인 되었을 경우와 로그인 되지 않을 경우 보여주는 버튼이 다르게 처리하였다. 각 버튼은 클릭 시 changeView( )를 호출하며 특정 값을 넘겨준다. 이 값을 기준으로 표시될 화면을 구분한다.


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
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<html>
<head>
    <title>상단 영역</title>
    
    <link rel="stylesheet" href="css/bootstrap.min.css">
    
    <style type="text/css">
        #wrap{
            text-align: center;
            width: 800px;
            height: 150px;
        }
    </style>
    
    <script type="text/javascript">
        
        function changeView(value){
            
            if(value == "0"// HOME 버튼 클릭시 첫화면으로 이동
            {
                location.href="MainForm.jsp";
            }
            else if(value == "1"// 로그인 버튼 클릭시 로그인 화면으로 이동
            {
                location.href="MainForm.jsp?contentPage=member/view/LoginForm.jsp";
            }
            else if(value == "2"// 회원가입 버튼 클릭시 회원가입 화면으로 이동
            {
                location.href="MainForm.jsp?contentPage=member/view/JoinForm.jsp";
            }
            else if(value == "3"// 로그아웃 버튼 클릭시 로그아웃 처리
            {
                location.href="member/pro/LogoutPro.jsp";
            }
        }
    </script>
    
</head>
<body>
    <div id = "wrap">
        <p>
            <button class="btn btn-success" onclick="changeView(0)">HOME</button>
        <%
            // 로그인 안되었을 경우 - 로그인, 회원가입 버튼을 보여준다.
            if(session.getAttribute("sessionID")==null){ 
        %>
            <button id="loginBtn" class="btn btn-primary" onclick="changeView(1)">로그인</button>
            <button id="joinBtn" class="btn btn-primary" onclick="changeView(2)">회원가입</button>
            
        <%
            // 로그인 되었을 경우 - 로그아웃, 내정보 버튼을 보여준다.
            }else
        %>
            <button id="logoutBtn" class="btn btn-primary" onclick="changeView(3)">로그아웃</button>
            <button id="updateBtn" class="btn btn-primary" >내정보</button>
        <%    }    %>    
 
            <button id="memberViewBtn" class="btn btn-warning">회원보기</button>
        </p>
    </div>
</body>
</html>
cs



 LoginForm.jsp


변경 사항은 첨부된 소스 코드 참고


  • 48 ~ 50

취소 버튼 클릭 시 MainForm.jsp로 이동된다.


  • 76

기존 회원가입 버튼에서 취소 버튼으로 변경



 LoginPro.jsp


변경 사항은 첨부된 소스 코드 참고


  • 32 ~ 36 줄

MainForm.jsp에서는 contentPage라는 파라미터 값을 받아서 처리하므로 URL을 변경하였다.  



 LogoutPro.jsp


변경 사항은 첨부된 소스 코드 참고


  • 10

로그아웃 시 MainForm.jsp으로 돌아가도록 URL을 변경하였다.



 JoinForm.jsp


변경 사항은 첨부된 소스 코드 참고


  • 47 줄

취소 버튼 클릭 시 MainForm.jsp로 이동된다



 JoinPro.jsp


변경 사항은 첨부된 소스 코드 참고


  • 19 줄

CSS 파일의 경로를 변경하였다.


  • 23 ~ 25 줄

확인 버튼 클릭 시 MainForm.jsp으로 돌아가도록 처리하였다.


  • 100

확인 버튼 클릭 시 이벤트 추가




3. 실행 결과





MainForm.jsp 실행 시 첫 화면이다. MainForm.jsp은 상, 중, 하단으로 구성되어 있다.






로그인 되었을 경우 FirstView.jsp에 로그인한 사용자를 표시한다. 그리고 상단의 버튼이 로그아웃, 내정보로 변경된다.






4. 소스코드 다운로드 (war파일)



JSP_DEV.war





RSS구독 링크추가 트위터 이메일 구독