Django3.2 | クラウドソーシングアプリの構築 | 08 | サインイン - 学生向けプログラミング入門

↓↓クリックして頂けると励みになります。

日本語化します。

記述変更　「Desktop/crowdsource/crowdsource/settings.py」108行目

LANGUAGE_CODE = 'ja'
#LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'Asia/Tokyo'
#TIME_ZONE = 'UTC'

「crowdsource/urls.py」ファイルの記述を編集します。

記述編集　【Desktop/crowdsource/crowdsource/urls.py】

from django.contrib import admin
from django.urls import path
from django.contrib.auth import views as auth_views
from core import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.home),

    path('sign-in/', auth_views.LoginView.as_view(template_name="sign_in.html")),
    path('sign-out/', auth_views.LogoutView.as_view(next_page="/")),
    
    path('customer/', views.customer_page),
    path('courier/', views.courier_page),

]

「core/templates」フォルダに「sign_in.html」ファイルを新規作成します。
作成した「core/templates/sign_in.html」ファイルを以下のように編集します。

新規作成　【Desktop/crowdsource/core/templates/sign_in.html】

{{ form }}

ブラウザ確認
http://127.0.0.1:8000/sign-in/

シンプルなフォームを確認できます。

「core/templates/sign_in.html」ファイルの編集を続けます。
記述編集　【Desktop/crowdsource/core/templates/sign_in.html】

{% extends 'base.html' %}
{% load bootstrap4 %}
{% block content %}
<div class="container-fluid mt-5">
    <div class="row justify-content-center">
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header bg-info text-light">
                    <div class="text-center pt-2">
                        <h4>
                        {% if request.GET.next != '/courier/' %}
                        依頼人
                        {% else %}
                        配達人
                        {% endif %}
                        </h4>
                        
                    </div>
                </div>
                <div class="card-body">
                    <form method="POST">
                        {% csrf_token %}
                        {% bootstrap_form_errors form %}
                        {% bootstrap_label "メールアドレス" %}
                        {% bootstrap_field form.username show_label=False placeholder="メールアドレス" %}
                        {% bootstrap_label "パスワード" %}
                        {% bootstrap_field form.password show_label=False placeholder="パスワード" %}
                        <button class="btn btn-info btn-block">
                            サインイン
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

リダイレクトの設定をします。
記述追加　「Desktop/crowdsource/crowdsource/settings.py」140行目(末尾)

LOGIN_URL = '/sign-in/'
LOGIN_REDIRECT_URL ='/'

ブラウザを確認します。
スーパーユーザーでログインできるようになっていることを確認して下ください。
http://127.0.0.1:8000/sign-in/

「core/templates/base.html」ファイルを編集します。

記述編集　【core/templates/base.html】

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title>クラウドソーシングアプリ</title>
        {% load bootstrap4 %}
        {% bootstrap_css %}
        {% bootstrap_javascript jquery='full' %}

        {% block head %}{% endblock %}
    </head>
    <body>

        <nav class="navbar {% if not request.user.is_authenticated %} navbar-expand-lg {% endif %} navbar-dark bg-dark">

            <a class="navbar-brand" href="/">クラウドソーシングアプリ</a>
            {% if not request.user.is_authenticated %}


            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
          
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav">
                <li class="nav-item mr-2 ml-4 {% if request.GET.next != '/courier/' %} active {% endif %}">
                 <a class="nav-link btn btn-light {% if request.GET.next != '/courier/' %}bg-success{% else %}bg-dark{% endif %}" href="/sign-in/?next=/customer/">依頼者</a>
                </li>
                <li class="nav-item {% if request.GET.next == '/courier/' %} active {% endif %}">
                  <a class="nav-link btn btn-light {% if request.GET.next == '/courier/' %}bg-primary{% else %}bg-dark{% endif %}" href="/sign-in/?next=/courier/">仕事引受人</a>
                </li>
              </ul>
            </div>
            {% else %}
            <form class="form-inline">
              <span class="mr-4 text-light">
                {{ request.user.get_full_name | title }}
              </span>
              <span>
                <a href="/sign-out" class="btn btn-outline-dark bg-light">ログアウト</a>
              </span>
            </form>

            {% endif %}
        </nav>

        {% block content %}{% endblock %}
          
          
        <footer class="text-center mt-5 mb-5">
            &copy; 学生向けプログラミング入門 | 無料
        </footer>

    </body>
</html>

管理画面でスーパーユーザのユーザ名を登録しておいてください。
http://127.0.0.1:8000/admin/auth/user/

ブラウザを確認し、ログアウトボタンが機能することを確認して下さい。

「core/views.py」ファイルを編集します。

記述編集　【Desktop/crowdsource/core/views.py】

from django.shortcuts import render
from django.contrib.auth.decorators import login_required

# Create your views here.
def home(request):
    return render(request, 'home.html')

@login_required()
def customer_page(request):
    return render(request, 'home.html')

@login_required()
def courier_page(request):
    return render(request, 'home.html')