11-Flask

Flask（Part.40）｜ 【レジ管理アプリケーションのプログラミング（２）】

 
python｜ まとめ　| 現役エンジニア&プログラミングスクール講師「python」のまとめページです。pythonに関して抑えておきたい知識や文法やにについて記事をまとめています。まとめページの下部には「おすすめの学習書籍」「おすすめのITスクール情報」「おすすめ求人サイト」について情報を掲載中...
目次
  1. 目標
  2. レジ管理アプリケーションの作成
  3. ブックマークのすすめ

目標

  • 注文された商品の個数を修正する機能とキャンセルする機能を実装する
  • 会計完了ボタンを設置して会計の処理を完了させる機能を実装する。

レジ管理アプリケーションの作成

レジ管理アプリケーションの作成（再掲載）

ここからは、商店スタッフが利用するためのレジ管理アプリケーションを作成していきます。具体的には、全てのテーブル状況を確認できたり、各テーブルの注文状況を確認でき、ユーザー側では行えない注文済みの商品の取り消しや、会計を完了させる機能を実装します。

作業は前回と同じブランチで行います。

レジ管理アプリケーションのプログラミング

models.pyの編集（teblesapp内）

models.pyファイルを次のように編集します。

from apps.common.db import db


# テーブルモデル
class Table(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    number = db.Column(db.Integer)

    # 伝票（Bill）とのリレーション
    bill = db.relationship(
        "Bill", back_populates="table"
    )  # 複数の伝票が1つのテーブルに紐づく

    def __repr__(self):
        return f"<Table {self.number}>"

これ以降では、テーブルは会計ごとに新しい伝票と結びつくようにプログラムを修正していきます。Tableモデルに大きな変化はありませんが、コメントの部分を「複数の伝票が1つのテーブルに紐づく」としています。

テーブルは、複数の伝票と結びつくためルートのプログラムで「table.bill」はリストとして機能します。このうち最新の伝票をアクティブにするので、その取得方法は、スライス式を利用して、table.bill[-1]で取得します。

app.pyの編集（ordersapp内）

app.pyファイルを次のように編集します。

import os

from flask import Blueprint, redirect, render_template, request, session, url_for

from apps.common.db import db
from apps.ordersapp.forms import OrderForm
from apps.ordersapp.models import Bill, Order
from apps.productsapp.models import Category, Product
from apps.tablesapp.models import Table

orders_bp = Blueprint(
    "orders",
    __name__,
    template_folder=os.path.join(os.getcwd(), "apps", "ordersapp", "templates"),
    static_folder=os.path.join(os.getcwd(), "apps", "ordersapp", "static"),
)


# カートをテーブルIDごとにセッションから取得するヘルパー関数
def get_cart(table_id):
    if f"cart_{table_id}" not in session:
        session[f"cart_{table_id}"] = []
    return session[f"cart_{table_id}"]


def create_orders_app(app):
    """Blueprintを新規作成し、登録する関数"""
    return orders_bp


@orders_bp.route("/order/table/<int:table_id>", methods=["GET"])
def order_menu(table_id):
    table = Table.query.get_or_404(table_id)

    # リストtable.billの中で最新のBillを取得
    bill = table.bill[-1] if table.bill else None

    # Billが存在しない場合、新規作成
    if bill is None or bill.status == "paid":
        # 新しいBillを作成
        bill = Bill(status="Order in progress", table_id=table.id)
        db.session.add(bill)
        table.bill.append(bill)  # table.billリストに新しいBillを追加
        db.session.commit()

    categories = Category.query.all()
    products = Product.query.all()
    cart = get_cart(table_id)

    # 現在のテーブルの注文履歴を取得
    orders = Order.query.filter_by(table_id=table.id, bill_id=bill.id).all()

    # Billの状態をデバッグ
    print(f"Bill: {bill}")  # ここでbillを参照

    # 合計額を計算する
    total_amount = sum(order.total for order in orders)

    # Billが正しく作成されているかをデバッグ
    if bill:
        print(f"Created Bill ID: {bill.id}, Status: {bill.status}")
    else:
        print("Bill is not found for the table")

    return render_template(
        "order_menu.html",
        products=products,
        cart=cart,
        table=table,
        categories=categories,
        total_amount=total_amount,
        orders=orders,  # 注文履歴を渡す
        title="メニュー一覧",
    )


@orders_bp.route(
    "/order/table/<int:table_id>/product/<int:product_id>", methods=["GET", "POST"]
)
def order_form(table_id, product_id):
    table = Table.query.get_or_404(table_id)
    product = Product.query.get_or_404(product_id)
    form = OrderForm()

    if form.validate_on_submit():
        quantity = form.quantity.data
        total = product.price * quantity

        # カートに追加（テーブルごとにセッションを使用）
        cart = get_cart(table_id)
        cart.append(
            {
                "product_id": product.id,
                "product_name": product.name,
                "product_image": product.image_url,
                "quantity": quantity,
                "total": total,
            }
        )
        session.modified = True  # セッションを変更したことを通知
        # Billの最終ステータスを確認して適切に更新
        if table.bill:
            latest_bill = table.bill[-1]
            if latest_bill.status == "pending":
                latest_bill.status = "Order in progress"  # 注文が進行中に変更する場合
            db.session.commit()
        else:
            # Billが存在しない場合、新しいBillを作成して適切に設定
            new_bill = Bill(table_id=table.id, status="Order in progress")
            db.session.add(new_bill)
            db.session.commit()

        return redirect(url_for("orders.order_menu", table_id=table.id))

    return render_template(
        "order_form.html",
        form=form,
        product=product,
        table=table,
        title="注文フォーム",
    )


@orders_bp.route("/order/cart/<int:table_id>", methods=["GET", "POST"])
def order_cart(table_id):
    table = Table.query.get_or_404(table_id)
    cart = get_cart(table_id)
    total_amount = sum(item["total"] for item in cart)

    bill = table.bill[-1] if table.bill else None

    # テーブルに関連するBillを取得（Billが存在しない場合、新規作成）
    if bill is None or bill.status == "paid":
        bill = Bill(status="Order in progress", table_id=table.id)
        db.session.add(bill)
        table.bill.append(bill)  # 新しいBillをtableに追加
        db.session.commit()  # 変更をコミット
    else:
        bill = table.bill[-1]  # 既に関連付けられているBillを使用

    if request.method == "POST":
        # 注文確定処理
        for item in cart:
            # 注文をデータベースに保存
            order = Order(
                table_id=table.id,
                product_id=item["product_id"],
                product_name=item["product_name"],
                quantity=item["quantity"],
                total=item["total"],
                bill_id=bill.id,  # Billを注文に紐づけ
            )
            db.session.add(order)
            db.session.commit()

        # 注文後、カートをクリア
        session[f"cart_{table_id}"] = []
        session.modified = True

        # 確定後、再度注文情報を表示するためにリダイレクト
        return redirect(url_for("orders.order_menu", table_id=table.id))

    return render_template(
        "order_cart.html",
        cart=cart,
        total_amount=total_amount,
        table=table,
        title="注文確認フォーム",
    )


@orders_bp.route("/order/cart/<int:table_id>/update/<int:product_id>", methods=["POST"])
def update_quantity(table_id, product_id):
    table = Table.query.get_or_404(table_id)
    quantity = int(request.form.get("quantity"))
    cart = get_cart(table_id)

    # 商品情報の取得（商品IDから価格などを取得）
    product = Product.query.get_or_404(product_id)

    # カート内の商品数量を更新
    for item in cart:
        if item["product_id"] == product_id:
            item["quantity"] = quantity
            # 商品ごとの合計金額を再計算
            item["total"] = item["quantity"] * product.price

    session.modified = True
    # 合計金額を再計算
    total_amount = sum(item["total"] for item in cart)

    return redirect(
        url_for(
            "orders.order_cart",  # 適切なビュー名に変更
            table_id=table.id,
            cart=cart,
            total_amount=total_amount,
            title="注文確認フォーム",
        )
    )


@orders_bp.route("/order/cart/<int:table_id>/remove/<int:product_id>", methods=["POST"])
def remove_item(table_id, product_id):
    cart = get_cart(table_id)

    # カート内の商品を削除
    cart = [item for item in cart if item["product_id"] != product_id]
    session[f"cart_{table_id}"] = cart  # 更新したカートをセッションに保存
    session.modified = True
    return redirect(url_for("orders.order_cart", table_id=table_id))


@orders_bp.route("/order/table/<int:table_id>/change_status/<status>", methods=["POST"])
def change_status(table_id, status):
    """
    注文のステータスを変更する。
    statusは「Order in progress」から「pending」へ切り替え
    """
    table = Table.query.get_or_404(table_id)
    bill = table.bill[-1] if table.bill else None  # テーブルに紐づく伝票（Bill）を取得

    # ステータスが変更可能な場合のみ変更
    if bill.status != status:
        bill.status = status
        db.session.commit()

    return redirect(url_for("orders.order_menu", table_id=table.id))

models.pyの編集（ordersapp内）

models.pyファイルを次のように編集します。

from datetime import timedelta, timezone

from sqlalchemy.sql import func  # type: ignore

from apps.common.db import db

JST = timezone(timedelta(hours=9))


# 伝票（Bill）モデル
class Bill(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    status = db.Column(
        db.String(20), default="Order in progress"
    )  # 伝票のステータス（Order in progress, pending, paid）
    table_id = db.Column(
        db.Integer, db.ForeignKey("table.id"), nullable=False
    )  # テーブルとの関連
    orders = db.relationship("Order", backref="bill", lazy=True, cascade="all, delete")

    table = db.relationship("Table", back_populates="bill")  # 1つのテーブルに1つの伝票
    created_at = db.Column(db.DateTime, default=func.now(), server_default=func.now())

    def __repr__(self):
        return f"<Bill {self.id} - Status: {self.status}>"

    def get_created_at_jst(self):
        """JST に変換して取得"""
        if self.created_at is None:
            return None
        return self.created_at.astimezone(JST)


# 注文（Order）モデル
class Order(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    table_id = db.Column(db.Integer, db.ForeignKey("table.id"), nullable=False)
    bill_id = db.Column(db.Integer, db.ForeignKey("bill.id"), nullable=True)
    product_id = db.Column(db.Integer, db.ForeignKey("product.id"), nullable=False)
    product_name = db.Column(db.String(100), nullable=False)
    quantity = db.Column(db.Integer, nullable=False)
    total = db.Column(db.Float, nullable=False)  # Float に変更

    table = db.relationship("Table", backref="orders", lazy=True)
    product = db.relationship("Product", backref="orders", lazy=True)

    def __repr__(self):
        return f"<Order {self.id} - Table {self.table_id} - {self.product_name} x {self.quantity}>"

    def get_created_at_jst(self):
        """JST に変換し取得"""
        if self.created_at is None:
            return None
        return self.created_at.astimezone(JST)

order_menu.htmlの編集（ordersapp/templates内）

order_menu.html を次のように編集します。

{% extends 'order_base.html' %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
<h2>メニュー</h2>

<!-- カテゴリータブ -->
<div class="tab-container">
    <div class="tab active" data-category="all">すべて</div>
    {% for category in categories %}
    <div class="tab" data-category="{{ category.id }}">{{ category.name }}</div>
    {% endfor %}
</div>

<div class="content-container">
    <!-- メニューリスト -->
    <div class="menu">
        {% for product in products %}
        {% if product.status != 'discontinued' %}
        <div class="menu-item" data-category="{{ product.category_id }}" {% if product.status=='sold_out' or
            product.status=='out_of_stock' or table.bill[-1].status=="pending" %}
            style="pointer-events: none; opacity: 0.5;" {% endif %}>
            <a href="{{ url_for('orders.order_form', table_id=table.id, product_id=product.id) }}" target="_self">
                <img src="{{ url_for('products.static', filename=product.image_url) }}" alt="{{ product.name }}">
                <p>{{ product.name }}</p>
                <p>¥{{ product.price }}</p>
                {% if product.status == 'sold_out' %}
                <span class="status-label sold-out-label">完売</span>
                {% elif product.status == 'out_of_stock' %}
                <span class="status-label out-of-stock-label">在庫切れ</span>
                {% endif %}
            </a>
        </div>
        {% endif %}
        {% endfor %}
    </div>

    <!-- 注文リスト（右側に配置） -->
    <div class="order-summary">
        <!-- 合計金額 -->
        <div class="total-amount-container">
            <p><strong>合計金額: ¥{{ total_amount | int }}</strong></p>
        </div>
        <div class="cart-check-container">
            <!-- カート確認ページへのリンク -->
            <a href="{{ url_for('orders.order_cart', table_id=table.id) }}">カートを確認</a>
        </div>

        <!-- 現在の注文リスト -->
        <div class="order-list-container">
            <h3>現在の注文リスト</h3>
            <ul class="order-list">
                {% for order in orders %}
                <li>{{ order.product_name }} x{{ order.quantity }} (¥{{ order.total | int }})</li>
                {% else %}
                <li>現在、注文はありません。</li>
                {% endfor %}
            </ul>
        </div>

        <!-- ステータス変更ボタン -->
        <div class="status-change-container">
            {% if table.bill[-1].status == "Order in progress" %}
            <form action="{{ url_for('orders.change_status', table_id=table.id, status='pending') }}" method="post">
                <button type="submit" class="status-button">会計予定に変更</button>
            </form>
            {% elif table.bill[-1].status == "pending" %}
            <form action="{{ url_for('orders.change_status', table_id=table.id, status='Order in progress') }}"
                method="post">
                <button type="submit" class="status-button">注文可能に戻す</button>
            </form>
            {% endif %}
        </div>
    </div>
</div>

<!-- カテゴリータブの切り替えスクリプト -->
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const tabs = document.querySelectorAll(".tab");
        const items = document.querySelectorAll(".menu-item");

        tabs.forEach(tab => {
            tab.addEventListener("click", function () {
                const category = this.getAttribute("data-category");

                // タブのアクティブ状態を更新
                tabs.forEach(t => t.classList.remove("active"));
                this.classList.add("active");

                // メニューアイテムの表示切り替え
                items.forEach(item => {
                    if (category === "all" || item.getAttribute("data-category") === category) {
                        item.style.display = "block";
                    } else {
                        item.style.display = "none";
                    }
                });
            });
        });
    });
</script>

{% endblock %}

app.pyの編集（registerapp内）

app.pyファイルを次のように編集します。

import os
from datetime import datetime
from zoneinfo import ZoneInfo

from flask import (
    Blueprint,
    flash,
    redirect,
    render_template,
    request,
    url_for,
)

from apps.common.db import db
from apps.ordersapp.models import JST, Bill, Order

register_bp = Blueprint(
    "register",
    __name__,
    template_folder=os.path.join(os.getcwd(), "apps", "registerapp", "templates"),
    static_folder=os.path.join(os.getcwd(), "apps", "registerapp", "static"),
)


def create_register_app(app):
    """Blueprintを新規作成し、登録する関数"""
    return register_bp


@register_bp.route("/list")
def register_list():
    filter_date_str = request.args.get("filter_date")  # URLパラメータから日付取得
    filter_date = None

    if filter_date_str:
        filter_date_str = filter_date_str.replace("T", " ")
        naive_datetime = datetime.strptime(filter_date_str, "%Y-%m-%d %H:%M")
        # 日本時間（JST）を適用
        filter_date = naive_datetime.replace(tzinfo=JST)
        print(filter_date)

    # Bill を基準に取得（作成日で降順ソート）
    query = Bill.query
    if filter_date:
        query = query.filter(Bill.created_at >= filter_date.astimezone(ZoneInfo("UTC")))

    bills = query.order_by(Bill.created_at.desc()).all()

    # 各 Bill に合計金額を追加
    for bill in bills:
        bill.total_price = sum(order.total for order in bill.orders)

    return render_template("register_list.html", title="伝票一覧", bills=bills)


@register_bp.route("/bill/<int:bill_id>")
def view_bill(bill_id):
    bill = Bill.query.get_or_404(bill_id)

    # 指定された bill_id に関連する注文を取得
    orders = Order.query.filter_by(bill_id=bill.id).all()
    # print(orders)

    # 合計金額を計算
    total_price = sum(order.total for order in orders)

    return render_template(
        "register_bill.html",
        bill=bill,
        orders=orders,
        total_price=total_price,
        title="明細",
    )


@register_bp.route("/bill/<int:bill_id>/update_order/<int:order_id>", methods=["POST"])
def update_order(bill_id, order_id):
    """注文の個数を更新"""
    order = Order.query.get_or_404(order_id)
    new_quantity = request.form.get("quantity", type=int)

    if new_quantity < 1:
        flash("数量は1以上である必要があります", "error")
        return redirect(url_for("register.view_bill", bill_id=bill_id))

    order.quantity = new_quantity
    order.total = order.product.price * new_quantity  # 商品価格 × 数量で合計を再計算
    db.session.commit()

    flash("注文が更新されました", "success")
    return redirect(url_for("register.view_bill", bill_id=bill_id))


@register_bp.route("/bill/<int:bill_id>/delete_order/<int:order_id>", methods=["POST"])
def delete_order(bill_id, order_id):
    """注文を削除"""
    order = Order.query.get_or_404(order_id)
    db.session.delete(order)
    db.session.commit()

    flash("注文が削除されました", "success")
    return redirect(url_for("register.view_bill", bill_id=bill_id))


@register_bp.route("/bill/pay/<int:bill_id>")
def pay_bill(bill_id):
    # Billを取得
    bill = Bill.query.get_or_404(bill_id)

    # ステータスが'pending'なら、'paid'に変更
    if bill.status == "pending":
        bill.status = "paid"
        db.session.commit()  # 変更をデータベースに保存

    # 支払い後、伝票詳細ページにリダイレクト
    return redirect(url_for("register.view_bill", bill_id=bill.id))

register_bill.htmlの編集（registerapp/templates内）

register_bill.html を次のように編集します。

{% extends 'register_base.html' %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
<h1>伝票詳細</h1>
<p>伝票番号: {{ bill.id }}</p>
<p>テーブル番号: {{ bill.table_id }}</p>
<p>作成日時: {{ bill.get_created_at_jst().strftime('%Y-%m-%d %H:%M') if bill.get_created_at_jst() else '' }}</p>
<p style="font-size:xx-large;">合計金額: {{ total_price | int }}</p>
{% if bill.status == 'pending' %}
<a href="{{ url_for('register.pay_bill', bill_id=bill.id) }}" class="pay-button">会計</a>
{% endif %}

<h2>注文内容</h2>
<table>
    <thead>
        <tr>
            <th>商品名</th>
            <th>数量</th>
            <th>金額</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        {% for order in orders %}
        <tr>
            <td>{{ order.product_name }}</td>
            <td>
                <form action="{{ url_for('register.update_order', bill_id=bill.id, order_id=order.id) }}" method="post">
                    <input type="number" name="quantity" value="{{ order.quantity }}" min="1">
                    <button type="submit" class="update-button">更新</button>
                </form>
            </td>
            <td>{{ order.total | int }}</td>
            <td>
                <form action="{{ url_for('register.delete_order', bill_id=bill.id, order_id=order.id) }}" method="post"
                    onsubmit="return confirm('本当に削除しますか？');">
                    <button type="submit" class="delete-button">削除</button>
                </form>
            </td>
        </tr>
        {% endfor %}
    </tbody>

</table>
<a href="{{ url_for('register.register_list') }}" class="button-link-back">戻る</a>
{% endblock %}

style.cssの編集（registerapp/static/css内）

style.cssを次のように編集します。

body {
    font-family: Arial, sans-serif;
    margin: 20px;
    padding: 20px;
    background-color: #f8f8f8;
}

header {
    margin: 0;
    padding: 10px 0;
}

main {
    margin: 0;
    padding: 20px;
}

footer {
    background-color: #aaa;
    color: white;
    text-align: center;
    padding: 10px 0;
    margin-top: 20px;
}

h1 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px;
    text-align: center;
}

h2 {
    margin-top: 30px;
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th,
td {
    padding: 12px;
    text-align: left;
    border: 1px solid #ddd;
}

th {
    background-color: #4CAF50;
    color: white;
}

td {
    background-color: #fff;
}

tr:hover {
    background-color: #f1f1f1;
}

a.button-link {
    display: inline-block;
    padding: 8px 16px;
    background-color: #2196F3;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100px;
    /* 幅を統一 */
    text-align: center;
}

a.button-link:hover {
    background-color: #1976D2;
}

a.button-link-back {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 16px;
    background-color: #45a049;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100px;
    text-align: center;
}

a.button-link-back:hover {
    background-color: #45a049;
}

tr td a.button-link {
    display: inline-block;
    margin: 0;
}

table td {
    word-wrap: break-word;
}

.filter-form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
}

.filter-form label {
    font-weight: bold;
    color: #333;
}

.filter-form input {
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.filter-form button {
    padding: 8px 15px;
    font-size: 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.filter-form button:hover {
    background-color: #0056b3;
}

.bill-detail {
    text-align: center;
    padding: 0;
}

/* 商品個数変更の入力ボックス */
form input[type="number"] {
    padding: 8px;
    font-size: 16px;
    width: 60px;
    /* ボックスの幅を調整 */
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
    margin-right: 10px;
}

/* 変更ボタン
form button[type="submit"] {
    padding: 8px 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

form button[type="submit"]:hover {
    background-color: #45a049;
} */

/* 削除ボタン */
button.update-button {
    padding: 8px 16px;
    background-color: #2196F3;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button.update-button:hover {
    background-color: #1976D2;
}

/* 削除ボタン */
button.delete-button {
    padding: 8px 16px;
    background-color: #f44336;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button.delete-button:hover {
    background-color: #e53935;
}

/* 削除ボタン */
a.pay-button {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 16px;
    background-color: #f44336;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100px;
    text-align: center;
}

a.pay-button:hover {
    background-color: #e53935;
}

古いデータベースを削除して、カテゴリー、商品、テーブルのデータを再入力します。.sqlファイルをエクスポートしてカテゴリー、商品、テーブル部分だけ残して、Flaskアプリケーションを起動するのが効率的です。

http://127.0.0.1:5000/register/list にアクセスします。全てカラとなっています。

http://127.0.0.1:5000/orders/order/table/1にアクセスします。

いくつか注文します。同様に複数のテーブルから注文を行っておきます。伝票番号とテーブル番号が異なるようにテーブルをランダムに選択してアクセスしてみるのが稼働状況を確認するのにとても有効的です。

注文が完了したら http://127.0.0.1:5000/register/list へアクセスします。

テーブル番号はアクセスした順番（伝票番号の順番）で並んでいます。いずれかの伝票の「詳細」ボタンをクリックします。この記事では伝票番号「5」番を選択します。

次のように、注文された商品の個数の変更と削除が可能になっています。

ガトーショコラをひとつ増やして「更新」をクリックします。個数と金額が変更されます。

続けて、プリンを削除します。プリンの「削除」をクリックすると、アラートが表示されます。

「OK」をクリックします。プリンが削除され合計金額が変更されます。

左下の「戻る」ボタンをクリックします。一覧表でも合計金額が変更されたのを確認できます。また、現在、全ての伝票はステータスが「注文中」で表の真ん中「Order in Progress」に表示されています。

http://127.0.0.1:5000/orders/order/table/1 にアクセスしてテーブル番号「1」の伝票を「会計予定」に変更します。

再度、http://127.0.0.1:5000/register/list へアクセスします。既にブラウザを開いている場合は、更新します。「1」番の伝票のステータスが「会計予定」となり、Pending に移されます。

伝票番号「1」の「詳細」ボタンをクリックします。「詳細」ボタンをクリックすると数量変更や注文削除以外に「会計」ボタンが表示されます。「会計」をクリックすると、この伝票番号のテーブルは会計完了となります。

「会計」をクリックします。「会計」をクリックすると「会計」ボタンが消えます。

左下の「戻る」ボタンをクリックします。伝票番号「1」番のステータスが「会計済み」となり、Paid の欄に表示されます。

ここで改めて、http://127.0.0.1:5000/orders/order/table/1 へアクセスします。現在の注文リストがクリアされ、新しく注文が可能となっています。

http://127.0.0.1:5000/register/list へアクセスします。テーブル番号「1」番で新規の伝票番号が発行されています。

ここまでの内容をコミットしておきます。コミットメッセージは次の通りです。

Add: 注文された商品の個数を修正する機能を実装（20250326）
Add: 注文された商品をキャンセルする機能を実装（20250326）
Add: 会計完了ボタンを設置して会計の処理を完了させる機能を実装（20250327）

今回は設計書などはないため、設計書番号などの提示はなし。レジ管理アプリケーションの実装を行っています。レジ係が利用する伝票の詳細情報ページに注文された商品の個数を修正する機能とキャンセルする機能を実装。Pendingのステータスを持つ伝票に会計処理を実装。

git status コマンド

git add . コマンド

git status コマンド

git commit –no-verify コマンド（noの前のハイフンはふたつあります。）

ruff によるチェックが消えなかったため「git commit –no-verify」を利用しています。

上書き保存をしてCOMMIT＿EDITMSGを閉じます。

今回は以上になります。

前の記事へ

次の記事へ

「python」おすすめ書籍 ベスト３ | 現役エンジニア&プログラミングスクール講師「python」の学習でお勧めしたい書籍をご紹介しています。お勧めする理由としては、考え方、イメージなどを適切に捉えていること、「生のpython」に焦点をあてて解説をしている書籍であることなどが理由です。勿論、この他にも良い書籍はありますが、特に質の高かったものを選んで記事にしています。ページの下部には「おすすめのITスクール情報」「おすすめ求人サイト」について情報を掲載中。...

ブックマークのすすめ

「ほわほわぶろぐ」を常に検索するのが面倒だという方はブックマークをお勧めします。ブックマークの設定は別記事にて掲載しています。

「お気に入り」の登録・削除方法【Google Chrome / Microsoft Edge】「お気に入り」の登録・削除方法【Google Chrome / Microsoft Edge】について解説している記事です。削除方法も掲載しています。...
【パソコン選び】失敗しないための重要ポイント | 現役エンジニア&プログラミングスクール講師【パソコン選び】失敗しないための重要ポイントについての記事です。パソコンのタイプと購入時に検討すべき点・家電量販店で見かけるCPUの見方・購入者が必要とするメモリ容量・HDDとSSDについて・ディスプレイの種類・バッテリーの持ち時間や保証・Officeソフト・ウィルス対策ソフトについて書いています。...
Blueprint Flask Flask-SQLAlchemy Jinja2 MVT python session SQLite アップロード エンジニア セッション テンプレートエンジン バリデーション フレームワーク ルーティング 作成方法 初心者 利用方法 注意点 画像 統合
RELATED POST
11-Flask

Flask（Part.41）｜ 【レジ管理アプリケーションのプログラミング（３）】

2025年4月3日
プログラミング学習 おすすめ書籍情報発信 パソコン初心者 エンジニア希望者 新人エンジニア IT業界への就職・転職希望者 サポートサイト Programming learning Recommended schools Recommended books Information dissemination Computer beginners Prospective engineers New engineers Prospective job seekers in the IT industry Support site
11-Flask

Flask（Part.21予定）｜ 【複数アプリケーションの統合（１）】

2025年3月14日
プログラミング学習 おすすめ書籍情報発信 パソコン初心者 エンジニア希望者 新人エンジニア IT業界への就職・転職希望者 サポートサイト Programming learning Recommended schools Recommended books Information dissemination Computer beginners Prospective engineers New engineers Prospective job seekers in the IT industry Support site
11-Flask

Flask（Part.20）｜ 【商品管理アプリケーションのコミット】

2025年3月13日
プログラミング学習 おすすめ書籍情報発信 パソコン初心者 エンジニア希望者 新人エンジニア IT業界への就職・転職希望者 サポートサイト Programming learning Recommended schools Recommended books Information dissemination Computer beginners Prospective engineers New engineers Prospective job seekers in the IT industry Support site
11-Flask

Flask（Part.25）｜ 【注文管理アプリケーションのプログラミング（１）】

2025年3月18日
プログラミング学習 おすすめ書籍情報発信 パソコン初心者 エンジニア希望者 新人エンジニア IT業界への就職・転職希望者 サポートサイト Programming learning Recommended schools Recommended books Information dissemination Computer beginners Prospective engineers New engineers Prospective job seekers in the IT industry Support site