Excelシートの売上台帳にWebアプリの入力フォームから記入する試み。入力を補助するプルダウンの使い方を調べています。

前回のつづき。前回はブラウザにプルダウンを表示させた。
今回は、その選択したデータをPython側に送り、再びページにその値を出力させます。

【実行環境】

Android
Termux
Python3.9
外部ライブラリ
- Flask、Pandas
その他アプリ
- Excel/Google スプレッドシート

用意するもの

Excelファイル(sample.xlsx)
1. Sheet1 : 売上台帳(適当に作成)
2. Sheet2 : 顧客台帳(上に〃)
Flaskの実行ファイル(app.py)
テンプレートファイル(index.html)

以下がその内容です。

1.1 Excelファイル/Sheet1/売上台帳

今回もこれは使いません。いつ使うんでしょうか。本人もわかりません。
これに記入する入力フォームを作っています。気まぐれに。

sample.xlsxのSheet1

f:id:chayarokurokuro:20210115161631j:plain

1.2 Excelファイル/Sheet2/顧客台帳

売上台帳に記入する際に、この顧客一覧を使ってプルダウンメニューを表示し、入力を補助させます。

sample.xlsxのSheet2

f:id:chayarokurokuro:20210115161848j:plain

2. Webアプリ実行用ファイル

前回はブラウザにプルダウンを表示させただけでしたが、今回は選択したデータをPython側に送りますので、内容を少々イジりました。

app.py

import pandas as pd
from flask import Flask, render_template, request


def read_excel(filename="sample.xlsx"):
    df = pd.read_excel(filename, sheet_name=None)

    return df["Sheet2"].loc[:,"顧客名"].unique()


data_list = read_excel()
app = Flask(__name__)
app.config['DEBUG'] = True

# Getの時
@app.route("/", methods=['GET'])
def get():
    selection = request.args.get('customer_name')
    return render_template("index.html", data_list=data_list, selection=selection)


# Postの時
@app.route('/', methods=['POST'])
def post():
    selection = request.form.get('customer_name')
    return render_template("index.html", data_list=data_list, selection=selection)



if __name__ == "__main__":
    app.run()

「GETの時」「POSTの時」の部分をイジりました。
正直GETのPOSTの違いがよく分かっておりません。アクセスするページに指定されたmethodによって、Python側がGETかPOSTかを自動で判別するんでしょうか？

調べると、多くはif文で条件分岐する説明がしてあるが、上記のように単に並列で同じように並べて書いただけのものがあったので真似したら動いた(　＾∀＾)…
理解したら追記する。

3. テンプレートファイル

こちらも前回から少しイジった。
index.html

<!DOCTYPE html>
<html>

  <head>
    <title>flask</title>
    <style type="text/css">
        select { width: 250px;
                height: 5em;
        }
    </style>
  </head>
  <body>
          <form action="/" method="POST">
                  <select name="customer_name">
                        <option value="null" disabled selected>選択して下さい</option>
                        {% for data in data_list %}
                        <option value="{{ data }}">{{ data }}</option>
                        {% endfor %}
                </select>


                <div>
                        <input type="submit" value="送信">
                </div>
                <p>{{ selection }}</p>

  </body>
</html>

前回から変えた部分は、

真ん中あたりのform actionの部分
option value="null"で選択肢の1行目に説明を入れた
最後のinput type="submit"の送信ボタンの設置
その下のpに選択した値の表示用部分

ディレクトリ構成

前回と同じ。

$ tree

作業ディレクトリ
.
├── app.py
├── sample.xlsx
└── templates
    └── index.html

1 directory, 3 files

準備が済んだら実行

$ python app.py

サーバーが起動するので、ブラウザでlocalhost:5000にアクセス。
サーバーを止める時はCtrl + c

アクセスすると、

f:id:chayarokurokuro:20210116003152j:plain

プルダウンを開くと、

f:id:chayarokurokuro:20210116003245j:plain

選択して送信ボタンを押すと、

f:id:chayarokurokuro:20210116003326j:plain

次回は、送信ボタンの下に表示された物をExcelに書き込むことをやる。出来るかな。

以上です。

追記
続きは中断する。我が能力では複雑すぎた。もっとhtmlやFlaskの仕組みを理解してからにする。

よちよちpython

独習 python/Qpython/Pydroid3/termux/Linux

【Flask】Excelの売上台帳にWebアプリからプルダウン入力する其の2

目次