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

コメントの詳細表示

コメントの詳細情報を表示するページを作成しよう．詳細表示も DetailView を使うと簡単に作成できてしまいます．views.py を編集します．わずか3行を追加するだけです． 

comments/views.py
# from django.shortcuts import render
# from django.http import HttpResponse
from django.views.generic import ListView
from django.views.generic import DetailView
from .models import Comment

# Create your views here.

class CommentIndexView(ListView):
    model = Comment

class ShowCommentView(DetailView):
    model = Comment

ルート情報を urls.py に記述します．なお，9行目の pk は Primary Key（主キー）を意味しています．つまり，URLが http://127.0.0.1:8000/1/ のようになり，主キーである id が 1 であるコメントデータを取得して表示することを意味しています． 

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

さらに，comment_detail.html を作成するが，comment_list.html と殆どが同じであるので，comment_list.html をコピーして一部だけ編集すると良い． 

comments/templates/comments/comment_detail.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>コメント {{ comment.id }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
{% 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>
    </div>
{% endblock content %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>

さらに，一覧表示ページから各コメントの詳細ページへ移動するためのリンクを設置しよう． 

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 %}
    </div>
{% endblock content %}

一覧表示のタイトルにリンクが設置され

django2022-00008

リンクをクリックすると http://127.0.0.1:8000/1/ のようなページに移動して，詳細情報が表示できるようになった．

django2022-00009

目次に戻る

« 戻る 次へ »