240125 게시판만들기(댓글 수정)

 

*댓글 수정하기 (어제 이어서 계속된다)

detail.jsp작성하기

-동적생성된 것들은 on을 사용해준다.

	//2024.01.25 댓글수정 .comment-btn버튼 눌렀을 때 .cno값, .commentcontent값 가져오는 명령 만들기
	//제이쿼리로 만들기
	$(document).on('click','.comment-btn', function(){
		alert("!");//동적생성된 것들은 on으로 바꿔준다
	});

 

>게시판에서 댓글 수정 누르면 ! 로 나오는 것 확인

 

 

-동적생성이 뭘까?

(>gpt에게 물어봤다)

동적으로 생성한다는 것은 사용자가 웹 페이지를 보는 동안, 페이지의 일부를 자바스크립트 또는 jQuery 같은 스크립트를 사용해서 실시간으로 만들거나 변경하는 것입니다.

간단한 예를 들어보겠습니다. 웹 페이지에 버튼이 있고, 사용자가 그 버튼을 클릭하면 자바스크립트가 동작하여 새로운 메시지를 화면에 추가하는 상황입니다.

1. 정적인 생성: 원래의 HTML에는 버튼과 초기 메시지만 있습니다.

<button id="myButton">클릭하세요</button>
<div id="message">안녕하세요!</div>

 

 

 

  2.동적인 생성: 사용자가 버튼을 클릭하면 자바스크립트가 동작하여 새로운 메시지를 생성하고 기존 메시지와 함께 표시됩니다.

// JavaScript 코드
document.getElementById('myButton').addEventListener('click', function() {
    var newMessage = document.createElement('div');
    newMessage.innerHTML = '새로운 메시지!';
    document.body.appendChild(newMessage);
});

 

이제 사용자가 버튼을 클릭할 때마다 새로운 메시지가 생성되고 화면에 추가됩니다. 이것이 동적으로 생성하는 예입니다. 동적 생성은 사용자와 상호작용하면서 페이지를 조작하거나 업데이트하는 데 사용됩니다.

 

 

 

*댓글 수정하기 (이어서)

detail.jsp작성

//2024.01.25 댓글수정 .comment-btn버튼 눌렀을 때 .cno값, .commentcontent값 가져오는 명령 만들기
	//제이쿼리로 만들기
	$(document).on('click','.comment-btn', function(){
		let cno = $(this).prev().val();
		let recomment = $('commentcontent').val();
		//alert(cno + " : " + recomment);

 

>실수한 부분 : let recomment = $('commentcontent').val(); 에서

'commentcontent'에 .을 안붙여서 계속 unll로 나옴

$('.commentcontent')로 나와야한다.

 

 

ajax로 보내기

//2024.01.25 댓글수정 .comment-btn버튼 눌렀을 때 .cno값, .commentcontent값 가져오는 명령 만들기
	//제이쿼리로 만들기
	$(document).on('click','.comment-btn', function(){
		let cno = $(this).prev().val();
		let recomment = $('.commentcontent').val();
		//alert(cno + " : " + recomment);
		
		$.ajax({
			url : './recomment',
			type : 'post',
			dataType : 'text',
			data : {'cno': cno, 'comment': recomment},
			success : function(result){
				//alert('통신 성공 : ' + result);
				if(result == 1){
					//수정된 데이터를 화면에 보여주면 되요.
				} else {
					//실패 화면 재로드.
					//location.href='./detail?page=${param.page}&no=${param.no}';
					location.href='./detail?page=${param.page}&no=${detail.no}';
				}
			},
			error : function(error){
				alert('문제가 발생했습니다. : ' + error);
			}
		});
	});

 

 

ReComment.java 서블릿 만들기

 

>제대로 동작하는지 확인

package com.sukgi.web;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


@WebServlet("/recomment")
public class ReComment extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
  
    public ReComment() {
        super();
        // TODO Auto-generated constructor stub
    }

	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		//response.getWriter().append("Served at: ").append(request.getContextPath());
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		
		System.out.println(request.getParameter("cno"));
		System.out.println(request.getParameter("comment"));
		
	}

}

 

 

ReComment.java 서블릿에 추가하기

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

		System.out.println(request.getParameter("cno"));
		System.out.println(request.getParameter("comment"));

		HttpSession session = request.getSession();
		int result = 0;
		if (session.getAttribute("mid") != null && Util.intCheck2(request.getParameter("cno"))
				&& request.getParameter("comment") != null) {

			CommentDTO dto = new CommentDTO();
			dto.setMid((String) session.getAttribute("mid"));
			dto.setCno(Util.str2Int2(request.getParameter("cno")));
			dto.setComment(request.getParameter("comment"));

			CommentDAO dao = new CommentDAO();
			result = dao.commentUpdate(dto);
		}

		PrintWriter pw = response.getWriter();
		pw.print(result);

	}

}

 

 

CommentDAO  commentUpdate 추가하기

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

}

 

 

detail.jsp ajax 수정해주기

 

	//2024.01.25 댓글수정 .comment-btn버튼 눌렀을 때 .cno값, .commentcontent값 가져오는 명령 만들기
	//제이쿼리로 만들기
	$(document).on('click',".comment-btn", function (){
		if(confirm('수정하시겠습니까?')){
			let cno = $(this).prev().val();
			let recomment = $('.commentcontent').val();
			let comment = $(this).parents(".ccomment");//댓글 위치
			
			$.ajax({
				url : './recomment',
				type : 'post',
				dataType : 'text',
				data : {'cno': cno, 'comment': recomment},
				success : function(result){
					//alert('통신 성공 : ' + result);
					if(result == 1){
						//수정된 데이터를 화면에 보여주면 되요.
						$(this).parent(".recommentBox").remove();
						comment.css('backgroundColor','#ffffff');
						//recomment = recomment.replaceAll("<br>", "\r\n");
						comment.text(recomment);
					} else {
						alert("문제가 발생했습니다. 화면을 갱신합니다.");
						//location.href='./detail?page=${param.page}&no=${param.no}';
						location.href='./detail?page=${param.page}&no=${detail.no}';
					}
				},
				error : function(error){
					alert('문제가 발생했습니다. : ' + error);
				}
			});
		}
		
	});

 

 

detail.jsp  2024.01.24 댓글 수정하기 부분 수정하기

	/* 2024.01.24 댓글 수정하기 */
	$(".commentEdit").click(function(){
		if(confirm('수정하시겠습니까?')){
			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','#F4EBE7');
			//comment.css('border','1px solid #9cb395');
			let commentChange = comment.html().replaceAll("<br>", "\r\n");
			let recommentBox = '<div class="recommentBox">';
			recommentBox += '<textarea class="commentcontent">' + commentChange + '</textarea>';
			recommentBox += '<input type="hidden" name="cno" value="' + cno + '">';
			recommentBox += '<button class="comment-btn">댓글 수정</button>';
			recommentBox += '</div>';
			comment.html(recommentBox);
			
		}
	});