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 によるコメント掲示板の開発

コメントの編集機能を追加する

新規投稿機能の次の機能として，コメントの編集（更新）機能を実現しよう．まず，views.py にクラスを追加する．

comments/views.py
from django.urls import reverse_lazy
from django.views.generic import ListView
from django.views.generic import DetailView
from django.views.generic import CreateView
from django.views.generic import UpdateView
from .forms import CommentForm
from .models import Comment

# Create your views here.

... （中略） ...

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

class UpdateCommentView(UpdateView):
    model = Comment
    form_class = CommentForm
    success_url = reverse_lazy('comments:index')

次に，ルートを記述する．

comments/urls.py
from 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'),
    path('<int:pk>/update/', views.UpdateCommentView.as_view(), name='update'),
]

さらに，詳細表示ページに「編集」リンクを設置する．

 comments/templates/comments/comment_detail.html（抜粋）
{% block content %}
  <div class="container">
    <h1 class="my-5">コメント {{ comment.id }}</h1>
    <div class="card mb-3">
      <div class="card-header">
        ID : {{ comment.id }}
      </div>
      <div class="card-body">
        <p class="card-text">Title : </p>
        <h5 class="card-title">{{ comment.title }}</h5>
        <p class="card-text">Body : </p>
        <p class="card-text">{{ comment.body }}</p>
      </div>
      <div class="card-footer">
        Created at : {{ comment.created_at }}<br>
        Updated at : {{ comment.updated_at }}
      </div>
    </div>
    <hr>
    <div>
      <p>
        <a href="{% url 'comments:update' comment.id %}">
          [ 編集 ]
        </a>
      </p>
    </div>
  </div>
{% endblock content %}

なおフォームを表示するための HTML は新規投稿のフォームと同じものが使われるため，ここで作成する必要はない．

詳細表示ページの最下部にある [編集] をクリックする．

投稿フォームに投稿された内容が表示されるので，中身を書き換えて [コメントを投稿する] ボタンをクリックする（ボタンのラベルなどが新規投稿時と変わらないのでこれは後で変更する）．

コメントのタイトルや本文も変更されていることが確認できました．

目次に戻る

---