Spring/코드로 배우는 스프링부트 웹 프로젝트
코드로 배우는 스프링부트 웹 프로젝트 Day 17
한 면만 쓴 종이
2022. 11. 11. 02:10
list.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http:/>/www.thymeleaf.org">
<th:block th:replace="~{/layout/basic :: setContent(~{this::content} )}">
<th:block th:fragment="content">
<h1 class="mt-4">Board List Page
<span>
<a th:href="@{/board/register}">
<button type="button" class="btn btn-outline-primary">REGISTER
</button>
</a>
</span>
</h1>
<form action="/board/list" method="get" id="searchForm">
<div class="input-group">
<input type="hidden" name="page" value="1">
<div class="input-group mb-3">
<div class="input-group-prepend">
<select class="custom-select" name="type" style="...">
<option th:selected="${pageRequestDTO.type == null}">------</option>
<option value="t" th:selected="${pageRequestDTO.type == 't'}">제목</option>
<option value="c" th:selected="${pageRequestDTO.type == 't'}">내용</option>
<option value="w" th:selected="${pageRequestDTO.type == 't'}">작성자</option>
<option value="tc" th:selected="${pageRequestDTO.type == 't'}">제목 + 내용</option>
<option value="tcw" th:selected="${pageRequestDTO.type == 't'}">제목 + 내용 + 작성자</option>
</select>
</div>
<input class="form-control" name="keyword" th:value="${pageRequestDTO.keyword}">
<div class="input-group-append" id="button-addon4">
<button class="btn btn-outline-secondary btn-search" type="button">Search</button>
<button class="btn btn-outline-secondary btn-clear" type="button">Clear</button>
</div>
</div>
</div>
</form>
<table class="table table-striped">
<thread>
<tr>
<th scope="col">#</th>
<th scope="col">Title</th>
<th scope="col">Writer</th>
<th scope="col">Regdate</th>
</tr>
</thread>
<tbody>
<tr th:each="dto : ${result.dtoList}" >
<th scope="row">
<a th:href="@{/board/read(bno = ${dto.bno},
page = ${result.page},
type=${pageRequestDTO.type},
keyword = ${pageRequestDTO.keyword})}">
[[${dto.bno}]]
</a>
</th>
<td>[[${dto.title}]] --------------- [<b th:text="${dto.replyCount}"></b>]</td>
<td>[[${dto.writerName}]] <small>[[${dto.writerEmail}]]</small> </td>
<td>[[${#temporals.format(dto.regDate, 'yyyy/MM/dd')}]]</td>
</tr>
</tbody>
</table>
<ul class="pagination h-100 justify-content-center align-items-center">
<li class="page-item " th:if="${result.prev}">
<a class="page-link" th:href="@{/board/list(page= ${result.start -1}, type=${pageRequestDTO.type}, keyword = ${pageRequestDTO.keyword} ) }" tabindex="-1">Previous</a>
</li>
<li th:class=" 'page-item ' + ${result.page == page?'active':''} " th:each="page: ${result.pageList}">
<a class="page-link" th:href="@{/board/list(page = ${page} , type=${pageRequestDTO.type}, keyword = ${pageRequestDTO.keyword} )}">
[[${page}]]
</a>
</li>
<li class="page-item" th:if="${result.next}">
<a class="page-link" th:href="@{/board/list(page= ${result.end + 1}, type=${pageRequestDTO.type}, keyword=${pageRequestDTO.keyword} )}">Next</a>
</li>
</ul>
</th:block>
</th:block>
</html>
[ 게시물 등록 처리 ]
- 게시물의 작성자는 현재 존재하는 사용자의 이메일 주소로 지정해야 함
- BoardController 에서는 GET 방식으로 동작하는 링크와 POST 방식으로 실제 처리하는 메서드를 추가
- 정상적인 등록 후에는 다시 목록 페이지로 이동하도록 작성
GET 방식으로 링크 이동만 하고 실제 처리는 POST 방식으로 하는 것!
BoardController 수정
@GetMapping("/register")
public void register() {
log.info("register get...");
}
@PostMapping("/register")
public String registerPost(BoardDTO dto, RedirectAttributes redirectAttributes) {
log.info("dto..." + dto);
// 새로 추가된 엔티티의 번호
Long bno = boardService.register(dto);
log.info("BNO: " + bno);
redirectAttributes.addFlashAttribute("msg", bno);
return "redirect:/board/list";
}
register.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block th:replace="~{/layout/basic :: setContent(~{this::content})}">
<th:block th:fragment="content">
<h1 class="mt-4">Board Register Page</h1>
<form th:action="@{/board/register}" th:method="post">
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" name="title" placeholder="Enter Title">
</div>
<div class="form-group">
<label>Content</label>
<textarea class="form-control" rows="5" name="content"></textarea>
</div>
<div class="form-group">
<label>Writer Email</label>
<input type="email" class="form-control" name="writerEmail" placeholder="Writer Email">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</th:block>
</th:block>
</html>
BoardController 수정
@GetMapping("/read")
public void read(@ModelAttribute("requestDTO") PageRequestDTO pageRequestDTO, Long bno, Model model) {
log.info("bno: " + bno);
BoardDTO boardDTO = boardService.get(bno);
log.info(boardDTO);
model.addAttribute("dto", boardDTO);
}
read.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block th:replace="~{/layout/basic :: setContent(~{this::content})}">
<th:block th:fragment="content">
<h1 class="mt-4">Board Read Page</h1>
<div class="form-group">
<label>Bno</label>
<input type="text" class="form-control" name="gno" th:value="${dto.bno}" readonly>
</div>
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" name="title" th:value="${dto.title}" readonly>
</div>
<div class="form-group">
<label>Content</label>
<textarea class="form-control" rows="5" name="content" readonly>[[${dto.content}]]</textarea>
</div>
<div class="form-group">
<label>Writer</label>
<input type="text" class="form-control" name="writer" th:value="${dto.writerName}" readonly>
</div>
<div class="form-group">
<label>RegDate</label>
<input type="text" class="form-control" name="regDate" th:value="${#temporals.format(dto.regDate, 'yyyy/MM/dd HH:mm:ss')}" readonly>
</div>
<div class="form-group">
<label>ModDate</label>
<input type="text" class="form-control" name="modDate" th:value="${#temporals.format(dto.modDate, 'yyyy/MM/dd HH:mm:ss')}" readonly>
</div>
<a th:href="@{/board/modify(bno = ${dto.bno}, page=${requestDTO.page}, type=${requestDTO.type}, keyword=${requestDTO.keyword})}">
<button type="button" class="btn btn-primary">Modify</button>
</a>
<a th:href="@{/board/list(page=${requestDTO.page}, type=${requestDTO.type}, keyword=${requestDTO.keyword})}">
<button type="button" class="btn btn-info">List</button>
</a>
</th:block>
</th:block>
</html>
[ 게시물 수정 / 삭제 처리 ]
우선 수정과 삭제 작업을 하는 메서드를 GET 방식과 POST 방식으로 메서드를 구현한다.
@GetMapping({"/read", "/modify"})아까 만든 Controller의 read에 modify도 추가해준다.