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

728x90

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에  아래 주소 수정하기

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

demo.html에  아래 주소 수정하기

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

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

ex) 실행 화면

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

728x90

저작자표시

'🏫 Open API_JAVA' 카테고리의 다른 글

[82일차 - 1] 회원정보 저장 / 비밀번호 암호화 / 로그인 / 로그아웃 (0)	2022.11.18
[81일차] 회원가입 페이지 폼 / 추가 작업 / daum 우편번호 api 삽입 / ID 중복체크 / 이메일 인증 (0)	2022.11.18
[79일차] 게시판 댓글 목록 / 페이징 / 모달창 구현 / jQuery 눈도장 (0)	2022.11.17
[78일차] REST 방식 / gson 라이브러리 추가 / 게시판에 댓글 기능 구현 (ex04) (0)	2022.11.15
[77일차] 게시판에 페이징 기능 / 검색 기능 (ex03) (0)	2022.11.13

< 댓글 처리 방식 - REST API >
< 댓글 페이지 , 버튼, 수정 모달창 구현 >
< 댓글 수정하기 >
< 댓글 삭제하기 >
< 부트스트랩 CSS 적용하기 >
< index.jsp로 footer, header.jsp 만들기 >

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

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

< 댓글 처리 방식 - REST API >

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

< 댓글 수정하기 >

< 댓글 삭제하기 >

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

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

'🏫 Open API_JAVA' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

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

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

	// 모달대화상자에 수정내용
	$("#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의 메서드

	// 댓글수정하기
	$("#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의 메서드
	}
	}
	});

	// 댓글수정하기. 클라이언트로부터 댓글번호(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;
	}

	// 댓글삭제하기
	$("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);

	}
	}
	});