INTER-Mediatorのハンズオン - セッション3: 伝票とリレーション

+ 作成日 2017/11/22
+ 14分
+ YouTube: https://youtu.be/aTXh1dIVnTA
+ Doc: https://qiita.com/motofumi/items/08033be70a42be613a75

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

# ゴール
トライアル用のページファイル(page04.html)と定義ファイル(def04.php)を編集して伝票のページを作成し、期待通り表示できれば完成です。なお、使用するデータベースのスキーマは用意されています。

![スクリーンショット 2017-11-22 20.02.52.png](https://qiita-image-store.s3.amazonaws.com/0/54439/eca2cdee-7c44-4e26-5adb-be23e487b906.png)


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


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

##3-0: リレーションのテーブルを確認する
ターミナル.appからVirtualマシンへアクセス
`$ ssh developer@192.168.56.101`
![スクリーンショット 2017-11-22 19.50.21.png](https://qiita-image-store.s3.amazonaws.com/0/54439/965505b7-2aef-8ddf-92bb-a285fa306506.png)


MariaDBのテーブルにアスセスし、一覧を入手
invoiceテーブル
`$ mysql -u web -p test_db -e 'select id, issued, title from invoice;'`
![スクリーンショット 2017-11-22 19.51.36.png](https://qiita-image-store.s3.amazonaws.com/0/54439/cdce5cef-96b8-2ead-7f81-47576ec2767e.png)



itemテーブル
`$ mysql -u web -p test_db -e 'select id, invoice_id, product_id, qty from item;'`
![スクリーンショット 2017-11-22 19.52.18.png](https://qiita-image-store.s3.amazonaws.com/0/54439/b72c2d72-69c9-7924-3094-b6dabfa52b8f.png)




productテーブル
`$ mysql -u web -p test_db -e 'select id, name, unitprice from product;'`
![スクリーンショット 2017-11-22 19.52.48.png](https://qiita-image-store.s3.amazonaws.com/0/54439/5671967a-1b28-a285-03d1-8379c2f08182.png)




invice, item, productの外部(left join)結合テーブル
`$ mysql -u web -p test_db -e 'select invoice.id, invoice.issued, invoice.title, item.product_id, product.name, item.qty, product.unitprice from invoice left join item on invoice.id = item.invoice_id left join product on item.product_id = product.id;'`
![スクリーンショット 2017-11-22 19.53.09.png](https://qiita-image-store.s3.amazonaws.com/0/54439/8bbb12af-1eff-344e-8ad7-a1fd510fc981.png)


invice, item, productの外部(left join)結合テーブルからinvoice.id=1を抽出
`$ mysql -u web -p test_db -e 'select invoice.id, invoice.issued, invoice.title, item.product_id, product.name, item.qty, product.unitprice from invoice left join item on invoice.id = item.invoice_id left join product on item.product_id = product.id where invoice.id = 1;'`
![スクリーンショット 2017-11-22 19.53.52.png](https://qiita-image-store.s3.amazonaws.com/0/54439/1deb49a9-0cbc-4d4a-6de8-b756a6aacf21.png)



##3-1: 伝票とリレーションシップを作成する
<details>
<summary>def04.phpを編集</summary>定義ファイルの編集状況
</details>

`name: invoice`
`table: `
`view: `
`key: id`
`paging: true`
`repeat-control: confirm-insert confirm-delete`
`records: 1`
`maxrecords: 100`
`Calculation: [field: total_calc, expression: format(sum(item@amount_calc))]`

`name: item`
`table: `
`view: `
`key: id`
`paging: `
`repeat-control: confirm-insert confirm-delete`
`records:`
`maxrecords:`
`Relationship: [foreign-key: invoice_id, join-field: id, operator: =]`
`Calculation: [field: amount_calc, expression: format(qty * product@unitprice)]`

`name: product`
`table: `
`view: `
`key: id`
`paging: `
`repeat-control: `
`records: 100`
`maxrecords: 100`
`Relationship: [foreign-key: id, join-field: product_id, operator: =]`


`db-class: PDO`
`dsn: mysql:host=localhost;dbname=test_db;charset=utf8mb4`
`user: web`
`password: password`
`Debug: false`


<details>
<summary>page04.htmlを編集</summary>\<html>タグ以下を次のコードに変更入する
</details>

```page04.html
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" type="text/css" href="INTER-Mediator/Samples/sample.css">
    <script type="text/javascript" src="def04.php"></script>
</head>
<body>
<div id="IM_NAVIGATOR"></div>
  	
<table border="1">
<tbody>
	<tr>
		<th>id</th>
        <td><input type="text" data-im="invoice@id"></td>
    </tr>
    <tr>
        <th>issued</th>
        <td><input type="text" data-im="invoice@issued" value=""></td>
    </tr>
    <tr>
        <th>title</th>
        <td><input type="text" data-im="invoice@title" value=""></td>
    </tr>     
    <tr>
        <td colspan="2">
            	<table border="1">
                <thead>
                	<tr>
                    	<th>product</th>
                    	<th>qty</th>
                    	<th>unitprice (master)</th>
                    	<th>amount</th>
                    	<th></th>
                	</tr>
                </thead>
                <tbody>
                	<tr>
                    	<td>
                       		<input type="text" data-im="item@product_id" size="2">
                       		<span class="inline" data-im-control="enclosure">
                            <span class="inline" data-im-control="repeater" data-im="product@name"></span>
                        	</span>
                    	</td>
                    	<td><input class="price" type="text" data-im="item@qty" size="5"></td>
                    	<td>
                        	<span class="inline" data-im-control="enclosure">
                            <span class="inline" data-im-control="repeater" data-im="product@unitprice"></span>
                        	</span>
                      	</td>
                   		<td align="right">
                      		<span align="right" data-im="item@amount_calc"></span>
                  		</td>
                  		<td></td>
                	</tr>
                </tbody>
            	</table>
		</td>
	</tr>
    <tr>
        <th>Total:</th>
        <td data-im="invoice@total_calc"></td>
    </tr>
</tbody>
</table>

</body>
</html>
```

##3-2: 動作確認をする
### 伝票での明細行に相当する仕組みがリレーションシップにより取り出されているか？
INTER-Mediator
![スクリーンショット 2017-11-22 20.02.52.png](https://qiita-image-store.s3.amazonaws.com/0/54439/ccddc6a6-7dad-572c-0296-04c5bb968ad8.png)

SQL
![スクリーンショット 2017-11-22 19.53.52.png](https://qiita-image-store.s3.amazonaws.com/0/54439/7385ecdc-8022-63d1-6bbc-de0a2bf72461.png)



### 明細の各行では、商品マスターからの商品名と単価の取り出しが行われているか？
INTER-Mediator
![スクリーンショット 2017-11-22 20.02.52.png](https://qiita-image-store.s3.amazonaws.com/0/54439/ccddc6a6-7dad-572c-0296-04c5bb968ad8.png)

Productテーブル（商品マスタ）
![スクリーンショット 2017-11-22 19.52.48.png](https://qiita-image-store.s3.amazonaws.com/0/54439/d4c633f0-f323-cc0b-876a-1f1f088e1c18.png)



### productの数字を書き換えると、商品マスターの違うレコードが取り出されているか？
product変更前
![スクリーンショット 2017-11-22 20.02.52.png](https://qiita-image-store.s3.amazonaws.com/0/54439/4def1e7f-6503-7323-c02a-a162dff821d3.png)

product変更後
![スクリーンショット 2017-11-22 20.17.14.png](https://qiita-image-store.s3.amazonaws.com/0/54439/c38a5ded-88f9-ebbf-293c-556e62b128cc.png)


### qtyを変更すると、単価x個数が計算され直され、トータルも再計算されているか？
qty変更前
![スクリーンショット 2017-11-22 20.17.14.png](https://qiita-image-store.s3.amazonaws.com/0/54439/1b70ac58-208f-7e34-9d83-dd1e2dbb9482.png)


qty変更後
![スクリーンショット 2017-11-22 20.17.39.png](https://qiita-image-store.s3.amazonaws.com/0/54439/1ba8cf3f-6dcd-b5cb-eb4f-c6e53690e8c2.png)