319. RESTful Blog App : EDIT AND UPDATE

#Edit/Update
* Add Edit Route
* Add Edit Form
* Add Update Route
* Add Update Form
* Add Method-Override

1. Add Edit Route

2. Add Edit Form

1) Make Edit Form page has information of editing blog(data from DB)

: combination of the SHOW + EDIT

2) call origin data from DB and make them to be shown in page

<!--title--> <input type="text" name="blog[title]" value="<%= blog.title %>">
<!--imgage--><input type="text" name="blog[image]" value="<%= blog.image %>">
<!--body--><textarea name="blog[body]"><%= blog.body %></textarea>
		<!-- <textarea> doesn't have a value attribute  -->

3. Route config

1) HTML doesn't support PUT method via

<form class="ui form" action="/blogs/<%=blog._id%>?_method=PUT" method="POST">	https://webdevbootcamp-mjkog.run.goorm.io/blogs/5f7597099aba501f1e2503e0?blog%5Btitle%5D=Person+in+black+t-shirts+with+%3Cstrong%3E%3C%2Fstrong%3E+tag+test-1&blog%5Bimage%5D=https%3A%2F%2Fimages.unsplash.com%2Fphoto-1601408656579-bd835432e773%3Fixlib%3Drb-1.2.1%26ixid%3DeyJhcHBfaWQiOjEyMDd9%26auto%3Dformat%26fit%3Dcrop%26w%3D934%26q%3D80&blog%5Bbody%5D=Fourth+Edited+text+">

<form>태그의 method는 POST임에도 실제 전달된 Request Method는 GET임을 알 수 있다.

 

2) How to solve?

a) Install method-override

b) forcely convert mehod as put using "?_method=PUT"

<form class="ui form" action="/blogs/<%=blog._id%>?_method=PUT" method="POST">

action 속성으로 전달되는 부분에 ?_method=PUT을 하드코딩한 후 methodOverride framework를 사용한다.

3) Insert method-override

// app.js 에 추가
methodOverride = require("method-override"), // call method-override so that method="POST" can be used

 

a) express서버가 요청받은 url에 "_method" 의 syntax가 있을 경우 자동으로 적용

 app.use(methodOverride("_method")); //url에 있는 argument에 "_method"가 있을 경우 사용됨

 

4) find existing data and update that data

app.put("/blogs/:id", (req, res) => {
	// 3) use sanitize for preventing <script> attact
	req.body.blog.body = req.sanitize(req.body.blog.body);
	// 1) connection test
	// res.send("UPDATE ROUTE!")
	// 2) find existing data and update that data 
	Blog.findByIdAndUpdate(req.params.id, req.body.blog, (err, updatedBlog) => {//findByIdAndUpdate(id, newData, callback) takes three arguments 
		if(err){
			console.log(err);
			res.redirect("/blogs")
		} else {
			res.redirect("/blogs/" + req.params.id);
		}
	}) 
})

a) Blog.findByIdAndUpdate()

: 이름처럼 실제로 findById로 DB를 조회한 후 Update를 시키는 메소드이다.

b) Blog.findByIdAndUpdate(id, newData, callback) takes three arguments

: findByIdAndUpdate는 3개의 arguments를 가지며, 사용되는 형태는 아래와 같다.

Blog.findByIdAndUpdate(req.params.id, req.body.blog, (err, updatedBlog) => {//findByIdAndUpdate(id, newData, callback) takes three arguments 
	if(err){
		console.log(err);
		res.redirect("/blogs")
	} else {
		res.redirect("/blogs/" + req.params.id);
	}
}) 

 

5) findByIdAndUpdate 사용 시 에러 관련 :

(node:11676) DeprecationWarning: Mongoose: `findOneAndUpdate()` and `findOneAndDelete()` without the `useFindAndModify` option set to false are deprecated. See: https://mongoosejs.com/doc s/deprecations.html#findandmodify

a) node js에서 호출하는 부분에 옵션 추가

mongoose.connect("mongodb://localhost:27017/restful_blog_app", {useNewUrlParser: true, useUnifiedTopology: true, useFindAndModify: false}); 부분을 app.js에 추가한다.