本棚アプリケーションの作成【4-5一覧画面(ListView)】
urls.pyファイルの作成
前回作成したurls.pyを編集してViews.pyファイルで定義するListBookViewというclassを呼びだす流れを作成していきます。
bookproject/book/urls.py
urlpatterns = []
を以下のように変更
from . import views
urlpatterms = [
path('book/', views.ListBookView.as_view()),
]
views.pyファイルの作成
次にviews.pyファイルにコードを書いていきます。
bookproject/book/viwes.py
を以下のように編集
from .models import Book
class ListBookView(ListView):
template_name = 'book/book_list.html'
model = Book
models.pyファイルの作成
models.pyファイルの作成を進めていきます。
まずはタイトル、内容、カテゴリーの３つの情報を扱えるようにしていきます。
bookproject/book/models.py
class SmpleModel(models.Model):
title = models.CharField(max_length=100)
number = models.IntegerFirld()
を以下のように変更
モデルの定義はclassによって行います。classの名前は今回はBookとします
そして、modelsモジュールの中のModelクラスを継承させるために、Bookの中でmodels.Modelというこーどを書いています。
またSampleModelの削除に伴い、admin.pyファイルで書いたこーども削除します。
bookproject/book/admin.py
を以下のように変更
Djangoで準備されているフィールド
ここで、Djangoで準備されているフィールドの一部を紹介します。
次のURLをブラウザに入力することによって、Djangoが準備しているフィールドを確認することができます。
「https:/docs.djangoproject.com/ja/3.2/ref/models/fields/」
Djangoで準備されているフィールドを3つ使用します
「CharField」「TextField」「CharField」
作成したファイルをデータベースに反映させるため、bookprojectディレクトリに移動した上で、mkemigrationsとmigrateコマンドを実行しましょう。次のコマンドを実行します。
(venv) $ python3 manage.py makemigrations
(venv) $ python3 manage.py migrate
ここでエラー、「データベースが見つかりません」と出てきたので一旦
(venv) $ python3 manage.py migrate --fake book zero
を実行して、再度migrateコマンドを実行
(venv) $ python3 manage.py migrate
bookproject/book/admin.py
を以下のように編集
(venv) $ python3 manage.py runserver
管理画面からいくつかデータを作成していきます。上の画像のBooksの右にあるAddをクリックして
上の画像の画面から以下のデータを入力して作成
①
Title:ビジネス本
Text:ビジネスのノウハウについて
Category:ビジネス
②
Title:料理本
Text:おいしい料理の作り方について
Category:生活
作成したら
上の画像のようになります。
この状態だとタイトルがBook objectとなっており、これではタイトルから中身を推測することができません。この記載を変更するためにmodels.pyファイルに一部こーどを追加します
bookproject/book/models.py
CATEGORY = *2
class Book(models.Model):
title = models.CharField(max_length=100)
text = models.TextField()
category = models.CharField(
max_length=100,
choices = CATEGORY
)
を
CATEGORY = *3
class Book(models.Model):
title = models.CharField(max_length=100)
text = models.TextField()
category = models.CharField(
max_length=100,
choices = CATEGORY
)
def __str__(self):
return self.title
に編集,再度サーバーを立ち上げ、管理画面に入ってデータを表示させましょう。
するとタイトルが表示されます。
htmlファイルを作成していきます。今回はbookアプリ直下にtemplatesディレクトリを作成し、そこにbookファイルを作成し、そこにhtmlファイルを作成していきます。
(venv) $ cd book
(venv) $ mkdir templates
(venv) $ cd templates
(venv) $ mkdir book
(venv) $ cd book
(venv) $ touch book_list.html
そして作成したhtmlファイルに以下のこーどを書きます
bookproject/book/templates/book/book_list.html
{% for item in object_list %}
{{ item.title }}
{{ item.text }}
{{ item.category }}
{% endfor %}
そしてサーバーを立ち上げて
(venv) $ python3 manage.py runserver
にアクセスします
データが順番に表示されていることが確認できました。
そしたらまたbook_list.htmlファイルを編集していきます
{% for item in object_list %}
{{ item.title }}
{{ item.text }}
{{ item.category }}
{% endfor %}
を
{% for item in object_list %}
<ul>
<li>{{ item.title }}</li>
<li>{{ item.text }}</li>
<li>{{ item.category }}</li>
</ul>
{% endfor %}
に編集
そして再度http://127.0.0.1:8000/book/にアクセス
すると、リストとしてデータが縦に表示されます。
