project 2.5 My first website/ 회원정보 변경 페이지

새로온 모니터로 진짜 삶의 질 향상.. 

내장스피커도 없고.. 피봇 쓰면 내가 따로 설정해야되지만.. 그래도 좋아 ~~~~~

 

 

결과 창 

 

 

 

 

1. view (myPage, updatePw .jsp)

 

1) myPage.jsp

<script>

//page load event (update user info, change password)

$(document).ready(function(){

$('#updateInfoBtn').click(function(){ // 업데이트 인포버튼을 클릭하면 함수실행

$.ajax({

url: '/MYHOME_P/updateInfo.member',

type: 'post',

data: $('#f').serialize(),

dataType: 'json',

success: function(obj){

if (obj.isSuccess){ // 커맨드페이지에서 isSuccess로 보내줌

alert('Your account info has been successfully changed.');

}else {

alert('Your account info couldn\'t be changed.');

}

location.href = '/MYHOME_P/myPage.member';

},

error: function() {

alert('error');

}

});

 

});

 

$('#updatePwBtn').click(function(){ //비밀번호 변경은 또 다른 페이지에서 실행. 여기서는 페이지 이동만 시켜준다.

location.href = '/MYHOME_P/updatePwPage.member';

});

 

});

 

</script>

 

2) updatePw.jsp

// 아이디, 비밀번호, 이메일 체크 후에만 회원가입이 가능하도록 추가한 변수

var pwPass = false;  // 비밀번호 체크 성공(true), 실패(false)

 

 

$(document).ready(function(){

 

var regExpPw = /^(?=.*[a-zA-Z~!@#$%^&*()_+|<>?:{}])(?=.*[0-9]).{8,}$/;   

$('#mPw').keyup(function() {

if ( regExpPw.test($('#mPw').val()) ) {

$('#updatePwCheckResult').text('Valid password');

$('#updatePwCheckResult').css('color', '#17a2b8').css('font-size', '15px');

} else {

$('#updatePwCheckResult').text('Use 8 or more characters with a mix of letters, numbers & symbols');

$('#updatePwCheckResult').css('color', '#dc3545').css('font-size', '15px');

}

});

$('#mPw2').keyup(function() {

if ( $('#mPw').val() != $('#mPw2').val() ) {

$('#updatePwConfirmResult').text('Those passwords didn\'t match. Try again.');

$('#updatePwConfirmResult').css('color', '#dc3545').css('font-size', '15px');

pwPass = false;

} else {

$('#updatePwConfirmResult').text('Matched');

$('#updatePwConfirmResult').css('color', '#17a2b8').css('font-size', '15px');

pwPass = true;  // 비밀번호 체크 통과

}

});

 

 

// 5. 비밀번호

$('#updatePwBtn2').click(function() {

if (  pwPass ) { 

$.ajax({

url: '/MYHOME_P/updatePw.member',

type: 'post',

data: $('#f').serialize(),  // 폼의 모든 요소를 보낼 때 사용

 

dataType: 'json',

success: function(obj) {

// obj : {"isSuccess":true}

// obj : {"isSuccess":false}

if ( obj.isSuccess ) {

alert('Successfully changed your password');

location.href = '/MYHOME_P/loginPage.member';

} else {

alert('Failed to change your password');

}

},

 

error: function(){

alert('error');

}

});

} else {

alert('Please check your new password.');

}

});

 

 

});

 

</script>

 

 

2. Controller 

1) updateInfo

case "/updateInfo.member" :

ajaxCommand = new UpdateInfoCommand();

result = ajaxCommand.execute(request, response);

out.print(result);

break;

 

2)updatePw

case "/updatePw.member":

ajaxCommand = new UpdatePwCommand();

result = ajaxCommand.execute(request, response);

out.print(result);

break;

 

 

3. Command

* 기본이 되는 ajaxcommand interface

public interface AjaxCommand {

public String execute(HttpServletRequest request, HttpServletResponse response)throws Exception;

}

 

1) UpdateInfoCommand 

마이페이지 뷰창에 pw바꾸는건 따로창을내놨는데 왜 여기서 mPw가 나오나.. 해서 달아논 주석 (mName은 바꿀수있음 저때 정신나갔나봄)

그래서 지워봤음 작동함

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

//String mPw = request.getParameter("mPw"); 

//mDto.setmPw(mPw);

얘네 둘은 지워도 됨니다.. 

 

 

2) UpdatePwCommand 

얘는 mId를 파라미터로 받을 수 없으니 세션에서 꺼내온다.

 

 

 

4. Dao 

둘이 정확하게 똑같은 방식으로 작동 

 

public int memberUpdateInfo(MemberDto mDto) {

SqlSession ss = factory.openSession(false);

int result = ss.update("mybatis.mapper.member.memberUpdateInfo",mDto);

if (result >0) {

ss.commit();

}

ss.close();

return result;

}

 

public int memberUpdatePw(MemberDto mDto) {

SqlSession ss = factory.openSession(false);

int result = ss.update("mybatis.mapper.member.memberUpdatePw",mDto);

if (result >0) {

ss.commit();

}

ss.close();

return result;

}

 

 

5. xml 

<update id="memberUpdateInfo" parameterType="dto.MemberDto">

UPDATE MEMBER2

  SET MNAME = #{mName}

    , MEMAIL = #{mEmail}

    , MPHONE = #{mPhone}

    , MADDRESS = #{mAddress}

WHERE MID = #{mId}

</update>

<update id="memberUpdatePw" parameterType="dto.MemberDto">

UPDATE MEMBER2

  SET MPW = #{mPw}

WHERE MID = #{mId}

</update>