エピソードを使ったINTER-Mediatorのハンズオン 5 - 機能拡張 (集計)

はじめに

大勉強会のハンズオンのエピソードです。全員でエピソードに沿ってハンズオンを行います。マシンは各自持参したマシンかイベントで用意したマシンを1名1台使用します。

『エピソードを使ったINTER-Mediatorのハンズオン 4 - 機能拡張 (検索)』を拡張します。前段階で作成した、『page06.html』と『def06.php』をそれぞれ、『page07.html』と『def07.php』にコピーして機能拡張します。コピー後、ページファイルの中の定義ファイルを指定している部分を<script type="text/javascript" src="def07.php"></script>に書き直すのを忘れずに。

ここでは、集計機能を追加します。

シナリオ

背景

外回り営業マンに完成したWebアプリを見せたら、機能は満たしているので合格でした。ただ、入力支援の機能や件数がふえてきたら検索や集計ができると助かるとのこと。つまり、機能拡張の依頼です。

機能拡張(集計機能を追加する)

『エピソードを使ったINTER-Mediatorのハンズオン 4 - 機能拡張 (検索)』の続きとして、集計機能を実装します。起票の有無で絞り込みをして合計金額を計算します。

課題

『Calculations』キーを使って、出金額の合計を計算します。<tbody>タグ内の各出金額を<tfoot>タグ内で表示させます。

課題1: 定義ファイルを編集する

手順1: 右上の『Show All』ボタンをクリックする。

手順2:『Calculations』キーを追加して、次の通りに入力する。

Calculationsの値

field: total
expression: sum(expenses_memo3@withdraw)

課題2: ページファイルを編集する

手順1: 『page07.html』を開き、次の通りに入力する。

</tbody>タグの後に挿入する。

<tfoot>
  <tr><td>合計:<span data-im="expenses_memo3@total">999</span></td></tr>
</tfoot>