Notice
Recent Posts
Recent Comments
Link
«   2024/10   »
일 월 화 수 목 금 토
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 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

bright jazz music

guestbook : 10. guestbook 게시글 수정/삭제 처리(3) 본문

Framework/Spring

guestbook : 10. guestbook 게시글 수정/삭제 처리(3)

bright jazz music 2022. 7. 21. 23:22

수정 화면에서 목록 페이지로 이동하기

 

  • 글의 수정과 삭제가 완료되면 다시 목록페이지로 이동하는 버튼을 처리한다.
  • 현재 modify.html은 <form> 태그를 이용하여 모든 작업을 처리하고 여러 개의 input을 사용해 파라미터를 전송한다.

 

목록 페이지 이동 이벤트 처리

  • 목록 페이지로 이동하는 경우 page와 같은 파라미터 외에 다른 파라미터들은 별도로 필요하지 않다.
  • 따라서 목록으로 이동하는 경우 page를 제외한 파라미터들은 제거한 상태로 처리하는 것이 깔끔하다.
<!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 Modify Page!!</h1> <!-- 제목 변경 -->
        <form action="/guestbook/modify" method="post"> <!-- form태그로 감싸기  -->

            <!-- 페이지 번호: 수정 완료 후에도 동일한 정보를 유지하도록 하기 위해  추가!!!!-->
            <input type="hidden" name="page" th:value="${requestDTO.page}">

            <div class="form-group">
                <label>Gno</label> <!--수정불가-->
                <input type="text" class="form-control" name="gno" th:value="${dto.gno}" readonly>
                <!--
                name 속성은 DTO의 프로퍼티와 같게 해줘야 한다. DTO에서 소문자로 선언했으므로
                여기서도 소문자 gno로 해야 한다. 대문자로 했다가 아래와 같은 에러를 만났다.
                아래의 태그들의 속성 값도 전부 소문자로 해줄 것.

                    java.lang.IllegalStateException:
                    Optional long parameter 'gno' is present but cannot be translated into a null value
                    due to being declared as a primitive type. Consider declaring it as object wrapper
                    for the corresponding primitive type.
                -->
            </div>

            <div class="form-group">
                <label>Title</label> <!--수정가능-->
                <input type="text" class="form-control" name="title" th:value="${dto.title}">
            </div>

            <div class="form-group">
                <label>Content</label> <!--수정가능-->
                <textarea area class="form-control" rows="5" name="content">[[${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> <!--수정불가, name 속성도 제거. 화면 수정 자체도 불가하고 jpa에서 자동처리 할 것이기 때문-->
                <input type="text" class="form-control"
                       th:value="${#temporals.format(dto.regDate, 'yyyy/MM/dd HH:mm:ss')}" readonly>
            </div>

            <div class="form-group">
                <label>ModDate</label> <!--수정불가, name 속성도 제거. 화면 수정 자체도 불가하고 jpa에서 자동처리 할 것이기 때문-->
                <input type="text" class="form-control"
                       th:value="${#temporals.format(dto.modDate, 'yyyy/MM/dd HH:mm:ss')}" readonly>
            </div>
        </form> <!-- form태그로 감싸기 -->

        <!--수정/삭제는 form 태그의 action을 이용해서 처리할 수 있음. 이 부분은 추후 처리-->
        <!-- 버튼 구분을 위해 class 속성에 구분용 단어를 첨자하였다. -->
        <!--<button type="button" class="btn btn-primary">Modify</button>-->
        <button type="button" class="btn btn-primary modifyBtn">Modify</button>

        <!--<button type="button" class="btn btn-info">List</button>-->
        <button type="button" class="btn btn-info listBtn">List</button>

        <!--<button type="button" class="btn btn-danger">Remove</button>-->
        <button type="button" class="btn btn-danger removeBtn">Remove</button>

        <script th:inline="javascript">
            var actionForm = $("form"); //form 태그 객체

            $(".removeBtn").click(function(){
                //삭제 버튼 처리. 버튼을 누르면 form태그의 action 속성과 method 속성을 조정한다.
               actionForm
                    .attr("action", "/guestbook/remove")
                    .attr("method", "post");
                actionForm.submit();
            })

            $(".modifyBtn").click(function (){
                //수정버튼 처리
                if(!confirm("수정하시겠습니까?")){
                    return;
                }
                actionForm
                    .attr("action", "/guestbook/modify")
                    .attr("method", "post")
                    .submit();
            });


            $('.listBtn').click(function (){
                var pageInfo = $("input[name='page']");

                actionForm.empty();             //form태그의 모든 내용 삭제
                actionForm.append(pageInfo);    //목록 페이지 이동에 필요한 내용 재 추가
                actionForm
                    .attr("action", "/guestbook/list")
                    .attr("method", "get")
                // console.log(actionForm.html()); //먼저 확인 후에 주석 처리
                actionForm.submit();
            })



        </script>

    </th:block>
</th:block>

</html>

 

  • 이벤트 처리 시에는 우선 page와 관련된 부분만 따로 보관하고, empty()를 이용해서 <form> 태그 내의 모든 파라미터를 삭제한다.
  • 빈 <form> 태그에 보관해둔 page 관련 정보를 추가하고 목록 페이지로 이동하도록 구현한다.
  • 브라우저에서는 수정 중 List 버튼을 클릭하면 원래의 페이지로 다시 이동해야 한다.

 

List 버튼 클릭

 

 

목록 페이지로 이동 완료

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

guestbook : 11. 검색처리(2)  (0) 2022.07.23
guestbook : 11. 검색처리(1)  (0) 2022.07.22
guestbook : 10. guestbook 게시글 수정/삭제 처리(2)  (0) 2022.07.21
guestbook : 10. guestbook 게시글 수정/삭제 처리(1)  (0) 2022.07.21
guestbook : 09. guestbook 게시글 조회 처리  (0) 2022.07.20
'Framework/Spring' Related Articles more
Comments