[21.10.07] 게시판 연습#3

yed·2021년 10월 7일

댓글기능

댓글테이블은 게시글테이블의 글번호를 외래키로 가지고 있다.

URI 메서드에서 CRUD를 사용할 때 사용

insert==add

selectAll==all
update, delete는 동일

댓글 등록 과정

jsp에서 댓글을 입력하고 script에서 전송
servlet에서 댓글데이터를 저장하고 응답을 보냄
script에서 응답을 받아서 댓글목록 업데이트

<댓글입력 jsp>

<input type="hidden" id="replyBno" value="${vo.bno }">
<input type="text" id="replyId">
<input type="text" id="replyContent">
<button type="button" id="btn_add">작성</button>

게시글번호는 서버에서는 필요하지만 사용자한테는 보여줄 필요가 없어서 type=hidden 으로 담는다. id=데이터 형식을 위해서

input태그를 사용하지 않고 ${vo.bno }를 바로 script에서 값을 가져오면 되지않을까?
el표기법을 jquery에서 사용하면 실행은 문제없지만 가독성, 시점문제 등등 문제가 생길 수도 있기 때문에 사용하지 않는게 좋다.

<댓글입력 script>

var replyBno=$('#replyBno').val(); //게시판 번호값
getAllReplies(); //댓글 가져오기
        
$('#btn_add').click(function(){ 
	var replyId=$('#replyId').val(); 
	var replyContent=$('#replyContent').val();
	var obj={
		'replyBno':replyBno,
		'replyContent':replyContent,
		'replyId':replyId
	};
            
	$.ajax({
		type:'post',
		url:'replies/add',
		data:obj,
		success:function(result){
			if(result=='success'){
				alert('댓글 입력 성공');
				getAllReplies(); //댓글 새로고침
			}
		}
	}); //end ajax()
}); //end btn_add.click()

등록버튼 클릭 시 글번호, 댓글 내용, 작성자 정보를 json으로 저장해서 ajax방식으로 전송
ajax 응답 성공적일 시 댓글 목록만 새로고침

<add.servlet>

int replyBno=Integer.parseInt(request.getParameter("replyBno"));
String replyContent=request.getParameter("replyContent");
String replyId=request.getParameter("replyId");
		
ReplyVO vo=new ReplyVO(0, replyBno, replyContent, replyId, "");
System.out.println(vo);
		
int result=dao.insert(vo);
System.out.println(result);
if(result==1) {
	response.getWriter().append("success");
}

전송받은 json에서 데이터를 저장하고 db에 정상적으로 저장되면 jsp로 success 응답 돌려주기

댓글 목록 표시 과정

DB에서 게시글번호에 해당하는 댓글list를 servlet에서 json으로 가공해 jsp로 전달한다.
jsp에서 받은 데이터를 가공해 화면에 제공

<댓글 보기 servlet>

int replyBno=Integer.parseInt(request.getParameter("replyBno"));
List<ReplyVO> list=dao.select(replyBno);
		
JSONArray jsonArray=new JSONArray();
for(int i=0;i<list.size();i++) {
	JSONObject jsonObject=new JSONObject();
	jsonObject.put("replyNo", list.get(i).getReplyNo());
	jsonObject.put("replyBno", list.get(i).getReplyBno());
	jsonObject.put("replyContent", list.get(i).getReplyContent());
	jsonObject.put("replyId", list.get(i).getReplyId());
	jsonObject.put("replyDate", list.get(i).getReplyDate());
	jsonArray.add(jsonObject);
}
System.out.println(jsonArray.toString());
response.getWriter().append(jsonArray.toString());

DB에서 가져온 데이터를 json 형태로 만들어서 String으로 넘겨준다.

<댓글보기 script>

function getAllReplies() {
	var url='replies/all?replyBno='+replyBno;
	$.getJSON(
		url,
		function(jsonData) {
			console.log(jsonData);
			var list='';
			$(jsonData).each(function(){
				console.log(this); //this : 반복되는 컬렉션의 현재 데이터
				var replyDate=new Date(this.replyDate);
				list += '<div class="reply_item">'+'<pre>'
				+'<input type="hidden" id="replyNo" value="'+this.replyNo+'" />'
				+'<input type="hidden" id="replyId" value="'+this.replyId+'" />'
				+this.replyId+'&nbsp;&nbsp;'
				+'<input type="text" id="replyContent" value="'+this.replyContent+'" readOnly />'
				+'&nbsp;&nbsp;'+replyDate+'&nbsp;&nbsp;'
				+'<button class="btn_update" type="button">수정</button>'
				+'<button class="btn_delete" type="button">삭제</button>'
				+'</pre></div>';
			}); //end each()
			$('#replies').html(list);
		}
	); //end getJSON()
}//end getAllReplies()