[국비 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);
‌}