JAVAIARY

Spring Boot) 게시글 등록 페이지 / 등록 처리 본문

Project/2023.02~ ) Study toy 프로젝트

Spring Boot) 게시글 등록 페이지 / 등록 처리

shiherlis 2023. 2. 20. 19:05

등록 처리는 이미 GuestbookService까지 완성되었기 때문에 GuestbookController 수정하여 이용

1. 게시글 등록 처리 메서드 작성

GuestbookController

 @GetMapping("/register")
    public void register(){
        log.info("register get...");
    }

    @PostMapping("/register")
    public String registerPost(GuestbookDTO dto, RedirectAttributes redirectAttributes){
        log.info("dto..." + dto);

        // 새로 추가된 엔티티의 번호
        Long gno = service.register(dto);

        redirectAttributes.addFlashAttribute("msg", gno);

        return "redirect:/guestbook/list";
    }
  • 게시글 등록 후 보여줄 모달창에 넣어줄 msg 

2. 게시글 작성화면

register.html

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">

<th:block th:replace="~{/layout/basic :: setContent(~{this::content} )}">

    <th:block th:fragment="content">

        <h1 class="mt-4">GuestBook Register Page</h1>

        <form th:action="@{/guestbook/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</label>
                <input type="text" class="form-control" name="writer" placeholder="Enter Writer">
            </div>

            <button type="submit" class="btn btn-primary">Submit</button>
        </form>

    </th:block>

</th:block>

</html>
  • action 속성 값을 '/guestbook/register' 로 지정 및 post 방식으로 전송
  • <input> 태그에는 GuestbookDTO로 수집될 데이터이므로 name값을 Dto와 맞춰줌

3. 목록 페이지 모달창

list.html 에 모달창과 javascript 추가

 </ul>
  <div class="modal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Modal title</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <p>Modal body text goes here.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
        <script th:inline="javascript">
            var msg = [[${msg}]]
            console.log(msg);
            
            if(msg){
                $(".modal").modal();
            }
        </script>
    </th:block>

4. 등록페이지/ 조회 페이지 링크

list.html 

  • 등록페이지 링크 버튼 삽입
<h1 class="mt-4">GuestBook List Page
            <span>
                <a th:href="@{/guestbook/register}">
                    <button type="button" class="btn btn-outline-primary">Register</button>
                </a>
            </span>
        </h1>
  • 조회페이지 링크 삽입 
<tr th:each="dto : ${result.dtoList}">
                <th scope="row" ><a th:href="@{/guestbook/read(gno=${dto.gno}, page=${result.page})}">[[${dto.gno}]]</a></th>
                <td>[[${dto.title}]]</td>
                <td>[[${dto.writer}]]</td>
                <td>[[${#temporals.format(dto.regDate,'yyyy/MM/dd')}]]</td>
            </tr>

5. 조회처리

5-1. 서비스계층 구현

GuestbookService와 ServiceImpl에 메서드 작성

GuestbookDTO read(Long gno);
    @Override
    public GuestbookDTO read(Long gno) {
        Optional<Guestbook> result = repository.findById(gno);
        
        return result.isPresent()? entityToDTO(result.get()):null;
    }

 

5-2. GuestbookController

    @GetMapping("/read")
    public void read(long gno, @ModelAttribute("requestDTO") PageRequestDTO requestDTO, Model model){
        log.info("gno: " + gno);
        
        GuestbookDTO dto = service.read(gno);
        
        model.addAttribute("dto", dto);
    }
  • @ModelAttribute 는 없어도 처리가 가능하지만 명시적으로 requestDTO 라는 이름으로 처리

5-3. read.html 

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">

<th:block th:replace="~{/layout/basic :: setContent(~{this::content} )}">

    <th:block th:fragment="content">

        <h1 class="mt-4">GuestBook Read Page</h1>

            <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}" 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.writer}" 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="@{/guestbook/modify(gno=${dto.gno}, page=${requestDTO.page})}"><button type="button" class="btn btn-primary">Modify</button></a>
            <a th:href="@{/guestbook/list(page=${requestDTO.page})}"><button type="button" class="btn btn-info">List</button></a>

    </th:block>

</th:block>

</html>
  • readonly 속성 적용
  • 목록페이지 링크, 수정, 삭제 링크 제공

read(조회) 페이지

 

 

저작자표시 변경금지 (새창열림)

'Project > 2023.02~ ) Study toy 프로젝트' 카테고리의 다른 글

N:1(다대일) 연관관계 1  (0) 2023.03.01
검색 처리  (0) 2023.02.27
Spring Boot) 게시글 수정/ 삭제 처리  (0) 2023.02.21
Spring Boot) 목록처리  (0) 2023.02.20
Spring Boot) 서비스 계층과 DTO  (0) 2023.02.20
'Project/2023.02~ ) Study toy 프로젝트' Related Articles more