SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

プログラミング未経験から始めるPHP入門

ECサイトの商品詳細画面を作成しよう!
プログラミング未経験から始めるPHP入門~応用編(6)

第13回

  • X ポスト
  • このエントリーをはてなブックマークに追加

ダウンロード サンプルコード (7.4 KB)

今回の作成範囲

 今回の作成範囲に関して説明をします。まず、第8回にてC:\xampp\ec_htmlフォルダを作成していない方は内容に沿って作成し、商品一覧画面(html)にアクセスしてください。

今回作成する商品一覧画面(html)
今回作成する商品一覧画面(html)

 アクセスしたら、商品画像のトランペットをクリックしましょう。商品詳細画面へと遷移し、詳細情報が閲覧できます。

トランペットの商品詳細画面(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に直接記述しても送信可能です。

 それでは、実装に入っていきましょう。

次のページ
商品一覧画面(実装)

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
プログラミング未経験から始めるPHP入門連載記事一覧

もっと読む

この記事の著者

大家 正登(オオイエ マサト)

デジタルハリウッド『PHP 講座』講師。学生時代、スペイン語を専攻していたものの何故かプログラム言語に心が傾き、近所のフリープログラマーに弟子入り修行。その後中堅 SIer に 3 年間所属し、現在はフリーエンジニア。仕事の傍らジャズを演奏し、コントラバス 2 台と同居中。(ITエンジニア・大家正登のWeb...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/4473 2009/10/22 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング