トップページに店舗リストを作成します。

モデル

店舗モデルを作成します。

名前、住所、電話番号、説明、イメージ画像のフィールドを追加していきます。

app/models.py

from django.db import models


class Store(models.Model):
    name = models.CharField('店舗', max_length=100)
    address = models.CharField('住所', max_length=100, null=True, blank=True)
    tel = models.CharField('電話番号', max_length=100, null=True, blank=True)
    description = models.TextField('説明', default="", blank=True)
    image = models.ImageField(upload_to='images', verbose_name='イメージ画像', null=True, blank=True)

    def __str__(self):
        return self.name

Admin

管理画面でデータを登録できるようにします。

app/admin.py

from django.contrib import admin
from .models import Store

admin.site.register(Store)

マイグレーション実行

モデルを追加したので、マイグレーションが必要になります。

(myvenv) ~$ python3 manage.py makemigrations
(myvenv) ~$ python3 manage.py migrate

データ追加

管理画面で store モデルに店舗データを追加します。

何件か登録しておくとレイアウトがしやすくなります。

URL

トップページの URL を作成します。

app/urls.py

from django.urls import path
from app import views

urlpatterns = [
    path('', views.StoreView.as_view(), name='store'),
]

ビュー

店舗リストはすべての店舗を表示させます。

app/views.py

from app.models import Store
from django.views.generic import View
from django.shortcuts import render


class StoreView(View):
    def get(self, request, *args, **kwargs):
        store_data = Store.objects.all()

        return render(request, 'app/store.html', {
            'store_data': store_data,
        })

コード解説

.all()を使用することで、すべてのデータを取得することができます。

store_data = Store.objects.all()

テンプレート

base

ベースのテンプレートを作成します。

レイアウトは Bootstrap、アイコンは FontAwesome を使用しています。

app/templates/app/base.html

{% load static %}

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
    />
    <link rel="stylesheet" href="{% static 'css/style.css' %}" />
    <title>予約サイトチュートリアル</title>
  </head>

  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
        <a class="navbar-brand" href="/">予約サイト</a>
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="/">ホーム</a>
          </li>
          {% if user.is_authenticated %}
          <li class="nav-item">
            <a class="nav-link" href="{% url 'profile' %}">プロフィール</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{% url 'account_logout' %}">ログアウト</a>
          </li>
          {% else %}
          <li class="nav-item">
            <a class="nav-link" href="{% url 'account_signup' %}">スタッフ</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{% url 'account_login' %}">ログイン</a>
          </li>
          {% endif %}
        </ul>
      </div>
    </nav>

    <main>
      <div class="container">{% block content %} {% endblock %}</div>
    </main>

    <footer class="py-2 bg-dark">
      <p class="m-0 text-center text-white">
        Copyright &copy; Django Startup 2020
      </p>
    </footer>

    {% block extra_js %} {% endblock %}
  </body>
</html>

store

店舗リストのテンプレートを作成します。

データベースから店舗データを表示します。

app/templates/app/store.html

{% extends "app/base.html" %} {% block content %}

<div class="text-center my-5">
  <div class="mb-5">
    <h1>店舗一覧</h1>
  </div>
  <div class="row">
    {% for store in store_data %}
    <div class="col-lg-3 col-md-6">
      <div class="card img-thumbnail storelist mb-3">
        <img
          class="card-img-top card-thum"
          src="/{{ store.image.url }}"
          alt=""
        />
        <div class="card-body text-center px-2 py-3">
          <h5 class="font-weight-bold">{{ store.name }}店</h5>
          <p>{{ store.address }}</p>
        </div>
        <a class="stretched-link" href=""></a>
      </div>
    </div>
    {% empty %}
    <p>まだ店舗がありません</p>
    {% endfor %}
  </div>
</div>

{% endblock %}

CSS

CSS で店舗リスト画面を装飾します。

app/static/css/style.css

/* base */

body {
  background: #f1f1f1;
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

/* store */

.storelist img {
  height: 150px;
  object-fit: contain;
}

確認

トップページを表示すると、このような画面になりますので、確認してください。

店舗リスト