網路購物網站 (ASP)
網路購物網站 (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以下的版本，則無此問題。
