240124 게시판 만들기(댓글창 삭제, 수정)

*댓글쓰기 버튼 누르면 댓글창 나오게 하기

 

https://xpressengine.github.io/XEIcon/d

XEIcon, 문자를 그리다

아래 링크 붙이기

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">

 

이쯤 붙여주기

<title>톺아보기</title>
<link href="./css/index.css" rel="stylesheet" />
<link href="./css/menu.css" rel="stylesheet" />
<link href="./css/detail.css" rel="stylesheet" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">
<script type="text/javascript" src="./js/menu.js"></script>

 

$(document).ready(function(){     안에 써주기

 

//2024.01.24 댓글쓰기 버튼을 누르면 댓글창 나오게 하기 
	$(".comment-write").hide();//원래는 ready 바로 아래 두시는 것을 추천....
	$(".xi-comment-o").click(function(){
		$(".xi-comment-o").hide();
		//$(".comment-write").show();
		$(".comment-write").slideToggle('slow');
	});

 

 

댓글 출력창 위에 써주기

<!-- 01.22 로그인했다면 댓글창 보여줘 -->
	<c:if test="${sessionScope.mid ne null }">
<!-- 2024.01.24 댓글쓰기 숨기기 -->
	<button id="xi-comment-o">댓글쓰기</button>

 

 

*삭제할 때 창 안바뀌고 사라지게 하기

<!-- 2024.01.24 삭제 온클릭 없애고 클래스 만들기 -->
	<img alt="삭제" src="./img/delete32.png" width = 20 class="commentDelete">

 

클래스 자리에 아이디를 쓰면 안된다. 아이디는 한개, 클래스는 여러개

 

/* 2024.01.24 삭제할 때 창 어쩌구 ;주석처리하기 */
		/* 	function commentDel(cno){
				if(confirm("지울래?")){
					location.href='./commentDel?no=${detail.no}&cno='+cno;
				}
			} */

 

 

$(document).ready(function(){ 안에 써주기

 

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

 

 

 

 

*형제 요소 찾기

https://www.devkuma.com/docs/jquery/%ED%98%95%EC%A0%9C-%EC%9A%94%EC%86%8C%EC%9D%98-%ED%83%90%EC%83%89-siblings--next--prev-/

jQuery 입문 | 요소의 탐색 | 형제 요소의 탐색 .siblings() .next() .prev()

 

 

 

 

CommentDel. java doPost 넣어주기

doGet에 있는거 복사해서 넣어준다. 수정된거 있음

 

HttpSession session = request.getSession();
		int result = 0;
		if(session.getAttribute("mid") != null && Util.intCheck2(request.getParameter("no"))) {
			
			CommentDTO dto = new CommentDTO();
			dto.setMid((String)session.getAttribute("mid"));
			dto.setCno(Util.str2Int2(request.getParameter("cno")));
			
			CommentDAO dao = new CommentDAO();
			result = dao.commentDelete(dto);				
		}
		
		PrintWriter pw = response.getWriter();
		pw.print(result);
		
		
	}

 

삭제가 완료되면, 게시판에서 댓글 삭제되고 데이터데이스에서 사라진다.

 

 

 

댓글 수정하기

 

댓글 100글자 안넘게 경고하기

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

 

 

 

중간에 삭제, 수정 바꿔주기

<!-- 2024.01.24 댓글쓰기 숨기기 -->
						<button class="xi-comment-o">댓글쓰기</button>
						<!-- 댓글쓰는 창을 여기다가 만들어주겠습니다. 댓글내용, 누가, 어느, 2024-01-22 -->
						<div class="comment-write">
							<div class="comment-form">
								<textarea id="commentcontent"></textarea>
								<button id="comment-btn">댓글쓰기</button>
							</div>
						</div>
					</c:if>

					<!-- 2024.01.22댓글 출력창 -->
					<!-- 댓글 출력창 -->
					<div class="comments">
						<c:forEach items="${commentList }" var="co">
							<div class="comment">
								<div class="chead">
									<div class="cname">${co.mname }님<c:if test="${sessionScope.mname ne null && co.mid eq sessionScope.mid }">
											<input type="hidden" class="cno" value="${co.cno }">
											<!-- 2024.01.24 삭제, 수정 온클릭 없애고 클래스 만들기 -->
											<img alt="삭제" src="./img/delete32.png" class="commentDelete">
											<img alt="수정" src="./img/edit32.png" class="commentEdit">
										</c:if>
									</div>
									<div class="cdate">${co.ip}/ ${co.cdate }</div>
								</div>
								<div class="ccomment">${co.comment }</div>
							</div>
						</c:forEach>
					</div>