[패스트캠퍼스 수강 후기] 파이썬 인강 100% 환급 챌린지 20 회차 미션

2020. 11. 21. 11:54ㆍCoding/Python-Fastcampus

728x90

03. View - 04. 상품 목록 만들기 (1)

코드를 다 적는건 별 의미가 없는거 같아서 중요 부분만 정리.

humanize 활용.

1
2
3
4
5
6
7
8
9
10
11
12
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django.contrib.humanize',
    'fcuser',
    'order',
    'product',
]
 cs

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
{% 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 object_list %}
                <tr>
                    <th scope="row">{{ product.id }}</th>
                    <th scope="row">{{ product.name }}</th>
                    <th scope="row">{{ product.price|intcomma }} 원</th>
                    <th scope="row">{{ product.register_date|date:'Y-m-d H-i' }}</th>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
 
{% endblock %}
 cs

settings.py에 'django.contrib.humanize' 등록을 하면 사용할 수 있다.

html에서 {% load humanize %}로 불러와서 [shift+\]를 눌러서 사용하는 | 기호 이후에 명령어를 입력해서 사용한다.

{{ product.price|intcomma }} 1000단위 구분 ,콤마를 찍어준다.

 

Built-in template tags and filters 사용한 화면

 

명령어는 아래 공식문서에서 확인

docs.djangoproject.com/en/3.1/ref/templates/builtins/

 

Built-in template tags and filters | Django documentation | Django

Django The web framework for perfectionists with deadlines. Overview Download Documentation News Community Code Issues About ♥ Donate

docs.djangoproject.com

 

 

 

03. View - 05. 상품 등록하기 (1)

변수 오타 수정.

다른 IDE와 마찬가지로 ctrl+shift+r로 replace기능을 이용해주면된다.

하지만 migration기능 때문에 무조건 다 바꾸면안되고,

forms.py나 models.py처럼 작성한 부분만 수정한다.

>python manage.py makemigrations

>python manage.py migrate

해주면 migrations 폴더에 init파일이 자동으로 추가되며 수정 사항이 반영된다.

 

 

기존 models활용해서 forms만들고,

html만들고,

views로 연결시키고,

urls에 등록하는것까지 동일.

 

register_product.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
{% extends "base.html" %}
 
{% block contents %}
 
    <div class="row mt-5">
        <div class="col-12 text-center">
            <h1>상품등록</h1>
        </div>
    </div>
    <div class="row mt-5">
        <div class="col-12">
            {{ error }}
        </div>
    </div>
 
    <div class="row mt-5">
        <div class="col-12">
            <form method="POST" action=".">
                {% csrf_token %}
                {% for field in form %}
                <div class='form-group'>
                    <label for="{{field.id_for_label}}">{{ field.label }}</label>
                    {% ifequal field.name 'description' %}
                    <textarea class="form-control" id="{{ field.id }}" placeholder="{{ field.label }}" name="{{ field.name }}"></textarea>
                    {% else %}
                    <input type="{{ field.field.widget.input_type }}" class="form-control" id="{{ field.id }}" placeholder="{{ field.label }}" name="{{ field.name }}" />
                    {% endifequal %}
                </div>
                {% if field.errors %}
                <span style="color: red;">{{ field.errors }}</span>
                {% endif%}
                {% endfor %}
                <button type="submit" class="btn btn-primary">등록</button>
            </form> 
        </div>
    </div>
{% endblock %}
 
 cs

{% ifequal field.name 'description' %} ~ {% else %} ~ {% endifequal %} 부분 중요.

field.name을 분기로 태그를 바꾼다.

 

결과.

 

 

03. View - 06. 상품 등록하기 (2)

base.html파일 관리.

settings.py

'APP_DIRS': True 로 표시가 되어있으면, 

html에서 {% extends "@@@.html" %}로 찾을때, 모든 app의 templates폴더를 참조한다.

 

그렇기 때문에 product의 base.html은 필요가 없다.

 

 

 

 

summernote 사용하기 1.

summernote.org/

 

Summernote - Super Simple WYSIWYG editor

 

summernote.org

 

 

 

Download는 필요없고, easy to install로 가서 CDN을 살펴본다.

summernote.org/getting-started/#for-bootstrap-4

 

Summernote - Super Simple WYSIWYG editor

Get Summernote

summernote.org

현재 bootstrap4를 사용중이므로 이쪽을 참고.

 

 

summernote 사용하기 2.

base.html에 필요한 header 추가하기

base.html을 만들어서 여러 html에서 참조하는데,

특정 페이지에서는 특정 header가 필요한 경우가 있다.

 

이를 위해서 {% block header %} ~ {% endblock %} 를 사용하면된다.

block header 등록.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>
 
    {% block header %}
    {% endblock %}
 
</head>
 
<body>
    <div class="container">
        {% block contents %}
        {% endblock %}
    </div>
</body>
 
</html>
 cs



 

block header 사용.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
{% extends "base.html" %}
 
{% block header %}
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
<script>
    $(document).ready(function() {
        $('#id_description').summernote();
    });
  </script>
{% endblock %}
 
{% block contents %}
    <div class="row mt-5">
        <div class="col-12 text-center">
            <h1>상품등록</h1>
        </div>
    </div>
    <div class="row mt-5">
        <div class="col-12">
            {{ error }}
        </div>
    </div>
 
    <div class="row mt-5">
        <div class="col-12">
            <form method="POST" action=".">
                {% csrf_token %}
                {% for field in form %}
                <div class='form-group'>
                    <label for="{{field.id_for_label}}">{{ field.label }}</label>
                    {% ifequal field.name 'description' %}
                    <textarea class="form-control" id="{{ field.id_for_label }}" placeholder="{{ field.label }}" name="{{ field.name }}"></textarea>
                    {% else %}
                    <input type="{{ field.field.widget.input_type }}" class="form-control" id="{{ field.id }}" placeholder="{{ field.label }}" name="{{ field.name }}" />
                    {% endifequal %}
                </div>
                {% if field.errors %}
                <span style="color: red;">{{ field.errors }}</span>
                {% endif%}
                {% endfor %}
                <button type="submit" class="btn btn-primary">등록</button>
            </form> 
        </div>
    </div>
{% endblock %}
 
 cs


이처럼 필요한 html에서 block header를 불러오면 base.html의 header부분에 접근이 가능해진다. 

 

 

summernote 사용하기 3.

summernote가 너무 작으므로 높이를 키운다.

1
2
3
4
5
6
7
8
9
10
11
{% block header %}
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
<script>
    $(document).ready(function() {
        $('#id_description').summernote({
            height: 300
        });
    });
  </script>
{% endblock %}
 cs

 

 

 

 

결과.

등록까지 정상적이고,

이미지는 base64로 변환되어 등록되어있다.

 

 

 

 

 

올인원 패키지 : 파이썬 웹 개발👉https://bit.ly/33a7nvc

 

 

728x90
저작자표시 비영리 변경금지

'Coding > Python-Fastcampus' 카테고리의 다른 글

[패스트캠퍼스 수강 후기] 파이썬 인강 100% 환급 챌린지 22 회차 미션  (0) 2020.11.23
[패스트캠퍼스 수강 후기] 파이썬 인강 100% 환급 챌린지 21 회차 미션  (0) 2020.11.22
[패스트캠퍼스 수강 후기] 파이썬 인강 100% 환급 챌린지 19 회차 미션  (0) 2020.11.20
[패스트캠퍼스 수강 후기] 파이썬 인강 100% 환급 챌린지 18 회차 미션  (0) 2020.11.19
[패스트캠퍼스 수강 후기] 파이썬 인강 100% 환급 챌린지 17 회차 미션  (0) 2020.11.18

관련글

티스토리툴바