本のリストの表示(ListView)


前回は、管理画面の作成と、管理画面を使ったデータの投稿方法について見ていきました。

次に、投稿したデータをウェブサイトに表示する方法について学んでいきましょう。

結論からお伝えすると、データベースに保存した内容を表示させる場合は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の設定を進めていきましょう。

~Django無料講義~のご案内

Code for Djangoが、4時間超の無料Django講義をはじめました
 
・本を出版したCode for Djangoの
 製作者が作ったサイトです。
 
・Code for Djangoの内容も、
 動画で詳しく解説しています。
 
・動画は順次ふやしていきますので、
 ただで学び続けることが可能です。
 
・Djangoの効率的なスキルアップに、
 是非お役立て下さい。

                                                                  Django講義はこちら
Created with