前回は、管理画面の作成と、管理画面を使ったデータの投稿方法について見ていきました。
次に、投稿したデータをウェブサイトに表示する方法について学んでいきましょう。
結論からお伝えすると、データベースに保存した内容を表示させる場合はclass based viewを使います。
なぜなら、class based viewにはデータベースに保存された内容を簡単に表示させるための機能が備えられているからです。
早速、views.pyを編集していきましょう。
コード-BASE/booklibrary/views.py
1 from django.views.generic import ListView ← new!
2 from .models import BookModel ← new!
3 class BookListView(ListView): ← new!
4 model = BookModel ← new!
5 template_name = booklist.html ← new!
コードの解説(1) 1行目でListViewクラスを読み込んでいます。ListViewは、データのリスト(今回であればBookModelに入っている本のデータ)を便利に表示させるためのメソッドや属性が入っているクラスです。
ほかにもいくつか種類がありますが、リストを表示するときにはListViewを使うと便利、と覚えておきましょう。
汎用ビュー(class based view)の種類については、汎用ビューの種類をざっくりと紹介という記事で紹介していますので、参考にしてみてください。
(2) 2行目でBookModelを読み込んでいます。なぜこのモデルを読み込んでいるのかは、のちほど説明していきます。
(3) BookListViewクラスを作りました。ListViewを承継することによって、ブラウザへの表示や使うデータベースを簡単に制御することができるようになります。
例えば、4行目のmodel = BookModelです。
これは、このBookListViewクラスが呼び出されたときに使うデーターベーステーブルはBookModelです。ということを伝えています。
そして、このBookModelはmodels.pyファイルに書かれていますので、2行目でBookModelが書かれている場所を指定していたのです。
(5) 5行目を見ていきましょう。template_nameと書かれています。
djangoでは、template_nameを指定することで、このクラス(BookListView)呼び出されたときにブラウザに表示するhtmlファイルを指定することができるようになります。
少し長くなってしまいましたが、class based viewを使うことによって、データの制御が簡単になるというイメージを持つとよいでしょう。
htmlファイルの作りこみ
次に、このクラスが呼び出されたときに表示されるhtmlファイル(つまり、booklist.htmlファイル)を作っていきましょう。
はじめの方で、settings.pyファイルを編集し、TEMPLATES = ['DIRS': [BASE_DIR, 'templates']]としたことを覚えていますか?
これは、htmlファイルなどを、BASE_DIR(manage.pyファイルが入っている階層)にあるtemplatesフォルダの中に入れますよ。という宣言しているものでした。
ですので、manage.pyが入っている階層で新しくtemplatesフォルダを作り、その中にbooklist.htmlファイルを作りましょう。
コマンドライン-BASE
$ mkdir templates
フォルダ構成bookproject
booklibrary
manage.py
templates ← new!
コマンドライン$ cd templates
$ touch booklist.html
booklist.htmlファイルを開き、設定を進めていきましょう。
コード-BASE/templates/booklist.html
1 {% for item in object_list %}
2 {{ item.name }}
3 {% endfor % }
アウトプット(1) 1行目のobject_listは、テーブルに入っているデータのことです。この場合は、models.pyファイルに入っているBookModelの情報が入っています。
これをfor文で順番に取り出し、それをitemに順番に入れていきます。
(2) item.booknameというのは、object_listから取り出されたデータの属性を示しています。
ちなみに、BookModelでは、bookname、summary、ratingの3つの属性を定義しました。
これで完成です。
最後に、urlとviewの関連付けがまだですので、この設定を進めていきましょう。
今回はlocalhost:8000/book/booklistというurlにするような設定をしていこうと思います。
コード-BASE/booklibrary/urls.py
from django.urls import path
from .views import BookListView, ← new!
urlpatterns = [
path('list/', BookListView.as_view(), name='list'), ← new!
]
これはhello worldの記事で書いた内容とほぼ同じですので、詳しい説明は省略します。
これで設定が完了しました。
サーバーを立ち上げて、localhost:8000/book/listでリクエストを投げてみましょう。
無事に本のリストが表示されていることが分かりました。
ListViewを学んだあとは
次は、それぞれの本の詳細情報を表示するためのDetailViewの設定を進めていきましょう。