e-learning、オラクル研修、LMS(学習管理システム)のiStudy

e-learning、オラクル研修、LMS(学習管理システム)のiStudy

第105回「WEBアプリ作成(3)(検索条件を指定して複数レコードを表示 1/2 入力フォーム作成)」

2014.09.25

こんにちは。インストラクターの蓑島です。

WEBアプリ作成楽しんでいただいてますでしょうか? 本コラムは「Oracle DBとPL/SQLだけで、即、WEBアプリ!」のコンセプトでやっていますので、WEBアプリの世界に慣れていない方でも気軽に読んで(試して)、見識を広げていただきたいと思います。

さて、今回と次回で、検索条件を指定して条件に該当するレコード(複数行)をWEBページに表示するWEBアプリを作成します。

例えば、SOCTTスキーマのEMP表に対して、ユーザ名などを検索条件として画面に入力し送信ボタンを押せば、該当するEMP表の行(複数行可)がWEBページに表示されるようなものだと思ってください。これができればプログラミングの幅がグッと広がりそうですね!

そのためにはまず、検索条件を入力するための入力フォームのWEBページが必要です。
WEBページには、検索条件を入力する項目と、送信ボタンがあります。送信ボタンをクリックすると、検索した結果を表示するWEBページが表示されます。
つまり、入力フォームのWEBページと、検索結果のWEBページが必要と言えますね。どちらのページも、PL/SQLのプロシージャで生成します。

では早速、入力フォームのWEBページを生成するPL/SQLプロシージャを作成します。
以下の例をご覧ください。

SQL> show user
ユーザーは"SCOTT"です。 -- SOCTTユーザで作成します
SQL> create or replace
  2  PROCEDURE EMP_SEARCH_FORM
  3  IS
  4  BEGIN
  5      HTP.P('<HTML>');
  6      HTP.P('<HEAD><TITLE>社員検索</TITLE></HEAD>');
  7      HTP.P('<BODY>');
  8      HTP.P('<h1>社員検索条件入力</h1>');
  9      HTP.P('<HR>'); -- 水平の罫線です
 10      HTP.P('<FORM ACTION="emp_search_exe">');
 11      HTP.P('検索キーワードを入力してください<BR>');
 12      HTP.P('<INPUT TYPE="TEXT" NAME="P_KEYWORD1"><BR>');
 13      HTP.P('<INPUT TYPE="SUBMIT" VALUE="送信">');
 14      HTP.P('</FORM>');
 15      HTP.P('</BODY>');
 16      HTP.P('</HTML>');
 17  END EMP_SEARCH_FORM;
 18  /

プロシージャが作成されました。

これで、EMP_SEARCH_FORMという名前のプロシージャができました。
早速ブラウザから、そのプロシージャをリクエストしましょう。

前々回「第103回 WEBアプリ作成(1) (Oracle DBとPL/SQLだけで、即、WEBアプリ)」の設定をしていればそのURLは以下のとおりです。

http://localhost:8080/dad/emp_search_form

今までと同様、ログインが求められるので、SOCTTユーザ名とそのパスワードを入力します。
すると、ブラウザに以下のような入力フォームが表示されます。

ではこの入力フォームを生成した上記のソースコードを解説します。解説といっても、ほとんどはHTMLドキュメントの文法説明です。

まずソースコードの10行目でFORMタグ(<FORM ・・・>)を出力しています。
そして、14行目で、FORMの終了タグ(</FORM>)を出力しています。このFORMの開始タグから終了タグの範囲(<FORM・・・> ~</FORM>)に、検索キーワードを入力するテキストボックスと、送信ボタンを配置する必要があります。

検索キーワードのテキストボックスは、ソースの12行目でHTP.Pにより出力しています。

<INPUT TYPE="TEXT" NAME="P_KEYWORD1">

TYPE属性がTEXT (TYPE="TEXT")のINPUTタグが入力用のテキストボックスです。そして、テキストボックスにはNAME属性が必要です。ここではNAME属性の値をP_KYEWORD1にしています。(NAME="P_KEYWORD1") これはリクエストパラメータの名前となります。
つまり、P_KEYWORD1というパラメータ名で、入力した値が検索を行うプロシージャに送信されるわけです。

また、送信ボタンはソースコード13行目で出力しています。

<INPUT TYPE="SUBMIT" VALUE="送信">

このように、送信ボタンも、テキストボックスと同じく、INPUTタグで記述されるのですが、必ずTYPE属性がSUBMITとなります。(TYPE="SUBMIT")。また、VALUE属性の値は、ボタンのラベル文字となります。(VALUE="送信")つまり「送信」というラベルのボタンです。

ではこの送信ボタンをクリックすると、リクエストパラメータP_KEYWORD1はどこに送信されるのでしょうか? 
それはFORMタグのACTION属性により決まります。

上記のソースコードの10行目で、FORMタグは以下のように出力されます。

<FORM ACTION="emp_search_exe">

ここのACTION属性、つまりemp_search_exeという名前のPL/SQLプロシージャ(現時点でまだ存在しません)に、リクエストパラメータP_KEYWORD1が送信されるわけです。
では早速、ABCという値を入力して、送信ボタンをクリックします。

すると、エラーとなりました。

このエラーは、リクエストの送信先のemp_search_exeプロシージャがまだ存在していないので、当然の結果ですね。
そして、URLに注目すると、以下のようになっています。

http://localhost:8080/dad/emp_search_exe?P_KEYWORD1=ABC

このように、URLを見て、emp_search_exeプロシージャに、リクエストパラメータ(P_KEYWORD1=ABC)が送信されたことがわかります。
ですから、これから作成するemp_search_exeプロシージャには、P_KEYWORD1という名前のパラメータが必要です。そして、前回解説しているようにリクエストパラメータのデータ型は常にVARCHAR2型です。

したがって、emp_search_exeプロシージャの定義は以下のように始まります。

CREATE OR REPLACE PROCEDURE emp_search_exe (P_KEYWORD1 IN VARCHAR2)
IS
・・・(以下略)

そして、P_KEYWORD1の値を使って、社員表(EMP表)を検索し、該当するレコードを表示するHTMLページをHTP.P(~)を使って生成すればよいわけですね。

それでは、今回はここまでにします。次回は、このemp_search_exeプロシージャを実際に作成しましよう。
それではご期待ください。

先頭へ戻る