가장 먼저 해야할 것은 update.ejs의 작성이다.
update.ejs
<!DOCTYPE html>
<html>
<head>
<title>수정하기</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/stylesheets/style.css">
<link rel="stylesheet" href="/stylesheets/menu-button.css">
</head>
<body>
<%-include('sidebar')%>
<%-include('navi-bar')%>
<div id="content">
<div id="wrap-inner-post">
<div id="write-info">
<span>수정하기</span>
</div>
<form action="/update/submit" accept-charset="utf-8" name="post-data" method="post">
<input type="hidden" name="id" value="<%=id%>">
<input type="hidden" name="code" value="<%=code%>">
<div id="write-box">
<input type="text" id="write-title" name="title" value="<%=title%>"required minlength="2" maxlength="50">
<hr>
<textarea id="write-content" name="content" required minlength="10" maxlength="60000"><%=content%></textarea>
</div>
<div id="write-bar">
<input type="text" id="write-author" placeholder="<%=author%>" readonly>
<button type="submit" class="btn btn-primary" id="write-submit-btn">수정하기</button>
<button type="button" class="btn btn-danger" id="write-cancel-btn" onclick="writeCancel()">취소</button>
<select class="form-control" id="type-dropdown">
<option><%=type%></option>
</select>
</div>
</form>
</div>
</div>
</body>
<script src="/jq/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="javascripts/effect.js"></script>
<script src="javascripts/functions.js"></script>
</html>
update.ejs 는 기본적으로 write.ejs에서 약간 변형하였다. 작성자와 게시판 종류를 수정할 수 없도록 하고, code라는, 암호화된 비밀번호를 가져온다. 이 이유는 수정 화면에서 제출을 선택했을 때 어떤 글을 수정할 것인지를 id로 판단한다면 수정 화면에서 post의 id만 바꿔서 엉뚱한 글을 수정해버릴 수 있기 때문이다. 이를 막기 위한 조치이다.
modify.js
var express = require('express');
var router = express.Router();
var db = require('../db-query');
router.post('/',function(req,res,next){
db.checkPassword(req.body.id,req.body.password,(response)=>{
if(response){
db.viewForUpdatePost(req.body.id,(post)=>{
if (post != null)
res.render('update',{id: post.ID, code: post.PASSWORD ,title: post.TITLE,type: post.TYPE, content: post.CONTENT, author: post.AUTHOR});
else
res.render('error');
});
} else{
res.send("<script>alert('비밀번호가 일치하지 않습니다');window.location.href='/view?id="+req.body.id+"';</script>");
}
});
});
router.post('/submit', function(req,res,next){
db.updatePost(req.body,(response)=>{
if (response)
res.render('error');
else
res.redirect('/view?id='+req.body.id);
});
});
module.exports = router;
수정하기를 누르면 /update로 post요청이 전송되고 이는 먼저 비밀번호가 일치하는지 확인하고, 일치하지 않는다면 다시 돌려보낸다. 만약 일치한다면 아까 작성했던 update.ejs가 렌더링된다.
db-query.js
var viewForUpdatePost = function(id,callback){
db.query('SELECT * FROM POST WHERE ID=?',[id],(err,post)=>{
if (err)
callback(false);
else
callback(post[0]);
});
};
var updatePost = function(data,callback){
db.query('UPDATE POST SET TITLE=? , CONTENT=? WHERE PASSWORD=?',[data.title,data.content,data.code],(err)=>{
callback(err);
});
}
db에서 할 일은 수정할 글을 정보를 가져오는 viewForUpdatePost 함수와 실제로 수정한 값을 db에 반영할 updatePost를 만들어주면 된다. 코드도 그리 복잡하지 않다.
이제 비밀번호를 알맞게 입력하고 '수정' 버튼을 선택하면
이렇게 수정 화면이 출력된다. 여기서 값을 수정할 수 있다.
그리고 처음에 글 조회 페이지를 만들 때 깜빡하고 만들지 않은 것이 있었는데 바로 페이징 기능이다.
이렇게 page와 maxPage변수도 넘겨줬으면서 사용을 안하고 있었다...
list.ejs
<div id="pages">
<hr>
<% if(page>1) { %>
<a class="btn btn-default" href="/list?type=<%=type%>&page=<%=Number(page)-1%>" role="button">이전</a>
<% } %>
<%=page%> of <%=maxPage%>
<% if(page < maxPage) { %>
<a class="btn btn-default" href="/list?type=<%=type%>&page=<%=Number(page)+1%>" role="button">다음</a>
<% } %>
<input type="text" placeholder="<%=page%>" id="target-page">
<button class="btn btn-default" onclick="location.href='/list?type=<%=type%>&page='+$('#target-page').val()" role="button">이동</a>
</div>
CSS
#pages{
height: 50px;
width: 900px;
margin: 0 auto;
position: absolute;
bottom: 0;
font-size: 20px;
}
#pages hr{
margin-bottom: 10px;
}
#pages input{
width: 40px;
font-size: 18px;
position: absolute;
right: 50px;
}
#pages button{
position: absolute;
right: 0px;
bottom: 4px;
}
페이징은 이렇게 작성했다. 받아온 maxpage와 page를 이용한다. 만약 1페이지보다 현재 페이지가 클 때만 이전 버튼을 생성하고, maxPage보다 작을 때에만 다음 버튼을 생성한다.
또한 우측에 원하는 페이지로 바로 이동할 수 있도록 input과 버튼을 만들어 두었다.
이제 기본적인 CRUD가 적용된 게시판은 모두 완성되었다. 지금부터 추가할 부가 기능들은 우선순위 순으로 다음과 같다.
- 검색 기능(제목,작성자)
- 같은 글은 ip당 한번씩만 추천할 수 있도록 설정
- AJAX를 이용한 비동기 방식의 댓글
- 소셜 로그인 기능으로 익명이 아니라 로그인 상태에서도 글을 쓸 수 있도록 변경
- socket.io를 이용한 접속자 실시간 채팅
'Projects > NodeBoard' 카테고리의 다른 글
| 추천하기 기능 구현 (0) | 2021.03.03 |
|---|---|
| 글 검색 기능과 페이징 개선 (1) | 2021.03.02 |
| 글 삭제 기능 제작 (0) | 2021.02.26 |
| 글 작성 기능 제작 (0) | 2021.02.25 |
| 글 조회 페이지 작성 (0) | 2021.02.24 |
댓글