網路購物網站 (ASP)¶

1 問題¶

案主急需一個具有會員管理功能、購物車的購物網站，由於時限非常緊迫，而且又須要能夠有擴充商品類別的功能。不但要圖文並茂，而且要方便管理，作業流程要簡單易懂，因為案主急著將商品上線。
案主所提的需求描述相當少，但有掌握到關鍵，例如：會員管理功能、購物車、商品類別管理、類似商品推薦、跑馬燈商品、會員訂單查詢。因此筆者必須掌握這些重點，把網站以最短時間製作出來。
雖然案件很急很趕，但筆者認為心思不能跟著急跟著趕，否則會對於品質有影響。因此還是必須藉由基本的分析，來勾勒出網站的樣貌。
這件案件是有風險的，所為風險就是需求者並沒有提供非常詳細的資料，甚至連網站的排版也沒有說明，因此很有可能網站做出來之後，因為網站風格、排版等問題，而被打回票。因此設計網站排版之前，筆者就已經嘗試與案主溝通概念，替案主建立網站可能的樣貌，避免網站重作的風險。

2 需求¶

表格 1 「網路購物網站」系統目的分析表

版本：1.0	要做什麼	不要做什麼（不要做不代表不會做）
能做什麼	（第一格：必要項目）	（第二格：次要項目）
	會員管理功能，可讓會員於線上登錄資料，並且直接成為會員。	預設多國語言網的資料架構。
	購物車，必須能夠於任何商品項目中隨時加入。並且可以檢視購物車的資料。	提供更完善的會員管理功能，讓會員管理介面上線，可以直接在線上新增、刪除、修改會員資料。
	購物車，可以自由刪除或增加項目。	增設訂單處理流程，讓訂單處理有一系列的標準作業程序（SOP）。
	商品類別管理，必須由線上操作，透過資料的填寫，就可以修改或新增。	提供商品議價功能。
	商品類別管理，可以刪除類別。	提供評價商品的機制。
	類似商品推薦，當使用者點選某一項商品時，必須要有空間展示相類似的商品推薦。	提供留言板的功能。
	跑馬燈商品，讓使用者更多選擇，不限於商品類型，各種商品都可以在跑馬燈商品中顯示。	設計預購商品功能。
	跑馬燈商品，跑馬燈商品項目也要可以直接放入購物車。
	會員訂單查詢，直接顯示會員所購買的商品項目。
	會員訂單查詢要簡單易懂。
不能做什麼（不能做代表不需要做）	（第三格：不必要項目）	（第四格：不需要項目）
	提供商品類別的論壇。	使用資料探勘（Data Mining）演算法，進行商品推薦。
	替會員建立打折及積點機制。	為整套系統建立標準的作業程序，並導入WorkFlow。
	列出銷售排行榜。
	會員加入必須驗證電子郵件。

表格 2 「網路購物網站」系統目標分析表

版本：	重要	不重要
優先	（重）	（急）
	購物車，必須能夠於任何商品項目中隨時加入。並且可以檢視購物車的資料。	會員管理功能，可讓會員於線上登錄資料，並且直接成為會員。
	購物車，可以自由刪除或增加項目。	跑馬燈商品，跑馬燈商品項目也要可以直接放入購物車。
	商品類別管理，必須由線上操作，透過資料的填寫，就可以修改或新增。
	商品類別管理，可以刪除類別。
	會員訂單查詢，直接顯示會員所購買的商品項目。
	會員訂單查詢要簡單易懂。
不急迫	（輕）	（緩）
	類似商品推薦，當使用者點選某一項商品時，必須要有空間展示相類似的商品推薦。	預設多國語言網的資料架構。
	跑馬燈商品，讓使用者更多選擇，不限於商品類型，各種商品都可以在跑馬燈商品中顯示。

表格 3 「網路購物網站」系統規格表

規格項目	規格內容	備註
會員管理功能	來賓可以直接於線上登錄，成為會員。	…
購物車	購物車要能列出清單、刪除項目、計算金額。	…
商品類別管理	可以透過線上新增、刪除、修改主要類別。	…
	可以透過線上新增、刪除、修改商品項目。
	可以透過線上設計會員可見的商品類別或項目。
類似商品推薦	可以判斷來賓點選的商品，而列出相關的商品。	…
跑馬燈商品	可以列出商品名稱、價錢、放入購物車。	…
	商品不分類別，隨時得以列出項目跑在網頁上。
會員訂單查詢	自動替訂單編號，列出商品訂購的項目。	…
	列出訂購會員的基本資料。

3 特色¶

特點在於快速建置電子商務網站，並提供會員管理、購物車、商品類別管理。用最短時間建設起來。
可應用於各行各業。

4 使用工具¶

語言	軟體
ASP、JavaScript	Macromedia Dreamweave、MS FrontPage、MS Access、Adobe Photoshop CS、Ulead PhotoImpact、Adobe ImageReady CS

5 系統架構¶

在設計本網站的時候，由於沒有預先的排版風格，因此完全以功能導向來設計，筆者將功能以頁框（Frame）的方式切開，並分門別類，以應付隨時的修改。若某一項功能需要修改，只需要調出要修改的網頁，進行修改即可。
在網站格式排版方面，筆者提出主要商品詳細內容於網頁中央，因為這是目視最直接的地方，而網頁推薦在商品詳細內容的右方，並以縮圖的方式列出相關的商品。跑馬燈其實很少人會去注意，因此放在上方，一列有縮圖及價錢和隨時加入購物車的按鈕。而不變動的是網站的標題頁以及商品目錄分類的區域，筆者認為來賓可以藉由商品目錄分類可以隨時切換，而不用點選上一頁、下一頁的按鈕來切換網頁。
而管理功能筆者為求快速，直接設計在商品目錄分類中的其中一項，只要以管理者的帳號登入後，就可以看到管理功能，可以在這裡管理商品目錄，以及訂單查詢。並沒有將會員資料管理列入的原因，是因為該網站所需的會員功能甚少，只要使用MS Access管理即可，並沒有需求在線上作管理。
最特別的一點就是樹狀目錄管理功能，這一點十分方便，若有任何功能必須增加，您只要將焦點放置在該功能，完成之後。透過樹狀目錄管理建立連結，直接就可以將新功能上線，而無須特別設計連結，這就是樹狀目錄管理的好處。

6 程式實作¶

首先我們來認識整個網站的檔案目錄架構，先建立起概念，對於往後修改時會有所助益。請參考如圖 1 以及表格 4。

圖 1 網站檔案目錄架構

表格 4 網站檔案目錄說明

目錄名稱	目錄說明
=GoodsImages=	存放商品的圖檔，子目錄編碼與商品編號相同。
=TreeMenu=	關於管理樹狀項目的功能。
TreeMenu-AddItem	關於新增項目的功能。
TreeMenu-DelItem	關於刪除項目的功能。
TreeMenu-EditItem	關於修改項目的功能。
-DB-	存放資料庫的目錄。
zh-tw.big5	以語系為名的目錄，預備往後多國語言網站的架構。
Car	購物車的功能。
Goods	商品展示的功能。
Member	加入會員的功能。
Menu	網頁主架構。

6.1 網站主架構¶

Step 1：網站由上往下區分三塊，上面區塊式網頁標題區，中間區塊是網頁主體區，下面區塊是版權及連絡資訊區。而中間主體區又可分為兩塊，左邊區塊是樹狀目錄區，右邊是商品資訊區。如圖 2 所示。

圖 2 網站主架構

Step 2：首先我們來看最主要的部分，也就是樹狀目錄，檔案名稱是 menu02.asp。請參考以下程式碼。


<%
'禁止網頁被快取
Response.Expires = 0
%>
<%
'藉由表單取得帳號
get_uiLN = Request.Form("textfield1")
'藉由表單取得密碼
get_uiLP = Request.Form("textfield2")
'假設來賓代碼為空
If Len(Session("uiID")) = 0 Then
'設定SESSION為瀏覽者等級
Session("uiID") = "00000000000000"
Session("uiNN") = "貴賓"
Session("uiLN") = "guest"
Session("uiLV") = ""
End If
%>
<html>
<head>
<title>3c電腦館會員交易小型網站</title>
<meta http-equiv="Content-Language" content="zh-tw">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<!--設定超連結網頁開啟目標-->
<base target="menu02">
<style type="text/css">
<!--
body {
background-image: url(-images/menu02-bg.jpg);
}
.btnRefresh {
font-size: 12px;
font-weight: normal;
color: #FFFFFF;
background-color: #990000;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
.tf {
font-size: 12px;
font-weight: normal;
color: #990000;
background-color: #FF9999;
border: thin solid #FF6666;
}
.style3 {color: #FFFFFF; font-size: 12px; }
-->
</style>
</head>
<body topmargin="0" leftmargin="0" bgcolor="#FFCC66">
<STYLE type="text/css">
<!--
BODY {
scrollbar-face-color:#9CC7F7;
scrollbar-highlight-color:#FFFFFF;
scrollbar-3dlight-color:#1875D6;
scrollbar-darkshadow-color:#000000;
scrollbar-shadow-color:#808080;
scrollbar-arrow-color:#000000;
scrollbar-track-color:#9CC7F7;
}
-->
</STYLE>
<%
' 設定資料夾是否也需要作超連結的功能
' 0 = 不啟用 , 1 = 啟用
Folder_Link = 1
'假設不啟用資料夾超連結
if Folder_Link = 0 Then
%>
<script src="./-JScript-/ftiens4.js"></script>
<%
'假設啟用資料夾超連結
Else
%>
<script src="./-JScript-/TreeCreation1.js"></script>
<%
End if
%>
<%
'宣告資料庫連結物件
DIM objCnn
'宣告SQL命令文字字串變數
DIM strSQL_TREM
DIM strSQL_UI
DIM strSQL_tremMenu
'宣告計數器變數
DIM intf
'宣告項目編號字串變數
'DIM strTremMenuID
'宣告根目錄字串變數
'DIM strRoot
'建立資料庫連結物件
SET objCnn = Server.CreateObject("ADODB.Connection")
'開啟資料庫
objCnn.Open "DRIVER={Microsoft Access Driver (*.mdb)};" & _
"DBQ=" & Server.MapPath("../../-DB-/UI.mdb")
'建立資料錄物件
SET objRst_UI = Server.CreateObject("ADODB.Recordset")
'當有輸入帳號密碼時
If Len(get_uiLN) > 0 And Len(get_uiLP) > 0 Then
    '設定查詢帳號及密碼是否正確的SQL命令文字字串
    strSQL_UI = "SELECT Distinct [編號],[暱稱],[帳號] FROM [UI] WHERE [帳號] LIKE '" & get_uiLN & "' AND [密碼] LIKE '" & get_uiLP & "'"
'反之
Else         
    '採用來賓帳號登錄
    strSQL_UI = "SELECT Distinct [編號],[暱稱],[帳號] FROM [UI] WHERE [帳號] LIKE '" & Session("uiLN") & "'"
End If      
'開啟資料錄
objRst_UI.Open strSQL_UI,objCnn,3,1
'若有資料
If objRst_UI.EOF = False Then
    '判斷只有一筆資料
    If objRst_UI.RecordCount = 1 Then
        '則將會員資料設定到SESSION
        Session("uiID") = Trim(objRst_UI("編號"))
        Session("uiNN") = Trim(objRst_UI("暱稱"))
        Session("uiLN") = Trim(objRst_UI("帳號"))
        Session("uiLV") = ""
        '宣告選單資料錄物件
        SET objRst_tremMenu = Server.CreateObject("ADODB.Recordset")
        '設定會員選單SQL命令文字
        strSQL_tremMenu = "SELECT Distinct * FROM [tremMenu] WHERE [uiID] LIKE '" & Session("uiID") & "'"
        '開啟資料錄
        objRst_tremMenu.Open strSQL_tremMenu,objCnn,3,1
        '巡覽所有資料錄
        Do Until objRst_tremMenu.EOF = True
            '將選單識別碼連結成字串
            strTremMenuID = strTremMenuID & objRst_tremMenu("tremID") & "','"
            '將資料錄移動到下一筆
            objRst_tremMenu.MoveNext
        Loop
        '關閉資料錄
        objRst_tremMenu.Close
        '釋放記憶體空間
        Set objRst_tremMenu = Nothing
    '若沒有資料
    Else
    '錯誤處理  
    End If
End If
'關閉資料錄
objRst_UI.Close
'釋放記憶體空間
Set objRst_UI = Nothing
%>
<script>
<!--
strRoot = gFld("<font face='新細明體' size='3' color='#FFFFFF' style='width: 150; height: 12;filter=glow(color=#FFAC00, strength=6)' class=coffee ><%=Session("uiNN")%> 您好，<b>～歡迎光臨～</b></font>", "")
<%
'宣告載入樹狀目錄副程式
Sub Load_Tree(strNode)
    '宣告計數變數
    intf = intf + 1
    '宣告資料錄選單物件
    SET objRst_TREM = Server.CreateObject("ADODB.Recordset")
    '設定選單SQL命令文字
    strSQL_TREM = "SELECT Distinct tremID,tremPID,tremSort,tremName,tremURL,tremType FROM [tremFolder] " & _
        "WHERE [tremPID] LIKE '" & strNode & "' AND [tremID] IN ('" & strTremMenuID & "') Order By [tremSort]"
    '開啟資料錄
    objRst_TREM.Open strSQL_TREM,objCnn,3,1
    '若有資料
    IF Not objRst_TREM.EOF Then
        '巡覽所有資料錄
        for i = 0 to objRst_TREM.RecordCount -1
            '若發現根目錄代碼
            if strNode = "TREM0" then
                '設定計數值為1
                intf = 1
            end if
            '若資料錄存在根目錄代碼
            IF objRst_TREM("tremPID") = "TREM0" Then
                '判斷子目錄型態是否為D，D=資料夾
                IF objRst_TREM("tremType") = "D" Then
                    '假設不用超連結
                    if Folder_Link = 0 Then
                        '超連結字串設為#
                        URL_TEXT = "#"
                    '啟用超連結
                    Else
                        '設定超連結文字
                        URL_TEXT = objRst_TREM("tremURL")
                    End if
'建立目錄資料夾的JavaScript命令文字
%>aux<%=intf%> = insFld(strRoot, gFld("<%=objRst_TREM("tremName")%>","<%=URL_TEXT%>"))<%
                    '顯示換行
                    Response.Write chr(10)& chr(13)
                    '使用遞回函式繼續加入子目錄或子連結
                    Load_Tree(objRst_TREM("tremID"))
                '反之，子目錄型態為超連結
                Else
'建立子連結的JavaScript命令文字
%>aux<%=intf%> = insDoc(strRoot, gLnk(0, "<%=objRst_TREM("tremName")%>","<%=objRst_TREM("tremURL")%>"))<%
                    '顯示換行
                    Response.Write chr(10)& chr(13)
                End if
            '若沒有根目錄，這是給子資料夾或子連結用的
            ELSE
                '則判斷資料夾型態是否為D
                IF objRst_TREM("tremType") = "D" Then
                    '若不啟用超連結
                    if Folder_Link = 0 Then
                        '超連結文字設為#
                        URL_TEXT = "#"
                    '若啟用超連結
                    Else
                        '設定超連結文字
                        URL_TEXT = objRst_TREM("tremURL")
                    End if
'設定資料夾的JavaScript命令文字
%>aux<%=intf%> = insFld(aux<%=intf-1%>, gFld("<%=objRst_TREM("tremName")%>","<%=URL_TEXT%>"))<%
                    '顯示換行
                    Response.Write chr(10)& chr(13)
                    '使用遞回函式繼續加入子資料夾或子連結
                    Load_Tree(objRst_TREM("tremID"))
                '反之
                Else
'設定子連結的JavaScript命令文字
%>insDoc(aux<%=intf-1%>, gLnk(0, "<%=objRst_TREM("tremName")%>","<%=objRst_TREM("tremURL")%>"))<%
                    '顯示換行
                    Response.Write chr(10)& chr(13)
                End if
            End if
            '將資料錄移動到下一筆
            objRst_TREM.MOVENEXT
        Next
    End if
    '計數器減1
    intf = intf - 1
    '關閉資料錄
    objRst_TREM.Close
    '釋放記憶體空間
    SET objRst_TREM = Nothing   
End Sub
'由根目錄開始載入樹狀目錄
Call Load_Tree("TREM0")
'關閉資料庫連結
objCnn.Close
'釋放記憶體空間
SET objCnn = Nothing
%>
<!--初始化樹狀目錄-->
initializeDocument()
-->
</script>
<%
'當來賓為瀏覽者等級
If Session("uiID") = "00000000000000" Then
%>
<input name="Submit" type="button" class="btnRefresh" onClick="javascript:location.reload()" value="重新整理目錄">
<form name="form1" method="post" action="">
<br>
<table width="90%" border="1" align="center" cellspacing="0" bordercolor="#330000">
<tr>
<td bgcolor="#990000" scope="row"><div align="center"><span class="style3">會員帳號</span></div></td>
<td bgcolor="#993333">
<input name="textfield1" type="text" class="tf" id="textfield1" size="20" maxlength="20">    </td>
</tr>
<tr>
<td bgcolor="#990000" scope="row"><div align="center"><span class="style3">會員密碼</span></div></td>
<td bgcolor="#993333">
<input name="textfield2" type="password" class="tf" size="20" maxlength="20"></td>
</tr>
<tr>
<th colspan="2" bgcolor="#FF3300" scope="row"><input name="Submit2" type="submit" class="btnRefresh" value="登入會員"></th>
</tr>
</table>
</form>
<%
End If
%>
</body>
</HTML>

6.2 網站操作流程¶

Step 1：如圖 3，這是首頁畫面，我們先來看管理者功能，帳號預設為admin，密碼預設為1234。請點選登入會員按鈕。

圖 3 首頁

Step 2：如圖 4 所示，登入管理者等級之後，就可以看到增加了 Web Admin、Menu Manager、All Order List Manager 的選項。其中 Menu Manager 是代表樹狀目錄管理，您可以在這裡新增、刪除、修改樹狀目錄結構。而 All Order List Manager 是訂單所有資料。

圖 4 管理者功能

Step 3：如圖 5 所示，在商品項目中我們可以看到中央畫面就是點選的商品詳細資料，而右邊的區域就是推薦的相關商品，上面的跑馬燈商品也會以動態的方式由右往左推進。而紅色的加入購物車按鈕，得以隨時點選加入購物車。

圖 5 瀏覽商品

Step 4：如圖 6 所示，點選我的購物車之後，購物車可以列出所勾選的物品，倘若物品購買兩項以上，購物車會自動把相同物品的數量自動累計，而每個項目前都有一個核取框，可以勾選取消構物項目，或者選擇繼續購物，或是結帳。

圖 6 購物車

Step 5：如圖 7 所示，點選加入會員之後，會出現登錄表格，新會員只要填寫完畢後，馬上就可以以會員的身分登錄了。

圖 7 加入會員

Step 6：如圖 8 所示，訂單列表可以把所有訂購資訊包含會員基本資料都詳細的列出來。

圖 8 訂單資訊

7 修改重點¶

對於本網站的美工部分可以再重新的設計，以符合您的需要。目前筆者將功能區塊以不同背景顏色區分，您可以透過整體設計，再做切割，這樣的設計會更具美感。
本網站目前缺少的功能就是訂單管理，目前訂單管理僅只有列出詳細資料而已，這對於營業量不大的網站是足以負荷，但隨著營業量的日益增加，僅有列出訂單資訊的方式，是不敷使用的。因此筆者建議讀者要修改的話可以先朝向訂單管理功能來做設計，這樣修改能夠讓您快速的建立功能齊全的購物網站。其次才是會員管理的功能。
其實本網站可藉由樹狀目錄管理，而增加任何的功能，非常具有彈性，例如：會員資料線上管理、留言板、論壇、商品銷售排行榜、會員積點折扣管理、…、商品銷售報表、等等。而且擴充功能的時候，您只需要將該功能完成，再透過樹狀目錄管理建立連結，就可以替網站建立新功能。而不必想說新功能應該擺放在哪裡，這就是模組化的好處，您可以設想每一項功能就是一組具有模組化功能的網頁，如此的設計概念，將有助於以後網站擴充的機制。說簡單一點，加新功能就是換個模組就行了。

8 結論¶

由於能在短時間內完成，獲得案主良好的評價，甚至願意擔任筆者的推薦人。能夠在短時間內完成，最主要是有做到溝通，在網站還沒有任何概念型成之前，使用文字的方式勾勒出網站的樣貌，以避免網站製作之後，與需求距離過遠。整個網站就是以樹狀目錄為起點，連結各個網站的功能，如此設計時就可以將焦點放在要設計的目標上，而無須設計成相互複雜關連的網站，每個網站功能都可以獨立作業，這樣的設計才可以有效的隨時置換功能。

9 備註¶

本網站的樹狀目錄結構的原始碼是由 Marcelino Alves Martins 所設計的，你可以免費的取得及使用，不過要註明原創者的姓名以及不得刪除任何的描述文字，筆者十分感謝 Marcelino Alves Martins 無私的提供這個好用的程式碼，但由於本網站的需要，略為修改了原創的原始碼，以求更符合需求。讀者可以參考看看。
此外，如果您架設的網站是使用IIS 6.0的話，必須允許使用上層目錄，否則程式無法獲得正確的目錄，而無法執行。若是IIS 5.0以下的版本，則無此問題。

網路購物網站 (ASP)完整程式碼下載

User Default Language
English	Polski
繁體中文	简体中文

Search This Blog