코드로 배우는 스프링부트 웹 프로젝트 Day 8

한 면만 쓴 종이 2022. 8. 21. 17:53

/* Annotation들은 스프링부트 프로젝트의 Annotation 정리 페이지에 따로 정리해두었습니다. */

[페이지 번호 링크 처리]

앞서 작성한 코드에서는 페이지 번호의 링크를 href="#"로 처리해두었다.

이를 실제 링크로 수정해야 한다.

list.html 수정

<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="@{/guestbook/list(page= ${result.start -1})}" 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="@{/guestbook/list(page = ${page})}">
            [[${page}]]
        </a>
    </li>

    <li class="page-item" th:if="${result.next}">
        <a class="page-link" th:href="@{/guestbook/list(page = ${result.end + 1})}">Next</a>
    </li>

</ul>

[등록 페이지와 등록 처리]

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";
}

등록처리는 GuestbookService까지 해놨기 때문에 GuestbookController에 @GetMapping과 @PostMapping을 이용해서 등록 작업을 처리하는 메소드를 작성

Get 에서는 등록 화면을 보여줌

Post 에서는 등록 처리 후, 목록 페이지로 redirect하도록 설계

redirectAttributes.addFlashAttribute("msg", gno);

redirectAttributes: 한 번만 화면에서 "msg"라는 이름의 변수를 처리

addFlashAttribute: 한 번만 데이터 gno를 전달하는 용도

브라우저에 전달된 msg로 화면상에 모달창을 띄워주도록 할 것임

<!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">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>

/layout/basic의 setContent fragment를 위 코드의 content fragment로 교체

form 태그의 action 속성에 guestbook/register url 을 주고, 데이터를 수집할 수 있도록 함

📎 <input> 태그에 지정한 name의 값을 GuestbookDTO로 수집될 데이터 이름과 동일하게 맞춰주면 자동으로 해당 데이터로 수집됨

[등록 처리와 목록 페이지의 모달창]

위에서 게시글을 등록하면 정상적으로 등록처리 되었다는 안내창으로 띄워줄 필요가 있음

=> 부트스트랩의 모달창 이용

list.html

</ul>

<script th:inline="javascript">
    
    var msg = [[${msg}]];
    
    console.log(msg);
    
</script>

전달된 msg값 확인

Thymeleaf의 inline 속성을 이용해서 별도의 타입 처리가 필요하지 않기 떄문에 새로운 글을 등록한 경우, redirect된 화면의 소스코드↓

msg의 값이 글의 번호로 처리됨

단순한 링크 이동으로 본 list화면의 소스코드↓

msg값이 null로 처리됨

list.html

<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-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>

수정 후에는 modal 창이 뜨도록 처리