崑山科技大學ir.lib.ksu.edu.tw/bitstream/987654321/14206/2/專題製作.pdf · 1...

50
1 崑山科技大學 資訊工程系 專題製作報告 婚禮籌備網 A Website of PreparedWedding Ceremony 學生:謝育全、魏慈佑、蕭辰安 指導老師:黃慶祥 中華民國 100 4

Upload: others

Post on 15-Feb-2020

23 views

Category:

Documents


0 download

TRANSCRIPT

1

崑 山 科 技 大 學

資訊工程系

專題製作報告

婚禮籌備網

A Website of PreparedWedding Ceremony

學生:謝育全、魏慈佑、蕭辰安

指導老師:黃慶祥

中華民國100年4月

2

婚禮籌備網

A Website of PreparedWedding Ceremony

學生:謝育全 Student: Hsieh Yu-Chuan

學生:魏慈佑 Student: WEI-CHI-YOU

學生:蕭辰安 Student: Hsiao Chen-An

指導老師:黃慶祥 Advisor:Huang Ching-Hsiang

崑山科技大學

資訊工程系

專題報告

A Report

Submitted to Department of Information Engineering

Kun Shan University

in Partial Fulfillment of the Requirements

for the Degree of Bachelor

in

Information Engineering

June 2011

Tainan, Taiwan, Republic of China

中華民國100年4月

3

專題製作報告授權同意書

4

婚禮籌備網

學生:謝育全、魏慈佑、蕭辰安

指導老師:黃慶祥

崑山科技大學資訊工程系

摘要

以往新人在籌辦婚禮事項時,由於缺乏相關經驗,不但費時費力又浪費金錢,

最後不論是喜宴飯店、婚紗攝影、喜餅喜帖、會場佈置、結婚流程等大小瑣事,幾

乎都是一手包辦,有時東奔西跑所得到的結果並不見得會滿意,浪費了時間精力也

因壓力的關係進而影響到兩人的情緒。

婚禮企劃在國外已盛行了一段時間,新人籌辦婚事時,可委託婚禮企劃公司

協助服務,婚企公司會提供各項婚事相關的服務,除了可協助新人處理繁瑣複雜

的結婚事宜,更重要是婚企公司提供的婚禮服務費用,不一定會高於自己籌辦的

婚禮,而且新人只要面對一個服務的窗口,變可解決所有的繁雜的婚禮事項,

所以近幾年來,國內也開始興起婚企服務的風潮。

本網站藉由這個理念,我們將為新人提供豐富的婚禮相關資訊,以及真誠的

服務,協助新人達成理想中的婚禮。本網站結合相關結婚周邊資訊,使新人能省

下奔走勞累之苦,為新人提供更完整及便利周全的服務,協助新人籌劃愉快的婚

事,並留下甜蜜又難忘的回憶。

5

誌謝

經過一年半的努力,最終將我們的婚禮網站完成,因此感謝黃慶祥主任給予

我們這個點子,使我們在專題的方向變得與眾不同,從一次次的開會討論出更多

不同的點子,最後衍生出現在的完成品。

也感謝黃慶祥教授,在專題課上給我們的指導,每次的上課將進度分享與同

學並且給予新的意見。感謝本組同學的努力,共同付出與討論,才能將作品展現

出來。最後感謝來參與畢展的所有老師與教授主任們,從一次次與你們的講解中

學會如何將作品好好的介紹和分析成品,並且從中聽取你們的寶貴意見,進而學

習到更多新知。

6

目錄

中文摘要 ............................................................. 4

誌謝 ................................................................. 5

目錄 ................................................................. 6

圖目錄 ............................................................... 8

第一章緒論 .......................................................... 10

1.1 研究動機與目的 .............................................. 10

1.2 研究背景 .................................................... 10

1.3 研究方法與系統概述 .......................................... 11

1.3.1 研究方法 ............................................ 11

1.3.2 系統概述 ............................................ 12

第二章相關研究 ...................................................... 13

2.1 MYSQL簡介 ................................................... 13

2.2 MYSQL管理與應用 ............................................. 14

2.3 PHP簡介 ..................................................... 14

2.4 PHP相關應用 ................................................. 15

2.4.1 PHP應用 ............................................. 15

2.4.2 PHP安全性 ........................................... 15

2.4.3 PHP變數 ............................................. 15

2.4.4 PHP物件導向 ......................................... 16

2.4.5 PHP相關資源 ......................................... 16

2.4.6 PHP原始編碼和加速 ................................... 16

第三章網站架構 ...................................................... 17

3.1 網站架構概要 ............................................... 17

3.2 網站特色 ................................................... 18

3.3 網站架構與流程 ............................................. 18

3.3.1 網站流程 ............................................ 18

7

3.3.2 網站樹狀圖 .......................................... 19

第四章 網站實做 ..................................................... 20

4.1 虛擬主機 .................................................... 20

4.1.1 主機介紹 ............................................ 20

4.1.2 主機網域設定 ........................................ 21

4.2 前台介紹 .................................................... 22

4.2.1 最新消息 ............................................ 22

4.2.2 關於我們 ............................................ 22

4.2.3 婚禮地圖 ............................................ 23

4.2.4 會員中心 ............................................ 24

4.2.5 婚禮籌畫清單 ........................................ 25

4.3 婚禮籌劃設計 ................................................ 27

4.3.1 婚禮籌畫商品與服務 .................................. 27

4.4 後台介紹 .................................................... 32

4.2.1 消息管理 ............................................ 32

4.2.2 分類管理 ............................................ 33

4.2.3 婚禮地圖管理 ........................................ 34

4.2.4 會員管理 ............................................ 35

4.2.5 籌畫清單管理 ........................................ 36

4.5 頁面實做 .................................................... 37

4.5.1 最新消息頁面設計 .................................... 37

4.5.2 婚禮地圖頁面設計 .................................... 39

4.5.3 商品點選頁面設計 .................................... 40

4.5.4 會員中心頁面設計 .................................... 42

4.5.4 訂單確認頁面設計 .................................... 47

第五章結論 .......................................................... 48

參考文獻 ........................................................... R-1

8

圖目錄

圖 3.3.1 網站流程圖 ................................................ 18

圖 3.3.2 網站樹狀圖 ................................................ 19

圖 4.1.1 主機流量與費用介紹 ........................................ 20

圖 4.1.2 主機網域設定 .............................................. 21

圖 4.1.3 虛擬訂單確認 .............................................. 21

圖 4.2.1 關於我們頁面 .............................................. 22

圖 4.2.2 最新消息頁面 .............................................. 22

圖 4.2.3 婚禮地圖頁面 .............................................. 23

圖 4.2.4 商品點選頁面 .............................................. 23

圖 4.2.5 會員中心頁面 .............................................. 24

圖 4.2.6 會員資料修改頁面 .......................................... 25

圖 4.2.7 清單確認 .................................................. 25

圖 4.2.8 籌畫清單結帳 .............................................. 26

圖 4.2.9 結帳完成按鈕 .............................................. 26

圖 4.2.10 確認下單完成 .............................................. 27

圖 4.3.1 婚戒 ....................................................... 27

圖 4.3.2 喜帖 ....................................................... 28

圖 4.3.3 婚紗 ....................................................... 28

圖 4.3.4 婚紗攝影 ................................................... 29

圖 4.3.5 婚禮會場 ................................................... 29

圖 4.3.6 新娘秘書 ................................................... 30

圖 4.3.7 送客小禮 ................................................... 30

圖 4.3.8 婚禮音樂 ................................................... 31

圖 4.3.9 蜜月-國外 .................................................. 31

圖 4.3.10 蜜月-國內 ................................................. 32

圖 4.4.1 後台新增消息 ............................................... 32

圖 4.4.2 後台修改消息內容 ........................................... 33

圖 4.4.3 後台分類列表管理 ........................................... 33

9

圖 4.4.4 後台分類新增管理 ........................................... 34

圖 4.4.5 後台產品列表管理 ........................................... 34

圖 4.4.6 後台產品新增管理 ........................................... 35

圖 4.4.7 後台會員管理 ............................................... 35

圖 4.4.8 後台商品訂單列表 ........................................... 36

圖 4.4.9 後台商品訂單確認 ........................................... 36

10

第 一 章

緒論

1.1 研究目的與動機

因為現今的新一輩漸漸討厭煩雜且又費時費力的婚禮行程,因此可藉由

網路上的婚禮網站,幫新人完成一些繁複的工作,可以使婚禮流程更為簡單

輕鬆。結婚儀式因信仰或習俗不同而有很大的差異,因為現代人們工作較於

忙碌,都會將結婚的事宜交給婚禮事務所,而本團隊的理念,建立一個商務

型的社群網站,將婚禮事務所變得更加豐富…。

1.2 研究背景

由於現在的人工作較繁忙,而結婚的準備又特別繁雜,漸漸發展出專門

為現代人打造的婚禮顧問。從一開始實體店面的婚禮顧問,到現在的婚顧網

站,均所提供的同樣服務,現在網路的發達,使忙於工作或是怕麻煩的人們

可以上網先搜尋較滿意的婚禮顧問。

早期的婚禮網站僅提供圖片與簡介,並提供實體店面的地址與電話,給

顧客做參考或是到現場有專人服務。而近期的網站,趨近於社群網站一樣,

提供購物車、討論區論壇、相簿與影片等。

11

1.3 研究方法與系統概述

1.3.1 研究方法

目前盛行的婚企公司,都較偏重實體店面的服務,而網路上的服務大

多僅提供其一或某幾種專業與商品。因此本網站將實體店面與網路商店做

結合,以實體店面的服務為主,在以網路上的商店為輔,將兩著的優點合

而為一。實體店面主要提供以真人服務為主,像是婚紗攝影、新娘秘書等

等;而網路上以商品式的服務為主,像是婚紗戒指、花卉布置、送客小禮

物這類能以圖片顯示出樣式的商品。

而本網站以中間商的角度,為廠商與客戶提供雙向的服務;在廠商的

部分,提供一個線上帄台可以展示他們的商品與服務,各項不同種類的商

品透過本網站推展出去,順便為廠商有打廣告的效果。另外客戶的方面,

由此網站所挑選出較優良的廠商,將會展示出他們的商品與服務提供給客

戶挑選,客戶就不用到網路上一個個搜尋婚禮相關的網頁,也可輕鬆完成

婚禮繁雜挑選的過程。

以最方便的方法來為客戶提供服務,讓客戶即使在忙碌的時刻,也能

輕鬆籌劃屬於自己的完美婚禮。不僅能在籌備婚禮事項時更省時省力,甚

至讓整套婚禮流程能在有限的金額裡,達到令人讚嘆又完美的理想婚禮。

12

1.3.2 研究概述

本網站將實體店面與網路商店的優點整合,給予廠商提供一個帄台可

以為自家商品打廣告,而客戶可透過本網站尋找到各個不同的公司。客戶

可在不同的廠商中尋找到自己所想要的商品與服務,再經由我們網站從中

為廠商與客戶做聯繫與協調,這些服務將成為本專題的主要功能。

本專題提供給項功能協助客戶了解此網站的所要表達的方向,一方面

是為將以往網站所沒做到的功能呈現出來,另一方面是,因為現在新人怕

麻煩的個性,卻又想輕鬆的完成婚禮,本網站想改變現在人對於婚禮繁雜

事項的不方便,因此本專題想提供方便給客戶,又能為各廠商達到宣傳一

舉兩得的效果表現出來。

本網站提供兩個主要的功能,其一是透過像是購物商城的模式,展現

出不同網站的商品服務和商品介紹,由於是提供關於婚禮的服務,所以本

網站只會放上關於每個廠商所推出的最新服務,其中每項商品服務我們都

會將價位、商品圖片、商品資訊與服務項目詳細列出,但為了那些喜歡我

們所推薦的廠商,所推出婚禮相關的商品或服務的客戶,我們也會將廠商

的網址放上,以方便客戶搜尋。而其二主要的功能是,我們將為客戶排好

一套流程,依照我們所提供的商品服務那邊所安排的順序,將客戶所選擇

的商品服務排列下來,再由籌畫清單那邊觀看以選擇的項目,最後在確認

是否有要新增或刪除的項目後,便可送出確認,那時我們後台管理者便能

收到未完成的訂單,即可立即為客戶與廠商那方做聯繫的動作,當所有聯

繫完成後便會將訂單更改為以完成。以這種方式提供服務,是目前的網站

還上為做到的構想,由於婚禮事項的繁雜,各個網站與公司還不會將服務

項目包含那麼多,這也算是本專題的一項創新。

13

第 二 章

相關研究

2.1MySQL簡介

MySQL是一個小型關係型數據庫管理系統,開發者為瑞典MySQL AB公司。目前

MySQL被廣泛地應用在Internet上的中小型網站中。由於其體積小、速度快、

總體擁有成本低,尤其是開放源碼這一特點,許多中小型網站為了降低網站

總體擁有成本而選擇了MySQL作為網站數據庫。

MySQL的特性

使用 C和 C++編寫,並使用了多種編譯器進行測詴,保證源代碼的可移植

性 。

支持 AIX、FreeBSD、HP-UX、Linux、Mac OS、Novell Netware、OpenBSD、

OS/2 Wrap、Solaris、Windows等多種操作系統 。

為多種編程語言提供了 API。這些編程語言包括 C、C++、Eiffel、Java、

Perl、PHP、Python、Ruby和 Tcl等。

支持多線程,充分利用 CPU資源 。

優化的 SQL查詢算法,有效地提高查詢速度 。

既能夠作為一個單獨的應用程序應用在客戶端服務器網絡環境中,也能

夠作為一個庫而嵌入到其他的軟件中提供多語言支持,常見的編碼如中

文的 GB 2312、BIG5,日文的 Shift_JIS 等都可以用作數據表名和數據列

名 。

提供 TCP/IP、ODBC和 JDBC等多種數據庫連接途徑 。

提供用於管理、檢查、優化數據庫操作的管理工具 。

可以處理擁有上千萬條記錄的大型數據庫 。

14

2.2MySQL管理與應用

管理:

使用命令行工具管理MySQL數據庫(命令mysql 和mysqladmin),也可以從

MySQL的網站下載圖形管理工具 MySQL Administrator和 MySQL Query

Browser。

應用:

與其他的大型數據庫例如Oracle、DB2、SQL Server等相比,MySQL自有它

的不足之處,如規模小、功能有限(MySQL不支持視圖、事件等)等,但是

這絲毫也沒有減少它受歡迎的程度。對於一般的個人使用者和中小型企業

來說,MySQL提供的功能已經綽綽有餘,而且由於MySQL是開放源碼軟件,

因此可以大大降低總體擁有成本。

2.3 PHP簡介

PHP是一種在電腦上執行的腳本語言,對於我們專題的主要用途是在於處理

動態網頁,也包含了命令列執行介面,或者產生圖形使用者介面程式。

現在PHP的標準由PHP Group和開放原始碼社群維護。使用PHP是因為他的方

便性以及普遍性,尤其在網頁設計方面PHP對初學者來說是非常實用的軟

體,PHP的應用範圍相當廣泛,尤其是在網頁程式的開發上。PHP是用來使

用在網頁設計上,對於我們是非常有幫助的,可以透過跑動PHP來瀏覽我們

所做的網頁。而且PHP可以在多數的瀏覽器跟伺服器上面實行,以致更好又

更便利的使用方式。

15

2.4PHP相關研究

2.4.1php應用

PHP可以運用的範圍很廣,尤其是對於我們這次專題的製作在網頁上是

非常有公用性的。PHP多數在伺服器上面實行,透過與資料庫的連結可以瀏

覽我們專題網頁,另外以可以開發程式碼與使用者一起連結。PHP可以在我

們所需的作業系統還有伺服器以及需要連結到的資料庫作結合。PHP Group

提供了完整的程式原始碼,允許我們做修改、編譯、擴充來使用,可以使

得我們看著書上的內容也可以很簡易的就明白程式碼的意思。

2.4.2php安全性

與PHP有關的資料庫攻擊,其中很多的漏洞都可以透過遠端操作完成,

別人可以透過網路連線攻擊伺服器,達到盜取或毀壞資料,發送垃圾郵件

或進行分散式阻斷服務攻擊。但是隨著越來越普遍,PHP也變得越來越安全

了,所以我們才會去選擇這一個軟件去實行我們的專題製作,雖然會怕資

料盜取還有遺失資料,但是現在越來越安全的PHP是可以讓我們去相信他。

2.4.3 php變數

PHP中,變數以「$」符號接變數名稱來表示。變數的名稱有區分大小

寫。有效的變數名稱以字母或底線開頭,後面接任意數目的字母、數字或

底線,PHP也支援使用多位元組文字作為變數名稱。

我們在打程式碼時會常使用到echo(印出)此函數,會有人說為什麼不

用print呢,因為echo在傳輸指令上會比使用print快,可是其實如果程式

不是寫的很大,在瀏覽器上沒有很大的分別。

16

2.4.4php物件導向

PHP是一個具有物件導向的軟體,以前是沒有但是現在有著完善的物件

導向體系,物件導向可以使得我們在製作專題的時候把它當作是一個實際

的物體來使用,也可以讓我們這組在製作專題的時候可以更了解使用物件

導向的好處來進行開發。

2.4.5php相關資源

函式庫:多樣化的函數是PHP主要的特點之一,這些開放程式碼的函數

提供了各種不同的功能,例如檔案處理、FTP和字串處理。這些函數的使用

方法和C語言相近,這也是PHP廣為流行的原因之一。像檔案處理還有字串

處理這就是很大的加分功能。PHP也提供了很多延伸函式庫(extension),

像是各種資料庫連接函數、資料壓縮函數或者圖形處理。有些延伸函式庫

需要從別的地方來取得。只是這些相關資源我們這組比較少去用到,可能

我們還沒有用到這個地區。

2.4.6php原始編碼和加速

PHP的程式碼是可以直接讀取的,就算是放到伺服器也是一樣的,可是

這樣雖然對於我們有了更多的方便性,但是相對的安全危機還有效能下降

都是會產生的另一個問題,透過PHP的編碼器可以保護我們的PHP原始碼不

被讀取,也可以提昇執行的效能。我們將程式碼編譯成位元碼,再透過伺

服器安裝對應的程式來執行PHP腳本。除了透過編碼器加速之外,PHP還可

以透過動態的快取機制來提昇速度。

17

第 三 章

網站架構

3.1網站架構概要

「婚禮籌劃網站」這個網站大致上可分為五大區塊,分別為最新消息、關於

我們、婚禮地圖、會員中心和婚禮籌畫清單。而主要功能為婚禮地圖與婚禮

籌畫清單為主。

婚禮地圖內包含,婚戒、喜帖、婚紗、婚禮攝影、婚禮會場、新娘秘書、

送客小禮、婚禮音樂與蜜月旅行。婚禮籌畫清單則是將在婚禮地圖裡選擇好

的項目,以清單的方式顯系出來,並且將每個項目的價錢列出後,最後會出

現一個總金額的部分。

網站主要功能如下:

最新消息:讓顧客掌握最快速的訊息資訊。

關於我們:介紹本網站的品牌與服務內容,使客戶能更加了解我們。

婚禮地圖:讓顧客挑選合適自己的婚禮程序與需求。

會員中心:可以隨時隨地變動個人資料系統。

婚禮籌畫清單:可以瀏覽以選擇的項目,並將每項金額加總後顯示出總金

額。

18

3.2網站特色

本網站以中間介紹服務的理念,為各家廠商與客戶做協調服務,並提供給

兩邊不一樣的服務。站在廠商的立場,透過本網站的帄台,可以提供一個

推銷商品的管道,只要收點費用便可享受更多的服務。在客戶方面,我們

提供一整套婚禮規劃的服務,以連續的流程從喜帖到蜜月規畫,並且提供

瀏覽與修改的功能,使客戶可確認所選擇的內容,最後在進行下單。在籌

劃清單的部分,將選擇好的內容顯示出來,並依照系統安排好的流程,從

上到下按照過程的排出客戶所想要的範圍,最後底下顯示出總金額。

3.3網站流程與架構

3.3.1 網站流程

圖3.3.1網站流程圖

前台客戶端:

1. 前台使用者:註冊會員-登入會員-會員資料填寫-產品目錄-選購產品加

入購物車-確認購物清單-付款

2. 後台管理者:新增產品、最新消息、確認顧客資料-確認顧客清單-顧客

產品是否已完成

19

3.3.2 網站樹狀圖

圖3.3.1網站樹狀圖

最新消息 消息發布

品牌故事 關於我們

婚禮地圖

婚禮籌畫清單

會員中心

婚戒

婚禮音樂

新娘秘書

國外蜜月

國內蜜月

婚禮會場

修改會員資料

會員註冊

登入會員

送客小禮

婚紗攝影

喜帖

婚紗

商品詳細資料

已加入購物車

數量確認

商品服務清單 訂購完成 資料確認

20

第 四 章

網站實做

4.1虛擬主機

4.1.1 主機介紹

因為我們網站需要用到虛擬主機,所以我們上網去尋找合適我們網站的主

機,所以找到了這一間艾堤,他有支援我們要的PHP還有資料庫,我們選擇的是米

你的,在價錢上可以比較能負擔,我們也有看別間的只是說這間比較便宜,又符

合我們的需求性,所以才會選擇他。一開始進來選擇你想要的需求購買。

4.1.1 主機流量與費用介紹

4.1.2 主機網域設定

接著要去填寫你的網域名稱還有資料

21

4.1.2 主機網域設定

然後列印下來付款單去7-11付款,我們中間本來要租的時候有個小錯誤,要

記得確定對方是否有收到你的款項,不然可能會消失喔。最後他會寄信給你確認

開通。另外,他有限制流量,其實使用虛擬主機並不是沒有好處,他可以把虛擬

伺服器互相連結讓每個虛擬伺服器能使用全部的功能這樣相對來說也減少我們的

麻煩。

4.1.3虛擬主機訂單確認

最後會收到虛擬主機的訂單,上面會註明我們所使用的訂單相關資訊,收到

以後這個帳號就會開通。

22

4.2 前台介紹

4.2.1最新消息

圖4.2.1關於我們頁面

介紹網站的命名原由,並介紹我們服務理念,使客戶能對本網站有更詳細的了解。

4.2.2 關於我們

圖4.2.2最新消息頁面

發布一些簡單的訊息內容,因為一個網站的籌備總是有著最新資訊又或者最新的

內容,可以讓別人明白說我們有的最新的物品或者優惠資訊內容。

23

4.2.3 婚禮地圖

圖4.3婚禮地圖頁面

圖4.2.4 商品點選頁面

1. 由於我們做的是於中間商的部分,我們提供給廠商一個管道可以做為商品銷售

的帄台,也提供給客戶端一個籌畫管道,方便客戶端瀏覽觀看。在這個帄台上

可以看到不同廠商的優惠專案,而在客戶的方面,將選擇好的方案與流程,由

本網站提供籌劃服務。再來就是我們專題網站的主要功能,就是婚禮地圖,這

裡可以讓使用者去選擇他們符合的流程,還有一些婚禮會用到的必備物品,這

邊我們簡單的讓使用者可以了解到什麼是自己所需要的才不會盲目的挑選。

24

2. 已安排一套流程,客戶端可依照這個順序挑選所需的服務。可以挑選他們想要

的流程,這裡我們沒有把位子做死,因為一方面可以讓使用者自由的去觀看另

一方面也可以別都只有一種流程,這樣感覺如果挑選錯了就不能回顧去挑選。

3. 提供不同的廠身與專案服務,使客戶端有多重選擇。這邊就是我們的婚禮規劃,

有多種方案可以讓使用者明白到本網站不是只有很古板的單一選擇性,可以創

造不同的多元選擇是現在社會趨勢,這樣才有辦法在職業競爭中生存下來,所

以多重性選擇是我們主打的一個區塊。

4.2.4 會員中心

圖4.2.5 會員中心頁面

1. 進入網站之後,首先先點選會員專區,加入會員以後便可以使用其他功能。瀏

覽商品的部分,不需要登入會員也能瀏覽,只是購買這個動作是無法進行的。

2. 點選會員中心後,進入註冊會員的頁面,填註冊資料。在此加入會員,填選

所需要的資料後,會確認資料是否正確,才能讓使用者去加入,使用網站功能。

3. 登入會員系統若輸入錯誤的帳號密碼,登入會員後可在此修改會員資料。

25

圖4.2.6 會員資料修改頁面

4. 登入之後一定要先填選個人資料,不然是沒辦法再最後要結帳的時候去結算,

所以個人資料一定要正確無誤,因為之後確認方案會跟本人聯繫,所以務必會

請他人正確填寫。註冊完會員後,再回到會員中心,假使管理系統已通過帳號

申辦後,就可回到這裡更改會員資料。

4.2.5 婚禮籌畫清單

圖4.2.7清單確認

1.當客戶選擇完以後,可以點選婚事籌劃清單來觀看以選擇好的婚禮流程。一切

26

的購買都會跑到婚禮籌畫清單裡面,所以點選完之後要不用來這邊觀看自己選

擇的物品項目,進行再一次的確認。

圖4.2.8 籌畫清單結帳

2.如果挑選的流程還有商品項目都已經確定了之後連流程都OK,那我們就可以在

這邊點選結帳去,讓後台管理者可以明白的知道,有新的CASE,才可以開始著

手去處理使用者的訂單,以更有效率的方式讓使用者可以提早完成。

圖4.2.9 結帳完成按鈕

27

3.點選結帳去之後,這邊有一開始所說過的一定得個人資料都填寫完畢才可以

點選完成,不然是不給點選的因為一定要確認使用者資料,這才可以方便聯絡

也可以保護使用者的權利。

圖4.2.10 確認下單完成

4.如果都已經完成之後會跳出一個視窗,就是訂購完成,會再跟使用者約時間。

4.3 婚禮籌畫設計

4.3.1婚禮籌畫商品與服務

圖4.3.1婚戒

1. 選取婚戒的頁面,由廠商提供目錄,再經由我們列出商品的詳細資料、規格、

等等;以方便新人選購。

客戶方面:將各廠商提供的商品圖片放上,並將每項商品的戒圍號碼放上,以

方便客戶挑選。

28

廠商方面:告知廠商有哪些戒圍size最多人戴,協調是否要增加該商品數

量,另外將詢問度較高的樣式告知廠商,以方便廠商了解市場走向。

圖4.3.2喜帖

2. 喜帖樣式選擇,讓新人能夠在家輕鬆選取樣式以及填寫寄件人。

客戶方面:將替課會找尋許多不同風格的喜帖公司,可以從傳統喜帖到特殊自

製,將滿足客戶不同的需求,另外,內容方面可以由我們網站提供,

也可以由客戶提出不一樣的版本。

廠商方面:如客戶有特殊要求,替客戶把想法告訴廠商,在替廠商將意見告知

給客戶知道。

圖4.3.3婚紗

3. 婚紗的選擇,由我們跟廠商溝通時間商量時間進行詴穿及修改。

29

客戶方面:放上不同間廠商的婚紗,價位與精緻度會有我們網站做為挑選後,

才會將廠商提供的商品擺上圖片與相關資料,顏色與風格樣是還可

以做協調。

廠商方面:由本網站出面協調詴穿與見面的時間,如客戶不滿意將能由我們在

進行協調動作。

圖4.3.4婚紗攝影

4. 婚紗攝影:讓新人選取攝影的地點,以及選取攝影師(會列出攝影師近期的品)。

客戶方面:我們會將拍照的形式,包套內容詳細問清楚後,在將資訊放上網路

供人參考,並調整廠商與客戶兩方時間,約時間做見面的動作。

廠商方面:將客戶的意見告知,並相約時間讓兩方見面討論。

圖4.3.5 婚禮會場

30

5. 婚禮會場:選取飯店以及布置的方式;滿足新人的種需求。

客戶方面:提供飯店、酒店、教堂或一些氣氛較佳的場地,詳細資料中會將地

點與喜宴餐點介紹詳細。

廠商方面:與飯店或酒店等會場接洽,代替飯店酒店來與客戶作時間地點的協

調。

圖4.3.6 新娘秘書

6. 新娘秘書:會列出廠商的近期作品以方便新人參考。

客戶方面:將美容師的經歷、作品及服務介紹詳細

廠商方面:將網路上評價較好得新娘秘書做

圖4.3.7 送客小品

7. 送客小品:宴客後給新人送客的小禮物。

31

圖4.3.8婚禮音樂

8. 婚禮音樂:宴客會場的表演音樂在這選取(會有一小段的詴聽)

客戶方面:安排客戶詴聽會場音樂的風格,依照所需在協助與廠商商量。

廠商方面:與廠商協調時間,協助廠商與客戶約時間到公司詴聽會場音樂。

圖4.3.9 蜜月-國外

9. 蜜月旅行-國外:幫新人安排一整套在國外的蜜月旅行(會依季節的變化提出當

季最適合出遊的地點)。

32

圖4.3.10 蜜月-國內

10. 蜜月旅行-國內:幫新人安排一整套在國內的蜜月旅行(會依季節的變化提出當

季最適合出遊的地點)。

客戶方面:配合旅遊公司的行程,將適合蜜月的行程安排出來,並在本網站的

網頁上分出國內與國外的旅遊行程,供新人參考。

廠商方面:將彙整客戶的意見,並與旅遊公司商量開出客戶所要蜜月行程。

4.4 後台介紹

4.4.1 消息管理

圖4.4.1 後台新增消息

1. 點選消息管理頁面會進入列表

33

2. 將最新的消息發布的列表,方便後台管理與刪除。

3. 點選新增新聞的按鈕,會跳進另一個頁面做內容新增的動作。

圖4.4.2 後台修改消息內容

1. 如要修改消息內容,點選該消息的標題便能進入更改,隨著更改時間不

同,日期也會以該時間為主。

2. 修改好內容後選擇送出,在前台與後台的頁面將會出現修改後的內容。

4.4.2 分類管理

圖4.4.3 後台分類列表管理

觀看與刪除分類的資訊,點選分站名稱便能進入修改分類資訊的名稱與內容。

34

圖4.4.4 後台分類新增管理

各商品分類新增,將不同的商品標商名稱,以方便客戶端搜尋商品。

4.4.3 婚禮地圖管理

圖4.4.5 後台產品列表管理

35

圖4.4.6 後台產品新增管理

點選新增可以進入增加新的產品資料與商品圖片,下面做了廠商的網頁連結,可

以點選觀看各廠商的各種資訊。

4.4.4 會員管理

圖4.4.7 後台會員管理

1. 會員名單新建在會員管理列表,點選會員管理變能看到所有人員資料。

2. 觀看與刪除會員資料內容,並且確認是否啟用會員帳號。

36

4.4.5 籌畫清單管理

圖4.4.8 後台商品訂單列表

1.點入籌劃清單可觀看已下訂單的會員,下單時間與訂單處理的狀況。

2.可以已將以完成或無效的訂單做刪除或觀看的動作。

圖4.4.9 後台訂單確認

1.畫面出現一個列表是已選擇項目,上面會出現名稱、訂單等。

2.確認個人資料與總金額後,會有3個選擇,完成、未處理與無效,依照訂

單處理的順序選擇。

3. 將該資料確認過後便可以按下完成紐。

37

4.5頁面實做

4.5.1最新消息頁面設計

<?phprequire_once("../../../_Function/db.php"); ?>

<?phprequire_once("../../../_Function/webconfig.php"); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<?php

$id = $_GET['id'];

if (!$db->open()) {

die ($db->error());}

//-- 加入查詢條件------------------//系統組態

$strWhere="";

$strWhere=MakeWhere($strWhere,"AND","news_id","=","$id","","N","","");

$strWhere=MakeWhereEnd($strWhere);

----------------第一資料集SQL---------------------*//連結資料

$strSql="";

$strSql = $strSql."select *"; //

$strSql = $strSql." from news"; //

$strSql = $strSql.$strWhere;

if (!$db->query($strSql)) {

die ($db->error());}

$data = $db->fetchArray();

$title = $data['news_title']; //標題內容

$date = $data['news_date']; //資料對照

38

$text = $data['news_text'];

$db->close();

?>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title><?php echo $webtitle;?></title>

<link href="../_Css/layout.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="wrapper">//分割網頁

<?phpinclude_once("../_Include/header.php"); ?>

<div id="container">//分割區塊

<div id="page">

<h2>最新消息<span>內容</span></h2>

<dl>

<dt class="news"> //類別

<?php echo $title; ?>

<em><?php echo $date; ?></em> //呈現到網頁上

<dd class="news"><?php echo $text;?></dd>

</dt>

</dl>

<p class="back" align="right"><a href="javascript:history.back()">回上

頁</a></p> //回到前端

</div><!------page end------>

<?phpinclude_once("../_Include/footer.php");?>

</div><!-----container end---->

39

</div><!------wrapper end---->

</body>

4.5.2婚禮地圖頁面設計

if (!$db->query($strSql2)) {

die ($db->error());}

$pro_num = $db->numRows();

$pro_text="";

for ($j=0; $j < $pro_num; $j++){

$pro_data[$j]=$db->fetchArray();

$title=$pro_data[$j]['class_title'];

$desc=$pro_data[$j]['class_desc'];

$pro_id=$pro_data[$j]['pro_id'];

$pro_name=$pro_data[$j]['pro_name'];//名稱

$pro_image=$pro_data[$j]['pro_image'];//圖片檔

$pro_price=$pro_data[$j]['pro_price'];//資料

if(isset($pro_id)){

$pro_text=$pro_text."<li>";

$pro_text=$pro_text."<h3><a href=Product_detail.php?id=$pro_id>";

$pro_text=$pro_text."<imgsrc='Image/$pro_image' alt='$pro_name' width='130' height='187' />";

$pro_text=$pro_text."</a><span>".$pro_name."</span></h3>";

$pro_text=$pro_text."<dl><dt>售價</dt><dd>".$pro_price."元</dd></dl>";

$pro_text=$pro_text."</li>";}};

if ($pro_text==""){

$pro_text="暫無資料!";}

$db->close();

40

?>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title><?php echo $webtitle;?></title>

<link href="../_Css/layout.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="wrapper">

<?phpinclude_once("../_Include/header.php"); ?>

<div id="container">

<div id="main">

<?phpinclude_once("../_Include/left.php"); ?>

<h1><?php echo $title; ?></h1>

<p><?php echo $desc; ?></p>

<div id="productlist">

<h2>商品瀏覽</h2>

<ul>

<?php echo $pro_text; ?>

我們用到很大量的test表單指令,因為每個區塊都要做分割顯示出來,所以我們

每個段落都要去做區別,名稱、資料、圖片,的表格都要對其版型來排序。

4.5.3商品點選頁面設計

<div id="container">

<div id="page">

<table class="img">

41

<td class="show">

<imgsrc="Image/<?=$image?>" alt="婚紗" name="婚紗" width="242px" height="248px" />

</td>

<td class="info">

<form action="../Order/addItem.php" method="post">

<h4>商品詳細資料</h4>

<dl>

<dt>商品名稱:</dt>

<dd><?=$name;?></dd> //商品名

<dt>商品價格:</dt>

<dd>$<?=$price;?></dd> //價格

<dt>商品規格:</dt>

<dd><?=$info;?></dd> //規格

<dt>商品敘述:</dt>

<dd><?=$desc;?></dd>//敘述

<dt>供應商連結:</dt>

<dd><?=$link;?></dd>//連結

</dl>

數量:<select name="pro_num">//數量選擇select(拉軸變數)

<option>1</option>//option(對應值)

<option>2</option>

<option>3</option>

<option>4</option>

<option>5</option> </select> <input type ="hidden" name="pro_id" value=<?php echo $pro_id; ?>>

<input name="submit" type="submit" value="購買"/>

</form>

</td>

42

這裡我們有用到form的指令如果要讓form裡的程式碼一起送出的話,在後面我們

要加上submit函式,按下去才能使form裡的資料一起動作。

4.5.4會員中心頁面設計

利用直接下SQL語法,減少錯誤的發生。

//-- 加入查詢條件---------------------------------------

$strWhere="";

$strWhere=MakeWhere($strWhere,"AND","mem_id","=","$mem_id","","N","","

");

$strWhere=MakeWhere($strWhere,"AND","stat","=","1","","N","","");

$strWhere=MakeWhereEnd($strWhere);

----------第一資料集Sql查詢--------*//呼叫資料庫端

$strSql = "";

$strSql .= "select *";

$strSql .= " from member ";

$strSql .= $strWhere;

//echo $strSql;

if (!$db->query($strSql)) {

die ($db->error());}

$mem = $db->fetchObject();

//$mem_id = $mem->mem_id;//取得ID欄位

$mem_acc = $mem->mem_acc;

$mem_name = $mem->mem_name;

$mem_email = $mem->mem_email;

$mem_tel = $mem->mem_tel;

43

$mem_addr = $mem->mem_addr;

if ($_POST['cmd'] == 'set'){ //假如帳號密碼是正確

$name = $_POST['mem_name'];

$newpwd = $_POST['newpwd'];

$chkpwd = $_POST['checkpwd'];

$email = $_POST['email'];

$addr = $_POST['add'];

$tel = $_POST['tel'];

}*/

$db->freeResult(); /

//-- 加入查詢條件--

$strWhere="";

$strWhere=MakeWhere($strWhere,"AND","mem_id","=","$mem_id","","N","","

");

$strWhere=MakeWhere($strWhere,"AND","stat","=","1","","N","","");

$strWhere=MakeWhereEnd($strWhere);

----------------第一資料集Sql查詢-----------------//資料庫宣告

$strSql = "";

$strSql .= "select *";

$strSql .= " from member ";

$strSql .= $strWhere;

//-------------------------------

if (!$db->query($strSql)) {

die ($db->error());}

$chk = $db->fetchObject();

$chkdata = $chk->mem_id;

44

if (isset($chkdata)){

$ = array("mem_name" => "'$name'", "mem_email" => "'$email'", "mem_tel"

=> "'$tel'", "mem_addr" => "'$addr'");

$db->update($memupt, 'member', $strWhere);//更新資料}

/*else {

$warn = "密碼錯誤!";}*/

$strMeta = "<meta http-equiv=\"Content-Type\" content=\"text/html;

charset=utf-8\" />";

echo $strMeta . //更新資料

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title><?php echo $webtitle;?></title>

<link href="../_Css/layout.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="wrapper"> //分割區塊

<?phpinclude_once("../_Include/header.php"); ?>

<div id="container">

<div id="page">

<div class="member"> //類別會員

<h2 align="center">會員資料修改</h2> //對齊區塊

<form id="form1" name="form1" method="post" action="Modify.php"

onsubmit="return(field_chk(this));">

45

<table width="40%" align="center">

<tr>

<td width="25%" align="right">帳號: </td> //長與寬設定

<td align="left" width="75%"><?=$mem_acc?></td>

</tr>

<tr>

<td align="right">姓名:</td>

<td align="left"><label for="mem_name"></label>

<input name="mem_name" type="text" id="mem_name" maxlength="10"

value=<?=$mem_name?>></td> // sql名稱呼應

<tr>

<td align="right">新密碼:</td>

<td align="left"><label for="newpwd"></label>

<input name="newpwd" type="password" id="newpwd" value="" maxlength="20"

></td>

<td><?=$warn?></td>

</tr>

<tr>

<td align="right">確認新密碼:</td>

<td align="left"><label for="checkpwd"></label>

<input type="password" name="checkpwd" value="" maxlength="20"

id="checkpwd" ></td>

</tr>

<tr>

<td align="right">E-Mail:</td>

<td align="left"><label for="email"></label>

46

<input name="email" type="text" id="email" maxlength="50"

value=<?=$mem_email?>></td>

</tr>

<tr>

<td align="right">地址:</td>

<td align="left"><label for="add"></label>

<input name="add" type="text" id="add" maxlength="50"

value=<?=$mem_addr?>></td>

</tr>

<tr>

<td align="right">電話:</td>

<td align="left"><label for="tel"></label>

<input name="tel" type="text" id="tel" maxlength="10"

value=<?=$mem_tel?>></td>

</tr>

<tr>

<tdcolspan="2"align="center" style="text-align=center">

<inuttype="hidden"name="mem_id"value="<?=$mem_id;?>" />

<input type="hidden" name="cmd" value="set" />

<input name="btn1" type="submit" value="送出" />

<input name="btn2" type="button" value=" 取 消 "

onclick="window.history.back();"/></td>

</tr>

</table>

<?=$warn?>

/form>

47

</div><!------member end------>

</div><!------page end------>

<?phpinclude_once("../_Include/footer.php");?>

</div><!-----container end---->//

</div><!------wrapper end---->//

4.5.5訂單確認頁面設計

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title><?php echo $webtitle;?></title>

<link href="../_Css/layout.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="wrapper">

<?phpinclude_once("../_Include/header.php"); ?>

<div id="container">

<div id="page">

<h2>購物流程<em>完成訂單</em></h2>

<div id="order_list">

<form method="post" action="Orderdone.php">//發送表單

<table width="100%" height="136" border="1">

<tr class="title">

<td width="20%" height="23" class="item">商品圖</td>

<td width="25%" class="name">商品名稱</td>

<td width="17%" class="num">數量</td>

<td width="52%" class="total">單價</td>

</tr>

<?php echo $text; ?>//表格

48

第 五 章

結論

目前在網路上面看到的,不外乎都屬於單一或某幾項服務的婚企服務,舉例來

說像是婚紗的網站,頂多會在加上新娘秘書或是婚紗攝影等專業,並不會出現花

卉布置或會場布置等等項目,由於他們只專門於其一或多項相關服務,所以客戶

無法在一間婚企公司就搞定所有結婚事項,必頇要跑很多間才能安排好所有事情,

甚至每一項服務也都必頇跑好幾間不同公司做比較,所以才會有人覺得結婚是一

件非常麻煩的事情。

因此,所提供的服務將會排除這些困難與麻煩,客戶可以在我們網站找尋到所

有婚禮相關的網站,並每間廠商所提供的商品放上網站上供人挑選,這樣客戶就

不用為了客戶東奔西跑,省了時間也省了精力更省下多餘的金錢,有些人會不清

楚服務內容或是服務費用而傷腦筋,本網站將這些資訊詳細的紀錄,也會將每項

金額標得很清楚,所以客戶不用擔心廠商說法前後不一的情況。

有些小廠商並沒有實體店面,靠的是網路商電的買賣,有的是靠無名或部落格

的經營,關於這點,本網站可為這些小廠商提供一個推銷的機會,由我們這方提

供一個網頁帄台,廠商可以透過我們這個網站做宣傳的效果,另外一方面,我們

網站也協助廠商與客戶做接洽的動作,再將客戶的意見統整給廠商,進一步可為

廠商統整市場上的走向,並提供許多相關消息。

目前網站偏向籌劃的方向,未來可以加入地圖導向,與影像瀏覽婚禮籌劃項目。

地圖導覽可使客戶方便找到婚禮會場,並提供給賓客做為線上地圖的導覽,使賓

客在沒把喜帖帶身上的情況下,或是弄丟喜帖甚至忘記地點的賓客可以方便找到

49

會場。在功能上可以做成搜尋新郎新娘的姓名,或是搜尋會場名稱坐回關鍵索引,

搜尋到後會顯現出會場地址或是該會場總共有幾組婚禮要舉辦,提供賓客做為參

考。

影像瀏覽的部分,將所選定好的婚禮規劃內容,像動畫般呈現出來,做成像

影片似的形式,使得婚禮規劃的動向能更清楚的掌握,不僅看起來會讓人更清楚

的理解,服務人員也能在講解的過程能更加清楚的明白客戶的需求。

R-1

參 考 文 獻

1. 【Dreamweaver MX for PHP & MySQL 資料庫網頁】== 教學講義 ==

2.跟我學 PHP & MySQL 作者:恩光技術團隊

3.PHP & MySQL 架站實務 作者:吳佳諺工作室/編

4.優仕網http://share.youthwant.com.tw/find2u/kw1642.htm

5.東南亞旅遊

http://www.settour.com.tw/eWeb/other/honeytravel20080502/index.asp

6.永恆婚禮顧問網http://www.foreverwed.com.tw/band.htm

7.艾麗佳人婚顧網http://www.ellyswedding.com/

8.喬葳創意喜帖

http://www.joe-way.com.tw/product4.php?caid=14&theme=%BDv%B1a%B3%DF%A9

%AB