macOS 10.15.7 / PHP 7.3.11

JavaScript版 「カレンダーに血圧を入力して健康管理に役立ててみる」

カレンダーの基本的な動きはシンプルカレンダーと同じである。

血圧データを入力した日の背景色は、青または赤になる。赤は血圧が基準より高かった日である。

日付選択し、入力ボタンをクリックすると、その日の血圧値を入力する入力フォームがカレンダーの右に表示される。

入力フィールドは、最高血圧、最低血圧、確定フラグの３個から構成される。入力中のフィールドは背景が白抜きになる。フィールドのクリックまたはタブキーにより入力フィールドを移動させることができる。

血圧値は、キーボードの数字の押下、またはフォーム上に表示されているテンキーをクリックすることで、白抜きの入力中フィールドに入力される。更新ボタンをクリックすると、入力した値はネットワークを介してサーバに送られデータベースに書き込まれる。

確定フラグはオン「済」、オフ「未」の２値の選択となる。フラグの値はフィールドのクリックまたは、Enterキーの押下で切り替わる。「済」にして更新すると入力確定となり一覧表に反映される。「未」は仮入力という状態であり、データベースに値は登録されるが一覧表に反映されない。

入力を確定して更新すると、その日は入力済になり、月間カレンダーの日付の背景色が変わる。血圧が正常値の場合は青、高血圧の場合は赤になる。正常値は上が 135以下、かつ下が 85以下の場合とし、それ以外は高血圧とする。

一覧表ボタンをクリックすると当月のデータの一覧表が表示される。高血圧の基準は上記の通りである。

月間カレンダーと血圧入力フォーム

health_calendar.html

health_calendar.css

月間カレンダーと血圧入力フォームは、それぞれ別個のブロック要素として定義し、血圧入力フォームは、初期状態は非表示（display:none）としておき、カレンダーの「入力」ボタンのクリックにより表示（display:block）する。

月間一覧表

result.html

result.css

health_calendar1.js

月間カレンダーを表示する。シンプルカレンダーをベースとする。

血圧データーをサーバーから読み込み、入力があった日の背景色を変える。

血圧データ入力フォームを開く。

一覧表を開く

health_calendar2.js

血圧入力フォーム

指示された日付の血圧データをサーバーから読み込み表示する

ユーザは血圧データの入力/変更を行う

入力された血圧データをサーバーに送信する

result.js

月間一覧表

棒グラフの要素は CSSのグリッドを利用して作成する。

血圧データは サーバ上の MySQLデータベースに保存する。アプリケーションはサーバと HTTP通信を行うことによりデータベースのレコードを照会したり更新する。

本アプリケーションは、Webサーバは Apache、サーバ側の SQL処理は PHPで実装しているが、インタフェースの定義が同じあれば、何によって実装されていてもかまわない（例えば Nodejs）。リクエスト送受信の具体的ばコーディング方法については、XMLHttpRequestオブジェクトによる送受信（PHP）を参照されたい。ここでは、インタフェースの定義についてのみ取り上げる。

リクエスト

レスポンスデータ

リクエスト

レスポンスデータ

リクエスト

レスポンスデータ

なし