JSP 댓글기능 추가

 

프로젝트 오늘까진줄 알고

올드보이의 갇힌 최민식 처럼 연휴내내 밥먹고 낮잠자고 과제만 했는데..

내일까지란다..

내 연휴 돌려줘..

 

그런 김에 댓글기능을 추가해봐야겠당

책에도 나와있지 않은 부분이라 일단 지금까지 한 완성본을 저장해놓고 시작

 

1. mysql comment 테이블 만들기

CREATE TABLE comment(
commentno int AUTO_INCREMENT PRIMARY KEY, 
userno int(11),
noticeno int(11),
content varchar(100),
commentCreateTime timestamp,
FOREIGN KEY (userno) REFERENCES user (userno) ,
FOREIGN KEY (noticeno) REFERENCES notice (noticeno) 

) ENGINE=InnoDB DEFAULT CHARSET = utf8;

 

 

2. model패키지에 comment.java 추가

 

package com.seoho.tiffany.model;

import java.sql.Timestamp;

import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;


@Data
@AllArgsConstructor
@NoArgsConstructor
@Builder
public class Comment {
	int commentno;
	int userno;
	int noticeno;
	String content;
	Timestamp commentCreateTime;
}

 

 

3. viewmodel 패키지의 NoticeVM.java 수정하기

package com.seoho.tiffany.viewmodel;

import java.util.List;

import com.seoho.tiffany.model.Comment;
import com.seoho.tiffany.model.Notice;
import com.seoho.tiffany.model.User;

import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@Builder

public class NoticeVM {
	private Notice notice;
	private User user;
	private List<Comment> comment;
	
	@Builder
	public NoticeVM(Notice notice, User user, List<Comment> comment) {
		super();
		this.notice = notice;
		this.user = user;
		this.comment = comment;
	}
	
	
}

 

기존에 사용하던 noticeVM을 수정해야하는 단점이 있지만 3개를 조인하는 쿼리를 작성하지 않고

기존에 사용하던 조인에서 comment만 추가하면 되기때문에 빌더를 추가하여 파일을 수정해준다.

사실 잘 이해가안되긴 한데 나중에 되면 이해하게되겟지..?

 

 

4. detail.jsp 수정

다행히 기존에 따왓던 부트스트랩에 댓글을 뿌리는 리스트가 있어서 갖고왓다.. 이미지는 설정못하니 펭수로 고정

댓글을 수정, 삭제하는 버튼과 댓글을 작성하는 textarea와 버튼만 만들었당

 

	<div class="input-group col-sm-8 mx-auto">
			<div class="container">
				<div class="row">
					<div class="col-md-8 blog-content">
						<ul class="comment-list">

							<c:forEach var="comment" items="${NoticeListVM.comment}">
								<li class="comment">
									<div class="vcard bio">
										<img src="images/p10.jpg"
											alt="Free Website Template by Free-Template.co">
									</div>
									<div class="comment-body">
										<h3>${NoticeListVM.user.username}</h3>
										<div class="meta">${fn:substring({comment.commentCreateTime},1,17)}</div>
										<p>${comment.content}</p>



										<c:choose>
											<c:when
												test="${sessionScope.user.userid eq NoticeListVM.user.userid || sessionScope.user.admin eq 1}">

												<button id="deleteComment"
													onclick="deleteComment(${NoticeListVM.user.userno}, ${comment.commentno},${NoticeListVM.notice.noticeno})"
													type="button" class="btn btn-danger m-1">삭제</button>
											</c:when>

										</c:choose>
									</div>
								</li>
							</c:forEach>
						</ul>
					</div>
				</div>
			</div>
			<form action="/notice?cmd=commentWrite" method="POST">
				<input type="hidden" name="userno"
					value="${NoticeListVM.user.userno}" /> <input type="hidden"
					name="noticeno" value="${NoticeListVM.notice.noticeno}" />
				<textarea rows="2" cols="70" class="w3-input w3-border newLogin"
					name="content" required="required"></textarea>
				<div class="form-group">
					<input type="submit" value="댓글 작성"
						class="btn btn-primary btn-md text-white">
				</div>
			</form>
			<br />
		</div>

 

 

 

 

 

리스트에 담겨있는 것을 JSTL로 뿌릴때에는 꼭 <c:forEach var="" items=""> 문을 사용하여 뿌려주어야 한다.

또, 댓글에 달려있는 삭제버튼을 사용할때에는 List안에 있는 변수를 사용하여야 하기 때문에 꼭 forEach문에서 변수를 갖고와서 다시 form안의 value값으로 넘겨주는 자바스크립트를 작성하여야 한다.

 

<form id="deleteCommentForm" action="/notice?cmd=commentdelete"
	method="POST">
	<input id="commentno" type="hidden" name="commentno" value="" /> <input
		id="userno" type="hidden" name="userno" value="" /><input
		id="noticeno" type="hidden" name="noticeno" value="" />

</form>

<script>	
function deleteComment(userno, commentno,noticeno){
		$('#deleteCommentForm #userno').attr('value',userno);
		$('#deleteCommentForm #commentno').attr('value',commentno);
		$('#deleteCommentForm #noticeno').attr('value',noticeno);
		// submit
	 $('#deleteCommentForm').submit();
	}
</script>

 

5. NoticeCommentDeleteAction.java

삭제 폼은 간단하니까 코멘트삭제액션부터!

 

package com.seoho.tiffany.action.notice;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.seoho.tiffany.action.Action;
import com.seoho.tiffany.dao.CommentDao;
import com.seoho.tiffany.model.User;
import com.seoho.tiffany.util.Script;

public class NoticeCommentDeleteAction implements Action {

	@Override
	public void execute(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		int noticeno = Integer.parseInt(request.getParameter("noticeno"));
		int commentno = Integer.parseInt(request.getParameter("commentno"));
		int userno = Integer.parseInt(request.getParameter("userno"));
		User user = (User) request.getSession().getAttribute("user");

		if (userno == user.getUserno() | user.getAdmin() == 1) {
			CommentDao commentDao = CommentDao.getInstance();

			int result = commentDao.delete(commentno);
			if (result == 1) {
				RequestDispatcher dis = request.getRequestDispatcher("/notice?cmd=detail&"+noticeno);
				dis.forward(request, response);
			} else {
				Script.back(response, "해당 게시글을 삭제할 수 없습니다.");

			}

		} else {
			Script.back(response, "삭제할 권한이 없습니다.");
			return;
		}

	}
}

 

 

 

6. NoticeCommentWriteAction.java

notice컨트롤러를 썻다. comment컨트롤러를 따로 만들어도되지만 어차피 notice에서만 작동할꺼기때문에 노티스의 컨트롤러를 사용하여 노티스팩토리에에서 분기하여땅

package com.seoho.tiffany.action.notice;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.seoho.tiffany.action.Action;
import com.seoho.tiffany.dao.CommentDao;
import com.seoho.tiffany.util.Script;

public class NoticeCommentWriteAction implements Action {

	@Override
	public void execute(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		if
		(
				request.getParameter("userno") == null || 
				request.getParameter("noticeno") == null ||
				request.getParameter("content") == null ||
				request.getParameter("userno").equals("") ||
				request.getParameter("noticeno").equals("") ||
				request.getParameter("content").equals("")
		) {
			Script.back(response, "잘못된 접근입니다.");
			return;
		}

		System.out.println(request.getParameter("userno"));
		System.out.println(request.getParameter("noticeno"));
		System.out.println(request.getParameter("content"));
		
		
		int userno = Integer.parseInt(request.getParameter("userno"));
		int noticeno = Integer.parseInt(request.getParameter("noticeno"));
		String content = request.getParameter("content");
		
//		User user = (User) request.getSession().getAttribute("user");
		
		CommentDao commentDao = CommentDao.getInstance();
		int result = commentDao.save(userno,noticeno,content);
		
		if(result == 1) {
			RequestDispatcher dis = request.getRequestDispatcher("/notice?cmd=detail&noticeno="+noticeno);
			dis.forward(request, response);
		}else {
			Script.back(response, "글 입력시 오류가 발생하였습니다.");
		}

	}

}

 

 

 

끝!

내일까지 한다고 그러면 페이징을 만들어보아야 겠다눙