반응형
List > Create > Read > Update > Delete
1. Mapper 작성
<delete id="deleteBoard" parameterType="int">
delete from board
where board_seq in
<foreach item="item" index="index" collection="array"
open="(" separator="," close=")">
#{item}
</foreach>
</delete>이번에 제가 구현할 게시물 삭제는 단순히 게시물 하나 삭제하는 것이 아닌 체크박스를 이용한 여러 개의 게시물을 삭제하는 것입니다. 그를 위해서 foreach문을 이용해서 쿼리문을 작성해 주도록 합니다.
collection : 전달받은 인자. List or Array 형태만 가능
item : 전달받은 인자 값을 alias 명으로 대체
open : 구문이 시작될때 삽입할 문자열
close : 구문이 종료될때 삽입할 문자열
separator : 반복 되는 사이에 출력할 문자열
index : 반복되는 구문 번호이다. 0부터 순차적으로 증가
2. Dao, DaoImpl 작성
// Dao
// 이전 코드
void deleteBoard(Integer[] chk);
// DaoImpl
// 이전 코드
@Override
public void deleteBoard(Integer[] chk) {
sqlsession.delete("BoardMapper.deleteBoard", chk);
}여러 개의 게시물 정보(seq)가 배열로 넘어옵니다.
3. Service, ServiceImpl 작성
// Service
// 이전 코드
void deleteBoard(Integer[] chk);
// ServiceImpl
// 이전 코드
@Override
public void deleteBoard(Integer[] chk) {
boardDao.deleteBoard(chk);
}
4. Controller 작성
// 이전 코드
@RequestMapping(value="/delete", method = RequestMethod.POST)
public String deletePost(Integer[] chkBox) {
boardSer.deleteBoard(chkBox);
return "redirect:/list";
}
5. listPage.jsp 수정
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set var="path" value="${ pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/resources/assets/css/style.css">
<title>List Page</title>
</head>
<body>
<header>
<div class="container">
<h1>List Page</h1>
</div>
</header>
<nav>
<div class='container'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</nav>
<main>
<div class='container'>
<!-- form 태그 추가 -->
<form id='delForm'>
<button onclick='createBoardBtn(event)'>글쓰기</button>
<!-- 삭제 버튼 추가 -->
<button onclick='deleteBoardBtn(event)'>삭제</button>
<table>
<thead>
<tr>
<th><input type='checkbox' id='allChk'></th> <!-- 체크박스 -->
<th>번호</th>
<th>글쓴이</th>
<th>제목</th>
<th>만든 날짜</th>
<th>수정 날짜</th>
<th>조회수</th>
</tr>
</thead>
<tbody>
<c:forEach var="boardList" items="${boardList}">
<tr>
<td><input type="checkbox" name="chkBox" value="${boardList.boardSeq}"></td>
<td>${boardList.boardSeq}</td>
<td>${boardList.writer}</td>
<td><a href="${path}/read/${boardList.boardSeq}">${boardList.title}</a></td> <!-- title -->
<td><fmt:formatDate value="${boardList.regDate}" pattern="yyyy-MM-dd" /></td>
<td><fmt:formatDate value="${boardList.uptDate}" pattern="yyyy-MM-dd" /></td>
<td>${boardList.viewCnt}</td>
</tr>
</c:forEach>
</tbody>
</table>
</form>
</div>
</main>
<aside>
<div class='container'>
<h2>Sidebar</h2>
<p>This is the sidebar</p>
</div>
</aside>
</body>
</html>이번에 listPage를 수정하며 찾은 실수가 있었습니다. checkbox의 value가 boardSeq가 아닌 seq로 되어 있더군요! seq가 아닌 boardSeq로 작성해 주도록 합니다.
form 태그를 삭제 버튼과 checkbox가 모두 들어있게 배치 시켜줍니다.
6. JQuery 작성
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
function createBoardBtn(event){
event.preventDefault();
window.location.href = '/create';
}
function deleteBoardBtn(event){
event.preventDefault();
if($('[name=chkBox]:checked').length == 0){
alert('삭제할 게시물을 선택해 주세요.');
return;
}
$('#delForm').attr({
'action' : '/delete',
'method' : 'post'
}).submit();
}
$(function(){
// 체크박스
$('#allChk').on('click', function(){
var isAllChked = $('#allChk').is(':checked');
if(isAllChked){
$('[name=chkBox]').prop('checked', true);
} else {
$('[name=chkBox]').prop('checked', false);
}
});
})
</script>첫 checkbox를 누르면 모두 체크 됐다가 해제되는 코드와 삭제 버튼을 눌렀을 때 체크된 게시물이 있는지 체크하는 코드를 적어줍니다. (전체 삭제, null 방지)
7. 결과물
후기
이번에는 기존에 학원에서 배웠던 단일 게시물 삭제가 아닌, 체크박스를 이용하여 복수의 게시물을 삭제하는 기능을 구현해보았습니다. 실제 여러 사이트, 프로그램에서도 많이 구현된 기능인 만큼 뜻 깊은 시간이었습니다.
다행히 생각보다는 고려해야 할 점이 적었고 덕분에 금방 마무리 할 수 있었습니다.
이번에 만나본 오류는 Mapper에서 생긴 에러였습니다. 실제 프로젝트를 하며 만나본 것은 아니고 문법을 찾아보기 전 'parameterType이 왜 배열이 아니고 단순한 자료형인가?'에서 시작된 의문점이 만든 이벤트였습니다.
덕분에 다양하게 만져본 뒤, 찾아보면서 '아~ 이렇게 적어야 해서 그렇게 바꿨을 땐 안 됐던 것이구나~' 하고 깨달을 수 있었습니다.
이제 CRUD가 모두 마무리 되었습니다! 다음 시간부턴 검색으로 찾아뵙겠습니다.
꾸준한 관심과 피드백 부탁드려요.❤️ 감사합니다 빠잇!
반응형
'Spring > CRUD Project' 카테고리의 다른 글
| [CRUD] 페이징 (0) | 2023.11.29 |
|---|---|
| [CRUD] 검색 (1) | 2023.11.28 |
| [CRUD] Update : 글 수정하기 (1) | 2023.11.24 |
| [CRUD] Read : 글 읽기 (1) | 2023.11.23 |
| [CRUD] Create : 글 쓰기 (0) | 2023.11.22 |