茨の道も一歩から

インフラ構築からプログラミング(Python・JavaScript)までITに関するブログです。

Django入門：Contactアプリの制作

Django Python Web プログラミング 入門

はじめに

Contactアプリの作成

cd djpj
python manage.py startapp contact

フォームの作成

  • フォーム(contact\forms.py)の作成

forms.py

from django import forms

class ContactForm(forms.Form):
    title = forms.CharField(label='件名', max_length=128)
    email = forms.EmailField(label='Email', help_text='※お間違えが無いよう、再度ご確認下さい。')
    message = forms.CharField(label='内容', widget=forms.Textarea)

ルートとビューの作成

  • ビュー(contact\views.py)の編集

views.py

from django.shortcuts import render, redirect

from .forms import ContactForm

# Create your views here.
def index(request):
    return render(request, 'contact/index.html', {})

def contact(request):
    if request.method == 'POST':
        form = ContactForm(request.POST)
        if form.is_valid():
            return redirect('contact:sended')
    else:
        form = ContactForm()
    return render(request, 'contact/contact.html', {'form': form})

def sended(request):
    return render(request, 'contact/sended.html', {})
  • ルートファイル(contact\urls.py)の作成

urls.py

from django.urls import path

from . import views

app_name = 'contact'
urlpatterns = [
    path('', views.index, name='index'),
    path('contact/', views.contact, name='contact'),
    path('sended/', views.sended, name='sended'),
]

djpj/urls.py

from django.contrib import admin
from django.urls import path
from django.urls import include

urlpatterns = [
    path('hello/', include('hello.urls')),
    path('lp/', include('lp.urls')),
    path('corporate/', include('corporate.urls')),
    path('contact/', include('contact.urls')),
    path('admin/', admin.site.urls),
]

アプリの登録

djpj/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'lp.apps.LpConfig',
    'corporate.apps.CorporateConfig',
    'contact.apps.ContactConfig',
]

テンプレートの作成

  • templates\contactフォルダの作成
  • テンプレートファイル(index.html)の作成
  • テンプレートファイル(contact.html)の作成
  • テンプレートファイル(sended.html)の作成

contact\templates\contact\index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Contact | Django Template Test</title>
    </head>
    <body>
        <div class="container">
            <header>
                {% block header %}
                <h1>Contact App</h1>
                {% endblock%}
            </header>
            {% block main %}
            <main>
                <p>This page is index page.</p>
                <a href="contact/"><button>ご依頼・お問合せ</button></a>
            </main>
            {% endblock %}
            <footer>
                <small>copyright&copy;2020 mabo102.</small>
            </footer>
        </div>
    </body>
</html>

contact\templates\contact\contact.html

{% extends 'contact/index.html' %}

{% block main %}
            <main>
                <p>Contact</p>
                <form action="{% url 'contact:contact' %}" method="POST">
                    {% csrf_token %}
                    <table>
                        {{ form.as_table }}
                    </table>
                    <input type="submit" value="送信">
                </form>
            </main>
{% endblock %}

contact\templates\contact\sended.html

{% extends 'contact/index.html' %}

{% block main %}
            <main>
                <p>送信完了</p>
                <a href="../">ホームに戻る</a>
            </main>
{% endblock %}

動作確認

python manage.py runserver

終わりに

  • 今回は、フォームの使い方をご紹介しました。