ECサイトの商品一覧画面を作成しよう！
プログラミング未経験から始めるPHP入門～応用編(2)

第9回

すべての商品情報をデータベースより取得する（設計）

　それでは、実際の制作に入っていきます。先に画面左側の「商品検索」エリアは考えず、条件指定無しで全商品を表示しましょう。まずはロジックを考えるところから始めます。大まかな処理の流れを頭の中で組み立ててみてください。

　今回の処理の流れは、次のような感じになります。

• 処理1）データベースに接続する。
• 処理2）SELECT文を実行し、すべての商品情報を取得。
• 処理3）取得した商品情報を画面に表示する。

　次に、この大まかな処理の流れをもう少し具体的に考えてみましょう。処理2）で、全商品を検索するためには、どのようなSQLを実行すればよいでしょうか。

　答えは、次のようになります。

全商品を検索するためのSQL文

  SELECT * FROM m_items WHERE del_flag = '0';

　上記は、m_itemsテーブルから、del_flagカラムの値が0のものを検索するためのSQLです。del_flagが1のレコードは削除扱いの無効な商品ですから検索結果から除外します（※注：del_flagの詳細に関しては第8回の内容をご覧ください）。

　また、処理3）も具体的に考えておきましょう。第7回で解説したように、データベースから情報を取得して表示するには、データベース接続後、mysql_query命令でSQLを実行し、whileループとmysql_fetch_array命令を組み合わせ、1レコードずつ表示します。この処理では、この1レコードずつ表示する過程で、商品を表示するHTMLを1ブロックずつ出力していくということになります。

すべての商品情報をデータベースより取得する（実装）

　それでは、実装に入ります。サンプルソースのitem_list_ver1.phpを開いてください。現段階では、処理1）～2）までを記述しています。

　まずは皆さんの手で、処理3）を実現するプログラムを考え、追記してみましょう。

　プログラムの追記が終わったら、C:\xampp\htdocs内にecフォルダを作成し、プログラムを追記したファイル名をitem_list.phpに変更して、C:\xampp\htdocs\ecの中に保存します。C:\xampp\htdocs\ec_htmlフォルダ内のimgフォルダ、commonフォルダもC:\xampp\htdocs\ecフォルダ内にコピーしてください。その後、商品一覧画面（http://localhost/ec/item_list.php）にアクセスし動作を確認してみてください。

　うまくいきましたか？ それでは、解答を記します。前述のとおり、処理3）のようにSQLで取得した検索結果を表示するにはmysql_fetch_array命令を用います。item_list_ver1.phpの39行目のmysql_queryが記述されている次の行に、以下を追記しましょう。

mysql_fetch_array命令を用いて、SQLで取得した検索結果を表示する

while( $item = mysql_fetch_array( $res ) ) {

}
mysql_free_result($res);

　このwhileループの中で、それぞれの商品情報を表示していくわけです。whileループ1回につき、1商品を表示します。1商品を表すHTMLは下記の部分になります。

1商品を表すHTML（サンプルソース 46～50行目）

<dl class="products">
<dt><a href="item_detail.php"><img src="img/thumb/EG024.jpg" alt="" /><br />
  YAMAHAトランペット</a></dt>
  <dd>&yen;200,000</dd>
</dl>

　これを表示するには、次のように記述します。

whileループ内に1商品を表すHTMLを組み込む

while( $item = mysql_fetch_array( $res ) ) {
?>
<dl class="products">
<dt><a href="item_detail.php"><img src="img/thumb/<?php print( $item["image"] ); ?>" alt="" /><br />
<?php print( $item["item_name"] ); ?></a></dt>
<dd>&yen;<?php print( $item["price"] ); ?></dd>
</dl>
<?php
}
mysql_free_result($res);
?>

　$resに格納されているSELECT文の結果からループで1レコードずつ取り出し、$itemという変数に移し変えていきます。$itemは連想配列で、$item[カラム名]のように記述すればそのカラムの値が取得できますから、次のように記述すれば、「商品名」が表示されます。

item_nameカラムの値を取得

print( $item["item_name"] );

また、次のように記述すれば、「価格」が表示されます。　

priceカラムの値を取得

print( $item["price"] );

　whileループが始まった直後にPHPタグ（<?php ～　?>）が一度閉じていることに注意してください。ループの内側にHTMLを直接記述することで、ループの回数分、記述したHTMLが画面に表示されます。このプログラムが生成したHTMLを確認するために、ブラウザでソースを表示させてみてください。

HTMLソースの構造

<dl class="products">
<dt>
  <a href="item_detail.php">
  <img src="img/thumb/EG024.jpg" alt="" /><br />
  トランペット                  </a>
  </dt>
  <dd>&yen;200,000</dd>
 </dl>

　上記のコード内の<dl>～</dl>で囲まれた商品情報が、$resに格納されているレコードの数だけ繰り返し表示されていることが分かるはずです。