[국비 46일차 TIL ] 댓글 삭제 수정 기능 구현

 

- 댓글 삭제 기능

del() : 글 삭제하는 함수. alert창을 띄우고 확인을 누르면 글을 삭제함.

댓글을 삭제하면 화면에서 사라지지만, 실제로 데이터에서는 남아있음.

 

$(".commentDelete").click() : "댓글 삭제"버튼을 클릭했을 때 동작하는 함수

 

- 댓글 수정 기능

update() : 글 수정을 확인하는 함수. 수정을 누르면 수정할거냐는 alert이 뜨고 확인을 누르면 댓글 창이 다시 열리면서 수정할 수 있게 변함.

하지만 아직 수정되는 기능은 구현하지 않음.

 

$(".commentEdit").click() : "댓글 수정"버튼을 클릭했을 때 동작하는 함수.

 

- 댓글 글자수 제한

$("commentcontent").keyup() : 글자수가 100자 이상 넘어가면 alert이 뜨도록.

 

---

detail.jsp

 

<script type="text/javascript">

function del(){var ch = confirm("글을 삭제하시겠습니까?");if(ch){location.href="./delete?no=${detail.no }";}}
function update(){if(confirm("수정하시겠습니까?")){location.href="./update?no=${detail.no }";}}
//function commentDel(cno){if(confirm("댓글을 삭제하시겠습니까?")){location.href='./commentDel?no=${detail.no}&cno='+cno;}}

$(document).ready(function(){
  $(".commentEdit").click(function(){
    if(confirm('수정하시겠습니까?')){ 
      // 필요한 cno값 잡기 & 수정한 내용 + 로그인 == 서블릿에서 정리 
      let cno = $(this).siblings(".cno").val();
      let comment = $(this).parents(".chead").next();
      $(this).prev().hide();
      $(this).hide();
      comment.css('height', '110');
      comment.css('padding-top', '10px');
      comment.css('backgroundColor', '#FFD8E0');
      let commentChange = comment.html().replaceAll("<br>", "\r\n");
      
      // alert(cno + " : " + commentChange);
      
      let recommentBox = '<div class="recommentBox">';
      recommentBox += '<form action="./cedit" method="post">';
      recommentBox += '<textarea class="commentcontent" name="comment">' + commentChange + '</textarea>';
      recommentBox += '<input type="hidden" name="cno" value="' + cno + '">';
      recommentBox += '<button class="comment-btn" type="submit">댓글 수정</button>';
      recommentBox += '</form></div>';
      
      comment.html(recommentBox);
    }
  });

	//댓글 삭제 버튼을 눌렀습니다.
	$(".commentDelete").click(function(){
		// alert("삭제버튼을 눌렀습니다");
		// 부모객체 찾아가기 = this
		// $(this).parent(".cname").css('color', 'green');
		// let text = $(this).parent(".cname").text(); //val()? text() html()
		// 자식 요소 찾기
		// $(this).parent(".cname").children();
		// 형제 요소 찾기 .siblings() .prev()바로 이전 .next() 바로 다음
		// let cno = $(this).prev().val();
		
		if(confirm("삭제하시겠습니까?")){
			
        // Ajax
		let point=$(this).closest(".comment");
        $.ajax({
			url : './commentDel',   //주소
			type : 'post',          //get, post
			dataType : 'text',		//수신타입 json
			data: {no : cno},        //보낼 값
			success:function(result){
                //alert("서버에서 온 값 : " + result);
                if(result == 1){
                	// 정상 삭제: this의 부모(.comment)를 찾아서 삭제해야함.
					point.remove();
                } else {
                	alert("삭제 불가. 관리자에게 문의하세요!!!!");
                }
            },
            error: function(request, status, error){ // 통신오류
                alert("문제 발생?!!???!?!?! 도대체 왜?!?!?");
            }
        }); // end ajax

		}
});
	
	//댓글쓰기 버튼을 누르면 댓글창 나오게 하기 2024-01-24
	$(".comment-write").hide();//원래는 ready 바로 아래 두시는 것을 추천....
	$(".xi-comment-o").click(function(){
		$(".xi-comment-o").hide();
		//$(".comment-write").show();
		$(".comment-write").slideToggle('slow');
	});
	
	+
	$("#comment-button").click(function(){
		let content = $("#commentcontent").val();
		let bno = ${detail.no };
		if(content.length < 5){
			alert("댓글은 다섯글자 이상으로 적어주세요.");
			$("#commentcontent").focus();
		} else {
			let form = $('<form></form>');
			form.attr('name', 'form');
			form.attr('method', 'post');
			form.attr('action', './comment');
			form.append($('<input/>', {type:'hidden', name:'commentcontent', value:content}));//json
			form.append($('<input/>', {type:'hidden', name:'bno', value:bno}));
			form.appendTo("body");
			form.submit();
		}
	});//댓글쓰기 동적생성 끝
    	
	//id="commentcontent"
	//id="comment-btn"
	//댓글쓰기 창에 쓸 수 있는 글자 표시해주고 넘어가면 더이상 입력 불가로 바꾸기
	$("#commentcontent").keyup(function(){
        let text = $(this).val();
        if(text.length > 100){
           alert("100자 넘었으니 그만쓰세요^^!");
           $(this).val(  text.substr(0, 100)   );   
        }
        $("#comment-btn").text("글쓰기 " + text.length +  "/100");
     });
});
});
</script>

 

 

detail.jsp

 

<!-- 2024-01-22 댓글쓰는 창 만들기 (댓글 작성자, 댓글 내용) -->

<div class="comment-write">
	<div class="comment-form"> <!-- form태그 필요없음. 위에서 동작가능 -->
		<textarea id="commentcontent" name="commentcontent"></textarea>
		<button id="comment-button" id="list_button">댓글쓰기</button>
	</div>
</div>
</c:if>

 

 

commentDel.java

 

doPost에 추가

 

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
        // 세션 가져오기
        HttpSession session = request.getSession();
		
        // 작업 결과를 저장할 변수를 초기화하기
        int result = 0;
        
        // 만약 사용자가 로그인된 상태라면
		if(session.getAttribute("mid") != null && Util.intCheck2(request.getParameter("no"))) {
			
            // 조건이 충족되면 commentDTO를 생성하고 속성을 설정함
			CommentDTO dto = new CommentDTO();
			dto.setMid((String)session.getAttribute("mid")); // mid가져와서 Mid에 저장해
			dto.setCno(Util.str2Int2(request.getParameter("no"))); // no 정수 변환 후 Cno에 저장해
			
            // CommentDAO의 인스턴스 생성
			CommentDAO dao = new CommentDAO();
            
            // commentDelete 메소드 호출하과 DTO에 전달 -> 결과 'result' 변수에 저장
			result = dao.commentDelete(dto);				
		}
		PrintWriter pw = response.getWriter();
		pw.print(result);
	}