本棚アプリケーションの作成【4-6詳細画面(DatailViewの作成)】

urls.pyファイルとviews.pyファイル

まずはurls.pyファイルを編集していきます

bookproject/book/urls.py

from django.urls import path

from . import views

urlpatterns = [

    path('book/', views.ListBookView.as_view()),

]

を

from django.urls import path

from . import views

urlpatterns = [

    path('book/', views.ListBookView.as_view()),

    path('book/detail/', views.DetailBookView.as_view())

]

に編集

次にviews.pyファイルを編集していきます。

from django.shortcuts import render

from django.views.generic import ListView

from .models import Book

class ListBookView(ListView):

    template_name = 'book/book_list.html'

    model = Book

を

from django.shortcuts import render

from django.views.generic import ListView, DetailView

from .models import Book

class ListBookView(ListView):

    template_name = 'book/book_list.html'

    model = Book

class DetailBookView(DetailView):

    template_name = 'book/book_detail.html'

    model = Book

に編集

次にhtmlファイルを作成していきます。)

(venv) $ touch book/templates/book/book_detail.html

そして作成したbook_detail.htmlファイルに以下のコードを書き込む

{{ object.category }}

{{ object.title }}

{{ object.text }}

そしてサーバーを立ち上げてhttp://127.0.0.1:8000/book/detail/にアクセス

(venv) $ python manage.py runserver 

すると、エラーが出てしまいました。

エラーを修正する

エラーを修正するためにurls.pyファイルを編集します。

from django.urls import path

from . import views

urlpatterns = [

    path('book/', views.ListBookView.as_view()),

    path('book/detail/', views.DetailBookView.as_view())

]

を

from django.urls import path

from . import views

urlpatterns = [

    path('book/', views.ListBookView.as_view()),

    path('book/<int:pk>/detail/', views.DetailBookView.as_view())

]

に編集

idを確認する方法

サーバーを立ち上げて、http://127.0.0.1:8000/admin/にアクセスし、管理画面を表示させましょう。

（venv）$ python manage.py runserver 

そしたらBooksをクリックし、料理本をクリックし、そのページのURLを見ると番号が入っています。

今回の画面では「2」が入っています。

ここで、ブラウザから作成した記事を読みだしてみましょう。

上の画像の記事idは２ですので、ブラウザで127.0.0.1:8000/book/2/detail/と入力します。すると次のような画面が表示されます。

先ほど管理画面で見たidが2のデータと同じことがわかります。

このように、idを使うことで個別のデータを表示させることができました。