前回の続きで、くじ引きアプリを作成していきます。
【前回のまとめ】
・ログイン/ログアウト画面を作成する
【今回の作業】
・サインアップ画面を作成する
前回はログイン/ログアウト画面を作成しました。
今回は新規ユーザを作成するためのサインアップ画面を作成していきたいと思います。
設定は今までの差分を利用しますので、初めから設定したい方は以下記事を参照してください。
・サインアップ画面を作成する
【手順】
１．サインアップ用にaccountsアプリを新規作成する
まずはサインアップ用の画面を準備するため、accountsアプリを新規作成します。
コマンド：
python manage.py startapp accounts
２．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'
３．プロジェクトの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を参照するように設定しています。
４．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'),
]
ファイル：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にしています。 |
ファイル：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 %}
ファイル：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
次の手順で確認していきます。
- 以下URLにブラウザでアクセスする
http://localhost:8000/accounts/loginlocalhost - ナビゲーションバーの上に「Sign up」リンクが表示されています
- 「Sign up」をクリックします
- Signup画面が表示される
- 以下のユーザID/PWを入力して「Sign up」をクリック
ID:test-tdl
PW:tdl@app@4872 - ログイン画面に遷移することを確認
- 作成したユーザでログインする
- 一覧画面に遷移することを確認
確認した結果を動画に取りました。
以上で今回の目的であるサインアップ画面を作成することができました。
次回は、ユーザがログイン時にだけ投稿や編集・削除できるようにしたいと思います。
ありがとうございました。
【参考にしたサイトと本】
コメント