Notice
Recent Posts
Recent Comments
Link
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
Tags more
Archives
Today
Total
관리 메뉴

bright jazz music

guestbook : 08. 등록페이지의 링크와 조회 페이지의 링크처리(1) 본문

Framework/Spring

guestbook : 08. 등록페이지의 링크와 조회 페이지의 링크처리(1)

bright jazz music 2022. 7. 19. 23:08

● 목록 페이지에 아래와 같은 기능를 추가한다.

 

  • 글을 작성할 수 있는 링크를 제공하는 것
  • 목록에 있는 각 글의 번호나 제목을 클릭했을 때 조회 페이지로 이동하는 것

 

 

1. 등록 페이지로 가는 링크 만들기

1-1. list.html 파일의 <table> 태그 윗 부분에 "REGISTER" 버튼 추가

 

<!--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>GuestBook List Page!!!!

            <!--        등록버튼 추가: 버튼을 누르면 링크로 이동한다-->
            <span>
                <a th:href="@{/guestbook/register}">
                    <button type="button" class="btn btn-outline-primary">
                        REGISTER!!
                    </button>
                </a>
            </span>
            
        </h1>



        <table class="table table-striped"> <!--테이블이 줄무늬로 나옴. table-hover 하면 커서가 올라가면 색 바뀜  -->
            <thead>
            <tr>
                <th scope="col">#</th>
<!--                <th scope="col">Gno</th>-->
                <th scope="col">Title</th>
                <th scope="col">Writer</th>
                <th scope="col">Regdate</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="dto : ${result.dtoList}"> <!--PageResultDTO안에 들어있는 dtoList 반복처리-->
                <th scope="row">[[${dto.gno}]]</th>
                <td>[[${dto.title}]]</td>
                <td>[[${dto.writer}]]</td>
<!--                <td>[[${dto.regDate}]]</td>-->
                <td>[[${#temporals.format(dto.regDate, 'yyyy/MM/dd')}]]</td><!--등록일자를 포맷으로 출력-->
            </tr>
            </tbody>
        </table>

        <!-- 페이지 이동을 위한 태그-->
        <ul class="pagination h-100 justify-content-center align-items-center"> <!-- ul 태그 안에는 전부 적용 -->
            <!--h-100: 가로로 표시, justify-content-center: 페이지의 중앙에 표시 왼쪽은 start 오른쪽은 end-->

            <li class="page-item" th:if="${result.prev}">
                <a class="page-link" th:href="@{/guestbook/list(page= ${result.start -1 })}"
                   tabindex="-1">Previous!</a>
                <!-- pageSize가 10이기 떄문에 11페이지 이상부터 Previous! 버튼이 나타난다.-->
            </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>

        <!-- 추가 태그 끝
            '이전(previous)'과 '다음(next)' 부분은 Thymeleaf의 if를 이용해서 처리.
            페이지 중간에 현재 페이지 여부를 체크해서 'active'라는 이름의 클래스가 출력되도록 작성

        -->

    <!-- 모달창 관련 -->
        <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>

    </th:block>

</th:block>

<h1> 태그 내에 REGISTER!! 버튼이 생겼다.

 

2. REGISTER 후 리스트로 이동할 때의 패턴

조회 페이지로 이동하는 링크를 작성할 때에는 다시 목록 페이지로 돌아오는 것을 염두에 두어야 한다. (이것이 고전적 패턴이다.)

  • post - redirect - get (PRG 패턴)을 참고하자.

https://en.wikipedia.org/wiki/Post/Redirect/Get

 

Post/Redirect/Get - Wikipedia

Web development design pattern to avoid duplicate form submissions Diagram of a double POST problem encountered in user agents. Diagram of the double POST problem above being solved by PRG. Post/Redirect/Get (PRG) is a web development design pattern that l

en.wikipedia.org

  • PRG 패턴 적용하기

조회 페이지로 이동하는 링크를 '/guestbook/read?gno=xxx'와 같은 형태라고 가정한다면

페이지의 번호와 사이즈를 같이 전달하는 방식이다.

따라서 '/guestbook/read?gno=xxx'와 같이 길어지는 문자열을 생성해야 한다.

Thymeleaf를 이용할 때 링크처리는 파라미터와 값을 (키=값)의 형태로 처리할 수 있다.

따라서 비교적 가독성이 좋은 코드를 작성할 수 있다.

 

list.html 수정

 

<!--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>GuestBook List Page!!!!

            <!--        등록버튼 추가: 버튼을 누르면 링크로 이동한다-->
            <span>
                <a th:href="@{/guestbook/register}">
                    <button type="button" class="btn btn-outline-primary">
                        REGISTER!!
                    </button>
                </a>
            </span>

        </h1>



        <table class="table table-striped"> <!--테이블이 줄무늬로 나옴. table-hover 하면 커서가 올라가면 색 바뀜  -->
            <thead>
            <tr>
                <th scope="col">#</th>
<!--                <th scope="col">Gno</th>-->
                <th scope="col">Title</th>
                <th scope="col">Writer</th>
                <th scope="col">Regdate</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="dto : ${result.dtoList}"> <!--PageResultDTO안에 들어있는 dtoList 반복처리-->
                <th scope="row">

                    <!-- 링크처리: 링크를 누르면 /guestbook/read에 gno와 page를 파라미터로 전달 -->
                    <a th:href="@{/guestbook/read(gno = ${dto.gno}, page = ${result.page})}">
                        [[${dto.gno}]]
                    </a>

                </th>
                <td>[[${dto.title}]]</td>
                <td>[[${dto.writer}]]</td>
<!--                <td>[[${dto.regDate}]]</td>-->
                <td>[[${#temporals.format(dto.regDate, 'yyyy/MM/dd')}]]</td><!--등록일자를 포맷으로 출력-->
            </tr>
            </tbody>
        </table>

        <!-- 페이지 이동을 위한 태그-->
        <ul class="pagination h-100 justify-content-center align-items-center"> <!-- ul 태그 안에는 전부 적용 -->
            <!--h-100: 가로로 표시, justify-content-center: 페이지의 중앙에 표시 왼쪽은 start 오른쪽은 end-->

            <li class="page-item" th:if="${result.prev}">
                <a class="page-link" th:href="@{/guestbook/list(page= ${result.start -1 })}"
                   tabindex="-1">Previous!</a>
                <!-- pageSize가 10이기 떄문에 11페이지 이상부터 Previous! 버튼이 나타난다.-->
            </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>

        <!-- 추가 태그 끝
            '이전(previous)'과 '다음(next)' 부분은 Thymeleaf의 if를 이용해서 처리.
            페이지 중간에 현재 페이지 여부를 체크해서 'active'라는 이름의 클래스가 출력되도록 작성

        -->

    <!-- 모달창 관련 -->
        <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>

    </th:block>

</th:block>

 

#의 게시글 번호가 링크처리 되었다. 클릭하면 404에러가 발생한다.

 

 

 

 

'Framework > Spring' 카테고리의 다른 글

guestbook : 10. guestbook 게시글 수정/삭제 처리(1)  (0) 2022.07.21
guestbook : 09. guestbook 게시글 조회 처리  (0) 2022.07.20
guestbook : 07. 등록페이지와 등록처리 (2)  (0) 2022.07.17
guestbook : 07. 등록페이지와 등록처리 (1)  (0) 2022.07.11
guestbook : 06. 목록처리(3) 컨트롤러와 화면에서의 목록처리  (0) 2022.07.08
'Framework/Spring' Related Articles more
Comments