게시글 수정하기 : Update

1. 데이터 수정 1단계

수정 페이지를 만들고 기존 데이터를 불러온다.

 

2. 데이터 수정 2단계

데이터를 수정해 DB에 반영한 후 결과를 볼 수 있게 상세 페이지로 리다이렉트한다.

 

3. HTTP 메서드

HTTP는 클라이언트의 다양한 요청을 메서드를 통해 서버로 보내는 역할을 한다. 대표적인 메서드로는 POST, GET, PATCH(PUT), DELETE 가 있다.

• POST : 데이터 생성 요청
• GET : 데이터 조회 요청
• PATCH(PUT) : 데이터 수정 요청
• DELETE : 데이터 삭제 요청

4. UPDATE 문

데이터를 수정할 때 사용하는 SQL 문으로, 형식은 다음과 같다.

형식
UPDATE 테이블명 SET 속성명=변경할값 WHERE 조건;

 

 

ArticleController

package com.example.firstproject.controller;

import com.example.firstproject.dto.ArticleForm;
import com.example.firstproject.entity.Article;
import com.example.firstproject.repository.ArticleRepository;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;

import java.util.ArrayList;

@Slf4j  // 로깅 기능을 위한 어노테이션 추가
@Controller
public class ArticleController {

    @Autowired
    private ArticleRepository articleRepository;

    @GetMapping("/articles/new")
    public String newArticleController() {
        return "/articles/new";
    }

    @PostMapping("/articles/create")
    public String createArticle(ArticleForm form) {
        // System.out.println(form.toString());
        log.info(form.toString());

        // 1. DTO를 엔티티로 변환
        Article article = form.toEntity();
        // System.out.println(article.toString());
        log.info(article.toString());

        // 2. 레파지토리로 엔티티를 DB에 저장
        Article saved = articleRepository.save(article);
        // System.out.println(saved.toString());
        log.info(saved.toString());

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

    @GetMapping("/articles/{id}")
    public String show(@PathVariable(name = "id") Long id, Model model) {
        log.info("id : " + id);

        // 1. id를 조회해 데이터 가져오기
        Article articleEntity = articleRepository.findById(id).orElse(null);

        // 2. 모델에 데이터 등록하기
        model.addAttribute("article", articleEntity);

        // 3. 뷰 페이지 반환하기
        return "/articles/show";
    }

    @GetMapping("/articles")
    public String index(Model model){

        // 1. 모든 데이터 가져오기
        ArrayList<Article> articleEntityList = articleRepository.findAll();

        // 2. 모델에 데이터 등록하기
        model.addAttribute("articleList", articleEntityList);

        // 3. 뷰 페이지 설정
        return "articles/index";
    }

    @GetMapping("/articles/{id}/edit")
    public String edit(@PathVariable (name = "id") Long id, Model model){

        // 1. 수정할 데이터 가져오기
        Article articleEntity = articleRepository.findById(id).orElse(null);

        // 2. 모델에 데이터 등록하기
        model.addAttribute("article", articleEntity);

        // 3. 뷰 페이지 설정
        return "/articles/edit";
    }

    @PostMapping("/articles/update")
    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);
        }

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

}

 

 

edit.mustache

{{>header}}

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

{{>footer}}

 

 

ArticleForm

package com.example.firstproject.dto;

import com.example.firstproject.entity.Article;
import lombok.*;

@Builder
@NoArgsConstructor
@AllArgsConstructor
@Data
@ToString
public class ArticleForm {

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

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

 

 

결과

글 상세보기 페이지로 들어가서 edit

edit 페이지에서 수정 후 submit

완성