Django2 (7. 상품목록 만들기) feat.페스트캠퍼스

상품목록 만들기

01. product에 views.py 입력하기!

from django.shortcuts import render
from django.views.generic import ListView
from .models import Product
# Create your views here.


class ProductList(ListView):
    model = Product

02. root 폴더에 urls.py 수정!

from django.contrib import admin
from django.urls import path
from fcuser.views import index, RegisterView, LoginiView
from product.views import ProductList

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', index),
    # class는 .as_view()를 입력!
    path('register/', RegisterView.as_view()),
    path('login/', LoginiView.as_view()),
    path('product/', ProductList.as_view()),
]

03. fcuser에 template을 product에 복붙하기!

04. product에 product.html 생성 및 입력

{% extends "base.html" %}
{% block contents %}
Product
{% endblock %}

05. product에 views.py 수정

from django.shortcuts import render
from django.views.generic import ListView
from .models import Product
# Create your views here.


class ProductList(ListView):
    model = Product
    template_name = 'product.html'

06. 실행해보기!

07. product.html에 리스트 출력!

{% extends "base.html" %}
{% block contents %}
{% for product in object_list %}
{{product.name}} : {{product.price}}
{% endfor %}
{% endblock %}


object_list를 product_list로 변경!(views.py)

from django.shortcuts import render
from django.views.generic import ListView
from .models import Product

# Create your views here.


class ProductList(ListView):
    model = Product
    template_name = 'product.html'
    # object_list로 사용하기 싫으면 context_object_name으로 변경 가능
    context_object_name = 'product_list'

{% extends "base.html" %}
{% block contents %}
{% for product in product_list %}
{{product.name}} : {{product.price}}
{% endfor %}
{% endblock %}

08. product에 product.html에 table 생성

{% extends "base.html" %}
{% block contents %}
<div class="row mt-5">
    <div class="col-12">
        <table class="table table-light">
            <thead class="thead-light">
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">상품명</th>
                    <th scope="col">기격</th>
                    <th scope="col">등록날짜</th>
                </tr>
            </thead>
            <tbody class="text-dark">
                {% for product in product_list %}
                <tr>
                    <th scope="row">{{product.id}}</th>
                    <th>{{product.name}}</th>
                    <th>{{product.price}}</th>
                    <th>{{product.register_date}}</th>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}


09. product에 product.html에 humanize 활성화!

1. root 폴더 settings.py에 humanize 활성화

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django.contrib.humanize',
    'fcuser',
    'product',
    'order',
]

2. product.html 수정하기!

{% extends "base.html" %}
<!-- 필터를 사용할 수 있게 해준다 -->
{% load humanize%}
{% block contents %}
<div class="row mt-5">
    <div class="col-12">
        <table class="table table-light">
            <thead class="thead-light">
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">상품명</th>
                    <th scope="col">가격</th>
                    <th scope="col">등록날짜</th>
                </tr>
            </thead>
            <tbody class="text-dark">
                {% for product in product_list %}
                <tr>
                    <th scope="row">{{product.id}}</th>
                    <th>{{product.name}}</th>
                    <th>{{product.price|intcomma}}원</th>
                    <th>{{product.register_date|date:'Y-m-d H:i'}}</th>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}

date : https://docs.djangoproject.com/en/3.1/ref/templates/builtins/

좋은 웹페이지 즐겨찾기