2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-08-11

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

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

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

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

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f35343433392f37653835376639322d666239322d316536612d376339392d3438373532633736623364642e706e67.png

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

スクリーンショット 2018-08-09 10.07.38.png

課題

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

スクリーンショット 2018-08-17 18.49.18.png

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

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

スクリーンショット 2018-08-17 18.56.53.png

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

Calculationsの値
field: total
expression: sum(expenses_memo3@withdraw)

スクリーンショット 2018-08-17 18.58.19.png

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

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

タグの後に挿入する。
<tfoot>
  <tr><td>合計:<span data-im="expenses_memo3@total">999</span></td></tr>
</tfoot>

スクリーンショット 2018-08-18 21.22.14.png

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?