| ３． |
検索結果一覧より商品の詳細情報を表示する |
| |
検索ができたら、次は、検索結果一覧から商品を選んで商品の詳細情報を表示する画面を作成する。必要な動作は以下の３つだ。
searchlist.cfm
商品名の画像「詳細ページへ」に商品詳細閲覧画面へのリンクを設定する。
detail.cfm
DBから商品情報を取得して表示する。
DBからカテゴリタイトル詳細画像を取得して表示する。 |
| |
 |
| |
|
|
| |
■ |
リンクにURL変数を設定する ... searchlist.cfm |
| |
|
商品詳細閲覧画面で表示するカテゴリタイトル詳細画像のファイル名と商品詳細情報をデータベースから取得するために、CategoryIDとItemIDをURL変数として設定する。
URL変数を複数指定する場合はアンドマーク記号(&)で続けて記述する。
URL変数の値は、商品検索結果一覧
| detail.cfm?ItemID=#M_ItemQry.ItemID#&CategoryID=#M_ItemQry.CategoryID#" |
|
|
 |
| |
■ |
DBから商品情報を取得して表示する ... detail.cfm |
| |
|
detail.cfmで受け取ったURL変数「ItemID」、cfqueryタグを用いて選択された商品詳細情報を取得するクエリを記述する。クエリ名は「
M_ItemQry」とする。
<cfquery name="M_ItemQry"
datasource="shopping">
SELECT * FROM M_Item WHERE ItemID = #URL.ItemID#
</cfquery> |
|
|
|
| |
■ |
商品詳細情報を表示する |
| |
|
cfoutputタグを使用して商品詳細情報結果を表示してみよう。
<cfoutput query="M_ItemQry">
<tr valign="top">
<td></td>
<td>
<table border="0" cellpadding="1"
cellspacing="0" width="240">
<tr>
<td bgcolor="##CCCCCC"><img src="common/image/#M_ItemQry.LargeImg#"
width="240" height="240" border="0"
alt=""></td>
</tr>
</table>
</td>
<td>
<table border="0" cellpadding="0"
cellspacing="0" width="440">
<tr>
<td colspan="2" bgcolor="##CCCCCC"><img
src="common/image/spacer.gif" width="1"
height="1" border="0" alt=""></td>
</tr>
<tr>
<td><img src="common/image/spacer.gif"
width="15" height="15" border="0"
alt=""></td>
<td><img src="common/image/spacer.gif"
width="425" height="15" border="0"
alt=""></td>
</tr>
<tr>
<td></td>
<td>
<p>
<span class="base"><b>#M_ItemQry.ItemName#</b></span>
<br><br>
<span class="base-h">#M_ItemQry.Notes#</span>
</p>
</td>
</tr>
<tr>
<td></td>
<td><img src="common/image/spacer.gif"
width="15" height="30" border="0"
alt=""></td>
</tr>
<tr>
<td></td>
<td>
<table border="0" cellpadding="0"
cellspacing="0" width="218">
<tr>
<td><img src="common/image/product_size.gif"
width="120" height="11" alt="商品サイズ"
border="0"></td>
<td nowrap><span class="base">#M_ItemQry.Size#</span></td>
</tr>
<tr>
<td colspan="2" background="common/image/line_1.gif"><img
src="common/image/line_1.gif" width="218"
height="6" border="0" alt=""></td>
</tr>
<tr>
<td><img src="common/image/product_num_1.gif"
width="120" height="11" border="0"
alt="商品番号"></td>
<td nowrap><span class="base">#M_ItemQry.ItemCode#</span></td>
</tr>
<tr>
<td colspan="2" background="common/image/line_1.gif"><img
src="common/image/line_1.gif" width="218"
height="6" border="0" alt=""></td>
</tr>
<tr>
<td><img src="common/image/product_price_1.gif"
width="120" height="11" border="0"
alt="販売価格"></td>
<td nowrap><span class="base">#NumberFormat(M_ItemQry.Price)#</span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
<td><img src="common/image/spacer.gif"
width="15" height="20" border="0"
alt=""></td>
</tr>
<form name="cart_btn1">
<tr>
<td></td>
<td><a href="cart.cfm?ItemID=#URL.ItemID#"><img
src="common/image/cart_btn1.gif" width="155"
height="18" border="0" alt="ショッピングカートに入れる"></a></td>
</tr>
</form>
</table>
</td>
</tr>
</cfoutput> |
|
ここで、cfquery、cfoutpu.以外のcfタグや関数についても見てみよう。
detail.cfmの先頭部分、商品詳細情報を取得するクエリを見ると次のようになっている。
ここでは、cfifタグと、IsDefined関数が使用されている。
<cfif IsDefined(“URL.ItemID”)>
<cfquery name="M_ItemQry" datasource="shopping">
SELECT * FROM M_Item WHERE ItemID = #URL.ItemID#
</cfquery>
</cfif> |
|
|
|
| |
■ |
cfifタグって何？ |
| |
|
cfifタグとは条件文分岐を行なうタグの一つである。
cfifタグの条件式がTRUEの場合に処理cfifタグ内の処理を行う。
cfelseやcfelseifと組み合わせて複雑な条件分岐を行うこともできる。
<cfif 条件式>
HTML および CFML タグ
</cfif> |
|
<cfif 条件式>
HTML および CFML タグ
<cfelseif>
HTML および CFML タグ
</cfif> |
|
<cfif 条件式>
HTML および CFML タグ
<cfelseif 条件式>
HTML および CFML タグ
</cfif> |
|
|
|
| |
■ |
IsDefined関数って何？ |
| |
|
IsDefined関数とは指定した変数が存在するかどうかを調べる関数である。
変数が存在する場合は TRUE、存在しない場合は FALSEとなる。
detail.cfmの場合は、
「変数 URL.ItemIDが存在する場合に、商品情報を取得する」
という処理になる。
今回のサンプルソースでは、searchlist.cfmから必ずURL変数を渡すので、必ず商品情報を取得する。 |
|
| |
■ |
DBからカテゴリタイトル詳細画像を取得して表示する。 ... detail.cfm |
| |
|
商品詳細情報同様、detail.cfmで受け取ったURL変数「CategoryID」、cfqueryタグを用いて選択されたカテゴリ情報を取得するクエリを記述する。クエリ名は「
M_CategorySpecifiedQry」とする。
<cfquery name="M_CategorySpecifiedQry"
datasource="shopping">
SELECT * FROM M_Category WHERE CategoryID = #URL.CategoryID#
</cfquery> |
|
|
|
| |
■ |
カテゴリタイトル詳細画像 |
| |
|
カテゴリタイトル詳細画像は、カテゴリタイトル画像のファイル名末尾に「_1」を付加したファイル名で保存されている。
(a) カテゴリタイトル画像ファイル名 ... category_title_3.gif
(b) カテゴリタイトル詳細画像ファイル名 ... category_title_3_1.gif
DBのカテゴリマスタには、(a）のファイル名のみが登録されているので、(b）のファイル名は(a）のファイル名から、ColdFusionの関数Replaceを使って生成する。
Replace関数
構文：Replace(string, substring1, substring2)
意味：string文字列のsubstring1をsubstring2に置き換える。
(a）から(b）を生成する手順は、以下の通りである。
| (1) |
(a）から「.gif」を削除する。 “”（空文字）に置き換えることで削除を行う。 |
| (2) |
削除した文字列に「_1.gif」を付加する。
| #Replace(M_CategorySpecifiedQry.CategoryImg,".gif","")#_1.gif |
|
|
実際にタイトル画像を表示する記述を行う。
<cfoutput
query="M_CategorySpecifiedQry">
<td colspan="2">
<img src="common/image/#Replace(M_CategorySpecifiedQry.CategoryImg,".gif","")#_1.gif"
width="208" height="18" border="0"
alt="アクセサリー商品詳細">
</td>
</cfoutput> |
|
このほかにも、さまざまな関数があるので、ぜひオンラインドキュメントなどを参照していただきたい。
これで、商品検索から商品詳細情報が表示されるまでのプログラミングが完了した。
次回は、ショッピングサイトのメインである商品を購入する部分のプログラミングを行う。 |
