Help us understand the problem. What is going on with this article?

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした