반응형
로그인 구현하기
회원가입을 구현한 후 이어서 회원 가입된 데이터를 사용하여 로그인 기능을 구현한다.
로그인 페이지에서 입력한 ID와 PASSWORD를 데이터베이스에서 검색하고 비교하여 로그인할 수 있도록 구현
1. 로그인 동작 구현
DB에서 ID/PASSWORD를 비교하여 결과를 정수 값으로 반환하는 메서드를 DAO에 추가한다.
( 1 : 로그인 성공, 0 : 비밀번호 오류, -1 : ID없음 )
/src/memberone/MemberDao.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 |
public int loginCheck(String id, String pass){
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
int check = -1;
try{
conn = getConnection();
String query = "select PASS from MEMBER where ID = ?";
pstmt = conn.prepareStatement(query);
pstmt.setString(1, id);
rs = pstmt.executeQuery();
if(rs.next()){
String dbPass = rs.getString("pass");
if(pass.equals(dbPass)) check = 1;
else check = 0;
}
}catch(Exception e){
e.printStackTrace();
System.out.println("Exception : " + e);
}finally{
if(rs != null)
try{
rs.close();
}catch(SQLException sqle1){}
if(pstmt != null)
try{
pstmt.close();
}catch(SQLException sqle2){}
if(conn != null)
try{
conn.close();
}catch(SQLException sqle3){}
}
return check;
}
|
cs |
다음으로 로그인 동작을 처리할 jsp페이지를 만든다.
/WebContent/memberone/loginProc.jsp
|
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 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<jsp:useBean id="dao" class="memberone.MemberDao"/>
<%
String id = request.getParameter("id");
String pass = request.getParameter("pass");
int check = dao.loginCheck(id, pass);
%>
<%
if(check == 1){ //로그인 성공
session.setAttribute("loginID", id);
response.sendRedirect("main.jsp");
}
else if(check == 0){ //비밀번호 틀림
%>
<script>
alert("비밀번호가 틀렸습니다.");
history.go(-1);
</script>
<%
}else{ //아이디 없음
%>
<script>
alert("존재하지 않는 아이디입니다.");
history.go(-1);
</script>
<%
}
%> |
cs |
이제 로그인이 성공할 경우 main.jsp 페이지로 리다이렉트 하기 때문에 main.jsp페이지를 작성해야 한다.
먼저 로그인 세션을 검사하여 session값이 존재하면 로그인한 상태로 간주하도록 한다.
/WebContent/memberone/main.jsp
|
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 |
<%-- 로그인 폼 --%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<% String loginID = (String)session.getAttribute("loginID"); %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/mainstyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<section>
<article class="logininfo">
<% if(loginID != null){ %>
<table>
<tr><td colspan="3"><%= loginID %>님 환영합니다.</td></tr>
<tr>
<td class="infomenu"><a href="modifyForm.jsp">정보수정</a></td>
<td class="infomenu"><a href="deleteForm.jsp">회원탈퇴</a></td>
<td class="infomenu"><a href="logoutForm.jsp">로그아웃</a></td>
</tr>
</table>
<% } else{ %>
<script>
alert("정상적인 접근이 아닙니다. 로그인 해 주세요.");
location.href="login.jsp";
</script>
<% } %>
</article>
</section>
</body>
</html> |
cs |
login.jsp 코드의 <form>태그에 action="#"부분을 action="loginProc.jsp"로 수정한다.
모두 작성하였다면 login.jsp를 실행하여 로그인이 되는지 테스트 한다.
- CSS 추가
/WebContent/memberone/css/mainstyle.css 작성
|
1
2
3
4
5
6
7
8
9
10
11
12 |
@CHARSET "UTF-8";
section{
width:200px;
margin: auto;
left:0; top:0; right:0; bottom:0;
}
.logininfo td a{
background-color: #add2da;
border:1px solid #8000ff;
border-radius:2px;
text-decoration:none;
} |
cs |
요청결과>
로그인 화면 입력
로그인 성공
위와 같이 로그인이 되었다면 이제 로그아웃 기능을 만들자.
2. 로그아웃 구현
로그아웃은 Session을 통해 로그인을 구별하므로 session값을 없애 줄 수 있으면 된다.
/WebContent/memberone/logoutForm.jsp
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<% session.invalidate(); %>
<!doctype html>
<html>
<head>
<title>로그아웃</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<style>
a{ text-decoration:none; }
</style>
</head>
<body>
성공적으로 로그아웃 되었습니다.<br/><br/>
<a href="login.jsp">로그인 페이지로 이동</a>
</body>
</html>
|
cs |
요청결과>
로그인 후 로그아웃 버튼 클릭
“로그인 페이지로 이동”을 클릭하면 로그인 페이지로 이동한다.
3. 정보수정 구현
정보 수정을 클릭하면 먼저 기존의 정보를 보여주어야 한다.
세션에 저장된 ID를 가지고 회원정보를 얻어올 메서드를 작성한다.
/src/memberone/MemberDao.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 |
public MemberDto getMember(String id){
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
MemberDto dto = null;
try{
conn = getConnection();
pstmt = conn.prepareStatement("select * from MEMBER where ID = ?");
pstmt.setString(1, id);
rs = pstmt.executeQuery();
if(rs.next()){ //ID에 해당하는 회원이 존재 한다면
dto = new MemberDto();
dto.setId(rs.getString("id"));
dto.setPass(rs.getString("pass"));
dto.setEmail(rs.getString("email"));
dto.setRegdate(rs.getTimestamp("regdate"));
}
}catch(Exception e){
e.printStackTrace();
System.out.println("Exception : " + e);
}finally{
if(rs != null)
try{
rs.close();
}catch(SQLException sqle1){}
if(pstmt != null)
try{
pstmt.close();
}catch(SQLException sqle2){}
if(conn != null)
try{
conn.close();
}catch(SQLException sqle3){}
}
return dto;
}
|
cs |
회원 정보를 수정하는 화면을 만든다.
regForm.jsp를 복사해서 다른 부분만 수정하면 된다.
/WebContent/memberone/modifyForm.jsp
|
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 |
<!-- 정보수정 폼 -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="memberone.*" %>
<jsp:useBean id="dao" class="memberone.MemberDao"/>
<%
String loginID = (String)session.getAttribute("loginID");
MemberDto dto = dao.getMember(loginID);
%>
<!doctype html>
<html>
<head>
<title>Modify Form</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<link href="css/regFormstyle.css" rel="stylesheet" type="text/css"/>
<script src="script.js"></script>
</head>
<body>
<section>
<form method="post" action="modifyProc.jsp" name="regForm">
<table class="regtable">
<tr>
<th colspan="2">회원 수정 정보 입력</th>
</tr>
<tr>
<td>아이디 : </td>
<td><%= dto.getId() %></td>
</tr>
<tr>
<td>패스워드 : </td>
<td><input type="password" name="pass"
value="<%=dto.getPass()%>" required/></td>
</tr>
<tr>
<td>패스워드 확인 : </td>
<td><input type="password" name="repass"
value="<%=dto.getPass()%>" required/></td>
</tr>
<tr>
<td>이메일 : </td>
<td><input type="email" name="email"
value="<%= dto.getEmail()%>" required/></td>
</tr>
<tr>
<td colspan="2" class="regsubmit">
<input type="button" value="정보 수정"
onclick="updateCheck()"/>
<input type="button" value="취소"
onclick="javascript:window.location='main.jsp'"/>
</td>
</tr>
</table>
</form>
</section>
</body>
</html>
|
cs |
실행결과
로그인 후 정보수정 클릭하면 updateCheck함수가 없으므로 아무런 동작은 하지 않는다.
회원의 정보가 잘 출력되는지 확인만 한다.
이제 로그인한 후 수정화면에서 취소를 누르면 login.jsp로 보내고 정보수정일 경우 updateCheck()함수를 호출하도록script.js파일에 updateCheck()함수 추가. 아이디와 이름은 제외하고 값을 체크하도록 동작한다.
/WebContent/memberone/script.js 파일에 추가
|
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 |
function updateCheck(){
if(document.regForm.pass.value==""){
alert("비밀번호를 입력해 주세요.");
document.regForm.pass.focus();
return;
}
if(document.regForm.repass.value==""){
alert("비밀번호를 확인해 주세요.");
document.regForm.repass.focus();
return;
}
if(document.regForm.pass.value != document.regForm.repass.value){
alert("비밀번호가 일치하지 않습니다.");
document.regForm.repass.focus();
return;
}
if(document.regForm.email.value==""){
alert("이메일을 입력해 주세요.");
document.regForm.email.focus();
return;
}
var str=document.regForm.email.value;
var atPos = str.indexOf('@');
var atLastPos = str.lastIndexOf('@');
var dotPos = str.indexOf('.');
var spacePos = str.indexOf(' ');
var commaPos = str.indexOf(',');
var eMailSize = str.length;
if( atPos > 1 &&
atPos == atLastPos &&
dotPos > 3 &&
spacePos == -1 &&
commaPos == -1 &&
atPos + 1 < dotPos &&
dotPos + 1 < eMailSize
);
else{
alert('E-mail주소 형식이 잘못 되었습니다.\n\r다시 입력해 주세요!');
document.regForm.email.focus();
return;
}
document.regForm.submit();
} |
cs |
이제 정보 수정을 처리할 기능을 구현한다.
정보수정 버튼을 누르면 데이터베이스에 업데이트를 수행하도록 MemberDao에 메서드 추가
/src/memberone/MemberDao.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 |
public void memberUpdate(MemberDto dto){
Connection conn = null;
PreparedStatement pstmt = null;
try{
conn = getConnection();
pstmt = conn.prepareStatement(
"update MEMBER set PASS=?, EMAIL=? where ID=?");
pstmt.setString(1, dto.getPass());
pstmt.setString(2, dto.getEmail());
pstmt.setString(3, dto.getId());
pstmt.executeUpdate();
}catch(Exception e){
e.printStackTrace();
}finally{
if(pstmt != null)
try{
pstmt.close();
}catch(SQLException sqle2){}
if(conn != null)
try{
conn.close();
}catch(SQLException sqle3){}
}
} |
cs |
이어서 memberUpdate() 메서드를 사용하여 정보수정을 처리할 jsp페이지를 작성한다.
/WebContent/memberone/modifyProc.jsp
|
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 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="memberone.*" %>
<% request.setCharacterEncoding("UTF-8"); %>
<jsp:useBean id="dao" class="memberone.MemberDao"/>
<jsp:useBean id="dto" class="memberone.MemberDto"/>
<jsp:setProperty property="*" name="dto"/>
<%
String loginID = (String)session.getAttribute("loginID");
dto.setId(loginID);
dao.memberUpdate(dto);
%>
<!doctype html>
<html>
<head>
<title>Update Process</title>
<meta http-equiv="Refresh" content="3;url=main.jsp">
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<article>
<font size="3" face="바탕체">
<b>회원정보가 수정 되었습니다.</b><br/><br/>
3초 후에 로그인 페이지로 이동합니다.
</font>
</article>
</body>
</html> |
cs |
정보수정 테스트!
수정 후 “정보수정” 클릭
수정이 잘 된다면 다음으로 회원 탈퇴기능을 구현한다.
4. 회원탈퇴 구현
회원 탈퇴를 누르면 비밀번호를 다시 확인하도록 하고 맞으면 탈퇴가 가능하도록 구현할 것이다.
그래서 비밀번호를 입력받는 페이지부터 구성한다.
/WebContent/memberone/deleteForm.jsp
|
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 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!doctype html>
<html>
<head>
<title>회원 탈퇴</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<style>
.deleteTable{
margin: auto;
left:0; top:0; right:0; bottom:0;
margin-bottom:5px;
width: 260px;
border: 1px solid black;
text-align:center;
}
</style>
</head>
<script>
function checkIt(){
if(!document.myForm.pass.value){
alert("비밀번호를 입력하지 않았습니다.");
document.myForm.pass.focus();
return false;
}
}
</script>
<body>
<form name="myForm" method="post" action="deleteProc.jsp"
onsubmit="return checkIt()">
<table class="deleteTable">
<tr><td colspan="2"><b>회원 탈퇴</b></td></tr>
<tr><td><b>비밀번호 입력</b></td>
<td><input type="password" name="pass"></td>
</tr>
</table>
<input type="submit" value="회원탈퇴">
<input type="button" value="취소"
onClick="javascript:window.location='main.jsp'">
</form>
</body>
</html> |
cs |
작성 후 동작 확인
취소를 누르면 로그인 페이지로 이동되고 회원탈퇴 버튼의 기능은 현재 없는 상태다.
이어서 회원삭제 작업을 처리할 메서드를 DAO에 추가한다.
/src/memberone/MemberDao.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 |
public int deleteMember(String id, String pass){
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
String dbPass = ""; //데이터베이스에 실제 저장된 비밀번호
int result = -1;
try{
conn = getConnection();
pstmt = conn.prepareStatement("select PASS from MEMBER where ID=?");
pstmt.setString(1, id);
rs = pstmt.executeQuery();
if(rs.next()){
dbPass = rs.getString("pass");
if(dbPass.equals(pass)){ // true면 본인 확인 성공
pstmt.close();
pstmt = conn.prepareStatement(
"delete from MEMBER where ID=?");
pstmt.setString(1, id);
pstmt.executeUpdate();
result = 1; //회원 탈퇴 성공
}else{ //본인 확인 실패 - 비밀번호 오류
result = 0;
}
}
}catch(Exception e){
e.printStackTrace();
System.out.println("Exception : " + e);
}finally{
if(rs != null)
try{rs.close();}catch(SQLException sqle1){}
if(pstmt != null)
try{pstmt.close();}catch(SQLException sqle2){}
if(conn != null)
try{conn.close();}catch(SQLException sqle3){}
}
return result;
} |
cs |
이제 삭제에 성공이면 1, 실패면 0이 반환된다.
이 값을 가지고 결과를 처리해 줄 deleteProc.jsp를 작성하자.
/WebContent/memberone/deleteProc.jsp
|
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 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="memberone.*" %>
<jsp:useBean id="dao" class="memberone.MemberDao"/>
<!doctype html>
<html>
<head>
<title>회원탈퇴</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<%
String id = (String)session.getAttribute("loginID");
String pass = request.getParameter("pass");
int check = dao.deleteMember(id, pass);
if(check == 1){
session.invalidate();
%>
<meta http-equiv="Refresh" content="3;url=login.jsp">
<body>
<p>회원정보가 삭제되었습니다.<br></p>
<p>3초 후에 로그인 페이지로 이동합니다.</p>
<% }
else{
%>
<script>
alert("비밀번호가 맞지 않습니다.");
history.go(-1);
</script>
<% } %>
</body>
</html> |
cs |
회원 탈퇴까지 기능구현이 완료되었다면 가입부터 수정 탈퇴까지 기능이 잘 동작하는지 확인한다.
데이터베이스의 내용도 잘 반영이 되는지 확인한다.
문제가 있는 부분은 동작 하나하나 찾아가서 수정하고 확인하고 적용시킨다.
회원 정보 삭제 성공 시 다음과 같은 화면이 보여진다.
회원가입부터 로그인, 로그아웃 및 회원정보 관련 기능들의 동작 흐름을 이해하자.
반응형
'교육자료 > JSP' 카테고리의 다른 글
| (교육자료)게시판 구현하기 실습 (0) | 2018.09.03 |
|---|---|
| (교육자료)Connection Pool 기능 추가하기 (0) | 2018.09.03 |
| (교육자료)회원가입 기능 구현하기 실습 (0) | 2018.09.03 |
| (교육자료)JSP로 JDBC이용하기 (0) | 2018.08.31 |
| (교육자료)JDBC 사용하기 (오라클 11g 사용) (0) | 2018.08.30 |