簡単な入力画面を作成／Formの利用＆CSRF対策を追加／Django3

f:id:arakan_no_boku:20190320212948j:plain

簡単な入力画面作成
実行確認イメージ

簡単な入力画面作成

Formの利用＆CSRF対策の確認のため、簡単な入力画面を作ります。

CSSには、new.cssを使います。

newcss.net

軽量で機能は限られますが、クラス指定が必要ないのでサンプルには最高です。

HTMLファイル

以下のようなHTMLファイルを作ります。

CSSに「new.css」

hello.html

{% load static %} <!DOCTYPE html>    
<html>
	<head>
		<link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css" />
		<link
			rel="stylesheet"
			href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css"
		/>
	</head>
	<body>
		<table>
			<tr>
				<td>
					<h1>Hello World!!</h1>
				</td>
			</tr>
			<tr>
				<td><img src="{% static "images/k.png" %}" /></td>
			</tr>
			<form action="" method="post">
				{% csrf_token %} {% if name %}
				<tr>
					<td><h1>{{ name }}</h1></td>
					</tr> {% else %}
				</tr>

				<tr>
					<td>{{form.as_p}}</td>
				</tr>
				<tr>
					<td><input type="submit" value="送信" /></td>
				</tr>
				{% endif %}      
			</form>
		</table>
	</body>
</html>

Python:：テキストボックスのフォーム作成

入力画面にはdjangoのビルトインの Field クラスを使います。

docs.djangoproject.com

今回はテキストボックスを一つだけ作るので、「CharField」を使います。

helloforms.pyです。

rom django import forms


class HelloForm(forms.Form):
    name = forms.CharField(label='何か入力')

Djangoでは、このようにフォームだけを定義したソースを作成し、それをインポートして使う感じにするのがよさげです。

CharField(label='何か入力')

で、「何か入力」というラベルとシンプルなテキストボックスを生成します。

Python：フォームを表示するソース

今回は、hello.pyというファイルにしました。

from django.template.context_processors import csrf
from django.shortcuts import render
from . import helloforms as forms


def hello(request):
    if request.method == 'POST':
        c = {
            'name': request.POST["name"]
        }
    else:
        f = forms.HelloForm(label_suffix='：')
        c = {'form': f}
    c.update(csrf(request))
    return render(request, 'hello.html', c)

ポイントを補足します。

さきほど定義したフォームソースをformという名前でインポートして呼び出します。

forms.HelloForm(label_suffix='：')

あとは送信ボタンを定義しているだけです。

CSRF送信時エラー回避対策

そのまま何もしないでおくと、送信ボタンを押したときにエラー画面がでます。

f:id:arakan_no_boku:20180202090621j:plain

これを回避するために以下の対策をしています。

csrfをインポートします。

from django.template.context_processors import csrf

requestを以下のようにラップします。

c.update(csrf(request))

これがCSRF対策です。

こうすることでエラーはなくなります。

送信ボタンを押す前かか後かの判断は、「request.method == 'POST'」（つまり、送信ボタンが押されてPOSTで遷移してきた状態）か否（初期表示状態）かで判断できます。

それをテンプレート言語の@ifを使って、表示を切り替えます。

URLの形成

urls.pyは、こんな感じです。

これで「http://localhost:8000/hello」のURLでアクセスできます。

from django.contrib import admin
from django.urls import path
from . import views, hello

urlpatterns = [
    path('hello/', hello.hello, name='hello'),
]

実行確認イメージ

サーバーを動かして。

python hello/manage.py runserver

やってみます。

f:id:arakan_no_boku:20210504130837p:plain

ためしに「BOKUのITな日常」と入力して、送信ボタンを押します。

f:id:arakan_no_boku:20210504130946p:plain

OKですね。

"BOKU"のITな日常

BOKUが勉強したり、考えたことを頭の整理を兼ねてまとめてます。