前回までの記事ではListViewの設定を進めてきましたが、本棚アプリの最後のステップとして、それぞれの本の詳細データを表示するDetailViewを作っていきましょう。
bookdetail.htmlファイルの作成
まずはhtmlファイルの作成からです。
コマンドライン-BASE/templates
$ touch bookdetail.html
これでbookdetail.htmlファイルを作ることができました。次に、このファイルを編集していきましょう。
コード-BASE/templates/bookdetail.html
{{ object.title}}
{{ object.summary }}
{{ object.rating }}
これでデータベースに保存したtitle、summary、ratingのデータを取り出すことができます。
（title、summary、ratingはBookModelで定義したフィールドの名前ということを思い出しましょう。）
ただ、これではどの投稿の内容を取り出すのか整理ができていないですよね。
（Aという本なのか、Bという本なのか分からないですよね。）
ListViewではすべてのデータを表示するので、個別のデータをどうやって抽出するのかという悩みはなかったのですが、DetailViewでは表示するデータを指定しなければいけません。
表示するデータのコントロールは、urls.pyファイル行います。実際にコードを書いていきましょう。
どの投稿内容を表示させるのかコントロールする
どの投稿を表示するのかコントロールする方法についてみていきます。
結論としては、モデル作成時に自動的に作られるprimary keyを使います。
primary keyとは、一つ一つの投稿の通し番号のようなイメージです。
一つのテーブルの中でprimry keyが重複することはありません。
補足BookModelではPrimary keyというフィールドは作っていませんが、djangoはテーブルを作るとき、自動的にprimary keyというフィールドを作ってくれるということを頭に入れておきましょう。
実際にコードを書いていきます。
コード-BASE/booklibrary/urls.py
from django.urls import path
from .views import BookListView, BookDetailView ← new!
urlpatterns = [
path('list/', BookListView.as_view(), name='list'),
path('detail/<int:pk>/', BookDetailView.as_view(), name='detail'), ← new!
]
新たに追加した文に注目してみましょう。
detail/<int:pk>と書かれています。
これが、投稿ページを使い分けるための方法です。
pkはprimary keyの略ですので、<int:pk>の部分にprimary keyの番号を入れることによって、個別の投稿の内容を表示することができるようになります。
例えば、localhost:8000/book/detail/5とすれば、primary keyが5の投稿が表示されるようになるのです。
補足なぜpkと書くだけでprimary keyとわかるのかというと、djangoがあらかじめそのように設定してくれているからです。
このように、設定が簡単だからこそ全体像が見えづらくなってしまうこともありますが、少しずつ知識を増やしていけば問題ありません。
一つずつ学んでいきましょう。
最後に、views.pyの中身を編集していきましょう。
-BASE/booklibrary/views.py
1 from django.views.generic import ListView, DetailView
2 from .models import BookModel
3 class BookListView(ListView):
4 model = BookModel
5 template_name = booklist.html
6 class BookDetailView(DetailView): ← new!
7 model = BookModel ← new!
8 template_name = bookdetail.html ← new!
[/python]6～8行目が新たに追加したコードです。内容自体はListViewとほとんど同じです。
実際にサーバーを立ち上げて確認してみましょう。
localhost:8000/book/detail/2というurlをブラウザに投げてみます。
これは、primary keyが2番の投稿の内容です。
これで、投稿の詳細ページを作ることができました。
DetailViewの場合、primary keyなどを使って、表示するデータを指定する必要があるということを頭に入れておきましょう。
