Djangoでくじ引きアプリを作ってみる_part9

Pocket

前回の続きで、くじ引きアプリを作成していきます。

【前回のまとめ】

・ログイン/ログアウト画面を作成する

【今回の作業】

・サインアップ画面を作成する

前回はログイン/ログアウト画面を作成しました。
今回は新規ユーザを作成するためのサインアップ画面を作成していきたいと思います。

設定は今までの差分を利用しますので、初めから設定したい方は以下記事を参照してください。

Djangoでくじ引きアプリを作ってみる_part1

Djangoでくじ引きアプリを作ってみる_part2

Djangoでくじ引きアプリを作ってみる_part3

Djangoでくじ引きアプリを作ってみる_part4

Djangoでくじ引きアプリを作ってみる_part5

Djangoでくじ引きアプリを作ってみる_part6

Djangoでくじ引きアプリを作ってみる_part7

Djangoでくじ引きアプリを作ってみる_part8

・サインアップ画面を作成する

【手順】

1.サインアップ用にaccountsアプリを新規作成する

まずはサインアップ用の画面を準備するため、accountsアプリを新規作成します。

コマンド:

python manage.py startapp accounts

2.settings.pyにaccountsアプリの追加登録と言語を変更する

先ほど作成したaccountsアプリをsettings.pyの「INSTALLED_APPS」に登録するのと、サインアップのメッセージを日本語表示するため、「LANGUAGE_CODE 」を日本語に変更します。

ファイル:myapptdl>myapptdl>settings.py

コード:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'tdl.apps.TdlConfig',
    'accounts.apps.AccountsConfig', #追加
]

LANGUAGE_CODE = 'ja' #'en-us'

3.プロジェクトのurls.pyのルーティングを変更

プロジェクトのurls.pyにaccountsアプリのルーティングを追加します。

ファイル:myapptdl>myapptdl>urls.py

コード:

from django.contrib import admin
from django.urls import path, include
from django.views.generic import RedirectView

urlpatterns = [
   path('admin/', admin.site.urls),
   path('tdl/', include('tdl.urls')),
   path('accounts/', include('accounts.urls')), #追加
   path('accounts/', include('django.contrib.auth.urls')),
   path('', RedirectView.as_view(url='/tdl/')),
]

ルーティングのurlpatternsにpath「accounts/」が指定された場合、accountsのurls.pyを参照するように設定しています。

4.accountsアプリのurls.pyのルーティングを設定

続いて、accountsアプリ側のルーティングを設定します。
まずは、urls.pyファイルを新規作成します。

ファイル:myapptdl>accounts>urls.py

コード:

from django.urls import path
from . import views

app_name = 'accounts'

urlpatterns = [
   path('signup/', views.SignUpView.as_view(), name='signup'),
]
ルーティングのurlpatternsにpath「signup/」が指定された場合、views.pyのSignUpViewクラスを実行するように設定しています。
 
5.accountsアプリのviews.pyにSignUpViewのクラスを設定
 

ファイル:myapptdl>accounts>view.py

コード:

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'

各コードの説明

コード 説明
UserCreationForm 3つのフィールドをフォームとして準備します。(username、password1、password2)
reverse_lazy(‘login’) リダイレクト先として、ログイン画面を指定しています。
‘accounts/signup.html’

テンプレートの名前をsignup.htmlにしています。

6.signup.htmlテンプレートを作成
 

ファイル:myapptdl>accounts>templates>accounts>signup.html

コード:

{% extends 'layout.html' %}

{% block content %}
<h1>Sign up</h1>
<section class='common-form'>
   <form method=post>
       {% csrf_token %}
       {{ form.as_p }}
       <button type='submit'>Sign up</button>
   </form>
</section>
{% endblock %}
7.共通にサインアップリンクを追加する
 

ファイル:myapptdl>templates>layout.html

コード:

<nav class='navbar navbar-expand-sm navbar-dark bg-dark fixed-top'>
   <a class='navbar-brand' href='{% url "lunchmap:index" %}'>ランチマップ</a>
   <ul class='navbar-nav'>
{% if user.is_authenticated %}
   <li class='nav-item'>
<span class='navbar-text'>{{ user }} - </span>
   </li>
   <li class='nav-item'>
<a href='{% url "logout" %}' class='logout nav-link'>Logout</a>
{% else %}
#以下を追加します。

   <li class='nav-item'>
      <a href='{% url "login" %}' class='login nav-link'>Login</a>
   </li>
   <li class='nav-item'>
      <a href='{% url "accounts:signup" %}' class='login nav-link'>Sign up</a>
   </li> 

#ここまで

{% endif %}
</nav>

ここでは、ナビゲーションバーの上に「Sign up」リンクを追加しています。

以上で設定は終わりなので、サーバを起動して確認します。

 
cd myapp 
python manage.py runserver

次の手順で確認していきます。

  1. 以下URLにブラウザでアクセスする
    http://localhost:8000/accounts/login
  2. ナビゲーションバーの上に「Sign up」リンクが表示されています
  3. 「Sign up」をクリックします
  4. Signup画面が表示される
  5. 以下のユーザID/PWを入力して「Sign up」をクリック
    ID:test-tdl
    PW:tdl@app@4872
  6. ログイン画面に遷移することを確認
  7. 作成したユーザでログインする
  8. 一覧画面に遷移することを確認

確認した結果を動画に取りました。

以上で今回の目的であるサインアップ画面を作成することができました。

次回は、ユーザがログイン時にだけ投稿や編集・削除できるようにしたいと思います。

ありがとうございました。

【参考にしたサイトと本】

#05:ユーザー登録画面を作ろう – その1

#06:ユーザー登録画面を作ろう – その2

Python Django3超入門 (日本語) 単行本 – 2020/6/13

Pocket

「Djangoでくじ引きアプリを作ってみる_part9」への3件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です