220130 TIL

CoderS·2022년 1월 30일
0

TIL DAY 169

오늘 배운 일

✔️ Django 웹 개발

1. 포스트 수정 페이지

이번에는 글 수정 기능을 만들어보도록 하겠다.

게시글 상세 페이지로 가면 오른쪽 하단에 수정하기 버튼을 만들어주겠다.

그리고 해당 수정하기 버튼을 누르면 글쓰기 화면이랑 똑같은데 기존의 내용이 들어가져 있을 것이다.

그리고 작성완료를 누르면 수정이 되도록 만들어보겠다.

그럼 바로 구현해보도록 하겠다.

모든 기능의 시작은 urls.py 이다.

post_update 를 구현할 것이니까 해당 줄을 주석 해제한다.

urls.py

주석 해제하기 전...

해제한 후...

다음으로 네임을 추가해주도록 하겠다.

URL 구조를 보면 post_id 그 다음에 edit 을 해주면 post_update 뷰를 불러오는 그런 구조가 되겠다.

다음으로 글 상세 페이지인 post_detail.html 로 가본다...

그 다음에 아래쪽에 클래스 btn_list 를 가진 div 태그 밑에다가 수정하기 버튼을 하나 만들어줄건데 a 태그로 만들어준다.

post_detail.html

그리고 CSS 또한 한번 적용해보겠다.

다음과 같이 코드를 작성해준다.

그리고 div 태그를 하나더 만들어서 또 감싸준다.

이렇게 템플릿은 끝이다.

스타일을 적용하는 것을 제외하면 a 태그를 하나 만들어줄 준건데 다음으로는 뷰를 작성해보겠다.

views.py 로 가서 아래쪽에 def 해주고 post_update 을 만들어준다.

views.py

그럼 어떤 로직을 구현해야 할지 생각해보자!

상세 글 페이지에서 수정하기를 누르면 이 post_update 뷰로 들어오는데 일단 글 작성 페이지를 보여주긴 하는데 아무것도 없는 상태가 아니라 수정할려고 하는 기존의 글이 있어야한다.

그럼 먼저 보여줄 포스트의 데이터를 가져와야겠다.

다음과 같이 코드를 작성해준다.

자 이제 이 데이터를 글 작성 페이지에 보여주면 되는데 글 작성 페이지는 폼 기반의 페이지였다.

생각해 보면 글 수정도 글 작성과 마찬가지로 사용자의 입력을 받는 거니까 폼을 만들어주면 된다.

post_form 이라는 변수에 PostForm() 이렇게 해서 빈 폼을 생성해주고 다음에 이 빈 폼에다가 우리가 가져온 데이터를 넣어야 한다.

이럴 때 사용하는게 기존의 모델을 폼에 넘겨주는 인자로 안에다가 instace 해주고 post 를 넣어준다.

이런 식으로 코드를 작성하면 포스트 데이터가 폼에 바운드된 상태로 폼이 만들어지겠다.

그리고 나서 return 해주고 render 한 다음에 request 해주고 posts/post_form.html 그 다음에 form 에다가 post_form 을 담아서 보내주도록 하겠다.

그래서 이렇게 생성된 폼을 글 작성 템플릿으로 넘겨주면 된다.

이런 식으로 작성을 해주면 이제 유저가 업데이트 URL 인 posts/post_id/edit 으로 요청을 보내면 기존의 글을 가져와서 폼에 넣어주는 로직이 완성됐다.

그럼 이제 유저가 폼에 있는 데이터를 수정을하겠다.

그러면은 이 다음에 해줘야 되는 건 수정된 글을 저장하는 걸 만들어주면 된다.

한 번 해보겠다!

유저가 글 작성 버튼을 누르면 POST 방식으로 요청이 들어오겠다.

그리하여 코드 위에서 작성했던 create 와 비슷하게 하면 된다.

다음과 같이 따라 작성해준다.

이 때 새로운 모델 객체를 갖는 폼을 생성하는게 아니라 기존에 작성되었던 Post 모델 인스턴스와 수정된 데이터를 갖는 폼을 만든다.

이 부분이 수정하기 기능의 핵심이다!

다음으로 유효성 검증도 해줘야한다.

따라서 코드를 작성해준다.

이제 POST 가 아닌 GET 방식 즉 상세 페이지에서 글 수정하기를 눌러서 처음 들어온 상태라면 아래에 적어주었던 else 부분을 작성해주고 인덴테이션을 맞춰주도록 해준다.

else 구문을 설명하자면 GET 방식일 때를 나타내는데 GET 방식일 때는 사용자가 데이터를 수정할 수 있도록 폼을 생성해서 제공하는데 이때 아무것도 없는 빈 폼이 아니라 기존 모델의 데이터를 가져와서 채운 상태에 폼을 제공을 하는 것이다.

이것으로 글 수정 기능이 다 완료되었다.

이제 서버를 실행해서 확인해주도록 해준다.

터미널을 켜서 다음과 같이 커맨드를 입력해준다.

python3 manage.py runserver

http://127.0.0.1:8000/posts/1/

하나의 포스트를 눌러주면 수정하기 버튼이 생겨있는걸 확인할 수 있다.

그리고 수정하기 버튼을 눌러주고 제목과 내용을 수정해준다.

수정하기 전...

수정한 후...

작성완료 버튼을 누르면...

이렇게 수정된 걸 확인할 수 있다.

끝으로 :

  • 오늘은 수정하기 기능을 구형해보았다.
  • 앞에서 배운대로 기존의 ModelForm 을 이용해서 GET 과 POST 로 나누어 구현하면 되는데 딱 하나 데이터를 기존의 데이터베이스에서 가져와서 보여주고 저장하는 점이 달랐다.
profile
하루를 의미있게 살자!

0개의 댓글