[80일차] 게시판 댓글 수정 및 삭제 구현

20221116(수)

• 목차
  - 댓글 처리 방식 - REST API
  - 댓글 페이지 번호 및 버튼 추가
  - 댓글 수정하기
  - 댓글 삭제하기
  - 부트스트랩 CSS 적용하기
  - index.jsp로 footer, header.jsp 만들기

---

< 댓글 처리 방식 - REST API >

• 우리 눈에는 한번에 보이지만 실제로는 두번의 작업이 일어난다.

 

 

(1) 게시물 내용과 댓글 목록 데이타 생성을 한번에 할 수도 있지만,

(2) 게시물 내용과 댓글목록 데이타 요청코드를 따로 할 수 있다.  // getPage를 재사용하기 위해서

 

---

• REST API 강조

---

• 다양한 전송방식과 URI 설계
  REST 방식의 데이터 교환에서 가장 특이한 점은 기존의 GET/POST 외에 다양한 방식으로 데이터를 전달한다는 점

작업 상태	전송 방식
Create	POST
Read	GET
Update	PUT
Delete	DELTE

작업	전송방식	URI
등록	POST	/members/new
조회	GET	/members/{id}
수정	PUT	/members/{id} + body (json 데이터 등)
삭제	DELETE	/member/{id}

 

• 브라우저에서는 (클라이언트에서 서버에 요청하는 방식은 2개 뿐) POST, GET만 지원해준다.
• 그래서 PUT이나 DELETE를 서버층에 요청할 수 있도록 우리가 코드작업을 해주면,
  브라우저가 PUT이나 DELETE를 요청하는 것처럼 상황을 만들 수 있다.
  ➡ REST 설계 개념 : 원래 요청방식대로 작업해라~란 개념. 
• REST전에는 GET POST로만 다 처리했다..

---

< 댓글 페이지 , 버튼, 수정 모달창 구현 >

     ✨ 동적으로 생성된 태그는 이벤트 다이렉트로 하지 않는다.
     *주소 : http://localhost:8888/board/get?pageNum=1&amount=10&type=&keyword=&bno=3070

 

(1) get.jsp에 댓글 페이지, 버튼 생성코드 추가

//댓글 페이지번호 클릭.
// 동적으로 추가된 태그를 이벤트 설정을 할려면, 아래와 같이 해야 한다.

$("#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);
});

// 댓글수정 클릭.  댓글목록에서 수정버튼이 5개 존재하는 데 선택한 수정버튼을 가리키는 문법.   $(this)
$("#replyListStr").on("click", "input[name='btnModalModify']", function(){

  let rno = $(this).parents("div.box-body").find("input[name='rno']").val();
  let replyer = $(this).parents("div.box-body").find("input[name='replyer']").val();
  let reply = $(this).parents("div.box-body").find("textarea[name='reply']").val();
  let replydate = $(this).parents("div.box-body").find("span.replydate").text();

  console.log("댓글번호 : " + rno); // replydate
  console.log("댓글작성자 : " + replyer);
  console.log("댓글내용 : " + reply);
  console.log("댓글작성일 : " + replydate);

 

ex) 실행화면

---

(2) get.jsp에 수정 모달창 코드추가

// 모달대화상자에 수정내용
$("#exampleModalLabel").html("Modify Reply");
$("#replyer").val(replyer);
$("#reply").val(reply);
$("#rno").val(rno);
$("#replydate").html("등록익 : " + replydate);


// 모달대화상자 보이기
$("button[name='btnModal']").hide(); // Save, Modify, Delete 버튼 3개 숨김.
$("#btnReplyModify").show(); // Modify 버튼 보이기.

$("#replyModal").modal('show'); // 부트스트랩4의 메서드

 

ex) 실행화면

 

---

< 댓글 수정하기 >

• modify 버튼 눌러서 Ajax 통해 수정하기 작업을 해야한다.
• RNO와 REPLY, 이 두 개를 받는 작업을 해야 한다.

---

(1) get.jsp에 댓글수정 코드추가

// 댓글수정하기
$("#btnReplyModify").on("click", function(){
let rno = $("#rno").val();
let reply = $("#reply").val();

// JavaScript Object 구문
let replyObj = {rno: rno, reply: reply};
// 서버측에 보낼 JSON데이타 포맷을 변환    stringify() : JS Object -> JSON 문자열, parse() : JSON 문자열 -> JS Object
let replyStr = JSON.stringify(replyObj);
// 웹브라우저는 get, post 요청방식만 지원된다. 다른 요청방식을 사용할려면, 코드작업을 별도로 해야한다.
$.ajax({
  type : 'put',
  url : '/replies/modify/' + rno,
  headers : {
    "Content-Type" : "application/json", "X-HTTP-Method-Override" : "PUT"
  },
  dataType: 'text',
  data: replyStr,
  success: function(result){
    if(result == "success"){
      alert("댓글 데이타 수정성공");

      // 모달대화상자의 내용을 초기화.
      $("#exampleModalLabel").html("New Reply");
      $("#replyer").val("");
      $("#reply").val("");
      $("#rno").val("");
      $("#replydate").html("");


      $("button[name='btnModal']").hide(); // Save, Modify, Delete 버튼 3개 숨김.
      $("#btnReplyModify").show(); // Modify 버튼 보이기.

      $("#replyModal").modal('show'); // 부트스트랩4의 메서드
    }
  }
});

---

(2) Reply Controller.java 수정코드 추가

// 댓글수정하기. 클라이언트로부터 댓글번호(rno), 댓글내용(reply)
@PutMapping(value = "/modify/{rno}") //  /replies/modify/1
public ResponseEntity<String> modify(@PathVariable("rno") Long rno, @RequestBody ReplyVO vo)
{
    ResponseEntity<String> entity = null;

    return entity;
}

---

(3) ReplyMapper.java 에 댓글수정 코드 추가

(4) ReplyMapper.xml 에 modify 코드 추가

---

(5) ReplyService.java 에 댓글수정 코드추가

---

(6) ReplyServiceImpl.java 에 @Override 내용 추가

---

(7) ReplyController.java 댓글수정 코드추가

 

ex) 실행 화면

 

• get.jsp에 추가

url = "/replies/pages/" + bno + "/" + replyPage + ".json";

                  getPage(url);

---

< 댓글 삭제하기 >

(1) get.jsp에 댓글 삭제하기 코드추가

// 댓글삭제하기
          $("input[name='btnModalDelete']").on("click", function(){

            if(!confirm(rno + "번 댓글을 삭제하시겠습니까?")) return;

            let rno = $(this).parents("div.box-body").find("input[name='rno']").val();

            $.ajax({
              type : 'delete',
              url : '/replies/delete/' + rno,
              headers : {
                "Content-Type" : "application/json", "X-HTTP-Method-Override" : "PUT"
              },
              dataType: 'text',
              data: replyStr,
              success: function(result){
                if(result == "success"){
                  alert("댓글 데이타 삭제성공");

                  // 모달대화상자의 내용을 초기화.
                  $("#exampleModalLabel").html("New Reply");
                  $("#replyer").val("");
                  $("#reply").val("");
                  $("#rno").val("");
                  $("#replydate").html("");


                  $("button[name='btnModal']").hide(); // Save, Modify, Delete 버튼 3개 숨김.
                  $("#btnReplyModify").show(); // Modify 버튼 보이기.
                  
                  $("#replyModal").modal('show'); // 부트스트랩4의 메서드

                  url = "/replies/pages/" + bno + "/" + replyPage + ".json";

                  getPage(url);

                }
              }
            });

---

(2) ReplyMapper.java에 댓글삭제 코드 추가

(3) ReplyMapper.xml에 delete 코드 추가

---

(4) ReplyService.java에 delete 추가

(5) ReplyServiceImpl.java에 생성자 추가

 

ex) 실행 화면

 

---

< 부트스트랩 CSS 적용하기 >

• 부트스트랩 core CSS 주소 따오기
  부트스트랩 디자인 페이지에서 F12 ➡ Network ➡ booststrap.min.css 클릭 ➡ Request URL  복사

---

• demo.html에 <!-- Bootstrap core CSS --> 아래 주소 수정하기

---

• 부트스트랩 Custom styles for this template 주소 따오기
  부트스트랩 디자인 페이지에서 F12 ➡ Network ➡ pricing.css 클릭 ➡ Request URL  복사

---

• demo.html에 <!-- Custom styles for this template --> 아래 주소 수정하기

 

---

< index.jsp로 footer, header.jsp 만들기 >

1. 메인화면 : index.jsp
2. 헤더 / 푸터부분 html을 jsp 별도 파일로 빼놓으면
3. index.에 같은 부분이 있으므로 삭제한 후
4. <%@includ file = "/WEB-INF/views/include/header.jsp" %>로 링크를 연결한다. (푸터도 마찬가지)

 

 

https://adminlte.io/themes/AdminLTE/pages/forms/general.html

 

ex) 실행 화면

 

➡ 이런 식으로 폼을 다듬으면서 들어갈 예정!