목표
GNB(Global Navigation Bar)란 웹디자인 용어로써 어느 페이지를 들어가든지 공통적으로 사용할 수 있는 메뉴를 의미합니다. GNB 영역을 구현하면서 관리자 계정으로 로그인하였을 때 관리자 페이지로 이동할 수 있도록 GNB영역에 '관리자 페이지 이동' 버튼을 제작할 것입니다.
gnb영역에서 로그인한 상황에서 나타나는 로그아웃 버튼의 기능을 구현할 것입니다. 저번 로그아웃과 다르게 세션 제거를 요청하는 방식을 비동기 방식으로 구현할 것입니다.
0. 관리자 계정 생성
일반 계정과 관리자 계정을 구분하기 위해서 "book_member"테이블을 초기에 생성할 때 "adminCk"컬럼을 추가했었습니다. "adminCk"가 0인 경우는 일반계정, 1인 경우는 관리자 계정으로 구분하기 위해서입니다. 홈페이지를 통해 회원가입을 할 때 기본적으로 "adminCk"에 0이 입력되도록 하였습니다. 따라서 관리자 계정을 만들기 위해서 기존 생성되어져 있는 일반계정 중에 관리자계정으로 전환을 원하는 계정의 "adminCk"를 데이터를 1로 변경하면 됩니다. (현재 프로젝트에 회원가입 기능과 로그인 기능에 비밀번호 암호화 기능이 적용되어 있기 때문에 테이블 초기화를 진행하고 회원가입을 통해 계정을 생성한 뒤 "adminCk"데이터를 변환함을써 관리자 계정을 만들었습니다.)
-- 회원가입 테이블 초기화
truncate book_member;
-- 관리자 계정 변경
UPDATE book_member SET adminck = 1 where memberid = 'admin';1. gnb_area
gnb영역은 어느 페이지를 이동하든 공통적으로 사용할 수 있는 메뉴가 있는 영역입니다. 공통적으로 사용할 수 있는 메뉴이지만 매번 같은 메뉴만 있어야 되는 것은 아닙니다. 로그인을 한 상태, 로그인을 하지 않은 상태, 관리자 계정으로 로그인한 상태 등 각각의 상황에 맞게 메뉴의 목록이 달라야 합니다. 각 상황에 맞게 다른 메뉴 구현은 JSTL의 <c:if> 태그를 통해서 구현할 것입니다.
현재의 프로젝트에서는 gnb영역을 만들기 위해 새로운 태그를 추가할 필요가 없습니다. 초기 설계한 메인 페이지에 gnb_area영역(class명 'top_gnb_area'인 div태그)을 만들어 두었기 때문입니다. 해당 영역에 메뉴 목록을 작성하기 앞서서 기존의 gnb_area문장을 지우고 색상을 변경하겠습니다.
-- 변경전
<div class="top_gnb_area">
<h1>gnb area</h1>
</div>
-- 변경후
<div class="top_gnb_area">
</div>
-- 변경전
/* 홈페이지 기능 네비 */
.top_gnb_area{
width: 100%;
height: 50px;
background-color: #a2a2ea;
-- 변경후
/* 홈페이지 기능 네비 */
.top_gnb_area{
width: 100%;
height: 50px;
background-color: #f0f0f1;
}2. 로그인 X 메뉴
로그인하지 않았을 시에 표시될 목록들로 '로그인', '회원가입', '고객센터'로 구성하였습니다. 아래의 코드를 class명 top_gnb_area인 div태그 내부에 작성합니다. '로그인'과 '회원가입'의 경우 로그인을 하지 않았을 경우에만 보여야 하기 때문에 해당 태그의 로그인 상태를 체크하는 <c:if> 태그로 감싸준 후 a태그를 추가합니다.
<ul class="list">
<c:if test = "${member == null}"> <!-- 로그인 X -->
<li>
<a href="/member/login">로그인</a>
</li>
<li>
<a href="/member/join">회원가입</a>
</li>
</c:if>
<li>
고객센터
<li>
</ul>css는 아래와 같이 추가하였습니다.
a{
text-decoration: none;
}
.top_gnb_area{
width: 100%;
height: 50px;
background-color: #f0f0f1;
position:relative;
}
.top_gnb_area .list{
position: absolute;
top: 0px;
right: 0;
}
.top_gnb_area .list li{
list-style: none;
float : left;
padding: 13px 15px 0 10px;
font-weight: 900;
cursor: pointer;
}3. 로그인 O 메뉴
로그인했을 경우 표시될 메뉴들로는 '로그아웃', '마이룸', '장바구니'로 구성하였습니다. 해당 목록들은 로그인 했을 경우에만 표시되어야 하기 때문에 로그인했는지를 체크하는 <c:if>태그로 감싸줍니다.
<c:if test = "${member != null}"> <!-- 로그인 O -->
<li>
로그아웃
</li>
<li>
마이룸
</li>
<li>
장바구니
</li>
</c:if> 4. 관리자 계정 메뉴
1) 뷰 처리
관리자 계정 메뉴는 로그인 계정 메뉴에서 '관리자 페이지' 이동할 수 있는 메뉴만 추가해줄 것입니다. 따라서 로그인했을 경우의 <c:if>태그 내부에 아래의 코드를 작성합니다.
- 관리자 계정만 보이도록 하기 위해서 "adminCk"를 체크하는 <c:if> 태그로 감싸줍니다.
- 관리자 페이지 url 경로는 "/admin/main"입니다.
* 고객센터 별도 추가
<c:if test = "${member.adminCk == 1}"> <!-- 관리자 계정 -->
<li><a href="/admin/main">관리자 페이지</a></li>
</c:if>
<li>
고객센터
</li>2) 관리자 Controller 작성
관리자와 관련된 페이지 이동, 기능 수행 메서드를 따로 관리하기 위해 AdminController.java 파일을 새로 만듭니다.
클래스 선언부에 Controller로 인식시키기 위해 @Controller 어노테이션을 추가해주고 클래스 내부에 작성할 url메서드들이 "/admin" url 경로를 타도록 @RequestMapping 어노테이션을 추가해줍니다. 추가적으로 로그 기록을 찍기 위해 @log4j 어노테이션(lombok 있는 경우)을 선언하거나 Logger타입의 상수를 선언 및 초기화합니다. 그리고 관리자 메인 페이지로 이동하는 url 메서드를 작성합니다.
@Controller
@RequestMapping("/admin")
public class AdminController {
private static final Logger logger = LoggerFactory.getLogger(AdminController.class);
/* 관리자 메인 페이지 이동 */
@RequestMapping(value="main", method=RequestMethod.GET)
public void adminMainGET() throws Exception {
logger.info("관리자 페이지 이동");
}
}
3) 관리자 jsp생성
관리자 메인 페이지 이동 메서드를 만들었지만 아직 관리자 메인 페이지가 없기 때문에 관리자 메인 페이지(main.jsp)를 생성합니다. 관리자 메인 페이지 이동 url구조("admin/main")에 맞게 jsp 파일을 생성합니다. 관리자 메인페이지의 <body>태그내에는 관리자 페이지라는 것을 표시할 문구만 추가하였습니다.
4. 로그아웃 전체 흐름
로그아웃 메서드의 경우 메서드 작업이 완료된 뒤 지정된 특정 화면으로만 이동되도록 하였습니다. 로그아웃 버튼의 경우 거의 모든 페이지에 삽입되어야 하는데, 이럴 경우 페이지가 많아지면 그 페이지수만큼 그에 맞는 로그아웃 메서드를 작성해야 합니다. 하지만 이번에 구현할 로그아웃은 특정 화면으로 이동없이 현 페이지가 새로고침 됨으로써 화면의 구성이 바뀌도록 하는 것이 목표입니다.
전체적인 흐름은 로그아웃 버튼을 자바스크립트를 통해서 동작하게 만들고 ajax를 통해서 서버에 로그아웃 메서드를 요청하도록 할 것입니다. 로그아웃 메서드가 수행이 완료되면 다른 화면으로 이동 없이 요청한 페이지에서 새로고침 되어 로그아웃 되었을 때의 화면 구성으로 변환 되도록 작성할 것입니다.
로그아웃 버튼 클릭 => javascript 버튼 메서드 작동 => ajax통해 로그아웃 요청 => 서버로그아웃 수행 => 화면 이동없이 새로고침 통해 화면 변환
5. javascript 처리
Jquery를 사용할 것이기 때문에 메인 페이지(main.jsp) 상단에 먼저 Jquery url 스크립트 태그를 추가합니다.
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>먼저 gnb영역의 로그아웃 문구를 <a>태그로 감싸줍니다. 단 해당 <a>는 url경로를 추가해주는 것이 아니라 단순한 id속성만 부여합니다.
<li>
<a id="gnb_logout_button">로그아웃</a>
</li><body>태그 내부 하단에 <script>태그와 gnb영역의 로그아웃 버튼을 동작하는 메서드 코드를 작성합니다.
로그아웃을 POST방식으로 요청하는 ajax코드를 아래와 같이 작성합니다. 로그아웃을 요청하는 url을 작성합니다. [success]옵션에서 해당 요청이 정상적으로 수행되었는지 확인하기 위해 alert창이 뜨도록 작성하고, 현재의 페이지가 새로고침 되도록 작성하였습니다. (새로고침을 해야 세션의 변경사항이 화면에 반영되기 때문입니다.)
<script>
/* gnb_area 로그아웃 버튼 작동 */
$("#gnb_logout_button").click(function() {
//alert("버튼 작동");
$.ajax({
type:"POST",
url:"/member/logout.do",
success:function(data){
alert("로그아웃 성공");
document.location.reload();
}
}); // ajax
});
</script>
6. 서버 메서드 작성(MemberController.java)
MemberController.java에 뷰(View)에서 요청하는 url의 메서드를 작성합니다. 주의할 점은 ajax를 통해서 서버에 요청을 하는 방식이기 때문에 해당 메서드에 반드시 @ResponseBody어노테이션을 붙여주어야 한다는 점입니다. 뷰(View)에 특정 데이터를 전달해야 할 경우 반환 방식을 String으로 하면 되지만 메서드의 작업만 수행하면 되기 때문에 메서드의 반환 방식은 void로 하였습니다.
/* 비동기방식 로그아웃 메서드 */
@RequestMapping(value="logout.do", method=RequestMethod.POST)
@ResponseBody
public void logoutPOST(HttpServletRequest request) throws Exception {
logger.info("비동기 로그아웃 메서드 진입");
HttpSession session = request.getSession();
session.invalidate();
}7. 테스트
- 로그인하지 않았을 경우
- 로그인했을 경우
- 관리자 계정 로그인 했을 경우
- 관리자 페이지 버튼 기능 확인
- 로그아웃
