·쿠키를 통한 로그인
-금요일에도 쿠키에 대해 배웠고 쿠키의 값이 없는 경우에만 회원가입 창으로 갈 수 있도록 로직을 짰었다.
-이제는 로그인을 하면 로그인과 회원가입이 뜨던 상황에서 로그아웃, 회원정보 수정이 되도록 navigation 부분을 바꿔보았다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.icia.web.util.CookieUtil" %>
<%@ page import="com.icia.common.util.StringUtil" %>
<%
if(! StringUtil.isEmpty(CookieUtil.getValue(request, "USER_ID")))
{
//값이 있으면 보여줄 html
%>
<nav class="navbar navbar-expand-sm bg-secondary navbar-dark mb-3">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/loginOut.jsp"> 로그아웃</a> <!-- /만 있다는 것은 절대경로의 기본파일인 index.jsp를 뜻함. -->
</li>
<li class="nav-item">
<a class="nav-link" href="/user/userUpdateForm.jsp">회원정보수정</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/board/list.jsp">게시판</a>
</li>
</ul>
</nav>
<%
}
else
{
%>
<nav class="navbar navbar-expand-sm bg-secondary navbar-dark mb-3">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/"> 로그인</a> <!-- /만 있다는 것은 절대경로의 기본파일인 index.jsp를 뜻함. -->
</li>
<li class="nav-item">
<a class="nav-link" href="/user/userRegForm.jsp">회원가입</a>
</li>
</ul>
</nav>
<%
}
%>
-복잡해보이지만, 사실 쿠키값이 비어있지 않으면 위의 html을 비어있으면 아래쪽 html을 보여주도록 바꾼 것 말고는 딱히 크게 변한 것이 없다.
·회원정보 수정
-기존의 회원가입은 쿠키 정보가 없는경우에 진행을 했었고, 같은 파일에서 회원정보 수정도 진행하려 했다. 그래서 해당 부분을 비워놨었다.
-물론 회원정보 수정을 하려면 우선, 해당 쿼리문을 작성해야 한다. 쿼리문 작성은 SQLdeveloper에서 직접 수정이 되는지 확인하고 값들을 전부 ?처리해서 미리 세팅을 해놨다. 또한, 쿼리문은 전부 userDao쪽에다가 넣어놓을 것이라고 했기 때문에 쿼리문을 userDao쪽에서 작성해줬다.
public int userUpdate(User user)
{
int count = 0;
Connection conn = null;
PreparedStatement pstmt = null;
StringBuilder sql = new StringBuilder();
sql.append("UPDATE TBL_USER ");
sql.append(" SET USER_PWD = ? , ");
sql.append(" USER_NAME = ?, ");
sql.append(" USER_EMAIL = ? ");
sql.append(" WHERE USER_ID = ? ");
try
{
int idx = 0;
conn = DBManager.getConnection();
pstmt = conn.prepareStatement(sql.toString());
pstmt.setString(++idx, user.getUserPwd());
pstmt.setString(++idx, user.getUserName());
pstmt.setString(++idx, user.getUserEmail());
pstmt.setString(++idx, user.getUserId());
count = pstmt.executeUpdate();
}
catch(Exception e)
{
logger.error("[UserDao] userUpdate SQLException", e);
}
finally
{
DBManager.close(pstmt ,conn);
}
return count;
}-해당 메소드는 따로 언급할 필요가 없이 전과 똑같고 쿼리문만 조금 다르다.
-다음엔 회원정보 수정 페이지를 작성했다. 여기서 주의할 점은, 만약 쿠키정보가 없다면 보여주면 안되고, 쿠키정보의 유저 아이디가 DB의 아이디에 없다면 또 보여주면 안되고, 유저의 상태가 Y가 아니면 보여주면 안되기 때문에 해당 부분에 대한 예외처리를 해준다.
<%
//로그
Logger logger = LogManager.getLogger("/user/userUpdateForm.jsp");
HttpUtil.requestLogString(request, logger);
User user = null;
String cookieUserId = CookieUtil.getValue(request, "USER_ID");
if(!StringUtil.isEmpty(cookieUserId))
{
//쿠키에 정보가 있다면
logger.debug("cookieUserId : "+ cookieUserId);
UserDao userDao = new UserDao();
//쿠키 유저 아이디의 아이디를 기준으로 해당 컬럼을 불러와서 user객체에 넣음
user = userDao.userSelect(cookieUserId);
if(user == null)
{
//현재 검색한 유저아이디가 db에 없음. 정상 사용자가 아님
//쿠키 삭제 로그인페이지로 돌려보냄
CookieUtil.deleteCookie(request, response, "USER_ID");
response.sendRedirect("/");
}
else
{
if(!StringUtil.equals(user.getStatus(), "Y"))
{
//정지된 사용자일 경우
CookieUtil.deleteCookie(request, response, "USER_ID");
//유저 객체도 날림.
//아래의 user를 null로 한 이유는 밑에 html을 보여줄 지 말지를 결정하기 위함.
user = null;
response.sendRedirect("/");
}
}
}
if(user != null)
{
//user 정보가 있으면 아래를 보여주기 위해서 위에 user에 null을 해준 것.
%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/include/head.jsp" %>
<script>
$(document).ready(function(){
$("#btnUpdate").on("click", function(){
//모든 공백 체크 정규식
var emptCheck = /\s/g; //공백에 대한 정규 표현식
//영문 대소문자, 숫자로만 이루어진 4~12자리 정규식
var idPwCheck = /^[a-zA-Z0-9]{4,12}$/;
//아이디는 변경 불가임 어차피
//비밀번호에 대한 체크
if($.trim($("#userPwd1").val()).length <=0)
{
//비밀번호가 0보다 작으면 공백
alert("비밀번호를 입력하세요.");
$("#userPwd1").val("");
$("#userPwd1").focus();
return;
}
//비밀번호에 공백이 포함되어 있으면 안됨.
if(emptCheck.test($("#userPwd1").val()))
{
alert("비밀번호는 공백을 포함할 수 없습니다.");
$("#userPwd1").val()="";
$("#userPwd1").focus();
return;
}
//비밀번호의 정규식 확인
if(!idPwCheck.test($("#userPwd1").val()))
{
alert("비밀번호는 영문 대소문자, 숫자로 4~12자리 입니다.");
$("#userPwd1").focus();
return;
}
//비밀번호 확인에 대한 체크
//비밀번호와 확인이 같나?
if($("#userPwd1").val() != $("#userPwd2").val())
{
alert("비밀번호가 일치하지 않습니다.");
$("#userPwd2").focus();
return;
}
//이름은 길이만 1글자 이상이면 처리
if($.trim($("#userName").val()).length <=0 )
{
//이름이 입력되지 않음
alert("사용자 이름을 입력하세요.");
$("#userName").val() = "";
$("#userName").focus();
return;
}
if(! fn_validateEmail($("#userEmail").val()))
{
//이메일 정규표현식에 맞지 않음
alert("사용자 이메일 형식이 올바르지 않습니다.");
$("#userEmail").focus();
return;
}
//userPwd를 사용해야 되기 때문에 hidden값을 사용함.
$("#userPwd").val($("#userPwd1").val());
document.updateForm.submit();
});
});
//이메일 정규식 체크
function fn_validateEmail(value)
{
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
return emailReg.test(value);
}
</script>
</head>
<body>
<%@ include file="/include/navigation.jsp" %>
<div class="container">
<div class="row mt-5">
<h1>회원정보수정</h1>
</div>
<div class="row mt-2">
<div class="col-12">
<form name="updateForm" id="updateForm" action="/user/userProc.jsp" method="post">
<div class="form-group">
<label for="username">사용자 아이디</label>
<%= user.getUserId() %>
</div>
<div class="form-group">
<label for="username">비밀번호</label>
<input type="password" class="form-control" id="userPwd1" name="userPwd1" value="<%=user.getUserPwd() %>" placeholder="비밀번호" maxlength="12" />
</div>
<div class="form-group">
<label for="username">비밀번호 확인</label>
<input type="password" class="form-control" id="userPwd2" name="userPwd2" value="<%=user.getUserPwd() %>" placeholder="비밀번호 확인" maxlength="12" />
</div>
<div class="form-group">
<label for="username">사용자 이름</label>
<input type="text" class="form-control" id="userName" name="userName" value="<%=user.getUserName() %>" placeholder="사용자 이름" maxlength="15" />
</div>
<div class="form-group">
<label for="username">사용자 이메일</label>
<input type="text" class="form-control" id="userEmail" name="userEmail" value="<%=user.getUserEmail() %>" placeholder="사용자 이메일" maxlength="30" />
</div>
<input type="hidden" id="userId" name="userId" value="<%=user.getUserId() %>" />
<input type="hidden" id="userPwd" name="userPwd" value="" />
<button type="button" id="btnUpdate" class="btn btn-primary">수정</button>
</form>
</div>
</div>
</div>
</body>
</html>
<%
}
%>
-따로 언급할 부분은 크게 없으나, document.updateForm.submit(); 버튼을 통한 submit을 .on("click",function(){});에 넣어서 저런식으로 submit할 수도 있다. 이제 action에서 보내는 userProc.jsp에 가서 회원정보 수정 부분을 작성해야 한다.
if(StringUtil.isEmpty(cookieUserId))
{
...
}
else
{
}-회원정보 수정은 위의 else부분부터 시작한다. 위의 if 조건은 쿠키가 없는 경우 회원가입으로 가는 로직이고, else는 쿠키 정보가 있는 경우 어떻게 처리해야 하는지에 대한 부분을 else쪽에 해준다.
else
{
//회원정보 수정, 쿠키가 비어있지 않으니까
//쿠키가 비어있지 않으면
//일단 회원정보를 가져와야 하기 때문에,
//db에 회원정보가 있는지 확인하고 업데이트 하겠다는 의미
User user = userDao.userSelect(cookieUserId);
if(user != null)
{
//회원정보가 DB에 있다는 뜻
if(StringUtil.equals(user.getUserId(), userId) && StringUtil.equals(user.getStatus(), "Y"))
{
//가져온 유저 아이디와 db의 유저 아이디가 같은지 확인, 그리고 상태가 Y인 상태인지 확인
if( !StringUtil.isEmpty(userId) && !StringUtil.isEmpty(userPwd)
&& !StringUtil.isEmpty(userName) && !StringUtil.isEmpty(userEmail))
{
//값이 넘어왔는지 확인, 값이 전부 비어있지 않으면
//현재 user객체에 담겨있는 것은 해당 아이디가 갖고 있는 레코드 정보를 가지고 있음
//수정 전 정보들
//입력한 값이 기존과 같아도 업데이트 되는 로직임.
//원래는 user.getUserPwd90와 userPwd가 다르거나
//user.getUserName()과 userName이 다르거나 밑에꺼도 다르거나 한 경우 아래가
//실행되도록 해야 함.
user.setUserPwd(userPwd);
user.setUserName(userName);
user.setUserEmail(userEmail);
//userDao.userUpdate(user);
if(userDao.userUpdate(user) >0 )
{
//1건 이상이 업데이트 되었다는 의미
msg = "회원정보가 수정되었습니다.";
redirectUrl = "/user/userUpdateForm.jsp";
}
else
{
msg = "회원 정보 수정 중 오류가 발생했습니다.";
redirectUrl = "/user/userUpdateForm.jsp";
}
}
else
{
msg = "회원정보 중 일부값이 올바르지 않습니다.";
redirectUrl = "/user/userUpdateForm.jsp";
}
}
else
{
//쿠키 삭제
//이상한 사람임, 정보가 없는데 회원정보 수정에 들어옴. 쿠키가 있는데 db엔 없음
CookieUtil.deleteCookie(request, response, "USER_ID");
msg = "올바른 사용자가 아닙니다.";
redirectUrl = "/";
}
}
else
{
//쿠키 삭제
//이상한 사람임, 정보가 없는데 회원정보 수정에 들어옴. 쿠키가 있는데 db엔 없음
CookieUtil.deleteCookie(request, response, "USER_ID");
msg = "올바른 사용자가 아닙니다.";
redirectUrl = "/";
}
}-순서를 대략적으로 써보자면, 우선 userDao 객체를 사용해서 db의 정보를 읽어오는 쿼리를 메소드를 통해 실행한다. 이때, 인자는 쿠키값을 넘긴다. 즉, 쿠키의 정보와 일치하는 정보를 가진 db의 한 튜플을 가져와서 user객체에 담는다. 이제 user가 null이 아닌지 확인한다. null이라면 쿠키와 같은 정보의 user정보가 없다는 뜻이기 때문에 해당 쿠키를 지우고 메인페이지로 보낸다. 다음엔, 쿠키의 아이디와 form태그에서 가져온 아이디가 일치하는 지 확인한다. 이 때, 해당 user의 상태값이 Y인지도 체크한다. 만약 여기서 false의 값이 나왔다면, 쿠키 아이디가 form태그의 아이디와 다르거나, 정지된 사용자기 때문에 쿠키를 날리고 메인 페이지로 보낸다. 그 다음 아이디와 나머지 값들이 비어있지 않은지 확인한다. 하나라도 비어있으면 안되기 때문에 &&으로 해준다.
user.setUserPwd(userPwd);
user.setUserName(userName);
user.setUserEmail(userEmail);-form 태그에서 수정한 값들을 setter로 넣어준다. 그리고 userDao.userUpdate(user)의 값이 0보다 크다면, 어쨌든 update가 한 행이라도 되었다는 뜻이기 때문에 성공적으로 수정되었다고 메세지를 주고 다시 수정페이지로 넘겨준다. 만약 여기서 0보다 크지 않다면, 아무런 변화도 없는 것이기 때문에, 쿼리를 실행하는 중에 뭔가 문제가 생겼다는 뜻이다. 그래서 다시 수정페이지로 넘겨준다. 이때, 쿠키값은 db에 있는 것들이기 때문에 쿠키값을 날려줄 필요는 없다.
·수업 마지막
-수업의 마지막 시간쯤엔 교수님이 따라만 하지 말고 직접 비밀번호만 교체하는 동일한 로직을 만들어보라고 하셨고, 수업 끝나기 직전까지 겨우겨우 만들어서 제출했다. 실제로 못한 분들도 굉장히 많다. 오늘은 교수님이 정말 공부를 시켜야겠다는 마음가짐으로 과제도 내주셨고, 과제는 비밀번호 변경을 다시 처음부터 끝까지 혼자 작성하는 것이었다. 전부 뒤에 2를 붙여서. 개인적으로 그냥 복붙하면 쉽겠지만, 그러지 않았다. 수업 끝나고 바로 하지도 않았다. 충분히 공부하고 정리하고 끝까지 공부하고 보면서 마지막의 마지막까지 남겼다가 이 정리 블로그를 작성하기 바로 직전에 작성했고 성공했다. 확실히 처음부터 안보고 혼자 작성하려면 빠진 부분도 많고 수정해야 할 것도 많았지만, 그래도 최대한 안보고 했고 한번에 성공해서 매우 기쁘다. 요즘 비대면 수업인데도 학원을 억지로 나가는데, 오류가 나면 수정이 혼자서는 매우 힘들기 때문이다. 다음주부터는 팀단위로 강제로 출석이라서 매일은 못나갈 수도 있는데 걱정이 앞선다. 그래도 일단 내일은 내가 원래 나가는 날이니 오늘은 이만 하고 운동하고 자야겠다. 파이팅! 너무 어렵고 힘들지만, 이해는 계속 되고 있잖아! 할 수 있다.!
