[79일차] 게시판 댓글 목록 / 페이징 / 모달창 구현 / jQuery 눈도장

20221115(화)

• 목차
  - 댓글 등록 - 날짜 데이터 수정
  - 댓글 목록과 페이징 출력
  - jQuery 눈도장 찍어두기
  - 댓글 모달창 구현

---

< 댓글 등록 - 날짜 데이터 수정 >

• Postman에 뜨는 날짜형식 수정

---

• get.jsp에 자바스크립트 코드 사용

---

< 댓글 목록과 페이징 출력 >

• get.jsp 코드추가

// 익명함수를 변수로 선언
    // replyList : json로 반환된 댓글데이타
    // target : 댓글목록이 출력될 위치.
    // templateObject : 핸들바 템플릿 참조변수.
    let printReplyData = function(replyList, target, templateObject) {
      //
      let template = Handlebars.compile(templateObject.html());
      let replyListHtml = template(replyList); // json데이터와 템플릿이 데이터바인딩식에 의하여 결합된 결과
      target.empty();
      target.append(replyListHtml);
    }

    /*
    <nav aria-label="Page navigation example">
      <ul class="pagination">
        <li class="page-item"><a class="page-link" href="#">Previous</a></li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">Next</a></li>
      </ul>
    </nav>
  */
    let printPaging = function(pageMaker, target) {

      let pagingStr = '<nav aria-label="Page navigation example">';
          pagingStr += '<ul class="pagination">';

          // 이전 1 2 3 4 5 다음  /   이전 6  7 8 9 10 다음
          // 이전표시작업
          if(pageMaker.prev) {
            pagingStr += '<li class="page-item"><a class="page-link" href="' + (pageMaker.startPage-1);
            pagingStr += '">Previous</a></li>';
          }

          // 페이지번호 표시작업
          for(let i=pageMaker.startPage; i<=pageMaker.endPage; i++) {
            let strClass = (pageMaker.cri.pageNum == i) ? 'active': '';
            pagingStr += '<li class="page-item ' + strClass + '"><a class="page-link" href="' + i + '">' + i + '</a></li>';
          }


          // 다음표시작업
          if(pageMaker.next) {
            pagingStr += '<li class="page-item"><a class="page-link" href="' + (pageMaker.endPage+1);
            pagingStr += '">Next</a></li>';
          }

          pagingStr += '</ul>';
          pagingStr += '</nav>';

          target.html(pagingStr);


    }

 

---

< jQuery 눈도장 찍어두기 >

• 표현양식
  $(function() {
            // jQuery methods go here...
  });
  
  
• text(), html() : 일반태그의 내용을 참조
• val() : <form> 태그의 하위태그
            - <input>, <select>, <textarea>
  
  

jQuery HTML		예시
jQuery 요소 추가	append()- 선택한 요소의 끝에 내용 삽입 prepend()- 선택한 요소의 시작 부분에 콘텐츠 삽입 after()- 선택한 요소 뒤에 내용 삽입 before()- 선택한 요소 앞에 콘텐츠 삽입	$("p").append("Some appended text.");
jQuery 요소 제거	remove()- 선택한 요소(및 하위 요소)를 제거 empty()- 선택한 요소에서 하위 요소를 제거	$("#div1").remove();
jQuery css()	선택한 요소에 대해 하나 이상의 스타일 속성 설정 or 반환	$("p").css({"background-color": "yellow",  "font-size": "200%"});
jQuery Traversing Traversing (탐색)
jQuery Ancestors 조상	parent()메서드는 선택한 요소의 직접 상위 요소를 반환 parents()메서드는 문서의 루트 요소( )까지 선택한 요소의 모든 상위 요소를 반환 parentsUntil()메서드는 주어진 두 인수 사이의 모든 조상 요소를 반환	$(document).ready(function(){   $("span").parent(); });
jQuery Descendants 자손	children()메서드는 선택한 요소의 모든 직계 자식을 반환 find()메서드는 선택한 요소의 하위 요소를 마지막 하위 요소까지 반환	$(document).ready(function(){   $("div").children(); });
jQuery Siblings 형제	siblings()메서드는 선택한 요소의 모든 형제 요소를 반환	$(document).ready(function(){   $("h2").siblings(); });

 

• jQuery 
  https://www.w3schools.com/jquery/jquery_dom_add.asp

jQuery Add Elements

 

---

< 댓글 모달창 구현 >

 

• get.jsp 코드추가

<script>

    $(document).ready(function(){
      //댓글 모달대화상자 띄우기
      $("#btnReplyWriteModal").on("click", function(){
        $("#replyModal").modal('show'); // 부트스트랩4의 메서드
      });

      //댓글 저장하기
      $("#btnReplyWrite").on("click", function(){
        let bno = $("#bno").val();  //게시물번호
        let replyer = $("#replyer").val();  // 작성자
        let reply = $("#reply").val();  // 댓글내용

        //JavaScript Object문법.  let 객체명 = {이름1:값, 이름2:값, 이름3:값}
        let replyObj = {bno:bno, replyer:replyer, reply:reply};
        //서버의 스프링의 메서드에 json문자열로 변환하여, 정보를 전송하는 작업.
        let replyStr = JSON.stringify(replyObj); // {"bno": 1500, "replyer":"user01", "reply":"댓글내용"}
        console.log(replyStr);

        $.ajax({
          type: 'post',
          url: '/replies/new',
          headers: {
            "Content-Type" : "application/json", "X-HTTP-Method-Override" : "POST"
          },
          dataType: 'text',  // 스프링에서 넘어오는 데이타타입 명시.
          data: replyStr, // 서버(스프링)으로 보내는 댓글 데이타
          success: function(data) {
            if(data == "success") {
              alert("댓글 데이타 삽입성공");
              getPage(url); // 댓글목록과 페이징정보를 갱신.
            }
          },
          error : function(xhr, status, error) {
            alert("댓글 데이타 삽입실패");
          }

        });
      });

      //댓글 페이지번호 클릭.
      // 동적으로 추가된 태그를 이벤트 설정을 할려면, 아래와 같이 해야 한다.
     
      $("#replyPageStr").on("click", "ul.pagination li.page-item a", function(e) {
          e.preventDefault();

          replyPage = $(this).attr("href");
          url = "/replies/pages/" + bno + "/" + replyPage + ".json";

          getPage(url);
      });
    });


  </script>

  <!-- 댓글 모달대화상자-->
<div class="modal fade" id="replyModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New Reply</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="replyer" class="col-form-label">Replyer:</label>
            <input type="hidden" class="form-control" id="bno" value="${board.bno }">
            <input type="text" class="form-control" id="replyer">
          </div>
          <div class="form-group">
            <label for="reply" class="col-form-label">Reply:</label>
            <textarea class="form-control" id="reply"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="btnReplyWrite">Save</button>
        <button type="button" class="btn btn-primary" id="btnReplyModify">Modify</button>
        <button type="button" class="btn btn-primary" id="btnReplyDelete">Delete</button>
      </div>
    </div>
  </div>
</div>

 

 

https://getbootstrap.com/docs/4.6/components/modal/

Modal

 

 

     ✨ get.jsp실행되면

     1. 게시물에 대한 내용을 받아와 화면에 보여주고

     2. 코드를 받아와서 게시물에 해당되는 내용과 코드를 해석해서 

     3. 안에 코드가 댓글 데이터를 또 가져와서 채우기 때문에 시간차를 두고 받아온다.

     ➡ 댓글 요청이 시간차가 일어난다.

 

     **데이터베이스에 있는 데이터를 가져오는게 함수 안의 작업으로 진행되기 때문에

        게시글 내용과 댓글 내용 인출에 시간 차이가 발생한다.