회원정보 수정
- 컨트롤러 등록
- updateForm 화면 구현
- 서비스 등록
- xml 등록
원래순서는 xml부터 우선 이렇게 진행해본다
컨트롤러 등록
우선 컨트롤러를 통해 url을 매핑해준다
1
2
3
4
5
6
7
8
9
10
11
//회원정보 수정
@RequestMapping(value="/user/updateForm", method=RequestMethod.GET)
public String UpdateForm(ModelMap model, HttpServletRequest request, HttpServletResponse response)
{
String cokieUserId = CookieUtil.getHexValue(request, AUTH_COOKIE_NAME);
User user = userService.userSelect(cokieUserId);
model.addAttribute("user", user);
return "/user/updateForm";
}
- 쿠기정보를 가져와서
- 쿠기아이디로 userSelcect를 해줘 user객체를 가져오고
- user객체를 jsp화면에 model.addAttribute를 통해 user라는 이름으로 화면단에 넘겨준다
- 그후 해당 url을 string으로 넘겨주면 된다
updateForm 화면 구현
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
<%@page import="com.icia.web.model.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/WEB-INF/views/include/head.jsp" %>
<script type="text/javascript">
$(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)
{
alert("비밀번호를 입력하세요.");
$("#userPwd1").val("");
$("#userPwd1").focus();
return;
}
if (emptCheck.test($("#userPwd1").val()))
{
alert("비밀번호는 공백을 포함할 수 없습니다.");
$("#userPwd1").focus();
return;
}
if (!idPwCheck.test($("#userPwd1").val()))
{
alert("비밀번호는 영문 대소문자와 숫자로 4~12자리 입니다.");
$("#userPwd1").focus();
return;
}
if ($("#userPwd1").val() != $("#userPwd2").val())
{
alert("비밀번호가 일치하지 않습니다.");
$("#userPwd2").focus();
return;
}
if($.trim($("#userName").val()).length <= 0)
{
alert("사용자 이름을 입력하세요.");
$("#userName").val("");
$("#userName").focus();
return;
}
if(!fn_validateEmail($("#userEmail").val()))
{
alert("사용자 이메일 형식이 올바르지 않습니다.");
$("#userEmail").focus();
return;
}
$("#userPwd").val($("#userPwd1").val());
});
});
function fn_validateEmail(value)
{
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
return emailReg.test(value);
}
</script>
</head>
<body>
<%@ include file="/WEB-INF/views/include/navigation.jsp" %>
<div class="container">
<div class="row mt-5">
<h1>회원정보수정</h1>
</div>
<div class="row mt-2">
<div class="col-12">
<form>
<div class="form-group">
<label for="username">사용자 아이디</label>
${user.userId}
</div>
<div class="form-group">
<label for="username">비밀번호</label>
<input type="password" class="form-control" id="userPwd1" name="userPwd1" value="${user.userPwd}" placeholder="비밀번호" maxlength="12" />
</div>
<div class="form-group">
<label for="username">비밀번호 확인</label>
<input type="password" class="form-control" id="userPwd2" name="userPwd2" value="${user.userPwd}" placeholder="비밀번호 확인" maxlength="12" />
</div>
<div class="form-group">
<label for="username">사용자 이름</label>
<input type="text" class="form-control" id="userName" name="userName" value="${user.userName}" placeholder="사용자 이름" maxlength="15" />
</div>
<div class="form-group">
<label for="username">사용자 이메일</label>
<input type="text" class="form-control" id="userEmail" name="userEmail" value="${user.userEmail}" placeholder="사용자 이메일" maxlength="30" />
</div>
<input type="hidden" id="userId" name="userId" value="${user.userId}" />
<input type="hidden" id="userPwd" name="userPwd" value="" />
<button type="button" id="btnUpdate" class="btn btn-primary">수정</button>
</form>
</div>
</div>
</div>
</body>
</html>
여기서보면 user라는 객체를 사용하여 바로 view의 data로 전달할수있다는점이다
기존의 스프링을 사용하지않았을때는
1
2
UserDao userDao = new UserDao();
user = userDao.userSelect(cookieUserId);
화면단에서 이렇게 직접 user를 dao에서 가져와서 값을 전달해야했는데
model.addAttribute를 사용하여 스프링을 조건에서는 user객체만 선언해주면
바로 값을 가져올수있어 화면과 서비스인 즉 비즈니스로직의 분리가 가능해졌다는점이다
서비스 등록과 dao부분
service 부분
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
public User userSelect(String userId)
{
User user = null;
try
{
user = userDao.userSelect(userId);
}
catch(Exception e)
{
logger.error("[UserService] userSelect Exception", e);
}
return user;
}
dao 부분
1
public User userSelect(String userId);
dao부분 메소드명과 아래 xml의 id명이 같아야한다
xml 등록
1
2
3
4
5
6
7
8
9
10
11
12
13
<select id="userSelect" parameterType="string" resultMap="userResultMap">
SELECT
USER_ID,
NVL(USER_PWD, '') AS USER_PWD,
NVL(USER_NAME, '') AS USER_NAME,
NVL(USER_EMAIL, '') AS USER_EMAIL,
NVL(STATUS, 'N') AS STATUS,
NVL(TO_CHAR(REG_DATE, 'YYYY.MM.DD HH24:MI:SS'), '') AS REG_DATE
FROM
TBL_USER
WHERE
USER_ID = #{value}
</select>
이렇게 구현하면 회원정보 수정창에 들어가서 로그인했던 그정보의 값들을
불러올수있는것까지 구현을 하게된것이다
그다음엔 버튼을 누른후 정보 수정이 완료되어 디비수정된것까지 구현을 해보려한다
수정 버튼동작 구현
이번에는 xml 부터 구현을 하고자한다
- userUpdate xml
- dao 와 service
- updateForm ajax 화면구현
- updateProc 컨트롤러 구현
userUpdate xml
1
2
3
4
5
6
7
8
9
<update id="userUpdate" parameterType="com.icia.web.model.User">
UPDATE TBL_USER
SET
USER_PWD = #{userPwd},
USER_NAME = #{userName},
USER_EMAIL = #{userEmail}
WHERE
USER_ID = #{userId}
</update>
아이디를 조건으로 가지고있는 비밀번호 이름 이메일을 수정할값으로 수정해준다
dao 와 service
dao부분
1
public int userUpdate(User user);
service부분
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
public int userUpdate(User user)
{
int count = 0;
try
{
count = userDao.userUpdate(user);
}
catch(Exception e)
{
logger.error("[UserService] userUpdate Exception", e);
}
return count;
}
업데이트가 성공하면 0이상숫자를 보내게된다
updateForm ajax 화면구현
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
$.ajax({
type: "POST",
url: "/user/updateProc",
data: {
userId: $("#userId").val(),
userPwd: $("#userPwd").val(),
userName: $("#userName").val(),
userEmail: $("#userEmail").val()
},
datatype: "JSON",
beforeSend: function(xhr){
xhr.setRequestHeader("AJAX", "true");
},
success: function(response){
if(response.code == 0)
{
alert("회원정보가 수정되었습니다.");
// location.href = "/board/list";
}
else if(response.code == 400)
{
alert("파라미터 값이 올바르지 않습니다.");
$("#userPwd1").focus();
}
else if(response.code == 404)
{
alert("회원 정보가 존재하지 않습니다.");
location.href = "/";
}
else if(response.code == 500)
{
alert("회원 정보 수정 중 오류가 발생했습니다.");
$("#userPwd1").focus();
}
else
{
alert("회원 정보 수정 중 오류가 발생했습니다.");
$("#userPwd1").focus();
}
},
complete: function(data)
{
//응답이 종료되면 실행
icia.common.log(data);
},
error: function(xhr, status, error)
{
icia.common.error(error);
}
});
화면을 먼저구현한이유는 url매핑을 통해서 컨트롤러로 들어가기때문이고
또한 data값들을 컨트롤러에 받은후 컨트롤러에서 서비스부분 로직을 구현할수있기때문에
우선 구현해줬다
여기서 중요한점은 수정에서 아이디값은 수정불가능하고 값만 나타놔줬기때문에 따로
input hidden값으로 userid값을 넘겨주었다
1
2
3
4
<input type="hidden" id="userId" name="userId" value="${user.userId}" />
이것도 userPwd값으로 비밀번호수정1과 2를 하나로 정해 아이디값에 넣어줬다는사실도 중요하다
$("#userPwd").val($("#userPwd1").val());
updateProc 컨트롤러 구현
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
//회원정보 수정 반영
@RequestMapping(value="/user/updateProc", method=RequestMethod.POST)
@ResponseBody
public Response<Object> updateProc(HttpServletRequest request, HttpServletResponse response)
{
String cookieUserId = CookieUtil.getHexValue(request, AUTH_COOKIE_NAME);
String userPwd = HttpUtil.get(request, "userPwd");
String userName = HttpUtil.get(request, "userName");
String userEmail = HttpUtil.get(request, "userEmail");
Response<Object> ajaxResponse = new Response<Object>();
if(!StringUtil.isEmpty(cookieUserId))
{
User user = userService.userSelect(cookieUserId);
if(user != null)
{
if(StringUtil.equals(user.getStatus(), "Y"))
{
if(!StringUtil.isEmpty(userPwd) && !StringUtil.isEmpty(userName) &&
!StringUtil.isEmpty(userEmail))
{
user.setUserPwd(userPwd);
user.setUserName(userName);
user.setUserEmail(userEmail);
if(userService.userUpdate(user) > 0)
{
ajaxResponse.setResponse(0, "success");
}
else
{
ajaxResponse.setResponse(500, "Internal server Error");
}
}
else
{
ajaxResponse.setResponse(400, "Bad Request");
}
}
else
{
CookieUtil.deleteCookie(request, response, AUTH_COOKIE_NAME);
ajaxResponse.setResponse(400, "Bad Request");
}
}
else
{
CookieUtil.deleteCookie(request, response, AUTH_COOKIE_NAME);
ajaxResponse.setResponse(404, "Bad Request");
}
}
else
{
ajaxResponse.setResponse(400, "Bad Request");
}
return ajaxResponse;
}
처음에 구현할때 주의할점은
updateForm 컨트롤러와 updateProc의 컨트롤러를 잘구분해야한다는점이다
updateForm은 수정화면을 보여줌으로서 userid값으로 user객체를 가져와 화면에 뿌려주기만하면되고
updateProc은 화면에서 가져온값을 널값체크후 update해주는 비즈니스로직을 구현해주면된다는점이다
이두컨트롤러를 잘구분해서 구현한다면 성공적인 회원정보 수정창과 수청후의 구현이 완성된다