14. 수정된 데이터를 DB에 저장하기

# 수정 페이지의 데이터를 DB로 갱신하고 이를 확인하기.

 

진행흐름

데이터의 수정 흐름은 크게 3단계 이다.

데이터를 받고, 이를 가공하고, 저장한다.

폼 데이터가 DTO에 담겨서 Controller에 전달이 되면, 리를 Entity로 가공하여 DB로 저장한다.

단, 기존 데이터가 있는 경우에만 수정해야 한다.

서버의 역할 분담은 MVC가, DB와의 소통은 JPA, 데이터 관리는 SQL로 이루어 진다.

 

웹서버에서 사용하는 프로토콜은 HTTP 이다.

이러한 HTTP는 다양한 요청을 메소드를 통해서 보내는데, 대표적인 메소드로는

GET, POST, PATCH/PUT, DELETE 등이 존재 한다.

GET > 데이터의 조회를 요청 (Read)

POST > 데이터의 생성을 요청 (Create)

PATCH/PUT > 데이터의 수정을 요청 (Update)

DELETE  > 데이터의 삭제를 요청 (Delete)

서버 시작 시 SQL문 실행

서버 시작 시 더미 데이터를 자동으로 DB에 INSERT 되도록 설정

main > resources > data.sql 파일을 생성

그리고 아래와 같이 INSERT문을 작성해 준다. 이렇게 작성된 SQL문은 서버가 실행 시 자동으로 실행되어 article 테이블에 INSERT 되어 있다.

INSERT INTO article(id, title, content) VALUES (1, '가가가가가', '11111');
INSERT INTO article(id, title, content) VALUES (2, '나나나나나', '22222');
INSERT INTO article(id, title, content) VALUES (3, '다다다다다', '33333');

수정 페이지 변경

수정 페이지는 edit.mustache 파일이므로 해당 파일을 연다.

폼 태그에서 중요한것은 action : 어디로 보낼지와 method: 어떻게 보낼지 가 중요하다.

action을 articles/update 라는 url을 넣어주고, 어떻게 보낼지는 post 방식으로 지정한다. 여기서 update이기 때문에 PATCH(PUT)을 넣어줘야 하는데 폼태그는 GET과 POST만 지원하므로 POST 방식으로 보내는 방법을 지정한다.

그리고 몇번 article을 변경할지에 대한 정보 즉 id 값도 input 값으로 넣어준다.

<input name="id" type="hidden" value="{{id}}" /> article의 id값을 숨겨서 던지도록 한 코드이다.

{{>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">Sumbit</button>
    <a href="/articles/{{id}}">Back</a>
</form>
{{/article}}

{{>layouts/footer}}

수정폼 받기

위에서 작성한것 처럼, edit.mustache 파일에서 설정한 코드를 받아올수 있도록 Controller 파일을 수정한다.

ArticleController를 열고, /articles/update를 받아올 수 있도록 메소드를 추가해 주면 된다.

이 해당 메소드가 수행하는 행위가 update이기 때문에 @PathMapping을 어노테이션으로 설정해 줘야 하지만, 현재는 폼이 지원하지 않으므로, @PostMapping으로 진행한다.

public String update(ArticleForm form) { 폼 데이터를 dto로 받는다.

@PostMapping("/articles/update") //update.mustache에서 던진 값
public String update(ArticleForm form) {
    log.info(form.toString());

    // 1.DTO를 엔티티로 변환한다.
    Article articleEntity = form.toEntity();
    log.info(articleEntity.toString());

    // 2.엔티티를 DB로 저장한다.

    //2-1:DB에서 기존 데이터를 가져온다.
    Article target = articleRepository.findById(articleEntity.getId()).orElse(null);

    //2-2:기존 데이터의 값을 수정, 갱신한다.
    if (target != null){
        articleRepository.save(articleEntity); //엔티티가 DB로 갱신 된다.
    }

    // 3.수정 결과 페이지로 리 다이렉트 한다.
    return "redirect:/articles/" + articleEntity.getId();
}

DTO 변경

edit.mustache 파일에 input값으로 id를 추가해 줬으므로, dto에도 해당 값을 추가해 줘야 한다.

private Long id; 필드를 넣어주고, 엔티티로 변환하는 메소드에도 이전에는 id값이 없었으므로, null값으로 생성자를 생성 하였지만 현재는 id값을 받아오므로 return new Article(id, title, content); 해당 id 값을 넣어준다.

    private  Long id;
    private String title;
    private String content;

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

컨트롤러 처리

1. DTO를 엔티티로 변환한다.

form.toEntity(); 의역할 > Article 폼 객체를 가지고 Article 엔티티를 리턴하는 역할

2. 엔티티를 DB로 저장한다.

2-1 : 수정하는것은 기존에 있는것을 바꾸는 것이므로, DB에서 기존 데이터를 가져온다.

DB작업을 할때는 articleRepository를 통해서 작업을 한다. articleRepository를 통해서 id값을 넣고 대상을 가져오도록 하겠다. 이를위한 메소드가 바로 findById(); 라는 메소드 이다. articleEntity.getId() : 위에 있는 articleEntity의 getI를 통해 Getter 메소드를 호출해서 id 값을 집어 넣는것이라고 보면 된다. 즉 1번 아이디 값을 가져올 때는 findById(articleEntity.getId(1)), 2번 아이디값을 가져올때는 findById(articleEntity.getId(2)) 이런식으로 작성 하면 된다.

그래서 해당 코드처럼 Article target = articleRepository.findById(articleEntity.getId()).orElse(null); articleEntity의 get id를 호출해서 대상을 리턴 받아오면 된다. articleRepository가 id를 통해 데이터를 가져오는데 .orElse(null); 만약에 없다면 null 값을 리턴한다. 그래서 저 target 이라는 변수에는 데이터가 존재하면 articleEntity 값이 들어가고 없으면 null 값이 들어가게 된다. 

2-2 : 기존 데이터가 있다면! 값을 갱신한다.

    if (target != null){
        articleRepository.save(articleEntity); //엔티티가 DB로 갱신 된다.
    }

3. 수정 결과 페이지로 리 다이렉트 한다.

return "redirect:/articles/1", return "redirect:/articles/2", return "redirect:/articles/3"... 이런식으로 변경 되어야 하므로 아래와 같은 코드를 활용한다.

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

@PostMapping("/articles/update") //update.mustache에서 던진 값
public String update(ArticleForm form) {
    log.info(form.toString());

    // 1.DTO를 엔티티로 변환한다.
    Article articleEntity = form.toEntity();
    log.info(articleEntity.toString());

    // 2.엔티티를 DB로 저장한다.

    //2-1:DB에서 기존 데이터를 가져온다.
    Article target = articleRepository.findById(articleEntity.getId()).orElse(null);

    //2-2:기존 데이터가 있다면!! 값을 갱신한다.
    if (target != null){
        articleRepository.save(articleEntity); //엔티티가 DB로 갱신 된다.
    }

    // 3.수정 결과 페이지로 리 다이렉트 한다.
    return "redirect:/articles/" + articleEntity.getId();
}

요약

form은 GET과 POST로만 작성 가능

ArticleController의 해당 메소드가 변경된 데이터를 ArticleForm 이라는 DTO로 받아올수 있었고, 받아온것을 엔티티로 변환하고 변환된것을 가지고 DB에서 찾은 다음에 있으면 갱신한다 라는 코드이고, 마지막에는 변경된 페이지로 리 다이렉트 되는 것까지 요약이다.