오늘은 회원 관리단에 속하는 회원 리스트와, 회원 정보 보기에 해당하는 페이지를 만들어 보았다.
회원 리스트는 관리자만 볼 수 있는 페이지이므로 회원 관리 버튼은 관리자만 볼 수 있게 설정해야 한다.
내가 구현하고 싶은 기능을 코드로 만드는게 진짜 어려운거 같다.
아무튼, 이렇게 설정하고 게시판 짤 때 순서는 늘 그렇듯
(1) Controller에서 list() 생성
(2) Service에서 list() 생성
(3) Mapper.java에서 list() 생성
(4) Mapper.xml에서 쿼리문 생성
(5) jsp 생성
<MemberController.java>
// 회원 리스트 - 관리자만 가능
@GetMapping("/list.do")
// @ModelAttribute 역할 : model에 담긴 변수로 처리해준다. → JSP까지 전달
public String list(@ModelAttribute PageObject pageObject, Model model) throws Exception {
model.addAttribute("list", service.list(pageObject));
return "member/list";
}페이지 처리도 같이 할거라서 PageObject를 파라메터로 가져왔다.
<MemberService.java>
// 회원 리스트
public List<MemberVO> list(PageObject pageObject) throws Exception{
// 전체 데이터의 갯수를 구해서 변수 pageObject에 넣는다.
pageObject.setTotalRow(mapper.getTotalRow(pageObject));
return mapper.list(pageObject);
}전체 데이터의 갯수를 구하는 코드가 들어가있어야 페이지 처리가 된다.
<MemberMapper.java>
// 1. 리스트
public List<MemberVO> list(PageObject pageObject) throws Exception;
// 2. 전체 데이터 개수
public long getTotalRow(PageObject pageObject) throws Exception;
<MemberMapper.xml>
<!-- 회원 리스트 -->
<select id="list" resultType="com.webjjang.member.vo.MemberVO">
select id, name, birth, gender, tel, email, status, gradeNo, gradeName, photo
from(
select rownum rnum, id, name, birth, gender, tel, email, status, gradeNo, gradeName, photo
from(
select m.id, m.name, m.birth, m.gender, m.tel, m.email, m.status, m.gradeNo, g.gradeName, m.photo
from member m, grade g
m.gradeNo = g.gradeNo
order by id
)
)
where rnum between #{startRow} and #{endRow}
</select>
<!-- 전체 데이터 개수 -->
<select id="getTotalRow" resultType="long">
select count(*) from member
</select>SQL을 작성할 때는 각별히 주의해야 한다.
쉼표가 들어가 있는지 오타는 없는지 Join은 잘 되어있는지
어차피 잘못 짜여진 SQL문은 오류가 나게 돼있으니 오류를 보고 해결하면 되겠다.
<list.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="pageNav" tagdir="/WEB-INF/tags" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 리스트</title>
<style type="text/css">
.dataRow:hover {
background: #eee;
cursor: pointer;
}
</style>
<script type="text/javascript">
// 아래 document가 표시 되면 처리되도록 한다.
$(function(){
$(".dataRow").click(function(){
var id = $(this).find(".id").text();
location = "view.do?id=" + id + "&page=${pageObject.page}&perPageNum=${pageObject.perPageNum}";
});
});
</script>
</head>
<body>
<div class="container">
<h1 style="text-align:center"><strong>회원 리스트</strong></h1>
<br/>
<table class="table">
<tr>
<th>사진</th>
<th>아이디</th>
<th>이름</th>
<th>생년월일</th>
<th>성별</th>
<th>연락처</th>
<th>이메일</th>
<th>상태</th>
<th>등급</th>
</tr>
<c:forEach items="${list }" var="vo">
<tr class="dataRow">
<td><img alt="photo" src="${vo.photo }" class="img-rounded" style="width:20px; height:24px"></td>
<td class="id">${vo.id }</td>
<td>${vo.name }</td>
<td><fmt:formatDate value="${vo.birth }" pattern="yyyy-MM-dd"/></td>
<td>${vo.gender }</td>
<td>${vo.tel }</td>
<td>${vo.email }</td>
<td>${vo.status }</td>
<td>${vo.gradeName }</td>
</tr>
</c:forEach>
<tr><td colspan="9"><pageNav:pageNav listURI="list.do" pageObject="${pageObject }"></pageNav:pageNav></td></tr>
</table>
</div>
</body>
</html>
여기서는 for문 사용 및 날짜 데이터 패턴을 잡아주고
페이지 네비를 만들기 위해 자바 코드 세개를 입력해줬다.
이렇게하면 회원 리스트 단에 해당하는 페이지는 완성이 된다.
다음으로 회원 정보 보기에 해당하는 페이지를 만들어보려고 한다.
모든 회원들의 정보를 볼 수 있는 권한은 관리자에게만, 일반 회원은 자신의 정보만 볼 수 있다.
만드는 순서는 위와 동일하다.
<MemberController>
// 회원 정보 보기 / 내 정보 보기
@GetMapping("/view.do")
public String view(String id, Model model, HttpSession session) throws Exception{
if(id == null) {
// 내 정보 보기(마이 페이지)
model.addAttribute("title", "내 정보 보기");
id = ((LoginVO)session.getAttribute("login")).getId();
} else {
// 회원관리 - 회원 정보 보기
model.addAttribute("title", "회원 정보 보기");
}
model.addAttribute("vo", service.view(id));
return "member/view";
}위의 코드는 일반 회원으로 로그인 했냐, 관리자로 로그인 했냐에 따라 타이틀을 다르게 나오게 하는 코드인데
사실 잘 이해가 안간다. 일반 회원으로 로그인해서 내 정보 보기를 누르면 왜 id가 null 값으로 넘어가는지 모르겠다.
이런식으로 상단에 있는 내 이름을 클릭하면 마이 페이지로 이동하고 타이틀이 내 정보 보기로 나온다.
관리자로 로그인 했을 때 보이는 회원 관리 버튼을 눌러 회원 정보를 볼 때는
회원 정보 보기로 타이틀이 변경 되는 것을 확인할 수 있다.
<MemberService.java>
// 회원 정보 보기
public MemberVO view(String id) throws Exception {
return mapper.view(id);
}
<MemberMapper.java>
// 3. 회원정보
public MemberVO view(String id) throws Exception;
<MemberMapper.xml>
<!-- 회원 정보 보기 -->
<select id="view" resultType="com.webjjang.member.vo.MemberVO">
select m.id, m.name, m.birth, m.gender, m.tel, m.email, m.status,
m.gradeNo, g.gradeName, m.photo, m.regDate
from member m, grade g
where (id = #{id}) and (m.gradeNo = g.gradeNo)
</select><select> 태그가 닫히기 전의 마지막 행에서 where절 뒤에 아무것도 써주지 않아,
TooManyResultsException 오류가 발생했다.
Join 조건을 제대로 쓰지 않아서 결과값이 많이 나온다는 오류이므로 SQL문을 확인하도록 한다.
<view.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>${title }</title>
</head>
<body>
<div class="container">
<h1 style="text-align:center;"><strong>${title }</strong></h1>
<br>
<table class="table">
<tr>
<th>사진</th>
<td><img alt="${vo.photo }" src="${vo.photo }"></td>
</tr>
<tr>
<th>아이디</th>
<td>${vo.id }</td>
</tr>
<tr>
<th>이름</th>
<td>${vo.name }</td>
</tr>
<tr>
<th>성별</th>
<td>${vo.gender }</td>
</tr>
<tr>
<th>생년월일</th>
<td><fmt:formatDate value="${vo.birth }" pattern="yyyy-MM-dd"/></td>
</tr>
<tr>
<th>연락처</th>
<td>${vo.tel }</td>
</tr>
<tr>
<th>이메일</th>
<td>${vo.email }</td>
</tr>
<tr>
<th>가입일</th>
<td><fmt:formatDate value="${vo.regDate }" pattern="yyyy-MM-dd HH:mm"/></td>
</tr>
<tr>
<th>등급</th>
<td>${vo.gradeName }</td>
</tr>
<tr>
<td colspan="2" style="text-align:center;">
<!-- 로그인한 일반회원만 정보수정/회원탈퇴가 가능하다. -->
<c:if test="${empty param.id }">
<a href="update.do" class="btn btn-primary">정보 수정</a>
<a href="delete.do" class="btn btn-primary">회원 탈퇴</a>
<a href="changePassword.do" class="btn btn-primary">비밀번호 변경</a>
</c:if>
<!-- 관리자 메뉴 : 관리자 & 넘어오는 ID가 있다. & 넘어오는 ID가 관리자가 아니다. -->
<c:if test="${login.gradeNo == 9 && !empty param.id && login.id != vo.id}">
<!-- 상태 변경 -->
<form action="changeStatus.do" method="post">
<input type="hidden" name="id" value="${vo.id }">
<input type="hidden" name="page" value="${param.page }">
<input type="hidden" name="perPageNum" value="${param.perPageNum }">
<div class="input-group">
<select name="status" class="form-control">
<option ${(vo.status == "정상")?"selected":"" }>정상</option>
<option ${(vo.status == "탈퇴")?"selected":"" }>탈퇴</option>
<option ${(vo.status == "강퇴")?"selected":"" }>강퇴</option>
<option ${(vo.status == "휴면")?"selected":"" }>휴면</option>
</select>
<div class="input-group-btn">
<button class="btn btn-default">변경</button>
</div>
</div>
</form>
<!-- 등급 변경 -->
<form action="changeGradeNo.do" method="post">
<input type="hidden" name="id" value="${vo.id }">
<input type="hidden" name="page" value="${param.page }">
<input type="hidden" name="perPageNum" value="${param.perPageNum }">
<div class="input-group">
<select name="gradeNo" class="form-control">
<option ${(vo.gradeNo == "1")?"selected":"" } value="1">일반회원</option>
<option ${(vo.gradeNo == "9")?"selected":"" } value="9">관리자</option>
</select>
<div class="input-group-btn">
<button class="btn btn-default">변경</button>
</div>
</div>
</form>
</c:if>
</td>
</tr>
</table>
</div>
</body>
</html>회원 정보를 보는 페이지에서는
일반 회원 - 정보 수정 / 회원 탈퇴 / 비밀번호 변경 을 할 수 있게 만들었고
관리자 - 등급 변경 / 회원 상태 변경을 할 수 있도록 만들었다.
글이 길어지는 관계로 회원에 대한 정보 변경은 다음 포스트에 올리겠다.
이렇게하면 회원 리스트와, 회원 정보 보기에 해당하는 페이지를 쉽게 만들 수 있다.
'BACK-END > SPRING' 카테고리의 다른 글
| Ajax (0) | 2022.05.24 |
|---|---|
| [Spring]회원 정보 변경하기(등급 변경 / 상태 변경) (0) | 2022.03.16 |
| [Spring-JS]데이터 변경 시 Confirm이벤트 처리 (0) | 2022.03.15 |
| [Spring]예외처리(404에러, 500에러) (0) | 2022.03.15 |
| [Spring]회원가입 폼 만들기 (0) | 2022.03.14 |
댓글