<댓글>
먼저 데이터베이스에 comments 테이블을 추가했다.
module.exports = function(sequelize, DataTypes){
return sequelize.define('comments', {
idx: {
type : DataTypes.INTEGER,
autoIncrement: true,
primaryKey: true,
allowNull: false
},
content: {
type: DataTypes.TEXT,
allowNull: false
},
writer: {
type: DataTypes.STRING(255),
allowNull: false
},
postId: {
type: DataTypes.INTEGER,
allowNull: false
}
});
}postId는 어떤 글에 대한 댓글인지를 나타낸다.
read.ejs에서 댓글을 추가하는 부분을 만든다.
div>
<h3>댓글 작성</h3>
<form action="/board/comment/<%= post.idx %>" method="post">
<textarea name="content" placeholder="댓글을 입력하세요" required></textarea>
<button type="submit">댓글 작성</button>
</form>
</div>content에 내용을 담아서 /comment 링크로 postid와 함께 보낸다.
router.post('/comment/:id', async (req, res) => {
const postId = req.params.id;
const { content } = req.body;
await db.comments.create({
postId: postId,
writer: req.session.user.username,
content: content });
res.redirect('/board/read/'+postId);
});comment에 들어온 요청 처리 방식이다.
create으로 comments 테이블에 데이터를 추가하고 보고 있던 글 페이지로 다시 돌아간다.
router.get('/read/:id', async(req, res) => {
if(!req.session.user){
return res.redirect('/auth/login');
}
const postId = req.params.id;
const post = await db.posts.findByPk(postId)
const iswriter = req.session.user && req.session.user.username === post.writer;
const comments = await db.comments.findAll({
where: {postId: postId},
order: [['createdAt', 'DESC']]
})
if (post.secret && (!req.session.user || req.session.user.username !== post.writer || 1 === 1)) {
return res.render('board/secret', { postId: post.idx });
}
res.render('board/read', { post: post, iswriter: iswriter, comments: comments, user: req.session.user});
});read 링크에 대한 요청을 수정해서 read.ejs 파일을 렌더링할 때 user 변수와 comment 변수도 추가로 보냈다.
comment를 보낼 때 postId로 모든 댓글을 찾고, 최근 댓글이 위로 올라오도록 creatdAt을 기준으로 정렬을 했다.
<div>
<h3>댓글</h3>
<ul>
<% comments.forEach(comment => { %>
<li>
<%= comment.writer %>: <%= comment.content %>
<% if (user && user.username === comment.writer) { %>
<form action="/board/comment/<%= comment.idx %>/edit" method="get">
<button type="submit">댓글 수정</button>
</form>
<form action="/board/comment/<%= comment.idx %>/delete" method="post">
<button type="submit">댓글 삭제</button>
</form>
<% } %>
</li>
<% }) %>
</ul>
</div>read.ejs에서 댓글을 보여주는 부분이다.
현재 사용자가 댓글의 작성자라면, 수정과 삭제 버튼도 만들었다.
댓글 수정과 삭제에 관련된 라우팅과 ejs 파일은 글의 수정, 삭제와 거의 똑같기 때문에 별도의 설명 없이 코드만 올리겠다.
router.post('/comment/:id/delete', async (req, res) => {
const commentId = req.params.id;
db.comments.destroy({
where:{idx:commentId}
}).then(function(result){
res.redirect('/board');
})
});
router.get('/comment/:id/edit', async (req, res) => {
const commentId = req.params.id;
const comment = await db.comments.findByPk(commentId);
res.render('board/editcomment', { comment });
});
router.post('/comment/:id/update', async (req, res) => {
const commentId = req.params.id;
const { content } = req.body;
const result = await db.comments.update({ content }, { where: { idx: commentId } });
res.redirect('/board');
});<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>댓글 수정</title>
</head>
<body>
<h1>댓글 수정</h1>
<form action="/board/comment/<%= comment.idx %>/update" method="post">
<label for="content">내용:</label>
<textarea id="content" name="content" rows="10" required><%= comment.content %></textarea>
<br>
<button type="submit">수정 완료</button>
</form>
</body>
</html>
'웹개발' 카테고리의 다른 글
| 게시판-카테고리, 검색 (0) | 2023.10.28 |
|---|---|
| 게시판-추천 (0) | 2023.10.26 |
| 게시판-자기 글 수정, 삭제, 비밀글 (0) | 2023.10.25 |
| 게시판-이메일 인증, 아이디 찾기 (0) | 2023.10.25 |
| 게시판-회원가입, 로그인 (0) | 2023.10.24 |
