前提
Gmailのみ
※Gmailを使った実装については後日記述いたします。
Djangoインストール済み
プロジェクト名：sample
アプリ名：contact
本題
早速実装していきます。
Djangoをインストールしたら、プロジェクトを作成します。
$ django-admin startproject project
cdコマンドでprojectディレクトリに移動したら、アプリのディレクトリを作成します。
$ python3 manage.py startapp contact
settings.pyを修正していきます。
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'contact', #追記
]
LANGUAGE_CODE = 'ja' #変更
TIME_ZONE = 'Asia/Tokyo' #変更
settings.pyと同じディレクトリにあるurls.pyにアプリが紐づくように編集します。
from django.contrib import admin
from django.urls import path, include # 追記
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('contact.urls')), # 追記
]
次はcontactディレクトリ内を編集します。
新しくurls.pyを作成し、URLパターンを記述します。
from django.urls import path
from . import views
app_name = 'contact'
urlpatterns = [
path('', views.index, name='index'),
path('contact_form/', views.contact_form, name='contact_form'),
path('contact_form/contact/complete/', views.complete, name='complete'),
]
テンプレートと紐づけるためにcontacディレクトリ内のviews.pyを編集します。
from django.shortcuts import render
def index(request):
return render(request, 'contact/index.html')
# お問い合わせフォーム画面
def contact_form(request):
return render(request, 'contact/contact_form.html')
# 送信完了画面
def complete(request):
return render(request, 'contact/complete.html')
続いてテンプレートの作成です。
contactディレクトリ内に新しくtemplatesというディレクトリ（フォルダ）を作成し、
templatesディレクトリ内にcontactディレクトリを作成し、
contactディレクトリ内にindex.htmlを作成していきます。
<!doctype html>
<html>
<head>
<title>Webサイト</title>
</head>
<body>
<center>
<a href="{% url 'contact:contact_form' %}">
<h2>お問い合わせフォーム</h2>
</a>
</center>
</body>
</html>
続いてお問い合わせフォームです。
<center>
<h1>入力フォーム</h1><hr><br>
</center>
送信完了画面です。
<center>
<h1>送信完了</h1>
<a href="{% url 'contact:index' %}">
<p>トップへ</p>
</a>
</center>
フォームの作成
DjangoのFormクラスを使ってテンプレートを表示させます。
contactディレクトリ内に新しくforms.pyを作成します。
from django import forms
class ContactForm(forms.Form):
subject = forms.CharField(label='件名', max_length=100)
sender = forms.EmailField(label='Email', help_text='※ご確認の上、正しく入力してください。')
message = forms.CharField(label='メッセージ', widget=forms.Textarea)
myself = forms.BooleanField(label='同じ内容を受け取る', required=False)
■subject：件名
■sender：Eメール入力
■help_text：後にテンプレートで表示される注意書き。
■message：書き込む内容、widget=forms.Textareaとすることで
複数行書き込めるテキストボックスが渡されます。
■myself：チェックボックス。
作成したContactFormをviews.pyのcontact_formで処理し、
テンプレートに表示できるようにします。
from django.shortcuts import render, redirect # 追記
from .forms import ContactForm # 追記
........
........
def contact_form(request):
if request.method == 'POST':
form = ContactForm(request.POST)
if form.is_valid():
return redirect('contact:complete')
else:
form = ContactForm()
return render(request, 'contact/contact_form.html', {'form': form})
.........
.........
POSTされたフォームの内容をform.is_valid()で検証し正しければ
complete.htmlに渡されるという記述です。
次に表示するための記述をしていきます。
contact_form.htmlを編集します。
<center>
<h1>入力フォーム</h1><hr><br>
<!--追記-->
<form action="{% url 'contact:contact_form' %}" method="post">
{% csrf_token %}
<table>
{{ form.as_table }}
</table><br>
<input type="submit" value="送信">
</form>
</center>
{% csrf_token %}はクロスサイトリクエストフォージェリ (CSRF) 対策。
これがないとエラーになってしまいます。
Gmailについては後日記述いたします。