作成：2024/12/09
管理番号：W006
今、PythonでWEBアプリの作成を進めています。少しづつ機能を追加して、ローカルの仮想環境で動作確認をするという作業を地道に行っている状況です。
そして、進捗がある都度、このブログで紹介しています。
前回は、家計簿のページを追加して、JSONファイルのデータを送って画面に表示してみました。今、このような表示になります。
■画面１■
■各ファイルの説明■
「index.js」ファイルの機能を有効にするために「layout.html」ファイルを修正して、 「index.js」ファイルへのリンクを追加します。
■コード３■
入力フォームが追加されていますね。
JSONファイルを辞書のリストに読み込み、テンプレートのHTMLファイル内のFOR文でループして表示しています。
データを読み込んでテンプレートエンジンで「動的」な表示ができたわけですが、準備されたデータを表示するだけで、「動的」な要素がまだ足りません。
今回の実施内容
そこで今回は、画面上に入力された情報を加工して画面表示を更新させてみたいと思います。
概要
前回作成した家計簿のページに入力フォームを追加して、フォームに入力された収支情報をリアルタイムに画面に表示します。
このときの処理の流れは、
①クライアントの家計簿画面上で情報入力
②入力内容をサーバにPOST送信
③サーバーで受け取り
④JSONファイルに入力内容を追加
⑤画面表示を書き換え
となります。
この処理の流れをプログラムとして、実装しましたので順番に説明します。
その前に、②で「POST送信」と紹介しましたが、これは何でしょうか、と疑問に思われる方もいらっしゃると思いますので、少し説明します。
GET送信とPOST送信について
超初心者なので、GET送信とPOST送信のことについて少し勉強しました。
今理解している内容を紹介します。
Webにおいてサーバとクライアント間のやりとりはHTTPで通信し、リクエストとレスポンスで成立しています。
クライアントがHTTPリクエストをサーバに送ることで、このやりとりが始まります。そのメソッドの一部として、「GET」と「POST」があります。
基本的には「GET」が使われます。
例えば、ページの移動がこれに該当します。
一方、サーバに対して「何らかのデータ」を渡したい場合、「POST」を使います。
例えば、パスワード等を送信する場合です。
フォームに入力した内容を送信する場合等が該当します。今回、この機能を追加して、POST送信を行います。
それでは
プログラムの説明に戻ります。
関係ファイル
今回の修正に関係するファイルは次の通りです。
Pythonファイル -main.py --- FLASKのテンプレートエンジンでテンプレートHTMLをレンダリングする HTMLファイル（テンプレートHTML） -kd.html --- 家計簿ページ -layout.html --- 各ページの共通部分を抽出したレイアウトテンプレート javascriptファイル HTMLファイルに動きをつける -index.js --- layout.htmlから呼び出し■■
では始めます。
①フォームに情報入力
家計簿ページに情報入力用のFORMを追加します。「kd.html」ファイルを修正します。
■コード１■ ■解説等■
POST方式でリクエストを送るには、HTMLの<form>タグの属性で「method="POST"」と指定します。2行目がその部分です。
②入力内容をサーバにPOST送信
入力された内容をサーバにPOST送信するのですが、この部分はJavascriptで実装してみたいと思います。
「static」フォルダ内に「javascript」フォルダを追加して、そこに「index.js」ファイルを新たに追加します。
「index.js」ファイルの内容は次の通りです。
■コード２■
function formReset() {
document.pay_input_form.submit();
document.pay_input_form.reset();
}
■解説等■送信ボタンを押すと、フォームの内容が送信されます。その後、フォームを空にします。
■解説等■
③サーバーで受け取り
「main.py」ファイルを修正します。
■コード４■ ■解説等■
requestをインポート（コード４の1行目）
get とpostを受信できるようにします（コード４の4行目）
get とpostの受信したときの処理を、場合分けしています。（コード４の7行目〜と16行目〜）
④JSONファイルに入力内容を追加
get 受信の場合は、保存されているJSONファイルの情報をそのまま表示するだけですが
post 受信の場合は、JSONファイルに受け取ったフォーム入力内容を追加し、保存します。（コード４の22行目〜）
⑤画面表示を書き換え
最後に、家計簿ページを呼び出します。（コード４の36行目〜）
このときにgetを 受信して、保存されているJSONファイルの情報を表示します（コード４の7行目〜）
以上が、今回の実施内容になります。
実施結果
表示画面
それでは、修正後の内容を画面に表示してみます。
ブラウザに
http://127.0.0.1:5000/kakeibo
と入力して表示すると、このように表示されました。
■画面２■
あと、家計簿ページの表題も追加しておきました。
フォルダとファイルの構成
実施後のフォルダとファイルの構成は下図のようになっています。
■図■
C:\Py\Project\MyPj\
|--FlaskPj\
| |--templates\
| | |--kakeibo_test_json\
| | | └--kd.html 2024/12/9★修正
| | |--layout.html 2024/12/9★修正
| | └--index.html 2024/12/7
| |--static\
| | |--javascript\ ★追加
| | | └--index.js 2024/12/9★追加
| | └--index.css 2024/12/3
| └--main.py 2024/12/9★修正
└--KDjson.json 2024/12/8
■■
おわりに
以上、今回は、入力フォームを追加して、フォームに入力された情報をリアルタイムに画面に表示する機能を追加しました。
WEBアプリのテンプレートエンジンを利用した「動的」なwebページ作成の要素が少し強化されたように思います。
今回は、Javascriptにも挑戦してみました。
0 件のコメント:
コメントを投稿