Easy Life Q & A
◎學校:中華醫事科技大學
◎專題題目:生活知識網
◎指導老師:羅逸文老師
◎班級:四資管三 A & B
目 錄
壹、緒論
1.前言………2
2.研究動機………2
3.研究目的………3
4.系統應用………4
貳、文獻探討 1.分析階段………5
2.設計階段………6
3.執行階段………14
4.評估階段………14
參、專題內容與說明 1.系統特色………15
2.
資料庫格式說明……… 16
3.系統流程圖………19
肆、系統操作……… 21
伍、結論與建議 1.團隊分工………27
2.結論………27
陸、參考文獻……… 58
1
壹、緒論
1.前言
近年來，隨著資訊時代的普遍化與個人化，網際網路也深深的 影響到人們的生活。而如何快速將最新最正確的知識匯入我們的知 識庫，正式我們研究製作Easy Life Q&A 的原因。基於 Web 技術 可以藉助於全球性的Internet 進行，也可以運行於校園網和公司企 業內部的Intranet，因此可以突破空間和時間上的限制，極大地拓 展靈活性，既可以提高學習知識的效率，也可以讓老師和學生都享 受到從動畫遊戲中學習知識的樂趣。
2.研究動機
根據2012 網路資料顯示，12 歲以下的民眾有 160 萬人使用 過網際網路，而12 歲以上有 1,594 萬人皆使用過網際網路，平均 每人每日使用網路大約為一至二小時，而且正在逐年增加中。隨著 智慧型手機使用的普及化，網際網路的使用已突破只能在固定地點 才能使用的缺點，以前有許多人都在室內空間(家/辦公室)中利用網 路就能得到許多知識與外界的新聞情報，現在只要手上拿著智慧型 手機可以隨時隨地上網搜尋最新資訊。日常生活中人們往往會遇見 一些生活上的小困難又或者是一些突如其來的想法需要解答，而網 路搜尋知識正是現代人解決問題的一大方式。但網路上的生活知識 多半雜亂且無根據，有時候我們搜尋知識時往往搜尋到多種版本但 卻無法得知到底哪些是正確的，而也造成很大的困擾。團隊製作了 解決措施，我們利用此次的專題製作彙整網路上的資訊後提供最新 最正確的知識傳達給在網路上搜尋知識的使用者並透過Q&A 的方式 讓使用者更快速了解。網站上提供食、衣、住、行四大項目與生活
的知識可以搭乘科技的順風車更進一步。
3.研究目的
本研究目的的主要目的是在於透過製作動畫與撰寫程式，及建 立資料庫，來幫助使用者熟知生活常識，透過遊戲問答來學習，並 加入生活中各類知識題目，利用這個網頁平台，可讓使用者對平常 生活的習慣是否正確。
然而一般的知識網頁，琳瑯滿目的選項及文字，很少使用者能 夠完整吸收至腦海中，所以本研究是希望能透過Flash 動畫製作的 有趣性、挑戰性來為使用者提供最輕鬆、最完整的學習知識，也希 望這個研究能讓使用者有助於學習。
此外研究目的也希望在網際網路的平台上，建立一個完善的空 間，讓使用者能妥善運用每項功用。最後盼望這個研究能夠被採用，
並真正進入到實務上，能夠幫助使用者補充知識，所以建置一個功 能完善的資料庫系統，使用者習慣使用一些方法來幫助自己學習知 識，滿足使用者的便利性與樂趣性需求，也藉由提高學習效率，除 了是本小組的研究目的，也是現代人對學習的新方式。
4.系統應用
<<Easy Life Q&A>>是以最新最正確的生活知識問答，有比較樂趣 性的學習方式。運用互動多媒體技術。透過遊戲中的音效與分數的 增加，給使用者視聽感受，挑戰分數氣氛，體會自我知識的了解程 度。<<Easy Life Q&A>>適用各年齡層的使用者。透過問答遊戲過程中 也輕鬆學習！
系統優點
● 提升學習生活知識效率
3
● 減少閱讀冗長文字時間
● 減少學習知識的複雜性
貳、文獻探討
(一)分析階段:
1.操作可行性
此問答遊戲在開發完成後即可立即在網頁的平台上使用，藉此 減少學習時間，使用者在閱讀上更簡易、效率性，透過問答分數可 得知自我知識的程度。
2.技術可行性
上、三下學習，透過不斷的撰寫及操作上的演練，以及翻閱圖書館 書籍，及請教老師此系統的相關問題，一步步克服難題。Flash 其 實不能直接存取伺服器端的資料，而是利用ActionScript 程式與伺 服器端的成是溝通，再由這些伺服器負責連結資料庫並存取資料。
由於這些伺服器端的程式式處在資料庫和Flash 之間，所以我們稱 為中介程式(Middleware)，透過下圖的方式我們成功將 Flash 與資 料庫結合。
3.即時可行性
<<Easy Life Q&A>>此專題為一學年課程，配合上課老師教學進度，
定期討論及執行此系統，在規定時間內完成此專題。
4.為和讓 Flash 與資料庫做溝通?
Flash 提供網頁高度的互動與精緻美麗的畫面效果，但大家都一直 以為Flash 的網頁無法與伺服器端溝通，因此無法處理鄭正由伺服 器端技術與資料庫提供的動態資料。事實上利用ActionScript 和其 它輔助的技術，我們就可讓Flash 和伺服器、資料庫做進一步的溝 通，讓網頁更具實用性，而不再只是空有美裡表皮的動畫效果!
(二)設計階段：
1.FrontPage:
Microsoft FrontPage(全名：Microsoft Office FrontPage)，簡稱 FP，是美國微軟公司推出的一款網頁設計、製作、發佈、管理的軟 體。
無論要建立個人網頁、資訊網頁，還是公司的[[互聯網]]或[[內聯 網]]網站，Microsoft FrontPage 都能夠提供一個建構與管理網站 所需的工具。由於它的操作方式就和其它[[Microsoft Office]]辦公 室軟件相似，所以FrontPage 是十分容易去掌握及使用。
軟體特性:
5
所見即所得
結合了設計、程式碼、預覽三種模式於一體，也可一起顯示程 式碼和設計檢視
與Microsoft Office各軟體無縫連接
良好的表格控制能力
繼承了Microsoft Office產品系列的良好的易用性
下圖為使用FrontPage 撰寫程式
下圖為使用FrontPage 設計網頁
下圖為使用FrontPage 預覽網頁
7
2.Amfphp 套件:
Amfphp 可以正確地序列化、反序列化複雜的數據類型。除了對象 和數組，它還支持數據連接資源，這意味著我們可以通過調用遠程 方法簡單返回mysql_query,amfphp 會處理這一切。如果平台支 持（目前來說，Flash Remoting 和 Flex Remoting），amfphp 還可以處理循環引用和自定義數據。它也支持簡單的遠程調試。
AMFPHP 提供的偵錯器，可偵錯 PHP 程式，還能看到 PHP 程式的 回傳結果，甚至還能模擬聯接資料庫後的資料接收和發送。
下圖為開啟AMFPHP 偵錯的介面，會先設定 Gateway 的位置，之 後會進入到Remote Service 的偵錯器畫面。
在AMFPHP 提供的偵錯器試著傳遞參數來呼叫 Remote Service webVote 中的 SENDsTR 方法可獲得下圖結果
9
在AMFPHP 所提供的偵錯器中試著呼叫 Remote Service
webExamin 鐘的 getTotalQnum 方法可獲得下圖(可得知現有的 題目筆數)
3.WampServer:
WampServer 是一個集成了 PHP/Mysql/Apache 及其它應用(如 PhpMyAdmin/Xdebug[也許沒有])的軟件，它最令人喜愛的特徵，
不是令Php/Mysql/Apache 的安裝配置簡單化，而是讓我們只需要 點點鼠標，就可以隨意切換已經安裝的PHP/Mysql/Apache 的不同 版本。對於PHP 不同版本的需求，PHP 程序員都最清楚不過了。
開啟各個PHP 網頁介面
管理資料庫介面
4.Flash:
11
Adobe Flash，前稱 Macromedia Flash，簡稱 Flash，前身
FutureSplash，既指 Adobe Flash Professional 多媒體創作程式，
也指Adobe Flash Player。自從 Macromedia 公司於 2005 年 12 月 3 日被 Adobe 公司收購，Flash 也就成為了 Adobe 旗下的軟 體。 2011 年 11 月 9 日，Adobe 公司宣布停止開發個人電腦平台 以外的Flash，而專注於開發非專利標示語言 HTML5。
Flash 被大量應用於互聯網網頁的矢量動畫文件格式。使用向量運 算﹙Vector Graphics﹚的方式，產生出來的影片佔用存儲空間較 小。使用Flash 創作出的影片有自己的特殊檔案格式﹙swf﹚該公 司聲稱全世界97%的網絡瀏覽器都內建 Flash 播放器﹙Flash Player﹚是 Macromedia 提出的“富因特網應用”（RIA）概念的 實現平台。 FLASH 的三重意義
1、 FLASH 英文本意為“閃光”；
2、它是全球流行的電腦動畫設計軟件；
3、它代表用上述軟件製作的流行於網絡的動畫作品。
Flash 是一種交互式矢量多媒體技術，他的前身是 Futureplash，
早期網上流行的矢量動畫插件。後來由於Macromedia 公司收購了 Future Splash 以後便將其改名為 flash2，到現在最新的 flash4。
現在網上已經有成千上萬個Flash 站點，著名的如 Macromedia 專 門ShockRave 站點，全部採用了 Shockwave Flash 和
Director。可以說 Flash 已經漸漸成為交互式知量的標準，未來網 頁的一大主流。
軟體特性
被大量應用於網際網路網頁的向量動畫檔案格式。
使用向量圖形（Vector Graphics）的方式，產生出來的視訊佔 用儲存空間較小。
使用Flash創作出的視訊有自己的特殊檔案格式（swf）
該 公 司 聲 稱 全 世 界 97%的網 路 瀏 覽 器都 內 建 Flash 播 放 器
論是在資料庫、XML、PHP等各種平台上，都能更進一步的相 互結合應用。
從使用者體驗的角度，是目前最好的前端技術。
下圖是Flashcs3 版本的操作介面
(三)執行階段：
Easy Life Q&A 測試上線
當此 Easy Life Q&A 完成後，最重要的階段在於系統的測試與除 錯功能，此階段目的在於讓使用者在實際操作問答遊戲上，評估是 否符合需求，包刮：操作介面是否擁有樂趣性、流程是否順暢、功
13
能是否齊全完善……等；在操作方面須考量到功能是否便利，流程 是否順暢，是否能夠讓使用者產生使用上的滿意程度，考量這些因 素都測試的重點。
(四)評估階段：
Easy Life Q&A 評估就是要確定此系統是否滿足使用者之需求，
當此系統開始真正操作時，本組就需跟使用者進行討論，了解使用 者對於本系統的滿意度，並提功我們更多的功能與建議，做為我們 下次分析時改進之參考因素。
參、專題內容與說明
1.系統特色 經濟性:
本系統只要有Intranet 連接到主機即可使用，無須負擔任何費 用
案按鈕即可,無需教導即可操作。
觀賞性:
1.系統自動計分,每次做答完畢即會顯是分數,如果完成全部題目 及會再次顯示得分。
3.介面由專業美工精心設計,美觀大氣,觀賞性強,具有強烈的視覺 效果和聽覺效果。
適應性:
1.使用者可多次做答，熟知題庫內容，並增加自我的知識。
2.使用者可給與遊戲評價並透過評價了解其遊戲的使用程度。
2.資料庫格式說明
下方為examinedata 資料表，idNo 為流水編號，question 為題 目，ans1~ans3 為選項 rightAns 為正確答案。
下圖為member_table 資料的資料。
下方為teacher 資料表，username 為老師人事編號，tname 為
15
老師的姓名。
下圖為teacher 資料的資料。
下方為memberdata 資料表，memId 為帳號，memPsw 為密碼，
memName 為名稱 memEmail 為店子郵件 memTel 為電話。
下方為Votedata 資料表，idNo 為流水編號，question 為問題，
ans 為備選答案，voteNum 為得票數。
17
3.系統流程圖
下圖為整體架構
透過簡單的頁面功能提升使用者容易操作並精簡頁面使達到不霧裡 看花的效果，並將我們提供的功能發揮至極。
下圖為管理者登入後各流程。
首 頁 首 頁 管 理 頁 面 管 理 頁 面
19
管 理 者 資 料 管 理 者 資 料 新 增 新 增
問 答 題 目 問 答 題 目 新 增 新 增
評 價
評 價
新 增
新 增
下圖為首頁，簡易的畫面有三項功能提供。
管理者登入頁面
管理者登入頁面:點選各的文字連結可瀏覽修改新增刪除各個資料
21
管理者會員資料：可進行新增、修改、刪除。
使用者評價介面
使用者測驗問答介面 測驗解說
23
測驗畫面
測驗畫面:回答錯誤
測驗結束
25
2.結論
在團隊研究完成這項專題，從無到有經過許多討論與抉擇，在研究 此專題的前提，必須熟知flash 的操作與 php 語法程式撰寫，並要 了解其中介程式的使用，對Flash 結合資料庫有興趣的各位，可嘗 試使用此研究方法，並更上層樓。
陸、參考文獻
1.PHP5MySQL 程式設計樂活樂，鄧文淵，碁峯資訊有限公司 2.PHP6 與 MySQL 基礎學習教室，葉建榮，上奇
3.PHP 與 MySQL 網路開發技術與範例導航，何曉霞，陽立峰，上奇 王靜儀
＊網站製作
＊動畫製作
鄭宜珊
＊簡報設計
＊書面資料 廖羽均
＊資料搜尋
＊網站測試
李東輝
＊資料搜尋
＊圖表製作 陳鼎學
＊圖表製作
＊動畫製作
27
4.PHP 網頁設計與專題製作，洪國勝，金華出版社
5.PHP + MySQL 網頁程式設計與資料庫，林梓涵，碁峯 6.http://www.jollen.org/php/ PHP 教學欄
7.http://chensh.loxa.edu.tw/php/Z_1.php PHP + MySQL 程式設 計研習
8.http://sheng.phy.nknu.edu.tw/ 阿盛網頁素材
9.http://w1.nhps.tp.edu.tw/maggie/ MAGGIE 的網頁素材 10.FLASH 資料庫應用即戰力，楊東昱，旗標出版股份有限公司
