コメントの詳細情報を表示するページを作成しよう.詳細表示も 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 %}
一覧表示のタイトルにリンクが設置され
リンクをクリックすると http://127.0.0.1:8000/1/ のようなページに移動して,詳細情報が表示できるようになった.