INTER-Mediator

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