-
게시판 만들기(5) - 데이터 Update,Delete (게시글 수정, 삭제)SpringBoot/게시판 (SpringBoot, H2,Mybatis,Thymeleaf) 2021. 1. 20. 15:12
게시판 카테고리의 포스팅들은 IntelliJ, Gradle, SpringBoot, Mybatis, H2-Database, Thymeleaf를 사용해
간단한 게시판을 만들어가는 포스팅입니다.boardMapper.xml (쿼리 작성)
boardMapper.xml 수정문은 update태그로 열어주신 후 id를 설정한 뒤 parameterType으로 Board.class를 받도록 작성합니다.
내부 쿼리문은
UPDATE 테이블명 (tbl_board)
SET 바꿀 컬럼 (title,content) = 매개변수 (#title, #content)
WHERE 조건 (tbl_board의 pk인 boardId가 매개변수로 넘어온 #boardId와 같다면)
위와 같이 동작할 수 있도록 작성해주시고,
삭제문은 delete태그로 열어주신 후 id를 설정한 뒤 parameterType으로 Long을 받도록 작성합니다.
Long은 tbl_board의 pk인 boardId가 Long타입이기에 Long으로 설정한 것입니다.
내부 쿼리문은
DELETE
FROM 삭제할 테이블(tbl_board)
WHERE 조건
위와 같이 작성해주시면 쿼리는 끝이 납니다.
boardMapper.interface
boardMapper 이 전에 작성된 Mapper에서 하단 2개의 메서드를 추가해줍니다.
이 메소드 이름은 위에서 작성한 boardMapper의 id값과 같아야하고, 매개변수가
parameterType으로 설정된 값과 일치해야 합니다.
boardService
boardService Service단에서 추가된것은 Transactional 어노테이션과 아래 updateBoard, deleteBoard 부분으로,
Transactional 어노테이션은 스프링에서 지원해주는 선언적 트랜잭션으로, 간단하게 말하자면
조회를 제외한 생성,수정,삭제의 동작을 수행할 때 쿼리를 처리하는 과정에서
오류가 발생했을 때 자동으로 롤백해주는 역할을 수행해줍니다.
updateBoard에서는 앞서 작성한 Mapper의 updateBoard를 호출,
deleteBoard에서는 Mapper의 deleteBoard를 호출합니다.
boardController
boardController http://localhost:8080/board/update를 호출했을 때
updateBoard 메소드가 동작하며,
같이 넘어온 파라미터(board)를 받아와 service의 updateBoard를 호출합니다.
controller -> service -> mapper -> xml
그 후 http://localhost:8080/board/main의 페이지인 메인화면으로 이동하게 만들어줍니다.
http://localhost:8080/board/delete를 호출했을 때
deleteBoard 메소드가 동작하며
같이 넘어온 파라미터(boardId)로 service를 호출해 삭제 쿼리를 날려 데이터베이스에서 삭제될 수 있도록
작성해주고, 마찬가지로 메인화면으로 이동하게 작성해주었습니다.
테스트
view.html 이전에 만들어놨던 view.html파일을 위와 같이 수정했습니다 .
<p>, <textarea> 태그에 id를 추가한것과, 삭제 수정 버튼과 form을 추가했습니다.
버튼들은 id가 ~Btn인 버튼으로, class는 부트스트랩 문법입니다.
작성한 뒤 게시글 조회를 해보시면
10번 게시글 view 위와같은 화면을 보실 수 있습니다. 이제 기능적 처리를 해보겠습니다
view.html <script> 동작은 굉장히 단순하게 이루어집니다.
수정 기능
수정 버튼인 updateBtn을 클릭했을 때, <p id=title>[[${제목}]] 이었던 부분을
input 텍스트박스로 변경해주었고 ->$('#title').html(str)
<div id=content>
내부에 있던 textarea또한 값을 입력할 수 있도록 변경해줍니다.
핵심적인 부분은 $("#updateBtn").attr("id","updateConfirmBtn")
이부분으로 id가 updateBtn이었던 버튼의 id를 updateConfirmBtn으로 변경해주어좀 더 간단하게 (별도의 페이지 생성, th:if와 같은 코드)를 하지 않기 위해
버튼 1개로 2개의 동작을 수행할 수 있도록 만들었습니다.
수정 버튼 눌렀을 때. 
수정버튼 누르고 입력했을 때. 위와 같이 수정버튼을 누르면 제목과 내용 부분이 글을 입력할 수 있도록 바뀌었습니다
그 후 id가 updateConfirmBtn으로 변경된 수정버튼을 클릭하게 되면,
boardId를 받아와 저장해놓고
updateTitle은 새로 생긴 title의 입력값,
updateContent는 새로 생긴 content의 입력값이 되고
form에 게시글 수정을 위한 파라미터 Board board를 넘겨줄 수 있게
form.append("<input type='hidden' name='boardId' value='"+boardId+"'>");
form.append("<input type='hidden' name='title' value='"+updateTitle+"'>");
form.append("<input type='hidden' name='content' value='"+updateContent+"'>");form.append("<input type='hidden' name='_method' value='put'>");
board의 필드인 boardId, title, content를 넘길 수 있도록 위와 같이 작성합니다.
form.append는 form에 필드를 추가할 수 있게끔 해줍니다.
이제 컨트롤러를 호출할 차례인데
여기서 중요한것은 form.append("<input type='hidden' name='_method' value='put'>");
이부분으로
컨트롤러에서 작성된 updateBoard메소드는 PutMapping으로 동작하게 만들어놨었습니다.
그렇기에 form의 method 또한 put으로 보내주어야하는게 맞지만, html의 form태그는 post,get 방식만
지원해줍니다. 그렇기에 따로 설정이 필요한데요 이것 또한 아주 간단하게 마무리할 수 있습니다.
resources폴더의 application.properties 혹은 application.yml파일에 들어가
spring.mvc.hiddenmethod.filter.enabled=true 이 부분을 추가해주시면 됩니다.
다시 돌아와 스크립트 내부에 form.append("<input type='hidden' name='_method' value='put'>");
이 코드를 추가해주시고, 버튼을 다시 누르게 된다면, put방식으로 제대로 전송되는 모습을 확인할 수 있고,
동작도 제대로 수행되는 것을 확인할 수 있습니다.
view.html 수정 확인 
수정확인 삭제 기능
boardId를 받아와 저장해놓고, deleteBtn(삭제버튼)을 클릭했을 때
비어있던 form의 action 경로를 delete(컨트롤러에서 작성된 경로)로 바꾸어주고,
비어있던 form 내부의 값 (boardId)을 추가해줍니다.
그 후 update와 같이
form.append("<input type='hidden' name='_method' value='delete'>");
delete로 전송이 가능하게 변경해주면 모두 완료입니다.
삭제 전 9번 게시글 
삭제 후 리스트 9번 게시글이 삭제된 것을 확인할 수 있습니다.
여기까지 정말 간단하게 만드는 게시판 1~5 CRUD를 모두 마쳤습니다.
전체코드 view.html
<html xmlns xmlns:th="http://www.w3.org/1999/xhtml" : th="http://www.thymeleaf.org">
<head>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="js/vendor/modernizr-3.8.0.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>window.jQuery || document.write('<script src="@{/js/vendor/jquery-3.4.1.min.js}"><\/script>')</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<meta charset="UTF-8">
<title>Title</title>
</head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container">
<p>글번호 : [[${view.boardId}]]</p>
<p id="title">제목 : [[${view.title}]]</p>
<p>작성자 : [[${view.name}]]</p>
내용 :
<div id="content">
<textarea readonly="readonly"
class="form-control"
th:text="${view.content}">
</textarea>
</div>
<button id="deleteBtn" class="btn btn-danger btn-sm float-right">삭제</button>
<button id="updateBtn" class="btn btn-info btn-sm float-right">수정</button>
<form id="form" th:action="@{/}" method="post">
</form>
</div>
<script th:inline="javascript">
$(document).on('ready', function (e) {
var form= $("#form");
var boardId= [[${view.boardId}]];
$(document).on('click', '#deleteBtn', function (e) {
$('#form').attr("action","delete");
form.append("<input type='hidden' name='boardId' value='"+boardId+"'>");
form.append("<input type='hidden' name='_method' value='delete'>");
form.submit();
})
$(document).on('click','#updateBtn',function (e) {
var str="<input class='form-control' width='250'" +
"placeholder='제목 입력' id='updateTitle'>";
$("#title").html(str);
str="<textarea class='form-control' placeholder='내용 입력'" +
"id='updateContent'></textarea>";
$("#content").html(str);
$("#updateBtn").attr("id","updateConfirmBtn");
})
$(document).on('click','#updateConfirmBtn',function (e){
$('#form').attr("action","update");
var updateTitle= $('#updateTitle').val();
var updateContent=$('#updateContent').val();
form.append("<input type='hidden' name='boardId' value='"+boardId+"'>");
form.append("<input type='hidden' name='_method' value='put'>");
form.append("<input type='hidden' name='title' value='"+updateTitle+"'>");
form.append("<input type='hidden' name='content' value='"+updateContent+"'>");
form.submit();
})
})
</script>
</body>
</html>'SpringBoot > 게시판 (SpringBoot, H2,Mybatis,Thymeleaf)' 카테고리의 다른 글
게시판 만들기(4)- Create(게시글 만들기) (14) 2021.01.05 게시판 만들기(3) - 데이터 Read (게시글 리스트와 게시글 상세보기 (1) 2021.01.03 게시판 만들기(2) - Mapper설정. (1) 2021.01.03 게시판 만들기(1) - 프로젝트 생성과 설정. (1) 2021.01.03