블로그 만들기(5) - 게시판 기능 만들기(상세페이지, 삭제 , 수정)

게시글 작성하는기능, 작성한거 보여주는기능 만들었으니깐

게시물 클릭하면, 상세페이지로 이동하고

게시글 마다 삭제 수정이 가능하도록 만들어 보겠습니다.

 

상세페이지 기능을 만들기 전에 기능설명 부터 해보자면..

 

1. 게시글의 제목을 클릭하면 get요청을 통해서 상세페이지로 이동하기

2. 보여줄 상세페이지를 만들기

이거면 끝날것 같네요

 

1. 게시글의 제목을 클릭하면 get 요청을 보내기 위해서 <a> 태그로 링크를 걸면 될것 같은데

 

 

이런식으로 걸면 될듯, detail 요청을 게시글마다 다르게 해줘야 다른 페이지를 보여줄탠데

이것도 URL 파라미터 문법 사용하면 될듯합니다.

 

이렇게하면 get 요청을 <a>태그로 하는 형태가 되는데

<a> 태그로 document 의 _id를 detail:/_id 형태로 get요청 하고

findOne()으로 _id 가  req.prams.id와 일치하는걸 찾아서 detail.ejs 페이지에 result 변수에 정보를 담아서 보내주면 될듯합니다.

 

detail.ejs 하나 만들어보면

 

요렇게 파라미터 id 랑 게시글의 _id랑 일치하는것 찾아서 보여주면 될듯합니다.

 

 

gpt  한테 detail.ejs 페이지 를 요청해두면

 

상세페이지 제작은 끝난것 같습니다.

 

그다음 삭제, 수정기능 만들면 될듯합니다.

 

수정기능 먼저 설명 해보면

1. 게시글의 수정버튼을 누르면 수정페이지로 이동하기

2. 수정페이지에서 수정완료 버튼을 누르면 내용이 수정되도록 함

 

 

수정페이지 먼저 한개 만들어보면 edit.ejs 라는 파일 veiws 폴더에 추가하면 되겠죠

그런데 구조적으로 write.ejs랑 굉장히 유사할것 같군요 write.ejs 파일 내용 복사해서 붙여넣고 시작하겠습니다.

 

input 칸에 작성되어 있는 내용이 들어있면 좋겠죠?

value="" 속성 이용해서 기존 값을 채워둡니다. 그런데 채워주려면 데이터가 필요하겠죠?

상세 페이지에서 수정 버튼 누를떄 <a> 태그 이용해서 보내주면 될것 같습니다.

 

이러면 req.prams.id 자리에 result._id가 남는데 이걸 이용해서

 

현재 수정하려는 게시물의 document 를 찾아서 result변수에 담아서 edit.ejs 파일에 보내줍니다.

 

수정페이지에서 value 속성을 채워줘서 수정페이지에 이동했을때 내용이 미리 채워줄수 있겠네요.

 

textarea 태그에 value 쓰니깐 안되서 검색해봤는데, textarea에 값을 채워넣을면 태그 사이에 넣고 싶은 값을 채워주면 됩니다.

 

이제 수정하기 버튼을 누르면 form 태그를 이용해서 /edit/submit/result._id 로 post 요청 해줄겁니다.

그럼 /edit/submit/result._id 요청을 받았을때 db내용을 수정만 해주면 될것 같습니다.

 

updateOne() 함수를 이용해서 _id가 req.prams.id와 같은 게시물의 내용을 업데이트 해주면

 

글 수정 기능이 잘  동작하네요.

 

이제 삭제기능을 만들어 보겠습니다.

 

기능설명 먼저하면

 

1. 상세페이지 들어가서 삭제버튼을 누르면

2. 게시물의 _id 찾아서 db에서 삭제해주면 끝날것 같군요

 

먼저 디테일 페이지에서 삭제버튼 먼저 만들어봅시다.

 

이제 삭제버튼을 누르면 /delete/result._id 로 get요청을 해주고

 

그럼 server.js에서 get요청을 처리해주면 되겠군요

 

deleteOne() 을 이용해서 db에서 _id와 일치하는 게시물을 삭제하면 되겠군요.

이제 잘 기능이 동작하나 살펴봅시다.

삭제 기능도 잘 동작하는군요

 

수정, 삭제 버튼 UI도 GPT에게 스타일링을 맡겨봅니다.

 

다음포스팅은 로그인, 회원가입 기능을 활성화 해보고

글쓰는데 조건부를 걸어보는것도 좋겠군요.

 

로그인 기능을 활성화 하고 나면

게시글의 상세페이지에서, 수정하기와 삭제하기를 작성자만 가능하도록 바꾸는것이 가능하겠군요

아예 수정하기와 삭제하기를 작성자만 보이도록 수정해 보는것도 좋아보이네요.