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:'ＭＳ ゴシック'; 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> |
<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)}
# ３桁区切りサブルーチン
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; |
#!/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; |