Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@ys_dirard(dirard)

【Django】003. フォームでの送信

Posted at

前回はDjangoのテンプレートについて見ていきました。
【Django】002. テンプレートの利用

今回はDjangoでのフォームを使ったデータの送信についてみていきます。

今回も以下の本を参考にしています。

フォームの準備

テンプレート (ここではform.html) を準備する

index.html
{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

</head>
<body class="container">
    <h1 class="display-4 text-primary mb-4">{{ title }}</h1>
    <p class="h6 my-3">{{ msg }}</p>
    
    <form action="{% url 'form' %}" method="post">
        {% csrf_token %}
        <label for="msg" class="form-label">message: </label>
        <input type="text" name="msg" id="msg" class="form-control">
        <input type="submit" value="click" class="btn btn-primary">
    </form>
</body>
</html>

普通にhtmlのformタグで作成しています。

views.pyにform用の関数を追加する

views.py
from django.shortcuts import render
from django.http import HttpResponse

def form(request):
    params = {
        "title": "Hello/Index",
        "msg": "this is sample page.",
    }
    return render(request, "hello/form.html", params)

urls.pyのurlpatternsにpathを追加する

urls.py
urlpatterns = [
    ...(略)...
    path("form", views.form, name="form"),
]

これでページにアクセスすると以下のようになる。

image.png

urlpatternsにname="form"として追加したので、{% url form %}は自分自身に送信していることになります。なので現状は何も起きません。

CSRF対策

formの中にある

{% csrf_token %}

はCSRF (Cross-Site Request Forgeries) 対策として必要なトークンを表示しています。
これにより利用者が意図したリクエスト(正しくフォームから送信されたアクセス)かどうかをチェックしています。

CSRFの詳細は以下を参照。

フォームで送られた内容を処理する

views.pyのform関数を以下に変更する。

views.py
from django.shortcuts import render
from django.http import HttpResponse

def form(request):
    if "msg" in request.POST:
        msg = "こんにちは、" + request.POST["msg"] + "さん。"
    else:
        msg = "お名前は？"
        
    params = {
        "title": "Hello/Form",
        "msg": msg,
    }
    return render(request, "hello/form.html", params)

ページにアクセスすると1枚目のように表示され、messageに入力してclickすると2枚目のように表示されます。
送信した内容を取得して表示できていることがわかります。

image.png

image.png

form.html内でformのactionを自分自身に設定していたので、データは自分自身に送信されます。

そのデータを

request.POST["msg"]

のようにして取得することができます。

ここでの"msg"はform.htmlのform内で指定したname="msg"のことです。

Djangoのフォーム機能

ここまでの実装だと送信すると値がクリアされるので不便な時も出てきます。

送られてきた値を変数に保存しておいて、それを表示することもできますが面倒。

そんな時にDjangoのFormクラスが便利らしい。

forms.pyを作成する

アプリケーションフォルダ (プロジェクトフォルダではない) 直下にforms.pyというファイルを作成します。

forms.py
from django import forms

class HelloForm(forms.Form):
    name = forms.CharField(label="name")
    mail = forms.CharField(label="mail")
    age = forms.IntegerField(label="age")

上記のようにFormクラスはforms.Formクラスを継承して作成し、変数 = フィールドの形で準備します。

views.pyの変更

views.pyのform関数を変更します。

views.py
from django.shortcuts import render
from .forms import HelloForm

def form(request):
    params = {
        "title": "Hello",
        "message": "your data:",
        "form": HelloForm(),
    }
    if (request.method == "POST"):
        params["message"] = "名前:" + request.POST["name"] + \
            "<br>メール:" + request.POST["mail"] + \
            "<br>年齢:" + request.POST["age"]
        params["form"] = HelloForm(request.POST)
    return render(request, "hello/form.html", params)

リクエストがGETかPOSTかで処理が変わるようにしています。

今回作成したHelloFormはparamsの一つとしてそのまま渡すことができます。

テンプレート (form.html) の変更

form.htmlを以下のように変更します。

form.html
{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

</head>
<body class="container">
    <h1 class="display-4 text-primary mb-4">{{ title }}</h1>
    <p class="h6 my-3">{{ message|safe }}</p>
    
    <form action="{% url 'form' %}" method="post">
        {% csrf_token %}
        {{ form }}
        <input type="submit" value="click" class="btn btn-primary">
    </form>
</body>
</html>

{{ message|safe }}の|safeはフィルターという機能で、HTMLタグを書きだせるようにするためのものらしい。

Djangoでは{{ }}内にHTMLタグが含まれている場合は自動的にエスケープ処理 (ただのテキストとして処理) されてしまうところを|safeによりエスケープ処理を行わなくしているとのこと。

ページにアクセスすると以下のようになります。
送信後も値が残るようになっています。
値を入力せずに送信しようとすると警告メッセージが出ます。

image.png

image.png

image.png

フィールドをタグで整える

先ほどまでで機能的にはOKなのですが、表示がきれいじゃない問題があります。

Formクラスは生成するフィールドのタグを他のタグでくくって出力する機能が用意されているとのこと。

例：
<Form>.as_table
ラベルとフィールドのタグを

とでくくる。

<Form>.as_p
ラベルとフィールド全体を

でくくる。

<Form>.as_ul
ラベルとフィールド全体を

でくくる。

form.htmlを以下のように変更します。

form.html
{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

</head>
<body class="container">
    <h1 class="display-4 text-primary mb-4">{{ title }}</h1>
    <p class="h6 my-3">{{ message|safe }}</p>
    
    <form action="{% url 'form' %}" method="post">
        {% csrf_token %}
        <table>
            {{ form.as_table }}
            <tr><td></td><td>
                <input type="submit" value="click" class="btn btn-primary">
            </td></tr>
        </table>
    </form>
</body>
</html>

再びアクセスするといい感じになりました。

image.png

Bootstrapクラスを使う

これまでもなんやかんやBootstrapをロードしてはいたので勝手に使われているような気もしますが、Formクラスに明示的に使わせてみます。

使用方法はフィールドのインスタンス生成時にwidgetで指定します。

変更後のforms.pyは以下になります。

forms.py
from django import forms

class HelloForm(forms.Form):
    name = forms.CharField(label="name", widget=forms.TextInput(attrs={"class": "form-control"}))
    mail = forms.CharField(label="mail", widget=forms.TextInput(attrs={"class": "form-control"}))
    age = forms.IntegerField(label="age", widget=forms.NumberInput(attrs={"class": "form-control"}))

form.htmlも以下のように修正してみます。

form.html
{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

</head>
<body class="container">
    <h1 class="display-4 text-primary mb-4">{{ title }}</h1>
    <p class="h6 my-3">{{ message|safe }}</p>
    
    <form action="{% url 'form' %}" method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <input type="submit" value="click" class="btn btn-primary">
    </form>
</body>
</html>

すると以下のようになります。
ちゃんと適用されていていい感じです。

image.png

HTMLタグかFormクラスか？

これまでで2種類のフォーム実装を見てきました。

  • HTMLタグによる実装
  • Formクラスによる実装

これらはどちらが良いのでしょうか？
答えはどちらでもよい！です。

とはいえ、フォームに必要な機能はFormクラスにもともと用意されているため自分で実装する必要はなく、組み込みやすいという話はあります。

ビュー関数のクラス化

【Class-Based Views】
これまではviews.pyの中にビュー用の関数を定義して関数の中でGET時の処理とPOST時の処理を分岐していました。

【Function-Based Views】
Djangoではクラスによるビュー定義もあり、GET時の処理とPOST時の処理を別関数として分離できます。

これまでのviews.pyのform関数をクラスによるビューで書き直してみます。

views.py
from django.shortcuts import render
from django.http import HttpResponse
from django.views.generic import TemplateView
from .forms import HelloForm

class FormView(TemplateView):
    
    def __init__(self):
        self.params = {
            "title": "Hello",
            "message": "your data",
            "form": HelloForm(),
        }
        
    def get(self, request):
        return render(request, "hello/form.html", self.params)
    
    def post(self, request):
        msg = "あなたは、<b>" + request.POST["name"] + \
            "(" + request.POST["age"] + ")</b>さんです。<br>メールアドレスは <b>" + \
            request.POST["mail"] + "</b>ですね。"
        self.params["message"] = msg
        self.params["form"] = HelloForm(request.POST)
        return render(request, "hello/form.html", self.params)

getとpostを別に定義することで同一関数の中での分岐を避けられています。

urlpatternsの修正

クラスによるビューの場合はurls.pyのurlpatternsの指定の仕方が変わります。

urls.py
from django.urls import path
# from . import views
from .views import FormView

urlpatterns = [
    # path("form", views.form, name="form"), # function-based view
    path("form", FormView.as_view(), name="form"), # class-based view
]

上記のようにクラス名.as_view()として指定することで使用可能です。

クラス or 関数

Function-Based ViewとClass-Based Viewはどう使い分ければいいのでしょうか？

処理の複雑さ

関数による記載は直感的でわかりやすいのが特徴。
処理が複雑ではない場合は関数で書いた方が早い。

GETやPOSTで共有できるクラス

GETとPOST等のHTTPメソッドによって関数を分ける場合はクラスによって一つ(のクラス)にまとめることができる。

これにより、GETとPOST間で値をやり取りしたい等の問題を解決したりできる。

GETだけなら関数でOK

最初の「処理の複雑さ」にも関係しますが、ただページにアクセスして表示するだけなら関数だけで十分。

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
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?