|
||||
|
|
| １． | 開発を始める前に | |||||||||||
| ■ | まず、はじめに。 | |||||||||||
| 前回は、商品を検索して検索条件に該当する商品の一覧表示を行い、更に一覧表示から選択した商品の詳細情報を表示するところまでを説明した。今回は、最終的な購入処理の完成を目標にする。 商品の詳細を表示したら、次に、購入したい商品をショッピングカートに入れていく。ショッピングカートでは、商品や数量の変更を行うことができる。ショッピングカートに購入商品がたまったら、お客様情報を入力し、商品注文内容を確認して、注文完了となる。 |
||||||||||||
 |
||||||||||||
| ■ | サンプルプログラムの準備 | |||||||||||
| shoppingフォルダ内のサンプルプログラムを準備する。 今回必要な商品詳細情報、ショッピングカート確認、お客様入力、最終確認、注文完了に関連するファイルはC:\Inetpub\wwwroot\shopping以下のdetail.cfm、cartcfm、input.cfm、checkcfm、end.cfmである。
|
||||||||||||
| 参考モックアップデータ | ||||||||||||
| モックアップデータはmockup(C:\Inetpub\wwwroot\mockup)フォルダ内に保存している。 ※トップページ画面：http://localhost/mockup/index.html ※検索結果一覧画面：http://localhost/mockup/searchlist.html ※商品詳細閲覧画面：http://localhost/mockup/detail.html ※カテゴリ一覧画面：http://localhost/mockup/category.html ※ショッピングカート画面：http://localhost/mockup/category.html ※お客様情報入力画面：http://localhost/mockup/input.html ※ご注文内容最終確認画面：http://localhost/mockup/check.html ※注文完了画面：http://localhost/mockup/end.html 上記のファイルを準備をしたら、実際に動かして画面の動きを確認してみよう。 |
||||||||||||
|
||||||||||||
| ■ | サンプルプログラムを実際に動かしてみよう | |||||||||||
| 商品詳細情報画面からショッピングカート画面へ | ||||||||||||
| 詳細情報が表示されている商品をショッピングカートへ入れるためdetail.cfmの「ショッピングカートに入れる」ボタンをクリックする。cart.cfmへ遷移すると、ショッピングカートへ入れた商品がショッピングカートに追加されているのを確認できる。また、detail.cfmの「ショッピングカートを見る」ボタンをクリックしても、cart.cfmへ遷移して、現在ショッピングカートに入っている商品の内容を表示する。 | ||||||||||||
| ショッピングカート画面からお客様情報入力画面へ | ||||||||||||
| cart.cfmの「購入手続きへ」ボタンをクリックすると、input.cfmへ遷移して、お客様が情報を入力する画面を表示する。 | ||||||||||||
| お客様情報入力画面からご注文最終内容確認画面へ | ||||||||||||
| input.cfmの「最終確認ページへ」ボタンをクリックすると、checkcfmへ遷移する。ショッピングカートの内容とお客様が入力した情報を表示する。 | ||||||||||||
| ご注文最終内容確認画面から注文完了画面へ | ||||||||||||
| check.cfmの「注文する」ボタンをクリックし、end.cfmへ遷移して、注文を完了する。 | ||||||||||||
| データベースでの管理 | ||||||||||||
| 今回は、「ショッピングカート」と「購入商品」、「購入者」をデータベースで管理する。 では、実際にデータベースの中身を見てみよう。 |
||||||||||||
 |
||||||||||||
| １・２・３・４・５・６・７・８ |  |
 |