予約サイトの店舗・スタッフ一覧ページ

Python Django

概要

Djangoで、シンプルな予約サイトの作成シリーズの1つです。店舗と、スタッフ一覧ページを作っていきます。

今回作る範囲

urls.pyの作成

booking/urls.pyを、次のようにしておきます。

from django.urls import path
from . import views

app_name = 'booking'

urlpatterns = [
    path('', views.StoreList.as_view(), name='store_list'),
    path('store/<int:pk>/staffs/', views.StaffList.as_view(), name='staff_list'),
]

ビューの作成

booking/views.pyの内容を次のようにします。

from django.shortcuts import get_object_or_404
from django.views import generic
from .models import Store, Staff


class StoreList(generic.ListView):
    model = Store
    ordering = 'name'


class StaffList(generic.ListView):
    model = Staff
    ordering = 'name'

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['store'] = self.store
        return context

    def get_queryset(self):
        store = self.store = get_object_or_404(Store, pk=self.kwargs['pk'])
        queryset = super().get_queryset().filter(store=store)
        return queryset

StoreListビューはシンプルです。単純なListViewを使っています。

StaffLisrビューは多少のメソッド上書きをしています。このスタッフ一覧は選択した店舗に所属するスタッフの一覧なので、選択した店舗でStaff一覧を絞り込む必要があります。それをしているのがget_queryset内です。選択した店舗のpkがURL内に含まれるよう作るので、get_object_or_404(Store, pk=self.kwargs['pk'])として選択した店舗のモデルインスタンスを取得できます。あとは、filterでそれを指定して絞り込むだけ。

テンプレートファイル内に「〇〇店舗のスタッフ一覧」みたいな文章を書きたいので、店舗名というか、店舗のモデルインスタンスそのものを渡したいので、get_context_dataも上書きしています。get_context_data内で再度get_object_or_404...とすると煩く見えるので、get_querysetで取得したモデルインスタンス...self.storeとしたものですね、それをget_context_dataで再利用しています。

テンプレートファイルの作成

今回は処理がそこそこ複雑なアプリケーションなので、見た目の調節は本当に最低限に留めていきます。

まずベーステンプレートです。bokking/base.htmlを作ります。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>予約サイト</title>
    <style>
        body {
            width: 960px;
            margin: 0 auto;
            padding-top: 50px;
        }

        nav > a {
            margin-right: 10px;
        }
    </style>
</head>

<body>

<nav>
    <a href="{% url 'booking:store_list' %}">Home</a>
    {% if user.is_authenticated %}
        <a href="">MyPage</a>
        <a href="">Logout</a>
    {% else %}
        <a href="">Login</a>
    {% endif %}
</nav>

{% block content %}{% endblock %}

</body>
</html>

ナビゲーションも作っています。ログインしていればマイページとログアウトが、そうでなければログインのリンクが見えるようになります。処理は後で実装していきます。

店舗一覧のテンプレートファイルを作ります。booking/store_list.htmlです。

{% extends 'booking/base.html' %}

{% block content %}
    <h1>店舗一覧</h1>
    <ul>
        {% for store in store_list %}
            <li><a href="{% url 'booking:staff_list' store.pk %}">{{ store.name }}</a></li>
        {% empty %}
            <li>まだ店舗がありません。</li>
        {% endfor %}
    </ul>
{% endblock %}

店舗をクリックするとスタッフ一覧ページに移動できるように、リンクを張りましょう。選択した店舗のpkがURL内に含まれるように、href="{% url 'booking:staff_list' store.pk %}としておきます。urls.pyではpath('store/<int:pk>/staffs/',として、このpkを受け取れるように定義していますし、views.pyでもこれを利用してスタッフを絞り込むのでした。

そして最後にスタッフ一覧です。booking/staff_list.htmlです。

{% extends 'booking/base.html' %}

{% block content %}

    <h1>{{ store.name }}店 スタッフ一覧</h1>
    <ul>
        {% for staff in staff_list %}
            <li><a href="">{{ staff.name }}</a></li>
        {% empty %}
            <li>まだスタッフがいません。</li>
        {% endfor %}
    </ul>
{% endblock %}

StaffのListViewなのでstaff_listとしてスタッフ一覧が渡されるほか、storeとして店舗のモデルインスタンスも渡しているのでした。

スタッフをクリックで、そのスタッフの予約状況カレンダーページに移動したいのですが、それは後程実装していきましょう。

Relation Posts

Comment

記事にコメントする

まだコメントはありません。