Python | Django | フォームの使い方
公開日：2021/7/7
Pythonには，DjangoというWebアプリケーションフレームワークがある．フレームワークのため，Djangoを利用するとWebアプリを通常よりも短時間で開発することが可能になる．
本記事では，「フォームを使い方」を以下3つの構成にて記す．
◆実施環境
Python 3.8.8
Django 3.2.3
■フォームを使い方
新しくフォルダ”myformtest”を作成し，VS Codeから当該フォルダを開く．
フォルダを開くと以下のようになる．
ターミナルを開き，”conda activate 仮想環境名”を実行し，仮想環境に移行する(移行方法の詳細はこちら)．”myformtest”のディレクトリで”django-admin startproject プロジェクト名”を実行する．私の場合，form_projectをプロジェクト名としたので，以下のように実行する．
(djangoenv) C:\Users\shiro\Desktop\210517_python development\myformtest
>django-admin startproject form_projectプロジェクトである"form_project"が以下のように作成される．
“cd model_project"を実行し，カレントディレクトリを"form_project"にする．その後，"python manage.py startapp アプリ名"を実行する．私の場合，form_appをアプリ名としたので，以下のように実行する．
(djangoenv) C:\Users\shiro\Desktop\210517_python development\myformtest\form_project
>python manage.py startapp form_appアプリの"form_app"が以下のように作成される．
“python manage.py migrate"を実行する．以下のように出力されれば成功となる．
Operations to perform:
Apply all migrations: admin, auth, contenttypes, sessions
Running migrations:
Applying contenttypes.0001_initial... OK
Applying auth.0001_initial... OK
Applying admin.0001_initial... OK
Applying admin.0002_logentry_remove_auto_add... OK
Applying admin.0003_logentry_add_action_flag_choices... OK
Applying contenttypes.0002_remove_content_type_name.. OK
Applying auth.0002_alter_permission_name_max_length... OK
Applying auth.0003_alter_user_email_max_length... OK
Applying auth.0004_alter_user_username_opts... OK
Applying auth.0005_alter_user_last_login_null... OK
Applying auth.0006_require_contenttypes_0002... OK
Applying auth.0007_alter_validators_add_error_messages... OK
Applying auth.0008_alter_user_username_max_length... OK Applying auth.0009_alter_user_last_name_max_length... OK
Applying auth.0010_alter_group_name_max_length... OK
Applying auth.0011_update_proxy_permissions... OK
Applying auth.0012_alter_user_first_name_max_length.. OK
Applying sessions.0001_initial... OK同時にデータベースである"db.splite3″も以下のように作成される．
“model_project/settings.py"の"INSTALLED_APPS"に作成したアプリ名"form_app"を追加する．追加後，以下のようになる．
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'form_app', # 追記箇所
]“form_project"にフォルダ"templates"を作成し，その中にフォルダ"form_temp"を作成する．"form_temp"の中に"form_page.html"と"index.html"を以下のように作成する．
“form_project/settings.py"の以下箇所にコードを追記し，編集する．
from pathlib import Path
import os # 追記箇所
BASE_DIR = Path(__file__).resolve().parent.parent
TMP_DIR = os.path.join(BASE_DIR,'templates')
# 追記箇所また，"form_project/settings.py"のTEMPLATESの"[ ]"内に"TMP_DIR"を入れ，以下のように編集する．
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [TMP_DIR], # 追記箇所
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]その後，"form_app"に"forms.py"を以下のように作成する．
“form_app/forms.py"を以下のように編集する．
from django import forms
class ChocolateInfo(forms.Form):
Chocolate_name = forms.CharField(max_length=50)
Chocolate_maker = forms.CharField(max_length=50)
mail = forms.EmailField()“form_app/views.py"を以下のように編集する．
from django.shortcuts import render
from . import forms
def index(request):
return render(request, 'form_temp/index.html')
def form_page(request):
form = forms.ChocolateInfo()
return render(
request,'form_temp/form_page.html', context={
'form':form
}
)“form_app"に"urls.py"を以下のように作成する．
“form_app/urls.py"を以下のように編集する．
from django. urls import path
from . import views
app_name = 'form_application'
urlpatterns = [
path('', views.index, name='index'),
path('form_page/', views.form_page, name='form_page'),
]“form_project/urls.py"に以下コードを追記し，以下のように編集する．
from django.contrib import admin
from django.urls import path, include # 追記箇所
urlpatterns = [
path('admin/', admin.site.urls),
path('form_application/', include('form_app.urls')), # 追記箇所
]“templates/form_temp/index.html"は以下のように編集する．
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HOME</title>
</head>
<body>
<h2>ホームページ</h2>
<a href="{% url 'form_application:form_page'%}">Go to Form</a>
</body>
</html>“templates/form_temp/form_page.html"は以下のように編集する．Djangoでは，ログイン情報を悪用する攻撃から防ぐため，CSRF protection(Cross Site Request Forgery protection; クロスサイトリクエストフォージェリ)を必ず利用する．
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form</title>
</head>
<body>
<form method="POST">
{% csrf_token %}
<table>
{{form.as_table}}
</table>
<input type="submit" value="submit">
</form>
</body>
</html>ターミナルを開き，”conda activate 仮想環境名”を実行し，仮想環境に移行する．”form_project”のディレクトリに移動し，以下のように"python manage.py runserver"を実施する．
(djangoenv) C:\Users\shiro\Desktop\210517_python
development\myformtest\form_project>python manage.py runserverターミナルに以下が出力される．
System check identified no issues (0 silenced).
July 06, 2021 - 18:28:03
Django version 3.2.3, using settings 'form_project.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.“http://127.0.0.1:8000/”をクリックし，ブラウザを開くと以下のように表示される．
“http://127.0.0.1:8000/form_application”をクリックし，ブラウザを開くと以下のように表示される．
上記画像の"Go to Form"をクリックすると以下ページ(form_page.html)に遷移する．
以下のように入力して，"submit"をクリックする．
“form_app/views.py"に11～17行目を追加し，以下のように編集する．
from django.shortcuts import render
from . import forms
def index(request):
return render(request, 'form_temp/index.html')
def form_page(request):
form = forms.ChocolateInfo()
if request.method == 'POST':
form = forms.ChocolateInfo(request.POST)
if form.is_valid():
print('submission is successful')
print(f'chocolate_name:{form.cleaned_data["chocolate_name"]}, chocolate_maker:{form.cleaned_data["chocolate_maker"]}, mail:{form.cleaned_data["mail"]}')
else:
print('submission is failed')
return render(
request,'form_temp/form_page.html', context={
'form':form
}
)以下のように入力して，"submit"をクリックする．
上記で入力した以下値がターミナルに出力される．
・chocolate_name: Fran
・chocolate_maker: Meiji
・mail: fran@gmail.com
submission is successful
chocolate_name:Fran, chocolate_maker:Meiji, mail:fran@gmail.com
[06/Jul/2021 19:51:58] "POST /form_application/form_page/ HTTP/1.1" 200 823以上