[21.10.12] 게시판 연습#5

${sessionScope.userid } == ${userid }
같은 방식. 가독성 측면에선 왼쪽이 좋음. 이름중복만 없다면 오른쪽 방식이 편함

댓글 수정/삭제

자신이 작성한 댓글만 수정, 삭제할 수 있게끔 세션에 저장된 아이디와 일치한 댓글작성자만 버튼 활성화.

비동기방식 ajax에서 만든 html태그는 사이트가 로드될때가 아니라 ajax에서 가지고 왔을때 생성된 것.

1. 댓글을 로그인을 해야만 작성할 수 있게한다.

  <div style="text-align: center">
    <c:if test="${empty sessionScope.userid }">
      <p>* 댓글은 로그인이 필요한 서비스입니다. &nbsp;
      <a href="replies/login?bno=${vo.bno }">로그인하기</a></p>
    </c:if>
    <div>
      <input type="hidden" id="replyBno" value="${vo.bno }">
      <c:if test="${not empty sessionScope.userid }">
        작성자 : <input type="text" id="replyId" value="${sessionScope.userid }" readonly>
        댓글 : <input type="text" id="replyContent">
        <button type="button" id="btn_add">작성</button> 
      </c:if>
    </div>
  </div>

로그인해야만 댓글을 작성할 수 있기때문에 작성자아이디 input은 세션에 저장된 로그인아이디로 대체할 수 있음

2. 댓글 작성자와 로그인한 사용자가 일치한 경우만 수정, 삭제

function getAllReplies() {
	var url='replies/all?replyBno='+replyBno;
	$.getJSON(
		url,
		function(jsonData) {
		//서버에서 온 list 데이터가 저장
		console.log(jsonData);
		var list='';
		var replyWriter=$('#replyId').val(); //로그인된 아이디

		$(jsonData).each(function(){
			//this : 반복되는 컬렉션의 데이터 중 하나
			console.log(this);
			var replyDate=new Date(this.replyDate);
			var hidden='hidden';
			var readonly='readonly';
			if(replyWriter == this.replyId){
				hidden='';
				readonly='';
			}

			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" '+hidden+' >수정</button>'
			+'<button class="btn_delete" type="button" '+hidden+' >삭제</button>'
			+'</pre></div>';
		}); //end each()
		$('#replies').html(list);
	}); //end getJSON()
}//end getAllReplies()

$(컬렉션).each() : 컬렉션 데이터를 반복문으로 꺼내는 함수

비동기방식의 시점문제 때문에 hide()나 css()가 적용되지 않음.
그래서 html 코드 생성 시 속성을 부여해줘야 하는데 사용자가 작성한 댓글이 아니면 hidden과 readonly 속성을 없애주기

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+'" />'
+'&nbsp;&nbsp;'+replyDate+'&nbsp;&nbsp;';
            	    		
if(this.replyId == replyWriter){
	console.log(this.replyId +" : "+replyWriter);
	list+='<button class="btn_update" type="button">수정</button>'
	+'<button class="btn_delete" type="button">삭제</button>'
	+'</pre></div>';
}else{
	list+='</pre></div>';
}

참고로 나는 하드코딩하는 방식밖에 생각이 안났는데 정말 간단하게 변수를 사용하는 방법이 있었다는 점..^^ 생각하자 생각!

3. 댓글에서 로그인하면 타겟url로 돌아오기

HttpSession session=request.getSession();
String userid=(String)session.getAttribute("userid");
if(userid!=null && !userid.equals("")) {
	String path="detail.do?bno="+bno;
	RequestDispatcher dispatcher=request.getRequestDispatcher(path);
	dispatcher.forward(request, response);
}else { //userid 세션이 없음
	session.setAttribute("targetURL","detail.do?bno="+bno);
	response.sendRedirect("../login.go");
}

현재 게시글의 위치를 알기 위해 글번호를 넘겨줘야한다
<a href="replies/login?bno=${vo.bno }">로그인하기</a>