【Django】⑤在庫を確認できるサイトを作る ~ListViewの表示~
スポンサードリンク
おはようございます。Shotaです。
前回の記事では、管理画面の作成と管理画面を使ったデータの投稿方法について確認していきました。
今回の記事では、投稿したデータをWebサイトに表示する方法について学んでいきましょう。
▼前回の記事はコチラ(今回の記事は前回の記事の続きになります)
(前回の記事)
ListView
の表示
商品のリストの表示
データベースに保存した内容を表示させる場合はclass based view
を使います。class based view
にはデータベースに保存された内容をかんたんに表示させるための機能が備わっています。
早速、goodsapp/views.py
を編集していきましょう。
goodsapp/views.py
from django.views.generic import ListView from .models import Goods class GoodsList(ListView): model = Goods template_name = 'list.html'
【コードの解説】
①1行目でListView
クラスを読み込んでいます。ListView
は、データのリスト(今回であればGoods
に入っている商品のデータ)を便利に表示させるためのメソッドや属性が入っているクラスです。
②2行目でGoods
を読み込んでいます。
③GoodsList
クラスを作りました。ListView
を継承することで、ブラウザへの表示や使うデータベースを簡単に制御できます。
Djangoでは、変数model
で使うデータベースを指定、変数template_name
で使うhtmlファイルを指定できます。
class based view
を使うことで、データの制御が簡単になるというイメージを持つといいでしょう。
htmlファイルの作成
次に、Goods
クラスが呼び出された時に表示されるhtmlファイル(list.html
ファイル)を用意していきましょう。
最初のほうで、settings.py
ファイルを編集して以下のように設定したことを覚えていますか?
goods_project/settings.py
TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [BASE_DIR / 'templates'], 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ]
上記のプログラムの'TEMPLATES = ['DIRS': [BASE_DIR / 'templates']]
は、htmlファイルなどをBASE_DIR
(manage.py
ファイルが入っている階層)にあるtemplates
フォルダの中に入れることを宣言しています。
したがって、manage.py
が入っている階層で新しくtemplates
フォルダを作り、その中にlist.html
ファイルを作りましょう。
▼フォルダ構成
goods_project goodsapp manage.py templates :new
list.html
ファイルを開き、設定を進めていきましょう。見た目を整えるために、CSSフレームワークであるBootstrapを使います。
templates/list.html
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <title>Sample Page</title> </head> <body> </body> </html>
まずはこちらのコードをコピペしてください。表の形として表示させたいので、以下のコードをtemplates/list.html
の中の'body'タグの中に表示させます。(htmlの表の構造は今回の記事では詳細に説明しません。)
<table class="table"> <thead class="table-dark"> </thead> <tbody> </tbody> </table>
あとは、コードをこのように書き換えていきます。
templates/list.html
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <title>Sample Page</title> </head> <body> <h1>商品の在庫リスト</h1> <table class="table"> <thead class="table-dark"> <tr> <th scope="col">商品名</th> <th scope="col">値段</th> <th scope="col">在庫</th> </tr> </thead> <tbody> {% for item in object_list %} <tr> <td>{{ item.goodsname }}</td> <td>{{ item.price }}</td> <td>{{ item.numbers }}</td> </tr> {% endfor %} </tbody> </table> </body> </html>
これで完成です。最後に、urlとviewの関連付けが終わっていないのでこの設定を進めていきましょう。
urlとviewの関連付け
今回はlocalhost:8000/list
というurlにするような設定をしていこうと思います。
goodsapp/urls.py
from django.urls import path from .views import GoodsList urlpatterns = [ path('list/', GoodsList.as_view(), name='list') ]
これで基本的な設定は完了しました。
サーバを立ち上げて、localhost:8000/list
にアクセスしてみましょう。Djangoでサーバを立ち上げるときは、以下のコマンドを入力します。
python manage.py runserver
すると、以下の画面が表示されます。
これで商品名と在庫をリストにして表示できました。しかし、これでは見栄えが悪いので、以下のコードを付けていきます。
<div class="container"></div>
このコードを、templates/list.html
ファイルのtable
タグに付けていきましょう。
templates/list.html
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <title>Sample Page</title> </head> <body> <h1>商品の在庫リスト</h1> <div class="container"> <table class="table"> <thead class="table-dark"> <tr> <th scope="col">商品名</th> <th scope="col">値段</th> <th scope="col">在庫</th> </tr> </thead> <tbody> {% for item in object_list %} <tr> <td>{{ item.goodsname }}</td> <td>{{ item.price }}</td> <td>{{ item.numbers }}</td> </tr> {% endfor %} </tbody> </table> </div> </body> </html>
これを保存してブラウザをリロードすれば、以下のような画面が表示されます。
前の画面よりもきれいに表示されたことが分かりますね。これでデータベースの内容をブラウザに表示できました。
まとめ
今回の記事では、DjangoでListViewを表示するための方法を書きました。
今日の記事はこれで終了です。
【参考記事】