Django開発~ショッピングカート構築編2~商品一覧作成②

django

Django開発~ショッピングカート構築編1~商品一覧作成①の続きです。

今回は、前回作成した商品一覧を完成させましょう。

商品一覧取得

DBから商品一覧を取得し、product_list.htmlに表示させたいと思います。

まずは、その為のテストコードを書きましょう。

「localhost:8000」にアクセスしたとき、プロダクト一覧を取得するテストです。

現状は、「localhost:8000」にアクセスしても何もデータを返さないので、エラーになるはずです。

「assert ‘dog’ in [product.name for product in response.context[‘products’]]
」部分は少し補足しておきます。

まず、クライアントがリクエストを送って、Djangoがレスポンスを返す時に「context」プロパティに、Productデータのクエリリストを格納するように実装します。

ここで示すデータとは、「dig, rabbit, cat」の事です。

返却されたデータ内に意図したデータが存在するかチェックしたわけです。

また、「[product.name for product in response.context[‘products’]]」は、Pythonの「リスト内方表記」という書き方です。

for文のプログラムをより短縮して記述することができます。

それでは、テストを実行しましょう。

KeyErrorが出ました。これは、localhost:8000アクセス後、Djangoから「products」が返却されなかったことを示しています。

views.pyを修正しましょう。

テストを実行します。

「assert ‘cat’ not in [product.name for product in response.context[‘products’]]」のアサーションでエラーが発生しています。

実は、「cat」プロダクトのavailableプロパティを「False」に指定しているので、商品一覧に表示させたくないのです。

views.pyの「products = Product.objects.all()」の箇所を修正する必要があります。

availableプロパティがTrueのもののみ取得する方法はいくつかあります。filterを使ったり、カスタムマネージャーを作ったりなどです。

filterを使うほうが簡単ですが、せっかくなので、カスタムマネージャを作成する方法をご紹介します(便利なので)。

カスタムマネージャーを使うと、データ検索の条件を制御できます。

例えば、Prodcut.objects.all()の場合は、「全てのデータを取得する」というクエリをDBに投げて、データを取得しています。

つまり、「availableがTrueのデータだけ取得する」というカスタムマネージャーも作れるというわけです。

カスタムマネージャーは、models.pyに記述します。

「ValidManager」がカスタムマネージャーです。models.Managerを継承したクラスで、「get_queryset」をオーバーライドすることで、自由にクエリを定義できます。

そして、Productモデルにカスタムマネージャーを定義しました。

気を付ける点として、デフォルトマネージャーも併せて設定しなければなりません。デフォルトマネージャーを設定していない場合は、「Prodcut.objects.all()」など、objectsマネージャーを使った処理が一切できなくなります。

続いて、views.pyを修正します。

「Prodcut.objects.all()」を「Product.valid_objects.all()」に変更しました。

簡単ですね。

テストを実行しましょう。

パスしましたね。

テンプレートの作成

最後にテンプレートを作成しましょう。

ここからは、HTMLの設定であるため、テストコードの作成は省きます。

base.html

base.html は、shoppingcart アプリで共通で使用される html ファイルです。

BootStrapの機能も使えるようにしておきました。

header.html

header.html は、ヘッダの HTML 要素をまとめたファイルです。

navbar.html

navbar.html は、ナビゲーションバーの設定を行うファイルです。

footer.html

footer.html は、ページのフッターを作成します。

product_list.html

最後に商品一覧を表示させるページを作成さます。

とりあえず暫定ですが、HTMlのコーディングは以上です。

動作確認

動作確認のために、何点か設定事項がありますので、もう少々お付き合いください。

管理画面への登録

ProductモデルとCategoryモデルをadmin.pyに登録し、Djangoの管理画面上で確認できるようにします。

静的ファイル設定

静的ファイルの設定を行います。

例えば、管理画面から画像を投稿したとき、保存される場所を設定します。

まずは、settings.pyを開いて、末尾に以下を設定してください。
※細かい設定内容については省きます

続いて、app/app/urls.pyに以下の設定をしてください。

管理ユーザーの作成

以下のコマンドを実行して、管理ユーザーを作成してください。※管理画面へのアクセスに必要です

ロゴとバナー画像の格納

app/static/imgフォルダ配下に「logo.png」、「banner.jpg」を格納してください。

logo.png
banner.jpg

データ投入

次のコマンドを実行して、dockerコンテナを立ち上げてください。

「localhost:8000/admin」にアクセスし、Category -> Productの順に商品データを投入してください。

データ投入完了後、「app/static」配下に「media/product」フォルダが作成され、その中にapple.jpegファイルが保存されていると思います。

apple.jpeg

画面確認

「localhost:8000」にアクセスしてください。問題なく表示されたでしょうか?

まだまだ不格好な画面ですが、次回以降に直していきたいと思います。

参考書籍

次回

次回は、商品の投稿ページを作成します。

コメントを残す