비로그인 vs 로그인
- 비로그인 했을 경우 메뉴 버튼은 다음과 같습니다.
- 로그인을 하지 않아서 로그인 혹은 회원가입 버튼이 출력됩니다.
- 로그인을 했을 경우 메뉴 버튼은 다음과 같습니다.
- 로그인을 했기 때문에 회원정보 혹은 로그아웃 버튼이 출력됩니다.
- 회원정보 버튼을 클릭할 경우 회원정보 상세보기가 가능합니다.
- 회원정보 상세보기 화면에서는 회원정보를 수정하거나 삭제할 수 있습니다.
- 로그아웃 버튼을 클릭할 경우 로그인 정보를 만료시키고 로그아웃 할 수 있습니다.
회원정보 상세보기(비밀번호 확인)
- 회원정보 상세보기 화면을 출력하기 전에 회원정보 상세보기 화면에서는
데이터를 수정하거나 삭제하는 동작을 할 수 있기 때문에 비밀번호를 한 번 더 확인합니다.
- header.jsp입니다. 세션에 아이디 값이 있는 경우 회원정보 버튼을 출력하는데
onclick="changeView(3)"이 작성되어 있습니다.
- hearder.jsp의 onclick function 구현 부분입니다.
- changeView("value")에서 value가 3인 경우 PwdCheckForm.do로 이동합니다.
PwdCheckForm.do
|
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!doctype html>
<html lang="en">
<head>
<title>회원정보 상세보기</title>
<style>
.container {
padding-top: 30px;
text-align: center;
width: 300px;
margin-top: 100px;
}
.btn{
margin-top: 20px;
}
.text{
-webkit-text-security: disc;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<script type="text/javascript">
function pwdCheckAction() {
let formPWD = document.pwdInfo;
let inputPWD = formPWD.memberPWD.value;
if(inputPWD == "") { //비밀번호가 입력되지 않으면
alert("비밀번호를 입력하세요");
formPWD.memberPWD.focus();
return false;
}
if(inputPWD != "") { //비밀번호가 입력됐으면
if(inputPWD == "${sessionScope.memberPWD}"){ //세션에 저장된 비밀번호와 입력값이 동일한 경우
location.href="MeberDetailAction.do"; //MemberDetailAction.do로 이동
} else {
alert("비밀번호가 틀렸습니다."); //세션에 저장된 비밀번호와 입력값이 동일하지 않은 경우
formPWD.memberPWD.focus();
return false;
}
}
}
</script>
</head>
<body class="bg-light">
<form name="pwdInfo" method="post" action="MemberDetailAction.do" onsubmit="return pwdCheckAction()">
<div class="container">
<label for="lastName" class="form-label">비밀번호를 다시 한번 입력해주세요.</label>
<input type="password" class="form-control" id="pwd" name="memberPWD">
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
<button type="submit" class="btn btn-primary btn-lg px-3 gap-2">회원정보 상세보기</button>
</div>
</div>
</form>
</body>
</html>
|
cs |
- PwdCheckForm.jsp 입니다.
- pwdCheckAction()으로 비밀번호 입력 칸에 비밀번호가 입력되었는지 확인하고
입력된 비밀번호가 session에 존재하는 회원 비밀번호의 값과 일치하는지 확인합니다.
- 비밀번호가 입력되었고 session에 존재하는 회원의 비밀번호와 일치하면 'MemberDetailAction.do'로 이동합니다.
- 구현된 화면은 다음과 같습니다.
- 비밀번호를 입력하지 않고 회원정보 상세보기를 입력하면 다음 화면이 출력됩니다.
- 입력한 비밀번호와 session 값이 일치하지 않으면 다음 화면이 출력됩니다.
MemberDetailAction.do
- 회원정보 상세보기를 위해 세션에 존재하는 회원 아이디를 이용해 회원의 정보를 모두 가져옵니다.
|
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
|
package jsp.member.action;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import jsp.common.action.Action;
import jsp.common.action.ActionForward;
import jsp.member.model.MemberBean;
import jsp.member.model.MemberDAO;
//회원정보 상세보기 구현 클래스
public class MemberDetailAction implements Action {
@Override
public ActionForward execute(HttpServletRequest request, HttpServletResponse response) throws Exception {
ActionForward forward = new ActionForward();
HttpSession session = request.getSession();
MemberDAO mDAO = MemberDAO.getInstance();
String id = (String)session.getAttribute("memberID"); //세션에서 아이디 가져오기
MemberBean member = mDAO.inquireData(id); //아이디를 파라미터로 해서 회원정보 모두 가져오기
request.setAttribute("memberInfo", member); //회원정보를 전달
forward.setRedirect(false);
forward.setPath("MemberDetail.do"); //MemberDetail.do로 이동
return forward;
}
}
|
cs |
- 회원정보 상세보기 화면을 출력하기 전에 데이터를 가져오는 Action 클래스입니다.
- 회원정보를 조회하기 전에 session 객체를 생성해서 세션에 존재하는 회원 아이디 값을 가져옵니다.
- MemberDAO의 inquireData() 메서드를 실행합니다.
- inquireData 메서드입니다.
- 파라미터로 전달받은 id값을 이용해 회원정보를 조회합니다.
- 조회된 정보를 memberBean 객체에 저장하고 memberBean 객체를 반환합니다.
- 반환된 memberBean 객체의 정보를 'memberInfo'라는 key값으로 request 객체에 저장합니다.
- MemberDetail.do로 화면을 forward 합니다.
MemberDetail.do
|
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!doctype html>
<html lang="en">
<head>
<title>회원정보 상세보기</title>
<style>
.container {
padding-top: 30px;
}
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<script type="text/javascript">
function changeDetailView() {
location.href = "main.do";
}
function btnModify() { //회원정보 수정 버튼을 누르면 비밀번호, 사용자 이름, 사용자 이메일을 변경할 수 있도록 input 태그를 활성화 시킴
const pwd = document.getElementById('pwd');
const username = document.getElementById('username');
const email = document.getElementById('email');
$(pwd).removeAttr('disabled');
$(username).removeAttr('disabled');
$(email).removeAttr('disabled');
}
function detailCheckAction() { //입력값 확인하기. 회원정보를 수정할 때 입력값을 모두 입력해야 수정할 수 있도록 함
let formName = document.detailInfo;
let inputPWD = formName.memberPWD.value;
let inputEmail = formName.memberEmail.value;
let inputName = formName.memberName.value;
if(inputPWD == "") { //비밀번호가 없으면
alert("비밀번호를 입력하세요");
formName.memberPWD.focus();
return false;
}
else if(inputEmail == "") { //메일이 없으면
alert("메일을 입력하세요");
formName.memberEmail.focus();
return false;
}
else if(inputName == "") { //이름이 없으면
alert("이름을 입력하세요");
formName.memberName.focus();
return false;
}
}
function btnDelete() { //회원정보 삭제 정보
if(confirm("정말로 삭제하시겠습니까?"))
{
location.href="MemberDeleteAction.do"
return true;
}
else
{
return false;
}
}
</script>
<link href="${pageContext.request.contextPath}/form-validation.css" rel="stylesheet">
</head>
<body class="bg-light">
<c:set var="member" value="${requestScope.memberInfo}"/> <!-- request에 저장된 객체를 사용하기위해 requestScope 사용 -->
<div class="container text-center">
<main>
<div class="py-5">
<img class="d-block mx-auto mb-4" src="${pageContext.request.contextPath}/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
<h2>회원정보</h2>
<p class="lead">
회원정보를 확인해주세요!<br>
회원정보를 수정하거나 삭제하고 싶으시면 아래 버튼을 눌러주세요.
</p>
</div>
<div class="py-2">
<h4 class="mb-3">회원 상세정보</h4>
<form class="needs-validation" name="detailInfo" method="post" action="MemberModifyAction.do" onsubmit="return detailCheckAction()">
<div class="row g-3">
<div class="col-sm-6">
<label for="firstName" class="form-label">아이디</label>
<input type="text" class="form-control" id="id" name="memberID" placeholder="ID" value="${member.memberID}" disabled>
</div>
<div class="col-sm-6">
<label for="lastName" class="form-label">비밀번호</label>
<input type="text" class="form-control" id="pwd" name="memberPWD" placeholder="Password" value="${member.memberPWD}" disabled>
</div>
<div class="col-12">
<label for="username" class="form-label">이름</label>
<div class="input-group has-validation">
<input type="text" class="form-control" id="username" name="memberName" placeholder="Username" value="${member.memberName}" disabled>
</div>
</div>
<div class="col-12">
<label for="email" class="form-label">이메일</label>
<input type="email" class="form-control" id="email" name="memberEmail" placeholder="you@example.com" value="${member.memberEmail}" disabled>
</div>
<div class="col-12">
<label for="address" class="form-label" >가입일자</label>
<input type="text" class="form-control" id="date" placeholder="2022-01-01" value="${member.memberReg}" disabled>
</div>
</div>
<hr class="my-4">
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
<button type="button" class="btn btn-primary btn-lg px-4 gap-3" onclick="changeDetailView()">메인화면으로 이동</button>
<button type="button" id="buttonModify" class="btn btn-outline-secondary btn-lg px-4" onclick="btnModify()">회원정보 수정</button>
<button type="button" id="buttonDelete" class="btn btn-outline-secondary btn-lg px-4" onclick="btnDelete()">회원정보 삭제(탈퇴)</button>
<input type="submit" id="button" class="btn btn-outline-secondary btn-lg px-4" value="확인"></button>
</div>
</form>
</div>
</main>
<footer class="my-5 pt-5 text-muted text-center text-small">
<p class="mb-1">© Determination</p>
</footer>
</div>
</body>
</html>
|
cs |
- MemberDetailForm.jsp입니다.
- 기본적으로 회원정보를 표시하는 칸을 input 태그로 만든 후에 값을 입력할 수 없도록 disabled 속성을 부여합니다.
- detailCheckAction()으로 모든 값이 입력됐는지 확인합니다.
- btnModify()로 회원정보 수정 버튼을 누를 경우 비활성화된 <input> 태그를 활성화시킵니다.
- btnDelete()로 회원정보 삭제 버튼을 누를 경우 회원정보를 삭제하겠냐는 확인 메시지를 출력하고
확인을 누를 경우 'MemberDeleteAction.do'로 이동합니다.
- changeDetailView()로 '메인화면으로 이동' 버튼을 누를 경우 메인 화면으로 이동합니다.
- 회원정보 수정 버튼을 누르고 회원정보를 변경한 뒤에 '확인'버튼을 누를 경우
POST 방식으로 데이터를 'MemberModifyAction.do'로 전송합니다.
- 회원정보 상세보기 화면은 다음과 같습니다.
- 모든 정보가 노출되나 회원정보를 수정할 수 없습니다.
- '회원정보 수정' 버튼을 눌러보겠습니다.
- 비밀번호, 이름, 이메일 칸을 새로 입력할 수 있도록 칸이 활성화됩니다.
- 회원정보를 모두 입력하지 않고 확인 버튼을 눌러보겠습니다.
- 이름을 입력하지 않고 확인을 누르자 '이름을 입력하세요'라는 경고창이 출력됩니다.
MemberModifyAction.java
|
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
|
package jsp.member.action;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import jsp.common.action.Action;
import jsp.common.action.ActionForward;
import jsp.member.model.MemberBean;
import jsp.member.model.MemberDAO;
public class MemberModifyAction implements Action {
@Override
public ActionForward execute(HttpServletRequest request, HttpServletResponse response) throws Exception {
ActionForward forward = new ActionForward();
HttpSession session = request.getSession(); //session 객체 생성
MemberDAO mDAO = MemberDAO.getInstance();
String id = session.getAttribute("memberID").toString(); //memberID 값 가져오기
MemberBean member = new MemberBean();
//MemberBean 객체에 업데이트 값 세팅
member.setMemberID(id);
member.setMemberPWD(request.getParameter("memberPWD"));
member.setMemberEmail(request.getParameter("memberEmail"));
member.setMemberName(request.getParameter("memberName"));
mDAO.updateMember(member);
forward.setRedirect(true);
forward.setPath("ResultForm.do");
session.setAttribute("msg", "1");
return forward;
}
}
|
cs |
- MemberModifyAction.java입니다.
- 회원 정보 상세보기 폼에서 전달받은 파라미터 값을 MemberBean 객체에 저장해주고
그 객체를 이용해 MemberDAO의 updateMember 메서드를 실행합니다.
- 세션 객체에 'msg' key값에 '1'을 담고 ResultForm.do로 경로를 설정해줍니다.
- MemberDAO의 updateMember 메서드는 위와 같습니다.
- 회원정보가 수정되면 msg 값에 따라 위와 같은 결과 페이지가 출력됩니다.
MemberDeleteAction.java
|
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
|
package jsp.member.action;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import jsp.common.action.Action;
import jsp.common.action.ActionForward;
import jsp.member.model.MemberDAO;
//회원정보 삭제 담당 Action 클래스 public class MemberDeleteAction implements Action {
@Override
public ActionForward execute(HttpServletRequest request, HttpServletResponse response) throws Exception {
ActionForward forward = new ActionForward();
HttpSession session = request.getSession();
MemberDAO mDAO = MemberDAO.getInstance();
String id = session.getAttribute("memberID").toString();
mDAO.deleteMember(id);
//세션에 담긴 아이디값 삭제
session.removeAttribute("memberID");
forward.setRedirect(true);
forward.setPath("ResultForm.do");
session.setAttribute("msg", "2");
return forward;
}
}
|
cs |
- MemberDeleteAction.java입니다.
- 회원 정보 삭제를 담당하는 Action 클래스입니다.
- 회원 정보를 삭제할 때는 세션에 담긴 memberID 값을 삭제해줍니다.
- 세션에 'msg' key 값에 '2'를 담아 ResultForm.do로 경로를 설정해줍니다.
- 회원정보가 삭제되면 msg 값에 따라 위와 같은 결과 페이지가 출력됩니다.
MemberLogoutAction.java
- 회원정보 상세보기, 회원정보 수정, 회원정보 삭제를 구현하는 뷰 페이지와 Action 클래스를 모두 확인했습니다.
- 이제 마지막으로 로그아웃을 담당하는 MemberLogoutAction.java를 확인해보겠습니다.
|
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
|
package jsp.member.action;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import jsp.common.action.Action;
import jsp.common.action.ActionForward;
//회원정보 삭제 담당 Action 클래스
public class MemberLogoutAction implements Action{
@Override
public ActionForward execute(HttpServletRequest request, HttpServletResponse response) throws Exception {
ActionForward forward = new ActionForward();
//세션에 담긴 아이디값 삭제
request.getSession().removeAttribute("memberID");
//메인화면으로 이동
forward.setRedirect(true);
forward.setPath("main.do");
return forward;
}
}
|
cs |
- 로그아웃을 하기 위해서는 세션에 담긴 memberID 값을 삭제해줘야 합니다.
- 세션에 담긴 MemberID 값을 삭제한 이후에는 Redirect를 해줍니다.
- 경로는 main.do로 설정해줍니다.
로그아웃을 마지막으로 회원과 관련된 모든 정보를 확인했습니다.
다음 글에서는 게시판을 구현하는 방법에 대해 하나씩 알아보겠습니다.
긴 글 읽어주셔서 감사합니다!
궁금한 점은 댓글 남겨주세요 :))
댓글