[국비 43일차 TIL] 게시판 댓글 작성, 삭제

• 댓글달기
• 댓글달기 - 동적생성하기
• 관리자 모드- 회원 관리
• 관리자 모드- 글 관리

 

 

오늘은 게시판 댓글달기를 작업했다. 

댓글 작성창과 댓글쓰기 버튼 등으로 댓글 공간을 만들고, 댓글이 작성된 후 게시판 아래에 제대로 출력되는 것도.

오후에는 내가 작성한 댓글을 삭제하는 작업을 했는데 여기에서 막혔다. 

'댓글을 삭제하시겠습니까?' 라는 alert은 뜨는데, 클릭하면 error.jsp로 넘어간다.

코드를 뒤져봤는데도 잘 모르겠다. 선생님에게 도움을 요청해야겠군~

 

자바스크립트의 let이란?

ECMAScript 6 (ES6)에서 도입된 새로운 변수 선언 키워드

 

1. 블록 범위(Block Scoping)

'let'으로 선언된 변수는 해당 블록{} 안에서만 유효함.

 

2. 변수 재선언 금지

'let'으로 선언된 변수는 동일한 범위에서 다시 선언할 수 없음.

 

3. 호이스팅(Hoisting)

JavaScript에서 변수 및 함수 선언이 코드의 상단으로 옮겨지는 현상 = 변수나 함수 선언 전에 참조할 수 있다!

 

4. 전역 객체 속성 제한

'let'으로 선언된 변수는 전역 객체의 속성이 되지 않음. (var는 전역 객체의 속성이 됨)

 

---

commentDel.java

 

@WebServlet("/commentDel")
public class CommentDel extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    public CommentDel() {
        super();
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		HttpSession session = request.getSession();
        
        // 만약 세션에 mid가 존재하고, no와 cno가 정수로 변환 가능하다면, CommentDTO 객체를 생성하고 해당 정보를 설정
		if(session.getAttribute("mid") != null && Util.intCheck(request.getParameter("no")) 
				&& Util.intCheck2(request.getParameter("cno"))) {
			
			CommentDTO dto = new CommentDTO();
			dto.setMid((String)session.getAttribute("mid"));
			dto.setCno(Util.str2Int2(request.getParameter("cno")));
//			dto.setBoard_no(Util.str2Int(request.getParameter("no")));
			
			CommentDAO dao = new CommentDAO();
			int result = dao.commentDelete(dto);
			
			if(result == 1) {				
				response.sendRedirect("./detail?no="+request.getParameter("no"));			
			}else {
				response.sendRedirect("./error.jsp");
			}
			
		} else {
			response.sendRedirect("./error.jsp");		
		}
		
	}

 

 

commentDAO.java

 

public class CommentDAO extends AbstractDAO {

	public int commentWrite(CommentDTO dto) {
		Connection con = db.getConnection();
		PreparedStatement pstmt = null;
		int result = 0;
		String sql = "INSERT INTO comment (ccomment, board_no, mno) "
				+ "VALUES (?, ?, (SELECT mno FROM member WHERE mid=?))";
		try {
			pstmt = con.prepareStatement(sql);
			pstmt.setString(1, dto.getComment());
			pstmt.setInt(2, dto.getBoard_no());
			pstmt.setString(3, dto.getMid());
			result = pstmt.executeUpdate();
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			close(null, pstmt, con);
		}
		return result;
	}

	public int commentDelete(CommentDTO dto) {
		Connection con = db.getConnection();
		PreparedStatement pstmt = null;
		String sql = "UPDATE comment SET cdel=0 "
				+ "WHERE cno=? AND mno=(SELECT mno FROM member WHERE mid=?)";
		int result = 0;
		
		try {
			pstmt = con.prepareStatement(sql);
			pstmt.setInt(1, dto.getCno());
			pstmt.setString(2, dto.getMid());
			result = pstmt.executeUpdate();
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			close(null, pstmt, con);
		}		
		return result;
	}

}

 

comment.java

 

@WebServlet("/comment")
public class Comment extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    public Comment() {
        super();
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		
		String commentcontent = request.getParameter("commentcontent");
		String bno = request.getParameter("bno");
		System.out.println(commentcontent + " : " + bno);
		
		// 저장하기
		CommentDTO dto = new CommentDTO();
		dto.setComment(commentcontent);
		dto.setBoard_no(Util.str2Int(bno));
		
		HttpSession session = request.getSession();
		dto.setMid((String)session.getAttribute("mid"));
		
		CommentDAO dao = new CommentDAO();
		int result = dao.commentWrite(dto);
		System.out.println("처리결과 : " + result);
		
		response.sendRedirect("./detail?no="+bno);
	}
}

 

 

detail.jsp

 

<script type="text/javascript">

$(document).ready(function (){
	$("#comment-button").click(function(){
		let content=$("#commentcontent").val(); // id=commentcontent
		let bno = ${detail.no };
//		alert("content : " +content + " no : "+no);
	
		// 가상 form 만들기 = 동적생성
		// 전송 content가 5글자 이상인 경우 실행.
		if(content.length < 5){
			alert("댓글은 5글자 이상 적어주세요.");
			$("#commentcontent").focus();
			return false;
		} 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(); 
		}
	});
});


<body>
	<header>
		<%@ include file="menu.jsp"%>
	</header>
	<div class="main">
		<div class="mainStyle">
			<article>
				<div class="detailDIV">
					<div class="detailTITLE">
						${detail.title }
					</div>
					<div class="detailWRITECOUNT">
						<div class="detailWRITE">
						${detail.write }
						<c:if test="${sessionScope.mname ne null && detail.mid eq sessionScope.mid }">
							<img alt="삭제" src="./img/delete1.png" onclick="del()">
							<img alt="수정" src="./img/update1.png" onclick="update()">
						</c:if>
						</div>
						<div class="detailCOUNT">${detail.count }</div>
					</div>
					<div class="detailCONTENT">
						${detail.content }
					</div>
				</div>
				<c:if test="${sessionScope.mid ne null }"> <!-- 로그인 안 한 사람은 안보임 -->
				<!-- 2024-01-22 댓글쓰는 창 생성하기 -->
				<div class="comment-write">				
					<div class="comment-form">
						<textarea id="commentcontent"></textarea>
						<button id="comment-button">댓글쓰기</button> 
						<!-- form으로 묶는거 대신 가상으로 전송 -->
						<!-- 필요요소 : 댓글 내용 & 작성자 & 해당 글 / 로그인한 사용자만 보이도록 -->
					</div>
				</div>
				</c:if>
					<!-- 댓글 출력창 -->
					<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 }">
										<img alt="삭제" src="./img/delete1.png" onclick="commentDel(${co.cno})">
										<img alt="수정" src="./img/update1.png" onclick="commentUpdate(${co.cno})">
									</c:if>
									</div>
									<div class="cdate">${co.cdate }</div>
								</div>
								<div class="ccomment">${co.comment }</div>
							</div>
						</c:forEach>
					</div>
					<button onclick="url('./board')" id="list_button" name="list_button"> 글목록</button>
					</article>
					<article>
							하단 footer때문에 안 보이면 이거 추가~
					</article>
				</div>
		</div>

	<footer>
	<c:import url="footer.jsp"/>
	</footer>
	
	<script type="text/javascript">
		function del(){
			//alert("삭제 기능 동작 확인");
			var ch = confirm("글을 삭제하시겠습니까?"); // 확인 = true, 취소 = false
			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;
		    }
		}
		
	</script>
	
</body>
</html>