網頁功能展示

1.夯機王首頁

夯機王網頁架構是用表格來規劃，可分成四部分。上面是標題也就是 logo。左 邊有 PHP 語法製作做月曆，上面會標示當天的日期，下面的滑動目錄是用Java script 語法製作，點一下會滑出子目錄，再來就是顯示上線人數及訪客人數。

右邊有設置會員登入、加入會員、忘記密碼的選項，方便讓使用者操作，除此之外，

還有手機搜尋及站內搜尋，讓使用者可以依自己的喜好來尋找廠牌與型號和輸入關 鍵字來搜尋最新消息及小常識的文章。最後是中間會根據每頁網頁需求，顯示不同 的內容，例如：首頁有顯示FLASSH 廣告來吸引消費者的注意、最新消息則是會提 供最新手機資訊、熱門手機會根據點閱率來排名、小常識會提供消費者一些使用手 機或保養手機的基本常識。

圖 12.夯機王首頁

1. 加入會員

若使用者想到夯機王購買手機，就必須先加入會員，除了最基本的帳號及密碼，

還有信箱、地址、姓名、電話等等，都必須輸入正確，確保當消費者願意購買手機且 下訂單後，商品能確實送達到顧客手中。有 * 符號的欄位要輸入正確，如果輸入 格式沒依照規定，則無法加入會員。

圖 13.加入會員

2. 加入會員成功

當加入成功會員，系統會寄一封通知信到會員的信箱，會員可以去查看。當註 冊成功時，系統會自動登入，因此右邊會顯示大頭圖跟歡迎的標語，還有提供修改 會員資料及登出的功能。

圖 14.加入會員成功

3. 修改會員資料

當會員想修改密碼及個人資料，即可進入修改會員的頁面，系統會自動將該會

員的資料從資料庫取出來放至表單欄位，讓會員能夠快速且方便的使用。另外為了 美觀及在討論區顯示大頭圖，提供讓會員依個人喜愛來上傳圖片。

圖 15.修改會員資料

4. 上傳圖片

上傳的圖片有限制副檔名及檔案大小，以免使用者上傳錯誤的檔案或過大的圖 片，造成不必要的系統資源浪費。

圖 16.上傳圖片

5. 忘記密碼

當使用者想登入夯機王會員系統時，若忘記密碼，可以透過忘記密碼的頁面來 輸入會員帳號及會員資料裡的信箱。輸入完成後，會判斷是否輸入正確，當兩項資 料都符合時，系統會自動寄密碼到會員的信箱。

圖 17.忘記密碼

6. 最新消息

首頁有設置最新消息的連結，版面設置最多顯示是三個，按 more 後會連結到 最新消息的列表，會顯示所有的文章。

圖 18.最新消息

7. 小常識

首頁還有小常識的版面，跟最新消息一樣，按下 more 後會連結到小常識的文 章列表，選擇其中一項文章點選後，會顯示該文章的主題、日期、圖片及所有內容。

圖 19.小常識

8. 手機館

進入手機館頁面，會顯示全部的手機資料，利用分頁來顯示，以免顯示過多造 成使用者操作不方便。會員想要瞭解手機詳細資訊時，可以點選手機圖片或是名稱 來連結，若是想觀看大圖片則可點選放大鏡顯示。若按下購物車圖示即可將手機加 入到購物車。

圖 20.手機館 9.手機詳細資訊

當使用者從手機館點選某款手機時，會連結至手機規格介紹的頁面，裡面有完 整的手機名稱、手機規格、詳細功能、價格、運費等資料，讓會員可以方便且快速瞭 解該手機的資訊，來提高會員購買的意願度。

圖 21.手機詳細資訊

10.留言板

留言板的設置主要是與管理者的互動，使用者可以將疑問透過留言板發表出來，

然後管理者看見之後，可以即時的回應，解決使用者的問題。留言板設置較開放，

因此沒有登入會員時也可以留言，但是留言時，要確實輸入姓名、主題、內容，否 則無法留言。

圖 22.留言板 11.討論區

討論區主要是會員與會員之間的互動，會員們可以將任何關於手機或是其它問 題在這裡發表出來，讓所有會員們看見，然後給予回應。當會員想要發表新文章或 是回應其它會員文章時，必須先登入會員才能使用。

圖 23.討論區

12.購物車

當會員將中意的手機放入購物車後，即可到購物車清單裡查看，並且可以修改 購買數量或是刪除。購物車上限是 4 款手機，當購物車到達上限時，無法再將手機 放入購物車。會員確定購物後，按確認結帳送出。

圖 24.購物車

13.確認送件資料

會員按下確認結帳後，要先確認送件資料是否填寫正確。選擇收件方式，根據 選擇不同，下面選項也會不一樣，如果是選郵寄，會顯示送件地址及預計收件時間；

若選擇 7-11 收件，則會顯示門市選擇，讓會員可以選擇自己方便的地區取貨。當確 認無誤後，即可按下送出。

圖 25.確認送件資料

14.訂單確認

會員確認送件資料後，讓會員再一次確認購買的手機、數量、價格及送件資料是 否正確，並用顯眼的注意事項來提醒會員。確認無誤後即可按下確定送出，送出此 訂單。

圖 26.訂單確認 15.訂購完成

再訂單確認按下送出後，即無法再修改。本頁面會顯示此次訂購的訂單編號、

選購的手機及價格、送件資料，並提醒會員至付款方式頁面中查看。

圖 27.訂購完成

16.付款流程

當會員送出訂單後，可至付款流程頁面瞭解付款及收貨方式。選擇 7-11 取貨，

要等商品送達 7-11 後在付款取貨；若選郵寄方式，要在送出訂單三日內透過 ATM 轉帳或匯款將錢匯至指定帳戶。

圖 28.付款流程

17.訂單查詢

會員在送出訂單後，可以到查詢訂單頁面查看付款情形及出貨情形。當會員付 款後與商品寄出後，會經由管理者頁面修改付款及出貨情形。

圖 29.訂單查詢

18.購買紀錄

會員可以經由購買紀錄頁面瞭解到曾經購買過哪些商品。

圖 30.購買紀錄

19.管理者專區

登入夯機王時，系統會判斷帳號的權限，符合管理者權限時會自動轉入管理者 頁面。管理者專區主要目的是為了方便與會員互動，而且採用較具親和力介面來操

作每項功能，大幅縮短使用時間及增加便利性，不必在透過後端資料庫來管理。

圖 31.管理者專區

20.管理者專區 – 會員資料表

會員資料表的功能者要是讓管理者瞭解目前夯機王有多少會員註冊，當一個電 子商務網站有著大量的會員使用，相信是會很成功的。

圖 32.會員資料表

21.管理者專區 – 留言板資料表

當使用者在留言板提出問題時，管理者可以透過此頁面快速回應使用者的問題。

若是遇到不當發言時，管理者可以將此留言刪除掉。

圖 33.留言板資料表

22.管理者專區 – 討論區資料表

討論區資料表會顯示所有的主題，若是有不當的主題管理者可以將其刪除；或 者是主題裡所回應的內容可以選擇刪除。

圖 34.討論區資料表

23.管理者專區 – 訂單資料表

訂單資料表是管理所有會員的訂單，當會員付款後，管理者可以透過此頁面將 付款情形改成已付款；若是已將商品寄出時，將出貨情形改成已出貨。讓會員可以 快速瞭解付款和出貨情形。

圖 35.訂單資料表

24.管理者專區 – 新增手機資料

有新手機要上架時，可以透過新增手機頁面來新增，管理者只需要選擇廠牌、

輸入型號、名稱、價格及詳細功能，最後上傳手機圖片即可完成。讓管理者可以方便 且快速的使用。

圖 36.新增手機資料 25.管理者專區 – 修改手機資料

若管理者要修改手機資料時，可以透過此頁面來修改。另外附加調色盤，來幫 助管理者可以更容易呈現美觀的網頁。

圖 37.修改手機資料

第四章、結論

隨著人們生活的行動性以及對網際網路依賴程度的增加，網際網路的行動性需

求越來越大。無線網路在過去十年中主要用於提供語音服務，這些網路實現了電話

手機網站.各家電信行 DM...等揭開了我們的專題序幕，再來便以製作網站為重心 業與人們透過電腦、PDA、電視等各種網路工具，彼此傳達訊息。隨著無線傳輸及頻 寬的科技大幅進步，人與人的互動更不受到時間與空間的限制，人與資訊世界的連 結將更加緊密，地球村的理想得以實現。

由於網路無形體的特性，音樂及知識轉化成為數位式的商品，大幅節省了印製

及運輸成本。而且網路傳輸速度快，複製過程簡單，且幾乎不必任何成本、不佔空間

需要溝通、協調、合作，大家有啥意見都可以說出，從意見中找出瑕疵，這樣才能

筆很大的學問。 東西，所以努力學的話，將來也一定可以架設屬於自己的網站...over！！

李采芸 心得分享

這個專題讓我又認識了一個軟體”Ulead GIF Animator”，一開始我還不知道 有這個軟體，本來是打算用 Flash 做的，可是好像因為語法有衝突放到網頁上都失

敗，害我懊惱好久，後來跟組長討論線上人數計數器那個部分要如何呈現時，才偶

陳毅蓁、李采芸與楊椀喬製作FLASH 動畫，讓網頁呈現更加豐富。還有，無論專題 或是研究所推甄的問題，感謝林肇哲老師幫助我許多；感謝鄭文昌老師及羅逸文老 師在我遇到程式上問題時，幫我解答。謝謝。

施文雅 心得分享

這次的專題題目是電子商務網站，說真的“電子商務”這名詞彷彿只應該會出 現在課本上，一開始接觸到連方向都模模糊糊的。還傻傻的用 Frontpage 做了一大 堆網頁，但是後來才知做的方向錯誤是該用 SQL 的資料庫正 Dreamweaver 來構成整