-
코드로 배우는 스프링부트 웹 프로젝트 Day 17Spring/코드로 배우는 스프링부트 웹 프로젝트 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>
board/list 실행 화면 [ 게시물 등록 처리 ]
- 게시물의 작성자는 현재 존재하는 사용자의 이메일 주소로 지정해야 함
- 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>
register 페이지 
정상적으로 등록된 모습 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도 추가해준다.
'Spring > 코드로 배우는 스프링부트 웹 프로젝트' 카테고리의 다른 글
코드로 배우는 스프링부트 웹 프로젝트 Day 16 (0) 2022.09.21 코드로 배우는 스프링부트 웹 프로젝트 Day 15 (0) 2022.09.19 코드로 배우는 스프링부트 웹 프로젝트 Day 14 (0) 2022.09.14 코드로 배우는 스프링부트 웹 프로젝트 Day 13 (0) 2022.09.12 코드로 배우는 스프링부트 웹 프로젝트 Day 12 (0) 2022.09.07