본문 바로가기
[ Developer ]/Web - Servlet JSP

[JSP Web] 관리자 페이지 Admin Page

by 김현섭. 2016. 6. 4.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
관리자 페이지
관리자 페이지는 CRUD만 하면 되는 간단한 기능을 갖는다
하지만 관리자 페이지는 일괄처리가 가능해야 하므로 간단하지만 어렵다고 할 수 있다

엑셀 파일을 이용해서 일괄적으로 등록하는 방식은 자주 사용된다

Article-Admin 프로젝트를 생성하기 위해 새로 생성 할 수 있지만
기존의 Article을 복사해서 Context Root만 바꿔주는 형식으로 변경을 진행한다

Admin이 가져야할 것

# Login
  • 관리자의 Flag를 줘서 관리자임을 나타낸다
  • Toad를 이용해서 Members에 컬럼을 추가한다 IS_ADMIN
  • admin이란 계정을 생성 후 IS_ADMIN에 Y값을 준다
  • 그리고 query문에서 ADMIN인지를 확인한다


그런데 이제 주소/admin으로 접근하면 /으로 빠져나가는 것을 볼 수 있다
그것은 SessionCheckFilter에서 /admin을 붙여준다



위와 같이 admin으로 접속된 것을 볼 수 있다
로그인 세션을 변경했으니 IS_ADMIN이 Y가 아닌 유저는 로그인이 불가능할 것이다

그러나 로그인 시 doLogin으로 가서 모두 '/'링크로 걸린 기존의 홈페이지로 변경이 된다
그래서 모든 경로들을 <c:url value="경로" /> 로 변경을 해주면 지금 접속된 프로젝트 안의 경로로 진행이 된다
모두 변경을 해줘야 편하다

그러나 이제 서블릿에서는 c:url을 사용할 수 없는데 Context주소를 받아올 수 있다
this .getServletContext (). getContextPath ();

위와 같이 계속 작성하기보다는 상수로 빼준다
메소드로 항상 부르기 위해 Root라는 클래스를 생성한다


위와 같이 작성된다면 요청된 서블릿에서 Context를 계속 리턴하게 된다
그리고 서블릿에서 다음과 같이 변경해주면 된다 


위의 방식을 이용하면 계속 변경을 해야한다
변경할 구문 예를 들어 response.sendRedirect를 복사 후 Ctrl + H를 누른다


File Search로 탭을 이동 후 Scope에서 Choose를 선택 후  New를 눌러서 워킹셋을 생성한다
워킹셋에서 리소스를 선택하고 변경할 Article-Admin을 선택한다


워킹셋을 추가 후 Search를 누르면 Search탭을 통해서 모두 변경을 해준다


밑으로 내려가는 버튼을 누르며 변경을 해주면 된다
위와 같이 변경을 해주는데 JSP에서 href와 src action 을 모두 변경해주면 된다

변경을 해주면 admin 페이지를 이용할 때 문제없이 admin으로 접근이 된다


# 관리자 페이지의 기능

일괄 삭제
관리자는 모든 글에 대해 삭제 권한을 가지고 있어야 한다
그러면 삭제 버튼을 보여줄 때 작성한 사용자일 때만 보여준 것 말고
IS_ADMIN 체크를 통해서 보여줘야 한다

우선 MemberVO에 isAdmin을 추가해준다


또한 관리자인지를 알려주는 메소드를 생성한다


이제 멤버를 불러오는 쿼리를 수정한다
멤버 VO에 추가한 isAdmin에 값을 넣기 위해 SELECT 구절에서 IS_ADMIN을 가져와야 한다


쿼리에서 수정을 한 후에는 쿼리의 값을 받는 DAO에서 IS_ADMIN을 받아 넣어야 한다
멤버 정보를 가져올 때 하나의 값을 더 받아서 넣고 가져오는 형식이다


Detail 페이지에서 Set 시킨 후 || 추가
이제는 Detail 페이지에서 <c:set을 이용해서 MemberVO가 갖는 isAdmin() 메소드의 실행 결과를 담는 var를 만든다


만약에 로그인한 사용자가 관리자라면 true값이 들어가 있을 것이고 일반 사용자라면 false값을 가지고 있게 된다
삭제와 수정 버튼을 보여줄 때 로그인한 사용자와 작성한 사람이 갖는지 확인하는 구문이 있는데
OR(||) 연산자를 통해서 관리자인 경우도 보여주게 된다


그리고 Delete하는 과정에서 사용자와 작성자를 다시 한번 체크하는 과정이 있다 그곳에서 또한 관리자를 권한 추가시킨다


# 일괄 삭제
이젠 일괄 삭제를 구현하기 위해서 List 페이지에서 한 컬럼에 체크박스를 추가하면 된다

테이블을 보여줄 때 massiveSelectCheckBox를 통해서 체크박스를 보여 주게 된다



그리고 반복 되는 부분을 form으로 엮어 input 타입을 줘서 form을 불러올 때 체크박스의 값들을 불러올 수 있게 한다

그리고 밑에 글 작성 버튼 옆에 일괄삭제라는 버튼을 생성해 준다


그리고 jQuery를 통해서 첫번째 행의 체크 박스를 눌렀을 때 모든 체크 박스를 체크하거나 해제하는 기술을 구현 했다

list.jsp


그리고 나서 일괄 삭제를 눌렀을 때는 삭제하겠냐는 확인 메시지를 출력 후 승인을 누르면 massiveDeleteForm에 있는
값들을 massiveDelete라는 서블릿에 모두 넘긴다

값들은 여러 개가 넘어 가므로 서블릿에서는 배열로 받아줘야 한다

MassiveDeleteServlet


배열로 받아서 사용자의 정보와 함께 Biz로 넘기게 된다


비즈에서는 member(로그인한 사용자)가 관리자인지 확인을 거치고 관리자라면 배열을 하나씩 삭제하는 DAO를 실행시킨다
DAO에서는 기존의 삭제하는 쿼리를 이용해 삭제를 하게 된다

# 메뉴 만들기
이제는 관리자 페이지에서 네비게이션 메뉴들을 만들어 주기 위해서 jsp파일들을 생성한다

Top 메뉴를 만들기 위해서 우선 JSP 파일을 생성하고 작성해 준다


header.css에서 만든 topMenu.jsp에 스타일을 준다



스타일을 주면 위와 같은 모양으로 만들 수 있다
이제는 게시글 List를 보여줄 때 게시글 관리를 위해 왼쪽 메뉴를 만들어 본다


위의 topMenu와 비슷하다
하지만 CSS를 변경해서 다른 느낌을 준다


위의 CSS들을 보면 li:FIRST_CHILD가 있는데 
li(리스트)에서 첫 번째 자식은 margin을 안주겠다는 의미이다

나머지는 CSS를 확인해보면 알 수 있다