[회원가입 실습] 회원 수정

회원 수정 실습 

- 코드생각하기

Edit 파일 생성 > HTML 에서는 기본적으로 POST와 DELETE 만 지원함. / 다른 방식으로 유도하거나 JS 사용해야함. / Mustache 사용중이기에 POST 사용할 예정

Contorller 에서는 Id 값으로 접근해야함 > 기존 Entity 파일의 ID 어노테이션 수정. DTO id 값 null 인것도 수정.

두가지 부분에 대해서 생각해야 한다. 먼저 해당 회원을 클릭시 해당 Edit view가 조회되어야 하고. (Get)

두번째는 Submit 눌렀을 때 Post가 되어야 한다는 것이다.(필자는 mustache 실습환경이라 Post로 Update 를 코드하겠다)

 

---

1. Edit 파일 생성

{{>layouts/header}}
<form class="container" action="/members/update" method="post">
  <input name=id type="hidden" value="{{member.id}}">
  <div class="mb-3">
    <label class="form-label">이메일</label>
    <input type="email" class="form-control" name="email" value="{{member.email}}">
  </div>
  <div class="mb-3">
    <lable class="form-label">비밀번호</lable>
    <input type="password" class="form-control" name="password" value="">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
  <a href="/mebers">back</a>
</form>
{{>layouts/footer}}

 - 비밀번호는 보안상 초기화 해두면 좋을 거 같아서 빈란으로 설정했다.

- action url 연결은 members/id/edit으로 연결 해두었다.

- 수정할 대상을 식별하기 위해 id에 접근해야하기 때문에 hidden으로 input 란에 name=id를 추가하였다.

---

2. DTO 수정

- id 값이 이제 null 값이 아니기 때문에, DTO 에서 null 이라고 되어 있는 부분을 수정해야한다.

@AllArgsConstructor
@ToString
public class MemberForm {
  // 이메일, 패스워드 받을 필드
  private Long id;
  private String email;
  private String password;

  public Member toEntity() {
    return new Member(id,email,password);
  }
}

---

3. Entity 파일 수정

- id 값이 generatedValue 되어 있는 부분에 (strategy = GeneratedType.IDENTITY)를 추가해준다. 

> 이거는 sql 을 통해 데이터를 임의로 추가해 버렸기 때문이다.

> 원래는 id 값이 1부터 카운트 되어야 하지만 id 값에 억지로 다른 값을 집어넣어 key value error 가 뜬다. 이를 방지하기 위함이다.

@AllArgsConstructor
@NoArgsConstructor
@ToString
@Entity
@Getter
public class Member {
  @Id
  @GeneratedValue(strategy = GenerationType.IDENTITY)
  private Long id;
  @Column
  private String email;
  @Column
  private String password;
}

---

4. Controller 작성 - 조회

- 특정 화면을 조회할려면 GetMapping이다.

1. 데이터를 가져오고.

2. 모델에 데이터를 등록하고.

3. 뷰페이지로 반환한다.

이 틀을 잘 생각해야한다.

  @GetMapping("/members/{id}/edit")
  public String editMember(@PathVariable Long id, Model model) {
    // 1. 데이터 가져오기
    Member memberEntity = memberRepository.findById(id).orElse(null);
    // 2. 모델에 등록하기
    model.addAttribute("member", memberEntity);
    // 3. 뷰페이지 반환하기
    return "members/edit";
  }

---

5. Controller 수정하기

- 수정할 시, 원래는 Put, Patch이지만 Mustache 실습환경이라 편의상 Post로 Put,Patche를 대체하겠다.

- 먼저 해당 수정페이지 데이터들을 Entity로 변환해둔다.

- 그런 후 해당 수정페이지의 id 값을 통해 원래 Repository에 있는 id값의 본 데이터를 target에 저장한다.

- target이 null일 수 있는 에러상황을 대비해 if문 안에 save() 해준다.

- 반환 값에서는 리다이렉트를 사용해야한다.

@PostMapping("/members/update")
  public String updateMember(MemberForm form){
    // 1. DTO를 Entity로 변환
    Member memberEntity = form.toEntity();
    // 2. Entity를 DB에 저장.
    // 2- 1. 수정해야할 데이터의 Id 값을 가져오기
    Member target = memberRepository.findById(memberEntity.getId()).orElse(null);
    // 2- 2. save 를 통해서 값 저장해주기, 단 target이 null이면 안됨.
    if(target != null){
      memberRepository.save(memberEntity);
    }
    // 3. 수정한 후 수정된 게시물을 redirect 해주어야함.
    return "redirect:/members/"+memberEntity.getId();
  }

---

6. 실행화면

- id 2를 클릭시 단일 데이터 조회 가능

- Edit 버튼 누를 시, 수정 페이지 접근

- 비밀번호 수정 후 제출 시 단일 데이터 조회로 리다이렉트

- MemberList 클릭시 모든 데이터 조회 가능. 여기서 수정된 비밀번호 확인 가능