今回の作成範囲
今回の作成範囲に関して説明をします。まず、第8回にてC:\xampp\htdocs\ec_htmlフォルダを作成していない方は内容に沿って作成し、商品一覧画面（http://localhost/ec_html/item_list.php）にアクセスしてください。商品の一覧が表示されたら、トランペットの画像をクリックし、詳細画面で［カートに入れる］ボタンをクリックしてください。
画面のアドレスがhttp://localhost/ec_html/cart.phpに変わり、カートの中身が表示されます。
この画面は、まだPHPが実装されていないサンプル画面なので、何を入れてもトランペット、コントラバス、ドラムの3商品が表示される状態です。今回はこの画面にPHPを実装し、クリックされた商品をカートに追加できるようにします。
前回と同様、今回も詳細画面とカート画面での連携が必要となります。大まかな処理の流れは次のとおりです。
- 機能（1）：詳細画面にて［カートに入れる］がクリックされたタイミングで、クリックされた商品の商品コードと個数をカート画面に送信する。
- 機能（2）：カート画面にてクリックされた商品の商品コードと個数を受け取り、カートに入れ、表示する。
実際にデモ画面にて、上記の動作を確認できます。商品一覧画面（デモサイト）にアクセスし、クリックされた商品がカートに追加されることを確認しましょう。
商品詳細画面の実装
それではまず、詳細画面からの商品コードと個数の送信方法について考えてみます。こちらは、前回、商品一覧画面から商品詳細画面に画面遷移する際、商品コードの引き渡しを行ったのと同じ要領で、リクエストを送信することで実装します。
ただし、前回は詳細画面への移動がHTMLのリンクタグを経由してだったのですが、今回はボタンのため、ボタンのHTMLタグに直接画面遷移先のURLを記述することができません。ここでは第5回で説明した<form>タグで、セレクトボックスなどの入力フォームを囲むことでカート画面に情報を送信します。
サンプルソースのSTEP1フォルダに実装済みのitem_detail.phpがあるので、C:\xampp\htdocs\ec\フォルダ以下に上書き保存してください。次にこれをメモ帳などで開き、35行目に<form>タグがあることを確認しましょう。このフォームは59行目の</form>まで続きます。この<form>タグで囲まれた部分に［個数］のセレクトボックスがあるので、カート画面に個数を送信するのは問題なくできそうです。
商品コードに関しては、［個数］のようにセレクトボックスやテキストボックスなどが定義されていないため、37行目にある下記の部分で、画面の裏方で送信するようにしています。
<input type="hidden" name="code" value="<?php print( $item["item_code"] ); ?>">
<input type="hidden"...の部分は、一般的にhiddenタグと呼ばれるもので、イメージとしては目に見えないテキストボックスだと考えてください。
このままでは人間の目では確認できないので、一度、目に見えるテキストボックスに変更して内容を確認しておきましょう。具体的には、次のようにtype="hidden"の部分をtype="text"に書き換えます。
<input type="text" name="code" value="<?php print( $item["item_code"] ); ?>">
上記のように変更した後、商品一覧画面で商品を選択し、商品詳細画面に遷移すると、以下の画像のように商品コードが設定されたテキストボックスが表示されます。商品一覧画面でクリックした商品に応じて、テキストボックス内の商品コードも変化することを確認してください。
hiddenタグも入力フォームの一種なので、<form>タグで囲まれた部分に記述することでリクエストを送信できます。
