글 삭제 기능 제작

먼저 할일은 수정,삭제 버튼과 비밀번호 입력input의 추가이다.

 

view.ejs

(생략)

<div id="post-thumbuparea">
	<%=thumbup%><br>추천하기버튼
</div>
<% if(isLogined==0) { %>
  <hr>
  <div id="modify-or-update">
    <form accept-charset="utf-8" name="delete-or-modify-data" method="post" onsubmit="return false">
      <input type="hidden" name="id" value="<%=id%>">
      <button type="button" class="btn btn-danger" id="delete-btn" name="delete" onclick="
      javascript:
      if(confirm('정말로 삭제하시겠습니까?')){
      form.action='/view/delete';
      form.submit();
      }
      ">삭제</button>
      <button type="button" class="btn btn-primary" id="modify-btn" name="modify" onclick="
      javascript:
      form.action='/update';
      form.submit();
      ">수정</button>
      <input type="password" id="delete-password" name="password" placeholder="비밀번호" required minlength="4" maxlength="20">
    </form>
  </div>
<% } %>


(생략)

 

CSS

#modify-btn,#delete-btn{
  margin: 2px;
  float:right;
}
#delete-password{
  float:right;
  margin: 2px;
  font-size: 21px;
}

 

적용모습

 

 

해당 글이 비로그인 유저가 쓴 글인 경우만 수정,삭제 버튼을 노출한다. 만약 로그인 유저가 쓴 글이라면 해당 유저로 로그인하고 자신이 쓴 글을 보아야만 삭제 버튼이 보이도록 추후에 수정할 것이다.

 

 

modify-or-update div에는 수정,삭제 버튼과 비밀번호를 입력하기 위한 input을 집어넣었다. post가 보내는 정보는 글 id와 Password이다. 굳이 onclick에 지저분하게 추가해야 했던 이유는 비밀번호를 입력하고 엔터를 입력시 자동으로 제출되는것을 방지하기 위해 form의 onsubmit옵션에 return false를 넣었기 때문이다. 또한 수정과 삭제가 요청을 보내는 url도 다르기 때문이다.

 

(생략)

router.post('/delete',function(req,res,next){
    db.checkPassword(req.body.id,req.body.password,(response)=>{
        if(response){
            db.deletePost(req.body.id,(callback)=>{
                if (callback)
                    res.send("<script>alert('삭제가 완료되었습니다.');window.location.href='/list';</script>");
                else
                    res.render('error');
            });
        } else{
            res.send("<script>alert('비밀번호가 일치하지 않습니다');window.location.href='/view?id="+req.body.id+"';</script>");
        }
    });
});

 

view.js의 코드이다. checkPassword함수를 통해 비밀번호가 같은지 여부를 확인하고 같다면 deletePost를 통해 해당 글을 삭제하는 간단한 코드이다. AJAX를 쓴다면 페이지 이동 없이 할 수 있겠지만 일단은 이렇게 사용한다.

 

var checkPassword = function(id,plainPassword,callback){
    useCrypto(plainPassword,function(password){
        db.query('SELECT PASSWORD FROM POST WHERE ID=?',[id],function(err,savedPassword){
            if (savedPassword[0].PASSWORD==password)
                callback(true);
            else
                callback(false);
        });
    });
}

var deletePost = function(id,callback){
    db.query('DELETE FROM POST WHERE ID=?',[id],(err)=>{
        if (err)
            callback(false);
        else
            callback(true);
    });
};

 

db-query.js에는 두가지 함수가 추가되었다. 첫번째는 인자를 받아서 암호화한뒤, DB에 저장된 값과 같은지 확인하여 ture혹은 false를 돌려주는 checkPassword함수이고, 하나는 글을 삭제하는 함수이다.