今回の作成範囲
今回の作成範囲に関して説明をします。まず、第8回にてC:\xampp\ec_html
フォルダを作成していない方は内容に沿って作成し、商品一覧画面(html)にアクセスしてください。
アクセスしたら、商品画像のトランペットをクリックしましょう。商品詳細画面へと遷移し、詳細情報が閲覧できます。
今回は、この詳細情報表示画面を実装します。現段階ではプログラムは実装されていないため、何をクリックしてもトランペットが表示されますが、これを一覧画面と連動するよう実装し、クリックされた商品を表示できるようにします。大まかな処理の流れとしては次のとおりです。
- 処理(1):一覧画面にて、クリックされた商品コードを詳細画面に送信する。
- 処理(2):詳細画面にて、クリックされた商品コードを受信しデータベースより商品情報を取得・表示する。
詳細画面に対して商品名、価格、画像名、詳細説明などすべての商品情報を送信するよりも、商品を識別するための商品コードのみを送信した方がスマートな処理です。詳細画面のPHPでは再びデータベースにアクセスし、商品コードを基にm_items
テーブルから商品情報を取得します。
実際に上記の動作を確認できるデモサイトを用意しました。商品一覧画面(デモサイト)にアクセスし、クリックされた商品がきちんと詳細画面で表示されていることを確認しましょう。
商品一覧画面(設計)
それではまず、一覧画面から商品コードを送信する方法について考えてみます。先ほど、デモサイトで動作を確認してもらいましたが、もう一度、遷移先のURLに注目しながら操作してみましょう。
まず、「リコーダー」をクリックしてみましょう。この時のURLは
http://nextia.jp/tmp/ec/item_detail.php5?code=1004
になっています。次に「チェロ」(画像ではバイオリンのように見えますが、チェロとします)をクリックしてください。この時のURLは、下記のようになっています(拡張子が「php5」となっているのはレンタルサーバの都合ですので気にしないでください)。
http://nextia.jp/tmp/ec/item_detail.php5?code=2002
URLをよく見てください。どうやら、この「?code=XXXX
」の部分に、クリックされた商品コードが入っているようです。このURLの後に付加する記号ですが、どこかで見覚えがありませんか? これは何かと言うと、第5回で学習したGET方式のリクエストです。このGETリクエストを使って、一覧画面と詳細画面の間で商品コードの受け渡しを行います。
リクエストは通常テキストボックスなどの入力フォームを使って送信しますが、GETリクエストに関しては、HTML中のリンク先URLに直接記述しても送信可能です。
それでは、実装に入っていきましょう。