12일차_게시판 프로젝트(5)

1. 코테 풀기

 

2024.03.19 - [코테/프로그래머스] - [프로그래머스] 최고의 집합(Java, Level.3)

[프로그래머스] 최고의 집합(Java, Level.3)

 

 

---

 

 

Git Hub

https://github.com/ujin302/Board

 

 

2. 게시글 수정 

2-1. Controller에서 Model

어제 Model 의 개념을 정확하게 이해하지 못한듯 하다 

어제는 단순히 Key, Value의 형태로 이루어진 데이터형식이다! 라고 이해를 했다 

(마음이 급했나봐..)

그래서 다시 정리하는 Model! 

 

Model

• Spring에서 지원하는 기능으로 뷰에 데이터 전달 
• 데이터형식은 Key, Vaule로 이루어짐
• Controller 메서드의 매개변수로 받음  
• 전달할 데이터 저장 시, addAttribute 메소드 사용

 

BoardController.java

 

데이터 전달 : model.addAttribute("boardUpdate", boardDTO); 

-> boardUpdate 이라는 Key로 boardDTO 객체 update.html(뷰)에 전송 

@GetMapping("/update/{id}")
public String updateForm(@PathVariable Long id, Model model) {
    BoardDTO boardDTO = boardService.findById(id); // 해당 id값에 대한 정보를 DTO 객체에 담음
    model.addAttribute("boardUpdate", boardDTO); // Data 전달

    return "update";
}

 

 

 

update.html

 

데이터 사용 : th:value=${boardUpdate.id}, h:value= ${boardUpdate.boardWriter} 등

-> 서버에서 boardUpdate, Key 값으로 받아온 데이터 사용

th 는 타임리프(thymeleaf) 를 의미함 

해당 라이브러리를 사용하여동적 페이지 처리! 

<form action="/board/update" method="post" name="updateForm">
<!--    boardUpdate 라는 이름으로 서버로부터 DTO 객체 받음. -->
    <input type="hidden" name="id" th:value="${boardUpdate.id}">
    writer: <input type="text" name="boardWriter" th:value="${boardUpdate.boardWriter}" readonly> <br>
    pass: <input type="text" name="boardPass" id="boardPass"> <br>
    title: <input type="text" name="boardTitle" th:value="${boardUpdate.boardTitle}"> <br>
    contents: <textarea name="boardContents" cols="30" rows="10" th:text="${boardUpdate.boardContents}"></textarea> <br>
    <input type="hidden" name="boardHits" th:value="${boardUpdate.boardHits}">
    <input type="button" value="글수정" onclick="boardUpdate()">
</form>

 

 

참고 

https://velog.io/@song-eojin/SpringBoot%EC%9D%98-Controller-Model-%EA%B0%9D%EC%B2%B4

 

 

2-2. 게시글 수정 동작 구현 

[ 동작 내용 ]

1. 상세화면에서 수정 버튼 클릭
2. 서버에서 해당 게시글의 정보를 가지고 수정 화면(update.html) 출력
3. 제목, 내용 수정 입력 받아서 서버로 요청
4. 수정 처리

 

2-3. 상세화면에서 수정 버튼 클릭 

detail.html

'수정' 버튼 클릭 시, "/board/update/" {id} 요청 (location.href는 Get 방식)

detail.html 소스 및 화면

 

 

2-4.  서버에서 해당 게시글의 정보를 가지고 수정 화면(update.html) 출력

BoardController.java

1. Get 방식으로 요청 들어옴 

2. id에 대한 값 가져와 해당 관련 정보를 DTO 객체에 담음

3. model를 통해 'boardUpdate"라는 이름으로 DTO 객체(Data) 전달

4. detail.html 파일 불러옴 

 

 

update.html

1. 서버로부터 받은 데이터, 'boardUpdate' 사용하여 화면에 뿌림 

update 화면

 

2-5. 제목, 내용 수정 입력 받아서 서버로 요청

update.html

1. update 화면에서 '글수정' 버튼 클릭

2. 비밀번호 확인 

2-1. 성공 : form 태그에서 "board/update" 을 post 방식으로 Data 전달

2-2. 실패 : 알림창 발생 

 

BoardController.java

1. Post 방식으로 요청 들어옴 

2. 전달 받은 boardDTO 데이터를 서버에 데이터 갱신 (아래 화면 참고)

3. model 객체에 board 키값으로 DTO 객체 전송 

4. detail.html 파일 불러옴 

 

 

BoardService.java

1. Controller에서 전달받은 boardDTO 객체를 Entity로 변환 

-> DB 데이터 수정 시, Entity 객체 사용

2. repository의 save 메소드 사용

-> save 메소드 : 기본키가 없으면 insert, 없으면 update로 인식 , Jpa 제공 메소드 

3. BoardService.java의 findBtId 메소드를 사용하여 해당 id 값의 데이터 반환

 

2-6. 수정 처리

 

detail.html

1. 서버로부터 전달받음 board 데이터 화면에 뿌리기

 

 

 

2-. 유튜브 영상

https://www.youtube.com/watch?v=V_Nsv8d5dBI