前記事のようなやつ

Djangoでbitflyerの収支管理アプリを作ってみる（02_01.ログイン画面を作る。）
https://qiita.com/redmeteor777/items/1b974f15ac8b0e87a17d

ある程度記事数書き上げたらまとめる予定。
後記事へのリンクとか。

前記事の最後に生やした草を刈り取って、入力フィールドを埋めていきます。

まずloginディレクトリの中に、フォームを作成するためのファイル、[forms.py]を作成します。
そして、作成した[forms.py]に入力フォームについての関数を書いていきます。

forms.py

from django import forms

class LoginForm(forms.Form):
    user_id = forms.EmailField(
                        label='user_id',
                        max_length=30,
                        min_length=8,
                        required=True
                        )

    password = forms.CharField(
                        label='password',
                        max_length=30,
                        min_length=8,
                        required=True
                        )

formsをimportして、入力フィールドを記述しました。
EmailFieldは「メールアドレス形式」のみ入力できるフィールドを作成します。
CharFieldは「テキスト形式」の入力が可能なフィールドを作成します。

ビュー関数の定義

次にビュー関数を定義します。

views.py

from django.shortcuts import render
from django.http import HttpResponse
from .forms import LoginForm

def login(request):
    params = {
        'title': 'Login_Form',
        'message': 'input your e-mail and pass.',
        'form': LoginForm()
    }

    if (request.method == 'POST'):
        params['message'] = \
            'メールアドレス：' + request.POST['user_id'] + \
            '<br>パスワード：' + request.POST['password']
        params['form'] = LoginForm(request.POST)

    return render(request, 'bfmonitor/login.html', params)

def registration(request):
    return HttpResponse("Hello, World!!!!!")

変更したのは以下の3点。

from .forms import LoginForm
直前に作ったLoginFormをimportします。

paramsの作成
テンプレートに渡す引数として使う、params変数が準備されています。

POSTが要求された場合の処理を記述しています。
GETが来てもPOSTが来てもそれぞれ処理をできるように、準備している感じですね。

HTMLファイルに変数を埋め込む！

前回草を生やしたファイルを編集しないと、今回も草が生えてしまいます。
というわけで、index.htmlを編集していきましょう。

index.html

{% load static %}
<!doctype html>
<html lang="ja">
<head>
    <meta charset="uth-8">
    <title>{{title}}</title>
    {% comment %} <link rel="stylesheet" type="text/css"
        href="{% static 'login/css/style.css' %}" /> {% endcomment %}
</head>
<body>
    <h1>{{title}}</h1>
    <p>{{message|safe}}</p>
    <form action="{% url 'login' %}" method="post">
        {% crsf_token %}
        {{ form }}
        <input type="submit" value="click">
    </form>
</body>
</html>

草刈り完了です。

最後にurlpatternを修正しましょう。

urls.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path('login/', login.login, name='login'),
    path('registration/', login.registration),
]

name='login'

と追記することで、きちんとページの中身を読み込みに行ってくれるはずです。

ではサーバーを起動して確認してみましょう。

>python manage.py runserver

ログイン画面にアクセスして表示を確認します。

http://localhost:8000/login/

入力フォームが表示されれば完成です！
お疲れ様でした！人類の勝利です！！

やっと画面1個できた！！！

…と言っても、入力用のフィールドが表示されるようになっただけです。
データを送ることもできないし、送ったデータを照合するデータベースもないです。

~~というわけで、次回はユーザー登録画面を作っていきます！~~

次回はtableタグとかつけて体裁を整えます！！！