INTER-Mediatorのハンズオン - セッション4: 資産管理

+ 作成日 2017/11/24
+ 21分
+ YouTube: https://youtu.be/4LN9wy5Xacg
+ Doc: https://qiita.com/motofumi/items/bc1d0d88b18d38f63242

# はじめに
INTER-Mediatorでは、ハンズオンが5つ用意されています。セッション4: 資産管理を作成します。データベースは、MySQL(MariaDB)で行います。

# ゴール
INTER-Mediatorのサンプルにあるアプリケーションの動作を調べて、アプリケーションの改変を行います。期待通り表示できれば完成です。なお、使用するデータベースのスキーマは用意されています。


# 前提条件
* [INTER-Mediatorをはじめよう - バーチャルマシンの準備](http://qiita.com/motofumi/items/ff94924a820e9c05b0c8)でバーチャルマシンが用意されていること。
* ターミナル.appでコマンドを入力したことがあること。


# 手順
INTER-Mediatorサイトの[ハンズオンセッション手順書](http://inter-mediator.info/ja/for-novices/handson.html) に沿って作成してあります。手順は、手順書を見ながら行い、編集内容の確認やコードのコピペはこちらから行うと便利です。


##4-1: 『社内資産備品管理（サンプル）』を表示
1. 『http://192.168.56.101/ 』アクセスする
2. サンプルプログラム『Asset Management Sample』をみつけて、MySQL/MariaDBの『Improved』をクリックする
![スクリーンショット 2017-11-24 13.32.42 2.png](https://qiita-image-store.s3.amazonaws.com/0/54439/e6254d0e-91e5-60d2-e6a9-3969ebb6ef4a.png)

3. 『社内資産備品管理（サンプル）』ページのURLをメモする。

![スクリーンショット 2017-11-24 14.27.57.png](https://qiita-image-store.s3.amazonaws.com/0/54439/c1d1bf08-31c1-db51-7e97-6d9f0c1d90df.png)

URL: http://192.168.56.101/INTER-Mediator/Samples/Sample_Asset/asset.html


##4-2: 『社内資産備品管理（サンプル）』を動作確認
1. 『詳細』ボタンをクリックする
2. 『追加』ボタンをクリックする
3. 担当者やメモを適当に設定する

![スクリーンショット 2017-11-24 14.32.52.png](https://qiita-image-store.s3.amazonaws.com/0/54439/094c13e9-1e7b-75ed-f9dd-4c8b5b65472f.png)

4. 『本日返却』ボタンをクリックする
![スクリーンショット 2017-11-24 14.33.27.png](https://qiita-image-store.s3.amazonaws.com/0/54439/36e3bf3d-e211-27dc-ed4f-d6b0c7fc5908.png)


##4-2: 『社内資産備品管理（サンプル）』のソースファイルを確認
Samples/Sample_Assetディレクトリにアクセスして、『asset.html』を開く
`$ cd /var/www/localhost/htdocs/INTER-Mediator/Samples/Sample_Asset`
`$ cat asset.html`


1. 定義ファイル名は？
![スクリーンショット 2017-11-24 14.51.50.png](https://qiita-image-store.s3.amazonaws.com/0/54439/61aa9c52-da51-f9df-024f-724f0cfce4e8.png)

2. 1つ目のTABLEタグ内で使用されているコンテキスト名は？
![スクリーンショット 2017-11-24 14.56.51.png](https://qiita-image-store.s3.amazonaws.com/0/54439/94a4c2c4-4fb5-1c88-2d4a-b5adba220c52.png)

3. 2つ目のTABLEタグ内で使用されているコンテキスト名は？
![スクリーンショット 2017-11-24 14.58.15.png](https://qiita-image-store.s3.amazonaws.com/0/54439/1e3a5cfa-beb0-736b-fdbf-06b75d00b91f.png)

4. 2つ目のTABLEタグの内部TABLEタグ内で使用されているコンテキスト名は？ およびSeletタグ内のコンテクスト名は？
![スクリーンショット 2017-11-24 14.59.10.png](https://qiita-image-store.s3.amazonaws.com/0/54439/20667711-3267-26e3-3a84-f316421a0015.png)

5. 『本日返却』ボタンをクリックすると、setBackDate関数が呼び出されます。ソースから動作を解析しましょう。
![スクリーンショット 2017-11-24 15.17.29.png](https://qiita-image-store.s3.amazonaws.com/0/54439/6fb5ed2d-02b1-e985-0e42-32256b7c1e5e.png)

##4-3: 『社内資産備品管理（サンプル）』の定義ファイルを確認
定義ファイルエディタで開く
http://192.168.56.101/INTER-Mediator/INTER-Mediator-Support/defedit.html?target=../Samples/Sample_Asset/asset_contexts.php

### Asset
![スクリーンショット 2017-11-24 15.55.59.png](https://qiita-image-store.s3.amazonaws.com/0/54439/efb68355-e91b-3c69-7055-c5a6134f7e44.png)

### Asseteffect
![スクリーンショット 2017-11-24 15.56.09.png](https://qiita-image-store.s3.amazonaws.com/0/54439/f491a3c7-9755-287c-ba9b-8568683a21ae.png)

### Assetdetail
![スクリーンショット 2017-11-24 15.56.23.png](https://qiita-image-store.s3.amazonaws.com/0/54439/54e1d9bc-df8d-b344-2ff7-447b20621176.png)

(Show All)Calculations
![スクリーンショット 2017-11-24 16.01.09.png](https://qiita-image-store.s3.amazonaws.com/0/54439/0a725335-6466-2365-511f-a162502291df.png)


### rent
![スクリーンショット 2017-11-24 15.56.37.png](https://qiita-image-store.s3.amazonaws.com/0/54439/41a3aeb9-e7f3-c8b2-403b-0b1acb8add14.png)

(Show All)Calculations
![スクリーンショット 2017-11-24 16.00.15.png](https://qiita-image-store.s3.amazonaws.com/0/54439/6a50fa16-d3f9-e2d6-eb32-4fc71bb54bf6.png)


### staff
![スクリーンショット 2017-11-24 15.56.49.png](https://qiita-image-store.s3.amazonaws.com/0/54439/b0946321-1afd-eff3-899c-e815c6dcfe9a.png)


### rentback
![スクリーンショット 2017-11-24 15.57.00.png](https://qiita-image-store.s3.amazonaws.com/0/54439/47a9e171-04bc-870c-a630-7ca4a2646c57.png)


### category
![スクリーンショット 2017-11-24 15.57.11.png](https://qiita-image-store.s3.amazonaws.com/0/54439/9740e6a2-fceb-6724-2121-fe2e8a5e98c5.png)



##4-3: 『社内資産備品管理（サンプル）』のアプリケーションを改造
ページファイルエディタで開く
http://192.168.56.101/INTER-Mediator/INTER-Mediator-Support/pageedit.html?target=../Samples/Sample_Asset/asset.html

###貸出期間を追加
1. 2つ目のTABLEタグの内部TABLEタグ内に貸出期間セルを追加する
![スクリーンショット 2017-11-24 16.38.32.png](https://qiita-image-store.s3.amazonaws.com/0/54439/b108244c-389e-4da1-e113-6f82ebb1621a.png)
![スクリーンショット 2017-11-24 16.38.20.png](https://qiita-image-store.s3.amazonaws.com/0/54439/d0d0f9ed-a2de-3c6c-cb7e-66460ad3b5f9.png)

2. date関数を使って、『返却日 - 貸出日』計算式を作成する
`
貸出期間 = date(str) - date(str)
datelength = date(rent@backdate) - date(rent@rentdate) +1
`

3. rentコンテキストのCalculationに計算式を追加する
![スクリーンショット 2017-11-24 17.27.24.png](https://qiita-image-store.s3.amazonaws.com/0/54439/622e21c0-c4b9-7b1a-73e3-2256cfa305ff.png)


4. <tr>貸出期間</tr>タグに、rent@datelengthを適用する
![スクリーンショット 2017-11-24 17.22.26.png](https://qiita-image-store.s3.amazonaws.com/0/54439/e42b5d67-8cf1-2b58-a0d4-f22f0dcb1c1f.png)

5.完成
![スクリーンショット 2017-11-24 17.16.11.png](https://qiita-image-store.s3.amazonaws.com/0/54439/d2ad91c3-ccbf-d64a-af85-e19b2487ce91.png)



###貸出期間を追加
1. 2つ目のTABLEタグに平均貸出日数セルを追加する
![スクリーンショット 2017-11-24 17.49.02.png](https://qiita-image-store.s3.amazonaws.com/0/54439/ce08e221-24ac-5017-8183-4779d0691497.png)
![スクリーンショット 2017-11-24 17.48.23.png](https://qiita-image-store.s3.amazonaws.com/0/54439/55344787-1220-017e-a033-c6482e8bf9c6.png)

2. average関数を使って、『貸出期間』から平均を計算させる
`
平均貸出日数 = average(x)
averagelength = average(x)
`

3. assetdetailコンテキストのCalculationに計算式を追加する
![スクリーンショット 2017-11-24 18.08.27.png](https://qiita-image-store.s3.amazonaws.com/0/54439/8cd56cfa-5b29-7b95-1724-c3df97ba79da.png)

4. <tr>貸出期間</tr>タグに、rent@datelengthを適用する
![スクリーンショット 2017-11-24 18.07.58.png](https://qiita-image-store.s3.amazonaws.com/0/54439/bf0a537c-33dd-98fc-a7d2-59b951543546.png)

5. 完成
![スクリーンショット 2017-11-24 18.12.26.png](https://qiita-image-store.s3.amazonaws.com/0/54439/e071cd6b-5c24-54b2-021a-d88571216e11.png)