단계를 나눠서 접근 - 크게 2단계
1. <수정> 페이지 만들고 기존 페이지 불러오기
2. 데이터를 수정하고 DB에 반영하기
1단계
1. 상세 페이지에서 Edit 을 누름
2. 컨트롤러가 Edit 버튼 누른걸 파악하면 DB에서 해당 id의 데이터를 찾아서 가져옴
3. 컨트롤러는 데이터를 뷰에서 사용할 수 있도록 모델에 등록
4. 모델에 등록된 데이터를 <수정> 페이지에서 보여주고, 수정할 수 있는 상태로 보여준다.
2단계
1. 수정이 완료된 데이터를 DTO에 담아서 받음
2. DTO를 엔티티로 변환
3. DB에서 기존 데이터를 수정 데이터로 갱신
4. 수정 데이터를 상세 페이지로 리다이렉트(수정 완료된걸 보여주는 역할)
수정 페이지 만들기
- 각 상세 페이지에서 Edit 버튼누르면
/articles/{{id}}/edit으로 이동하도록 하자
이때 id가 article의 속성이기 때문에 article.id 로 작성
/articles/{{article.id}}/edit
ArticleController에서
edit method를 새롭게 생성한다.
/articles/id/edit 을 컨트롤러가 요청받으면
일단 DB에서 찾아와야한다.
articleEntity는 레포지토리에서 findById(id)로 찾는 데이터를 가져온다.
이때 @PathVariable Long id 파라미터 필요
그리고 뷰 페이지에 정보를 넘겨주기 위해 model 에 addAttribute 해야 한다.
마지막으로 edit.mustache로 return 한다.
edit 페이지에서는
기존에 써놨던 데이터를 다시 보여줘야 한다.
제목 : <input 끝에 value = {{title}}>
본문 : textarea 사이에 {{content}} 가 들어감
이제 제목과 본문을 고칠 수 있다.
다음 제출 버튼을 누르면 수정한 데이터가 DB에 갱신되어야 한다.
HTTP 메서드를 이용해서 컨트롤러에 데이터 수정해달라는 요청을 하면
서버가 DB에 갱신 시켜 줄 것이다.
HTTP 메서드: 클라이언트와 서버 간에 데이터를 전송할 때 사용되는 프로토콜
프로토콜의 종류 : FTP, SMTP .. HTTP
웹 서비스를 위한 프로토콜이 HTTP : HyperText Transfer Protocol
POST : 데이터 생성 요청
GET : 데이터 조회 요청
PATCH : 데이터 수정 요청
DELETE : 데이터 삭제 요청
CRUD, SQL 과 같다.
###############################
더미 데이터 생성
서버 킬때마다 계속 하나씩 입력하는 거 귀찮으니까 미리 몇개 만들어 놓자
src > main > resources > data.sql
-> 미리 SQL 문으로 몇개 넣고 시작하자
INSERT INTO article(id, title, content) VALUES(1, 1, 1)
수정 페이지 변경하기
수정 페이지는 edit.mustache 이다.
action 은 이 <form> 을 어디에 보낼지를 결정하는 속성이다.
이 때 action = "/articles/update" 로 보내자
<form> 은 옛날 규격이라 PATCH 메서드를 지원하지 않고 GET POST만 지원한다.
수정 폼에서 서버에 id 값 역시 보내줘야 한다.
화면에 보일 필요는 없으니까 value="{{id}}" 로 지정하되 type = hidden 으로 둬 보이지 않게 한다.
여기까지 하면 수정완료 후 제출 버튼을 누르면 서버에
id, title, content 가 /articles/update 라는 URL로 이동한다.
이제 컨트롤러가 적절한 역할을 하면 된다.
-- 수정 데이터 받아오기
/article/update를 postmapping으로 받아오면 컨트롤러는 DB에서 원본 데이터를 찾아오고 이 데이터를 update 해야 한다.
일단 articleForm(DTO)로 변경된 수정된 데이터를
Article articleEntity로 변경한다. Article articleEntity = form.toEntity()
그리고 리파지토리에서 findById로 겹치는 데이터를 target으로 가져온다,.
만약 찾는 target이 있다면
수정한다.
articleRepository.save(articleEntity)
이제 수정이 끝났으니 상세 페이지로 바로 이동할 수있도록 redirect를 해준다.