作成日 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)を編集して伝票のページを作成し、期待通り表示できれば完成です。なお、使用するデータベースのスキーマは用意されています。

前提条件

INTER-Mediatorをはじめよう - バーチャルマシンの準備でバーチャルマシンが用意されていること。
ターミナル.appでコマンドを入力したことがあること。

手順

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

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

ターミナル.appからVirtualマシンへアクセス
$ ssh developer@192.168.56.101

MariaDBのテーブルにアスセスし、一覧を入手
invoiceテーブル
$ mysql -u web -p test_db -e 'select id, issued, title from invoice;'

itemテーブル
$ mysql -u web -p test_db -e 'select id, invoice_id, product_id, qty from item;'

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

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;'

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;'

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>