05. 회원정보수정 / 탈퇴

  * START !! 

일단, MY INFO 버튼 생성

-> 클릭하면 회원정보수정창.jsp 페이지 화면 나오게 지정!

1단계 : 아이디 클릭 시, 회원정보수정창 페이지 생성

1. 화면구성

회원정보수정창.jsp 페이지를 만든다.

①

include > header.jsp

id[name] 에 <a>태그로 링크를 걸었다.

id[name] 을 클릭하면 detail.cs를 요청해라.

<!-- 로그인 상태 -->

<c:if test="${ !empty login_info }">

<div style="width: 100px; height: 30px; color: white; 

position: absolute; right: 0; margin-right: 50px; margin-top: 25px;">

<a class="click" style="text-decoration:none !important; color: #66ff33;"

onclick="location= 'detail.cs?id=${login_info.id}'">

${login_info.id } [ ${ login_info.name}]</a>

<p  class="click" onclick="go_logout()" >로그아웃</p>

</div>

</c:if>

2. 컨트롤러

위에서 만든 회원정보수정창.jsp 페이지(=detail.jsp)를 호출하는 주소를 등록한다.

②

CustomerController.java

member에서 id를 이용해 detail 메서드를 요청해서 dto에 담자.

그리고 그 속성을 추가시킨다.

@Autowired private MemberService member;

//고객정보 변경 화면 요청

@RequestMapping("/detail.cs")

public String update(@RequestParam String id, Model model){

MemberDTO dto = member.detail(id);

model.addAttribute("dto", dto);

return "customer/detail";

}

③

MemberDAO.java / MemberService.java

MemberDTO detail(String id);

④MemberServiceImpl.java

@Override

public MemberDTO detail(String id) {

// TODO Auto-generated method stub

return dao.detail(id);

}

⑤

MemberDAOImpl.java

@Override

public MemberDTO detail(String id) {

// TODO Auto-generated method stub

return mybatis.selectOne("member.mapper.detail", id);

}

⑥

memberMapper.xml

<select id="detail" resultType="dto.member.MemberDTO">

select m.*, phone phones, address addresses

from member m

where id = #{id}

</select>

⑥

detail.jsp 짜잔 !

------------------------------------------------------------------------------------------

2단계 : 버튼 구현

<만들고자 하는 버튼>

1. 회원정보수정버튼

2. 뒤로가기버튼(-1 페이지로)

3. 회원탈퇴버튼

- jQuery 기본적인 사용법 공부하기

→ 회원정보수정버튼 / 뒤로가기버튼

- 성명, id는 수정이 불가능하도록 readonly 속성 추가

/ input value 이용해서 가입시 지정한 값 dto에서 가져오기 (비번 제외)

=> value="${dto.addresses }" 이런 식으로

- 비밀번호 입력 안했을 시, "비밀번호 항목은 필수 입력값입니다."

=> <script src="js/join_validate.js"></script> 로 대체

- 비밀번호 했을 시, "수정이 완료되었습니다."

 ① 수정 불가능 하도록 readonly 속성 추가

<div>

<div> * 성명</div>

<div>

<input name="name" value="${dto.name}" readonly="readonly">

</div>

</div>

<div>

<div> * 아이디</div>

<div>

<input name="id" value="${dto.id}" readonly="readonly">

   </div>

</div>

②

customer > detail.jsp

회원수정버튼 클릭 시, go_submit()이라는 함수를 통해 유효성 검사 통과 후

submit되면 update.cs를 요청하는 액션을 취한다.

<form method="post" action="update.cs" id="member">

.

.

.

<input id="checkValue" type="button" class="btn btn-primary"                              onclick="go_submit()" value="회원정보수정">

<input type="button" class="btn btn-danger" 

 onclick="history.go(-1)" value="뒤로가기">

<input type="button" class="btn btn-danger"                               onclick="location.href='secession'" value="회원탈퇴">

③

CustomerController.java

//회원정보창 수정 후 변경저장

@RequestMapping(value={"/update.cs"}, produces="text/html; charset=utf-8")

@ResponseBody

public String update( MemberDTO dto){

      String alert = "<script>alert('";

      alert += member.update(dto) ?  "수정이 완료되었습니다." : "수정 실패!";

      alert += "'); location.href='detail.cs?id="+dto.getId()+"';</script>";

      return alert;

}

④

MemberDAO.java / MemberService.java

boolean update(MemberDTO dto);

⑤

MemberServiceImpl.java

@Override

public boolean update(MemberDTO dto) {

// TODO Auto-generated method stub

return dao.update(dto);

}

⑥

MemberDAOImpl.java

@Override

public boolean update(MemberDTO dto) {

// TODO Auto-generated method stub

return mybatis.update("member.mapper.update", dto) > 0 ? true : false;

}

⑦

memberMapper.xml

<!-- 회원정보수정 -->

<update id="update">

update member

set pwd = fn_encrypt(#{pwd}), birth = #{birth}, email = #{email},

phone = #{phones}, post = #{post}, address = #{addresses}

where id = #{id}

</update>

→ <탈퇴버튼>

- 탈퇴버튼 클릭 시, 비밀번호 입력하는 탈퇴화면 페이지 열림(o)

- 탈퇴화면 페이지에서 비밀번호 입력해서 비밀번호 맞다면 삭제(o)

- 댓글을 단 사람은 탈퇴가 안됨

- 탈퇴시 로그아웃 기능 : 탈퇴시 로그아웃 구현(o)

1. 탈퇴기능 처리하기

customer > detail.jsp

: 회원탈퇴 버튼을 만듦. 클릭하면 secession을 요청한다.

<input type="button" class="btn btn-danger"                                  onclick="location.href='secession'" value="회원탈퇴">

CustomerController.java

: 버튼이 secession을 요청하면 secession.jsp가 리턴되어 페이지가 나타난다.

: id 값이 일치하고 있는 지, 비밀번호가 일치하는 지 확인한다. 

@Controller

@SessionAttributes("category")

public class CustomerController {

//주입 : inject, AutoWired

@Autowired private MemberService member;

//탈퇴화면 페이지로 이동

@RequestMapping("/secession") //secession을 요청하면

public String secession(){

return "customer/secession"; //secession.jsp가 return되게

}

// 탈퇴처리(고객정보삭제)

@RequestMapping("/secessionpro")

public String deleteSecession(@RequestParam String pwd, Model model, HttpSession  session) {

String id = ((MemberDTO)                  (session.getAttribute("login_info"))).getId();

// 비밀번호 체크

        boolean result = member.checkPw(id, pwd);

        if(result){ // 비밀번호가 맞다면 삭제 처리

            member.deleteSecession(id);

   if (result) {

session.invalidate(); //탈퇴시 로그아웃 처리

   }

            return "customer/secessionpro";

        } else { // 비밀번호가 일치하지 않는다면

            return "customer/secession";

        }

}

secession.jsp

: 비밀번호를 입력하고

탈퇴버튼을 누르면 알림창이 뜨고 secessionpro를 요청 후, 제출한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>탈퇴 화면 - 비밀번호 입력</title>

    

    

    <script type="text/javascript">

        // 비밀번호 미입력시 경고창

        /* function checkValue(){

            if(!document.deleteform.pwd.value){

                alert("비밀번호를 입력하지 않았습니다.");

                return false;

            }

        } */

        

        $(document).ready(function(){

            $("#btnDelete").click(function(){

                // 확인 대화상자 

                if(confirm("삭제하시겠습니까?")){

                    document.deleteform.action = "secessionpro";

                    document.deleteform.submit();

                }

            });

        });

    </script>

    

</head>

<body>

 

    <br><br>

    <b><font size="6" color="gray">회원탈퇴</font></b>

    <br><br><br>

 

 <!-- 탈퇴처리-->

    <form name="deleteform" method="post">

 

        <table>

            <tr>

                <td bgcolor="skyblue">비밀번호</td>

                <td><input type="password" name="pwd" maxlength="50"></td>

            </tr>

        </table>

        

        <br> 

        <input type="button" value="취소" onclick="location = 'index'">

        <input type="button" value="탈퇴" id="btnDelete"/> 

    </form>

    

</body>

</html>

MemberDAO.java / MemberService.java

boolean checkPw(String id, String pwd); //비번체크

void deleteSecession(String id); //회원탈퇴

MemberServiceImpl.java

@Override

public boolean checkPw(String id, String pwd) {

  // TODO 회원 정보 수정 및 삭제를 위한 비밀번호 체크

return dao.checkPw(id, pwd);

}

@Override

public void deleteSecession(String id) {

  // TODO 회원탈퇴를 잘 수행하는 지 dao의 deleteSecession 메서드로 go

dao.deleteSecession(id);

}

MemberDAOImpl.java

// 회원 정보 수정 및 삭제를 위한 비밀번호 체크

    @Override

    public boolean checkPw(String id, String pwd) {

        boolean result = false;

        Map<String, String> map = new HashMap<String, String>();

        map.put("id", id);

        map.put("pwd", pwd);

        int count = mybatis.selectOne("member.mapper.checkPw", map);

        if(count == 1) result= true;

        return result;

    }

    

    // 회원 정보 삭제처리

    @Override

    public void deleteSecession(String id) {

        mybatis.delete("member.mapper.deleteSecession", id);

    }

memberMapper.xml

: 암호화 시켰기 때문에 fn_encrypt를 붙여준다.

<mapper namespace="member.mapper">

<!-- 비밀번호 체크 -->

<select id="checkPw" resultType="int">

select count(*) 

  from member

  where id = #{id} and pwd = fn_encrypt(#{pwd})

       </select>

    

    <!-- 탈퇴시 회원 삭제 처리 -->

        <delete id="deleteSecession">

          delete from member

  where id = #{id}

        </delete>

디버그를 걸어 값이 잘 넘어오는 지 확인하기

-----------------------------------------------------------------------------------------