| ５． |
モックアップに組み込もう覧を表示する |
| |
|
|
| |
■ |
モックアップに組み込もう！ |
| |
|
|
| |
|
「category.cfm」を作成する |
| |
|
index.cfmの時と同じ要領で、category.cfmを作成し、ファイルを開く。 |
 |
| |
|
トップページのどのカテゴリが選択されたかを取得する |
| |
|
index.cfmにおいてカテゴリ一覧のリンクはURLに
| category.cfm?CategoryID="CategoryIDの値" |
|
を出力できるようColdFusionで記述したが、実はこれで「category.cfm」はURL変数「URL.CategoryID」の中に値が格納されることとなる。これを用いてコーディングを行うこととする。 |
|
| |
|
選択されたカテゴリのカテゴリ画像名をデータベースから取得し表示する |
| |
|
URL変数「URL.CategoryID」、cfqueryタグを用いて選択されたカテゴリの情報を取得するクエリを記述する。ここでクエリ名は「M_CategorySpecifiedQry」とする。
<cfquery
name="M_CategorySpecifiedQry"
datasource="shopping">
SELECT * FROM M_Category WHERE CategoryID = #URL.CategoryID#
</cfquery> |
|
これで選択されたカテゴリの全情報は取得できたので、次に出力するための記述を行う。
<cfoutput
query="M_CategorySpecifiedQry">
<td><img src="common/image/#M_CategorySpecifiedQry.CategoryImg#"
width="173" height="18" border="0"
alt="#M_CategorySpecifiedQry.CategoryName#一覧"></td>
</cfoutput> |
|
|
|
| |
|
選択されたカテゴリに属する商品情報をデータベースから取得し、一覧表示する |
| |
|
カテゴリ画像名を取得する要領で「M_Item」テーブルにクエリを発行する。
<cfquery
name="M_ItemQry"
datasource="shopping">
SELECT * FROM M_Item WHERE CategoryID = #URL.CategoryID#
</cfquery> |
|
最後に商品を出力するための記述を行うが、ここでポイントが2つある。
１つはcfoutput内にカラーが指定されていることである。cfoutput内で「#」を使用する場合は2回つづけて記述し「##」とする。
2つ目のポイントは商品の金額にカンマを入れることである。クエリの「#M_Item.Price#」にはカンマが入っていない。では、どうすれば良いのだろうか？
ColdFusion関数のNumberFormatを使用することで解決できる。
ColdFusion関数NumberFormatを用いた出力の記述は
| #NumberFormat(M_Item.Price)# |
|
となる。
以上、2つのポイントを踏まえた商品一覧出力の記述は次の通りとなる。
| ※ファイル名：category.cfm |
<table border="0"
cellpadding="0" cellspacing="0" width="500">
<tr>
<cfoutput query="M_CategorySpecifiedQry">
<td><img src="common/image/#M_CategorySpecifiedQry.CategoryImg#"
width="173" height="18" border="0"
alt="#M_CategorySpecifiedQry.CategoryName#一覧"></td>
</cfoutput>
</tr>
</table>
<img src="common/image/spacer.gif" width="10"
height="25" border="0" alt="">
<cfoutput query="M_ItemQry">
<table border="0" cellpadding="0"
cellspacing="0" width="500">
<tr>
<td bgcolor="##336600">
<table border="0" cellpadding="0"
cellspacing="1" width="500">
<tr>
<td rowspan="4"><img src="common/image/#M_ItemQry.SmallImg#"
width="90" height="90"
border="0" alt=""></td>
<td colspan="2" align="center"
bgcolor="##FFFFCC"><img
src="common/image/product_name.gif" width="36"
height="11" vspace="4" border="0"
alt="商品名"></td>
</tr>
<tr>
<td colspan="2" bgcolor="##FFFFFF">
<table border="0" cellpadding="4"
cellspacing="0" width="405">
<form name="detai_btn">
<tr>
<td><span class="base">#M_ItemQry.ItemName#</span></td>
<td align="right">
<a href="detail.html"><img
src="common/image/detail_btn.gif" width="92"
height="18"
border="0" alt="詳細ページへ"></a>
</td>
</tr>
</form>
</table>
</td>
</tr>
<tr align="center">
<td bgcolor="##FFFFFF"><img
src="common/image/product_num.gif" width="203"
height="18" vspace="0" border="0"
alt="商品番号"></td>
<td bgcolor="##FFFFFF"><img
src="common/image/product_price.gif" width="203"
height="18"
alt="販売価格（円）"></td>
</tr>
<tr align="center">
<td bgcolor="##FFFFFF"><span
class="base">#M_ItemQry.ItemCode#</span></td>
<td bgcolor="##FFFFFF"><span
class="base">#NumberFormat(M_ItemQry.Price)#</span></td>
</tr>
</table>
</td>
</tr>
</table>
<img src="common/image/spacer.gif" width="10"
height="20" border="0" alt="">
</cfoutput> |
|
これで、今回の目標である商品一覧のコーディングは完了である。
ブラウザでアドレスを入力し確認してみよう。正しく表示されたかな？
では、次回は商品を検索し、検索条件に該当する商品の詳細情報が表示されるまでのプログラミングを行おう。
|
