4.電脳果樹園

参照 URL http://horiuchi.akira.ne.jp/cgi/rei-04.html
■概要  オンラインショッピングの基本的な流れをここでは示しています。商品の選択をプルダウン メニューで行った後は、CGI 内で請求金額の処理を行い確認画面を表示します。ユーザが内容を 確認し、「送信」ボタンを押すと注文を完了します。  確認画面からの送信には「隠しフィールド」を用います。通常はユーザ情報や購入商品等必要 な情報を全て引き継ぐのですが、ここでは簡単のためにユーザ名だけを引き継いでいます。仕組 みは同じですので、つくり込みをする場合はこの部分を色々と変更してみてください。   最初の画面 外枠を構成する HTML rei-04.html
<HTML>
<HEAD>
<TITLE>Rei 04</TITLE>
</HEAD>
<BODY BGCOLOR="#ffc0c0">
<BR>
<CENTER>
<H2>電脳果樹園</H2>
<FORM ACTION="rei-04.cgi" METHOD="POST" TARGET ="order">
<PRE>お名前 <INPUT NAME="namae"> 様
</PRE>
<TABLE CELLSPACING="0" CELLPADDING="3" STYLE="font-family:'MS ゴシック'; font-size:0.9em">
<TBODY ALIGN="center">
<TR><TD>オレンジ</TD><TD>アップル</TD><TD>メロン</TD></TR>
<TR><TD><IMG SRC="orange.gif" BORDER="0"></TD>
  <TD><IMG SRC="apple.gif" BORDER="0"></TD>
  <TD><IMG SRC="melon.gif" BORDER="0"></TD></TR>
<TR><TD><SELECT NAME="orange">
  <OPTION VALUE="注文なし-0">▼個数</OPTION>
  <OPTION VALUE=" 6 個 \720-300"> 6 個 \720</OPTION>
  <OPTION VALUE="12 個 \1,350-1350">12 個 \1,350</OPTION>
  <OPTION VALUE="24 個 \2,600-2600">24 個 \2,600</OPTION>
  <OPTION VALUE="48 個 \3,000-3000">48 個 \3,000</OPTION>
</SELECT></TD><TD><SELECT NAME="apple">
  <OPTION VALUE="注文なし-0">▼個数</OPTION>
  <OPTION VALUE=" 2 個 \680-680"> 2 個 \680</OPTION>
  <OPTION VALUE=" 4 個 \1,300-1300"> 4 個 \1,300</OPTION>
  <OPTION VALUE=" 8 個 \2,500-2500"> 8 個 \2,500</OPTION>
  <OPTION VALUE="16 個 \4,800-4800">16 個 \4,800</OPTION>
</SELECT></TD><TD><SELECT NAME="melon">
  <OPTION VALUE="注文なし-0">▼個数</OPTION>
  <OPTION VALUE=" 1 個 \3,500-3500"> 1 個 \3,500</OPTION>
  <OPTION VALUE=" 2 個 \6,500-6500"> 2 個 \6,500</OPTION>
  <OPTION VALUE=" 4 個 \12,500-12500"> 4 個 \12,500</OPTION>
  <OPTION VALUE=" 8 個 \24,500-24500"> 8 個 \24,500</OPTION>
</SELECT></TD></TR>
</TBODY>
</TABLE>

<DIV> </DIV>
<INPUT TYPE="submit" VALUE="注文">  <INPUT TYPE="reset" VALUE="リセット">
</FORM>
<DIV> </DIV>
<iFRAME SRC="rei-04-order.html" NAME="order" WIDTH="290" HEIGHT="230"></iFRAME>

</CENTER>
</BODY>
</HTML>
スタート時のフレーム内容 rei-04-start.html
<HTML>
<HEAD>
<TITLE>Rei 04-order</TITLE>
<BODY BGCOLOR="#00ff00">
<PRE>

 毎度ご利用頂き有り難う御座います。

 商品には送料 \850 がかかります。 

 消費税 5% が別途かかります。

 発送には、4,5 日ほどかかります。


 電脳果樹園 ASUKA

 本社 東京都緑区旭ヶ丘 1-2-3
</PRE>
</BODY>
</HTML>
注文後の画面 注文確認の画面 フレーム内 CGI / 注文内容の計算 rei-04.cgi
#!/usr/local/bin/perl

require 'cgi-lib.pl';
&ReadParse(\%moji);

# 無記名用名前
  if ($moji{namae} eq '') {$name ='***'}
  else {$name = $moji{namae}}

# 注文内容の合計
  @fr1 = split /-/,$moji{orange};
  @fr2 = split /-/,$moji{apple};
  @fr3 = split /-/,$moji{melon};
  $sum = $fr1[1] + $fr2[1] + $fr3[1];
  if ($sum == 0) {$total = 0}
  else {
    $sumf = &hyoji($sum);
    $zeif = &hyoji(int 0.05*$sum);
    $soryo = 850;
    $gokeif = &hyoji($sum + $zeif + $soryo)}

# 3桁区切りサブルーチン
  sub hyoji {
 $_ = shift @_ ;
 $_ = join "", reverse split //;
 s/(...)/\1,/g;
 s/,\z//;
 $a = join "", reverse split //}

# 本文
print &PrintHeader;
print <<EOH;
<HTML>
<HEAD>
<TITLE>Rei 04</TITLE>
</HEAD>
<BODY BGCOLOR="#00ff00">
<PRE>
  $name 様
 内容をご確認の上送信してください

 オレンジ :$fr1[0]
 アップル :$fr2[0]
 メロン  :$fr3[0]
  ---------------------------------
 合 計  :$sumf
 消費税  :$zeif
 送 料  :$soryo 
 支払額  ¥$gokeif</PRE>
<FORM ACTION="rei-04-1.cgi" METHOD="POST">
<INPUT TYPE="hidden" VALUE="$name" NAME="namae">
 <INPUT TYPE="submit" VALUE="送信">
</FORM>
EOH
print &HtmlBot;
  フレーム内 CGI / 確認画面 rei-04-1.cgi
#!/usr/local/bin/perl

require 'cgi-lib.pl';
&ReadParse(\%moji);

# 通常はここで、データの書き込み
# または、送信作業をする。

print &PrintHeader;
print <<EOH;
<HTML>
<HEAD>
<TITLE>Rei 04-1</TITLE>
</HEAD>
<BODY BGCOLOR="#00ff00">
<PRE>

  $moji{namae} 様

 ご注文有り難う御座いました。

 発送には 4,5 日ほど時間がかかり

 ますのでご了承ください。


 電脳果樹園 ASUKA

 本社 東京都緑区旭ヶ丘 1-2-3
</PRE>
EOH
print &HtmlBot;