인천 일보 아카데미 49일차 -1- Spring Framework 회원정보 수정 - 삭제 만들어보기(제약조건 추가)

• 회원정보 수정 - 만들어보기

1. 조건 - 회원 상세 페이지에서 버튼을 사용하여 정보 수정으로 이동하기

2. 조건 - 변경 전 비밀번호를 입력받고 수정 (비밀번호가 틀리다면 수정하지 않음)

 

 

로그인 이후 회원 상세 페이지

 

Controller

    @GetMapping("/memberDetail")
    public String memberDetail(@RequestParam("id") Long id, HttpSession session) {
    로그인 이후 회원 상세페이지를 누르면 memberDetail 주소를 요청함
    로그인하며 받은 정보는 session에 저장했기 때문에 id를 파라미터로 받음
    @RequstParam을 통해 id값을 받음
    
        MemberDTO memberDTO = memberService.detailList(id);
        id값은 고유값으로 지정했기 때문에 Service , Repository를 지나
        DB에서 같은 ID값을 가진 정보를 객체로 담아 가져옴
        
        session.setAttribute("detailList", memberDTO);
        해당 정보를 session에 담아 memberDetail.jsp로 넘어감
        
        return "memberDetail";
    }

 

 

 

memberUpdate.jsp

너무 길기 때문에 참고용 사진만 올리겠습니다

 

 

Controller

수정 공간으로 이동을 하기 위한 GetMapping

    @GetMapping("/memberUpdate")
    public String memberUpdate(@RequestParam("id") Long id, HttpSession session) {
    마찬가지로 고유값인 id를 파라미터로 받아 줍니다
    
        MemberDTO memberDTO = memberService.detailList(id);
        id를 Service - Repository - DB로 넘겨주어 객체의 정보를 가져옵니다
        
        session.setAttribute("memberList", memberDTO);
        가져온 객체를 session에 담아 정보수정 공간으로 함께 넘겨줍니다
        
        return "/memberUpdate";
    }

 

 

 

수정 전 비밀번호를 입력받고 틀리다면 수정을 진행하지 않습니다

memberUpdate.jsp에서 script로 작성되었습니다

<script>
    const updateForm = document.getElementById('updateForm');
    form 태그의 submit을 통제하기 위해 document객체를 사용해 변수에 담아줍니다
    
    updateForm.addEventListener("submit", function (e) {
        e.preventDefault();
        EventListener를 사용하여 updateForm에 submit 이벤트가 실행될 경우
        function의 매개변수로 받아 e.preventDefault로 중단합니다
        
        let promptResult = prompt("기존 비밀번호 확인", "입력바랍니다");
        이후 prompt를 사용하여 기존 비밀번호를 입력할 공간 팝업을 띄워줍니다
        입력받은 값은 prmptResult에 담아줍니다
        
        if (promptResult != '${memberList.memberPassword}') {
            alert("비밀번호가 틀립니다");
            
         위의 Controller에서 session을 통해 정보를 담아 넘어왔기 때문에
         기존 비밀번호와 prompt에 입력받은 값이 같지 않다면
         alert를 사용하여 틀림을 통보하고 마무리합니다 
         
        } else {
            alert("수정 완료!")
            updateForm.submit();
            반대로 prompt로 받은 값과 기존 비밀번호가 같다면 조건에 걸리지 않고
            else로 내려오며 updateForm에 submit함수를 실행시켜줍니다
        }
    });
</script>

 

 

수정이후 memberDetail.jsp 화면

 

Controller

수정이후 정보를 보내기 위한 PostMapping

    @PostMapping("/memberUpdate")
    public String memberUpdate(@ModelAttribute MemberDTO memberDTO) {
    @ModelAttribute를 사용하여 수정받은 정보를 객체에 담아줍니다
    
        memberService.memberUpdate(memberDTO);
        객체를 매개변수로 넣어 Service - Repository -DB로 넘겨줍니다
        
        return "redirect:/memberDetail?id=" + memberDTO.getId();
        이후 수정된 정보를 사용자의 화면에 출력해주기 위해
        redircet를 통하여 memberDetail 메소드에 파라미터 형식으로 넘겨주며 실행합니다
    }

 

 

• 회원 정보 삭제 - 만들어보기

1. 조건 - 회원 상세 페이지에서 버튼을 사용하여 회원 정보를 삭제함

2. 조건 - 삭제를 진행하면 index화면으로 넘어가며 로그아웃됨

 

 

Controller

    @GetMapping("/memberDelete")
    public String memberDelete(@RequestParam("id") Long id, HttpSession session) {
    사용자가 삭제를 누르면 주소값에 id를 파라미터 형식을 받습니다
    받은 파라미터에서 @RequstParam을 사용해 id값을 뽑아줍니다
    
        memberService.memberDelete(id);
        이후 id값을 Service - Repository - DB로 넘겨줍니다
        
        session.invalidate();
        이후 session에 저장된 정보를 invalidate를 사용하여 지워줍니다
        
        return "redirect:/";
        index를 redirect하며 출력합니다
    }

 

 

Mapper

    <delete id="delete" parameterType="Long">
        delete from member_table where id=#{id}
    </delete>
    
    Mapper에서는 Repository에서 받은 값을 SQL의 실행문으로 바꿔주며
    사용자의 정보를 삭제합니다