Python Django 入門トップページ


Django によるコメント掲示板の開発:目次

  1. プロジェクトの作成
  2. Git でコミット
  3. Web サーバを起動しておく
  4. Config
  5. Comments アプリケーションを作る
  6. アプリケーションを有効にする
  7. はじめてのビューを作成する
  8. モデルを作る
  9. マイグレーション
  10. テストデータの設定
  11. データベースからコメント一覧を取得して表示してみよう
  12. Bootstrap の導入
  13. コメントの詳細表示
  14. urls.pyの書き方
  15. HTML のテンプレート化
  16. コメントの新規投稿
  17. コメントの編集機能を追加する
  18. さらにテンプレート化
  19. モデル,マイグレーションファイル,フォームの関連
  20. 入力内容の検証(バリデーション)
  21. コメントを削除する
  22. 一覧を逆順にする
  23. ページネーション
  24. フラッシュメッセージ
  25. Static コンテンツの設置
  26. 更新や削除にもフラッシュメッセージを表示
  27. テストの自動化を実現しよう
  28. デバッグツールバーを使う
  29. generic モジュールを使わずにコメント一覧を取得する
  30. コメント一覧のページネーション
  31. 一覧の表示順序を制御する
  32. generic モジュールを使わずにコメントの詳細を表示する
  33. コメント詳細にページ送り機能を作成する
  34. generic モジュールを使わずにコメント登録機能を作成する
  35. generic モジュールを使わずにコメント編集機能を作成する
  36. generic モジュールを使わずにコメント削除機能を作成する

Django によるコメント掲示板の開発

コメントの新規投稿

次は,コメントの投稿機能の作成に取り掛かろう.まずは,コメントの新規投稿画面と更新画面で共通するフォームの部品(title と body の入力ボックス)を設計する.このために,comments/forms.py を新規に作成する.

comments/forms.pyfrom django import forms
from .models import Comment

class CommentForm(forms.ModelForm):

    class Meta:
        model = Comment
        fields = ('title', 'body')
        widgets = {
              'title': forms.TextInput(attrs={
                  'class': 'form-control'
              }),
              'body': forms.TextInput(attrs={
                  'class': 'form-control'
              }),
        }
        labels = {
            'title': 'タイトル',
            'body': '本文',
        }

views.py (まだコードを入力していない)からは モデル名_form.html が呼び出されるので,commment_form.html を作成し,フォームの中に投稿ボタンを設置し,フォームの中にいま作成した fomrs.py を12行目のように入れる.

comments/templates/comments/comment_form.html{% extends 'base.html' %}

{% block title %}
コメント投稿
{% endblock %}

{% block content %}
    <div class="container">
        <h1 class="my-5">投稿フォーム</h1>
        <form method="POST">
            {% csrf_token %}
            {{ form.as_p }}
            <button type="submit" class="btn btn-primary">コメントを投稿する</button>
        </form>
    </div>
{% endblock content %}

views.py に CreateCommentView クラスを設置する.なお,15行目は投稿が成功したときに,comments アプリケーションの index という名前のルートにリダイレクトするという意味である.これはつまり,comments/urls.py の 7行目で name='index' と定義されたトップページへとリダイレクトすることを意味している.

comments/views.pyfrom django.urls import reverse_lazy
# from django.shortcuts import render
# from django.http import HttpResponse
from django.views.generic import ListView
from django.views.generic import DetailView
from django.views.generic import CreateView
from .forms import CommentForm
from .models import Comment

# Create your views here.

class CommentIndexView(ListView):
    model = Comment

class ShowCommentView(DetailView):
    model = Comment

class CreateCommentView(CreateView):
    model = Comment
    form_class = CommentForm
    success_url = reverse_lazy('comments:index')

最後に,ルートを記述する.

comments/urls.pyfrom django.urls import path

from . import views

app_name = 'comments'

urlpatterns = [
    path('', views.CommentIndexView.as_view(), name='index'),
    path('<int:pk>/', views.ShowCommentView.as_view(), name='show'),
    path('create/', views.CreateCommentView.as_view(), name='create'),
]

この作業によって,http://127.0.0.1:8000/create/ から新規にコメントを投稿できるようになった.

django2022-00010

投稿が成功すれば,下図のトップページにリダイレクトされ,そのページの最下部に投稿した内容が表示されていることが確認できる.

django2022-00011

投稿ができるようになったので,コメント一覧のページから投稿ページにリンクを張っておく.

comments/templates/comments/comment_list.html (抜粋){% block content %}
    <div class="container">
        <h1 class="my-5">コメント一覧</h1>
        {% for comment in object_list %}
            <div class="card mb-3">
                <div class="card-body">
                    <h5 class="card-title">
                        <a href="{% url 'comments:show' comment.id  %}">
                            {{ comment.title }}
                        </a>
                    </h5>
                    <p class="card-text">{{ comment.body }}</p>
                </div>
            </div>
        {% endfor %}
        <hr>
        <div>
            <p>
                <a href="{% url 'comments:create' %}">
                    新規コメントの投稿
                </a>
            </p>
        </div>
    </div>
{% endblock content %}

目次に戻る