Edited at

エピソードを使ったINTER-Mediatorのハンズオン 2 - 機能拡張 (ポップアップメニュー)

More than 1 year has passed since last update.


はじめに

大勉強会のハンズオンのエピソードです。全員でエピソードに沿ってハンズオンを行います。マシンは各自持参したマシンかイベントで用意したマシンを1名1台使用します。

エピソードを使ったINTER-Mediatorのハンズオン 1 - 基本機能』を拡張します。前段階で作成した、『page02.html』と『def02.php』をそれぞれ、『page03.html』と『def03.php』にコピーして機能拡張します。

page03.html内で対象定義ファイルを指定している部分を<script type="text/javascript" src="def03.php"></script>に変更しておくことを忘れずに。

ここでは、ポップアップメニューを追加して入力支援できるようにします。


シナリオ


背景

外回り営業マンに完成したWebアプリを見せたら、機能は満たしているので合格でした。ただ、入力支援の機能や件数がふえてきたら検索や集計ができると助かるとのこと。つまり、機能拡張の依頼です。

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f35343433392f37653835376639322d666239322d316536612d376339392d3438373532633736623364642e706e67.png


機能拡張(ポップアップメニューを追加する)

貸方科目と借方科目は、すでに入力する文字列が決まっているので、都度文字列を入力から、ポップアップメニューを使った選択入力に変更します。


事前準備

貸方科目と借方科目で取りうる文字列を打ち合わせしました。

勘定科目は、管理番号が指定されています。また、『経費メモ』で使う可能性があるものを抜き出しました。科目は、次の一覧のいずれかを選択するとのことなので、数からしてもポップアップメニューに向いています。

貸方科目

管理番号
科目名

6123
法定福利費

6226
厚生費

6225
消耗品費

6217
事務用品費

6216
修繕費

6112
旅費交通費

6218
通信費・電話料

6113
広告宣伝費

6223
接待交際費

6116
支払手数料

6228
諸会費

6229
新聞図書費

借方科目

管理番号
貸方科目

1100
現金


課題

ポップアップメニューで選択項目の元になるテーブルを作成する。貸方科目用のテーブル名を『debit_items』とし、貸方科目用のテーブル名『credit_items』とする。カラムには、『id』, 管理番号として『code』, 科目名として『name』をとする。

手順1: 『debit_items』テーブルと『credit_items』テーブルを作成する。


debit_itemsテーブル

CREATE TABLE debit_items (

id INT(2) NOT NULL AUTO_INCREMENT,
code char(4) NOT NULL UNIQUE,
name VARCHAR(10) NOT NULL UNIQUE,
PRIMARY KEY (id)
);


credit_itemsテーブル

CREATE TABLE credit_items (

id INT(2) NOT NULL AUTO_INCREMENT,
code char(4) NOT NULL UNIQUE,
name VARCHAR(10) NOT NULL UNIQUE,
PRIMARY KEY (id)
);


確認

describe debit_items;

describe credit_items;

手順2: 『debit_items』テーブルと『credit_items』テーブルのレコードを作成する。


debitレコード

INSERT INTO debit_items(code, name) VALUES ('6213','法定福利費');

INSERT INTO debit_items(code, name) VALUES ('6226','厚生費');
INSERT INTO debit_items(code, name) VALUES ('6225','消耗品費');
INSERT INTO debit_items(code, name) VALUES ('6217','事務用品費');
INSERT INTO debit_items(code, name) VALUES ('6216','修繕費');
INSERT INTO debit_items(code, name) VALUES ('6112','旅費交通費');
INSERT INTO debit_items(code, name) VALUES ('6218','通信費・電話料');
INSERT INTO debit_items(code, name) VALUES ('6113','広告宣伝費');
INSERT INTO debit_items(code, name) VALUES ('6223','接待交際費');
INSERT INTO debit_items(code, name) VALUES ('6116','支払手数料');
INSERT INTO debit_items(code, name) VALUES ('6228','諸会費');
INSERT INTO debit_items(code, name) VALUES ('6229','新聞図書費');


creditレコード

INSERT INTO credit_items(code, name) VALUES ('1100','現金');



確認

select * from debit_items;

select * from credit_items;

手順3: 『expenses_memo』テーブルを基にポップアップメニューに対応した『expenses_memo2』テーブルを作成する。


expenses_memo2テーブル

CREATE TABLE expenses_memo2 (

id INT(11) NOT NULL AUTO_INCREMENT,
date DATE,
debit_item_code CHAR(4) NOT NULL,
credit_item_code CHAR(4) NOT NULL,
destination VARCHAR(20),
summary VARCHAR(20),
withdraw NUMERIC(8,0),
issued CHAR(1),
PRIMARY KEY (id)
);

手順4: 『expenses_memo2』テーブルのレコードを作成する。


expenses_memo2レコード

INSERT INTO expenses_memo2(date,debit_item_code,credit_item_code,destination,summary,withdraw,issued) VALUES ('2018-05-17','6112','1100','公共交通機関','新小岩<->新宿 @302x2',604,'1');

INSERT INTO expenses_memo2(date,debit_item_code,credit_item_code,destination,summary,withdraw,issued) VALUES ('2018-05-17','6218','1100','葛飾郵便局','レターバックライト',360,'1');
INSERT INTO expenses_memo2(date,debit_item_code,credit_item_code,destination,summary,withdraw,issued) VALUES ('2018-05-17','6112','1100','公共交通機関','四ツ木<->浅草 @302x2',656,'1');


データ確認

select

expenses_memo2.id as 'id',
expenses_memo2.date as 'date',
debit_items.name as 'debit',
credit_items.name as 'credit',
expenses_memo2.destination as 'destination',
expenses_memo2.summary as 'summary',
expenses_memo2.withdraw as 'withdraw',
expenses_memo2.issued as 'issued'
from expenses_memo2
left outer join debit_items on expenses_memo2.debit_item_code = debit_items.code
left outer join credit_items on expenses_memo2.credit_item_code = credit_items.code
;


課題2: 貸方科目と借方科目をポップアップメニューにする

手順1: 『pape03.tml』の<tbody>タグ内を次のとおり編集する。


抜粋

<tbody>

<tr>
<td><input type="text" data-im="expenses_memo2@date"/></td>
<td><input type="text" data-im="expenses_memo2@debit_item_code"/></td>
<td><input type="text" data-im="expenses_memo2@credit_item_code"/></td>
<td><input type="text" data-im="expenses_memo2@destination"/></td>
<td><input type="text" data-im="expenses_memo2@summary"/></td>
<td><input type="text" data-im="expenses_memo2@withdraw"/></td>
<td><input type="checkbox" data-im="expenses_memo2@issued" value="1"/></td>
<td></td>
</tr>

</tbody>


手順2: 定義ファイル(def03.php)を編集する。


変更項目

name: expenses_memo2


ここまでで、ポップアップの前の状態までできた。

スクリーンショット 2018-07-29 13.28.51.png

手順2: 定義ファイル(def03.php)に『debit_items』と『credit_items』の2のコンテクストを追加する。


debit_items

name: debit_items

key: id


credit_items

name: credit_items

key: id

手順3: 『pape03.html』の<tbody>タグ内を次のとおり編集する。


抜粋

<tbody>

<tr>
<td><input type="text" data-im="expenses_memo2@date"/></td>

<!-- <td><input type="text" data-im="expenses_memo2@debit_item_code"/></td> -->
<td><select data-im="expenses_memo2@debit_item_code">
<option data-im="debit_items@code@value debit_items@name"></option>
</select></td>

<!-- <td><input type="text" data-im="expenses_memo2@credit_item_code"/></td>-->
<td><select data-im="expenses_memo2@credit_item_code">
<option data-im="credit_items@code@value credit_items@name"></option>
</select></td>

<td><input type="text" data-im="expenses_memo2@destination"/></td>
<td><input type="text" data-im="expenses_memo2@summary"/></td>
<td><input type="text" data-im="expenses_memo2@withdraw"/></td>
<td><input type="checkbox" data-im="expenses_memo2@issued" value="1"/></td>
<td></td>
</tr>

</tbody>


完成

スクリーンショット 2018-07-29 14.27.32.png