Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 riference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial

1ページに1商品の情報を表示する

JAVA Scriptを使用すると、CSV形式で保存されているデータベースから、データを1行分だけ取り出してページに表示することができます。ここでは、商品データベースから商品情報を個別に取り出して表示する方法について考えてみましょう。

■ データをテーブルに表示する定義

データベースからデータを取り出すために、「Table Data Control」オブジェクトの定義を行います。

<OBJECT CLASSID="clsid:333c7bc4-460f-11d0-bc04-0080c7055a83"
ID=ItemList>
<PARAM NAME="CharSet" VALUE="shift-jis">
<PARAM NAME="DataURL" VALUE="scanner2.txt">
<PARAM NAME="UseHeader" VALUE="true">
</OBJECT>
■ 1ページに表示する項目の定義

データベースの1行に含まれる各項目を表示するための定義を行います。

<FIELDSET STYLE="padding :10px;width:450px; background:#eeeeff; border-width:15;border-color:#ffffd0;font-size:14pt"><P>
品 名 : <SPAN DATASRC=#ItemList DATAFLD="name"></SPAN><P>
カテゴリ : <SPAN DATASRC=#ItemList DATAFLD="syurui"></SPAN><P>
メーカー : <SPAN DATASRC=#ItemList DATAFLD="maker"></SPAN><P>
定 価 : <SPAN DATASRC=#ItemList DATAFLD="teika"></SPAN>円
特 価 : <SPAN DATASRC=#ItemList DATAFLD="tokka"></SPAN>円
</FIELDSET>

■ 「進む」ボタンと「戻る」ボタンの配置

次の商品に進んだり、前の商品に戻ったりするためのボタンをページに配置し、ボタンがクリックされたときに、表示データの更新を行う関数を呼び出すようにします。

<INPUT ID="BackData" TYPE="button" VALUE="< 前の商品" onClick="BackItem()">
<INPUT ID="NextData" TYPE="button" VALUE="次の商品 >" onClick="NextItem()">

■ 表示データを更新する処理

次の商品や前の商品を呼び出すためのJAVA Scriptを記述します。

<SCRIPT LANGUAGE="JavaScript">
<!--
function NextItem(){
ItemList.recordset.movenext();
if( ItemList.recordset.EOF ){
ItemList.recordset.movefirst();
}
}
function BackItem(){
ItemList.recordset.moveprevious();
if( ItemList.recordset.BOF ){
ItemList.recordset.movelast();
}
}
//-->
</SCRIPT>

■ 「recordset」オブジェクト

「Table Data Control」では、「recordset」オブジェクトに用意されたメソッドを使用して、データベースの中から1行ずつデータを取り出して表示することができます。「recordset」オブジェクトでは、データベースの任意の行から取り出すために、下の表のようなメソッドが用意されています。例では、次の商品に進むボタンがクリックされた場合は「movenext」メソッドを、前の商品に戻るボタンをクリックされた際は「moveprevious」メソッドを使用しています。

メソッド
機能
Move 移動する行数を指定して移動する
MoveFirst 最初の行に移動する
MoveLast 最後の行に移動する
MoveNext 次の行に移動する
MovePrevious 前の行に移動する

なお、例では使用していませんが、「Move」メソッドを使用すると、移動する行数を指定することができます。例えば、現在の行から2行前のデータに戻す場合は、次のように指定します。

ItemList.recordset.move(-2)

■ 「EOF」プロパティ

例では、データベースの最後の行の商品を表示しているときに、「次の商品に進む」ボタンがクリックされた場合は「MoveFirst」メソッドで最初の行に戻すようにしています。同様にデータベースの最初の行の商品を表示している時に「前の商品に戻る」ボタンがクリックされた場合は「moveLast」メソッドで最後の行に進むようにしています。
「次の商品に進む」ボタンで商品の表示を進める際、表示がデータベースの最後の行まで達したかどうかは、「recordset」オブジェクトの「EOF」プロパティで知ることができます。また、「前の商品に戻る」ボタンで商品の表示を戻す際は、表示がデータベースの最初の行まで戻ったかどうかを「EOF」プロパティで知ることができます。「recordset」オブジェクトには、「EOF」プロパティや「BOF」プロパティの他に次の表のようなプロパティが用意されています。

プロパティ
機能
recordCount データベースに含まれるデータの行数
absolutePosition データベースで現在操作対象となっている行を示す
EOF 最後の行からデータを取り出した場合にTRUEになる
BOF 最初の行からデータを取り出した場合にTRUEになる

<<<戻る

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box