修平科技大學 -...

42
修平科技大學 資訊管理系 大台中美食行動網站設計 指導老師:柯朝輝 組長:BF101008 方煒捷 組員:BF101012 孫聖彥 BF101902 陳健達 BF101901 龔信全 BF101009 簡暐宸 中 華 民 國一 O 五 年 五 月

Upload: others

Post on 05-Sep-2019

8 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

修平科技大學

資訊管理系

大台中美食行動網站設計

指導老師:柯朝輝

組長:BF101008 方煒捷

組員:BF101012 孫聖彥

BF101902 陳健達

BF101901 龔信全

BF101009 簡暐宸

中 華 民 國一 O 五 年 五 月

Page 2: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

大台中美食行動網站設計

方煒捷孫聖彥陳健達

龔信全簡暐宸

指導老師

柯朝輝

104

Page 3: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

修平科技大學

資訊管理系

專題實務報告審定書

本 系 日 間 部 四 技 部

組長:BF101008 方煒捷

組員:BF101012 孫聖彥

BF101902 陳健達

BF101901 龔信全

BF101009 簡暐宸

大台中美食行動網站設計

經 本 委 員 會 評 審 通 過 。

口試委員:

_______

_______ 指導老師:

_______

中 華 民 國一 O 五 年 五 月

Page 4: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

I

摘要

本專題以大台中美食行動網站設計為主,因應現在社會外食族

居多,上班族或外食族午晚餐常常要思考吃甚麼的窘境,又或者是外

地來到大台中地區旅遊的遊客,來到自己不熟悉的地方,不想錯過當

地美食或者名產,於是我們想要設計出有關介紹大台中美食的網頁供

外食族及遊客或者其他使用者使用。

本專題蒐集現在當紅的部落客的美食介紹文章,匯集了千筆台中美食

資訊,將這些資訊彙整成資料庫,以網頁方式呈現給使用者查詢與觀

看,提供台中美食地區情報及店家相關介紹。[1-3]

Page 5: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

2

目錄 第一章、前言 ......................................................................................... 6

1-1 簡介 ........................................................................................... 6

1-2 研究動機與目的 ....................................................................... 7

1-2-1 專題文書架構 .............................................................. 8

1-3軟、硬體需求 ........................................................................... 9

第二章、文獻探討 ............................................................................... 11

2-1 行動網頁探討 ........................................................................ 11

2-1-1 智慧型手機普及率逐年上升..................................... 11

2-1-2響應式網頁設計介紹 ................................................. 11

2-1-3響應式網站設計分析 ................................................. 12

2-2 行動網頁裝置 ........................................................................ 13

2-2-1 使用者體驗與使用者介面設計很重要 ..................... 13

2-3 軟體應用簡介 ........................................................................ 13

2-3-1 Adobe Dreamweaver .................................................. 13

2-3-2 jQuery mobile .......................................................... 13

2-3-4 Apache Web Server .................................................. 14

2-3-5PHP ............................................................................... 15

2-3-6 MySQL.......................................................................... 16

Page 6: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

3

2-4 安裝教學 ............................................................................... 17

2-4-1 XAMPP 安裝教學 ........................................................ 17

2-5 Apache 設定教學 ................................................................ 22

2-5-1如何設定 Apache Web Server ................................... 22

第三章、系統功能 ............................................................................... 25

3-1 工作進度 ................................................................................ 25

3-1-1 工作進度之甘特圖 ..................................................... 25

3-1-2 工作分配表 .................................................................. 26

3-2 系統功能架構圖 ..................................................................... 27

3-3-1 店家資料表 ................................................................. 29

3-3-2 介紹資料表 .................................................................. 29

第四章、成果展示 ............................................................................... 31

第五章、結論 ....................................................................................... 36

5-1 研究結論 ................................................................................ 36

5-2 未來展望 ................................................................................ 36

誌謝 ....................................................................................................... 37

參考文獻 ............................................................................................... 38

Page 7: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

4

圖目錄

圖 2-1………………………………………………………………16

圖 2-2 ………………………………………………………………17

圖 2-3 ………………………………………………………………17

圖 2-4 ………………………………………………………………18

圖 2-5 ………………………………………………………………18

圖 2-6 ………………………………………………………………19

圖 2-7 ………………………………………………………………19

圖 2-8 ………………………………………………………………21

圖 2-9 ………………………………………………………………21

圖 2-10………………………………………………………………22

圖 3-1 ………………………………………………………………27

圖 3-2 ………………………………………………………………28

圖 3-3 ………………………………………………………………31

圖 3-4 ………………………………………………………………32

圖 3-5 ………………………………………………………………33

圖 3-6………………………………………………………………34

圖 3-7………………………………………………………………35

Page 8: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

5

表目錄 表 1-1………………………………………………………………9

表 1-2………………………………………………………………9

表 3-1………………………………………………………………25

表 3-2………………………………………………………………26

表 3-3………………………………………………………………29

表 3-4………………………………………………………………29

Page 9: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

6

第一章、前言

1-1 簡介

行動裝置網頁又稱響應式網頁(Responsive Web Design),因應目

前智慧型手機越來越大眾化,在現今社會幾乎人手一機,為了講求便

利性,已經可以在手機上瀏覽各種網站,而行動裝置網頁就是讓手機

在瀏覽網站時更加便利,電腦的螢幕解析度與手機及平板大不同,而

行動裝置網頁大大的改善了手機瀏覽一般網頁的便利性 。

「大台中美食行動網頁設計」能在智慧型手機、平板電腦及家用

電腦上做查詢使用,我們以 jQuery Mobile來做為主要的開發工具,

並使用 adobe dreamweaver cs6來製作網頁 APP的建立與規劃,而我

們蒐集了各大知名部落客的美食評論,來當作這次專題設計的主要內

容,以 Excel來彙整所有的資料,再利用 XAMPP建立資料庫,設計的

內容以大台中美食介紹為主題,使用者在使用本系統時,能夠快速地

查詢附近美食及價位,讓使用者能快速地尋找自己的需求,同時我們

也彙整了店家的聯絡方式及地址,讓使用者能快速地了解店家的所在

位置,當然,為了增加其便利性,我們還提供了有無停車位的資訊供

使用者參考。[1-3]

Page 10: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

7

1-2 研究動機與目的

一般在網站上查詢到的美食系統,大多只有美食名稱及所在地。

所以我們希望大家在使用查詢美食時,不僅可以容易又清楚的找尋到

美食小吃,不用煩惱今天到底要吃什麼的困擾外,提供菜單給大家比

較價位,更可以解決價位上的問題。也不用怕價位太昂貴,因為我們

會呈現出在地的人氣美食,這些店家也是匯集知名部落客[1]的文章內

容,不會令饕客失望的美食。

由於大多在手機上會使用 APP 來查詢美食,但我們希望同時能在

電腦,平板,以及手機上能夠同時使用及查詢更多資訊,而以大台中美

食行動網頁設計作為主題,讓使用者能更加快速的查詢到所需的資訊

我們以 adobe dreamweaver cs6 來做為主要的開發工具,並且在

Windows 平台上實作一個行動網站,作為我們這次主要的專題報告。

Page 11: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

8

1-2-1 專題文書架構

本報告分四章節,分述如下

第一章:說明研究動機及其目的,與本文撰寫的架構及軟硬體需

求。

第二章:為文獻探討的部份,介紹智慧型手機及行動網站的必要及

安裝流程。

第三章:工作分配及進度,與系統功能介紹。

第四章:結論、未來方向。

參考文獻:在研究本書面報告及製作專題時,所參考的資料及書

籍。

Page 12: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

9

1-3軟、硬體需求

本專題系統採用的硬體需求,分述如表 1-1所示;以及在製作專題

過程所使用之軟體,如表 1-2所示。

表 1-1 基本配備

處理器(CPU) intel pentium G3260

記憶體(RAM) 4G

硬碟(HDD) 500GB

顯示卡(VGA) Geforce GT210

周邊配備 滑鼠,鍵盤

螢幕 19吋

表 1-2使用配備

處理器(CPU) Intel Core i5 4460

記憶體(RAM) 8G

硬碟(HDD) 1TB

顯示卡(VGA) Geforce GTX 750 Ti

周邊配備 滑鼠,鍵盤

螢幕 24吋

Page 13: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

10

表 1-3 軟體需求

作業系統 Windows XP/Windows 7

Web Server Apache

資料庫伺服器 MySQL

開發工具

Adobe Dreamweaver CS6、jQuery

Mobile、XAMPP、Microsoft Access

開發語言 PHP

瀏覽工具 Google Chrome,Internet Explorer

Page 14: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

11

第二章、文獻探討

2-1 行動網頁探討

2-1-1 智慧型手機普及率逐年上升

全球擁有智慧型手機的普及率逐年上升,在國內 2011至 2013年

智慧型手機普及率在各個年齡層上都是呈現上升趨勢,特別是在 2013

年時,18歲至 44歲之使用者上升至六成以上,而 25歲至 34歲高達

七成五,可以顯示智慧型手機已經是普遍性的產品,對於使用者具有

相當的重要性。[4]

2-1-2響應式網頁設計介紹

響應式網頁設計(Responsive Web Design)簡稱 RWD,又稱適應

性網頁、自適應網頁設計、回應式網頁設計、多螢網頁設計,這是一

項開始於 2011年由 Ethan Marcotte 發明的術語 Responsive Web

Design (RWD)。2012年後被公認為是日後網頁設計開發技術的趨勢,

網站使用 CSS3,以百分比的方式以及彈性的畫面設計,在不同解析

度下改變網頁頁面的佈局排版,讓不同的設備都可以正常瀏覽同一網

站,提供最佳的視覺體驗,是個因移動平台的用戶大量增加而想出的

一個對應方法。

Page 15: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

12

2-1-3響應式網站設計分析

1. 開發成本與時間比 APP低

APP必須開發 iOS版及 Android版兩個版本,一個版本皆數十萬

元起跳,開發時間加上審核上架時間相當長。

2.不需下載 APP就能使用

這不只是響應式網頁的優點,可說是所有手機版網頁相較於手機

APP的最大優勢。 APP必須到 iTunes、Google Play下載,APP若要

更新,必須重新審核過後,再通知所有下載用戶更新。反觀自適應網

頁與手機網頁,只要管理者更新網站,每次連上網頁都會是最新版本。

免費 Wi-Fi熱點越來越多、 3G費率持續調降,即使無法離線瀏覽也

不再是問題了。

3.維護成本比 APP低

APP完成之後要不定期需針對新版本測試,才能確定 APP在新手

機上能運作順暢。以目前新手機上市的頻率來看,這是永遠不會結束

的測試地獄。

手機版網站等於是另一個用在行動裝置的公司網站,相對地,企業必

須花 2筆網站維護成本。

Page 16: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

13

2-2 行動網頁裝置

2-2-1 使用者體驗與使用者介面設計很重要

使用者體驗是一種主觀性,個人化的經驗。消費者在使用特定產

品或系統或服務時,以實際體驗、情感、俱有個人意義(個性化)以

及,有價值的人機交流、和產品所有權方面的問題。使用者介面是指

與硬體之間溝通、互動的媒介,目的在使得使用者能夠方便有效率地

去操作硬體以達成雙向之互動,而完成所希望藉助硬體完成之工作。

以下將觀察範例內的使用者體驗部分並給予評分。

2-3 軟體應用簡介

2-3-1 Adobe Dreamweaver

Dreamweaver為 Adobe公司所出品的網頁編輯軟體,其操作環境

採用視覺化界面處理畫面,並可自動產生 HTML 原始碼,此軟體同時

可以即時交互編輯修改,編輯文字、插入分隔線、表格製作、超連結、

圖形編輯、圖層應用等功能,輕鬆便可產生一般與動態,甚至包含程

式組等多樣式網頁型態,讓即使不會程式語言的學員也能做出生動活

潑的網頁。Dreamweaver 目前為最受觀迎及被大多數專業網頁設計師

所採用的網頁編輯軟體。

2-3-2 jQuery mobile

jQuery mobile 是開源軟體,使用 MIT 授權條款授權。

Page 17: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

14

jQuerymobile 的語法設計使得許多操作變得容易,如操作文件

(document)、選擇文件物件模型(DOM)元素、建立動畫效果、處理

事件、以及開發 Ajax 程式。jQuery mobile 也提供了給開發人員在

其上建立外掛模組的能力。這使開發人員可以對底層互動與動畫、高

階效果和高階主題化的元件進行抽象化。模組化的方式使 jQuery

mobile函式庫能夠建立功能強大的動態網頁以及網路應用程式。

2-3-3 XAMPP

XAMPP(Apache+MySQL+PHP+PERL)是一個功能強大的建站集成軟

件包。這個軟件包原來的名字是 LAMPP,但是為了避免誤解,最新的

幾個版本就改名為 XAMPP 了。它可以在 Windows、Linux、Solaris、

Mac IOS 等多種操作系統下安裝使用,支持多語言:英文、簡體中

文、繁體中文、韓文、俄文、日文等。

許多人通過他們自己的經驗認識到安裝 Apache 服務器是件不容易

的事兒。如果您想添加 MySQL、PHP 和 Perl,那就更難了。 XAMPP 是

一個易於安裝且包含 MySQL、PHP 和 Perl 的 Apache 發行版。

XAMPP 的確非常容易安裝和使用:只需下載,解壓縮,啟動即可。[16]

2-3-4 Apache Web Server

Apache Web Server:

Page 18: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

15

Apache HTTP Server(簡稱 Apache)是 Apache軟體基金會的一個開

放原始碼的網頁伺服器軟體,可以在大多數電腦作業系統中運行,由

於其跨平台和安全性。被廣泛使用,是最流行的Web伺服器軟體之一。

它快速、可靠並且可通過簡單的 API 擴充,將 Perl/Python 等直譯

器編譯到伺服器中。

Apache 支援許多特性,大部分通過編譯的模塊實現。這些特性

從伺服器端的程式語言支援到身分認證方案。一些通用的語言介面支

援 Perl,Python,Tcl,和 PHP。流行的認證模組包括 mod_access,

mod_auth和 mod_digest。其他的例子有 SSL和 TLS支援(mod_ssl),

代理伺服器(proxy)模組,很有用的 URL 重寫(由 mod_rewrite 實

作),客製日誌檔案(mod_log_config),以及過濾支援(mod_include

和 mod_ext_filter)。Apache日誌可以通過網頁瀏覽器使用免費的指

令碼 AWStats或 Visitors來進行分析。[5]

2-3-5PHP

PHP(全稱:PHP:Hypertext Preprocessor,即「PHP:超文字

預處理器」)是一種開源的通用電腦手稿語言,尤其適用於網路開發

並可嵌入 HTML中使用。PHP的語法借鑑吸收 C語言、Java和 Perl等

流行電腦語言的特點,易於一般程式設計師學習。PHP的主要目標是

允許網路開發人員快速編寫動態頁面,但 PHP 也被用於其他很多領

Page 19: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

16

域。

PHP 最初是由勒多夫在 1995 年開始開發的;現在 PHP 的標準由

the PHP Group 維護。PHP 以 PHP License 作為許可協議,不過因為

這個協議限制了 PHP名稱的使用,所以和開放原始碼許可協議 GPL不

相容。

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

說 PHP大多執行在網頁伺服器上,透過執行 PHP程式碼來產生使用者

瀏覽的網頁。PHP可以在多數的伺服器和作業系統上執行,而且使用

PHP完全是免費的。根據 2013年 4月的統計資料,PHP已經被安裝在

超過 2億 4400萬個網站和 210萬台伺服器上。[6]

2-3-6 MySQL

MySQL資料庫系統是關聯式資料庫管理系統(relationaldatabase

management system)RDBMS,而且是目前市面上最快速且最穩定的資

料庫之一他的價格也是最便宜,甚至免費。在目前架設商業網站中,

PHP 配上 MySQL 資料庫是使用最為廣範的,就像是 ASP.NET 配上 SQL

SERVER一樣好用與方便。[7]

Page 20: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

17

2-4 安裝教學

2-4-1 XAMPP 安裝教學

XAMPP官方網站:

https://www.apachefriends.org/zh_tw/index.html

因為 Windows 應該是目前最多人使用的作業系統,所以我們這篇使

用 Windows 環境做教學,如果你的系統也是 Windows 那就點擊第一

個連結下載安裝程式!如圖 2-1所示[8]

圖 2-1 選擇作業系統

Page 21: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

18

XAMPP安裝流程

1. 執行剛剛下載的安裝程式後,點『Next』開始安裝 XAMPP。

圖 2-2 執行安裝程式

2. 這裡可以選擇要安裝的套件,其實這裡全選就可以了,雖然 有些功能用不到,直接點『Next』。如圖 2-3 所示

圖 2-3 選擇安裝套件

Page 22: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

19

4. 這邊我可能會在右邊看到一個選項,把那個勾勾取消掉如圖 2-4

所示,再點『Next』。

圖 2-4 安裝步驟

5. 點『Next』後開始安裝如圖 2-5 所示

圖 2-4 安裝完成

圖 2-5 點選下一步

Page 23: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

20

6. 跑一下就安裝好了,接著我們點『Finish』如圖 2-6 所示開啟控制

台。

圖 2-6 安裝完成

7. 打開控制台後,我們將 Apache 還有 MySQL 啟動,點箭頭指的

兩個 Start 按鈕。如圖 2-7 所示

圖 2-7 啟動 MySQL 及 Apache

Page 24: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

21

8. 啟動伺服器後,我們用瀏覽器打開『localhost』,會看到如下圖

的頁面,可以選擇中文進入網頁介面的控制台。如圖 2-8 所示

圖 2-8 選擇介面

9. 如果你成功看到這個頁面,代表安裝大功告成了。如圖 2-9 所示

圖 2-9 安裝完成

Page 25: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

22

2-5 Apache 設定教學

2-5-1 如何設定 Apache Web Server

1. 下載來之後,就可以安裝了。只有有一個畫面必須注意

圖 2-10 安裝 Apache

如果你的電腦是浮動 IP (浮動 IP指的是,你的 IP並不是固定的,

會隨時跑掉)

則需要用到轉址,轉成固定的某個網址,才不會隨時因為 IP 跑掉整個設定又要重來。

Page 26: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

23

如果沒有成功啟動,請檢查是否尚未啟動,並把他啟動

否則可能是網路設定、或者是設定檔錯誤,請請教高人.

1. 接著我們要讓電腦知道,我們網頁的起始頁面,在我們本機的

什麼地方

請到「開始」→「所有程式」→「Apache HTTP Server」→「Configure

Apache Server」→「Edit the Apache httpd.conf...」

2. 接著會進入一個純文字檔,我們要在這個檔案修改兩個地方

a. 指定你的網頁起始位置

請修改 DocumentRoot 這行的設定,圖中被選取的部分,

請改成你想要的起始位置

圖 2-11

b. 指定權限設定位置

請找到 Directory(如圖)這一行,將路徑改為和你在上面的設

定一樣

Page 27: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

24

圖 2-12 更改路徑

3. 請存檔,並且重新開啟 Apache 服務,就完成安裝了。

Page 28: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

25

第三章、系統功能

3-1 工作進度

3-1-1 工作進度之甘特圖

專題製作的規劃工作進度表,如表 3-1 所示。

表 3-1 工作進度表

Page 29: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

26

3-1-2 工作分配表

專題製作的個人負責工作分配表,如表 3-2 所示。

表 3-2 工作分配表

姓名 負責工作

方煒捷

行動裝置網頁製作

資料庫

測試

畫面設計

簡報製作

孫聖彥

行動裝置網頁製作

資料庫

文獻設計

書面整理

文獻收集

陳健達

書面統整

蒐集圖片資料

畫面設計

書面整理

書面收集

龔信全

資料庫彙整

書面收集

資料收集整合

書面整理

文獻彙整

簡暐宸

蒐集圖片資料

資料庫

資料收集整合

文獻整合

簡報製作

Page 30: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

27

3-2 系統功能架構圖

系統功能架構圖是系統的功能架構圖,說明行動網頁有甚麼功能,

如圖 3-1 所示。

圖 3-1 功能架構圖

Page 31: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

28

3-2 系統環境架構圖

系統環境架構圖,說明資料庫是如何與行動裝置做連接,如圖

3-2 所示。

圖 3-2 系統環境架構圖

Page 32: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

29

3-3 資料庫設計

3-3-1 店家資料表

推薦菜色資料表如表 3-3 所示

表 3-3 推薦菜色資料表(food)

欄位名稱 資料類型(大小) 描述

Numbering varchar(4) 編號

recommend varchar(10) 菜色名稱

recommend1 varchar(12) 菜色圖片檔名

3-3-2 介紹資料表

餐廳介紹資料表如表 3-4 所示

表 3-4 餐廳介紹資料表(store)

欄位名稱 資料類型(大小) 描述

num2 varchar(6) 類別編號

num varchar(4) 餐廳編號

ShopName varchar(38) 餐廳店名

Storefront varchar(12) 餐廳圖片編號

category varchar(10) 餐廳類別

Price varchar(30) 價錢

Page 33: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

30

Time varchar(30) 營業時間

address varchar(30) 餐廳地址

Click Int(6) 點閱率

Page 34: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

31

第四章、成果展示

1.主畫面

主畫面如下圖 4-1 所示,可選擇人氣餐廳及各類美食

圖 4-1 主畫面

Page 35: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

32

2.人氣餐廳

在主畫面點選人氣餐廳選項,進入後將可選擇餐廳類別

如圖 4-2所示

圖 4-2 人氣餐廳

Page 36: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

33

3.推薦餐廳

在人氣餐廳內點選使用者想查看的類別後,將會挑選出點閱率

前五名的人氣餐廳推薦,如圖 4-3 所示,供使用者瀏覽

圖 4-3 餐廳推薦

Page 37: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

34

4.餐廳簡介

點選使用者想瀏覽的餐廳,會出現餐廳簡介,裡面包含有三到四

道的推薦菜色、店家位置及有無停車位 如圖 4-4所示

圖 4-4 餐廳簡介

Page 38: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

35

5.地圖功能

點選地址上的超連結後會自動開啟 Google 地圖,讓使用者更方便

尋找位子如圖 4-5 所示

圖 4-5 Google 地圖

Page 39: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

36

第五章、結論

5-1 研究結論

本研究集結了大台中美食的資料架設行動版網頁,以往的店家都

是透過傳統的方式做行銷,一般消費者要得知台中美食店家相關訊息

與活動都較不易,成功匯集資料架設行動版網頁後一般消費者就能從

本行動版網頁方便得知個大店家相關訊息。初步的規劃中,除了建置

讓饕客方便操作內容又簡單明瞭的瀏覽網頁,製作的構想均以現代人

對美食的講究,和住在外縣市的民眾能瞭解大台中的美食,為了讓瀏

覽者可以對店家有深刻印象,網頁功能包含了人氣美食、各類美食、

營業時間、地圖、...等,藉由這些功能可以讓各地的饕客直接的在網站

上方便查詢想要的資料。

5-2 未來展望

時代快速的進步造就行動裝置的盛行,多數人們利用手機或是平

板電腦上網,使瀏覽者可以用行動版網頁來去瀏覽想要的資料,本專

題製作大台中美食行動版網站,自此專題研究後,對於大台中美食行

動版網站之未來延續性研究方向會包含,一、可以新增會員中心,以

及會員討論版,還能新增消費者評價功能,行動版網站的成立不僅對

使用者帶來更多的便利性之外,我們往後還可新增店家優惠資訊,以

及更新更多店家供使用者參考。

Page 40: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

37

誌謝

本專題能順利完成,首先由衷的感謝專題指導老師柯朝輝老師,

感謝他在專題寫作期間的細心教誨與指導,令學生終身受益匪淺。專

題製作中遇到一些困難,指導老師認真地、耐心地與組員多次討論,

才順利地將專題完成,對於柯朝輝老師,我們有無限的感激。

謝謝柯朝輝老師這些日子的指導。

最後,感謝在專題製作期間曾經幫助過我們的所有老師,以及

所有口試委員對我們的鞭策與指正,讓我們的專題能順利的完成,在

此本組特別的感謝,僅致上最高的敬意及謝意。

方煒捷 陳健達 孫聖彥 龔信全 簡暐宸

僅致

中華民國105年 5月於修平

Page 41: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

38

參考文獻

[1] 酷麥克"美食部落格",《http://coolmac.tw/》

[2 ] Sunny"吃喝遊樂美食部落",《http://ppt.cc/L0aHr》

[3]痞客幫焦小糖-"美食與旅遊",

《http://meijuily.pixnet.net/blog/category/1565396》

[4] 手機版網頁有什麼優點與缺點? | 邦立資訊

《http://www.bondlink.com.tw/WebDesign/knowledge-show.

asp?id=196》

[5] Apache 官網

http://httpd.apache.org/download.cgi

[6] PHP - 维基百科,自由的百科全書

https://zh.wikipedia.org/wiki/PHP

[7] MySQL 簡介

http://sjchen.im.nuu.edu.tw/Database/99/MySQL_Ch1.pdf

[8] XAMPP 官方網站

https://www.apachefriends.org/zh_tw/index.html

[9]十個行動版網頁(MOBILE WEB)開發輔助工具

《https://blog.patw.me/archives/980/ten-action-website-mobi

le-web-development-tool/》

Page 42: 修平科技大學 - ir.hust.edu.twir.hust.edu.tw/bitstream/310993100/5445/1/大台中美食行動網站設計.pdf · 2-1-2響應式網頁設計介紹 響應式網頁設計(Responsive

39

[10]撇步王 Dreamweaver CS6 教學網頁設計進階範例課程

《http://www.peboking.com/index.php?route=product/prod

uct&product_id=250》

[11]CADIIS 2016 年 TOP10 企業網站設計趨勢: RWD 響應

式網頁、一頁式網頁、全幅背景

《https://www.cadiis.com.tw/lessons-learned/593-top-10-web

-design-trend 》

[12]EZOAPP jQuery Mobile 教學( 基礎) | EZoApp 教學手

《https://ezoapp.gitbooks.io/ezoapp-tutorials/content/chapte

r7/index.html#1-imggallery 》

[13] 手機網頁設計新取向─台灣五大案例分析!

http://www.astralweb.com.tw/the-design-of-taiwan-mobile-w

ebsite/

[14] 手機版網頁有什麼優點與缺點? | 邦立資訊

http://www.bondlink.com.tw/WebDesign/knowledge-show.as

p?id=196

[15] XAMPP_百度百科

http://baike.baidu.com/item/XAMPP