Djangoメモ:サインアップフォームの作成

前提: Djangoにてアプリまで作成済み(本ケースのアプリはtodo)

1.  urls.pyに再ナップフォームのURLを追加

from django.contrib import admin
from django.urls import path
from todo import views #2

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

    path('signup/', views.signupuser, name='signupuser'), #1
   path('current/', views.currentodos, name='currenttodos'), #3

]

#1 まずpathを追加します。
第一引数はURLの指定、第二引数はviewsの関数を指定、第三引数は今回設定したpathに名前をつけています。
ポイントとして第二引数のviews.以降のsignupuserはこの後作るのですが先に指定します。

#2 viewsから関数を引っ張ってくる指定をしたので、todoアプリのviewsをインポートします。

#3 ここではtodoをケースにしていますが、要はサインアップフォームした後にリダイレクトしたいページのURLを作成しています。

2.  viewsにsignupuser関数を作成

from django.shortcuts import render, redirect #0 
from django.contrib.auth.forms import UserCreationForm #1
from django.contrib.auth.models import User #2
from django.db import IntegrityError #3
from django.contrib.auth import login #4

def signupuser(request): #5
    if request.method=='GET': #6
        return render(request, 'todo/signupuser.html', {'form': UserCreationForm()}) #7
    else: #8
        if request.POST['password1'] == request.POST['password2']: #)9
            try: #10
                user = User.objects.create_user(request.POST['username'], password=request.POST['password1']) #11
                user.save() #12
                login(request, user) #13
                return redirect('currenttodos') #14
            except IntegrityError: #15
                return render(request, 'todo/signupuser.html',{'form': UserCreationForm(), 'error': 'Try again.'}) #16
        else:#17
            return render(request, 'todo/signupuser.html', {'form': UserCreationForm(), 'error': 'Password didn't match.'}) #18

def currentodos(request): #19
    return render(request, 'todo/currenttodos.html') #20

#0 リダイレクトを使用できるように”redirect”を追加

#1 Djangoのサインアップフォーム(UserCreationForm)を使用するのでインポートします。

#2 DjangoのUserモデルを使用するのでインポートします。

#3 Djangoのインテグリティエラーが出た時の対処を記述できるようにインポートします。

#4 Djangoのログイン機能を利用できるようにインポートします。

#5 urls.pyで設定した名前の関数にします。引数はブラウザからのリクエストにレスポンスを返すので、requestにします。

#6 もしブラウザからのリクエストがGETの場合…

#7 djangoのサインアップフォーム(UserCreationForm)を、(ここでは、djangoのテンプレートを使用する前提で)todoアプリのsignupuser.htmlに反映してレスポンスしてねという意味です。

#8 それ以外は…

#9 サインアップフォームのパスワード1とパスワード2(確認用)が同じ場合…

#10 トライしてね

#11 サインアップフォームのユーザー名とパスワードを新たにdjangoのユーザーモデルとして新規作成し、変数userに入れてね。

#12 当該ユーザーモデルをデータベースに保存してね。

#13 当該ユーザーでログインさせて

#14 特定ページ(ここではcurrenttodos)を表示して

#15 但し、インテグリティーエラーの場合は…
ここでの目的は、同じユーザー名を認めない。つまり、ユーザー名が既に登録済みならエラーを返す。

#16  Try againという文章と、サインアップフォームをレンダリングしたsignupuser.htmlを表示してね

#17 それ以外は…(パスワードが一致しない場合は)

#18  password didn’t matchという文章と、サインアップフォームをレンダリングしたsignupuser.htmlを表示してね

#19 ここでは本todoアプリの一覧表示用の関数を作成しています

#20 クライアントからのリクエストをテンプレートフォルダにあるcurrenttodos.htmlにレンダリングして返してね

3.  テンプレートフォルダを作成

記述したtodo/signupuser.htmlはDjangoテンプレートのルールに則り作成します。todoフォルダに以下構造でフォルダとファイルを作成します。

todo(既存フォルダ) > templates(新規フォルダ) >  todo(新規フォルダ) > signupuser.html(新規ファイル)

※注意 templatesフォルダを作成したら、その中にtodoフォルダを新たに作成する事を忘れないようにしましょう。

4.  signupuserのhtmlファイルを記述

続いて作成したsignupuserのファイルを作成します。

<h1>Sign Up</h1>
<h2> {{ error }}</h2> #1

<form method="POST"> #2
    {% csrf_token %} #3
    {{ form.as_p }} #4
    <button type="submit">Sign up</button> #5
</form>

#1 エラー文章を表示させるために記述 *ここのerrorはviewsからきてる

#2 POSTをmethod指定してフォームを作成します

#3 CSRF攻撃(クロスサイト・リクエストフォージェリ)を防ぐための対策です。djangoでは当該対策としてこのコードを埋め込む必要があります。

#4 サインアップフォームを表示したい個所指定します。{{ form }}だとdjangoのデフォルトのサインアップフォームが表示されます。{{ form.as_p }}とすることで段落にしたバージョンになります。見やすくなります(とはいえ最終的にはCSSでコーディングしましょう)

#5 送信ボタンを作成します。

5.  superuserを作成(管理者)

実際に登録できたかを確認するために、管理者を設定して、管理画面に入りuserが登録されているか確認しましょう。作成方法は以下を参照ください。

Djangoメモ:adminアカウントの設定方法

About TIER

TIERは、Global、DX、HRの3軸により 大手企業から中小企業、民間企業から行政まで、海外展開に必要なサービスをワンストップで支援しております。海外マーケティングセールスからデジタルマーケティング、多言語サイトや越境ECサイト制作等の海外向けクリエイティブ制作、グローバル人材採用支援まで幅広く対応しております。お気軽にお問い合わせください。

Check Also

Djangoメモ:既存データベースの初期化-migrationリセット

Djangoで当初データベース …