演習 6: イベントタイプのリストのダイナミックな挿入

現在のところ、"tripedit.cfm" ファイルのイベントタイプはハードコードされています (変更できません)。前述の演習において、イベントタイプ内の各 option タグには、value 属性と サーフィン などのオプションテキストが含まれています。これらの値はイベントタイプテーブルからのもので、ハードコードの必要はありません。Trips テーブルのイベントタイプは識別子で、イベントタイプテーブル (実際のイベント名を持つ) に対するフォーリンキーとして使用されます。イベントタイプテーブルの列 eventTypeID は value 属性に使用され、eventType は選択ボックスに表示されるリテラル値に使用されます。このテーブルからデータを取り出すには、次の cfquery を組み込む必要があります。

<cfquery name="GetEvents" datasource="CompassTravel">
   SELECT eventType, eventTypeID
   FROM eventtypes            
</cfquery>

HTML option タグのクエリーを利用するために、HTML select タグを cfselect タグに置き換えることができます。

cfselect タグは、HTML select タグを改良したものです。ColdFusion フォームタグのように、cfselect タグは、入力されたデータを検証する required 属性と message 属性を提供します。cfselect タグと前述の cfquery を使用して、次のように eventType フィールドデータエントリを実装できます。

イベントタイプテーブルのイベントタイプのリストを表示し、検証を追加するには :

ブラウザで "tripedit.cfm" ページを表示します。イベントタイプのドロップダウンリストを選択します。リストにはイベントタイプが 3 つだけ表示されます。
my_app ディレクトリにある "tripedit.cfm" ファイルを開きます。
次のコードを <html> タグの前に追加します。
```
<cfquery name="GetEvents" datasource="CompassTravel">
	SELECT eventType, eventTypeID
	FROM eventtypes				
</cfquery>
```
メモ: これまでの演習で、ColdFusion コンポーネントにクエリーを設定することにより、構造化された再利用可能なコードを記述する方法について学習しました。この演習では、ColdFusion アプリケーションを作成する際に役立つ情報を提供しますが、簡素化のために "tripedit.cfm" ファイルにクエリーを設定します。

次のイベントタイプコードの行

<cfselect size="1" name="eventType" required="Yes" 

message="Type of event must be selected.">
	<option value="1" selected>Surfing</option>
	<option value="2">Mountain Climbing</option>
	<option value="3">Mountain Biking</option>
</cfselect>

を次の行で置き換えます。

<cfselect size="1" name="eventType" required="Yes" 

message="Type of event must be selected.">
	<cfoutput query="GetEvents">
		<option value="#GetEvents.eventTypeID#">
			#GetEvents.eventType#
		</option>
	</cfoutput>
</cfselect>

ファイルを保存します。

編集されたコードをテストするには :

ブラウザで "tripedit.cfm" ページを表示します。
イベントタイプのドロップダウンリストを選択します。リストには 7 つのイベントタイプ全部が表示されます。

バージョン7

このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート

現在のページ: http://livedocs.adobe.com/coldfusion/7_jp/htmldocs/bus_rul9.htm