作成した掲示板はこんな感じになります。 ⇒ 動作確認はこちらから
Contents
ログイン機能に関するプロジェクトテンプレートの配置の設定
ログイン機能を実装します。プロジェクトのなかに別に作成しているaccountsというアプリのなかでこれをおこないますが、bbsと共通のテンプレートを使えるようにプロジェクトテンプレートの配置を設定します。
|
1 2 |
# 前のページで以下のコマンドは実行されている $ python manage.py startapp accounts |
内側のmyappディレクトリのなかにあるsettings.pyを編集します。
|
1 2 3 4 5 6 |
TEMPLATES = [ { 'DIRS': [], # それ以外は省略 } ] |
となっている部分を以下のように編集します。
|
1 2 3 4 5 6 7 8 9 |
# 上部に以下の1行を追加 import os TEMPLATES = [ { 'DIRS': [os.path.join(BASE_DIR, 'templates')], # それ以外は省略 } ] |
それからログインしたあとどこへリダイレクトされるかも設定します。
|
1 |
LOGIN_REDIRECT_URL = '/' |
ログイン状態を表示するナビゲーションバーを表示させる
テンプレートのファイルは外側のmyappディレクトリ内にtemplatesという名前のディレクトリを作成し、さらにそのなかにregistrationというディレクトリを作成して、そのなかに作成します。ファイル名とパスは ｛プロジェクト名｝/templats/registration/login.html でなければなりません。
login.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
{% extends '../layout.html' %} {% block content %} <h1>Login</h1> <section class='common-form'> {% if form.errors %} <p class='error-msg'>ユーザー名とパスワードが一致しません。もう一度入力しなおしてください。</p> {% endif %} {% if next %} {% if user.is_authenticated %} <p class='error-msg'>このアカウントではアクセスできません。</p> {% else %} <p class='error-msg'>このページにアクセスするためにはログインしてください。</p> {% endif %} {% endif %} <form action='{% url "login" %}' method='post'> {% csrf_token %} <input type='hidden' name='next' value='{{ next }}'/> {{ form.as_p }} <button type='submit'>ログイン</button> </form> </section> {% endblock %} |
ログインページとログアウトページの作成
それからログアウトしたときに表示されるページを表示するためのテンプレートも作成します。これも｛プロジェクト名｝/templats/registration/logged_out.htmlとパスと名前が決められています。
logged_out.html
|
1 2 3 4 5 6 |
{% extends '../layout.html' %} {% block content %} <h1>ログアウトしました</h1> <p><a href='{% url "login" %}'>もう一度ログインする</a></p> {% endblock %} |
それからこのふたつのテンプレートファイルはlayout.htmlと使用しています。このひとつ上のディレクトリにlayout.htmlという名前でファイルを作成します。
ナビゲーションバーを表示させてログインしているときとしていないときでは表示させる内容を変えます。ログインしているときはユーザー名とログアウトボタン、ログインしていないときはログインするためのボタンとユーザー登録のためのボタンを表示させます。
これはあとまわしにしますが、掲示板の内容を表示するときにマークダウン記法に対応させたいと考えています。そこでh1からh6までの文字の大きさをテンプレート内で設定しています。
layout.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'> <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'> <style> body {padding-top: 80px;} h1 {font-size: 150%;} h2 {font-size: 130%;} h3 {font-size: 110%;} h4 {font-size: 100%;} h5 {font-size: 100%;} h6 {font-size: 100%;} </style> <title>鳩でもわかるはじめてのDjango</title> </head> <body> <nav class='navbar navbar-expand-sm navbar-dark bg-dark fixed-top'> <a class='navbar-brand' href='{% url "bbs:index" %}'>掲示板 TOP</a> <ul class='navbar-nav'> {% if user.is_authenticated %} <!-- ログインしているとき --> <li class='nav-time'> <span class='navbar-text'>{{ user }} - </span> </li> <li class='nav-item'> <a href='{% url "logout" %}' class='logout nav-link'>ログアウト</a> </li> {% else %} <!-- ログインしていないとき --> <li class="nav-item"> <a href='{% url "login" %}' class='login nav-link'>ログイン</a> </li> <li class="nav-item"> <a href='#' class='signup nav-link'>ユーザー登録</a> </li> {% endif %} </ul> </nav> <div class='container'> {% block content %} {% endblock %} </div> </body> </html> |
内側のmyappディレクトリのなかにあるsettings.pyを編集します。INSTALLED_APPSのなかに以下の1行を追加します。
|
1 2 3 4 |
INSTALLED_APPS = [ 'accounts.apps.AccountsConfig', # 先頭にこの行を追加 # 2行目以降は変更しない ] |
それから以下の変更もしておきます。これでデフォルトで表示される文字列が日本語になります。
settings.py
|
1 |
LANGUAGE_CODE = 'ja' # 変更 |
あとタイムゾーンも’Asia/Tokyo’に変更しておくと投稿の作成更新日時が日本時間で表示されるようになります。
settings.py
|
1 |
TIME_ZONE = 'Asia/Tokyo' # 変更 |
次に内側のmyappディレクトリのなかにあるurls.pyを編集します。
|
1 2 3 4 |
urlpatterns = [ # 最後に以下の1行を追加 path('accounts/', include('django.contrib.auth.urls')), ] |
これで http://localhost:8000/accounts/login/ にアクセスするとログイン画面が表示されるはずです。そして管理サイト作成時のユーザー名とパスワードを入力するとログインし、http://localhost:8000/bbs/ にリダイレクトされ、正しくないパスワードを入力した場合は「ユーザー名とパスワードが一致しません」と表示されるはずです。
ユーザー登録できるようにする
次に新しくユーザー登録をすることができるようにします。
まずユーザー登録画面を表示させるためのテンプレートを作成します。作成する場所は｛プロジェクト名｝/accounts/templates/accountsディレクトリ内です。ファイル名はsignup.htmlです。
signup.html
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{% extends 'layout.html' %} {% block content %} <h1>ユーザー登録</h1> <section class='common-form'> <form method='post'> {% csrf_token %} {{ form.as_p }} <button type='submit'>登録</button> </form> </section> {% endblock %} |
次にaccountsディレクトリ内のviews.pyを以下のように編集します。
|
1 2 3 4 5 6 7 8 9 |
from django.shortcuts import render 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' |
そして同じディレクトリ内のurls.pyを以下のように編集します。
|
1 2 3 4 5 6 7 |
from django.urls import path from . import views app_name = 'accounts' urlpatterns = [ path('signup/', views.SignUpView.as_view(), name='signup'), ] |
さらに内側のmyappディレクトリ内のurls.pyに以下を追加します。
|
1 2 3 4 |
urlpatterns = [ # 一番下に以下の1行を追加 path('accounts/', include('accounts.urls')), ] |
そして前述のlayout.htmlの一部を以下のように書き換えます。
|
1 2 3 |
<a href='#' class='signup nav-link'>ユーザー登録</a> ↓ <a href='{% url "accounts:signup" %}' class='signup nav-link'>ユーザー登録</a> |
これでユーザー登録ができるようになりました。
http://localhost:8000/accounts/signup/ にアクセスして別のユーザー名とパスワードで登録してみてください。登録が完了すると http://localhost:8000/accounts/login/ にリダイレクトされます。
次回はログインしたユーザーが新規投稿をできるようにします。
