はじめに

大勉強会のハンズオンのエピソードです。全員でエピソードに沿ってハンズオンを行います。マシンは各自持参したマシンかイベントで用意したマシンを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』テーブルを作成する。

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

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

手順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>

完成

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

はじめに

シナリオ

背景

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

事前準備

課題

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