4. 회원정보 관리 페이지 이동
4-1. 회원 탈퇴
<li><a href="member/mypage.html">회원정보 관리 페이지 이동</a></li>
src/main/webapp 소스 폴더 하위에 member 폴더를 만들고, 그 안에 mypage.html 파일을 만들자.
[mypage.html]
[mypage.html]
<script>
function member_delete(){
if(!(frm1.deleteId.value)){
alert('탈퇴할 회원의 아이디를 입력하세요');
frm1.deleteId.focus();
return;
}
let yn = confirm("정말 탈퇴하시겠습니까?");
if(yn){
frm1.submit();
}
}
</script><form name = "frm1" method="get" action="../MemberDelete">
탈퇴할 회원 아이디: <input type="text" name="deleteId">
<button type="button" onclick="member_delete()">회원탈퇴</button>
</form>회원탈퇴 버튼을 클릭하면 member_delete() 함수가 호출되는 자바스크립트를 작성하였다.
아이디를 빈칸으로 두고 버튼을 누르면 아이디를 입력하라는 메시지를 띄우고, 아이디를 입력했다면 정말 탈퇴할 것인지 한 번 확인하는 메시지를 출력하도록 하였다.
서블릿 작성
src/main/java/servlet에 MemberDeleteServlet을 작성하자.
- 어노테이션 => url-pattern: /MemberDelete
- doGet() 방식
- 페이지 이동 방식: redirect로 이동 => sendRedirect(이동할 페이지) 이용
[MemberDeleteServlet]
실행해보기
4-2. 회원 정보 수정
[mypage.html]
<script>
function member_update(){
if(!(frm2.modiId.value)){
alert('수정할 회원의 아이디를 입력하세요');
frm2.modiId.focus();
return false;
}
return true;
}
</script><form name="frm2" method="get" action="../MemberUpdate" onsubmit="return member_update()">
<!-- false를 반환하면 submit하지 않음 -->
수정할 회원 아이디: <input type="text" name="modiId">
<button type="submit">회원정보 수정하러 가기</button>
</form>
서블릿 작성
src/main/java/servlet에 MemberUpdateServlet을 작성하자.
- 어노테이션 => url-pattern: /MemberUpdate
- doGet() 방식
- 페이지 이동 방식: forward 방식으로 이동 => RequestDispatcher의 forward() 이용
화면 이동 방식 두 가지
1. 리디렉트(redirect)
- sendRedirect(이동할 페이지) 이용
- 지정된 페이지로 새롭게 요청을 보내서 응답하는 방식
- 새로운 request를 보내기 때문에 request에 저장된 값이 있으면 꺼내서 사용할 수 없다.
- 현재 실행 중인 서블릿을 중지하고 브라우저로 응답을 보내라는 것을 의미한다.
- 브라우저로 하여금 리디렉트로 지정한 경로를 다시 요청하면서 브라우저의 URL이 리디렉트한 URL로 변경된다.
- 두 번의 요청과 응답을 사용하기 때문에 실행 속도가 느리다.
- 최종적으로 요청된 리디렉트 경로가 브라우저의 URL에 남기 때문에 어느 페이지에 대한 응답인지 확인할 수 있다.
- DB에 변화를 주는 작업 (회원가입, 게시판 글쓰기 등)의 경우 Redirect 방식이 적합하다.
2. 포워딩(forwarding)
- RequestDispatcher의 forward() 이용
- HttpServletRequest 객체의 getRequestDispatcher() 메서드 이용
- 서블릿 컨테이너에 해당하는 객체인 ServletContext가 제공하는 getRequestDispatcher() 메서드 이용
- 서버 내부에서 지정된 페이지로 이동하는 방식
- 이동된 페이지에서는 request를 함께 공유하기 때문에 request에 저장된 값이 있으면 이동된 페이지에서 꺼내서 사용할 수 있다.
- 브라우저의 URL은 이전 URL을 가리킨다. (요청 URL은 변경되지 않는다.)
- 한 번의 요청과 응답으로 화면을 이동하기 때문에 실행 속도가 빠르다.
- 시스템에 변화가 생기지 않는 작업 (단순 조회, 검색)의 경우 forward 방식이 적합하다.
포워딩(forwarding) 방식으로 MemberUpdateServlet을 작성하자.
[MemberUpdateServlet]
위의 코드에서 req.setAttribute("user", user)로 MemberVO 객체를 "user" = user 짝을 이루어 request에 저장했다.
회원의 아이디가 알맞게 입력되면 member/edit.jsp로 이동하게 된다. edit.jsp에서 setAttribute() 메서드를 통해 저장했던 user 객체를 getAttribute() 메서드로 꺼내야 한다.
Object getAttribute(String name): 저장된 데이터를 Object형으로 리턴한다.
이 때, getAttribute()를 사용하면 Object형으로 리턴하기 때문에 강제 형변환이 필요하다.
위의 내용을 참조하여 src/main/webapp 일반 폴더 하위의 member 폴더에 edit.jsp 파일을 만들자.
[edit.jsp]
<%@page import="member.model.MemberVO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>::회원정보 수정::</title>
</head>
<body>
<%-- 자바 영역 --%>
<% //scriptlet태그: 자바코드를 마음대로 기술 가능
//내장객체: (request, response, out, session, application, exception...)
member.model.MemberVO vo = (member.model.MemberVO)request.getAttribute("user");
//반환타입이 Object이기 때문에 downcast해야 한다.
//out.println("<h1>user: " + vo + "</h1>");
if(vo==null){
%>
<%-- HTML 영역 --%>
<script>
alert('해당 아이디의 회원은 없습니다');
history.back();
</script>
<%
return;
}
%>
<%-- HTML 영역 --%>
<div id="wrap">
<form name="mf" method="post" action="MemberUpdateEnd">
<!-- MemberUpdateEndServlet.java에 @WebServlet("/MemberUpdateEnd")으로 전송됨 -->
<table border="1" style="width:80%; margin:3em auto">
<tr>
<th colspan="2">Member Update-회원정보 수정</th>
</tr>
<tr>
<th>
이 름
</th>
<td>
<input type="text" name="name" value="<%=vo.getName()%>">
<%--jsp 주석
<%=변수 %>: 변수값을 출력함
<%=메서드()%>: 메서드가 반환하는 값을 출력함
--%>
</td>
</tr>
<tr>
<th>
아이디
</th>
<td>
<input type="text" name="id" value="<%=vo.getId()%>" readonly>
</td>
</tr>
<tr>
<th>
비밀번호
</th>
<td>
<input type="password" name="pw">
</td>
</tr>
<tr>
<th>
연락처
</th>
<td>
<input type="text" name="tel" value="<%=vo.getTel()%>">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button>수정처리</button>
<button type="reset">다시쓰기</button>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
URL을 보면 http://localhost:9090/MyWeb/MemberUpdate?modiId=hong이다.
포워딩 방식으로 화면을 이동했기 때문에 URL에 member/edit.jsp가 뜨지 않고, "/MemberUpdate" 가 뜨는 것이다.
이제 이 페이지에서 회원의 인적사항을 바꿔서 입력하면, 변경사항대로 java_member에 저장하도록 구현해보자.
<form name="mf" method="post" action="MemberUpdateEnd">
<input type="text" name="id" value="<%=vo.getId()%>" readonly>
<input type="text" name="name" value="<%=vo.getName()%>">
<input type="text" name="tel" value="<%=vo.getTel()%>">
<input type="password" name="pw">
서블릿 작성
src/main/java/servlet에 MemberUpdateEndServlet을 작성하자.
- 어노테이션 => url-pattern: /MemberUpdateEnd
- doPost() 방식
- 페이지 이동 방식: redirect 방식
[MemberUpdateEndServlet]
5. 회원목록 페이지 이동
<li><a href="MemberList">회원목록 페이지 이동</a></li>
java_member의 회원목록을 출력하여 보여주는 페이지를 만들자.
서블릿 작성
src/main/java/servlet에 MemberListServlet을 작성하자.
- 어노테이션 => url-pattern: /MemberList
- doGet() 방식
- 페이지 이동 방식: forward 방식으로 이동 => RequestDispatcher의 forward() 이용
[MemberListServlet]
위의 코드에서 req.setAttribute("userAll", arr)로 MemberVO 객체를 "userAll" = arr 짝을 이루어 request에 저장했다.
이제 member/list.jsp에서 setAttribute() 메서드를 통해 저장했던 arr 객체를 getAttribute() 메서드로 꺼내야 한다.
Object getAttribute(String name): 저장된 데이터를 Object형으로 리턴한다.
이 때, getAttribute()를 사용하면 Object형으로 리턴하기 때문에 강제 형변환이 필요하다.
위의 내용을 참조하여 src/main/webapp 일반 폴더 하위의 member 폴더에 list.jsp 파일을 만들자.
[list.jsp]
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.util.*, member.model.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>::전체 회원 목록::</title>
</head>
<body>
<div id="wrap">
<h1>회원 목록 [관리자 페이지 - Admin]</h1>
<table border="1">
<tr>
<th>이름</th>
<th>아이디</th>
<th>연락처</th>
<th>가입일</th>
<th>삭제</th>
</tr>
<!-- ---------------- -->
<%
ArrayList<MemberVO> arr = (ArrayList<MemberVO>)request.getAttribute("userAll");
if(arr==null || arr.size()==0){
%>
<tr>
<td colspan="5">
<b>데이터가 없습니다</b>
</td>
</tr>
<%
} else{
for(MemberVO vo:arr){
%>
<tr>
<td><%=vo.getName() %></td>
<td><%=vo.getId() %></td>
<td><%=vo.getTel() %></td>
<td><%=vo.getIndate() %></td>
<td>
<a href="#" onclick="goDel('<%=vo.getId()%>')">삭제</a>
</td>
</tr>
<% }//for----
}//else-----------
%>
<!-- ---------------- -->
</table>
<!-- 삭제 관련 form -------- -->
<form name="df" method="post" action="MemberDelete">
<input type="hidden" name="deleteId"> <!-- hidden을 text로 바꾸면 보임 -->
</form>
</div>
<script>
function goDel(uid){
df.deleteId.value = uid;
let yn = confirm(uid+"님의 정보를 삭제할까요?");
if(yn){
df.submit();
}
}
</script>
</body>
</html>