글 수정하기 (edit기능)

수정하기 버튼을 만들어서, 수정하기 버튼을 누르면 원래 있던 글의 제목과 날짜가 뜨며, 수정할 수 있게끔 만들어보자.

/edit이라는 url로 만들것이므로 먼저, server.js에

app.get('/edit/:id', function(요청, 응답){
    
    db.collection('post').findOne({ _id : parseInt(요청.params.id) }, function(에러, 결과){
        if (결과 == null) {
            return 응답.render('error.ejs');
        } else {
            console.log(결과);
            응답.render('edit.ejs', { data : 결과 });
        };
    });
});

이렇게 적어서, 1번글을 수정하려면 /edit/1, 2번글을 수정하려면 /edit/2 이렇게 이동해야하므로 url파라미터를 이용해서 /edit/:id로 적어주고 들어가면, db에서 _id가 :id와 같은 데이터를 찾아서 공백이면 에러처리를 해주고, 있다면 edit.ejs라는 화면을 랜더링해주면 된다. 그리고 그 결과는 data라는 변수에 담아준다. data는 오브젝트 형식이다. 그 다음, edit.ejs를 보면

<form class="p-5" action="/edit" method="POST">
        <div class="mb-3">
          <label class="form-label">오늘의 할일</label>
          <input value="<%= data.제목 %>" 
		 class="form-control"  
                 placeholder="오늘의 할일" 
                 name="title">
        </div>
        <div class="mb-3">
          <label class="form-label">날짜</label>
          <input value="<%= data.날짜 %>" 
          	 style="height: 150px;" 
          	 class="form-control"  
          	 placeholder="날짜" 
          	 name="date">
        </div>
        <button type="submit" class="btn btn-primary">저장하기</button>
</form>

이렇게 적어준다. 그리고 input에는 4번게시물의 원래 내용이 나와야하므로 ejs문법과 input태그의 value를 이용해서 기본값을 정해준다. 

<%= %>이렇게 적어주면 된다.

수정을 해주고 전송을 누르면 서버에서 바뀌게끔 하면되는데, html상에서 form태그의 method를 PUT으로 바꿀 순 없다. 따라서 라이브러리를 설치해줘야 한다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

npm install method-override

를 설치해준다. 이 라이브러린 form에서 PUT, DELETE요청을 할 수 있게 도와주는 역할이다.

const methodOverride = require('method-override');
app.use(methodOverride('_method'));

그리고 서버 상단에 이렇게 두줄을 입력해준다.

<form class="p-5" action="/edit?_method=PUT" method="POST">

그리곤 form태그에 method는 POST로 두고, action에 /edit뒤에 ?_method=PUT를 적어주면 된다.

이제 서버 요청UI는 끝났다. server.js에

app.put('/edit', function(요청, 응답) {
    //폼에담긴 데이터를 가지고
    //db에 업데이트함
    db.collection('post').updateOne({}, {}, function(){
        //updateOne은 (어떤게시물수정할지, 수정값, 콜백함수)를 파라미터로가짐
    })
});

이렇게, updateOne을 이용해 업데이트 해준다.

<input value="<%= data._id %>" type="text" name="id" style="display: none;">

app.put('/edit', function(요청, 응답) {
    //폼에담긴 데이터를 가지고
    //db에 업데이트함
    db.collection('post').updateOne({ _id : parseInt(요청.body.id) },
                                    { $set : { 제목 : 요청.body.title , 날짜 : 요청.body.date } },
                                    function(에러, 결과){
                                        console.log('수정완료');
                                        응답.redirect('/list')//성공시 이동
    })
});

먼저, form태그에 안보이는 id를 전달해주는 input태그를 추가해주고 name을 id로 작성해준다.

그리고, updateOne에 _id가 전달해준 edit/??의 ??에 오는 파라미터인 id와 같은 게시물을

$set이라는 operation을 이용해서 제목과, 날짜를 바꾸어준다.

마지막으로, 응답.redirect를 이용해 저장하기버튼을 눌렀을 때 성공하면 이동할 페이지를 만들어주면 끝이다.

수정버튼을 눌러서 각 글번호에 맞게 edit/글번호로 이동하려면 location.href = "주소"를 사용하면 된다.

<button class="btn btn-primary edit" data-id="<%= posts[i]._id %>">수정</button>

$('.edit').click(function(e){
        var 글번호 = e.target.dataset.id;
        console.log(글번호);
        location.href = "/edit/" + 글번호;
})

위 처럼, 버튼에 data-id를 심어놓고, 버튼을 클릭하면 "글번호"라는 변수에 e.target(현재누른).dataset.id(data-id의 숫자)를 담고, location.href를 이용해 /edit에 글번호를 더해서 이동시켜준다.