728x90
반응형
들어가기 전에
하기 포스팅은 "스프링부트 시작하기(김인우 저)" 책을 공부하며 적은 포스팅입니다. 이번 시간에는 앞서 등록한 게시글 상세 화면에서 게시글 수정 및 삭제할 수 있는 기능을 넣어보도록 하겠습니다.
뷰 변경하기
먼저 기존에 만든 게시글 상세 화면을 약간 수정하여 수정 및 삭제 기능을 추가하겠습니다. boardDetail.html 내용을 아래와 같이 수정합니다. ADD START ~ ADD END 사이 내용들만 추가하면 됩니다.
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>board</title>
<link rel="stylesheet" th:href="@{/css/style.css}"/>
</head>
<body>
<div class="container">
<h2>게시글 상세 화면</h2>
<!-- ADD START -->
<form id="frm" method="post">
<!-- ADD END -->
<table class="board_detail">
<colgroup>
<col width="15%"/>
<col width="35%"/>
<col width="15%"/>
<col width="35%"/>
</colgroup>
<caption>게시글 상세내용</caption>
<tbody>
<tr>
<th scope="row">글 번호</th>
<td th:text="${board.boardIdx}"></td>
<th scope="row">조회수</th>
<td th:text="${board.hitCnt}"></td>
</tr>
<tr>
<th scope="row">작성자</th>
<td th:text="${board.creatorId}"></td>
<th scope="row">작성일</th>
<td th:text="${#temporals.format(board.createdDatetime, 'yyyy-MM-dd HH:mm:ss')}"></td>
</tr>
<tr>
<th scope="row">제목</th>
<td colspan="3">
<input type="text" id="title" name="title"
th:value="${board.title}"/>
</td>
</tr>
<tr>
<td colspan="4" class="view_text">
<textarea title="내용" id="contents" name="contents"
th:text="${board.contents}"></textarea>
</td>
</tr>
</tbody>
</table>
<!-- ADD START -->
<input type="hidden" name="boardIdx" th:value="${board.boardIdx}">
</form>
<input type="button" id="list" value="목록으로">
<input type="button" id="edit" value="수정하기">
<input type="button" id="delete" value="삭제하기">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#list").on("click", function(){
location.href = "openBoardList.do";
});
$("#edit").on("click", function(){
var frm = $("#frm")[0];
frm.action = "updateBoard.do";
frm.submit();
});
$("#delete").on("click", function(){
var frm = $("#frm")[0];
frm.action = "deleteBoard.do";
frm.submit();
});
})
</script>
<!-- ADD END -->
</div>
</body>
</html><form id="frm" method="post">: 데이터 전송을 위해<input type="hidden" name="boardIdx" th:value="${board.boardIdx}">: form을 이용하여 데이터를 전송할때는 입력창(<input>,<textarea>등)의 내용만 전달됩니다. 그래서, 입력창이 아닌 데이터들 중 글을 수정하거나 삭제할 때 필요한 글 번호를 "hidden" 속성의<input>에 저장해서 다른 데이터가 전송될 때 글 번호 역시 전송되도록 했습니다.<input type="button" id="list" value="목록으로">: 버튼을 추가합니다.<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>: jQuery를 사용하기 위해 jQuery 라이브러리를 추가합니다. jQuery를 추가하는 방법은 2가지가 있습니다.- jQuery 홈페이지에서 라이브러리를 다운로드해 자신의 프로젝트에 추가하는 방법입니다. 이 경우, 원하는 버전의 jQuery 라이브러리를 다운로드해서 사용할 수 있지만, 페이지를 호출할 때마다 서버에서 jQuery를 다운로드하는 데 필요한 트래픽이 지속적으로 발생합니다.
- CDN을 이용하여 jQuery를 추가할 수 있습니다. jQuery나 Google이 제공해주는 주소만 추가하면 됩니다. 위에 작성한 뷰에서는 2번 방법을 사용했습니다.
$("#list").on("click", function(){}): 목록으로 버튼을 클릭할 경우, openBoardList.do 페이지(게시판 목록 화면)로 이동합니다.$("#edit").on("click", function(){}): 수정하기 버튼을 클릭할 경우, frm이라는 이름의<form>을 이용해 updateBoard.do 주소로 데이터를 전송합니다.$("#delete").on("click", function(){}): 삭제하기 버튼을 클릭할 경우, frm이라는 이름의<form>을 이용해 deleteBoard.do 주소로 데이터를 전송합니다.
컨트롤러 영역
BoardController 클래스에 아래와 같이 게시글을 수정 및 삭제할 수 있는 코드를 추가합니다.
...
@RequestMapping("board/updateBoard.do")
public String updateBoard(BoardDto board) throws Exception {
boardService.updateBoard(board);
return "redirect:/board/openBoardList.do";
}
@RequestMapping("board/deleteBoard.do")
public String deleteBoard(int boardIdx) throws Exception {
boardService.deleteBoard(boardIdx);
return "redirect:/board/openBoardList.do";
}
...- 각 컨트롤러의 메소드는 글이 수정 또는 삭제되면 게시글 목록 화면으로 이동합니다.
서비스 및 매퍼 영역
먼저 BoardService 인터페이스에 아래 코드를 추가합니다.
// BoardService.java
...
void updateBoard(BoardDto board) throws Exception;
void deleteBoard(int boardIdx) throws Exception;
...BoardServiceImpl 클래스에는 하기 코드를 추가합니다.
// BoardServiceImpl.java
...
@Override
public void updateBoard(BoardDto board) throws Exception {
boardMapper.updateBoard(board);
}
@Override
public void deleteBoard(int boardIdx) throws Exception {
boardMapper.deleteBoard(boardIdx);
}
...BoardMapper 인터페이스에는 다음 코드를 추가합니다.
// BoardMapper.java
...
void updateBoard(BoardDto board) throws Exception;
void deleteBoard(int boardIdx) throws Exception;
...SQL 작성하기
sql-board.xml에 하기 쿼리를 추가합니다.
...
<update id="updateBoard" parameterType="board.board.dto.BoardDto">
<![CDATA[
UPDATE
t_board
SET
title = #{title},
contents = #{contents},
updated_datetime = NOW(),
updater_id = 'admin'
WHERE
board_idx = #{boardIdx}
]]>
</update>
<update id="deleteBoard" parameterType="int">
<![CDATA[
UPDATE
t_board
SET
deleted_yn = 'Y',
updated_datetime = NOW(),
updater_id = 'admin'
WHERE
board_idx = #{boardIdx}
]]>
</update>
...- updateBoard 쿼리는 글 수정 쿼리입니다. 제목 및 내용, 수정된 시간, 수정한 사람의 아이디를 변경합니다. 수정한 사람의 아이디는 임시로 admin입니다(로그인 기능 없으므로).
- deleteBoard 쿼리는 글 삭제 쿼리입니다. DB에서 삭제하지 않고, 삭제 구분 컬럼의 값만 변경합니다. 수정 쿼리와 마찬가지로 수정된 시간과 수정한 사람의 아이디를 변경합니다.
실행 결과 확인하기
수정 및 삭제가 완료된 후 SELECT 쿼리를 돌려보면 아래와 같이 데이터베이스 상에 수정된 결과가 들어가있음을 확인할 수 있습니다.
728x90
반응형
'FRAMEWORK > Spring' 카테고리의 다른 글
| [SpringBoot] 게시판 구현하기 8 (스프링의 다양한 기능 살펴보기 - 인터셉터) (0) | 2020.12.26 |
|---|---|
| [SpringBoot] 게시판 구현하기 7 (스프링의 다양한 기능 살펴보기 - 로그) (1) | 2020.12.25 |
| [SpringBoot] 게시판 구현하기 5 (게시글 상세 화면 만들기) (0) | 2020.12.21 |
| [SpringBoot] 게시판 구현하기 4 (게시글 등록 기능 생성하기) (0) | 2020.12.21 |
| [SpringBoot] 게시판 구현하기 3 (게시판 목록 만들기) (2) | 2020.12.21 |
