Re:ゼロから始める文系プログラマ

未経験がプログラミングを通して人生を変える

【Django】⑤在庫を確認できるサイトを作る ~ListViewの表示~


スポンサードリンク
 

f:id:ShotaNukumizu_1000:20210924094721p:plain

おはようございます。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を使います。

getbootstrap.jp

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

すると、以下の画面が表示されます。

f:id:ShotaNukumizu_1000:20211027063559p:plain

これで商品名と在庫をリストにして表示できました。しかし、これでは見栄えが悪いので、以下のコードを付けていきます。

<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>

これを保存してブラウザをリロードすれば、以下のような画面が表示されます。

f:id:ShotaNukumizu_1000:20211027064046p:plain

前の画面よりもきれいに表示されたことが分かりますね。これでデータベースの内容をブラウザに表示できました。


まとめ

今回の記事では、DjangoでListViewを表示するための方法を書きました。

今日の記事はこれで終了です。

【参考記事】

codor.co.jp

noumenon-th.net