記事作成：2024/12/16
管理番号：W008
はじめに
今、PythonでWEBアプリの作成を進めています。少しづつ機能を追加して、ローカルの仮想環境で動作確認をするという作業を地道に行っている状況です。
そして、進捗がある都度、このブログで紹介しています。
前回までの状況
前回は、家計簿ページで誤って不要な情報を追加したときのためにレコードの削除機能を追加しました。
また、削除機能を追加するにあたり、収支情報のリストを加工しやすいようにクラスも併せて導入しました。
テンプレートエンジンを使用してhtml上で、動的に連番を振るところで少し苦労しましたが
今、このような表示になっています。
■画面1■現在の表示
改善等が必要な点
現在の状態では、収支の一覧はありますが、残高表示がありません。
これでは、財産があといくらあるのか、わかりません。
今回の実施内容
そこで今回は、残高表示にチャレンジします。
今、このプロジェクトに関連するファイルは、次のとおりで、◆が今回修正等を施すファイルです。
| 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 |
では、始めます。
残高表示
jinja2のフィルタ機能を使用して、レコードの合計残高を表示します。
このフィルタ機能は、htmlテンプレート上で変数に処理を施して表示することができます。
htmlのコード上で、{{}}内の変数に ' | ' + filter関数を記述するとフィルタが適用されます。変数自体は変更しません。
■コード■ ■解説等■
今回は、フィルタ機能のうち、sumとintを使用します。
sum フィルタを使用して、リスト内のすべての数値の合計を計算し、テンプレートに表示します。
int フィルタを使用して、文字列を数値に変換して、テンプレートに表示します。
実施結果
画面表示
では、ブラウザで表示してみます。
仮想環境ですので
http://127.0.0.1:5000/kakeibo
として表示すると、このように表示されました。
画面中央に残高も表示が追加されていますね。
おわりに
以上、今回はjinja2のフィルタ機能を使用して、レコードの合計残高を表示してみました。
大きな改良ではありませんでしたが、
少しずつ良くなってきて嬉しいです。
引き続き、改良を重ねていきます。
0 件のコメント:
コメントを投稿