#はじめに
大勉強会のハンズオンのエピソードです。全員でエピソードに沿ってハンズオンを行います。マシンは各自持参したマシンかイベントで用意したマシンを1名1台使用します。
『エピソードを使ったINTER-Mediatorのハンズオン 1 - 基本機能』を拡張します。前段階で作成した、『page02.html』と『def02.php』をそれぞれ、『page03.html』と『def03.php』にコピーして機能拡張します。
page03.html内で対象定義ファイルを指定している部分を<script type="text/javascript" src="def03.php"></script>に変更しておくことを忘れずに。
ここでは、ポップアップメニューを追加して入力支援できるようにします。
#シナリオ
##背景
外回り営業マンに完成したWebアプリを見せたら、機能は満たしているので合格でした。ただ、入力支援の機能や件数がふえてきたら検索や集計ができると助かるとのこと。つまり、機能拡張の依頼です。
##機能拡張(ポップアップメニューを追加する)
貸方科目と借方科目は、すでに入力する文字列が決まっているので、都度文字列を入力から、ポップアップメニューを使った選択入力に変更します。
##事前準備
貸方科目と借方科目で取りうる文字列を打ち合わせしました。
勘定科目は、管理番号が指定されています。また、『経費メモ』で使う可能性があるものを抜き出しました。科目は、次の一覧のいずれかを選択するとのことなので、数からしてもポップアップメニューに向いています。
貸方科目
| 管理番号 | 科目名 |
|---|---|
| 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』テーブルを作成する。
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)
);
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』テーブルのレコードを作成する。
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','新聞図書費');
INSERT INTO credit_items(code, name) VALUES ('1100','現金');
select * from debit_items;
select * from credit_items;
手順3: 『expenses_memo』テーブルを基にポップアップメニューに対応した『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』テーブルのレコードを作成する。
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
ここまでで、ポップアップの前の状態までできた。
手順2: 定義ファイル(def03.php)に『debit_items』と『credit_items』の2のコンテクストを追加する。
name: debit_items
key: id
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>
完成
