2.6.2 사진 게시물 보기 화면 만들기

이제 사진 제목을 눌렀을 때 각 사진에 대한 세부 정보 페이지를 만들어보겠습니다. 

마찬가지의 단계를 거치면 되는데요!

 

템플릿 

photo_detail.html 파일을 아래와 같이 만들었습니다. 

+description 추가됨

 

 

뷰

템플릿 다음은 뷰 였습니다. 일단 views.py에 함수를 추가하는 것으로 시작하겠습니다. 

 

URL

 

다시 runserver를 해서 확인해봅시다. 

 

사진 제목을 클릭하면 위처럼 화면이 이동됩니다. 

 

 

2.6.3 사진 게시물 작성 기능 만들기

사진 게시물을 사용자가 직접, 

즉 관리자 페이지를 거치지 않고 작성할 수 있도록 하는 게시물 작성 기능을 만들어보겠습니다. 

게시물을 작성하는 단계에서는 폼이라고 하는 기능을 추가적으로 배워보겠습니다. 

 

템플릿

 

 

폼은 사용자가 데이터를 입력하면 서버로 보내도록 도와주는 양식입니다. 

사용자는 이 양식을 채워서 POST방식으로 요청을 보내면

서버에서는 해당 요청을 받아 처리하게 됩니다. 

 

 

폼

폼은 앱 폴더 내에 forms.py 파일을 추가하여 만듭니다. 

앞서 모델을 만들 때와 조금 비슷한데, django의 기본 ModelForm을 상속받아 아래의 필드 값을 입력 받는 폼을 

PhotoForm 클래스로 만들었습니다. 이제 이 폼이 어떻게 동작할 지 알아보기 위해 다음 단계로 넘어가겠습니다. 

 

 

뷰

뷰에 마찬가지로 photo_post()라는 함수를 만들어보겠습니다. 

 

뷰에 꼬ㅐ 많은 변화가 있었습니다!

1. redirect를 새롭게 사용하고 있습니다. 

-> 말 그대로 리다이렉트, 다시 다른 페이지로 이동시켜주는 함수입니다. 

2. 아까 만든 PhotoForm 클래스를 가져옵니다. 

 

3. Photo_post()함수의 내용 

- 조건문으로 들어온 요청이 POST인지 확인합니다. 

    : 우리가 일반적으로 웹 브라우저에서 페이지로 접속하는 요청은 GET요청이기 때문에 POST요청을 보낸다는 것은?

    -> 아까 만든 템플릿의 폼에 있는 버튼이 눌렸다는 뜻입니다. 즉 사용자가 사진 게시물을 만들어 올리겠다는 뜻이죠.

 

- 요청으로 들어온 폼 데이터를 form이라는 변수에 받아와 폼에 맞춰 잘 작성된 데이터인지 검사합니다. 

    : 이는 장고에서 제공해주는 기능입니다. 

 

 

4. 검사 결과 잘 작성되었다면 photo라는 변수에 form에서 나온 데이터를 받아와 photo.save()로 저장해줍니다. 

-> 이 과정만으로 데이터베이스에 해당 데이터가 저장됩니다. 

    : 저장까지 마쳤으면? 해당 게시글의 세부 페이지로 이동시켜줍니다.

    : 새롭게 저장된 photo의 pk로 말이죠

 

 

5. 만약 POST 요청이 아니었다면?

: 새롭게 해당 페이지로 들어온 사용자일테니 폼을 제공하여 맞이합니다. 

: form을 선언하고, 마지막줄의 render() 함수로 아까 만든 템플릿과 form을 넘겨주어 사용자가 입력할 수 있는 화면을 보여줍니다. 

 

 

6. 검사 결과가 잘 작성되지 않은 경우

: redirect()로 가지 않고 맨 밑에 있는 render() 로 가게 됩니다. 

-> 검사 결과 잘 작성되지 않은 폼의 경우 다시 작성하라는 뜻에서 빈 폼페이지를 다시 보여주게 될 것입니다. 

 

 

URL

이제 URL을 설정하고 템플릿에서 사진 게시글 추가를 위한 링크 설정을 할 차례 입니다. 

이제 템플릿을 수정하며 마무리 해보겠습니다. 

새로운 사진 게시물을 작성하기 위한 링크는 메인 화면에 있는게 좋겠습니다. 

photo_list.html을 열어 다음 내용을 추가합니다.

 

 

이제 모든 과정이 마무리 되었습니다. 

웹 브라우저에서 확인해보겠습니다. 

 

---

오류가 발생했다. 

from .forms import PhotoForm 

줄이 문제인 것 같다.

여기서 7번째 줄 new 뒤에 /빠져있어서 추가했다 이게 문제 였을까?

 

photo에서 forms가 없다는 거 같은데

노란색 밑줄이 쳐 있는 걸 볼 수 있다. 

 

아, 이게 문제인듯

forms.py의 위치가 쌩뚱맞다.

 

위치를 옮겨주었더니 제대로 실행이 된다. 

New Photo 링크가 생겼고, 

링크를 누르면,,

myweb에서 urls.py 파일이 문제인 모양

 

여기는 문제가 없는데, 

뭐지

오타가 있었다!

url 앞에 % 까먹었음

 

 

폼 입력 화면이 나오게 됩니다. 

 

 

내용을 다 채운 다음 완료를 누르면 

다음과 같이 사진이 새로 등록되면서

해당 사진에 대한 세부 화면이 나오는 것을 확인할 수 있습니다. 

 

폼을 활용한 사진 게시물 작성 기능이 완료되었습니다. 

조금 복잡했지만 그래도 잘 해냈습니다. 

이제 마지막 기능인 게시물 수정 기능을 만들겠습니다. 

 

 

 

2.6.4 사진 게시물 수정 기능 만들기

게시물 수정 기능은 게시물 작성 기능과 상당 부분 겹치고 비슷합니다. 

빈 폼에 새로 입력받는 것이라면 작성, 

기존 데이터가 폼에 있는 상태에서 입력하는 것은 수정입니다. 

그럼 기능을 구현해 보도록 하겠습니다. 

 

템플릿

수정 기능은 작성 기능과 템플릿이 동일합니다. 

비워져있는 폼에 데이터만 채우면 수정 기능이 되기 때문에 템플릿은 별도로 작성할 필요 없이

기존 photo_post.html을 그대로 이용하겠습니다. 

 

 

뷰

뷰 역시 작성 기능과 유사합니다. 

다만 몇가지 다른 부분이 있는데, 

코드를 먼저 살펴보겠습니다. 

 

1. 수정할 대상을 pk로 찾아옵니다. 

2. 들어온 요청이 POST인지 GET인지 판단하여 수정을 의미하는 POST요청이 들어왔을 때 폼으로 전달된 데이터를 판단하게 됩니다. 

3. instance를 photo로 설정해주어 수정 대상이 될 데이터를 설정합니다. 

4. GET요청이 들어오거라도 photo 데이터를 폼에 담아서 photo_post.html에 넘겨주어 기존 데이터를 수정할 수 있도록 처리해줍니다. 

 

URL

'

마찬가지로 pk값을 URL에 넣어 구분하는 것을 확인할 수 있습니다. 

이제 다음은 photo_detail.html을 열어 수정 기능을 세부 화면에 추가하겠습니다. 

 

+ photo_edit.html을 복사 붙여넣기해서 만들어줌 

 

 

 

edit photo를 누르면, 

작성되어 있는 채로 나옵니다. 

금액을 10000원으로 수정하고 완료를 누르겠습니다.

 

 

완료를 누르면 해당 사진의 세부 화면으로 넘어오며 금액이 수정된 것을 볼 수 있습니다. 

 

 

 

2.6.5 예시 마무리 하기

장고의 기본적인 구조를 모두 배워보았습니다. 

장고로 웹을 개발할 때 알아야 할 구조와 기본기는 모두 배우게 된 것 같습니다. 

 

 

 

 

 

 

https://link.coupang.com/a/UtMUo

백엔드를 위한 Django REST Framework with 파이썬

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."