Django(ジャンゴ)を利用すると、PythonによるWebアプリケーションを作成することができる。
今回は、入力画面・確認画面・完了画面の3画面を含み、HTMLオブジェクトとしてテキストボックス・ラジオボタン・チェックボックス等を含むWEBアプリケーションを作成してみたので、そのサンプルプログラムを共有する。
前提条件
下記記事のDjangoによる環境構築と実装が完了していること。
サンプルプログラムの作成
作成したサンプルプログラムの構成は、以下の通り。
なお、上記の赤枠は、前提条件のプログラムから追加・変更したプログラムである。
djangoAppフォルダ下、settings.pyの変更内容は以下の通りで、言語設定を日本語に変更している。
1 2 3 4 | # 設定を日本語に変更 LANGUAGE_CODE = 'ja' TIME_ZONE = 'Asia/Tokyo' |
また、demoフォルダ下、templatesフォルダ下のHTMLファイルの内容は以下の通りで、入力画面(input.html)・確認画面(confirm.html)・完了画面(complete.html)を作成している。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>入力画面</title> <!-- 独自CSSファイルの読み込み --> {% load static %} <link rel="stylesheet" href="{% static 'demo/css/demo.css' %}"> </head> <body> <p>下記必要事項を記載の上、「確認」ボタンを押下してください。</p><br/> <!-- action属性のURLで、(demoフォルダ内)urls.pyの画面遷移先のname属性の値を指定している --> <form action="{% url 'confirm' %}" method="post"> <!-- 下記csrf_tokenは、CSRF対策を行うことでform送信時エラーを防ぐために設定 --> {% csrf_token %} <table> <!-- 氏名 --> <tr> <td align="left" valign="top">{{ input_form.name.label_tag }}</td> <td>{{ input_form.name }}</td> </tr> <!-- 生年月日 --> <tr> <td align="left" valign="top"> {{ input_form.birth_day.label_tag }} </td> <td> {{ input_form.birth_day }} <!-- 生年月日の入力チェックエラーを表示 --> <span class="error_message"> {{ input_form.birth_day.errors.0 }} </span> </td> </tr> <!-- 性別 --> <tr> <td align="left" valign="top">{{ input_form.sex.label_tag }}</td> <td> {% for sex_choice in input_form.sex %} {{ sex_choice.choice_label }} {{ sex_choice.tag }} {% endfor %} </td> </tr> <!-- メモ --> <tr> <td align="left" valign="top">{{ input_form.memo.label_tag }}</td> <td>{{ input_form.memo }}</td> </tr> <!-- 入力確認 --> <tr> <td align="left" valign="top">{{ input_form.check.label_tag }}</td> <td>{{ input_form.check }}</td> </tr> </table> <br/><br/> <input type="submit" name="confirm" value="確認" /> </form> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>確認画面</title> </head> <body> <p>入力内容を確認し、問題なければ「送信」ボタンを押下してください。</p> <form action="{% url 'regist' %}" method="post"> {% csrf_token %} <table> <!-- 氏名 --> <tr> <td align="left" valign="top">{{ input_form.name.label_tag }}</td> <td>{{ input_form.name.value }}</td> </tr> <!-- 生年月日 --> <tr> <td align="left" valign="top"> {{ input_form.birth_day.label_tag }} </td> <td>{{ lbl_birth_day }}</td> </tr> <!-- 性別 --> <tr> <td align="left" valign="top">{{ input_form.sex.label_tag }}</td> <td>{{ lbl_sex }}</td> </tr> <!-- メモ --> <tr> <td align="left" valign="top">{{ input_form.memo.label_tag }}</td> <!-- テキストエリアの改行を有効にするため、「| linebreaksbr」を付与 --> <td>{{ input_form.memo.value | linebreaksbr }}</td> </tr> <!-- 入力確認 --> <tr> <td align="left" valign="top">{{ input_form.check.label_tag }}</td> <td>{{ lbl_checked }}</td> </tr> </table> <br/><br/> <!-- フォームの各値を次画面に渡すためhidden項目を設定 --> {% for field in input_form %} {{field.as_hidden}} {% endfor %} <input type="submit" name="send" value="送信" /> <input type="submit" name="back" value="戻る" /> </form> </body> </html> |
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>完了画面</title> </head> <body> お申し込みが完了しました。 </body> </html> |
さらに、demoフォルダ下、staticフォルダ下のCSSファイルの内容は以下の通りで、入力画面で利用している。
1 2 3 | .error_message{ color: #FF0000; } |
また、demoフォルダ下、forms.pyの内容は以下の通りで、入力画面で利用するフォームオブジェクトを定義している。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | from django import forms class InputForm(forms.Form): sex_data = [ ('1', '男'), ('2', '女') ] name = forms.CharField(label='名前', max_length=13) birth_day = forms.DateField(label='生年月日' , widget=forms.SelectDateWidget(years=range(1910, 2023)) , initial='2012-01-01') sex = forms.ChoiceField(label='性別', choices=sex_data , widget=forms.RadioSelect()) memo = forms.CharField(label='メモ' , widget=forms.Textarea(attrs={'rows': 6, 'cols': 40}) , required=False) check = forms.BooleanField(label='入力確認') |
なお、日付の入力項目はSelectDateWidgetで生成している。また、日付の妥当性チェックや「required=False」属性の無い項目の必須チェックも、自動で実施されるようになっている。
さらに、demoフォルダ下、urls.pyの内容は以下の通りで、入力画面・確認画面・完了画面の画面遷移時に呼び出すURLパスを指定している。
1 2 3 4 5 6 7 8 | from django.urls import path from . import views urlpatterns = [ path('', views.index, name='index'), path('confirm', views.confirm, name='confirm'), path('regist', views.regist, name='regist'), ] |
また、demoフォルダ下、views.pyの内容は以下の通りで、各画面でボタンが押下された場合の処理を定義している。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | from django.shortcuts import render from django.http import HttpResponse from .forms import InputForm # クラス定数を定義 SEX_LABEL_IDX = 1 # 性別のラベルを取得するためのインデックス def index(request): """ 入力画面を表示 """ # 確認画面に渡すフォームを初期化 params = { 'input_form': InputForm() } return render(request, 'demo/input.html', params) def confirm(request): """ 入力画面で確認ボタンが押下された時の処理を定義 """ # 入力画面でのフォーム値を取得し input_form = InputForm(request.POST) # フォームの入力チェックを行い、エラーがない場合 if input_form.is_valid(): # 確認画面で表示するための入力値(生年月日・性別)の値を生成 lbl_birth_day = request.POST['birth_day_year'] + '年' \ + request.POST['birth_day_month'] + '月' \ + request.POST['birth_day_day'] + '日' lbl_sex = input_form.sex_data[int(request.POST['sex']) - 1][SEX_LABEL_IDX] # 確認画面に渡す各変数を定義 params = { 'input_form': input_form, 'lbl_birth_day': lbl_birth_day, 'lbl_sex': lbl_sex, 'lbl_checked': '確認済' } return render(request, 'demo/confirm.html', params) # フォームの入力チェックを行い、エラーがある場合 else: # フォーム値はそのままで入力画面に戻る params = { 'input_form': input_form } return render(request, 'demo/input.html', params) def regist(request): """ 確認画面でボタンが押下された時の処理を定義 """ # 送信ボタンが押下された場合 if "send" in request.POST: # 将来的に、ここにDB登録処理を実装する予定 return render(request, 'demo/complete.html') # 戻るボタンが押下された場合 elif "back" in request.POST: # 確認画面でのフォーム値を入力画面に渡す input_form = InputForm(request.POST) params = { 'input_form': input_form } return render(request, 'demo/input.html', params) |
その他のソースコード内容は、以下のサイトを参照のこと。
https://github.com/purin-it/python/tree/master/make-django-web-somescreen/djangoApp
なお、今回は利用していないが、以下のサイトのように、フォームのas_p, as_ul, as_tableを利用できる場合は利用すると、簡単なソースコードでフォーム値の表示をきれいに行える。
https://www.nblog09.com/w/2019/04/09/django_form/
サンプルプログラムの実行結果
サンプルプログラムの実行結果は以下の通りで、画面遷移やエラーチェック処理が行えることが確認できる。
1) コマンドプロンプトでDjangoプロジェクト名のフォルダに移動し、「python manage.py runserver」コマンドを実行して、Webサーバーを起動する。
2) Webブラウザを起動し、「http://127.0.0.1:8000/demo/」にアクセスすると、以下のように、入力画面(input.html)の内容が画面表示されることが確認できる。
3) 何も入力せず「確認」ボタンを押下すると、以下のようなエラーメッセージが表示されることが確認できる。なお、下記は「名前」の例だが、「性別」「入力確認」も同様のエラーメッセージが表示される。
4) 生年月日に存在しない日付を入力し「確認」ボタンを押下すると、以下のようなエラーメッセージが表示されることが確認できる。
5) 以下のように、エラーにならないデータを指定し「確認」ボタンを押下すると、確認画面に入力画面の内容が表示される。さらに「戻る」ボタンを押下すると、入力画面に戻り入力値が復旧されることが確認できる。
6) 以下のように、メモを入力しないで「確認」ボタンを押下した場合も、確認画面に入力画面の内容が表示される。さらに「送信」ボタンを押下すると、完了画面に遷移することが確認できる。
要点まとめ
- Pythonフレームワーク「Django」には、HTML のフォームを生成するためのFormクラスが用意されていて、入力値のチェックを行う機能も含まれている。
- 画面遷移時のパスは、HTML formタグ内のaction属性のURLで、urls.pyに定義した画面遷移先のname属性の値を指定する。
- Djangoでは、デフォルトでCSRFの検証を行うため、POSTメソッドでフォームを送信する場合は「{% csrf_token %}」というタグを追加する必要がある。
- view.pyで、POSTメソッドで送信されたフォームの値を取得するには、requestオブジェクトのPOSTメソッドを利用する。
- view.pyでフォームの入力チェック結果を取得するには、Formクラスのis_validメソッドを利用する。
