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

2023.08.20
Django

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

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

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

魅せるIT編集部

2023.08.19

Django | Djangoでログインユーザ情報を取得/表示してみる

https://miseruit.com/2023/08/19/post-5354

みなさん、こんにちは！前回の続きとして、ログイン後のTOP画面にユーザ情報を表示するように設定します。ユーザ情報はどこに格納されるのか？ログイン後のユーザ情報は「request」オブジェクトに格納されます。実際に取り出してみます。login.htmlを以下のように編集します。<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><title>ログイン成功</title></head><body> <p>こんにちは！{{request.user}}さん</p> <p>ログイ...

1. 入力フォームを作成する
2. 動作確認
- 2.1. フォームへの入力
- 2.2. 登録ボタン（POST）押下時
3. 本日のAmazonおすすめ_Top10

入力フォームを作成する

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

１）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)

２）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'

３）テンプレート「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>

４）テンプレート「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>

５）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'),
]