Spring 일지 #14 (20210914) 화면 구현(일괄 추가, 삭제)
14. 일괄 추가, 삭제하기
-일괄 추가
*insert_all GET 페이지 생성(BoardController.java)
// 127.0.0.1:8080/ROOT/board/insert_all
@RequestMapping(value = "/insert_all", method = RequestMethod.GET)
public String insertAllGet() {
return "board_insert_all";
}
*jsp 생성(board_insert_all.jsp)
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>일괄 추가</title>
</head>
<body>
<div style="padding:10px">
<form th:action="@{/board/insert_all}" method="post" enctype="multipart/form-data">
<th:block th:each="i : ${#numbers.sequence(1,3)}">
제목 <input type="text" name="title" th:value="|제목 ${i}|"/>
내용 <input type="text" name="content" th:value="|내용 ${i}|"/>
작성자 <input type="text" name="writer" th:value="|작성자 ${i}|"/>
이미지 <input type="file" name="file" /><br />
</th:block>
<input type="submit" value="일괄 추가" />
</form>
</div>
</body>
</html>
*화면 확인
*insert_all POST 페이지 생성(BoardController.java)
// 127.0.0.1:8080/ROOT/board/insert_all
@RequestMapping(value = "/insert_all", method = RequestMethod.POST)
public String insertAllPost(
@RequestParam(name = "title") String[] title,
@RequestParam(name = "content") String[] content,
@RequestParam(name = "writer") String[] writer,
@RequestParam(name = "file") MultipartFile[] file ) throws IOException {
List<Board> list = new ArrayList<>();
//배열을 list에 변경하는
for(int i=0; i<title.length; i++) {
Board board = new Board();
board.setTitle(title[i]);
board.setContent(content[i]);
board.setWriter(writer[i]);
board.setImage(file[i].getBytes());
board.setImagename(file[i].getOriginalFilename());
board.setImagesize(file[i].getSize());
board.setImagetype(file[i].getContentType());
list.add(board);
}
bRepository.saveAll(list);
//127.0.0.1:8080//ROOT/board/select -> return "redirect:select";
//127.0.0.1:8080//ROOT/member/select -> return "redirect:/ROOT/board/select"
//페이지 주소가 변경되면 두번쨰 방식으로 리턴 해야한다.
// ex) 관리자 페이지와 일반 페이지를 구분하기 위해
return "redirect:select_all"; -> 추가 후 select_all 페이지로 이동
}
*일괄 추가(오라클)
-select_all 페이지 만들기
*select_all GET 페이지 생성(BoardController.java)
// 127.0.0.1:8080/ROOT/board/select_all
@RequestMapping(value = "/select_all", method = RequestMethod.GET)
public String select(Model model) {
List<Board> list = bRepository.findAllByOrderByNoDesc();
model.addAttribute("list", list);
return "board_select_all";
}
*board_select_all.jsp 생성
*수정, 삭제가 하나의 form 안에 있어 무었을 눌러도 같은 반응이 나타난다.
수정(subimt)은 form을 사용하고 삭제(button)는 script를 사용해 구현한다.
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app" style="padding: 10px;">
<a th:href="@{/board/insert_all}">일괄 추가</a>
<hr />
<form th:action="@{/board/update_all}" method="post" name="form">
<table border="1">
<tr>
<th>체크</th>
<th>글번호</th>
<th>제목</th>
<th>내용</th>
<th>작성자</th>
<th>조회수</th>
<th>날짜</th>
</tr>
<!--<td th:text="${idx}"></td> 로 idx 구조 확인가능-->
<tr th:each="brd, idx : ${list}">
<td><input type="checkbox" name="chks" th:value="${brd.no}" /></td>
<td th:text="${brd.no}"></td>
<td th:text="${brd.title}"></td>
<td th:text="${brd.content}"></td>
<td th:text="${brd.writer}"></td>
<td th:text="${brd.hit}"></td>
<td th:text="${brd.regdate}"></td>
</tr>
</table>
<input type="submit" value="수정" />
<input type="button" value="삭제"
th:onclick="|javascript:handleDelete()|" />
</form>
<hr />
</div>
<script th:inline="javascript">
function handleDelete(){
var theForm = document.form;
theForm.action = "/ROOT/board/delete_all";
theForm.submit();
}
</script>
</body>
</html>
*일괄 추가 확인하기
-일괄 삭제
*dlelet_all 페이지 생성(BoardController.java)
// 127.0.0.1:8080/ROOT/board/delete_all
@RequestMapping(value = "/delete_all", method = RequestMethod.POST)
public String deleteAllPost(@RequestParam(name = "chks") List<Long> chks) {
System.out.println(chks.size());
for(long chk : chks){
System.out.println(chk);
}
bRepository.deleteAllByIdInBatch(chks);
return "redirect:select_all"; <- 삭제 후 select_all 페이지로 이동
}
*삭제하기
