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

コメントの詳細表示

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

comments/views.py （抜粋）
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, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <title>コメント {{ comment.id }}</title>
</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 %}

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" 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 %}

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

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

目次に戻る

« 戻る次へ »