URL 설계

모델 코딩

Album 및 Photo 테이블에 owner 필드를 추가해준다.

owner = models.ForeignKey('auth.User', on_delete=models.CASCADE, 
                              verbose_name='OWNER', blank=True, null=True)

Album과 User 테이블 간 관계 및 Photo와 User 테이블 간 관계는 모두 N:1 관계이므로, ForeignKey로 표현한다.

모델을 변경했으므로 DB에 반영

URLconf 코딩

    # /photo/album/add/
    path('album/add/', views.AlbumPhotoCV.as_view(), name='album_add'),

    # /photo/album/change/
    path('album/change/', views.AlbumChangeLV.as_view(), name='album_change'),

    # /photo/album/99/update/
    path('album/<int:pk>/update/', views.AlbumPhotoUV.as_view(), name='album_update'),

    # /photo/album/99/delete/
    path('album/<int:pk>/delete/', views.AlbumDelV.as_view(), name='album_delete'),

    # /photo/photo/add/
    path('photo/add/', views.PhotoCV.as_view(), name='photo_add'),

    # /photo/photo/change/
    path('photo/change/', views.PhotoChangeLV.as_view(), name='photo_change'),

    # /photo/photo/99/update/
    path('photo/<int:pk>/update/', views.PhotoUV.as_view(), name='photo_update'),

    # /photo/photo/99/delete/
    path('photo/<int:pk>/delete/', views.PhotoDelV.as_view(), name='photo_delete'),

11장의 urls.py 파일과 거의 동일하지만 AlbumPhotoCV, AlbumPhotoUV 뷰가 인라인 모델 폼을 처리하는 뷰라는 점이 다르다. 즉 앨범과 사진을 한꺼번에 처리할 수 있는 폼을 출력하는 뷰이다.

뷰 코딩

11장에서는 모델폼을 사용하니까 따로 폼을 정의할 필요가 없었는데 이번엔 폼셋을 정의해야 해서 forms.py를 코딩해야 한다.

forms.py

from django.forms import inlineformset_factory

from photo.models import Album, Photo

PhotoInlineFormSet = inlineformset_factory(Album, Photo,
                                           fields=['image', 'title', 'description'],
                                           extra=2)

URLconf에서 정의한 뷰를 코딩한다.

템플릿 코딩하기

뷰 정의 시 template_name 속성을 지정하지 않았으므로 디폴트 템플릿명을 사용한다.

• 메뉴 수정을 위한 base.html
• Photo 모델에 대한 템플릿
• 인라인 모델 폼셋이 들어 있는 Album 모델에 대한 템플릿

base.html

Add - Album, Photo 링크 추가 Change - Album, Photo 링크 추가

CreateView와 UpdateView는 템플릿명이 같으므로 같은 링크 추가

<a class="dropdown-item" href="{% url 'photo:album_add'%}">Album</a>
<a class="dropdown-item" href="{% url 'photo:photo_add'%}">Photo</a>

photo/photo_form.html

Photo 레코드를 생성 or 수정하기 위한 폼을 보여주는 화면

• 앨범을 선택하는 드롭다운 박스 위젯 - Album과 Photo 테이블이 1:N 관계이므로 Photo 테이블에 대한 폼인데도 Album 테이블의 레코드를 선택할 수 있도록 해준다.

• 사진 레코드를 생성하는 폼이지만 사진이 소속될 앨범을 새로 생성할 수 있도록 해준다.

{% extends 'base.html' %}

{% load widget_tweaks %}

{% block title %}photo_form.html{% endblock %}

{% block content %}
    <h1>Photo Create/Update - {{ user }}</h1>
    <p class="font-italic">This is a creation or update form for your photo.</p>

{% if form.errors %}
    <div class="alert alert-danger">
        <div class="font-weight-bold">
            Wrong! Please correct the error(s) below.
        </div>
        {{ form.errors }}
    </div>
{% endif %}

{% if form.is_multipart %}
    <form enctype="multipart/form-data" action="" method="post" class="card pt-3">
{% else %}
    <form action="." method="post" class="card pt-3">
{% endif %}
{% csrf_token %}
    <div class="form-group row">
        {{ form.album|add_label_class:"col-form-label col-sm-2 ml-3 font-weight-bold" }}
        <div class="col-sm-2">
            {{ form.album|add_class:"form-control" }}
        </div>
        <div class="col-sm-2 my-auto">
            <a href="{% url 'photo:album_add' %}" class="btn btn-outline-primary btn-sm">
                Add Album
            </a>
        </div>
    </div>

    <div class="form-group row">
        {{ form.title|add_label_class:"col-form-label col-sm-2 ml-3 font-weight-bold" }}
        <div class="col-sm-5">
            {{ form.title|add_class:"form-control"|attr:"autofocus" }}
        </div>
    </div>

    <div class="form-group row">
        {{ form.image|add_label_class:"col-form-label col-sm-2 ml-3 font-weight-bold" }}
        <div class="col-sm-5">
            {{ form.image|add_class:"form-control-file" }}
        </div>
    </div>

    <div class="form-group row">
        {{ form.description|add_label_class:"col-form-label col-sm-2 ml-3 font-weight-bold" }}
        <div class="col-sm-8">
            {{ form.description|add_class:"form-control-file"|attr:"rows:3" }}
        </div>
    </div>

    <div class="form-group">
        <div class="offset-sm-2 col-sm-5">
            <input type="submit" value="Submit" class="btn btn-info"/>
        </div>
    </div>

</form>
{% endblock %}

post_form.html 파일과 거의 같고 업로드 기능이 들어 있다는 점만 다르다. 사진이나 일반 파일을 업로드 하는 경우에는 enctype 속성을 multipart/form-data로 지정해야 한다.

is_multipart() 메소드는 폼이나 폼셋을 미리 체크해 multipart 인코딩이 필요한지 여부를 알려준다. 반환값이 True면 enctype=multipart/form-data로 지정해야 한다. 여기서는 폼에 이미지 필드가 있으니까 True를 반환한다.

photo/photo_change_list.html

Photo 테이블의 레코드를 변경하기 위해 기존 레코드의 리스트를 보여주는 화면

{% extends 'base.html' %}

{% block title %}photo_change_list.html{% endblock %}

{% block content %}
    <h1>
        Photo Change - {{ user }}
    </h1>
    <br>

    <table class="table table-striped table-bordered table-condensed">

        <thead>
            <tr class="table-info">
                <th>Album</th>
                <th>Title</th>
                <th>Description</th>
                <th>Owner</th>
                <th>Update</th>
                <th>Delete</th>
            </tr>
        </thead>

        <tbody>
        {% for item in object_list %}
            <tr>
                <td>{{ item.album }}</td>
                <td>{{ item.title }}</td>
                <td>{{ item.description }}</td>
                <td>{{ item.owner }}</td>
                <td><a href="{% url 'photo:photo_update' item.id %}">Update</a></td>
                <td><a href="{% url 'photo:photo_delete' item.id %}">Delete</a></td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

{% endblock %}

photo/photo_confirm_delete.html

{% extends 'base.html' %}

{% block title %}photo_confirm_delete.html{% endblock %}

{% block content %}
    <h1>
        Photo Delete
    </h1>
    <br>

    <form action="." method="post">
        {% csrf_token %}
        <p>Are you sure you want to delete "{{ object }}" ?</p>
        <input type="submit" value="Confirm" class="btn btn-danger btn-sm" />
    </form>

</div>
{% endblock %}

photo/album_form.html

Album 레코드를 수정하기 위한 폼을 보여주는 화면

photo/album_change_list.html

Album 테이블의 레코드를 변경하기 위해 기존 레코드의 리스트를 보여주는 화면.

{% extends 'base.html' %}

{% block title %}album_change_list.html{% endblock %}

{% block content %}
    <h1>
        Album Change - {{ user }}
    </h1>
    <br>

    <table class="table table-striped table-bordered table-condensed">

        <thead>
            <tr class="table-info">
                <th>Name</th>
                <th>Description</th>
                <th>Owner</th>
                <th>Update</th>
                <th>Delete</th>
            </tr>
        </thead>

        <tbody>
        {% for item in object_list %}
            <tr>
                <td>{{ item.name }}</td>
                <td>{{ item.description }}</td>
                <td>{{ item.owner }}</td>
                <td><a href="{% url 'photo:album_update' item.id %}">Update</a></td>
                <td><a href="{% url 'photo:album_delete' item.id %}">Delete</a></td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

{% endblock %}

photo/album_confirm_delete.html

Album 테이블의 레코드를 삭제하기 전 확인하는 화면

{% extends 'base.html' %}

{% block title %}album_confirm_delete.html{% endblock %}

{% block content %}
    <h1>
        Album Delete 
        <small class="font-italic">
            (including related photos)
        </small>
    </h1>
    <br>

    <form action="." method="post">
        {% csrf_token %}
        <p>Are you sure you want to delete "{{ object }}" ?</p>
        <input type="submit" value="Confirm" class="btn btn-danger btn-sm" />
    </form>

</div>
{% endblock %}

출처: Django로 배우는 파이썬 웹 프로그래밍(실전편) - 김석훈님

but, 콘텐츠 생성 및 변경하는 권한을 모든 사용자에게 부여해서는 안된다.

• 콘텐츠에 대한 열람은 모든 사용자가 가능하다.
• 콘텐츠를 새로 생성하는 것은 로그인한 사용자만 가능하다. - [Add] 메뉴
• 콘텐츠를 수정, 삭제하는 작업은 그 콘텐츠를 생성한 사용자만 가능하다. - [Change] 메뉴

테이블 설계

콘텐츠에 대한 소유자를 확인해야 하므로 각 콘텐츠 테이블별로 소유자 필드가 필요하다.

Bookmark 및 Post 테이블에 owner 필드(User 테이블에 대한 외래 키)가 추가되도록 설계한다.

필드명: owner 타입: ForeignKey(User) 제약 조건: Null

URL 설계

• 콘텐츠 생성(add)
• 변경(change)
• 대상 리스트
• 수정(update)
• 삭제(delete)

Model 코딩하기

bookmark/models.py 수정

    owner = models.ForeignKey(User, on_delete=models.CASCADE, blank=True, null=True)

로그인한 사용자는 여러 개의 북마크를 생성할 수 있으므로 Bookmark와 User 테이블 사이는 N:1 관계이므로 외래 키로 표현한다.

기존 레코드가 존재하는 상태에서 owner 필드를 추가하는 것이기 때문에 owner 필드는 Null 값을 가질 수 있도록 해야 한다. 폼에서도 owner 필드는 입력하지 않아도 되도록 blank=True로 설정했다.

blog/models.py 수정

모델의 필드가 추가되었으므로 변경 사항을 DB에 저장해준다.

URLconf 코딩

bookmark/urls.py

    # /bookmark/add/
    path('add/', views.BookmarkCreateView.as_view(), name="add"),

    # /bookmark/change/
    path('change/', views.BookmarkChangeLV.as_view(), name="change"),

    # /bookmark/99/update
    path('<int:pk>/update/', views.BookmarkUpdateView.as_view(), name="update"),

    # /bookmark/99/delete
    path('<int:pk>/delete/', views.BookmarkDeleteView.as_view(), name="delete"),

blog/urls.py

    # /blog/add/
    path('add/', views.PostCreateView.as_view(), name="add"),

    # /blog/change/
    path('change/', views.PostChangeLV.as_view(), name="change"),

    # /blog/99/update
    path('<int:pk>/update/', views.PostUpdateView.as_view(), name="update"),

    # /blog/99/delete
    path('<int:pk>/delete/', views.PostDeleteView.as_view(), name="delete"),

View 코딩

URLconf에서 지정한 뷰를 코딩해준다.

bookmark/views.py

blog/views.py

class PostCreateView(LoginRequiredMixin, CreateView):
    model = Post
    fields = ['title', 'slug', 'description', 'content', 'tags']
    initial = {'slug': 'auto-filling-do-not-input'}
    # fields = ['title', 'description', 'content', 'tags']
    success_url = reverse_lazy('blog:index')

    def form_valid(self, form):
        form.instance.owner = self.request.user
        return super().form_valid(form)


class PostChangeLV(LoginRequiredMixin, ListView):
    template_name = 'blog/post_change_list.html'

    def get_queryset(self):
        return Post.objects.filter(owner=self.request.user)


class PostUpdateView(OwnerOnlyMixin, UpdateView):
    model = Post
    fields = ['title', 'slug', 'description', 'content', 'tags']
    success_url = reverse_lazy('blog:index')


class PostDeleteView(OwnerOnlyMixin, DeleteView):
    model = Post
    success_url = reverse_lazy('blog:index')

PostCreateView 클래스의 initual로 폼의 slug 입력 항목에 대한 초기값을 지정한다. slug 필드는 title 필드로부터 자동으로 채워지는 필드로 models.py 파일의 Post 모델 정의에 있는 save() 함수에서 수행된다.

slug 필드를 처리하는 또 다른 방법은 fields 속성에서 제외해 폼에 나타나지 않도록 하는 방법으로 폼에는 보이지 않지만 Post 모델의 save() 함수에 의해 테이블의 레코드에 자동으로 채워진다.

BookMarkApp/views.py

OwnerOnlyMixin 클래스: 콘텐츠의 소유자인지를 판별

템플릿 코딩

편집용 제네릭 뷰를 상속받아 뷰를 작성할 경우 template_name 속성으로 템플릿명을 지정하지 않으면 장고에서 정의한 디폴트 템플릿 명을 사용한다.

base.html

• [Add]와 [Change] 메뉴 수정

  
                    <li class="nav-item dropdown mx-1 btn btn-primary">
                        <a class="nav-link dropdown-toggle text-white" href="#" data-bs-toggle="dropdown">Add</a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="{% url 'bookmark:add' %}">Bookmark</a>
                            <a class="dropdown-item" href="{% url 'blog:add' %}">Post</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="">Album</a>
                            <a class="dropdown-item" href="">Photo</a>
                        </div>
                    </li>
  
                    <li class="nav-item dropdown mx-1 btn btn-primary">
                        <a class="nav-link dropdown-toggle text-white" href="#" data-bs-toggle="dropdown">Change</a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="{% url 'bookmark:change' %}">Bookmark</a>
                            <a class="dropdown-item" href="{% url 'blog:change' %}">Post</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="">Album</a>
                            <a class="dropdown-item" href="">Photo</a>
                        </div>
                    </li>

bookmark/bookmark_form.html

{% extends 'base.html' %}

{% block title %}bookmark_detail.html{% endblock %}

{% block content %}
    <h1>
        Bookmark Create/Update - {{ user }}
    </h1>
    <p class="font-italic">This is a creation or update form for your bookmark.</p>

    {% if form.errors %}
    <div class="alert alert-danger">
        <div class="font-weight-bold">Wrong! Please correct the error(s) below.</div>
        {{ form.errors }}
    </div>
    {% endif %}

    <form action="." method="post" class="card pt-3">
        {% csrf_token %}

        <div class="col-sm-5">
            {{ form.title|add_label_class:"col-form-label col-sm-2 ml-3 font-weight-bold" }}

            <div class="col-sm-5">
                {{ form.title|add_class:"form-control"|attr:"auto:"autofocus" }}
            </div>
        </div>

        <div class="form-group row">
            {{ form.url|add_label_class:"col-form-label col-sm-2 ml-3 font-weight-bold" }}
            <div class="col-sm-5">
                {{ form.url|add_class:"form-control" }}
            </div>
        </div>

        <div class="form-group">
            <div class="offset-sm-2 col-sm-5">
                <input type="submit" value="Submit" class="btn btn-info"/>
            </div>
        </div>
    </form>
{% endblock %}

login.html과 거의 동일하다. 중요한 차이점은 login.html 파일의 경우 AuthenticationForm을 사용했지만 bookmark_form.html 파일의 form 변수는 Bookmark 모델을 사용해 장고가 내부적으로 만든 폼 객체라는 점이다.

즉, CreateView와 UpdateView는 Bookmark 모델에 대한 ModelForm을 스스로 만들고 사용한다는 점을 유의해야 한다.

bookmark/bookmark_change_list.html

Bookmark 테이블의 레코드를 변경하기 위해 기존 레코드의 리스트를 보여주는 템플릿이다.

• 테이블에 부트스트랩 클래스 적용 ( 테이블 셀에 대한 테두리, 줄 간격, 번갈아 가면서 줄마다 음영 표시)
• 테이블 제목은 primary 색으로
• object_list의 각 항목을 순회하면 테이블의 데이터 행 추가

{% extends 'base.html' %}

{% block title %}bookmark_change_list.html{% endblock %}

{% block content %}
    <h1>
        Bookmark Change - {{ user }}
    </h1>
    <br>

    <table class="table table-bordered table-condensed table-striped">

        <thead>
            <tr class="table-primary">
                <th>Title</th>
                <th>Url</th>
                <th>Owner</th>
                <th>Update</th>
                <th>Delete</th>
            </tr>
        </thead>

        <tbody>
            {% for item in object_list %}
            <tr>
                <td>{{ item.title }}</td>
                <td>{{ item.url }}</td>
                <td>{{ item.owner }}</td>
                <td><a href="{% url 'bookmark:update' item.id %}">Update</a></td>
                <td><a href="{% url 'bookmark:delete' item.id %}">Delete</a>{</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

{% endblock %}

bookmark_confirm_delete

레코드를 삭제하기 전 확인하는 화면

{% extends 'base.html' %}

{% block title %}bookmark_confirm_delete.html{% endblock %}

{% block content %}
    <h1>
        Bookmark Delete
    </h1>
    <br>

    <form action="." method="post">
        {% csrf_token %}
        <p>Are you sure you want to delete "{{ object }}" ?</p>
        <input type="submit" value="Confirm" class="btn btn-danger btn-sm" />
    </form>

</div>
{% endblock %}

blog/post_form.html

Post 레코드를 생성 or 수정하기 위한 폼을 보여주는 화면

• slug 필드에 readonly 속성을 지정해서 사용자가 입력할 수 없도록 지정 -> blog 앱이 title 필드에 입력된 단어를 사용해서 자동으로 만들어주기 때문
• slug, descripton, tags 필드의 help_text 옵션 문구(도움말)를 출력

{% extends 'base.html' %}
{% load widget_tweaks %}

{% block title %}post_form.html{% endblock %}

{% block content %}
    <h1>
        Post Create/Update - {{ user }}
    </h1>
    <p class="font-italic">This is a creation or update form for your post.</p>

    {% if form.errors %}
    <div class="alert alert-danger">
        <div class="font-weight-bold">Wrong! Please correct the error(s) below.</div>
        {{ form.errors }}
    </div>
    {% endif %}

    <form action="." method="post" class="card pt-3">
        {% csrf_token %}

        <div class="col-sm-5">
            {{ form.title|add_label_class:"col-form-label col-sm-2 ml-3 font-weight-bold" }}

            <div class="col-sm-5">
                {{ form.title|add_class:"form-control"|attr:"autofocus" }}
            </div>
        </div>

        <div class="form-group row">
            {{ form.slug|add_label_class:"col-form-label col-sm-2 ml-3 font-weight-bold" }}
            <div class="col-sm-5">
                {{ form.slug|add_class:"form-control"|attr:"readonly" }}
            </div>
            <small class="font-text text-muted">{{ form.slug.help_text }}</small>
        </div>

        <div class="form-group row">
            {{ form.description|add_label_class:"col-form-label col-sm-2 ml-3 font-weight-bold" }}
            <div class="col-sm-5">
                {{ form.description|add_class:"form-control" }}
            </div>
            <small class="font-text text-muted">{{ form.description.help_text }}</small>
        </div>

        <div class="form-group row">
            {{ form.content|add_label_class:"col-form-label col-sm-2 ml-3 font-weight-bold" }}
            <div class="col-sm-">
                {{ form.content|add_class:"form-control" }}
            </div>
        </div>

        <div class="form-group row">
            {{ form.tags|add_label_class:"col-form-label col-sm-2 ml-3 font-weight-bold" }}
            <div class="col-sm-5">
                {{ form.tags|add_class:"form-control" }}
            </div>
            <small class="font-text text-muted">{{ form.tags.help_text }}</small>
        </div>

        <div class="form-group">
            <div class="offset-sm-2 col-sm-5">
                <input type="submit" value="Submit" class="btn btn-info"/>
            </div>
        </div>
    </form>
{% endblock %}

blog/post_change_list.html

{% extends 'base.html' %}

{% block title %}post_change_list.html{% endblock %}

{% block content %}
    <h1>
        Post Change - {{ user }}
    </h1>
    <br>

    <table class="table table-bordered table-sm table-striped">

        <thead>
            <tr class="table-primary">
                <th>Title</th>
                <th>Description</th>
                <th>Owner</th>
                <th>Update</th>
                <th>Delete</th>
            </tr>
        </thead>

        <tbody>
            {% for item in object_list %}
            <tr>
                <td>{{ item.title }}</td>
                <td>{{ item.description }}</td>
                <td>{{ item.owner }}</td>
                <td><a href="{% url 'blog:update' item.id %}">Update</a></td>
                <td><a href="{% url 'blog:delete' item.id %}">Delete</a>{</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

{% endblock %}

blog/post_confirm_delete.html

{% extends 'base.html' %}

{% block title %}post_confirm_delete.html{% endblock %}

{% block content %}
    <h1>
        Post Delete
    </h1>
    <br>

    <form action="." method="post">
        {% csrf_token %}
        <p>Are you sure you want to delete "{{ object }}" ?</p>
        <input type="submit" value="Confirm" class="btn btn-danger btn-sm" />
    </form>

</div>
{% endblock %}

templates/403.html

OwnerOnlyMixin 클래스에서 사용하는 템플릿 파일로 403 익셉션을 발생시키면 장고의 디폴트 핸들러 중 하나인 permission_denied() 함수에서 403.html을 렌더링해서 클라이언트에게 403 응답을 보낸다.

{% extends "base.html" %}

{% block title %}403.html{% endblock %}

{% block content %}

    <h1>Permission Denied</h1>
    <br>

    <div class="alert alert-danger">
        <div class="font-weight-bold">
            {{ exception }}
        </div>
    </div>

{% endblock %}

{{ exception }} 컨텍스트 변수는 장고의 permission_denied() 핸들러에서 넘겨주는 템플릿 변수로 우리가 지정한 permission_denied_message 문구에 해당한다.

출처: Django로 배우는 파이썬 웹 프로그래밍(실전편) - 김석훈님

테이블 설계 - 장고 기본 기능 사용

장고에서 제공하는 User 테이블을 기본으로 사용한다.

• User 테이블 구조

URL 설계 - 장고 기본 기능 사용

장고에서 제공하는 인증 기능은 URL과 뷰는 이미 개발되어 있고, 템플릿은 템플릿 파일명만 정해져 있으므로 그 템플릿 내용은 개발자가 코딩해야 한다.

다만 회원가입 기능은 장고에서 제공하지 않으므로 직접 코딩해준다.

아래 2개는 직접 개발해야 한다.

settings 설정

setitng.py 파일에 지정해야 하는 항목 3가지

1. LOGIN_URL: 로그인이 필요해서 로그인 페이지로 리다이렉트시키고자 할 때 사용하는 URL로 login_required() 데코레이터를 사용해야 한다. default: /accounts/login/

2. LOGIN_REDIRECT_URL: 장고의 LoginView 뷰는 로그인 처리가 성공한 후 next 파라미터로 지정한 URL로 리다이렉트 시킨다. next 파라미터가 지정되지 않으면 이 설정 항목에서 지정한 URL로 리다이렉트 시킨다. default: /accounts/profile/

3. LOGOUT_REDIRECT_URL: 장고의 LogoutView 뷰는 로그아웃 처리가 성공한 후 next_page 속성으로 지정한 URL로 리다이렉트 시킨다. 없다면 이 설정 항목에서 지정한 URL로 리다이렉트 시킨다. 요청에 next 파라미터가 있으면 next에 지정한 URL이 next_page 속성으로 사용된다.

위 3가지 중 LOGIN_URL은 디폴트 값을 사용할 것이고, LOGOUT_REDIRECT_URL은 사용하지 않아도 되니까 LOGIN_REDIRECT_URL만 지정해준다.

LOGIN_REDIRECT_URL = '/'

또 폼을 장식하는 데 유용한 django-widget-tweaks 앱을 설치하고 등록한다.

1. 설치 pip install django-widget-tweaks

2. settings.py 등록

    'widget_tweaks',
   

### 모델 코딩
인증 기능에 필요한 테이블은 장고에서 기본 제공하므로 코딩할 필요가 없다.

### URLconf 코딩
인증에 필요한 URL은 장고에서 기본으로 제공하기 때문에 django.contrib.auth.urls 모듈을 include() 함수로 가져와서 사용하면 된다.

BookMarkApp/urls.py
```py
    # 장고의 인증 URLconf를 가져와서 사용한다. 
    path('accounts/', include('django.contrib.auth.urls')),
    path('accounts/register/', UserCreateView.as_view(), name='register'),
    path('accounts/register/done/', UserCreateDoneTV.as_view(), name='register_done'),

뷰 코딩

LoginView 등 장고 auth 모듈에서 제공하는 뷰는 따로 코딩할 필요가 없고 가입 처리용 뷰 UserCreateView와 UserCreateDoneTV만 코딩해주면 된다.

BookMarkApp/views.py

템플릿 코딩

base.html

base.html에서 우상단 Username 영역을 수정해준다.

login.html

{{ next }} 변수는 /accounts/login/?next=/post/3/ 처럼 로그인 URL의 쿼리 문자열로 지정된다. 만일 URL에 next 쿼리 문자열이 없으면, settigns.LOGIN_REDIRECT_URL 항목에 지정된 URL이 사용되고, 이 항목도 지정되어 있지 않으면 디폴트로 /accounts/profile/ URL로 리다이렉트된다.

register.html

가입 화면, 즉 사용자 계정을 생성하는 화면을 보여준다.

{% extends 'base.html' %}
{% load widget_tweaks %}

{% block title %}register.html{% endblock %}

{% block content %}

    <h1>New User Registration</h1>
    <p class="font-italic">Please enter your username and password twice.</p>

    {% if form.errors %}
    <div class="alert alert-danger">
        <div class="font-weight-bold">Wrong! Please correct the error(s) below.</div>
        {{ form.errors }}
    </div>
    {% endif %}

    <form action="." method="post" class="card pt-3">
        {% csrf_token %}
        <div class="form-group row">
            {{ form.username|add_label_class:"col-form-label col-sm-2 ml-3 font-weight-bold" }}
            <div class="col-sm-5">
                {{ form.username|add_class:"form-control"|attr:"autofocus" }}
            </div>
        </div>
        <div class="form-group row">
            {{ form.password1|add_label_class:"col-form-label col-sm-2 ml-3 font-weight-bold" }}
            <div class="col-sm-5">
                {{ form.password1|add_class:"form-control" }}
            </div>
        </div>
        <div class="form-group row">
            {{ form.password2|add_label_class:"col-form-label col-sm-2 ml-3 font-weight-bold" }}
            <div class="col-sm-5">
                {{ form.password2|add_class:"form-control" }}
            </div>
        </div>

        <div class="form-group">
            <div class="offset-sm-2 col-sm-5">
                <input type="submit" value="Register" class="btn btn-info"/>
            </div>
        </div>

    </form>

{% endblock %}

사용자 계정을 생성하기 위해 비밀번호를 두 번 입력할 수 있도록 password1 및 password2 입력 요소가 있다는 점 정도만 빼면 login.html과 거의 같다.

한가지 중요한 차이점은 login.html 파일에서는 AuthenticationForm을 사용했지만 이번 register.html 파일의 form 변수는 UserCreationForm 객체라는 점이다. UserCreationForm 폼도 장고에서 기본으로 제공한다.

템플릿 파일에서 장고의 폼을 장식하려 할 때 django-widget-tweaks 앱을 사용하면 HTML 태그의 요소들을 직접 다룰 수 있어서 편리하다.

register_done.html

가입 처리가 성공한 후에 보여주는 화면

{% extends 'base.html' %}

{% block title %}register_done.html{% endblock %}

{% block content %}

    <h1>Registration Completed Successfully</h1>
    <br>

    <p>Thank you for registering.</p>

    <p class="font-italic"><a href="{% url 'login' %}">Log in again</a></p>

{% endblock %}

password_change_form.html

비밀번호를 변경하기 위한 화면

{% extends 'base.html' %}
{% load widget_tweaks%}

{% block title %}password_change_form.html{% endblock %}

{% block content %}

    <h1>{{ title }}</h1>
    <p class="font-italic">Please enter your old password for security's sake,
    and then enter your new password twice.</p>

    {% if form.errors %}
    <div class="alert alert-danger">
        <div class="font-weight-bold">Wrong! Please correct the error(s) below.</div>
        {{ form.errors }}
    </div>
    {% endif %}

    <form action="." method="post" class="card pt-3">
        {% csrf_token %}
        <div class="form-group row">
            {{ form.old_password|add_label_class:"col-form-label col-sm-2 ml-3 font-weight-bold" }}
            <div class="col-sm-5">
                {{ form.old_password|add_class:"form-control"|attr:"autofocus" }}
            </div>
        </div>
        <div class="form-group row">
            {{ form.new_password1|add_label_class:"col-form-label col-sm-2 ml-3 font-weight-bold" }}
            <div class="col-sm-5">
                {{ form.new_password1|add_class:"form-control" }}
            </div>
        </div>
        <div class="form-group row">
            {{ form.new_password2|add_label_class:"col-form-label col-sm-2 ml-3 font-weight-bold" }}
            <div class="col-sm-5">
                {{ form.new_password2|add_class:"form-control" }}
            </div>
        </div>

        <div class="form-group">
            <div class="offset-sm-2 col-sm-5">
                <input type="submit" value="Password change" class="btn btn-info"/>
            </div>
        </div>

    </form>


{% endblock %}

• PasswordChangeView 뷰에서 title='Password change'라는 컨텍스 변수를 넘겨줌
• form 변수는 장고에서 기본 제공하는 PasswordChangeForm 객체이다.

password_change_done.html

비밀번호 변경 처리가 성공한 후에 보여주는 화면

{% extends 'base.html' %}

{% block title %}password_change_done.html{% endblock %}

{% block content %}

    <h1>{{ title }}</h1>
    <br>

    <p>Your password was changed</p>

{% endblock %}

logged_out.html

로그아웃 처리가 성공한 후 나타나는 화면

{% extends 'base.html' %}

{% block title %}logged_out.html{% endblock %}

{% block content %}

    <h1>Logged out</h1>
    <br>

    <div>
        <i class="fas fa-quote-left"></i>
        <span class="h6">&ensp;Thanks for spending 
            your quality time with this web site today.&ensp;</span>
        <i class="fas fa-quote-right"></i>
    </div>

    <p class="font-italic"><a href="{% url 'login' %}">Log in again</a></p>

{% endblock %}

출처: Django로 배우는 파이썬 웹 프로그래밍(실전편) - 김석훈님

사진의 썸네일을 처리하기 위해 새로운 커스텀 필드가 필요하므로, Pillow 라이브러리를 활용해서 커스텀 필드를 작성해야 한다.

설계

테이블 설계

1. Album 테이블

2. Photo 테이블

하나의 앨범은 여러 개의 사진을 가질 수 있고, 하나의 사진은 하나의 앨범에만 속할 수 있으므로 다음 관계가 성립한다.

Album 테이블- 1 : N -Photo 테이블

URL 설계

포토앱 틀잡기

포토앱 생성

python manage.py startapp photo

INSTALLED_APPS 등록

    'photo.apps.PhotoConfig',

Model 코딩

models.py

admin.py

1. 정의한 테이블이 Admin 사이트에 보이도록 admin.py 파일
2. Admin 사이트의 모습을 정의하는 AlbumAdmin, PhotoAdmin 클래스 정의

외래 키로 연결된 Album, Photo 테이블 간에는 1:N 관계이므로 앨범 객체를 보여줄 때 객체에 연결된 사진 객체들을 같이 보여준다. 같이 보여주는 형식은 세로로 나열되는 형식인 Stackedlnline과 테이블 모양처럼 행으로 나열되는 형식인 Tabularlnline이 있다.

fields.py

사진을 저장하기 위한 필드인 ThumbnailImageField 커스텀 필드 작성

커스텀 필드를 작성할 때는 기존의 비슷한 필드를 상속받아 작성하는 것이 보통으로 이미지 관련 커스텀 필드는 ImageField 클래스를 상속받아 작성한다. ImageField 필드는 이미지 파일을 파일 시스템에 쓰고 삭제하는 작업이 필요하므로, ImageFieldFile 클래스가 필요하고 두 클래스를 연계시켜주는 코드도 필요하다.

DB에 반영

두 개의 테이블을 신규로 정의했으니까 DB에 반영해준다.

admin.py 파일에 정의된 StackedInline 설정에 따라, 입력 양식이 세로로 추가되는 방식으로 extra 설정에 따라 앨범 하나에 사진 2개를 입력할 수 있는 형식이다.

URLconf 코딩

BookMarkApp/urls.py

1. /photo/ URL 요청이 오면, 포토 앱의 APP_URLCONF에 처리를 위임하도록
2. 기존 URl 패턴에 static(정적 파일을 처리하기 위해 그에 맞는 URL 패턴을 반환하는 함수) 함수가 반환하는 URL 패턴 추가

urlpatterns = [
    path('', HomeView.as_view(), name='home'),
    path('admin/', admin.site.urls),
    path('bookmark/', include('bookmark.urls')),
    path('blog/', include('blog.urls')),
    path('photo/', include('photo.urls')),
] + static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT) 

setting.MEDIA_URL로 정의된 /media/ URL 요청이 오면 django.views.static.serve() 뷰 함수가 처리하고, 이 뷰 함수에 document_root = settings.MEDIA_ROOT 키워드 인자가 전달된다.

static.serve() 함수는 개발용이고 상용에는 httpd, nginx 등의 웹 서버 프로그램을 사용한다.

photo/urls.py

app_name = 'photo'

urlpatterns = [
    # /photo/
    path('', views.AlbumLV.as_view(), name='index'),

    # /photo/album/
    path('album/', views.AlbumLV.as_view(), name='album_list'),

    # /photo/album/99
    path('album/<int:pk>/', views.AlbumDV.as_view(), name='album_detail'),

    # /photo/photo/99/
    path('photo/<int:pk>/', views.PhotoDV.as_view(), name='photo_detail'),
]

View 코딩

class AlbumLV(ListView):
    model = Album

class AlbumDV(DetailView):
    model = Album

class PhotoDV(DetailView):
    model = Photo

템플릿 코딩

뷰에서 템플릿 파일명을 지정하지 않았으므로 디폴트 템플릿 명인 album_list.html, album_detail.html, photo_detail.html을 작성한다.

album_list.html

각 앨범에 대한 앨범 정보와 앨범에 속한 사진 5개를 보여주는 화면

album_detail.html

특정 앨범에 들어 있는 사진을 모두 출력하는 템플릿

photo_detail.html

특정 사진에 대한 정보를 출력하는 화면

{% extends "base.html" %}

{% block title %}photo_detail.html{% endblock %}

{% block content %}
    <h2 class="mt-5">{{ object.title }}</h2>

    <div class="row">
          <-- 원본 이미지 -->
        <div class="col-md-9">
            <a href="{{ object.image.url }}">
                <img src="{{ object.image.url }}" style="width: 100%;">
            </a>
        </div>

        <ul class="col-md-3 mt-3">
            <li class="h5">Photo Description</li>
                {% if object.description %}
                    <p>{{ object.description|linebreaks }}</p>
                {% else %}
                    <p>(blank)</p>
                {% endif %}

            <li class="h5">Date Uploaded</li>
                <p class="font-italic">{{ object.upload_dt }}</p>
            <li class="h5">Album Name</li>
                <p class="font-italic">
                    <a href="{% url 'photo:album_detail' object.album.id %}">
                        {{ object.album.name }}
                    </a>
                </p>
        </ul>
    </div>

{% endblock %}

base.html 수정

photo:index로 향하는 url 추가

<li class="nav-item mx-1 btn btn-primary">
                        <a class="nav-link" text-white href="{% url 'photo:index' %}">Photo</a>
                    </li>

썸네일 만들기 수정

기존에 PIL을 이용해 썸네일을 만들었는데 django-imagekit을 이용하면 더 간단하게 만들 수 있다.

1. pip install django-imagekit

2. settings.py에 imagekit 추가

3. models.py 수정

   class Photo(models.Model):
    album = models.ForeignKey(Album, on_delete=models.CASCADE)
    title = models.CharField('TITLE', max_length=30)
    description = models.TextField('Photo Description', blank=True)
    image = models.ImageField(upload_to='photo/%Y/%m')
    image_thumbnail = ImageSpecField(source='image',
                                     processors=[ResizeToFill(1024,1024)],
                                     format='JPEG')
    upload_dt = models.DateTimeField('Upload Date', auto_now_add=True)
   
    class Meta:
        ordering = ('title',)
   
    def __str__(self):
        return self.title
   
    def get_absolute_url(self):
        return reverse('photo:photo_detail', args=(self.id,))

ResizeToFill의 값을 높여주니까 썸네일의 화질이 좋아지는 것을 발견! 대신 로딩 속도가 좀 느려진 것 같기도..?

4. template에서 photo.image_thumbnail.url로 사용

출처: Django로 배우는 파이썬 웹 프로그래밍(실전편) - 김석훈님 https://sss20-02.tistory.com/40

블로그 앱 내에서의 검색 기능 정도는 장고 자체의 Q-객체(테이블에 대한 복잡한 쿼리를 처리하기 위한 객체)를 이용하면 간단히 구현할 수 있다.

1. 검색 기능을 위해 검색 단어를 입력받는 폼 기능
2. Q-객체를 사용해 검색 단어가 들어 있는 블로그를 찾고 그 결과를 보여주는 기능

URL 설계

검색 폼 처리를 위한 URL 하나를 추가한다.

URL 패턴: /blog/search/ 뷰 이름: SearchFormView(FormView) 템플릿 파일명: post_search.html

    # /blog/search/
    path('search/', views.SearchFormView.as_view(), name='search'),

View 코딩

검색 기능을 제공하기 위해서는 검색 폼을 보여줘야 하고, 검색 폼의 데이터가 제출되어야 뷰가 처리하는 순서이믜로 폼을 먼저 만들어야 한다.

forms.py

from django import forms

class PostSearchForm(forms.Form):
    search_word = forms.CharField(label='Search Word')

폼을 정의하는 방법은 테이블의 모델 클래스를 정의하는 방법과 유사하다. CharField 필드는 TextInput 위젯으로 표현되고, label 인자인 Search Word는 폼 위젯 앞에 출력되는 레이블이 되고, 변수 search_word는 input 태그에 대한 name 속성이 되어 사용자가 입력한 값을 저장하는 데 사용된다.

views.py

Template 코딩

UI 상단 [Util > Search] 메뉴에 링크를 달아주고 검색 폼과 검색 결과를 보여줄 수 있도록 한다.

base.html 수정

 <a class="dropdown-item" href="{% url 'blog:search' %}">Search</a>

post_search.html

출처: Django로 배우는 파이썬 웹 프로그래밍(실전편) - 김석훈님

DISQUS 플랫폼을 사용하기 위해서는 DISQUS 홈페이지에서 댓글을 사용할 우리 프로젝트에 대해 필요한 사항을 설정해줘야 한다.

disqus 앱은 DISQUS 플랫폼과의 연동을 통해 즉, DISQUS 사이트에서 제공하는 웹 서비스를 통해 댓글 기능을 제공한다. 따라서 일반적인 앱 개발 외에도 DISQUS 사이트 접속에 필요한 계정과 웹 서비스 연동을 위한 설정이 필요하다.

URL 설계

댓글 처리는 Disqus 앱에서 js로 처리하기 때문에 댓글관련 URL 변경 사항은 없다.

DISQUS 홈페이지 설정

[GET STARTED] - [I wnat to install Disqus on my site]

setting.py에 DISQUS 설정 등록

DISQUS_SHORTNAME = 'pydjango-web-programming-535687cqtc'
DISQUS_MY_DOMAIN = 'http://127.0.0.1:8000/'

뷰 코딩

Disqus 앱은 템플릿 파일에서 js 코드로 실행된다. 그래서 js 코드에 필요한 항목들을 뷰에서 컨텍스트 변수로 만들어서 템플릿 파일로 넘겨준다.

blog/views.py의 PostDV 클래스를 수정한다.

템플릿 코딩

Disqus js 앱을 템플릿 파일에 넣어주는 작업으로 DISQUS 애플리케이션 로컬 서버에 댓글을 저장하는 것이 아니라, DISQUS 플랫폼에 저장된 댓글을 가져와서 브라우저 화면에 보여주는 기능이 주된 역할이기 때문이다. js Disqus 앱이 이런 역할을 수행하므로 우리는 Disqus 앱을 템플릿 파일에 정확하게 사용하면 그만이다.

post_detail.html 수정

content block에 다음 코드 추가

        <div id="disqus_thread"></div>

Disqus 앱의 js 부분은 extra-script 블록 내에 정의한다. 이 부분의 js 코드가 DISQUS 플랫폼의 pydjango-web-programming.disqus.com 사이트에 저장된 댓글을 가져와서 보여주는 역할을 한다.

extra-script block 코딩 -> base.html에 블록지정 안해뒀더니 댓글창 계속 안나와서 고생했다ㅠㅠ 바보같다ㅠ

Disqus 앱에서 보여주는 댓글은 글자 크기를 조정할 수 없으므로 본문과 댓글의 글자 크기가 어울리지 않으면 본문의 글자 크기를 변경해야 한다. Disqus 댓글과 어울리는 글자 크기는 16pt이므로 extra-style 블록에 post-body 스타일을 추가해서 본문을 수정해준다.

{% block extra-style %}
    <style>
        .post-body {
            width: 80%;
            margin: auto;
            font-family: "Lucida Grande", Verdana, Arial, sans-serif;
            font-size: 16px;
        }
    </style>
{% endblock extra-style %}

출처: Django로 배우는 파이썬 웹 프로그래밍(실전편) - 김석훈님

설계

UI

기존 포스트 상세 화면은 수정을, 태그와 관련된 2개의 화면은 신규로 추가할 것이다.

테이블 설계

이미 개발된 Post 테이브에 태그 기능을 위한 필드 하나를 추가한다.

• 필드명: tags
• 타입: TaggableManager
• 제약 조건: Blank, Null

URL 설계

1. 태그 클라우드를 보기 위한 URL

    - URL: /blog/tag/
    - 뷰 이름: TagCloudTV(TemplateView)
    - 템플릿 파일명: taggit_cloud.html

2. 특정 태그가 달려 있는 포스트들의 리스트를 보여주는 URL

    - URL: /blog/tag/tagname/
    - 뷰 이름: TaggedObjectLV(ListView)
    - 템플릿 파일명: taggit_post_list.html

개발

taggit 설치

pip install django-taggit
pip install django-taggit-templatetags

설정 파일 등록

    'taggit.apps.TaggitAppConfig',
    'taggit_templatetags2',

추가 설정

# 태그 이름에 대소문자 구분하지 않는다는 뜻
TAGGIT_CASE_INSENSITIVE = True

# 태그 클라우드에 나타나는 태그의 최대 개수
TAGGIT_LIMIT = 50

모델 코딩

모델에 tag 필드 추가

    tags = TaggableManager(blank=True)

TaggableManager 매니저는 ManyToManyField 및 models.Manager 역할을 동시에 한다. (Tags 별칭, null=True 옵션 디폴트)

admin에 노출

포스트별로 태그 이름이 admin 화면에 노출되도록 한다.

admin.py

Post 테이블 정의가 변경됐으므로 DB에 반영

URLconf 코딩

1. 태그 클라우드를 보기 위한 URL
2. 특정 태그가 달려 있는 포스트들의 리스트를 보여주는 URL

    # /blog/tag/
    path('tag/', views.TagCloudTV.as_view(), name='tag_cloud'),

    # /blog/tag/tagname/
    path('tag/<str:tag>/', views.TaggedObjectLV.as_view(), name='tagged_object_list'),

View 코딩

템플릿 코딩

1. post_detail.html 수정

태그를 클릭해 taggit_post_list.html 화면을 보여줄 수 있도록.

2. taggit_cloud.html

태그 클라우드: 태그들에게 가중치를 부여해 위치나 글자 크기 등을 강조함으로써 태그들의 리스트를 효과적으로 시각화한 것

위치: BookMarkApp\blog\templates\taggit\taggit_cloud.html

3. taggit_post_list.html

태그 클라우드에서 특정 태그를 클릭했을 때, 그 태그가 걸려 있는 포스트들의 리스트를 보여주도록 코딩

위치: BookMarkApp\blog\templates\taggit\taggit_post_list.html

{% extends 'base.html' %}

{% block title %}taggit_post_list.html{% endblock %}

{% block content %}
    <h1>Post for tag - {{ tagname }}</h1>
    <br>

    {% for post in object_list %}
        <h2><a href="{{ post.get_absolute_url }}">
            {{ post.title }}
        </a></h2>
        {{ post.modify_dt|date:"N d, Y" }}
        <p>{{ post.description }}</p>
    {% endfor %}
{% endblock %}

object_list는 TaggedObjectLV 뷰에서 넘겨주는 컨텍스트 변수로 특정 tag가 달려있는 Post 리스트가 담겨있다.

출처: Django로 배우는 파이썬 웹 프로그래밍(실전편) - 김석훈님

메인 메뉴와 본문, 바닥글로 이루어져 있다.

URLconf

첫 페이지 설계이므로 URLconf에서 루트 URL 처리 로직만 설계하면 된다.

path('/', HomeView.as_view(), name='home'),

View

HomeView 코딩 애플리케이션이 아닌 프로젝트와 관련된 뷰이므로 BookMarkApp/views.py을 새로 만들어 코딩한다.

from django.views.generic import TemplateView


class HomeView(TemplateView):
    template_name = 'home.html'

Templates

• 프로젝트 화면의 전체 윤곽
• 애플리케이션별 바로가기 링크 및 메뉴
• 템플릿 상속 기능 구현
• 부트스트랩 사용

base.html

[ 코드 ]

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>{% block title %}Django Web Programming{% endblock %}</title>

    <!--    부트스트랩 CDN
    intergrity, crossorigin 속성은 보안을 위한 속성인데 편의상 제거    -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
          rel="stylesheet">

    {% block extra-style %}{% endblock %}

</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed top">
        <div class="container-fluid">
            <span class="navbar-brand mx-5 mb-0 font-weight-bold font-italic">Django - Python Web Programming</span>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item mx-1 btn btn-primary">
                        <a class="nav-link" href="{% url 'home'%}">Home</a>
                    </li>
                    <li class="nav-item mx-1 btn btn-primary">
                        <a class="nav-link" href="{% url 'bookmark:index'%}">Bookmark</a>
                    </li>
                    <li class="nav-item mx-1 btn btn-primary">
                        <a class="nav-link" href="{% url 'blog:index'%}">Blog</a>
                    </li>
                    <li class="nav-item mx-1 btn btn-primary">
                        <a class="nav-link" href="#">Photo</a>
                    </li>

                    <li class="nav-item dropdown mx-1 btn btn-primary">
                        <a class="nav-link dropdown-toggle text-white" href="#" data-bs-toggle="dropdown">Util</a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="{% url 'admin:index' %}">Admin</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="{% url 'blog:post_archive' %}">Archive</a>
                            <a class="dropdown-item" href="">Search</a>
                        </div>
                    </li>
                </ul>
                <form class="form-inline my-2" action="" method="post">
                    {% csrf_token %}
                    <input class="form-control mr-sm-2" type="search" placeholder="global search" name="search_word">
                </form>
            </div>
        </div>
    </nav>

    <div class="container">
        {% block content %}{% endblock %}
    </div>

    {% block footer %}{% endblock %}

    <!--    부트스트랩 CDN    -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

    <!--    FontAwesome CDN     -->
    <script src="https://kit.fontawesome.com/9445e30193.js" crossorigin="anonymous"></script>
</body>

</html>

head.html

[ 코드 ]

{% extends 'base.html' %}

{% load static %}

{% block title %}home.html{% endblock %}

{% block extra-style %}
<style type="text/css">
    .home-image {
        background-image: url({% static 'img/cat.jpeg' %});
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
        height: 500px;
        border-top: 10px solid #ccc;
        border-bottom: 10px solid #ccc;
        padding: 20px 0 0 20px;
    }
    .title {
        color: #c80;
        font-weight: bold;
    }
    .powered {
        position: relative;
        top: 77%;
        color: #cc0;
        font-style: italic;
    }
</style>
{% endblock %}

{% block content %}
    <div class="home-image">
        <h2 class="title">Django - Python Web Programming</h2>
        <h4 class="powered"><i class="fas fa-arrow-circle-right"></i> powered by django and bootstrap.</h4>
    </div>

    <hr style="margin: 10px 0">

    <div class="row text-center">
        <div class="col-sm-6">
            <h3>Bookmark App</h3>
            <p>
                Bookmark is a Uniform Resource Identifier (URI)
                That is stored for later retrieval in any of various storage formats.
                You can store your own bookmarks by Bookmark application.
                It's also possible to update or delete your bookmarks.
            </p>
        </div>
        <div class="col-sm-6">
            <h3>Blog App</h3>
            <p>
                This application makes it possible to log daily events or write
                your own interests such as hobbies, techniques, etc.
                A typical blog combines text, digital images, and links to other blogs, web pages,
                and other media related to its topic
            </p>
        </div>
    </div>
{% endblock content %}

{% block footer %}
    <footer class="fixed-bottom bg-info">
        <div class="text-white font-italic text-right mr-5">
            Copyright &copy; 2019 DjangoBook by jusung
        </div>
    </footer>
{% endblock %}

가로 너비 작은 경우)

가로 너무 큰 경우)

bookmark, blog app 개선

UI

북마크, 블로그 앱의 각 페이지에도 네이게이션 메뉴 바가 나타나도록 수정한다.

bookmark_list.html 수정

{% extends 'base.html' %}

{% block title %}bookmark_list.html{% endblock %}

{% block content %}
    <h1>Bookmark List</h1>
    <br>

    <ul>
        {% for bookmark in object_list %}
            <li>
                <a href="{% url 'bookmark:detail' bookmark.id %}">
                    {{ bookmark }}
                </a>
            </li>
        {% endfor %}
    </ul>
{% endblock %}

bookmark_detail.html 수정

{% extends 'base.html' %}

{% block title %}bookmark_detail.html{% endblock %}

{% block content %}
    <h1>
        {{ object.title }}
    </h1>

    <ul>
        <li>
            <a href="{{ object.url }}">
                {{ object.url }}
            </a>
        </li>
    </ul>
{% endblock %}

이런 식으로 나머지 blog app templates 'base.html' 상속해주기

출처: Django로 배우는 파이썬 웹 프로그래밍(실전편) - 김석훈님

UI 설계

테이블 설계

URL 설계

코딩 순서

1. 뼈대 만들기 - 이미 bookmarkapp에서 했으므로 패쓰

   • startproejct
   • setting.py 설정
   • migrate
   • createsuperuser 슈퍼 유저 생성
   • startapp blog 앱 생성
   • setting.py에 blog 앱 등록

2. 모델 코딩

   • models.py 모델 정의
   • admin.py Admin 사이트에 모델 등록
   • makemigrations, migrate 작업

3. URLconf 코딩

   • urls.py URL 정의

4. View 코딩

   • views.py 뷰 로직 작성

5. 템플릿 코딩
   • templates 디렉토리

Model 코딩

models.py

Slug? Slug는 페이지나 포스트를 설명하는 핵심 단어의 집합으로 이 슬러그를 URL로 사용함으로써 검색 엔진에서 더 빨리 페이지를 찾아주고 정확도를 높여준다.

SlugField 필드 타입 슬러그는 보통 제목의 단어들을 하이픈으로 연결해 생성하며, URL에서 pk 대신 사용된다. pk는 숫자로만 되어 있어 내용 유추가 힘들지만 슬러그는 명확하기 때문이다.

admin.py

makemigrations, migrate 작업

URLconf 코딩

from django.urls import path, re_path

from bookmark.views import BookmarkLV, BookmarkDV

app_name = 'blog'
urlpatterns = [
    path('', PostLV.as_view(), name='index'),

    # /blog/post/
    path('post/', views.PostLV.as_view(), name='post_list'),

    # /blog/post/django-example
    # 슬러그 컨버터 한글 인식을 위해 re_path로 정규식 구현
    re_path(r'^post(?P<slug>[-\w]+)/$', views.PostDV.as_view(), name='post_detail'),

    # /blog/archive/2019/
    path('archive/<int:year>/', views.PostYAV.as_view(), name='post_year_archive'),

    # blog/archive/2019/nov/
    path('archive/<int:year>/<str:month>/', views.PostMAV.as_view(), name='post_month_archive'),

    # blog/archive/2019/nov/10
    path('archive/<int:year>/<str:month>/<int:day>/', views.PostDAV.as_view(), name='post_day_archive'),

    # blog/archive/today/
    path('archive/today/', views.PostTAV.as_view(), name='post_today_archive'),

]

뷰 코딩하기

from django.shortcuts import render

# Create your views here.
from django.views.generic import ListView, DetailView
from django.views.generic.dates import ArchiveIndexView, YearArchiveView, MonthArchiveView, \
    DayArchiveView, TodayArchiveView

from blog.models import Post


class PostLV(ListView):
    model = Post
    template_name = 'blog/post_all.html'
    context_object_name = 'posts'
    paginate_by = 2

# 특정 객체를 조회하기 위한 키는 기본 키 대신 slug 속성 사용
# URLconf에서 slug 추출해서 뷰로 넘겨준다.
class PostDV(DetailView):
    model = Post

# ArchiveIndexView : 테이블로부터 객체 리스트를 가져와
# 날짜 필드를 기준으로 최신 객체 먼저 출력
class PostAV(ArchiveIndexView):
    model = Post
    date_field = 'modify_dt'

# YearArchiveView : 날짜 필드의 연도를 기준으로 객체 리스트를 가져와
# 그 객체들이 속한 월을 리스트로 출력
class PostYAV(YearArchiveView):
    model = Post
    date_field = 'modify_dt'
    # 해당 연도에 해당하는 객체의 리스트를 만들어서 템플릿에 넘겨준다.
    # 템플릿 파일에서 object_list 컨텍스트 변수 사용 가능
    make_object_list = True

# MonthArchiveView : 날짜 필드의 연월을
# 기준으로 객체 리스트를 가져와 출력
class PostMAV(MonthArchiveView):
    model = Post
    date_field = 'modify_dt'


# DayArchiveView : 날짜 필드의 연월일을 기준으로 객체
# 리스트를 가져와 출력
class PostDAV(DayArchiveView):
    model = Post
    date_field = 'modify_dt'


class PostTAV(TodayArchiveView):
    model = Post
    date_field = 'modify_dt'

템플릿 코딩

post_all.html

<h1>Blog List</h1>

<br>

{% for post in posts %}
    <h3>
        <a href="{{ post.get_absolute_url }}">
            {{ post.title }}
        </a>
    </h3>

    {{ post.modify_dt|date:"N d, Y" }}

    <p>
        {{ post.description }}
    </p>
{% endfor %}

<br>

<div>
    <span>
        {% if page_obj.has_previous %}
            <a href="?page={{ page_obj.previous_page_number }}">
                PreviousPage
            </a>
        {% endif %}

        Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}

        {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}">
                NextPage
            </a>
        {% endif %}


    </span>
</div>

post_detail.html

post_archive.html

post_archive_year.html

<h1>Post Archive for {{ year|date:"Y" }}</h1>

<ul>
    {% for date in date_list %}
    <li style="display: inline;">
        <a href="{% url 'blog:post_month_archive' year|date:'Y' date|date:'b' %}">
            {{ date|date:"F" }}
        </a>
    </li>
    {% endfor %}
</ul>

<br/>

<div>
    <ul>
        {% for post in object_list %}
        <li>
            {{ post.modify_dt|date:'Y-m-d' }}&nbsp;&nbsp;&nbsp;
            <a href="{{ post.get_absolute_url }}">
                <strong>{{ post.title }}</strong>
            </a>
        </li>
        {% endfor %}
    </ul>
</div>

post_archive_month.html

<h1>Post Archive for {{ year|date:"N d, Y" }}</h1>

<div>
    <ul>
        {% for post in object_list %}
        <li>
            {{ post.modify_dt|date:'Y-m-d' }}&nbsp;&nbsp;&nbsp;
            <a href="{{ post.get_absolute_url }}">
                <strong>{{ post.title }}</strong>
            </a>
        </li>
        {% endfor %}
    </ul>
</div>

post_archive_day.html

<h1>Post Archive for {{ year|date:"N, Y" }}</h1>

<div>
    <ul>
        {% for post in object_list %}
        <li>
            {{ post.modify_dt|date:'Y-m-d' }}&nbsp;&nbsp;&nbsp;
            <a href="{{ post.get_absolute_url }}">
                <strong>{{ post.title }}</strong>
            </a>
        </li>
        {% endfor %}
    </ul>
</div>

출처: Django로 배우는 파이썬 웹 프로그래밍(실전편) - 김석훈님

UI 설계

테이블 설계

Model

from django.db import models

# Create your models here.

class Bookmark(models.Model):
    title = models.CharField('TITLE', max_length=100, blank=True)
    url = models.URLField('URL', unique=True)

    def __str__(self):
        return self.title

• 'TITLE', 'URL'은 별칭으로 Admin 사이트에서 이 문구가 사용된다.
• _str_() 함수는 객체(테이블에 들어 있는 레코드 하나)를 문자열로 표현할 때 사용하는 함수로 꼭 정의해야 나중에 Admin 사이트 등에서 레코드명이 제대로 표현된다.

Admin 사이트에 테이블 반영

from django.contrib import admin
from bookmark.models import Bookmark

@admin.register(Bookmark)
class BookmarkAdmin(admin.ModelAdmin):
    list_display = ('id', 'title', 'url')

이처럼 테이블을 새로 만들 때에는 models.py와 admin.py를 함께 수정해야 함!

테이블의 신규 생성, 테이블 변경 등 DB에 변경사항 있으면 makemigrations, migrate로 바로 반영

URLconf

3개의 URL과 뷰 필요

1. admin
2. bookmark/ - BookmarkLV
3. bookmark/int:pk/ - BookmarkDV

from django.contrib import admin
from django.urls import path

from bookmark.views import BookmarkLV, BookmarkDV

urlpatterns = [
    path('admin/', admin.site.urls),
    path('bookmark/', BookmarkLV.as_view(), name='index'),
    path('bookmark/<int:pk>/', BookmarkDV.as_view(), name='detail'),
]

View

1. BookmarkLV - ListView
2. BookmarkDV - DetailView

   from django.views.generic import ListView, DetailView
   

from bookmark.models import Bookmark

class BookmarkLV(ListView): model = Bookmark

class BookmarkDV(DetailView): model = Bookmark

지정해주지 않아도 디폴트로 지정되는 것
- PK로 특정 객체를 조회해서 가져오는 경우이므로 모델 클래스만 지정해주면 됨
- context_object_name이 ListView에서는 object_list, DetailView에서는 object로 설정
- 템플릿 파일명을 모델명 소문자_detail.html형식의 이름으로 저장


## Template
### 1. bookmark_list.html

```html
<!DOCTYPE html>
<head>
    <title>Django Bookmark List</title>
</head>

<body>
<!--    div에 id 지정  -->
    <div id="content">
        <h1>Bookmark List</h1>

        <ul>
            {% for bookmark in object_list %}
                <li>
                    <a href="{% url 'detail' bookmark.id %}">
                        {{ bookmark }}                    
                    </a>
                </li>
            {% endfor %}
        </ul>
    </div>
</body>
</html>

{{ bookmark }} 템플릿 변수는 Bookmark 테이블의 특정 레코드 하나(객체)를 의미한다. 해당 객체를 프린트하면 정의해두었던 _str_() 메소드를 호출해서 그 결과를 출력한다.

2. bookmark_detail.html

<!DOCTYPE html>
<head>
    <title>Django Bookmark Detail</title>
</head>
<body>
    <div id="content">
        <h1>
            {{ object.title }}
        </h1>

        <ul>
            <li>
                <a href="{{ object.url }}">
                    {{ object.url }}
                </a>
            </li>
        </ul>
    </div>

</body>
</html>

출처: Django로 배우는 파이썬 웹 프로그래밍(실전편) - 김석훈님

projectapp/models.py에서 _str_ 함수로 프로젝트의 pk : 프로젝트 title을 출력해준다.

class Project(models.Model):
    image = models.ImageField(upload_to='project/', null=False)
    title = models.CharField(max_length=200, null=True)
    description = models.TextField(null=True)

    created_at = models.DateField(auto_now_add=True, null=True)

    # 번호 : 제목
    def __str__(self):
        return f'{self.pk} : {self.title}'

projectapp의 DetailView에서 로그인을 안했을 경우 subscription이 정의되지 않았는데 return에서 subscription 값을 요구하는 경우 생기는 문제

else 구문을 통해 subscription을 None값으로 지정해준다.

        # user의 로그인 여부
        if user.is_authenticated:
            subscription = Subscription.objects.filter(user=user, project=project)
        else:
            subscription = None
        object_list = Article.objects.filter(project=self.get_object())
        return super(ProjectDetailView, self).get_context_data(object_list=object_list,

처음 articleapp에서 학습용으로 제작한 helloworld 등 과거 자료들 정리

LeeBook 우클릭 -> Find in Files -> hello 검색 -> In Project 탭 helloworld 관련 코드 삭제

http://127.0.0.1:8000/ 주소를 입력하면 찾을 수 없는 페이지라고 나온다. 이 페이지를 설정해준다. LeeBook/urls.py

    path('', ArticleListView.as_view(), name='home'),

LOGIN_REDIRECT_URL 'home'으로 변경

LOGIN_REDIRECT_URL = reverse_lazy('home')

Mypage edit, Change Info, Quit 버튼 느낌있게 수정

구글에서 제공해주는 무료 아이콘 팩 활용

Google Material icons : https://material.io/resources/icons/?style=baseline

Google Material icons Github : https://github.com/google/material-design-icons

templates/head.html에 추가

    <!--    GOOGLE MATERIAL ICONS-->
    <link href="https://fonts.googleapis.com/css2?family=Material+Icons"
      rel="stylesheet">

accountapp/detail.html

                    <a class="material-icons"
                       style="box-shadow: 0 0 4px #ccc; border-radius: 10rem; padding: 0.4rem"
                       href="{% url 'profileapp:update' pk=target_user.profile.pk %}">
                            edit
                    </a>
                <a class="material-icons"
                   style="box-shadow: 0 0 4px #ccc; border-radius: 10rem; padding: 0.4rem"
                   href="{% url 'accountapp:update' pk=user.pk %}">
                        settings
                </a>
                <a class="material-icons"
                   style="box-shadow: 0 0 4px #fcc; border-radius: 10rem; padding: 0.4rem"
                   href="{% url 'accountapp:delete' pk=user.pk %}">
                        cancel
                </a>

What You See Is What You Get의 약자인 WYSIWYG는 보는대로 글이 써진다는 뜻으로 좀 더 글을 쓸 때 풍부함을 더해주는 기능이다.

Medium Editor github: https://github.com/yabwe/medium-editor

사용법

1. forms에서 사용할 editable 클래스를 위해 create.html에 다음 코드를 작성한다.

   <script src="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/js/medium-editor.min.js"></script>
   <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">
   

2. forms의 content 필드에 editable 클래스를 적용시킨다.

```py
    content = forms.CharField(widget=forms.Textarea(attrs={'class': 'editable text-start',
                                                           'style': 'heigth: auto;'}))

게시글을 작성할 때 적용시킬 것이므로 articleapp/forms의 content 필드에 추가한다.

적용 후 게시글을 작성하면 detail 페이지에서 마크다운이 그대로 노출된다. articleapp/detail.html에서 content를 노출시키는 코드에 safe 필터를 걸어준다.

safe 필터는 태그와 같은 마크다운을 없애주고 내용만 보여준다.

            <div class="text-start">
                {{ target_article.content | safe  }}
            </div>

마찬가지로 update 시에도 똑같이 적용될 수 있도록 수정한다.

articleapp/update.html에 다음 코드 추가

<script src="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/js/medium-editor.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">

<script>var editor = new MediumEditor('.editable');</script>

게시글 작성 시 프로젝트를 설정하지 않아도 되도록 수정

ForeginKey를 설정하는 필드는 ModelChoiceField이다. ModelChoiceField는 모델간의 관계를 나타내는 필드로 queryset을 필수로 작성해야 한다.

required를 이용해 없어도 되도록 설정한다.

    project = forms.ModelChoiceField(queryset=Project.objects.all(), required=False)

구독 버튼을 누르면 그 페이지에서 다른 페이지로 넘어가는 게 아닌 구독 버튼만 바뀐다. 별 다른 정보를 넘겨주지도 않는다. 요청을 받자마자 처리할 것들을 하고 바로 Redirect하도록 한다.

startapp subscribeapp

LeeBook의 settings.py, urls.py 추가

subscribeapp urls.py 생성 후 app_name 설정

Model 코딩

같은 게시판을 여러번 구독할 수 없으므로 user과 project를 연결하는 쌍이 가지는 구독 정보가 하나여야 한다.

Meta 정보로 unique_together를 이용하여 둘을 한 쌍으로 묶어준다.

from django.contrib.auth.models import User
from django.db import models

# Create your models here.
from projectapp.models import Project


class Subscription(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE, related_name='subscription')
    project = models.ForeignKey(Project, on_delete=models.CASCADE, related_name='subscription')

    class Meta:
        unique_together = ('user', 'project')

model 작업을 했으므로 makemigration, migrate를 해준다.

View 코딩

get_redirect_url 메소드를 이용해 projectapp:detail로 향하게 한다. GET방식으로 project_pk를 받아서 이 pk를 가지고 있는 detail 페이지로 돌아가는 것이다.

project: get_object_or_404 단축함수를 이용해 project_pk를 가지고 있는 Project를 찾는데 없다면 404 반응을 낸다. user: self.request.user

project, user 두 정보를 찾아낸 후 subscription을 찾는다. 만약 있다면 삭제해주고 없다면 만들고 저장해준다.

@method_decorator(login_required, 'get')
class SubscriptionView(RedirectView):

    def get_redirect_url(self, *args, **kwargs):
        return reverse('projectapp:detail', kwargs={'pk': self.request.GET.get('project_pk')})


    def get(self, request, *args, **kwargs):
        project = get_object_or_404(Project, pk=self.request.GET.get('project_pk'))
        user= self.request.user

        subscription = Subscription.objects.filter(user=user,
                                                   project=project)

        # 구독했으면 없애고 안했으면 해주고
        if subscription.exists():
            subscription.delete()
        else:
            Subscription(user=user, project=project).save()

        return super(SubscriptionView, self).get(request, *args, **kwargs)

subscribe/ url 추가

from django.urls import path

from subscribeapp.views import SubscriptionView

app_name = 'subscribeapp'

urlpatterns = [
    path('subscribe/', SubscriptionView.as_view(), name='subscribe')
]

구독 버튼

projectapp/detail.html

SubscriptionView에서 GET방식으로 project_pk라는 데이터를 넘겨주기로 했으니까 detail에서 target_project.pk를 project_pk로 넘겨준다.

        <a href="{% url 'subscribeapp:subscribe'%}?project_pk={{ target_project.pk }}"
           class="btn btn-primary rounded-pill px-4">
        </a>

이렇게 하면 작동은 되지만 구독을 했는지 안했는지 알 방법이 없다.

projectapp/views.py의 DetailView에서 지금 접속한 유저이 이 게시판에 대해 구독 정보가 있는 지 없는지 확인을 해주는 작업이 필요하다.

get_context_data 안에서 현재 project와 user 정보를 얻어온다. 그런데 여기서 그 user가 로그인을 했는지 안했는 지 확인하는 작업부터 해줘야 한다.

유저가 로그인이 되어 있으면 subscription 변수에 얻어온 user와 project를 넣어줘서 찾아준다. 그 후 찾은 subscription을 return 해준다.

    def get_context_data(self, **kwargs):
        project = self.object
        user= self.request.user

        # user의 로그인 여부
        if user.is_authenticated:
            subscription = Subscription.objects.filter(user=user, project=project)

        object_list = Article.objects.filter(project=self.get_object())
        return super(ProjectDetailView, self).get_context_data(object_list=object_list,

detail에서 토글이 되는 것을 눈으로 확인할 수 있도록 수정해준다.

<!--구독버튼-->
    <div class="text-center mb-5">
        {% if user.is_authenticated %}
            {% if not subscription %}
            <a href="{% url 'subscribeapp:subscribe'%}?project_pk={{ target_project.pk }}"
               class="btn btn-primary rounded-pill px-4">
                Subscribe
            </a>
            {% else %}
            <a href="{% url 'subscribeapp:subscribe'%}?project_pk={{ target_project.pk }}"
               class="btn btn-dark rounded-pill px-4">
                Unsubscribe
            </a>
            {% endif%}
        {% endif %}
    </div>

Field Lookup을 사용한 구독 페이지 구현

field를 사용할 때 다음과 같이 특정 조건을 넣는 형식으로 했었다.

Model.objects.filter(pk=xxx, user=xxx)

(pk=xxx, user=xxx)는 pk와 user 값의 AND function이다. 그렇다면 OR function, WHERE 구문은 어떻게 사용할까?

다음 작업을 진행하면서 알아보자

1. Find user Subscripted projects. 유저가 구독하고 있는 프로젝트들을 확인하기

2. Find articles in projects. 그 프로젝트 안 모든 게시글 가져오기

기존에 사용하던 방식에서 다음과 같이 바꾼다.

Model.objects.filter(project__in=projects)

이 project__in=projects같이 double underscore로 이루어진 것들이 장고에서 제공하는 field lookup이다.

SQL안에서 field lookup의 작동 방식

SELECT ... WHERE project IN (''');

목적 : 조금 더 복잡한 DB 쿼리를 사용자가 구현할 수 있도록 사용한다. For advanced DB query

종류

• Model__exact
• Model__iexact
• Model__contains
• Model__in
• Model__gte
• 등등

SubscriptionListView

특정 조건을 만족하는 게시글을 가져와야 하기 때문에 SubscriptionListView안에서 queryset 관련 함수를 새로 작성한다.

value_list('project')는 값들을 list화 시키는 함수인데 우리는 Subscription 모델에서 user와 project를 지정해줬다. 이 project에 대해 list화 시킨다는 것이다.

이제 여기서 field lookup을 사용해 article_list를 만든다.

@method_decorator(login_required, 'get')
class SubscriptionListView(ListView):
    model = Article
    context_object_name = 'article_list'
    template_name = 'subscribeapp/list.html'
    paginate_by = 5

    # 특정 조건을 만족하는 게시글을 가져와야 하기 때문에 queryset 관련 함수를 새로 작성한다.
    def get_queryset(self):
        # user가 구독하고 있는 프로젝트 찾기
        projects = Subscription.objects.filter(user=self.request.user).values_list('project')

        # 프로젝트 안 모든 게시글 가져오기
        article_list = Article.objects.filter(project__in=projects)
        return article_list

subscribe/list.html

이전에 list_fragment.html로 조각화해놓은 것을 그대로 가져온다.

{% extends 'base.html' %}

{% block content %}

    <div>
        {% include 'snippets/list_fragment.html' with article_list=article_list %}
    </div>

{% endblock%}

url 추가

    path('list/', SubscriptionListView.as_view(), name='list'),

Subscribe 버튼

header.html에서 버튼을 생성해준다.

            <a href="{% url 'subscribeapp:list' %}" class="leebook_header_nav">
                <span>Subscription</span>
            </a>

• Create / Detail/ List View
• Success_url to related Project
• Login_required to CreateView
• Model : title/ description/ image/ created_at

1. python manage.py startapp projectapp

2. LeeBook의 settings.py 에서 projectapp 추가 + urls.py에서 경로 추가

3. projectapp/urls.py에서 app_name 설정

4. projectapp/models.py

class Project(models.Model):
    image = models.ImageField(upload_to='project/', null=False)
    title = models.CharField(max_length=200, null=True)
    description = models.TextField(null=True)
    created_at = models.DateField(auto_now_add=True, null=True)

5. projectapp/forms.py

class ProjectCreationForm(ModelForm):
    class Meta:
        model = Project
        fields = ['image', 'title', 'description']

6. makemigrate와 migrate로 DB 연동

7. projectapp/views.py

• CreateView

  @method_decorator(login_required, 'get')
  @method_decorator(login_required, 'post')
  class ProjectCreateView(CreateView):
    model = Project
    form_class = ProjectCreationForm
    template_name = 'projectapp/create.html'
  
    def get_success_url(self):
        return reverse('projectapp:detail', kwargs={'pk': self.object.pk})
  

- DetailView
```py
class ProjectDetailView(DetailView):
    model = Project
    context_object_name = 'target_project'
    template_name = 'projectapp/detail.html'

• ListView

  class ProjectListView(ListView):
    model = Project
    context_object_name = 'project_list'
    template_name = 'projectapp/list.html'
    paginate_by = 25

8. projectapp/templates.py

• create.html 이때까지와 같은 방식으로

• detail.html DeatilView에서 context_object_name으로 지정한 target_project를 이용해 detail 페이지 완성

profileapp에서 사용했던 레이아웃 그대로 사용 (둥근 image, title, description)

{% extends 'base.html' %}

{% block content %}

    <div style="text-align: center; max-width: 700px; margin: 4rem auto;">
        <div>
            <img src="{{ target_project.image.url }}" alt=""
                style="heigth: 12rem; width: 12rem; border-radius: 20rem; margin-bottom: 2rem; object-fit: cover;">
            <h2 style="font-family: 'NanumGimYuICe'">
                {{ target_project.title }}
            </h2>
            <h5 style="margin-bottom: 3rem">
                {{ target_project.description }}
            </h5>


        </div>
    </div>

{% endblock %}

• list.html
  • card_project.html
    • pagination articleapp뿐만 아니라 다른 app도 모두 적용할 수 있도록 수정

먼저 list.html

{% extends 'base.html' %}
{% load static %}

{% block content %}

<style>

    .container {
        padding: 0;
        margin: 0, auto;
    }

    .container div {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 1rem;
    }

    .container img {
        width: 7rem;
        height: 7rem;
        object-fit: cover;
        border-radius: 1rem;

    }
</style>

    {% if project_list %}
    <div class="container">
        {% for project in project_list %}
        <a href="{% url 'projectapp:detail' pk=project.pk%}">
            <!--            card의 레이아웃을 바꿀 때 card.html만 수정하면 가능하도록 따로 지정해준다.-->
            <!--            card.html에서 필요한 article 객체가 for문에서 정해준 article과 같다는 의미의 코드 작성-->
            {% include 'snippets/card_project.html' with project=project %}
        </a>
        {% endfor %}
    </div>
    <script src="{% static 'js/magicgrid.js' %}"></script>
    {% else %}
    <div style="text-align: center">
        <h1>No Projects YET!</h1>
    </div>
    {% endif %}

    {% include 'snippets/pagination.html' with page_obj=page_obj %}

    <div style="text-align: center">
        <a href="{% url 'projectapp:create' %}" class="btn btn-dark rounded-pill mt-3 mb-3 px-3">
            Create Project
        </a>
    </div>

{% endblock %}

card_project.html

<div style="display: block; text-align: center;">
    <img src="{{ project.image.url }}" alt="">
    <h5 class="mt-2">
<!--        truncatechars로 긴 제목 짜르기-->
        {{ project.title | truncatechars:8 }}
    </h5>
</div>

pagination.html

?page={{ page_obj.previous_page_number }} 앞에 있던 article에 한정시키는 코드 지우면 모든 app에 적용가능

<a href="?page={{ page_obj.previous_page_number }}"
    class="btn btn-secondary rounded-pill">
    {{ page_obj.previous_page_number }}
</a>

9. base.css로 외관 수정

a {
    color: black;
    text-decoration: none;
}


a:hover {
    color: black;
    text-decoration: none;
}

.leebook_header_nav {
    margin: 0 0.5rem;
}

.leebook_header_navbar {
    margin: 1rem 0;
}

Project와 Article 사이의 연결고리 만들기

articleapp/models.py에서 projcet를 Foreinkey로 만들어준 후 forms.py에도 적용시켜 create할 때 만들어져 있는 project중 골라서 선택할 수 있도록 한다.

articleapp/models.py

    project = models.ForeignKey(Project, on_delete=models.SET_NULL, related_name='project', null=True)

articleapp/forms.py

        fields = ['title', 'image', 'project', 'content']

모델을 수정했으니 다시 DB에 연동시키기 위해 makemigration, migrate 작업을 해준다.

Project에 articles들 보여주기

이제 Project를 들어갔을 때 그 project인 article들을 보여줘야한다.

articleapp에 commentapp을 Mixin으로 박아 넣었던 것처럼 비슷하게 해야하는데 이 방법은 무조건 다 가져올 때의 방식이고 조건을 달아서 좀 더 여러가지 작업을 하고 싶을 때에는 이런 방식은 한계가 있을 수 있다.

그래서 View안에서 MultipleObjectMixin 이용해 비슷한 방식으로 구현한다. MultipleObjectMixin은 이름 그대로 여러가지 object를 다룰 수 있게 해준다.

get_context_data 메소드를 이용해서 실질적으로 어떤 게시글을 가져올 것인지에 대한 필터링 구문을 완성한다. object_list 안에 filter를 걸어서 project가 현재 프로젝트의 object와 같은 것을 필터링한다. 그 후 return으로 필터링한 값을 반환해준다.

projectapp/views.py

class ProjectDetailView(DetailView, MultipleObjectMixin):
    model = Project
    context_object_name = 'target_project'
    template_name = 'projectapp/detail.html'

    paginate_by = 25

    def get_context_data(self, **kwargs):
        object_list = Article.objects.filter(project=self.get_object())
        return super(ProjectDetailView, self).get_context_data(object_list=object_list, **kwargs)

articleapp/list.html을 복사해서 아무곳에도 종속되지 않은 snippets/list_fragment.html에 list_fragment.html라는 이름으로 붙여넣고 이를 projectapp/detail.html에서 include 구문으로 사용할 것이다.

list_fragment.html는 base.html이랑 관련 없으므로 extends 구문과 block 구문을 지워준다.

article_list를 object_list로 detail.html에서 지정해주면 include 구문으로 그대로 적용하여 사용할 수 있다.

projectapp/detail.html

    <div>

        {% include 'snippets/list_fragment.html' with article_list=object_list %}

    </div>

accountapp에서 Mypage로 접속했을 때 내가 쓴 글 필터링하여 표시하기

accountapp/views.py

class AccountDetailView(DetailView, MultipleObjectMixin):
    model = User
    # 다른 pk로 접속해도 target_user의 정보를 볼 수 있도록 지정해준다.
    context_object_name = 'target_user'
    template_name = 'accountapp/detail.html'

    paginate_by = 25

    def get_context_data(self, **kwargs):
        object_list = Article.objects.filter(writer=self.get_object())
        return super(AccountDetailView, self).get_context_data(object_list=object_list, **kwargs)

accountapp/detail.html

    <div>

        {% include 'snippets/list_fragment.html' with article_list=object_list %}

    </div>

어디서 에러가 발생했는 지 알기 위해 log 기록들을 확인했다.

django.db.utils.OperationalError: unable to open database file 에러가 발생하고 있었다.

db 파트에서 에러가 나고 있던 것인데 sqlite의 파일 경로 설정을 settings.py 파일에서 바궈주니 에러가 사라졌다.

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        # 기존 코드 'NAME': BASE_DIR / 'db.sqlite3', 
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}

출처: Django로 배우는 파이썬 웹 프로그래밍(기초) - 김석훈님

인터넷에 있는 서버를 빌려서 사용하는 것으로 필요한 만큼 서버 자원을 빌려 쓰고 쓴 만큼 비용을 지불하는 방식이다.

클라우드 서비스를 제공해주는 사이트는 AWS, Digital Ocean, Heroku, PythonAnywhere 등 상당히 많은데 여기선 PythonAnywhere을 사용해본다. 그러나 상용 서비스 운영 예정이라면 유료이면서 안정적인 클라우드 서비스를 선택해야 한다.

장고 소스 가져오기

1. 파일 압축
2. Files - New Directoriy - 압축 파일 업로드

리눅스 병령으로 압축 풀기

1. Consoles - Bash
2. 
3. 압축 파일을 풀고 ch7 프로젝트의 디렉토리 및 파일들 구성

가상 환경 만들기

1. 가상 환경을 모아둘 디렉토리 VENV 만들기

2. 파이썬 3.6을 사용하는 가상 환경 myproject 만들기

3. 장고 설치

PythonAnywhere 서버에서 장고 설정 변경

PythonAnywhere 서버도 운영 서버로 웹 서버가 실행되고 있는데 이 서버에서 장고 프로그램을 실행하기 위해서는 장고 설정을 변경해줘야 한다.

vi settings.py를 통해 아래 코드를 추가한다.

설정 파일을 변경한 후엔 정적 파일을 모으기 위해 collectstatic 명령을 실행한다.

PythonAnywhere 웹 서버 설정

PythonAnywhere 서버 H/W에도 웹 서버가 실행되고 있는데 이 웹 서버가 장고 프로그램을 인식할 수 있도록 웹 서버의 설정을 변경해야 한다.

웹 서버 가동

설정 마법사 수정

1. Code 섹션

클릭 후 기존 내용 삭제 후 아래처럼 작성한다.

2. Virtualenv 섹션

3. Static files 섹션

4. 모든 설정 마친 후 Reload

출처: Django로 배우는 파이썬 웹 프로그래밍(기초) - 김석훈님

장고의 wsgi.py 파일

startproject 명령어를 통해 프로젝트의 뼈대를 만들 때 wsgi.py 파일이 만들어진다. 이 모듈이 장고와 웹 서버를 연결하는 데 필요한 파일로 WSGI 규격에 따라 호출 가능한 애플리케이션 객체를 정의하고 있다.

객체명은 반드시 application이어야 한다. 장고의 wsgi.py 파일

application = get_wsgi_application()

application 객체는 아파치와 같은 운영 웹 서버 뿐만 아니라 runserver에서도 같이 사용하는 객체다. 다른 점은 application 객체의 위치를 지정하는 방식으로 아파치나 NGINX/uWSGI 설정 파일에서 지정하고, 즉 httpd.conf 설정 파일의 WSGIScriptAlias 지시자 또는 uwsgi.ini 설정 파일의 module 항목으로 지정하고, 개발용 runserver에서는 settings 모듈의 WSGI_APPLICATION 변수로 지정한다.

웹 서버는 이 application 객체를 호출하여 장고의 애플리케이션을 실행하는데 그 전에 현재의 장고 프로젝트 및 프로젝트에 포함된 모든 애플리케이션에 대한 설정 정보를 로딩하는 작업이 필요하다.

설정 정보는 담고 있는 settings 모듈의 위치를 아래와 같이 wsgi.py 파일에서 지정해준다.

import os

from django.core.wsgi import get_wsgi_application

# settings 모듈의 위치를 testsite/wsgi.py 파일에서 지정함
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'testsite.settings')

application = get_wsgi_application()

장고의 WSGI 인터페이스

운영 환경에서는 NGINX와 같은 웹 서버 프로그램이 클라이언트 요청을 수신하므로, 요청을 수신한 웹 서버가 uWSGI와 같은 WAS 서버를 통해 장고 웹 애플리케이션을 호출할 수 있어야 한다.

• 웹 서버: Apache httpd 또는 nginx와 같은 웹 서버 프로그램
• 웹 애플리케이션 서버: uwsgi, gunicorn과 같은 WAS 서버 프로그램

장고는 파이썬 웹 애플리케이션을 만들어주는 프레임워크라고 할 수 잇다. 그래서 장고로 만든 프로그램은 WAS 서버에서 호출될 수 있도록 WSGI 규격을 준수해야 하는데 startproject 명령을 실행하면 자동으로 생성되는 wsgi.py 파일이 이 역할을 한다.

testsite/wsgi.py

from django.core.wsgi import get_wsgi_application
application = get_wsgi_application()

~/site-packages/django/core/wsgi.py

def get_wsgi_application():
    return WSGIHandler()

WAS 서버가 장고 애플리케이션의 wsgi.py 파일을 호출하여 WSGIHandler 객체를 얻을 후 다시 호출해서 최종 응답을 생성하고 이를 웹 서버에 돌려주는 것이다.

정리! 장고 : 웹 애플리케이션을 만들어주는 프레임 워크로 WSGI 규격의 애플리케이션 스펙을 구현하기 위해 wsgi.py 파일 제공 WSGI 서버 : application(wsgi.py 파일에서 정의) 호출자(장고에서는 이 호출자를 WSGIHandler 클래스로 정의)를 호출.

WAS 서버가 장고 애플리케이션을 실행하기 위해서는 application 호출자가 정의된 wsgi.py 파일의 위치를 알아야 한다. 그래서 아파치, NGINX, uWSGI 등의 웹/WAS 서버의 설정 파일에는 application 호출자의 경로가 정의되어야 한다.

개발용 웹 서버인 runserver도 WSGI 규격에 따라 application 호출자를 호출하는데 settings.py 파일에 정의된 WSGI_APPLICATION 항목으로 호출자의 경로를 파악한다.

운영 서버 적용 전 장고의 설정 변경 사항

운영 서버에서 필요한 항목들이 제대로 설정되었는지 체크하는 명령이 있다. 운영 서버에 배포한 이후에는 아래 명령으로 설정 파일을 확인할 수 있다.

python manage.py check --deploy

SECRET_KEY는 개발 모드에서는 settings.py 파일에 하드코딩되어 있는데 이 항목은 프로젝트 내에서 암호화가 필요할 때 사용되는 항목으로 외부에 노출되면 안된다. 따라서 운영 모드에서는 환경 변수에 저장하거나 파일에 저장한 후 settings.py에서 아래처럼 부르는 게 좋다.

# SECURITY WARNING: keep the secret key used in production secret!
# SECRET_KEY = 'ixf!t98=p4ymrbua(!2nqar$qdysf-gs)7b_$v2spz(uoa27$3'
# SECRET_KEY = os.environ['SECRET_KEY']
# 또는 
with open(os.path.join(BASE_DIR, 'www_dir', 'secret_key.txt')) as f:
    SECRET_KEY = f.read().strip()
# SECURITY WARNING: don't run with debug turned on in production!

개발 모드에서는 에러 발생 시 디버그를 위해 브라우저에서 여러 가지 정보를 출력해서 보여주는데 이 정보는 프로젝트에 관련된 중요 정보들이므로 운영 모드에서는 settings 모듈의 DEBUG 값을 False로 셋팅하여 노출되지 않도록 해야한다.

DEBUG = False

DEBUG = False로 설정되어 있으면 반드시 settings 모듈의 ALLOWED_HOSTS 항목을 설정해야 한다. 악의적인 공격자가 HTTP Host 헤더를 변조하여 CSRF 공격하는 것을 방지하기 위해서이다. 장고가 실행되는 서버의 IP 주소나 도메인 명을 등록한다.

ALLOWED_HOSTS = [ '192.168.56.101' ]

개발 서버에서는 이미지, jsp, CSS 등의 정적 파일들을 알아서 찾아줬지만 운영 모드에서는 아파치와 같은 웹 서버에게 정적 파일들이 어디에 있는지 알려줘야 한다. settings 모듈의 STATIC_ROOT 항목은 장고의 collectstatic 명령 실행 시 정적 파일들을 한곳에 모아주는 디렉토리이다.

STATIC_ROOT = os.path.join(BASE_DIR, 'www_dir', 'static')

collectstatic 명령은 settings 모듈의 STATICFILES_DIRS 항목에, STATIC_ROOT 항목에서 정의된 디렉토리가 포함되면 안된다는 것을 주의해야 한다. STATICFILES_DIRS 항목에 정의된 디렉토리에서 정적 파일을 찾아 STATIC_ROOT 디렉토리에서 복사해주기 때문이다.

$ python manage.py collectstatic

개발 모드에서는 runserver를 실행시킨 사용자의 권한으로 DB 파일이나 로그 파일을 엑세스한다. 그러나 운영 모드에서는 프로세스의 소유자 권한으로 해당 파일을 엑세스할 수 있어야 한다. settings 모듈의 DATABASES 항목에서 NAME속성값의 경로를 db/db.sqlite3로 변경해주고 해당 디렉토리 및 파일의 엑세스 권한을 아래처럼 변경해준다.

DATABASES = {
    ...
    'NAME': os.path.join(BASE_DIR, 'db', 'db.sqlite3'),
}

mkdir db
mv db.sqlite3 db/
chmod 777 db/
dhmod 666 db/db.sqlite3

웹 환경에서는 캐시 서버와 DB 서버가 사용되는 경우가 많은데 이들 서버는 보안 기능이 취약하므로 외부에서 직접 엑세스하지 않고 웹 서버 또는 WAS 서버에서만 연결하도록 제한하는 게 좋다.

또한 DB 접속 패스워드도 개발 모드에서는 settings.py 파일에 하드코딩되어 있는데 운영 모드에서는 다른 곳에서 저장해야 한다.

프로젝트에 메일을 발송하는 기능이 있다면 장고는 발신자 주소를 디폴트로 root@localhost 및 webmaster@localhost로 지정한다. SERVER_EMAIL 및 DEFAULT_FROM_EMAIL 설정 항목을 사용해 발신자 주소를 변경하는 게 좋다.

출처: Django로 배우는 파이썬 웹 프로그래밍(기초) - 김석훈님

voting/urls.py 파일 수정

...
urlpatterns = [
    # /voting/
    path('', views.IndexView.as_view(), name='index'),

    # /voting/99
    path('<int:pk>/', views.DetailView.as_view(), name='detail'),

    # /voting/99/results/
    path('<int:pk>/results/', views.ResultsView.as_view(), name='results'),

    # /voting/99/vote/
    path('<int:question_id>/vote/', views.vote, name='vote'),

]

View 코딩

함수형 뷰 -> 클래스형 뷰

voting/views.py 파일 수정

from django.http import HttpResponseRedirect
from django.shortcuts import get_object_or_404, render
from django.urls import reverse
from django.views import generic

from voting.models import Question, Choice

# ListView를 상속받는 경우 객체가 들어있는 리스트를 구성해서
# 이를 컨텍스트 변수로 템플릿 시스템으로 넘겨주면 되는데
# 이 리스트가 모든 테이블의 레코드 구성이라면 모델 클래스만 지정
# 아니면 get_queryset() 메소드 오버라이딩하여 원하는 리스트 구성
class IndexView(generic.ListView):
    template_name = 'voting/index.html'
    # 컨텍스트 변수명 지정
    context_object_name = 'latest_question_list'

    def get_queryset(self):
        # 최근 생성된 질문 5개 반환
        return Question.objects.order_by('-pub_date')[:5]

class DetailView(generic.DetailView):
    # Question 테이블로부터 특정 레코드를 가져와 컨텍스트 변수 구성
    # 컨텍스트 변수명은 디폴트 값을 사용하고
    # object와 모델명 소문자인 quesiton 둘 다 가능
    model = Question
    template_name = 'voting/detail.html'

class ResultsView(generic.DetailView):
    # Choice가 아닌 Question 객체를 넘겨준다.
    # Question 객체를 구해서 해당 객체와 FK로 연결된 Choice를 구한다.
    # 이 로직은 results.html 템플릿 파일에서
    # question.choice_set.all() 구문으로 구현되어 있다.
    model = Question
    template_name = 'voting/results.html'

def vote(request, question_id):
    # Choice 테이블을 검색한다. request.POST는 제출된 폼의 데이터를 담고 있는
    # 객체로서 key로 그 값을 구할 수 있다.
    # request.POST['choice']는 폼 데이터에서 키가 'choice'에 해당하는 값인
    # choice.id를 스트링으로 리턴한다.
    question = get_object_or_404(Question, pk=question_id)
    try:
        selected_choice = question.choice_set.get(pk=request.POST['choice'])

    # 'choice'라는 키가 없으면 KeyError 익셉션 발생
    # 검색 조건에 맞는 객체가 없으면 Choice.DoesNotExist 익셉션 발생
    except (KeyError, Choice.DoseNotExist):
        # 익셉션이 발생하면 render() 함수에 의해 question과 error_message
        # 컨텍스트 변수를 detail.html 템플릿으로 전달
        # 에러 메세지와 함께 질문 항목 폼을 다시 보여줘서 재입력할 수 있도록 함
        return render(request, 'voting/detail.html', {
            'question': question,
            'error_message': "You didn't select a choice",
        })
    else:
        selected_choice.votes += 1

        # 변경 사항 Choice 테이블 저장
        selected_choice.save()

        # POST 데이터를 정상적으로 처리했으면
        # 항상 HttpResponseRedirect를 반환하여 리다이렉션 처리
        # 최종적으로 vote() 뷰 함수는 리다이렉트할 타겟 URL을 담은
        # HttpResponseRedirect 객체 반환
        return HttpResponseRedirect(reverse('voting:results', args=(question.id,)))

Template 코딩

상속 기능 추가하기 base.html을 이미 코딩했기 때문에 이를 상속 받는 base_voting.html 템플릿 파일을 만들고 기존 각 템플릿 파일에서 base_voting.html 템플릿을 상속받으면 된다.

base_voting.html

{% extends 'base.html' %}

<title>{% block title %}Voting Application Site{% endblock %}</title>

{% block sidebar %}
{{ block.super }}
<ul>
    <li><a href="/voting/">Voting_Home</a></li>
</ul>
{% endblock%}

voting/index.html 수정

{% extends "base_books.html" %}

{% block content %}
    <h2>Voting Question List</h2>
...

{% endblock content %}

voting/detail.html 수정

{% extends "base_voting.html" %}

{% block content %}

<h1>{{ question.question_text }}</h1>

...
{% endblock content%}

voting/results.html 수정

{% extends "base_voting.html" %}

{% block content %}

...
{% endblock content%}

로그 추가

settings.py 파일에 로깅 설정을 해주고 로거를 취득해서 로그 기록을 원하는 곳에서 로거의 메소드를 호출하면 된다.

로깅 설정에서 배웠던 코드 그대로 적용하면 된다.

settings.py 파일 수정

...
LOGGING = {
    'version': 1,
    'disable_existing_loggers': False,
    'formatters': {

        # [로그 메시지를 기록한 시간], 로그 레벨 이름
        # [로거이름:라인번호], 로그 메시지 순서로 출력
        'verbose': {
            'format': "[%(asctime)s %(levelname)s [%(name)s:%(lineno)s] %(message)s",
            'datefmt': "%d%b%Y %H:%M:%S"
        }
    },
    'handlers': {
        # DEBUG 이상의 메시지를 파일로 출력해주는 FileHandler 사용
        # 로그가 기록되는 파일 이름은 D:web_programing\web_programing\logs\testsite.log
        'file': {
            'level': 'DEBUG',
            'class': 'logging.FileHandler',
            'filters': os.path.join(BASE_DIR, 'logs', 'testsite.log'),
            # 위에서 정의한 verbose 포맷터 사용
            'formatter': 'verbose'
        },
    },
    'loggers': {
        # testsite 로거 이름 대신에 voting 로거 이름으로 바꿨다.
        # views.py 파일에서 __name__변수로 로거를 취득하기 위함이다.
        'voting': {
            'handlers': ['file'],
            'level': 'DEBUG',
        },
    }
}

voting/views.py 수정

# logging 추가
import logging
# getLogger(__name__) 메소드를 호출해서 voting.views 로거 객체 취득
logger = logging.getLogger(__name__)

...

def vote(request, question_id):
    # 로거 객체의 debug 메소드를 호출해서 로거에게
    # DEBUG 수준으로 로그 레코드를 생성하도록 요청
    # 로거는 앞에서 수정한 settings.py 파일의 로깅 설정에 따라
    # file 핸들러를 사용하여  로그 메시지를 기록한다.
    logger.debug("vote().question_id: %s" % question_id)

    ...

logs 디렉토리가 없다면 만들어줘야 한다.

출처: Django로 배우는 파이썬 웹 프로그래밍(기초) - 김석훈님

프로젝트 첫 페이지

네비게이션 항목 중 [Project_Home] 항목을 클릭했을 때 에러가 발생한 이유가 프로젝트 첫 페이지인 루트(/) URL에 대한 처리 로직이 없기 때문이다.

로직 설계

UI 설계

URLconf 코딩

테이블은 변경사항이 없으므로 모델 코딩은 필요 없다.

애플리케이션에 대한 URL이 아닌 프로젝트에 대한 URL이므로 testsite/urls.py 파일에 루트(/) URL 및 임포트 문장, 두 줄만 추가하면 된다.

    path('', views.HomeView.as_view(), name='home'),

View 코딩

앞에서 정의한 HomeView 코딩. 프로젝트와 관련된 뷰이므로 testsite/views.py 파일에 코딩한다.

from django.views.generic import TemplateView

# TemplateView
class HomeView(TemplateView):

    # TemplateView 제네릭 뷰를 상속받을 경우 template_name 필수
    # 템플릿 파일이 위치하는 디렉토리는 settings.py 파일의 
    # TEMPLATES 항목에 리스트 요소로 추가되어 있다.
    template_name = 'home.html'

    # 템플릿 시스템으로 넘겨줄 컨텍스트 변수는 
    # get_context_data() 메소드를 오버라이딩해서 정의
    def get_context_data(self, **kwargs):
        # get_context_data() 메소드 정의시 super() 메소드 호출 필수
        context = super().get_context_data(**kwargs)
        # testsite 프로젝트 하위에 있는 애플리케이션들의 리스트들을
        # 보여주기 위해 컨텍스트 변수 app_list에 담아서 
        # 템플릿 시스템에 넘겨준다.
        context['app_list'] = ['polls', 'books']
        return context

Template 코딩

home.html 템플릿은 프로젝트 템플릿이므로 상속에 사용하는 부모 템플릿의 위치와 동일한 디렉토리에 생성

{% extends 'base_books.html %}

{% block content %}
    <h2>shkim Django Application</h2>
    <ul>
        {% for appname in app_list %}
            {% with appname|add:":"|add:"index" as urlvar %}
                <li><a href="{% url urlvar %}">{{ appname }}</a></li>
            {% endwith %}
        {% endfor%}
    </ul>
{% endblock content %}

뷰로부터 app_list 컨텍스트 변수를 전달받아 app_list에 있는 appname들을 하나씩 순회하면서 화면에 보여준다. 애플리케이션명을 클릭 시 접속할 URL을 추출하기 위해 {% url urlvar %} 태그를 사용했고, urlvar 인자는 {% with %} 태그를 사용해 정의한다.

예를 들어, 애플리케이션명이 books라면 urlvar는 books:index가 된다.

apps.py 활용

프로젝트의 전반적인 항목들을 설정하는 곳 : settings.py 각 앱마다 필요한 항목을 설정하는 곳 : apps.py

앱의 별칭을 부여하는 예제를 통해 apps.py 파일 기능 활용하기

books/apps.py 파일 수정

...

class BooksConfig(AppConfig):
    ...
    verbose_name = 'Book-Author-Publisher App'

books 앱의 설정 클래스인 BooksConfig의 속성 중 하나인 verbose_name을 정의했다.

testsite/views.py 파일 수정

...
    def get_context_data(self, **kwargs):
        ...

        # 이 라인 대신 아래 5라인 추가
        # context['app_list'] = ['voting', 'books']
        dictVerbose = {}
        # apps 객체의 get_app_configs() 메소드를 호출하면
        # settings.py 파일의 INSTALLED_APPS에 등록된
        # 각 앱의 설정 클래스들을 담은 리스트를 반환
        for app in apps.get_app_configs():
            # app.path는 각 설정 클래스의 path 속성으로 
            # 애플리케이션의 물리적 경로를 뜻한다.
            # site-packages 문자열이 있으면 외부 앱이므로 제거
            if 'site-packages' not in app.path:
                # 설정 클래스의 label 속성값을 key로 
                # verbose_name 속성값을 value로 해서 dicVerbose 사전에 등록
                dictVerbose[app.label] = app.verbose_name
        # verbose_dict 컨텍스트 변수에 dictVerbose 사전 대입        
        context['verbose_dict'] = dictVerbose
        return context

tempaltes/home.html 수정

...
<!--    ul 부분을 수정   -->
    <ul>
        {% for key, value in verbose_dict.items %}
                <li><a href="{% url key|add:':index' %}">{{ value }}</a></li>
        {% endfor%}
    </ul>
{% endblock content %}

뷰로부터 전달받은 컨텍스트 변수 verbose_dict 사전을 순회하기 위해 items() 메소드를 호출한다. key : 설정 클래스의 label 속성값 value : 설정 클래스의 verbose_name 속성값

출처: Django로 배우는 파이썬 웹 프로그래밍(기초) - 김석훈님