장고 - Qiita의 tutorial 앱을 개관하고 기능을 더하기 (2)

소개

지난번 장고 - Qiita의 tutorial 앱을 개관하고 기능을 더하기 (1)의 계속입니다.

Django에는 로그인 기능에 대해 표준으로 사용자 인증(login) 기능이 붙어 있습니다만, 사용자 등록(signup) 기능은 갖추고 있지 않습니다.

이번에는 사용자 인증 기능과 사용자 등록 기능과 그 화면을 구현합니다.
로그아웃 화면도 만들 수 있지만 이번에는 로그인 화면으로 전환하여 대응합니다.

참조 기사는 다음과 같습니다.
Django2에서 사용자 인증 (로그인 인증) 구현 튜토리얼 -2- 가입 및 로그인 로그 아웃

이하 전회의 기능도 부여해 git에 준 것입니다.
htps : // 기주 b. 코 m / 리오 157 / c 루 드 게이머 아코 응 ts. 기 t

완성형

로그인 화면


사용자 등록 화면

사용자 인증 기능(login)과 그 화면

우선은 url의 지정으로부터.

settings.py (project 아래)

LOGIN_REDIRECT_URL = '/'
LOGOUT_REDIRECT_URL='/'
# login後、logout後にリダイレクトするページを指定します。
# ここでは一覧画面に飛ぶようにします。

urls.py (project 아래)

    path('accounts/', include('django.contrib.auth.urls')), 
    # urlspatternsに追加。これでdjangoの標準でついている認証機能が有効になりました。

다음으로 templates를 만들어 갑니다.

_base.html (templates/app 아래)

    {% block customcss %}
    {% endblock customcss %}
    <!--headタグに追加。_base.htmlを継承したときにcssファイルを読み込むことができます。-->
    <!--また、bodyタグ内で管理サイト、ログアウトと並んで、-->
    <li class="nav-item">
        <a class="nav-link" href="{% url 'accounts:signup'%}">ユーザー登録</a>
    </li>
    <!--を追加。また、ログアウトでは-->
　　<li class="nav-item">
　       <a class="nav-link" href="{% url 'logout'%}">ログアウト</a>
  　</li>
  <!--{% url 'admin:logout'%}→{% url 'logout' %}とします。管理者用の認証機能によるログアウト画面に遷移させないためです。-->

login.html (templates 아래 registration 폴더 만들기, registration 아래)

{% extends 'app/_base.html' %}
{% load static %}

{% block customcss %}
<link rel='stylesheet' type='text/css' href="{% static 'app/css/style.css' %}">
{% endblock customcss %}

{% block content %}
<section class="common-form">
    {% if form.errors %}
    <p class="error-msg">Your username and password didn't match. Please try again.</p>
    {% endif %}

    {% if next %}
    {% if user.is_authenticated %}
    <p class="error-msg">Your account doesn't have access to this page. To proceed,
        please login with an account that has access.</p>
    {% endif %}
    {% endif %}

    <form class="form-signin" method="POST" action="{% url 'login'%}">{% csrf_token %}
        <h1 class="h3 mb-3 font-weight-normal">Please login</h1>
        <table>
            <tr>
                <td>{{ form.username.label_tag }}</td>
                <td>{{ form.username }}</td>
            </tr>
            <tr>
                <td>{{ form.password.label_tag }}</td>
                <td>{{ form.password }}</td>
            </tr>
        </table>
        <div class="checkbox mb-3">
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Log in</button>
        <p class="mt-5 mb-3 text-muted">&copy; 2017-2020</p>
    </form>
</section>
{% endblock %}

{% extends '파일 이름' %}에서 상속. css를 로드할 때 {%load static%}를 추가합니다.

먼저 사용자 등록 화면을 포함한 css 파일을 작성해 둡니다.

style.css (app/static/app/css 아래)

    div, p, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6 label, input, textarea, select, button {
    margin: 0;
    padding: 0;
    color: #555555;
    font-size: 1rem;
    line-height: 1.8;
    box-sizing: border-box;
  }


  h1{
      font-size: 2rem;
      padding-top: 20px;
      padding-bottom: 15px;
  }

  section {
    margin: 0 0 8px;
  }

  .container {
    margin: 0 auto;
    width: 100%;
    max-width: 800px;
  }

  .content {
    padding: 0 8px;
  }
  .common-form label {
    display: block;
  }

  .common-form p {
    margin-bottom: 8px;
  }

  .common-form input, .common-form textarea {
    padding: 4px;
    width: 100%;
    margin-bottom: 8px;
  }

  .common-form select {
    padding: 4px;
    margin-bottom: 8px;
  }

  .common-form .submit {
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 8px 36px;
    border: none;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    background-color: #4CAF50;
    border-radius: 2px;
  }

  .common-form .delete {
    background-color: #f44336;
  }

  .form-signin {
    width: 100%;
    max-width: 315px;
    padding: 15px;
    margin: auto;
  }
  .form-signin .checkbox {
    font-weight: 400;
  }

  .form-signin h1{
    margin-top: 50px;
  }

로그인 화면과 마찬가지로 사용자 등록 화면에서도 style.css를 로드합니다.
그건 그렇고,이 CSS는 bootstrap 샘플 페이지 화면에서 가져온 것입니다.

사용자 등록 기능(signup)과 그 화면

우선 새롭게 앱을 시작합니다.
terminal에서 다음을 실행합니다.

django-admin startapp accounts
python3 manage.py makemigrations
python3 manage.py migrate

프로젝트에서 새 앱을 인증합니다.

settings.py (project 아래)

  INSTALLED_APPS = [...,
                    'accounts.apps.AccountsConfig',
                   ]

urls.py (project 아래)

    path('accounts/', include('accounts.urls')), 
    #urlpatternsに追加。
    #これでaccountsアプリのurlがブラウザで探せるようになりました。

accounts 앱으로 돌아갑니다.
accounts 앱 아래에 urls.py를 새로 만듭니다.

urls.py (accounts 아래)

from django.urls import path

from . import views

# set the application namespace
# https://docs.djangoproject.com/en/2.0/intro/tutorial03/
app_name = 'accounts'

urlpatterns = [
    # ex: /accounts/signup/
    path('signup/', views.SignUpView.as_view(), name='signup'),
]

views.py (accounts 아래)

from django.contrib.auth.forms import UserCreationForm
from django.urls import reverse_lazy
from django.views import generic


class SignUpView(generic.CreateView):
    form_class = UserCreationForm
    success_url = reverse_lazy('login')
    template_name = 'accounts/signup.html'
    #ユーザー登録のフォーム自体はDjangoに標準で備わっているので、
    #UserCreationFormを指定、reverse_lazyでログイン画面に遷移すると追加、templatesのディレクトリを指定します。

계정 아래 templates/accounts 디렉토리를 만든 후,

signup.html

{% extends 'app/_base.html' %}
{% load static %}

{% block customcss %}
<link rel='stylesheet' type='text/css' href="{% static 'app/css/style.css' %}">
{% endblock customcss %}

{% block content %}
<h1>Sign up</h1>
<section class="common-form">
    <form method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit" class="submit">Sign up</button>
    </form>
</section>
{% endblock %}

로그인 화면과 마찬가지로 style.css를 로드합니다.

되돌아가다

수고하셨습니다.

이번에는 최소한의 기능과 외관을 구현했습니다. 여러가지 개선할 수 있는 점(로그인 실패시의 화면은 css로 깨끗하게 하고 있지 않는, signup에 있는 주의 사항이 거짓말이라든가)은 있습니다만, 일단 작업 플로우 전체를 포착할 수 있었습니다.

개인적으로는 작년 말당에 하고 있던 작업을 정리했으므로, 좋은 복습이 되었습니다. 그 점, 쓰러지는 등 있을지도 모릅니다만, 나쁘지 않아.