중고거래 사이트 만들기 5

지난번에는 홈페이지를 만들었고 홈페이지에는 게시글 목록들이 표시되었다.

이번에는 게시글의 상세 페이지를 만들어보자

 

상세 페이지에는 물품 사진, 게시글 제목, 물품 가격, 물품 상태, 게시글 작성일, 작성자 정보 (나중에 작성자 정보 박스를 클릭하면 작성자의 프로필로 이동한다), 그리고 물품에 대한 상세 설명이 있다.

 

먼저 urls.py에서 상세 페이지의 url설정을 한다.

 

그리고 views.py에서 generic의 DetailView를 이용해서 상세 페이지의 로직을 만들자

우리는 게시글 id 파라미터의 이름을 post_id로 지어줬기 때문에 pk_url_kwarg를 'post_id'로 설정했다.

 

마지막으로 post_detail.html 파일만 완성하면 된다.

아래 파일을 다운로드해서 templates폴더의 winwinmarket 폴더안에 넣고 몇가지 부분을 수정하자

post_detail.html

0.00MB

 

 

 

 

post_detail.html의 코드를 보면 img 태그가 3개가 있다.

image1은 필수지만 image2, image3은 필수가 아니다. 

이미지가 있을 때만 img 태그가 디스플레이되도록 아래 img 태그 2개는 if 문 안에 넣어준다.

이미지 url은 .url 속성으로 접근할 수 있다.

 

나머지 게시글 정보도 채워넣는다.

게시글 제목: {{ post.title }}
10,000원: {{ post.item_price|intcomma }}원
상태 중: 상태 {{ post.item_condition }}
2021.05.11: {{ post.dt_created|date:"Y.m.d" }}
유저1: {{ post.author.nickname }}
kakaouser1: {{ post.author.kakao_id }}
서울시 용산구: {{ post.author.address }}
물품 상세 설명: {{ post.item_details|linebreaksbr }} 
HTML에서는 줄바꿈 문자열('\n')이 인식되지 않는다. 
따라서 |linebreaksbr 필터로 줄바꿈을 시켜준다.

 

 

마지막으로 '목록으로' 링크에 홈페이지 URL을 넣어주고 

index.html 파일의 '자세히보기' 링크에 상세 페이지의 url를 넣는다.

그럼 이제 상세 페이지가 잘 동작한다.

 

 

 

 

 

이번에는 게시글 작성 페이지를 만들어보자

먼저 urls.py에서 url을 정의한다.

그리고 index.html에서 글쓰기 링크에 url을 넣는다.

 

 

새 게시글 작성은 폼 태그로 부터 데이터를 받기 때문에 장고 폼 클래스를 정의해야 한다.

Post 모델의 모든 필드를 폼에 넣지 않았다.
생성 시간(dt_created), 수정 시간(dt_updated)은 자동으로 입력이 되고
게시글 작성자(author)는 나중에 직접 자동으로 등록시키도록 코드를 수정할 것이다.

물품 상태 필드에는 Select 대신 RadioSelect 위젯이 사용할 것이다. 필드의 디폴트 위젯을 오버라이드하려면 widgets 

속성에 사용하고 싶은 위젯을 써 주면 된다.

 

이제 게시글 작성 로직을 만들기 위해 views.py로 이동하자

이 로직은 generic의 CreateView를 이용하면 쉽게 작성 가능하다.

폼 클래스는 PostForm을 이용하고
게시글을 성공적으로 생성하면 리디렉트되는 페이지를 설정하기 위해서 get_success_url 메서드를 정의했다.
reverse 함수를 써서 게시글 상세 페이지의 URL을 리턴해 줬는데, URL에 파라미터가 들어가면 
파라미터를 kwargs 옵션을 통해 넣어 줄 수 있다.
생성된 게시글의 id를 전달해 줘야 하는데 CreateView에서 생성된 게시글(오브젝트)는 self.object로 접근할 수 있다.

 

게시글의 author 필드를 자동으로 설정해 주는 방법은 form_valid 메서드를 오버라이딩하는 것이다.
form_valid 메서드는 폼 데이터가 유효할 때 실행되고 폼 데이터를 새로운 오브젝트에 저장해 주는 역할을 한다.
메서드를 오버라이딩으로 폼 데이터가 저장되기 전에 author 필드를 폼에 추가해 줘서 author 필드도 같이 저장된다.
author 필드를 현재 유저, self.request.user로 설정하고 return super().form_valid(form)를 통해 기존 form_valid 메서드를 호출한다.

 

 

이제 아래 파일을 다운로드 받아서 post_form.html 템플릿을 수정하자

post_form.html

0.00MB

 

 

 

제목, 판매 가격, 상세 정보에 해당하는 부분을 폼 태그를 이용해서 수정했다.

 

 

이제 이미지 필드부분을 수정하자

Django 폼 필드는 그대로 렌더하고, 오류 메시지만 올바른 곳에 추가한다.

 

그런데 실제로 이미지를 업로드하면 이미지가 서버로 제대로 전송이 안돼서 오류가 난다.
HTML 폼에서 파일을 전송할 때는 꼭 폼 태그에 enctype="multipart/form-data"를 추가해야 한다.

 

물품 상태 필드도 폼 태그를 이용해서 수정한다.

마지막으로 취소 버튼에 홈페이지의 url를 추가한다.