作成：2024/12/15
管理番号：W007
はじめに
今、PythonでWEBアプリの作成を進めています。少しづつ機能を追加して、ローカルの仮想環境で動作確認をするという作業を地道に行っている状況です。
そして、進捗がある都度、このブログで紹介しています。
前回までの状況
前回は、家計簿のページに入力フォームを追加して、フォームに入力された収支情報をリアルタイムに画面に表示する機能を追加しました。
HTTPリクエストの「GET」と「POST」を使っています。
Javascriptも使ってみました。
今、このような表示になっています。
■画面1■現在表示
改善点等
現在の状態では、収支情報の追加は出来ますが、削除が出来ません。基本的に削除することは無いのでしょうが、誤って不要な情報を追加したりすることが考えられます。
そこで今回は、レコードの削除機能の追加をしてみたいと思います。
削除機能を追加するにあたり、収支情報のリストを加工しやすいようにクラスを導入しておきたいと思います。
今回の実施内容
ということで、今回は、
（1）クラスの導入
（2）レコードの削除機能追加
を行います。
今、このプロジェクトに関連するファイルは、次のとおりで、◆が今回修正等を施すファイルです。
■関連ファイル■
Pythonファイル ◆main.py --- サーバから最初に呼び出されるプログラム、バックエンドからテンプレートエンジンでテンプレートHTMLをレンダリングしてページを表示します。
◇KDpay.py --- 収支データをクラスとして定義
HTMLファイル（テンプレートHTML）
◇index.html --- テスト用ページ
◆kd.html --- 家計簿ページ
◇layout.html --- 各ページの共通部分を抽出したレイアウトテンプレート
CSSファイル
◇index.css ---ページ装飾用、HTMLファイルから別ファイルとして独立させたもの
javascriptファイル
◆index.js ---フロントエンドでjavascriptによりページに動きをつけるためのもの、HTMLファイルから別ファイルとして独立させたもの
json ファイル
◇KDjson.json |
では、始めます。
（1）クラスの導入
以前、収支データの管理用にクラスを作ったことがあります。この部分を一つのpythonファイル「KDpay.py」として保存しておきましたので、これを活用します。
まず「KDpay.py」から PayManager を import します。
■コード1■
from KDpay import PayManager #--- 追加 7-1■解説等■
次に、収支データ管理用クラスからオブジェクトを作成し、保存してあるJSONファイルからデータを読み出して、その内容をオブジェクトに追加します。
■コード2■
# ペイ(収支)データ管理用クラス(KDpay.py)からオブジェクト作成 #--- 追加7
pay_manager = PayManager()
# JSONファイルを読み込んで、辞書型リストを作成
with open( file_path, mode='r', encoding="UTF-8") as open_json:
json_load_list = json.load(open_json)
# 読み込んだファイルをペイ(収支)データ管理用クラスオブジェクトに追加 --- 修正7
for pay_data in json_load_list:
pay_manager.add_pay(pay_data)
■解説等■これでクラスの導入が完了です。
（2）レコードの削除機能追加
削除したいレコードを番号で指定し、削除ボタンを押すと、そのレコードが削除できるという、機能を追加します。
まず、家計簿のページ（kd.html）の画面上に番号を入力するためのフォームと「削除」ボタンを追加します。
■コード3■
■解説等■
「削除」ボタンが押されたときに、POSTメソッドを送信するようにしています。
そして「削除」ボタンが押されたときの送信を javascript で処理します。
■コード4■
■解説等■
次に、レコードの表示項目に「番号」を追加します。
■コード5■
■解説等■
テンプレートエンジンを使用してhtml上で、動的に連番を振ろうとすると、単にforループで変数を加算するだけでは上手く行きませんでした。
そこで解決策として、リストを使うことにしました。
具体的には
①cnt というリストを定義して、1番目の要素に1を追加します。
②1番目の要素に1を加算した数値を、2番目の要素として追加します。
③1番目の要素を削除して、2番目の要素を1番目の要素に繰り上げます。
②③をレコードの数だけforループで繰り返して、処理します。
次に、 「削除」ボタンが押されたときの処理です。
削除するレコードの番号をPOST受信したら、処理を開始です。
クラスのメソッドで該当するレコードを削除します。このとき、リストの要素番号が0から始まるので注意です。
最後に、クラスのメソッドを少しさわります。
■コード7■
■解説等■
入力されたレコードの削除番号が、レコードの数より大きいとエラーになってしまいますので、入力された番号がレコード数より少ないときだけレコードを削除するようにしておきます。
以上で修正完了です。
実施結果
表示
では、ブラウザで表示してみます。
仮想環境ですので
http://127.0.0.1:5000/kakeibo
として表示すると、このように表示されました。
■画面2■
削除用の入力欄とボタン、
収支一覧には番号が追加されていますね。
フォルダとファイルの構成
実施後のフォルダとファイルの構成は下図のようになっています。
■図■
■■
|--FlaskPj\ | |--templates\ | | |--kakeibo_test_json\ | | | └--kd.html 2024/12/15 | | |--layout.html 2024/12/9 | | └--index.html 2024/12/7 | |--static\ | | |--javascript\ | | | └--index.js 2024/12/15 | | └--index.css 2024/12/3 | | | |--KDpay.py 2024/12/15 | └--main.py 2024/12/15 └--KDjson.json 2024/12/8
|
ソースコード
上記の説明では、今回の実施内容に関係がある箇所のみを紹介しています。
各ファイルの全コードは、こちらをご覧下さい（→参照）
おわりに
以上、今回は、
（1）クラスの導入
（2）レコードの削除機能追加
を行いました。
テンプレートエンジンを使用してhtml上で、動的に連番を振るところで少し苦労しました。
また一歩、WEBアプリのテンプレートエンジンを利用した「動的」なwebページ作成の要素が少し強化されたように思います。
0 件のコメント:
コメントを投稿