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

More than 1 year has passed since last update.


はじめに

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


ゴール

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

スクリーンショット 2017-11-22 20.02.52.png


前提条件


手順

INTER-Mediatorサイトのハンズオンセッション手順書 に沿って作成してあります。手順は、手順書を見ながら行い、編集内容の確認やコードのコピペはこちらから行うと便利です。


3-0: リレーションのテーブルを確認する

ターミナル.appからVirtualマシンへアクセス

$ ssh developer@192.168.56.101

スクリーンショット 2017-11-22 19.50.21.png

MariaDBのテーブルにアスセスし、一覧を入手

invoiceテーブル

$ mysql -u web -p test_db -e 'select id, issued, title from invoice;'

スクリーンショット 2017-11-22 19.51.36.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

productテーブル

$ mysql -u web -p test_db -e 'select id, name, unitprice from product;'

スクリーンショット 2017-11-22 19.52.48.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

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


3-1: 伝票とリレーションシップを作成する



def04.phpを編集定義ファイルの編集状況

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



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


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

SQL

スクリーンショット 2017-11-22 19.53.52.png


明細の各行では、商品マスターからの商品名と単価の取り出しが行われているか?

INTER-Mediator

スクリーンショット 2017-11-22 20.02.52.png

Productテーブル(商品マスタ)

スクリーンショット 2017-11-22 19.52.48.png


productの数字を書き換えると、商品マスターの違うレコードが取り出されているか?

product変更前

スクリーンショット 2017-11-22 20.02.52.png

product変更後

スクリーンショット 2017-11-22 20.17.14.png


qtyを変更すると、単価x個数が計算され直され、トータルも再計算されているか?

qty変更前

スクリーンショット 2017-11-22 20.17.14.png

qty変更後

スクリーンショット 2017-11-22 20.17.39.png