| ２． |
商品検索から検索結果一覧まで |
| |
|
| |
■ |
検索フォームの作成 |
| |
|
まずは、検索を行うためのキーワードを入力する検索フィールドをトップ画面に設ける必要がある。
フォームの記述に関しては、一般的なフォームの作成時と大差はないが、formタグのactionに、検索結果を表示するためのファイルである「searchlist.cfm」を指定する。
| <form action="searchlist.cfm"
method="post" name="searchForm"> |
|
また、input部分に関しても、一般的なフォームと同様であるが、この値をフォーム変数としてsearchlist.cfmへ渡すため、name属性を指定する。
nameについては、今回キーワード検索を行うフィールドであるため、keywordとしておく。(index.cfm 106-122行目)
| <input type="text"
name="keyword" size="18"> |
|
|
 |
| |
■ |
受け取ったフォーム変数による商品の検索 |
| |
|
第２回の復習から、受け取ったフォーム変数をデータベースからデータを取得するSQLの条件に指定すると、商品検索のクエリは次のようになる。
変数が文字列の場合は、シングルクォーテーション(‘）で囲む。
<cfquery name="M_ItemQry"
datasource="shopping">
SELECT * FROM M_Item WHERE ItemName = '#Form.keyword#'
</cfquery> |
|
index.cfm 106行目-122行目
<form
action="searchlist.cfm" method="post"
name="searchForm">
<table border="0" cellpadding="3"
cellspacing="0" width="160">
<tr>
<td><span class=“onedown-h”>商品名を入力して、「検索」ボタンをクリックしてください。
</span></td>
</tr>
</table>
<table border="0" cellpadding="3"
cellspacing="0">
<tr>
<td><input type="text" name="keyword"
size="18"></td>
</tr>
<tr>
<!---aタグのhref属性にフォームを送信するためsubmitを指定する。--->
<td align="right"><a href="javascript:document.searchForm.submit();">
<img src="common/image/search_btn.gif"
width="38" height="20" border="0"
alt="検索">
</a></td>
</tr>
</table>
<img src="common/image/spacer.gif" width="10"
height="6" border="0" alt="">
</form> |
|
|
|
| |
■ |
商品名が完全にフォーム変数と一致しない商品情報 |
| |
|
ここで条件式について見てみよう。
SQLのWHERE部分にイコール(=)を使用すると、キーワードと商品名が完全に一致する情報のみが取得される。例えば、キーワードに「ガーデングローブ」と入力しても「ガーデングローブ(ブルー)」は完全一致ではないので、検索結果としては取得されない。では、キーワードが含まれるデータを検索するためにはどうすればよいのだろうか。例えばキーワード「ガーデングローブ」で検索して、「ガーデングローブ(ブルー)」と「ガーデングローブ(ベージュ)」の商品情報を取得する場合である。
このように、「ある文字列が含まれる」というあいまい検索を行う場合には、
FORM変数の前後に任意の文字列を意味するパーセント記号 (%)をつけ、WHERE部分のイコールを文字列の比較演算子「Like」に変換して、記述する。こうすると、SQLは「商品名(ItemName)にキーワード(#Form.keyword#)が含まれる」という条件で商品情報を取得する。
完全一致検索を行うSQL文
| SELECT * FROM M_Item
WHERE ItemName = '#Form.keyword#' |
|
あいまい検索を行うSQL文
| SELECT * FROM M_Item
WHERE ItemName Like '%#Form.keyword#%' |
|
(SELECT * FROM テーブル名 WHERE フィールド名 Like ‘%フィールドの値%' )
また、条件式の後に「ORDER BY “フィールド名”」をつけることで、SELECTする際に、指定したフィールド名の値でソートすることができる。ORDER
BY で指定できるフィールドは、SELECTするテーブルにあるフィールドである。
ここでは、検索結果を商品マスタ(M_Item)の商品管理番号(ItemID)の小さいものから大きなものに表示するために、WHEREの部分に「ORDER
BY ItemID」を追加する。
| SELECT * FROM M_Item
WHERE ItemName Like '%#Form.keyword#%' ORDER BY ItemID |
|
(SELECT * FROM テーブル名 WHERE フィールド名 Like ‘%フィールドの値%‘ ORDER BY 並び替えの基準になるフィールド名)
最後に、このSQL文をcfqueryタグで囲んで、商品検索のクエリ作成は完成である。
ColdFusionのソースでは、このようなデータベース操作のタグは、サーバ内での処理となるため、クライアント（ブラウザ）へは出力されない。
したがって、通常は、HTMLタグよりも前に記述する。
searchlist.cfm 13行目-15行目
<cfquery name="M_ItemQry"
datasource="shopping">
SELECT * FROM M_Item WHERE ItemName Like '%#Form.keyword#%'
ORDER BY ItemID
</cfquery> |
|
|
|
| |
■ |
検索結果件数の表示 |
| |
|
検索処理において、何件検索されたのかという情報も重要になってくる。該当件数が少ない場合は、一目見て分かるが、該当件数が多くなってくると、ページをスクロールして数えないと分からない。そのような場合には、RecordCountという変数を使用する。この変数は、接頭辞としてcfqueryタグで指定したクエリ名をつけることで、クエリの検索結果件数を表すことができる。
また、検索件数と合わせて、検索キーワードも表示しておくと、検索結果の情報としてより親切である。
searchlist.cfm 150行目
| <cfoutput>#M_ItemQry.RecordCount#</cfoutput>件が該当しました |
|
|
| |
|
 |
|
| |
■ |
検索結果一覧を表示する |
| |
|
cfoutputタグを使用してcfqueryの検索結果を表示する方法は、第２回で説明しているので省略する。今回表示する項目は、サムネール画像・商品名・商品番号・販売価格である。
それぞれの項目に該当するフィールド名に合わせて記述してみよう。
モックアップ(searchlist.html)の159行目〜333行目の部分をcfmで記述すると、searchlist.cfmの162行目〜204行目となる。
ポイントは下記の２点である。
| (1) |
商品情報を表示するタグを、cfoutputタグで囲む。
serachlist.cfm 162行目、205行目 |
| (2) |
表示項目を変数に置き換える。
searchlist.cfm 170, 177, 196, 199行目 |
| (3) |
#を使用している部分は、##に変更する。 |
| |
※(3）はよく忘れがちなので、気をつけよう。 |
<cfoutput
query="M_ItemQry">
<img src="common/image/spacer.gif" width="10"
height="25" border="0" alt="">
<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">
<tr>
<td><span class="base">#M_ItemQry.ItemName#</span></td>
<td align="right"><a
href="detail.cfm?ItemID=#M_ItemQry.ItemID#&CategoryID=#M_ItemQry.CategoryID#">
<img src="common/image/detail_btn.gif"
width="92" height="18" border="0"
alt="詳細ページへ"></a>
</td>
</tr>
</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>
</cfoutput> |
|
|
