[Spring Boot] #14. 수정 폼 만들기 & 15. 데이터 수정하기

gogori6565·2024년 7월 8일

Springboot

스프링 부트 공부

목록 보기

12/20

👉 Mission. 데이터 수정 페이지를 만들고 수정 페이지의 데이터를 DB로 갱신하시오

HTTP

클라이언트에서 서버로의 데이터 전송은 다양한 통신 규약(Protocol, 프로토콜)을 통해서 이루어짐

FTP(File Transfer Protocol) - 파일전송
SMTP(Simple Mail Transfer Protocol) - 이메일전송
SSH(Secure Shell)

HTTP : 웹 서비스에서 사용하는 프로토콜 (Hyper Text Transfer Protocol)

다양한 요청을 메소드를 통해 보냄
- GET(Read), POST(Create), PATCH/PUT(Update), DELETE(Delete)

CRUD	HTTP	SQL
Create	POST	insert
Read	GET	select
Update	PATCH/PUT	update
Delete	DELETE	delete

💻 수정 폼 만들고 데이터 수정하기 - 실습

📌 #1 수정 폼 만들기

1. 수정 버튼 생성

2. 수정 페이지 만들기 - edit.mustache

파일명 : templates/articles/edit.mustache

{{>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}}

수정 페이지는 게시글 생성 페이지와 똑같이 생겼을 테니 코드는 복붙해주고,
1) 관건은 기존 데이터를 수정란에 보여주는 것!

input 태그에는 value="" 안에 보여줄 값을,
textarea 태그에는 태그 사이에 보여줄 값을 넣기

2) 게시글 수정은 기존 게시글의 id값이 필요하니 input 태그로(페이지에서는 안보이게) 넘겨주기

<input name="id" type="hidden" value="{{id}}">

3. 데이터 수정하기 - controller

1) 먼저, 'edit' 버튼 클릭 시, 나오는 수정 페이지에 수정할 데이터를 가져와주고

파일명 : controller/ArticleController.java

@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";
}

2) 사용자가 데이터 수정 후 'submit' 하면 DB에 데이터 수정하기

파일명 : controller/ArticleController.java

@PostMapping("/articles/update")
public String update(ArticleForm form){

    //1. DTO를 Entity로 변환
    Article articleEntity = form.toEntity();

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

    //2-2. 기존 데이터의 값을 갱신
    if(target != null){
    	articleRepository.save(articleEntity); //Entity가 DB에 갱신
	}

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

여기서 관건은 수정하는 게시글의 기존 데이터가 있는지 없는지 검사하는 것!

참고로 그 검사를 위해 페이지에서 id값을 넘겨줬었는데 이전까지 dto에 id 필드를 추가하지 않았으니까 ArticleForm.java 파일에 id 필드 추가해주자.

+) 더미데이터 생성

지금까지 서버를 껐다키면 데이터가 사라져서 새로 만들고 확인하는 과정을 거쳤는데, ~~이제 귀찮으니~~ 더미데이터를 생성해서 서버 재시작을 해도 데이터가 (설정한 데이터로)등록되어있게 해보자!

resources 파일 안에 data.sql 이라는 파일 생성하기!

이 파일 안에 이제 유지될 데이터를 넣어놓자

INSERT INTO article(id, title, content) VALUES (1, '가가가가', '1111');
 INSERT INTO article(id, title, content) VALUES (2, '나나나나', '2222');
 INSERT INTO article(id, title, content) VALUES (3, '다다다다', '3333');