エピソードを使ったINTER-Mediatorのハンズオン 4 - 機能拡張 (検索)

はじめに

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

『エピソードを使ったINTER-Mediatorのハンズオン 1 - 基本機能』を拡張します。前段階で作成した、『page02.html』と『def02.php』をそれぞれ、『page05.html』と『def05.php』と『page06.html』と『def06.php』にコピーして機能拡張します。コピー後、各ページファイルの中の定義ファイルを指定している部分<script type="text/javascript" src="defxx.php"></script>を書き直すのを忘れずに。

ここでは、検索機能を追加します。

シナリオ

背景

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

機能拡張(検索機能を追加する)

起票の有無を確認するための検索機能を実装します。

課題

課題1: 検索機能を使って、起票しているものだけを表示する

コンテキストの『Query』キーを指定することによって、検索条件を指定できます。『Query』キーには、『field』、『operator』、『value』の要素があります。『field』は、テーブルのフィールド名を指定し、『operator』と『value』を使って、フィールド内のデータと照合し、合致するものを表示させます。

手順1: 次のレコードを追加して、全部で5レコードにする

追加レコード1

日付: 2018-08-08
借方科目: 旅費交通費
貸方科目: 現金
相手先: 公共交通機関
摘要: 新小岩<->新宿 @302x2
出金: 604
起票: 

追加レコード2

日付: 2018-08-08
借方科目: 通信費
貸方科目: 現金
相手先: 葛飾郵便局
摘要: レターバックライト
出金: 360
起票: 

手順2: シェルからサーバにアクセスし、SQLコマンドでデータを確認する

command

$ ssh developer@192.168.56.101
[password]

$ mysql -u root -p test_db
[password]

確認

select * from expenses_memo;

手順3: 4つ目のデータの『起票』フィールドにチェックを入れてあとチェックをはずす。

『起票』フィールドは、レコード追加時に『NULL』となり、チェックを入れると『1』、入れて後外すと『』となる。つまり、3通りの状態が存在する。

手順4: 『def05.php』を開き、『Query』キーを追加して、次の通りに入力する。

Queryの値

field: issued
operator: =
value: 1

課題2: 検索用フィールドを使って検索する

プログラムを書かずに動的に検索ワードが変わる検索用フィールドを設定できます。ただし、検索方法は、検索条件を追加して(AND検索)、絞り込むことはできますが、OR検索や複雑な検索には、プログラミングが必要です。起票されている状態(データの値は、『1』)と起票されていない状態(データの値は、『NULL』と『』)ですので、OR検索になってしまいます。ここでは、テーブルのスキーマを変更し、issuedの型を数値にします。また、『NULL』入力できないようにして、『1』と『0』とを絞り込む検索とします。

手順1: 『expenses_memo』テーブルを基に検索に対応した『expenses_memo3』テーブルを作成する。（issuedを文字列型から数値型に変更し、NOT NULL制約とデフォルト値を設定）

expenses_memo3テーブル

CREATE TABLE expenses_memo3 (
id           INT(11) NOT NULL AUTO_INCREMENT,
date         DATE,
debit        VARCHAR(10),
credit       VARCHAR(10) ,
destination  VARCHAR(20),
summary      VARCHAR(20) ,
withdraw     NUMERIC(8,0),
issued       INT(1) NOT NULL DEFAULT 0,
PRIMARY KEY (id)
);

手順2: 既存フィールドを追加する。

INSERT INTO expenses_memo3(date,debit,credit,destination,summary,withdraw,issued) VALUES ('2018-05-17','旅費交通費','現金','公共交通機関','新小岩<->新宿 @302x2',604,1);
INSERT INTO expenses_memo3(date,debit,credit,destination,summary,withdraw,issued) VALUES ('2018-05-17','通信費','現金','葛飾郵便局','レターバックライト',360,1);
INSERT INTO expenses_memo3(date,debit,credit,destination,summary,withdraw,issued) VALUES ('2018-05-17','旅費交通費','現金','公共交通機関','四ツ木<->浅草 @302x2',656,1);

確認

select * from expenses_memo3;

手順3: 『def06.php』を次の通り変更する。(コンテクスト名変更）

変更項目

name: expenses_memo3

手順3: 『page06.html』を次の通り変更する。（コンテクスト名の変更）

変更項目

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

手順4: 次のレコードを追加して、全部で5レコードにする

追加レコード1

日付: 2018-08-08
借方科目: 旅費交通費
貸方科目: 現金
相手先: 公共交通機関
摘要: 新小岩<->新宿 @302x2
出金: 604
起票: 

追加レコード2

日付: 2018-08-08
借方科目: 通信費
貸方科目: 現金
相手先: 葛飾郵便局
摘要: レターバックライト
出金: 360
起票: 

レコード追加直後でも、『issued』には『NULL』値が入らず、『0』が入る。

手順5: 4つ目のデータの『起票』フィールドにチェックを入れてあとチェックをはずす。

『起票』フィールドは、レコード追加時にDEFAULTの制約によって『0』となり、チェックを入れると『1』、入れたあと外すと『0』に戻る。つまり、2通りの状態が存在する。

手順6: 『page06.html』を開き、次の通りに入力して、ポップアップメニューを追加する。
（『data-im』で検索条件を設定します。詳細はマニュアルにて ）

tableタグの前に入力

起票:
  <select name="" data-im="_@condition:expenses_memo3:issued:=">
    <option value="" >すべて</option>
    <option value="1">起票済み</option>
    <option value="0">未起票</option>
  </select>
  <button data-im="_@update:expenses_memo3">検索ボタン</button>