320x100
먼저 글 작성 버튼을 만들어줘야 한다.
HTML
<div id="wrap-upper">
<button type="button" class="btn btn-secondary" id="post-button" onclick="writePost()">글쓰기</button>
</div>
CSS
#wrap-upper{
height: 40px;
width: 1180px;
margin: 0 auto;
}
버튼은 예쁜 부트스트랩의 것을 그대로 사용할 것이다.
이제 글쓰기 페이지를 작성한다.
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="/write/submit" accept-charset="utf-8" name="post-data" method="post">
<div id="write-box">
<input type="text" id="write-title" name="title" placeholder="제목" required minlength="2" maxlength="50">
<hr>
<textarea id="write-content" name="content" placeholder="내용" required minlength="10" maxlength="60000"></textarea>
</div>
<div id="write-bar">
<input type="text" id="write-author" name="author" placeholder="작성자" required minlength="2" maxlength="10">
<input type="password" id="write-password" name="password" placeholder="비밀번호" required minlength="4" maxlength="20">
<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" name="type">
<option>자유게시판</option>
<option>유머게시판</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>
CSS
#wrap-inner-post{
margin: auto;
display: flex;
justify-content: center;
flex-direction: column;
}
#write-box{
height: 900px;
max-width: 900px;
min-width: 900px;
border: solid 1px gray;
display: flex;
flex-direction: column;
}
#write-title{
font-size: 35px;
width: 898px;
border:none;
padding-left: 20px;
}
#write-content{
flex: 1;
resize: none;
border: none;
padding: 20px;
}
#write-bar{
margin-top:1px;
}
#write-author,#write-password{
float:left;
margin-right:2px;
font-size:20px;
}
#write-submit-btn,#write-cancel-btn{
margin-left: 2px;
float:right;
}
#write-info{
text-align: left;
font-size: 2em;
}
#type-dropdown{
width: 200px;
display: inline;
float:left;
height: 36px;
}
글 작성 페이지를 심플하게 만들어 보았다. 좀 휑한 느낌이 없진 않지만 나름 만족한다.
이제 functions.js를 만들어서 두가지 기능을 추가해야 한다.
function writePost(){
var form = document.createElement("form");
form.setAttribute("method", 'post');
form.setAttribute("action", '/write');
// var hiddenField = document.createElement("input");
// hiddenField.setAttribute("type", "hidden");
// hiddenField.setAttribute("name", 'userCode');
// var code = '(대충 유저 코드)';
// hiddenField.setAttribute("value", code);
// form.appendChild(hiddenField);
document.body.appendChild(form);
form.submit();
};
function writeCancel(){
var check = confirm('정말로 글쓰기를 취소하시겠습니까?');
if (check){
history.back();
}
}
먼저 첫 번째 기능은 글쓰기 버튼을 눌렀을때 글쓰는 페이지로 이동되게 하기 위한 버튼이다. get이 아니라 post를 굳이 사용한 이유는 나중에 로그인 상태로 글을 쓸 때 로그인 정보가 넘어가야 하기 때문이다. 지금은 없다.
두번째는 글쓰기 화면에서 '취소' 버튼을 눌렀을 때의 기능이다. 정말 취소할것인지 묻고 확인을 선택하면 이전 페이지로 돌아간다.
이를 다 완료했다면 post로 데이터가 넘어갔을 시 처리를 위해 write.js를 작성한다.
근데 그 전에 비밀번호를 암호화하기 위한 crypto.js를 작성한다.
var crypto = require('crypto');
var useCrypto = function(plainPassword,callback){
crypto.randomBytes(64, (err, buf) => {
crypto.pbkdf2(plainPassword, '원하는 문자열', 원하는 횟수, 64, 'sha512', (err, key) => {
callback(key.toString('base64'));
});
});
}
module.exports = useCrypto;
crypto는 내장 모듈인데, 비밀번호를 암호화할 수 있도록 도와준다. 이런 식으로 코드를 작성하면 된다, 또한 이 파일은 무조건 gitignore에 포함시켜서 노출되지 않도록 해야 한다.
DB의 테이블의 password 의 최대 길이도 100자로 바꿔준다.
CHANGE COLUMN `PASSWORD` `PASSWORD` VARCHAR(100) NOT NULL ;
이제 DB에서 insert구문을 써넣어 주어야 한다. 다음 코드를 추가하면 된다.
var writePost = function(data,callback){
// 쿼리에 insert
db.query('INSERT INTO POST (`TITLE`, `AUTHOR`, `TYPE`, `CONTENT`, `PASSWORD`) VALUES (?, ?, ?, ?, ?)',
[data.title,data.author,data.type,data.content,data.password],function(err){
if (err)
callback(false);
else
callback(true);
});
}
exports.writePost = writePost;
단순하다. 그냥 data객체를 받아와서 싹 넣어주고 콜백함수에 성공실패 여부만 돌려주면 된다.
var express = require('express');
var router = express.Router();
var db = require('../db-query');
var useCrypto = require('../crypto');
router.post('/',function(req,res,next){
if (req.body.userID === undefined)
res.render('write',{userID: ''});
});
router.post('/submit',function(req,res,next){
useCrypto(req.body.password, (cPassword) =>{
req.body.password = cPassword;
db.writePost(req.body,(response)=>{
if(response)
res.redirect('/list?type='+req.body.type);
else
res.render('error');
});
});
});
module.exports = router;
write.js는 이렇게 작성해주면 된다. 글 작성 성공 시 해당 게시판으로 리다이렉트 해주고, 실패시 error페이지를 렌더링한다.
모두 작성한 뒤 테스트로 유머게시판에 한번 글을 써 본다.
글쓰기를 클릭하면 이렇게 유머게시판에 글이 써지면서 해당 게시판 조회로 넘어가는 것을 확인할 수 있다.
DB를 확인해 보면,
비밀번호가 암호화까지 되어서 잘 저장된 것을 확인할 수 있다.
'Projects > NodeBoard' 카테고리의 다른 글
| 글 수정 기능과 글 리스트 페이징 (0) | 2021.02.27 |
|---|---|
| 글 삭제 기능 제작 (0) | 2021.02.26 |
| 글 조회 페이지 작성 (0) | 2021.02.24 |
| 테이블 생성과 게시판별 조회 기능 (1) | 2021.02.23 |
| 기본적인 라우팅과 MySQL DB 연동 (0) | 2021.02.22 |
댓글