게시판 만들기/JSP ➜ Spring

[Spring] 메인 페이지/내비게이션 <jsp:include>

code-mo 2023. 2. 7. 07:30
728x90

1. JSP 메인 페이지

메인 페이지의 코드가 길어 공통되는 부분을  JSP 액션 태그 <jsp:include>를 이용하여 공통부분
내비게이션을 따로 분리시켰다.
로그인, 회원가입 페이지도 <jsp:include page="../common/navigation.jsp"></jsp:include>를 적용
 25줄가량의의 중복 코드가 1줄로 줄어들었다

 

main.jsp

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
<body>
    <jsp:include page="../common/navigation.jsp"></jsp:include>
    <div class="container">
        <div class="jumbotron">
            <div class="container">
                <h1>웹 사이트 소개</h1>
                </br>
                <p>이 웹 사이트는 부트스트랩으로 만든 JSP웹 사이트입니다. 최소한의 간단한 로직만을 이용해서 개발했습니다.</p>
                <p>
                    <a class="btn btn-primary btn-pull"
                        href="https://github.com/sunyoring" role="button">개발자 알아보기</a>
                </p>
            </div>
        </div>
    </div>
    <div class="container">
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>>
                <li data-target="#myCarousel" data-slide-to="1"></li>>
                <li data-target="#myCarousel" data-slide-to="2"></li>>
            </ol>
            <div class="carousel-inner">
                <div class="item active">
                    <img src="${pageContext.request.contextPath}/resources/images/cityView.jpg">
                </div>
                <div class="item">
                    <img src="${pageContext.request.contextPath}/resources/images/cityView2.jpg">
                </div>
                <div class="item">
                    <img src="${pageContext.request.contextPath}/resources/images/cityView3.jpg">
                </div>
            </div>
            <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>
    </div>    
</body>
 cs

 

navigation.jsp

로그인한 사용자의 정보를 서버의 session에 사용자 아이디 값을 조회하여 있으면은 로그아웃 버튼을 보여주고
session에 사용자 아이디가 없다면 로그인, 회원가입 버튼을 보여준다
JSP 내장 객체를 대신하여 JSTL 태그를 사용하여 코드가 더 간결하고 가독성이 좋아졌다.
<c:if test="${sessionScope.userID == null}">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<c:if test="${sessionScope.userID == null}">
    <ul class="nav navebar-nav navbar-right">
        <li class="dropdown"><a href="#" class="dropdown-toggle"
            data-toggle="dropdown" role="button" aria-haspopup="true"
            aria-expended="false">접속하기<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="login">로그인</a></li>
                <li><a href="join">회원가입</a></li>
            </ul></li>
    </ul>
</c:if>
 
<c:if test="${sessionScope.userID != null}">
    <ul class="nav navebar-nav navbar-right">
        <li class="dropdown"><a href="#" class="dropdown-toggle"
            data-toggle="dropdown" role="button" aria-haspopup="true"
            aria-expended="false">회원관리<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="logoutAct">로그아웃 </a></li>
            </ul></li>
    </ul>
</c:if>
 cs