전자상거래 웹사이트 만들기 2

이번에는 전자상거래의 목록 페이지를 만들어보자

 

먼저 path('item/', views.item_list), 부분을 주석해제 한다.

 

그리고 views.py의 item_list 함수를 구현해보자

item_list로 request가 오면 item_list.html파일로 render할 수 있도록 작성했다,

그러나 우리는 item_list.html파일이 없으므로 이것도 작성해보자

 

 

우선 다음과 같은 구조로 templates폴더와 store폴더를 만든다.

그리고 base.html은 여러페이지의 베이스가 되는 페이지로 이용할 것이다.

이러한 구조를 통해 여러 html파일에서 중복되는 코드없이 작성할 수 있다.

 

base.html

item_list.html

item_list.html은 base.html을 상속받기 위해 {% extends './base.html' %}를 작성했다.

 

 

이제 우리는 모델에 있는 데이터를 views.py에서 처리를 통해 html파일로 보내 출력해야 한다.

따라서 views.py를 수정해보자

models에 Item클래스을 import하고 그 모든 객체들을 items 변수에 담아서 render를 통해 item_list.html 파일로 넘겨준다.

 

 

그리고 item_list.html 파일을 아래처럼 수정한다.

물품의 이름, 설명, 판매된 날짜가 출력되도록 하였다.

 

 

 

 

 

이제 각 물품에 대한 상세 페이지를 만들어보자

urls.py에서 'path('item/<int:item_id>/', views.item_detail),' 부분을 주석해체 한다.

 

views.py에서 item_detail 함수를 만들자

두번째 인자로 item_id를 받는 이유는 url에서 <int:item_id>로 값을 넘겨주었기 때문이다.

그리고 get 메소드로 item_id에 해당하는 데이터 item변수에 받아서 render를 통해 item_detail.html파일로 넘겨준다.

 

 

 

item_detail.html도 만들어보자

item_detail.html은 base.html를 상속받는다.

줄바꿈이 \n으로 이루어진 문자열이 있을떼 html에선 <br>로 줄바꿈을 하기에 linebreaksbr 을 통해 자동적으로 \n을

<br>로 바꿔지도록 하였다.

 

 

이제 리스트 페이지에서 항목을 클릭하면 세부 항목 페이지로 넘어가기 위한 작업을 해보자

먼저 각 url에 name을 설정한다.

 

그리고 item_detail.html부분에 리스트로 돌아가는 url를 a테그로 추가한다.

 

 

item_list.html파일에는 각 품목들의 세부사항을 보는 url를 추가한다.