코드로 배우는 스프링부트 웹 프로젝트 Day 10
/* Annotation들은 스프링부트 프로젝트의 Annotation 정리 페이지에 따로 정리해두었습니다. */
[방명록의 수정/삭제 처리]
계획
- Guestbook의 수정은 Post 방식으로 처리하고 다시 수정된 결과를 확인할 수 있는 조회 화면으로 이동
- 삭제는 Post방식으로 처리하고 목록 화면으로 이동
- 목록을 이동하는 작업은 Get 방식으로 처리. 기존에 사용하던 페이지 번호 등을 유지해서 이동!
수정과 삭제는 모두 '수정 및 삭제가 가능한 페이지'로 이동한 상태에서 수정과 삭제 중 선택을 해서 작업이 이루어짐
이를 구현하기 위해 GuestbookController에서는 조회와 비슷하게 Get방식으로 진입하는 'gusetbook/modify'를 기존의 read()에 어노테이션의 값을 변경해서 처리
@GetMapping({"/read", "/modify"})
public void read(long gno, @ModelAttribute("requestDTO") PageRequestDTO requestDTO, Model model) {
log.info("gno: " + gno);
GuestbookDTO dto = service.read(gno);
model.addAttribute("dto" ,dto);
}
read.html을 modify.html을 만들어서 복사.붙여넣기 한다.
<h1 class="mt-4">GuestBook Modify Page</h1>
<form action="/guestbook/modify" method="post"><h1>태그의 내용을 modify로 바꾸고, form 태그로 수정된 내용을 감싸 Post 방식으로 처리하도록 함
<div class="form-group">
<label>Gno</label>
<input type="text" class="form-control" name="gno" th:value="${dto.gno}" readonly>
</div>
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" name="title" th:value="${dto.title}">
</div>
<div class="form-group">
<label>Content</label>
<textarea class="form-control" rows="5" name="content">[[${dto.content}]]</textarea>
</div>
<div class="form-group">
<label>Writer</label>
<input type="text" class="form-control" name="writer" th:value="${dto.writer}" readonly>
</div>
<div class="form-group">
<label>RegDate</label>
<input type="text" class="form-control" th:value="${#temporals.format(dto.regDate, 'yyy/MM/dd HH:mm:ss')}" readonly>
</div>
<div class="form-group">
<label>ModDate</label>
<input type="text" class="form-control" th:value="${#temporals.format(dto.modDate, 'yyyy/MM/dd HH:mm:ss')}" readonly>
</div>
</form>Title과 내용만 수정 가능하도록 한다. (readonly삭제)
regDate와 modDate는 수정이 불가능할 뿐더러, JPA에서 자동 처리되므로, name속성을 없앰
</form>
<button type="button" class="btn btn-primary">Modify</button>
<button type="button" class="btn btn-info">List</button>
<button type="button" class="btn btn-danger">Remove</button>화면에 표시할 수정, List, 삭제용 버튼 추가
위와 같이 Title과 Content만 수정 가능하도록 처리된다.
수정, 삭제, 목록의 각 버튼을 클릭할 때 마다 다른 이벤트를 처리해야 한다.
이는 <form>태그의 action속성을 통해 처리 가능하다. 해당 처리는 조금 뒤쪽에 한다.
[서비스 계층에서의 수정과 삭제]
수정과 삭제 관련 기능 추가
GuestbookService 인터페이스 추가
void remove(Long gno);
void modify(GuestbookDTO dto);
GuestbookServiceImpl 클래스 추가
@Override
public void remove(Long gno) {
repository.deleteById(gno);
}
@Override
public void modify(GuestbookDTO dto) {
//업데이트 하는 항목은 '제목', '내용'
Optional<Guestbook> result = repository.findById(dto.getGno());
if(result.isPresent()) {
Guestbook entity = result.get();
entity.changeTitle(dto.getTitle());
entity.changeContent(dto.getContent());
repository.save(entity);
}
}remove()와 modify()를 구현
[컨트롤러의 게시물 삭제]
삭제 기능은 Post 방식으로 gno값을 전달하고, 삭제 후에는 다시 목록의 첫 페이지로 이동하는 방식이 가장 보편적임
GuestbookController 클래스
@PostMapping("/remove")
public String remove(long gno, RedirectAttributes redirectAttributes) {
log.info("gno: " + gno);
service.remove(gno);
redirectAttributes.addFlashAttribute("msg", gno);
return "redirect:/guestbook/list";
}
[modify.html 삭제 처리]
삭제 작업은 Get 방식으로 수정 페이지에 들어가서 '삭제' 버튼을 클릭하는 방식으로 제작
modify.html 수정
<button type="button" class="btn btn-primary modifyBtn">Modify</button>
<button type="button" class="btn btn-info listBtn">List</button>
<button type="button" class="btn btn-danger removeBtn">Remove</button>각 버튼 구별을 위해 수정
<script th:inline="javascript">
var actionForm = $("form"); //form 태그 객체
$(".removeBtn").click(function() {
actionForm
.attr("action", "/guestbook/remove")
.attr("method", "post");
actionForm.submit();
});
</script>
자바스크립트 인라인 기능을 사용해 구현
<form> 태그의 action 속성에 값으로 /guestbook/remove 를 지정
<form> 태그의 method 속성에 값으로 post를 지정
<form> 태그는 사용자가 입력한 정보를 서버로 전달하는 역할 ↴
<form> 태그 내에는 <input> 태그로 gno가 있기 때문에 컨트롤러에서는 여러 파라미터 중에서 gno를 추출해서 삭제 시에 이용함
[POST 방식의 수정 처리]
수정 처리는 POST 방식으로 이루어져야 함
고려해야 할 점
- 수정 시에 수정해야하는 내용(제목, 내용, 글 번호)이 전달되어야 함
- 수정 후에는 목록 페이지로 이동하거나 조회 페이지로 이동해야 함 (이때, 가능하면 기존의 페이지 번호를 유지하는 것이 좋음)
modify.html에는 /guestbook/read 로 이동할 때 페이지 번호가 파라미터로 전달되고 있고, 수정 페이지로 이동할 경우에도 같이 전달됨
이를 이용하여 수정이 완료된 후에도 동일한 목록 및 조회 페이지를 유지할 수 있도록 page값도 <form> 태그에 추가해서 전달하도록 함
modify.html
<form action="/guestbook/modify" method="post">
<!-- 페이지 번호 -->
<input type="hidden" name="page" th:value="${requestDTO.page}">
[컨트롤러의 수정 처리]
GuestbookController에서는 Guestbook 자체의 수정과 페이징 관련 데이터 처리를 같이 진행해주어야 함
GuestbookController 클래스
@PostMapping("/modify")
public String modify(GuestbookDTO dto, @ModelAttribute("requestDTO") PageRequestDTO requestDTO, RedirectAttributes redirectAttributes) {
log.info("post modify..................................................");
log.info("dto: " + dto);
service.modify(dto);
service.modify(dto);
redirectAttributes.addAttribute("page", requestDTO.getPage());
redirectAttributes.addAttribute("gno" ,dto.getGno());
return "redirect:/guestbook/read";
}수정해야하는 글의 정보를 가지는 GuestbookDTO, 기존의 페이지 정보를 유지하기 위한 PageRequestDTO, 리다이렉트로 이동하기 위한 RedirectAttributes 세 가지가 파라미터로 필요함
수정을 완료하면, read 페이지로 이동 (기존 페이지 정보도 같이 유지해서 조회 페이지에서 다시 목록 페이지로 이동할 수 있도록 함)
[수정 화면에서의 이벤트 처리]
modify.html
$(".modifyBtn").click(function() {
if(!confirm("수정하시겠습니까?")) {
return;
}
actionForm
.attr("action", "/guestbook/modify")
.attr("method", "post")
.submit();
});confirm을 통해 정말 수정할 것인지 재확인 후, Post 방식으로 서버에 전송
이후, 다시 조회 페이지(read)로 이동
[수정 화면에서 다시 목록 페이지로]
목록 페이지로 이동하는 버튼 처리
목록 페이지로 이동할 때에는 page 파라미터 외에는 별도로 필요하지 않음
=> page를 제외한 파라미터들을 지운 상태로 처리
$(".listBtn").click(function () {
var pageInfo = $("input[name='page']");
actionForm.empty(); //form 태그의 모든 내용을 지움
actionForm.append(pageInfo); //목록 페이지 이동에 필요한 내용을 다시 추가
actionForm
.attr("action", "/guestbook/list")
.attr("method", "get");
console.log(actionForm.html());
actionForm.submit();
});
[검색 처리]
검색 처리는 크게 서버 사이드 처리와 화면 쪽의 처리로 나눌 수 있음
서버 사이드 처리
- PageRequestDTO에 검색 타입(type)과 키워드(keyword)를 추가
- 이하 서비스 계층에서 Querydsl을 이용해서 검색 처리
검색 항목 분류
- 제목, 내용, 작성자
- 제목 or 내용
- 제목 or 내용 or 작성자
[서버측 검색 처리]
PageRequestDTO에 검색 타입과 검색 키워드 추가
PageRequestDTO 클래스
private String type;
private String keyword;type과 keyword 추가
[서비스 계층의 검색 구현과 테스트]
동적으로 검색 조건이 처리되는 경우의 실제 코딩은 Querydsl을 통해서 BooleanBuilder를 작성
GuestbookRepository는 Querydsl로 작성된 BooleanBuilder를 findAll() 처리하는 용도로 사용
BooleanBuilder는 별도의 클래스 등을 작성하여 처리할 수 있지만, 간단히 처리하기 위해 GuestbookServiceImpl에 메서드를 작성해서 처리
GuestbookServiceImpl 클래스에 추가
private BooleanBuilder getSearch(PageRequestDTO requestDTO) { //Querydsl 처리
String type = requestDTO.getType();
BooleanBuilder booleanBuilder = new BooleanBuilder();
QGuestbook qGuestbook = QGuestbook.guestbook;
String keyword = requestDTO.getKeyword();
BooleanExpression expression = qGuestbook.gno.gt(0L); //gno > 0 조건만 생성
booleanBuilder.and(expression);
if(type == null || type.trim().length() == 0) { //검색 조건이 없는 경우
return booleanBuilder;
}
//검색 조건 작성
BooleanBuilder conditionBuilder = new BooleanBuilder();
if (type.contains("t")) {
conditionBuilder.or(qGuestbook.title.contains(keyword));
}
if (type.contains("c")) {
conditionBuilder.or(qGuestbook.content.contains(keyword));
}
if (type.contains("w")) {
conditionBuilder.or(qGuestbook.writer.contains(keyword));
}
//모든 조건 통합
booleanBuilder.and(conditionBuilder);
return booleanBuilder;
}검색 조건이 있는 경우, conditionBuilder 변수를 통해 검색 조건들을 or로 연결하여 return
검색 조건이 없는 경우, gno > 0 으로만 return