회원정보수정
- 로그인 중 인지 학인하고 로그인 중이 아니면 로그인 페이지로 이동
- 로그인 중이면 비밀번호를 확인하고 비밀번호가 일치하면 회원정보를 가져와서 수정 페이지로 이동
- 입력한 내용을 가지고 수정 작업을 수행하고 로그아웃을 시킨 후 로그인을 다시 하도록 로그인 페이지로 이동
user 디렉토리에 pwcheck.jsp 파일을 생성하고 비밀번호 입력 페이지를 작성
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div class="box-header with-border">
<a href="user/update"><h3 class="box-title">회원정보수정</h3></a>
</div>
</body>
</html>
UserController 클래스에 로그인 중이면 비밀번호를 확인하고 그렇지 않으면 로그인 페이지로 이동하도록 처리하는 메소드를 생성
@RequestMapping(value = "user/update", method = RequestMethod.GET)
public String update(Model model, HttpSession session) {
if (session.getAttribute("user") == null) {
return "redirect:user/login";
} else {
return "user/pwcheck";
}
}
home.jsp 파일에 회원정보 수정 링크를 생성
<a href="/user/updateform"><h3 class="box-title">회원정보수정</h3></a>
HomeController 클래스에 비밀번호 확인 요청을 처리하는 메소드를 생성
@Autowired
private UserService userService;
@RequestMapping(value = "user/pwcheck", method = RequestMethod.POST)
public String pwcheck(User user, HttpSession session, Model model, RedirectAttributes attr) {
User loginUser = (User) session.getAttribute("user");
user.setEmail(loginUser.getEmail());
User userXO = userService.login(user);
if (userXO == null) {
attr.addFlashAttribute("msg", "비밀번호가 잘못되었습니다.");
return "redirect:/user/update";
}
session.setAttribute("user", userXO);
return "redirect:updateform";
}
@RequestMapping(value = "user/updateform", method = RequestMethod.GET)
public String updatefrom() {
return "user/updateform";
}
user 디렉토리에 updateform.jsp 파일을 생성하고 수정 폼을 작성
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp"%>
<section class="content">
<!-- 회원가입 -->
<form id="updateform" enctype="multipart/form-data" method="post">
<p align="center">
<table border="1" width="50%" height="80%" align='center'>
<tr>
<td colspan="3" align="center"><h2>회원 정보 수정</h2></td>
</tr>
<tr>
<td rowspan="5" align="center">
<p>${user.image}</p> <img id="img" width="100" height="100"
border="1" /> <br /> <br /> <input type='file' id="image"
name="image" accept=".jpg,.jpeg,.gif,.png" /><br />
</td>
</tr>
<tr>
<td bgcolor="#f5f5f5"><font size="2"> 이메일</font></td>
<td> <input type="email" name="email"
readonly="readonly" value="${user.email}" id="email" size="30"
maxlength=50 required="required" />
</td>
</tr>
<tr>
<td bgcolor="#f5f5f5"><font size="2"> 비밀번호</font></td>
<td> <input type="password" name="pw" id="pw"
size="20" required="required" />
<div id="pwDiv"></div>
</td>
</tr>
<tr>
<td bgcolor="#f5f5f5"><font size="2"> 비밀번호
확인</font></td>
<td> <input type="password" id="pwconfirm"
size="20" required="required" />
</td>
</tr>
<tr>
<td width="17%" bgcolor="#f5f5f5"><font size="2"> 닉네임</font></td>
<td> <input type="text" name="nickname"
id="nickname" value="${user.nickname}" size="20"
pattern="([a-z, A-Z, 가-힣]){2,}" required="required"
title="닉네임은 문자 2자 이상입니다." />
<div id="nicknameDiv"></div>
</td>
</tr>
<tr>
<td align="center" colspan="3">
<p></p> <input type="submit" value="정보수정" class="btn btn-warning" />
<input type="button" value="메인으로" class="btn btn-success"
onclick="javascript:window.location='/'">
<p></p>
</td>
</tr>
</table>
</form>
<br /> <br />
</section>
<%@include file="../include/footer.jsp"%>
<script>
var filename = ''
//change 이벤트가 발생하면 readURL 호출
//change - 내용이 변경되면 호출되는 이벤트
document.getElementById("image").addEventListener('change', function(e){
if (this.files && this.files[0]) {
filename = this.files[0].name;
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById('img').src = e.target.result;
}
reader.readAsDataURL(this.files[0]);
}
});
var nicknamecheck = false;
document.getElementById("nickname").addEventListener("focusout",function(){
var nickname = document.getElementById("nickname").value;
if(nickname != '${user.nickname}'){
$.ajax({url : "nicknamecheck", data : {'nickname':nickname}, dataType : "json", success : function(data) {
if (data.result == true) {
document.getElementById("nicknameDiv").innerHTML = "사용 가능한 nickname 입니다.";
document.getElementById("nicknameDiv").style.color='blue';
nicknamecheck = true;
}
else {
document.getElementById("nicknameDiv").innerHTML = "사용 불가능한 nickname입니다.";
document.getElementById("nicknameDiv").style.color='red';
nicknamecheck=false
}
}
});
}
else{
nicknamecheck = true;
}
});
document.getElementById("updateform").addEventListener("submit",function(e){
if(nicknamecheck == false){
document.getElementById("nicknameDiv").innerHTML = "닉네임 중복검사를 수행하세요!!";
document.getElementById("nicknameDiv").style.color='red';
document.getElementById("nickname").focus();
e.preventDefault();
}
var pw = document.getElementById("pw").value;
var pwconfirm = document.getElementById("pwconfirm").value;
if(pw != pwconfirm){
document.getElementById("pwDiv").innerHTML = "2개의 비밀번호가 다릅니다!!";
document.getElementById("pwDiv").style.color='red';
document.getElementById("pw").focus();
e.preventDefault();
}
var pattern1 = /[0-9]/; // 숫자 var
pattern2 = /[a-zA-Z]/; // 문자 var
pattern3 = /[~!@#$%^&*()_+|<>?:{}]/;// 특수문자
if(!pattern1.test(pw) || !pattern2.test(pw) || !pattern3.test(pw) || pw.length< 8) {
document.getElementById("pwDiv").innerHTML = "비밀번호는 8자리 이상 문자, 숫자, 특수문자로 구성하여야 합니다.";
document.getElementById("pw").focus();
e.preventDefault();
}
})
</script>
user.xml 파일에 수정을 위한 SQL을 작성
<!-- 회원정보 수정 처리를 위한 sql -->
<update id="update" parameterType="User">
update springuser
set pw=#{pw}, nickname=#{nickname}, image=#{image}
where email=#{email}
</update>
UserDao 클래스에 회원정보 수정을 위한 메소드를 작성
public int update(User user) {
return sqlSession.update("user.update", user);
}
UserService 인터페이스에 회원정보 수정을 위한 메소드를 선언
public int update(MultipartHttpServletRequest request);
UserServiceImpl 클래스에 회원정보 수정을 위한 메소드를 구현
@Override
public int update(MultipartHttpServletRequest request) {
int result = 0;
String email = request.getParameter("email");
String pw = request.getParameter("pw");
String nickname = request.getParameter("nickname");
MultipartFile image = request.getFile("image");
String uploadPath = request.getServletContext().getRealPath("/userimage");
// 파일 이름 만들기
UUID uemail = UUID.randomUUID();
String filename = image.getOriginalFilename();
User user = new User();
try {
if (filename.length() > 0) {
filename = uemail + "_" + filename;
// 저장된 파일 경로 만들기
String filepath = uploadPath + "\\" + filename;
// 파일 업로드
File file = new File(filepath);
image.transferTo(file);
} else {
filename = ((User) request.getSession().getAttribute("user")).getImage();
}
user.setImage(filename);
user.setEmail(email);
user.setPw(BCrypt.hashpw(pw, BCrypt.gensalt(10)));
user.setNickname(nickname);
result = userDao.update(user);
} catch (Exception e) {
System.out.println(e.getMessage());
}
return result;
}
UserController 클래스에 회원정보 수정 요청을 처리하는 메소드를 구현
@RequestMapping(value = "user/updateform", method = RequestMethod.POST)
public String updatePost(MultipartHttpServletRequest request, RedirectAttributes rttr) {
int result = userService.update(request);
if (result > 0) {
request.getSession().removeAttribute("user");
rttr.addFlashAttribute("update", "success");
return "redirect:/";
} else {
return "redirect:user/updateform";
}
}
home.jsp 파일에 회원정보 수정에 성공했을 때 수행할 내용을 작성
<c:if test="${update != null }">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$("#dialog-update").dialog({
resizable : false,
height : "auto",
width : 400,
modal : true,
buttons : {
"닫기" : function() {
$(this).dialog("close");
},
}
});
});
</script>
</c:if>
<div id="dialog-update" title="회원정보 수정" style="display: none">
<p>
<span class="ui-icon ui-icon-alert"
style="float: left; margin: 12px 12px 20px 0;"></span>
회원정보 수정에 성공하셨습니다.이제 로그인하고 사용하시면 됩니다.
</p>
</div>