[JSP] JSP로 CRUD 게시판 만들기 (5) - 댓글창 만들기

[JSP] JSP로 CRUD 게시판 만들기 (5) - 댓글창 만들기

 

 

1. CommentDTO (Comment.java)

package com.tenco.tboard.model;

import java.sql.Timestamp;

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

@Data
@ToString
@Builder
@NoArgsConstructor
@AllArgsConstructor
public class Comment {
	private int id;
	private int boardid;
	private int userId;
	private String content;
	private Timestamp created_at;
}

 

 

2. CommentRepository.java

package com.tenco.tboard.repository.interfaces;

import java.util.List;

import com.tenco.tboard.model.Comment;

public interface CommentRepository {
	void addComment(Comment comment);
	void deleteComment(int id);
	Comment getCommentById(int id);
	List<Comment> getCommentsByBoardId(int boardId);
}

 

 

3. CommentRepositoryImpl.java

package com.tenco.tboard.repository;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import com.tenco.tboard.model.Comment;
import com.tenco.tboard.repository.interfaces.CommentRepository;
import com.tenco.tboard.util.DBUtil;

public class CommentRepositoryImpl implements CommentRepository {

	private static final String INSERT_COMMENT_SQL = " INSERT INTO comments ( board_id, user_id, content ) values ( ?, ?, ? ) ";
	private static final String DELETE_COMMENT_SQL = " DELETE FROM comments WHERE id = ? ";
	private static final String SELECT_COMMENT_BY_ID = " SELECT * FROM comments where id = ? ";
	private static final String SELECT_COMMENT_BY_BOARD_ID = " SELECT c.*, u.username FROM comments c JOIN users u ON c.user_id = u.id WHERE c.board_id = ? ORDER BY c.created_at DESC ";

	@Override
	public void addComment(Comment comment) {
		try (Connection conn = DBUtil.getConnection()) {
			conn.setAutoCommit(false);
			try (PreparedStatement pstmt = conn.prepareStatement(INSERT_COMMENT_SQL)) {
				pstmt.setInt(1, comment.getBoardId());
				pstmt.setInt(2, comment.getUserId());
				pstmt.setString(3, comment.getContent());
				pstmt.executeUpdate();
				conn.commit();
			} catch (Exception e) {
				conn.rollback();
				e.printStackTrace();
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	@Override
	public void deleteComment(int id) {
		try (Connection conn = DBUtil.getConnection()) {
			conn.setAutoCommit(false);
			try (PreparedStatement pstmt = conn.prepareStatement(DELETE_COMMENT_SQL)) {
				pstmt.setInt(1, id);
				pstmt.executeUpdate();
				conn.commit();
			} catch (Exception e) {
				conn.rollback();
				e.printStackTrace();
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	@Override
	public Comment getCommentById(int id) {
		Comment comment = null;
		try (Connection conn = DBUtil.getConnection();
				PreparedStatement pstmt = conn.prepareStatement(SELECT_COMMENT_BY_ID)) {
			pstmt.setInt(1, id);
			try (ResultSet rs = pstmt.executeQuery()) {
				if (rs.next()) {
					comment = new Comment(rs.getInt("id"), rs.getInt("board_id"), rs.getInt("user_id"),
							rs.getString("content"), rs.getTimestamp("created_at"),rs.getString("username"));
				}
			} catch (Exception e) {
				e.printStackTrace();
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		return comment;
	}

	@Override
	public List<Comment> getCommentsByBoardId(int boardId) {
		List<Comment> commentList = new ArrayList<>();
		try (Connection conn = DBUtil.getConnection();
				PreparedStatement pstmt = conn.prepareStatement(SELECT_COMMENT_BY_BOARD_ID)) {
			pstmt.setInt(1, boardId);
			try (ResultSet rs = pstmt.executeQuery()) {
				while (rs.next()) {
					Comment comment = new Comment(rs.getInt("id"), rs.getInt("board_id"), rs.getInt("user_id"),
							rs.getString("content"), rs.getTimestamp("created_at"),rs.getString("username"));
					commentList.add(comment);
				}
			} catch (Exception e) {
				e.printStackTrace();
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		return commentList;
	}

}

 

 

(4) View.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>${board.title}</title>
<style>
/* common styles */
body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
    margin: 0;
    padding: 0;
}

.container {
    width: 80%;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
}

h2, h3 {
    color: #343a40;
}

p {
    color: #6c757d;
}

a {
    text-decoration: none;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    margin: 10px 5px;
    border-radius: 5px;
    color: #fff;
    background-color: #007bff;
    text-align: center;
}

.btn:hover {
    background-color: #0056b3;
}

.btn-edit {
    background-color: #28a745;
}

.btn-edit:hover {
    background-color: #218838;
}

.btn-delete {
    background-color: #dc3545;
}

.btn-delete:hover {
    background-color: #c82333;
}

.btn-list {
    background-color: #17a2b8;
}

.btn-list:hover {
    background-color: #138496;
}

/* view specific styles */
h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

p {
    font-size: 1.2em;
    line-height: 1.6;
}

p small {
    display: block;
    margin-top: 10px;
    color: #6c757d;
}

.btn {
    font-size: 1em;
}

h3 {
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 1.5em;
}

/* comment form styles */
.comment-section {
    margin-top: 30px;
}

.comment-list {
    margin-bottom: 20px;
}

.comment {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.comment .comment-author {
    font-weight: bold;
    color: #343a40;
}

.comment .comment-date {
    font-size: 0.9em;
    color: #6c757d;
}

.comment .comment-content {
    margin-top: 10px;
    font-size: 1.1em;
}

.comment-form {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
}

.comment-form textarea {
    padding: 10px;
    font-size: 1em;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    resize: vertical;
}

.comment-form button {
    align-self: flex-start;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #28a745;
    color: #fff;
    font-size: 1em;
    cursor: pointer;
}

.comment-form button:hover {
    background-color: #218838;
}
</style>
</head>
<body>
    <div class="container">
        <h2>${board.title}</h2>
        <p>${board.content}</p>
        <p>
            <fmt:formatDate value="${board.createdAt}" pattern="yyyy-MM-dd HH:mm" />
        </p>
        <c:if test="${board.userId == principal.id}">
            <a class="btn btn-edit" href="${pageContext.request.contextPath}/board/edit?id=${board.id}">수정</a>
            <a class="btn btn-delete" href="${pageContext.request.contextPath}/board/delete?id=${board.id}">삭제</a>
        </c:if>
        <a class="btn btn-list" href="${pageContext.request.contextPath}/board/list?page=1">목록으로 돌아가기</a>
    </div>

    <div class="container comment-section">
        <h3>댓글</h3>
        <!-- 댓글 리스트 -->
        <div class="comment-list">
	   		<c:forEach  var="comment" items="${commentList}">
	         <div class="comment">
	             <div class="comment-author">${comment.username}</div>
	             <div class="comment-date">${comment.createdAt}</div>
	             <div class="comment-content">${comment.content}</div>
	         </div>          		
	   		</c:forEach>
        </div>
        
        <!-- 댓글 작성 폼 -->
        <form class="comment-form" action="${pageContext.request.contextPath}/board/add" method="post">
        <input type="hidden" value="${board.id}" name="board_id" id="board_id">
            <textarea name="content" rows="4" placeholder="댓글을 작성하세요..." required></textarea>
            <button type="submit">댓글 작성</button>
        </form>
    </div>
</body>
</html>