7.1~7.3 데이터 수정 과정(게시판 만들기 / 길벗 코딩 자율학습단)

데이터 수정 과정

①<수정 페이지> 만들고 기존 데이터 불러오기

1. <상세 페이지>에서 [Edit]버튼을 클릭
2. 요청받은 컨트롤러는 해당 글의 id로 DB에서 데이터를 찾아 가져옴
3. 컨트롤러는 가져온 데이터를 뷰에서 사용할 수 있도록 모델에 등록
4. 모델에 등록된 데이터를 <수정 페이지>에서 보여줌
5. 사용자가 내용을 수정할 수 있는 상태가 

②데이터를 수정해 DB에 반영 후 결과를 볼 수 있게 <상세 페이지>로 리다이렉트하기

1. 폼 데이터(수정 요청 데이터)를 DTO에 담아 컨트롤러에서 받기
2. DTO를 엔티티로 변환
3. DB에서 기존 데이터를 수정 데이터로 갱신
4. 수정 데이터를 <상세 페이지>로 리다이렉트

프로그램 작성 순서

1. 세부데이터를 보여주는 뷰페이지(mustache)켜기

2. [Edit]버튼 생성 (누르면 수정페이지로 이동하도록 설정 / "/articles/{{article.id}}/edit")

<a href="/articles/{{article.id}}/edit" class="btn btn-primary">Edit</a>

3. 컨트롤러로 이동해 @GetMapping()어노테이션을 이용해 "/articles/{{article.id}}/edit"주소 받아오기

4. @PathVariable()어노테이션을 이용해 주소의 id를 받아와 해당 id를 뷰페이지의 모델(Model)에 저장

5. 수정할 뷰페이지(mustache)를 반환 ("articles/edit")

@GetMapping("/articles/{id}/edit")
public String edit(@PathVariable Long id, Model model){
    Article articleEntity = articleRepository.findById(id).orElse(null);
    model.addAttribute("article",articleEntity);
    return "articles/edit";
}

6. edit.mustache 파일 생성

7. new(생성)파일과 구조가 비슷하기에 복붙해 온 뒤 id값(사용자에게 보일 필요X =>hidden) 추가 및 action속성등을 수정

{{>layouts/header}}
{{#article}}
<form class="container" action="/articles/update" method="post">
    <input name="id" type="hidden" value="{{id}}">
    <div class="mb-3">
        <label class="form-label">제목</label>
        <input type="text" class="form-control" name="title" value="{{title}}">
    </div>
    <div class="mb-3">
        <label class="form-label">내용</label>
        <textarea class="form-control" rows="3" name="content">{{content}}</textarea>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
    <a href="/articles/{{id}}">Back</a>
</form>
{{/article}}
{{>layouts/footer}}

8. 수정폼에서 <input>태그로 id값을 받아왔기 때문에 DTO에도 id를 추가(toEntity()메서드도 변경)

package com.example.firstproject.dto;

import com.example.firstproject.entity.Article;
import lombok.AllArgsConstructor;
import lombok.ToString;

@AllArgsConstructor
@ToString
public class ArticleForm {
    private Long id;
    private String title;
    private String content;

    public Article toEntity() {
        return new Article(id, title, content);
    }
}

9. 컨트롤러로 가서 @PostMapping()어노테이션을 이용해 주소를 받기

10. 받아온 데이터를 DTO -> 엔티티로 변경

11. 리파지터리의 .findById()메서드를 통해 데이터가 존재하는지 확인 후 없을경우 엔티티를 DB에 저장(필수 X, But 없는 데이터를 수정하려고 하는 오류를 없애기 위해 추가)

12. 리다이렉트를 통해 수정된 값을 볼 수 있도록 설정

@PostMapping("/articles/update")
public String update(ArticleForm form){
    log.info(form.toString());

    Article articleEntity = form.toEntity();
    log.info(articleEntity.toString());

    Article target = articleRepository.findById(articleEntity.getId()).orElse(null);
    if (target != null){
        articleRepository.save(articleEntity);
    }

    return "redirect:/articles/" + articleEntity.getId();
}