01. 게시글 삭제
이번엔 버튼을 눌렀을 때 게시글이 삭제될 수 있도록 구현하는 차례다.
먼저 서비스에서 삭제 함수를 만들어 준다.
해당 id값을 받으면 deleteById를 통해 repository에서 지워준다.
// 특정 게시글 삭제
public void boardDelete(Integer id) {
boardRepository.deleteById(id);
}
그리고 컨트롤러에서 서비스함수를 이용하여 GetMapping을 시켜준다.
board/delete 페이지에서 삭제를 했다가 redirect를 통해 다시 리스트 페이지로 넘어가게 된다.
@GetMapping("board/delete")
public String boardDelete(@RequestParam("id") Integer id) {
boardService.boardDelete(id);
return "redirect:/board/list";
}★여기서도 그냥 Integer id로만 쓰면 페이지 매핑 에러가 발생한다. 그러면 @RequestParam()으로 명시해준다.
boardview.html에는 삭제 기능이 추가된다.
버튼으로 구현할 수도 있지만, 일단 a태그로 링크로서 접속하게 만든다.
th를 쓰면 하나씩 각각, href를 쓰면 a태그에 링크 걸기란 뜻이다. @를 통해 해당 페이지 주소에서 board.id로 각 상세페이지의 id값이 들어오면 삭제가 된다.
<a th:href="@{/board/delete(id=${board.id})}">글 삭제</a>
빌드 후 list 페이지에서 실행한 결과이다.
02. 게시글 수정
이번엔 수정 기능을 구현할 차례인데, 먼저 상세페이지인 board.view에서 수정 태그를 만들어준다.
<a th:href="@{/board/modify/{id}(id=${board.id})}">수정</a>
이번에는 저번이랑 다른 주소형식인데, 기존처럼 view?id=1 식으로 되어 있는 것을 '쿼리스트링'이라 한다.
이번에는 @PathVariable()을 통해 주소가 깔끔하게(modify/1) 연결되도록 만드는 것이다.
컨트롤러에서 수정태그를 눌렀을 때 나타날 페이지를 매핑시켜준다.
위에서 말한 PathVariable방식을 사용하였기 때문에 GetMapping때도 바로 id로 연결시킨다.
기본적으로는 맨처음 write페이지와 작동 방식이 동일하지만, 수정기능에서는 기존 제목, 내용을 갖고 와야 좋다. 따라서 addAttribute를 통해 기존 뷰를 가져온다.
@GetMapping("/board/modify/{id}")
public String boardModify(@PathVariable("id") Integer id,
Model model) {
model.addAttribute("board", boardService.boardView(id));
return "boardmodify";
}
boardmodify.html은 boardwrite.html 페이지랑 비슷하기 때문에 그걸 복붙하고, 거기에 추가로 기존 제목과 내용이 써진 채로 가져오기 위해 타임리프 탬플릿을 추가하여 title과 content쪽에 각각 value, text를 넣는다.
또한 form에서 post로 보낼 때, 기존 write와 다르게 수정은 각 페이지(id가짐)에서 이루어지므로 경로를 추가한다. PathVariable방식이기 때문에 경로에 그대로 /{id}를 추가하고, id는 각 board.id값을 가져온다고 명시해준다.
<form th:action="@{/board/update/{id}(id=${board.id})}" method="post">
<input name="title" type="text" th:value="${board.title}">
<textarea name="content" th:text="${board.content}"></textarea>
<button type="submit">수정</button>
</form>
여기까지 하면 각 상세페이지에서 수정 태그를 누르면 아래와 같이 기존 제목+내용이 그대로 가져와진 것을 볼 수 있다. 주소 또한 modify?id=17같은 쿼리스트링 방식이 아니라 modify/17로 된 것을 확인할 수 있다.
이제 수정한 내용을 업데이트 시켜서 DB에 반영해야 한다.
아까 html에서 update경로로 post한 것을 컨트롤러에서 @PostMapping으로 update/{id} 페이지에 보내준다.
delete나 update는 return redirect이어서 사용자 눈에는 보이지 않고 일만 처리한 뒤 바로 list 페이지로 돌아간다.
@PostMapping("/board/update/{id}")
public String boardUpdate(@PathVariable("id") Integer id, Board board) {
Board boardTemp = boardService.boardView(id);
boardTemp.setTitle(board.getTitle());
boardTemp.setContent(board.getContent());
boardService.write(boardTemp);
return "redirect:/board/list";
}여기서도 마찬가지로 PathVariable방식을 사용했고, 기존 내용을 불러온 다음 새로운 내용으로 덮어씌우기 위해 Board객체를 먼저 불러온 뒤 boardTemp에 저장시킨다. 이 Temp에다 set함수로 제목과 내용을 새로 작성한 것을 덮어씌운 다음에 write로 보내어 수정할 수 있도록 만든다.
이제 빌드시키고 내용을 수정한 뒤, 수정 버튼을 누르면 자동으로 리스트 페이지에 돌아가서 수정된 것을 확인할 수 있다.
03. 처리 메시지 출력
이번엔 글을 등록, 수정할 때 페이지에 메시지를 띄울 것이다.
먼저 message.html을 만들고, 메시지를 띄우는 것은 js를 이용해야 하기 때문에 script에 내용을 작성한다.
타임리프 문법을 적용해야 되기 때문에 th:inline을 사용한다. 그리고 var message에 컨트롤러에서 받은 메시지를 저장하고 alert로 페이지에 띄운다. 그다음 사용자가 확인을 눌렀을 때 location으로 페이지를 이동하는 식이다.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script th:inline="javascript">
/*<![CDATA[*/
var message = [[${message}]];
alert(message);
location.replace([[${searchUrl}]])
/*}}>*/
</script>
<body>
</body>
</html>☆자바스크립트에선 세미콜론이 필요없지만, 붙이는 편이 좋긴 하다.
컨트롤러에서 저번에 만들었던 글 등록(post) 함수를 수정한다.
Model을 인자로 받아와서 addAttribute를 통해 메시지 내용과 메시지 확인 누르면 이동할 페이지 주소를 한꺼번에 model에 담아 뷰로 전달한다. (return message)
@PostMapping("/board/writepro")
public String boardWritePro(Board board, Model model) {
boardService.write(board);
model.addAttribute("message", "글 작성이 완료되었습니다.");
model.addAttribute("searchUrl", "/board/list");
return "message";
}
글 수정(post)도 마찬가지로 수정해준다.
@PostMapping("/board/update/{id}")
public String boardUpdate(@PathVariable("id") Integer id, Board board, Model model) {
Board boardTemp = boardService.boardView(id);
boardTemp.setTitle(board.getTitle());
boardTemp.setContent(board.getContent());
boardService.write(boardTemp);
model.addAttribute("message", "글 수정이 완료되었습니다.");
model.addAttribute("searchUrl", "/board/list");
return "message";
}
빌드하고 write 페이지에서 글 등록을 하면 메시지가 뜬다.
글 수정도 마찬가지로 작동한다.
오늘은 여기까지~~!!
사실 저번에 생각없이 예제 우다다 만들어서 삭제 기능이 너무 필요했는데 이번에 잘 해내서 다행이다ㅎ.ㅎ
아니 사실 중간에 또 매핑에러나서 잠깐 해맸지만 어제의 깨달음으로,,, 백퍼 또 명시 오류겠지... 했는데 이번엔 PathVariable로 명시하니까 딱히 추가할게 없는거임...뭐지?? 하고 터미널 한참 들여다봄... 그러다가 탬플릿 오류 하나 발견해서 봤더니 그 수정 html 부분에서 주소 형식을 잘못 썼었음 ㅋㅋ
<form th:action="@{/board/update/{id}(id=${board.id})}" method="post">위처럼 써야되는데
=@"..."
이런 식으로 어노테이션을 문장부분 밖으로 빼고 썼었다........
아무튼 잘 찾아내서 다행이다!!!
후하,,,,,,,,,,
이제 파일 업로드 / 페이징 / 검색 기능만 남았긴 한데 이제 나한테 남은 방학도 내일 하루밖에 없기에... 이번 방학의 공부는 여기까지만 하도록 함!!
그래도 필수 기능들은 해봤고 아무것도 몰랐던 백엔드 코드를 조금이나마 읽고 이해할 수 있어서 다행이다!!(유튜브 강의 진짜 최고)
완전 이론부터 자세하게 공부하는 건 겨울방학때 해야겠어요
그때까지 무사히 학기 중 과제 잘 해내길.......스스로 빌고있음
그럼 이만 끝~~~~~~
'🍀Web > Back-End' 카테고리의 다른 글
| [공부 기록 03] Spring Boot 게시글 리스트 조회 (1) | 2024.08.29 |
|---|---|
| [공부 기록 02] Spring Boot 작성 폼 만들기 (3) | 2024.08.28 |
| [공부 기록 01] Spring Boot 개발 환경 세팅 (4) | 2024.08.27 |
