Django | 件名、詳細の入力フォームを作成してみる

Django | 件名、詳細の入力フォームを作成してみる

前回の続きとして、入力フォームを作ってみようと思います。

ログイン完了し、トップページに遷移すると、以下のような画面が表示されるようにします。

前回の記事はこちらから↓

入力フォームを作成する

まずは「件名」「詳細」が入力できるように、入力フォームを作成しましょう。

1)Forms.pyを編集する

今回はFormsクラスを用います。以下のコードを加えます。

CharField()は文字列用のフィールド、CharField(widget=forms.Textarea)はテキストエリア用のフィールドとなります。

from django import forms

class BlogForm(forms.Form):
    title = forms.CharField()
    detail = forms.CharField(widget=forms.Textarea)

2)views.pyからFormのBlogFormクラスを読み込む

Forms.pyに「BlogForm」というクラスを追加しました。こちらをviews.pyに読み込ませます。

また top画面にフォームを表示するため、TemplateViewからFormViewに変更します。

from django.contrib.auth.mixins import LoginRequiredMixin
from django.shortcuts import render
from django.shortcuts import redirect

from django.views.generic import FormView,TemplateView
from django.contrib.auth.views import LoginView,LogoutView
from .forms import LoginForm,BlogForm

class Login(LoginView): #LoginViewクラスを継承
    form_class = LoginForm #先ほど作成したLoginFormクラスを読み込む
    template_name = 'template/login.html' #Loginフォームのテンプレート

class Logout(LogoutView): #LogoutViewクラスを継承
    template_name = 'template/logout.html'

class top(LoginRequiredMixin, FormView):
    form_class = BlogForm
    login_url = '/login/'

    def get(self, request):
        context = self.get_context_data()
        return render(request, 'template/top.html', context) 

    def post(self, request):
        return redirect('result')

class result(TemplateView): 
    template_name = 'template/result.html'

3)テンプレート「top.html」の編集

top.htmlを編集し、フォームが表示されるようにします。

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>ログイン成功</title>
</head>

<body>
    <p>こんにちは!{{request.user}}さん</p>
    <p>あなたは
        {% if request.user.is_superuser %}
        管理者
        {% elif request.user.is_staff %}
        スタッフ
        {% else %}
        一般ユーザ
        {% endif %}
        です。
    </p>
    <p>ログイン成功しました</p>
    <hr>
    <form action="" method="POST">
        <div>{{ form.title.label }}:{{ form.title }}</div>
        <div>{{ form.detail.label }}:{{ form.detail }}</div>
        <button type="submit">登録</button>{% csrf_token %}
    </form>
    <hr>
    <a href="{% url 'logout' %}"><p>ログアウト</p></a>
</body>

</html>

4)テンプレート「result.html」の作成

POST時はresult.htmlに誘導します。

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>登録完了</title>
</head>

<body>
    <p>登録完了しました</p>
    <a href="{% url 'top' %}"><p>TOP画面へ戻る</p>
</a>
</body>

</html>

5)urls.pyを編集

resultをリダイレクトするために、urlpatternsに追記します。

from django.contrib import admin
from django.urls import path
from app0001 import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('top/', views.top.as_view(), name='top'),
    path('result/', views.result.as_view(), name='result'),
    path('login/', views.Login.as_view(), name='login'),
    path('logout/', views.Logout.as_view(), name='logout'),
]

動作確認

では動作確認します。

フォームへの入力

登録ボタン(POST)押下時

result.htmlが表示され、POSTされたデータが表示されています。

今回は以上です。

本日のAmazonおすすめ_Top10

2024-05-22 20:12:41時点