0
0

More than 3 years have passed since last update.

Djangoでbitflyerの収支管理アプリを作ってみる(02_02.ログイン画面を作る②。)

Last updated at Posted at 2019-12-30

前記事のようなやつ

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点。

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

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

3.
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タグとかつけて体裁を整えます!!!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0