JSP
[JSP] JSP로 CRUD 게시판 만들기 (5) - 댓글창 만들기
Song hyun
2024. 7. 17. 09:45
728x90
반응형
[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>
728x90
반응형