| ４． |
 商品一覧表示
■まずは、一覧を表示させてみる。
カテゴリ、商品一覧を表示する |
| |
|
ようやく準備も整ったので、ColdFusionでプログラミングを開始しよう。
まずはモックアップ画面を意識せず、とにかくデータベースの情報を画面に表示させてみることとする。
shoppingフォルダの中にある「samplelist.cfm」をダブルクリックすると、ColdFusionStudioでsample.cfmが開かれる。 |
| |
|
 |
 |
| |
|
カテゴリを取得する |
| |
|
始めにカテゴリテーブル「M_Category」の全てのデータを取得するクエリ（データベースへの問い合わせ命令）を発行する。第1回でデータベースのデータ操作を行うタグはcfqueryタグを使用することを説明したので、cfqueryタグを用いた記述を見てみよう。
<!---M_Categoryテーブル全件取得クエリ--->
<cfquery name="M_CategoryQry"
datasource="TableWare">
SELECT * FROM M_Category
</cfquery> |
|
| M_Categoryテーブルの全てのデータを取得するクエリ |
Cfqueryタグには様々な属性があるが、ここでは「name」という属性と「datasource」属性を使用する。「name」属性にはクエリ変数名を記入する。
ここで「変数」という言葉が出てきたが、変数とは「ある値を入れる容器」だと考えていただきたい。ここでのある値とはM_Categoryテーブルの全データとなる。
クエリ変数名は任意で良いが、ここでは「M_CategoryQry」とする。
「datasource」属性にはColdFusion Administratorで登録したデータソース名「shopping」を入れる。最後にcfqueryタグ内にSQL文を記述し、M_Categoryテーブルの全件のデータを取得するクエリの記述は完了である。
同様に商品テーブル「M_Item」の全てのデータを取得するクエリは以下のようになる。
<!---M_Itemテーブル全件取得クエリ--->
<cfquery name="M_ItemQry"
datasource="shopping">
SELECT * FROM M_Item
</cfquery> |
|
| M_Itemテーブルの全てのデータを取得するクエリ |
<b>カテゴリ全件一覧</b><br>
<cfoutput query="M_CategoryQry">
#M_CategoryQry.CategoryID# #M_CategoryQry.CategoryName#<br>
</cfoutput> |
|
| M_Categoryの「CategoryID」と「CategoryName」を出力 |
まず、cfoutputタグのquery属性を用いて出力するクエリ変数名を定義する。出力するクエリ変数名は先ほどcfqueryで定義した「M_CategeoryQry」となる。cfoutputのquery属性を用いると、次の動作が行われる。
| (1) |
ColdFusionは、データベースから返された行ごとに 1 回ずつcfoutputで囲まれたすべてのコードを繰り返し出力する。 |
| (2) |
cfoutputで囲まれた特定のフィールド名を参照して、データをページに出力する。
特定のフィールド名とは「#」で囲まれたフィールド名「#フィールド名#」となる。 |
|
ColdFusionではフィールドの中の値をあらわす場合（変数も同様）、フィールド名を必ず「#」で囲み、「#接頭辞.フィールド名#」とする。（ここでの接頭辞は、クエリ変数名「M_Category」だが、接頭辞は省略可能）仮に「#」で囲まない場合、フィールド名自体が画面に表示されてしまうこととなる。よって、cfoutput内に「#M_Category.CategoryID#」、「#M_Category.CategoryName#」を記述し、間隔をあけるために間に半角スペースを入れて、最後に改行するようにbrタグを入れておこう。同様にM_Itemも記述する。
<br><b>商品全件一覧</b><br>
<cfoutput query="M_ItemQry">
#M_ItemQry.ItemID# #M_ItemQry.ItemName#<br>
</cfoutput> |
|
| M_Itemの「ItemID」と「ItemName」を出力 |
 これでカテゴリ、商品一覧の表示を行うコーディングは完了となる。それではブラウザで確認してみることにしよう。
アドレスに「http://localhost/shopping/samplelist.cfm」を入力し、右のような画面が表示されればOKである。
|
|
| |
■ |
モックアップに組み込もう！ |
| |
|
それでは第2回の最終目的であるECサイトおける商品一覧を作成しよう。 |
| |
|
|
| |
|
トップ画面「index.cfm」、カテゴリ画面「category.cfm」の作成 |
| |
|
|
| |
|
●「index.cfm」を作成する
C:\Inetpub\wwwroot\shopping\index.cfmをColdFusionStudioで開く。
まず、「index.html」の1つ目の役割、「データベースに登録されたカテゴリを一覧表示する」であるが、これは既に前項にて説明済のため、先ほどのM_categoryQryを取得する記述を行えば完了である。
2つ目の役割「カテゴリ名称にはリンクを設ける。またこのリンクには どのカテゴリが選択され たかという情報も付加する」を考えていこう。
モックアップ画面では５つのカテゴリの記述があるが、cfoutputタグでクエリを繰り返し出力するわけであるから、繰り返す部分の記述は１つのみで良いということとなる。よって、「鉢植え」が記述されているtrタグ部分を残して「ツール」、「コンテナ」、「アクセサリ」、「ポット」部分は削除する。
「samplelist.cfm」と同じようにcfoutputタグを埋め込み、「鉢植え」と書かれている部分をクエリが出力できるように変更する。これでカテゴリ名の表示部分は完了だ。
次に、「どのカテゴリが選択されたか」という機能に関しては、URL変数を用いてカテゴリ画面は値を受け取る。カテゴリテーブルに登録された複数のカテゴリが一意になるのはPKである「CategoryID」なので、URL変数名は「CategoryID」としよう。するとリンクは以下のような記述となる。
| category.cfm?CategoryID=#M_Category.CategoryID# |
|
これでindex.cfmの記述は完成である。実際にブラウザで確認してみよう。
| (1) |
不要部分を取り除き、繰り返される部分を確認する
※ファイル名：index.html |
| |
<!--▼▼▼▼商品カテゴリ▼▼▼▼ー-->
<table border="0" cellpadding="3"
cellspacing="0">
<tr>
<td><img src="common/image/spacer.gif"
width="10" height="3" border="0"
alt=""></td>
<td><img src="common/image/spacer.gif"
width="110" height="3" border="0"
alt=""></td>
</tr>
| ※この部分を繰り返す |
<tr>
<td><img src="common/image/navi_icon.gif"
width="10" height="9"
border="0" alt=""></td>
<td><a href="categoy.html"
class="base">鉢植え</a></td>
</tr> |
|
</table>
<!--▲▲▲▲商品カテゴリ▲▲▲▲ー--> |
|
| (2) |
カテゴリ一覧出力部分完成
※ファイル名：index.cfm |
| |
<!--▼▼▼▼商品カテゴリ▼▼▼▼ー-->
<table border="0" cellpadding="3"
cellspacing="0">
<tr>
<td><img src="common/image/spacer.gif"
width="10" height="3" border="0"
alt=""></td>
<td><img src="common/image/spacer.gif"
width="110" height="3" border="0"
alt=""></td>
</tr>
<cfoutput query="M_CategoryQry">
<tr>
<td><img src="common/image/navi_icon.gif"
width="10" height="9" border="0"
alt=""></td>
<td><a href="categoy.cfm?CategoryID=#M_CategoryQry.CategoryID#"
class="base">#M_categoryQry.CategoryName#</a></td>
</tr>
</cfoutput>
</table>
<!--▲▲▲▲商品カテゴリ▲▲▲▲ー--> |
|
|
