元培科技大學
資訊管理系畢業專題
與社群網站結合之
MJSK 數位學習網
組別代號：A11
指導老師：杜建志老師
組 員：呂亭寬(0981408004)
卓明宏(0981408014)
蔡欣航(0981408024)
陳嘉豪(0981408050)
中
華
民
國
1
0
1
年
1
2
月
摘要
學習，可以說是人類生活中的一大要事，而人們也不斷追尋著更快速、更方 便的學習方式。至今學習網站的互動性日漸被重視，平台間資訊傳遞的藩籬被跨 越，人與人的關係愈行依賴虛擬網路。而本組以 [MJSK - 數位學習網] 來進行相 關設計，我們將會透過教學網站與社群網站的結合來呈現該數位學習網站的內容， 透過參與者互動分享，好的資訊藉由口碑分享充分擴大網路效應所驅動的影響力， 讓一般使用者與此系統都獲得更大的迴響。 關鍵字: 社群網站、數位學習、MJSK -數位學習網、FACEBOOK、粉絲團、線 上測驗、題庫、教材。目錄
摘要 ... i 目錄 ... ii 表目錄 ... iv 圖目錄 ... v 第一章 緒論... 1 1.1 背景與動機 ... 1 1.2 目的 ... 1 1.3 限制 ... 2 1.4 關鍵字定義 ... 2 第二章 文獻探討 ... 3 2.1 社群與數位學習簡介 ... 3 2.2 社群與數位學習網簡介 ... 3 2.4 數位學習網之探討 ... 5 第三章 專題規劃 ... 8 3.1 專題規劃目標 ... 8 3.2 系統開發方法 ... 8 3.2.1 專題流程 ... 8 3.2.2 專題分工 ... 9 3.3 系統架構 ... 10 3.3.1 系統架構圖 ... 10 3.4 專題設備 ... 11 3.5 專題時程規劃 ... 11 第四章 專題成果 ...12 4.1 功能的需求 ... 12 4.1.1 需求描述 ... 12 4.1.2 事件 ... 12 4.2 系統分析 ... 14 4.2.1 使用案例圖 ... 14 4.2.2 Use Case 描述 ... 15Use Case Specification：發展歷史 ... 15
Use Case Specification：聯絡我們 ... 16
Use Case Specification：線上學習 ... 17
Use Case Specification：修改會員資料 ... 19
Use Case Specification：線上測驗 ... 20
Use Case Specification：忘記密碼 ... 21
Use Case Specification：維護網站 ... 22
4.2.3 循序圖 ... 23 4.3 系統介紹 ... 28 4.4 使用者手冊 ... 39 第五章 結論與建議 ...48 5.1 結論 ... 48 5.2 建議與未來展望 ... 48 參考文獻 ...49 附錄 ...50 會議記錄 ... 50
表目錄
表 3 - 1 SDLC 專題流程表 ... 8
表 3 - 2 專題分工表 ... 9
表 4 - 1 事件表 ... 13
圖目錄
圖 2 - 1 數位學習分析... 4 圖 2 - 2 撇步王線上課程總覽圖 ... 5 圖 2 - 3 撇步王影片教學介面圖 ... 5 圖 2 - 4 撇步王的聯絡我們圖 ... 6 圖 2 - 5 省三數位教學平台首頁圖 ... 6 圖 2 - 6 省三數位教學平台課程總覽圖 ... 7 圖 2 - 7 省三教學平台教學介面圖 ... 7 圖 3 - 1 系統架構圖 ... 10 圖 3 - 2 SDLC 專題流程圖 ... 11 圖 4 - 1 使用案例圖 ... 14 圖 4 - 2 循序圖-註冊會員 ... 23 圖 4 - 3 循序圖-登入會員 ... 23 圖 4 - 4 循序圖-忘記密碼 ... 24 圖 4 - 5 循序圖-修改會員資料 ... 24 圖 4 - 6 循序圖-線上學習 ... 25 圖 4 - 7 循序圖-線上測驗 ... 25 圖 4 - 8 循序圖-聯絡我們 ... 26 圖 4 - 9 循序圖-發展歷史 ... 26 圖 4 - 10 循序圖-關於我們 ... 27 圖 4 - 11 循序圖-關於數位學習 ... 27 圖 4 - 12 首頁 ... 28 圖 4 - 13 發展歷史 ... 28 圖 4 - 14 關於數位學習 ... 29 圖 4 - 15 新增測驗題目 ... 29 圖 4 - 16 線上學習-未登入 ... 30 圖 4 - 17 線上學習-登入後 ... 30 圖 4 - 18 線上學習-教材 ... 31 圖 4 - 19 線上測驗-未登入 ... 31 圖 4 - 20 線上測驗-登入後 ... 32 圖 4 - 21 課程測驗 ... 32 圖 4 - 22 線上測驗-結果 ... 33 圖 4 - 23 聯絡我們-未登入 ... 33 圖 4 - 24 聯絡我們 ... 34 圖 4 - 25 會員註冊 ... 34 圖 4 - 26 忘記密碼 ... 35圖 4 - 27 修改密碼 ... 35 圖 4 - 28 會員登入 ... 36 圖 4 - 29 會員註冊 ... 36 圖 4 - 30 MJSK 數位學習... 36 圖 4 - 31 QR 碼 ... 37 圖 4 - 32 線上學習快速連結 ... 37 圖 4 - 33 留言板 ... 38 圖 4 - 34 粉絲團 ... 38 圖 4 - 35 首頁 ... 39 圖 4 - 36 瀏覽教材 ... 40 圖 4 - 37 線上學習 ... 40 圖 4 - 38 新增測驗題目 ... 41 圖 4 - 39 測驗 ... 41 圖 4 - 40 測驗結果 ... 42 圖 4 - 41 聯絡我們 ... 42 圖 4 - 42 註冊帳號 ... 43 圖 4 - 43 登入帳號 ... 43 圖 4 - 44 登入畫面 ... 44 圖 4 - 45 修改密碼 ... 44 圖 4 - 46 忘記密碼 ... 45 圖 4 - 47 忘記密碼認證 ... 45 圖 4 - 48 粉絲團 ... 46 圖 4 - 49 留言板 ... 47 圖 4 - 50 行動裝置 ... 47
第一章 緒論
1.1 背景與動機
學習是人們一生中最為重要的事情之一，那學習方式當然就是一個值得好好 研究的問題，現在所謂的傳統教學方式大都是由特定的教學者傳授知識，讓學習 者必須在特定的時間地點內跟著教學者進行學習，這樣的學習模式受限於距離與 時間，可能會讓人們對於學習活動感到不便以至於失去學習的興致。但在二十一 世紀這個資訊化的時代，網際網路的發展可謂如日中天，人們的生活習慣也大大 受到網際網路的影響，而這影響不但改變了人們訊息交流的方式，也為學習新知 的方法另外開啟了一扇窗。這些社會及生活型態上的改變，勢必將對傳統教育方 式產生重大的影響。近年來，數位學習已趨成熟與穩定，人們利用網際網路來進 行學習，大大提升了學習的速度與效果，讓數位學習蔚為風潮，但再提高學習成 效之餘，一般使用者往往忽略了人與人之間的互動交流，孔子曾說過：「獨學而 無友，則孤陋寡聞」，所以本組將以 [MJSK - 數位學習網] 進行相關設計，與社 群網站的結合，給一般使用者在相互支持、關懷、開放和遵守規範的氣氛中，挑 戰個人既有的信念、價值、知識和經驗，促進個人反思，進而獲得個人知識和能 力的成長。1.2 目的
透過 MJSK 數位學習網，一般使用者不必受到空間的限制，只要有電腦就能 夠自由選擇喜歡的課程內容來進行學習，以多媒體教材取代了平鋪直敘的文字教 學，讓學習變得更加生動，使用者也可以分享自己的學習心得與同儕們互相交流， 無論是學習的時間或地點都更具有彈性，而且與人互動的範圍也從傳統的班級區 域擴大至無邊無界的網路區域。隨著網際網路的進步，遠距離的學習方式也跟著 蓬勃發展，在數位學習網站中學習者能輕鬆點閱教材、瀏覽資訊；經由網路連線 進行同步或非同步的學習，進一步在學習的即時性上，有了更好的成效。透過瀏 覽器上網，不須使用額外的工具，簡單方便，迴響與引用的功能，這些特性正好 適用於教學上，本組希望達到「快速」建置學習系統、「即時」更新教材內容、 「適切」達到互動與學習社群的目的，並透過社群網站的分享和口碑傳遞，快速 的增加知名度。1.3 限制
a.由於[MJSK - 數位學習網]網站尚未完整架設，功能上將未能配合設計需求。 b.目前也沒有與教職員、教授合作所以僅能提供部分教材供一般使用者點選。 c.架設者程式語言能力尚未精通，部分功能尚未完整架設。 d.因網站尚未設置於伺服器上，手機瀏覽畫面未能連線。1.4 關鍵字定義
社群網站、數位學習、MJSK -數位學習網、FACEBOOK、粉絲團、線上測驗、題 庫、教材。第二章 文獻探討
本章共包含四小節，第一節簡介社群與數位學習的內容；第二節介紹社群 與數位學習系統；第三節介紹社群與數位學習系統發展現況；第四節則探討相關 數位學習網站的功能。2.1 社群與數位學習簡介
「網路社群」指的是將實體社會中的社區、團體概念延伸到網路上，網友可 以依據各項宗旨在社群網站中成立不同的團體，並藉此進行聯絡與溝通，作為一 種新興社區營造的網路社群，最大的意義是在於：網路社群利用人有與其他人產 生互動、情感維繫以及得到更多資訊的需求，藉此提供一個虛擬空間，讓關心相 同主題的使用者群聚在一起並且分享資訊。因此，網路社群等於免費提供了一個 虛擬的交流空間，讓有共同需求的人可以很方便且無時差地擁有討論的空間以及 自由的資訊空間。然而網路社群與學習結合後，由學員互相分享知識、互相支援 或討論等而形成之學習社群，以知識分享、知識貢獻及互信等為基礎，共同學習、 反思及成長；數位學習透過有線或無線網路，取得數位教材，進行線上之學習活 動。因此包括數位學習工具(行動載具)使用、數位學習網路環境建置、數位教材 內容開發以及數位學習活動設計等。數位學習透過網際網路，即時傳遞各種資訊 及知識給所需之人，包含正式的訓練及課程，也包括資訊的傳遞及網路上的互動， 由電子工具來進行線上學習，強調提供參考者間同步即時討論或合作的能力。2.2 社群與數位學習網簡介
社群與數位學習系統就是利用網路讓一般使用者進行線上學習並且以知識 分享、知識貢獻及互信等為基礎，共同學習的系統，倘若建置線上學習平台，可 協助教師快速建置、累積、分享數位教材及題庫；則後台管理的部分有線上教材 編輯、題庫評量、了解一般使用者之建議…等。2.3 社群與數位學習系統發展現況
圖 2 - 1 數位學習分析 由於科技及產業分工，加入知識經濟、服務科學產業的發展，今日社會中幾 乎人人都有其專業的知識和技能，透過網路的媒介、可以讓多數人聚集在一個空 間裡共同溝通與分享經驗。因此，數位化社會中，每個人都可以是知識的提供者， 也可以是獲得知識的分享者，人與人相互間的互動，就是一個社群的形成。無論 是專家或新手，都可以透過網路科技，採互動的模式，在網路空間裡共同協商和 討論，一起找出解決問題的方法，並從中創新彼此的知識，透過社群網站的凝聚 力，很快的就成為許多人的熱門話題，社群網站也將逐漸成為數位時代的新標的。 現今許多學校都有導入數位學習系統，讓學生能上網自行學習，而企業也用數位 學習系統來訓練員工，以節省訓練之人事成本。原有的數位學習在加上與社群網 站的結合，或許就會開啟學習的新紀元。2.4 數位學習網之探討
此節將列出部分數位學習網站來分析其功能性及優缺點，把優點視為我們的 理想目標；缺點當作改良基準，整理內容如下： 2.4.1 撇步王線上教學網 http://www.peboking.com/modules/booklists/ 圖 2 - 2 撇步王線上課程總覽圖 圖 2 - 3 撇步王影片教學介面圖圖 2 - 4 撇步王的聯絡我們圖 以上展示了網站的課程總覽、視頻介面與聯絡我們功能，撇步王的課程總覽 一目瞭然，分門歸類的整理讓一般使用者可以快速的找到自己想要看的內容。影 片教學介面是簡單易懂的風格，右手邊的下拉式選單可以直接選擇課程章節，聯 絡我們的功能則是使用e-mail帳號寄送訊息，這方面也許可以結合目前最熱門的 社群網站留言板會更為生動。 2.4.2 省三數位教學平台 http://hi.sses.tc.edu.tw/el/ 圖 2 - 5 省三數位教學平台首頁圖
圖 2 - 6 省三數位教學平台課程總覽圖 圖 2 - 7 省三教學平台教學介面圖 省三數位教學平台的網頁風格非常簡約，網頁中的教學教材主要於左邊區 塊做選擇，學習介面顯得單調空洞，若能加入些許視覺效果也是不錯的。部 分課程的播放器無法給一般使用者自由調整，操作上不太方便，若能將播放 器規格統一會比較好，整體比較起來是遜色於撇步王線上教學網。
第三章 專題規劃
3.1 專題規劃目標
近年來數位學習風氣愈發高漲，儼然已經成為現代學習不可或缺的一環，所 以本組將建構一個線上學習網站來做為這次專題的內容，規劃目標如下： 1. 建置一個學習網站平台。 2. 可在網站上瀏覽教材及進行測驗。 3. 能夠透過社群分享的力量來進行更多的知識交流。 4. 一般使用者能使用測驗系統來檢視自己的學習成效。3.2 系統開發方法
3.2.1 專題流程
本專題的開發將使用生命週期模式(SDLC)，各步驟敘述如下： 表 3 - 1 SDLC 專題流程表 S D L C 階 段 與 系 統 相 關 之 工 作 產 出 預 定 完 成 日 期 規 劃 a.資料收集 b.撰寫計畫書 專題企劃書 2012/05/30 分 析 需求分析: a.資料集蒐及整合 b.相關程式資料蒐 集、整合 系統分析書 2012/07/30 系統分析: USE CASE 圖 設 計 a.網頁架構設計 b.網頁程式設計 系統設計報告書 2012/11/30 建 置 網站架構建置 功能完整的介面 2012/11/30 運 作 與 維 護 a.上線 b.測試 c.撰寫使用手冊 d.撰寫結案報告 e.維護 結案報告書使用 手冊 2012/12/303.2.2 專題分工
表 3 - 2 專題分工表 組員 分工項目 呂 亭 寬 卓 明 宏 蔡 欣 航 陳 嘉 豪 訂 定 專 題 主 題 ● ● ● ● 搜 集 資 料 ● ● ● ● 架 構 分 析 ● ● ● ● 需 求 分 析 ● ● ● ● 硬 體 架 構 圖 ● ● ● 開 發 流 程 圖 ● ● 系 統 架 構 圖 ● ● ● ● 系 統 甘 特 圖 ● ● 文 獻 整 理 ● ● ● 撰 寫 計 畫 書 ● ● ● ● 使 用 案 例 圖 ● ● ● 網 頁 架 構 設 計 ● ● ● 網 頁 程 式 設 計 ● ● 美 工 ● ● 網 頁 版 面 製 作 ● ● 網 頁 程 式 製 作 ● ● ● 系 統 測試 與更 正維 護 ● ● ● ● 撰 寫 結 案 報 告 ● ● ● ●3.3 系統架構
3.3.1 系統架構圖
3.4 專題設備
本專題所需使用之軟硬體有：
a.軟體方面： PhotoshopCS5，Photoimpact12，Visual Studio 2010 ，Access 2007， Word2007，PowerPoint2007 ，eclipse。 b.硬體方面：電腦，智慧型手機。
3.5 專題時程規劃
本專題由開始規劃至系統完成，預計會有下列幾項工作： a.選主題 b.主題研究 c.撰寫企劃書 d.系統分析 e.系統設計 f.網站架構 g.網站設計 圖 3 - 2 SDLC 專題流程圖第四章 專題成果
4.1 功能的需求
4.1.1 需求描述
1. 一般使用者可以瀏覽本學習網站發展歷史。 2. 一般使用者可以在網站創建會員帳號 。 3. 一般使用者可以利用此網站看到其他教學網站相關資訊。 4. 一般使用者可以從此網站連結到 Facebook 粉絲團。 5. 一般使用者可以在網站中瀏覽關於我們。 6. 一般使用者可以在網站中瀏覽關於數位學習。 7. 會員可以使用線上學習。 8. 會員可以使用線上測驗。 9. 會員可以使用線上學習快速連結。 10. 會員可以修改帳號資料。 11. 會員可以新增考試題目。4.1.2 事件
1. 一般使用者觀看發展歷史。 2. 一般使用者加入會員。 3. 一般使用者登入系統。 4. 會員使用線上教學。 5. 會員使用線上測驗。 6. 會員修改會員資料。 7. 會員聯絡我們。表 4 - 1 事件表 事 件 觸 發 器 來 源 活 動 回 應 目 的 地 一般使用者瀏 覽 發 展 歷 史 發 展 歷 史 一 般 使 用 者 提 供 發 展 歷 史 歷 史 瀏 覽 一 般 使 用 者 一 般 使 用 者 加 入 會 員 會 員 加 入 一 般 使 用 者 提 供 會 員 加 入 會員加入成功 一 般 使 用 者 一 般 使 用 者 登 入 系 統 系 統 登 入 一 般 使 用 者 提 供 登 入 系 統 一般使用者登 入 成 功 一 般 使 用 者 會 員 使 用 線 上 教 學 線 上 教 學 會 員 顯 示 教 材 線上教學成功 會 員 會 員 使 用 線 上 測 驗 線 上 測 驗 會 員 顯 示 題 庫 線上測驗成功 會 員 會 員 修 改 會 員 資 料 修 改 會 員 資 料 會 員 提 供 資 料 修 改 修 改 成 功 會 員 會員聯絡我們 聯 絡 管 理 者 會 員 提 供 表 格 填 寫 傳送意見成功 管 理 者 表 4 - 2 詞彙表 詞彙 解釋 附註 登入 當瀏覽線上教學、測驗及聯絡我們時需登入會員 會員資料 會員註冊時所填寫之資訊 教材 線上學習內之學習資料 題庫 線上測驗內之測驗題庫 發展歷史 本網站逐步發展之軌跡 聯絡我們 會員可提供意見給予參考
4.2 系統分析
4.2.1 使用案例圖
4.2.2 Use Case 描述
Use Case Specification：發展歷史 1.名稱(Name)： 發展歷史 2.參與者(Actors)： 一般使用者、會員與管理員 3.前提(Pre-Condition)： 已經連結網路並開啟首頁 4.成功條件(Successful Post-Conditions)： 顯示發展歷史 5.失敗條件(Unsuccessful Post-Conditions)： 無法顯示網頁 6.事件路徑 6.1 基本路徑 一般使用者 系統回應 1. TUCBW:輸入首頁網址 2.系統顯示首頁 3.一般使用者點選發展歷史 4.TUCEW:系統顯示發展歷史 6.2 其他/例外路徑
Use Case Specification：聯絡我們 1.名稱(Name)： 聯絡我們 2.參與者(Actors)： 一般使用者、會員與管理員 3.前提(Pre-Condition)： 已連結網路並開啟首頁 4.成功條件(Successful Post-Conditions)： 顯示聯絡我們 5.失敗條件(Unsuccessful Post-Conditions)： 無法顯示網頁 6.事件路徑 6.1 正常路徑 一般使用者 系統回應 1. TUCBW:輸入首頁網址 2.系統顯示首頁 3.一般使用者點選聯絡我們 4.系統顯示需登入會員方可瀏覽 5.一般使用者輸入登入資訊 6.登入成功 7.會員輸入個人資料及意見點選確定 送出 8.系統跳出確定送出訊息視窗 9.一般使用者點選確定 10. TUCEW:系統將意見填入資料庫 6.2 其他/例外路徑 6.2.1 一般使用者登入失敗 步驟 6.登入失敗跳回首頁 6.2.2 一般使用者點選重新填寫 步驟 5.一般使用者點選重新填寫 步驟 6.系統刪除一般使用者所填寫的資料
Use Case Specification：線上學習 1.名稱(Name)： 線上學習 2.參與者(Actors)： 一般使用者、會員 3.前提(Pre-Condition)： 已連結網路並開啟首頁 4.成功條件(Successful Post-Conditions)： 顯示瀏覽教材 5.失敗條件(Unsuccessful Post-Conditions)： 無法顯示網頁 6.事件路徑 6.1 正常路徑 一般使用者 系統回應 1. TUCBW:輸入首頁網址 2.系統顯示首頁 3.一般使用者在首頁點選線上學習 4.系統顯示需登入會員方可瀏覽 5.一般使用者輸入登入資訊 6.登入成功 7.會員點選學習教材 8. TUCEW:系統顯示教材頁面 6.2 其他/例外路徑 6.2.1 一般使用者登入失敗 步驟 6.登入失敗跳回首頁
Use Case Specification：加入會員 1.名稱(Name)： 加入會員 2.參與者(Actors)： 一般使用者 3.前提(Pre-Condition)： 一般使用者已連結網站並開啟首頁，必須點擊加入會員，進入加入會員頁面。 4.成功條件(Successful Post-Conditions)： 顯示加入會員網頁，填寫資料，成功加入會員 5.失敗條件(Unsuccessful Post-Conditions)： 系統顯示錯誤訊息 6.事件路徑 6.1 正常路徑 一般一般使用者 系統回應 1.TUCBW:輸入首頁網址 2.系統顯示首頁 3.一般使用者在首頁點選註冊 4.系統顯示建立新帳號頁面 5.一般使用者填寫會員資料點選確定 6.系統將新會員資料存入資料庫 7.系統跳出成功加入會員視窗 8.一般使用者點選確定 9.TUCEW:系統回首頁 6.2 其他/例外路徑 6.2.1 一般使用者點選返回 步驟 3.一般使用者點選返回 步驟 4.系統返回首頁 6.2.2 一般使用者點選重新填寫 步驟 5.一般使用者點選重新填寫 步驟 6.系統清除所輸入的資料
Use Case Specification：修改會員資料 1.名稱(Name)： 修改會員資料 2.參與者(Actors)： 會員與管理員 3.前提(Pre-Condition)： 已經連結網路並成功登入首頁，會員必須先登入，才能修改資料。 4.成功條件(Successful Post-Conditions)： 顯示修改成功 5.失敗條件(Unsuccessful Post-Conditions)： 無法顯示網頁 6.事件路徑 6.1 正常路徑 一般使用者 系統回應 1.TUCBW:會員在首頁點選修改會員資料 2.系統顯示會員基本資料 3.會員輸入欲更改的資料點選確定 4.系統將資料存入資料庫 5.系統跳出修改成功視窗 6.會員點選確定 7.TUCEW:系統顯示修改成功並回 到修改會員資料頁面 6.2 其他/例外路徑 6.2.1 會員點選重新填寫 步驟 3.會員點選重新填寫 步驟 4.系統清除所輸入的資料
Use Case Specification：線上測驗 1.名稱(Name)： 線上測驗 2.參與者(Actors)： 一般使用者與會員 3.前提(Pre-Condition)： 已經連結網路並成功開啟首頁，會員必須先登入，才能進行測驗。 4.成功條件(Successful Post-Conditions)： 顯示題庫資料並進行測驗 5.失敗條件(Unsuccessful Post-Conditions)： 無法顯示網頁 6.事件路徑 6.1 正常路徑 一般使用者 系統回應 1.TUCBW:會員在首頁點選線上測驗 2. 系統顯示需登入會員方可瀏覽 3.一般使用者輸入登入資訊 4. 登入成功 5.會員點選課程測驗 6.系統顯示選單及欲測驗的題庫 型錄 7.會員瀏覽使用者規則並開始測驗 8.系統跳出測驗結果並結束視窗 9.會員點選確定 10. TUCEW:系統公佈成績並回到 線上測驗頁面 6.2 其他/例外路徑 6.2.1 一般使用者登入失敗 步驟 6.登入失敗跳回首頁
Use Case Specification：忘記密碼 1.名稱(Name)： 忘記密碼 2.參與者(Actors)： 一般使用者與會員 3.前提(Pre-Condition)： 一般使用者已連結網站並開啟首頁，必須點擊忘記密碼，進入忘記密碼頁面。 4.成功條件(Successful Post-Conditions)： 顯示忘記密碼網頁，填寫資料，成功查詢密碼 5.失敗條件(Unsuccessful Post-Conditions)： 資料輸入不正確，無法查詢密碼 6.事件路徑 6.1 正常路徑 一般使用者 系統回應 1.TUCBW:會員在首頁點選忘記密碼 2.系統顯示忘記密碼頁面 3.一般使用者輸入資料並點擊送出 4.查詢成功 5.顯示查詢成功之密碼 6.一般使用者點選確定 7. TUCEW:頁面回到首頁 6.2 其他/例外路徑 6.2.1 密碼查詢失敗 步驟 4.查詢失敗，資料輸入不正確。 步驟 5.系統顯示重新輸入資料。
Use Case Specification：維護網站 1.名稱(Name)： 維護網站 2.參與者(Actors)： 管理者 3.前提(Pre-Condition)： 管理者必須登入 4.成功條件(Successful Post-Conditions)： 顯示教材及題庫資訊 5.失敗條件(Unsuccessful Post-Conditions)： 無法顯示網頁 6.事件路徑 6.1 正常路徑 一般使用者 系統回應 1.TUCBW:管理者點選管理教材及題庫 資訊 2.系統顯示欲管理的教材及題庫資訊 3.管理者點選修改教材與題庫資訊 4.系統顯示修改教材與題庫資訊頁面 5.管理者輸入修改資訊，點選確定 6.系統跳出是否更改教材及題庫的訊息視窗 7.管理者點選確定 8.系統將修改過的教材及題庫資訊存入資料 庫 9.TUCEW:系統回到管理教材及題庫資訊頁面 6.2 其他/例外路徑 6.2.1 管理者點選增加 步驟 3.管理者點選增加教材及題庫 步驟 4.系統顯示增加教材及題庫頁面 步驟 5.管理者增加資訊，點選確定 6.2.2 管理者點選刪除 步驟 3.管理者點選刪除教材及題庫 步驟 4.系統顯示刪除教材及題庫頁面 步驟 5.管理者刪除資訊，點選確定 6.2.3 管理者點選取消 步驟 5.管理者點選取消 步驟 6.系統返回教材及題庫資料頁面 6.2.4 管理者點選取消 步驟 7.管理者點選取消 步驟 8.系統返回管理教材及題庫資訊頁面
4.2.3 循序圖
圖 4 - 2 循序圖-註冊會員
圖 4 - 4 循序圖-忘記密碼
圖 4 - 6 循序圖-線上學習
圖 4 - 8 循序圖-聯絡我們
圖 4 - 10 循序圖-關於我們
4.3 系統介紹
圖 4 - 12 首頁
(1)MJSK 數位學習-首頁 首頁以創作資訊以及美工圖片來呈現。
圖 4 - 13 發展歷史
圖 4 - 14 關於數位學習
(3)MJSK 數位學習-關於數位學習 數位學習之簡介
圖 4 - 15 新增測驗題目
圖 4 - 16 線上學習-未登入
(5)MJSK 數位學習-線上學習-未登入 一般使用者如未登入無法觀看。
圖 4 - 17 線上學習-登入後
圖 4 - 18 線上學習-教材
(7)MJSK 數位學習-線上學習-教材 會員能在此頁面中利用影片學習。
圖 4 - 19 線上測驗-未登入
圖 4 - 20 線上測驗-登入後
(9)MJSK 數位學習-線上測驗-登入後 會員可先觀看使用者須知，在進行測驗。
圖 4 - 21 課程測驗
圖 4 - 22 線上測驗-結果
(11)MJSK 數位學習-線上測驗-結果 會員可得知成績及考試題目、答案及解析。
圖 4 - 23 聯絡我們-未登入
圖 4 - 24 聯絡我們
(13)MJSK 數位學習-聯絡我們 會員如有疑問可以留下訊息。
圖 4 - 25 會員註冊
圖 4 - 26 忘記密碼
(15) MJSK 數位學習-忘記密碼 會員忘記密碼時，運用此功能找回密碼。
圖 4 - 27 修改密碼
圖 4 - 28 會員登入 (17) MJSK 數位學習-會員登入 一般使用者可在此輸入自己的帳號。 圖 4 - 29 會員註冊 (18) MJSK 數位學習-會員註冊 一般使用者登入後畫面，出現會員暱稱。 圖 4 - 30 MJSK 數位學習 (19) MJSK 數位學習 瀏覽者可透過圖片可快速找到此網頁。
圖 4 - 31 QR 碼
(20) MJSK 數位學習-QR 碼 經過手機掃描後可快速連結粉絲團。
圖 4 - 32 線上學習快速連結
圖 4 - 33 留言板
(18) MJSK 數位學習-留言板 一般使用者透過留言與其他使用者交流。
圖 4 - 34 粉絲團
4.4 使用者手冊
圖 4 - 35 首頁 (1) 首頁： 上面有本網站的網頁內容總覽 1.發展歷史 2.關於數位學習 3.聯絡我 們 4.線上測驗 5.線上學習、左側有相關網站連結、右側有官方粉絲團連結、 右下角則是本網站 QR 碼。圖 4 - 36 瀏覽教材 (2) 瀏覽教材： 點選線上學習後進入課程頁面選擇，選定後點選右方學習則開始播放 教學影片，也可登入社群網站使用留言功能。 圖 4 - 37 線上學習 (3) 線上學習： 進入頁面後隨即播放教學影片。
圖 4 - 38 新增測驗題目 圖 4 - 39 測驗 (4) 新增測驗題目、線上測驗： 會員可以新增測驗題目，也可進行線上測驗，也可登入社群網站使用 留言功能。
圖 4 - 40 測驗結果 (5) 測驗結果： 測驗結束後顯示成績與正確答案。 圖 4 - 41 聯絡我們 (6) 聯絡我們： 瀏覽者在網頁的右上角點選聯絡我們將連到此網頁，如果對網頁有建 議的話可以使用此系統與我們聯絡。
圖 4 - 42 註冊帳號 (7) 註冊帳號： 使用者可以點選首頁右上角的註冊進入建立新帳號，在此網站建立個 人的基本資料之後可以使用線上教學、線上測驗。 圖 4 - 43 登入帳號 (8) 登入帳號： 建立新帳號後可以點選登入，進入登入頁面登入個人帳號。
圖 4 - 44 登入畫面 (9) 登入畫面： 登入後的畫面使用者的姓名會在右上角，也有其他功能可以使用。 圖 4 - 45 修改密碼 (10) 修改密碼： 會員點選修改密碼可以修改個人密碼。
圖 4 - 46 忘記密碼
圖 4 - 47 忘記密碼認證
(11) 忘記密碼：
圖 4 - 48 粉絲團 (12) 粉絲團：
圖 4 - 49 留言板 (13) 留言板： 使用者可透過此功能留言與其他使用者互相勉勵學習進度、交流學習心 得。 圖 4 - 50 行動裝置 (14) 行動裝置： 使用者可藉由行動裝置開啟本網頁進行相關功能。
第五章 結論與建議
5.1 結論
在成果方面，本組專題由觀看其他教學網站以及所有相關文獻，製作出屬 於本組特色和創新的教學網站。藉由這次專題更加入了許多創意，讓各個瀏覽 者耳目一新、印象深刻，本組重新規劃了教學網站的許多架構，以清晰明瞭的 原則進行規劃，打造出快速瀏覽、深刻留心的全新介面，增設了社群留言板功 能，能夠讓瀏覽此教學網站的一般使用者互相交流，還能發佈訊息在社群網站 的塗鴉牆上分享自己的成績與想法，更可以提出問題來與管理者討論，管理者 也能經由網站迅速的解決所有瀏覽者的疑問。 本專題希望藉由配合社群網站的功能，讓一般使用者再學習之餘，還能達 到即時分享、互相激勵的效果。為了清楚了解現今教學網站的架構，本組也參 考許多有關線上教學的多媒體網頁，希望能夠打造出創新、獨特和表達現代年 輕族群的想法之網站，也希望能藉由這次的教學網站製作，展現出本組的創意 構想並不是只有影集、圖、文介紹這種死板的敘述，而是能讓更多的一般使用 者達到即時分享的學習新樂趣。5.2 建議與未來展望
經過整體研究以及製作流程後，因為時間及能力都有一定的限度，本專題 仍有許多能夠改進的地方，於是討論出幾項未來發展的項目，用以改進及加強 此教學網站，使之能夠成為一個更完全更豐富的教學網站，並帶給一般使用者 更多的便利性甚至是社會經濟價值。 1. 此網站未經過瀏覽者的建議及改進，所以仍然有許多可能需要改進的地方， 本組專題希望藉由瀏覽者以及各位評審老師所提供的意見，將其改善至更 完善周全。 2. 多媒體網站目前以圖片文字檔為主，希望日後有更充裕的時間能製作出生 動的動畫頁面，讓瀏覽者更能夠感受到教學網的魅力。參考文獻
1. 維基百科 http://zh.wikipedia.org/wiki/%E8%A1%8C%E5%8B%95%E5%AD%B8%E7%BF% 92，2012/04/11 2. 數位學習之淺論， http://www.shs.edu.tw/works/essay/2008/10/2008102423160665.pdf，2012/05/02 3. 神魂顛倒資訊論壇，http://bbs.flash2u.com.tw/index_153.html ， 2012/05/09 4. ASP.NET 3.5 網頁製作徹底研究[使用 C#] 作者:陳會安 ， 2012/05/09 5. Tad 教材網，http://www.tad0616.net/modules/tad_book3/page.php?tbdsn=68 ， 2012/05/23 6. 阿里西西-網頁開發者團隊 http://js.alixixi.com/read_81315_161.html ， 2012/09/19 7. Facebook Developers-comments https://developers.facebook.com/docs/reference/plugins/comments/ ，2012/09/19 8. CSS3 語法 http://css.beyes.tw/ ，2012/10/03 9. SQL AND OR – SQL 語法教學 http://www.1keydata.com/tw/sql/sqlandor.html ， 2012/10/03 10. Flycan – CSS 語法教學-網頁設計 http://www.flycan.com/article/category/css/page/4 ，2012/10/03 11. UML 物件導向系統分析與設計 作者:游峰碩 2012/10/03 12. 撇步王線上教學網 http://www.peboking.com/modules/booklists/，2012/10/31 13. 省三數位教學平台 http://hi.sses.tc.edu.tw/el/，2012/10/31附錄
會議記錄
專題名稱 日期 2012/3/28 地點 A103 實驗室 主席 杜建志 紀錄 陳嘉豪 出席者 呂亭寬、卓明宏、蔡欣航、陳嘉豪 時間 12:00 內容 第一次的會議，討論之後集會時間&注意事項 決議 每周三中午十二點固定開會，開始尋找書籍學習 導師建議 利用圖書館及網路搜尋進行學習 日期 2012/4/11 地點 A103 實驗室 主席 杜建志 紀錄 陳嘉豪 出席者 呂亭寬、卓明宏、蔡欣航、陳嘉豪 時間 12:20 內容 兩組報告學習結果，教大家使用學習的程式 決議 學習程度不夠，報告的同學也未能掌握教導方式 導師建議 多多練習，不懂可問老師或上網查詢 日期 2012/4/18 地點 A103 實驗室 主席 杜建志 紀錄 陳嘉豪 出席者 呂亭寬、卓明宏、蔡欣航、陳嘉豪 時間 12:30 內容 參考比賽範本、討論題目方向 決議 決定做數位學習網站，利用資料庫存取資料 導師建議 多參考其他數位學習網站，找出優缺點 日期 2012/4/25 地點 A103 實驗室 主席 杜建志 紀錄 陳嘉豪 出席者 呂亭寬、卓明宏、蔡欣航、陳嘉豪 時間 12:00 內容 提出網站題目和架構 決議 數位學習網站多未整合社群網站，決定製作與社群網站結合之平台 導師建議 多多參考其他與社群網站結合之網頁 日期 2012/5/2 地點 A103 實驗室 主席 杜建志 紀錄 陳嘉豪 出席者 呂亭寬、卓明宏、蔡欣航、陳嘉豪 時間 13:00 內容 決定專題題目和架構 決議 製作數位學習網與社群網站結合 導師建議 查詢較適合的軟體、書籍日期 2012/5/9 地點 A103 實驗室 主席 杜建志 紀錄 陳嘉豪 出席者 呂亭寬、卓明宏、蔡欣航、陳嘉豪 時間 13:00 內容 確定企劃書內容要件 決議 確定企劃書內容項目 導師建議 盡速完成企劃書初稿 日期 2012/5/16 地點 A103 實驗室 主席 杜建志 紀錄 陳嘉豪 出席者 呂亭寬、卓明宏、蔡欣航、陳嘉豪 時間 13:20 內容 指出企畫書須修改處，完成後要開始設計版型 決議 補使用案例圖，架構圖簡化，文獻資料尚需修改 導師建議 趕緊修改後再審件 日期 2012/5/23 地點 A103 實驗室 主席 杜建志 紀錄 陳嘉豪 出席者 呂亭寬、卓明宏、蔡欣航、陳嘉豪 時間 15:20 內容 企畫書修行之執行，問題探討 決議 尚須修改，細節與格式須注 導師建議 部分內容有誤，還有其他地方需修改 日期 2012/9/19 地點 A103 實驗室 主席 杜建志 紀錄 陳嘉豪 出席者 呂亭寬、卓明宏、蔡欣航、陳嘉豪 時間 12:00 內容 討論這學期會議時間和網站的進度 決議 每周三中午十二點，其餘有空時間到實驗室製作 導師建議 須加快腳步 日期 2012/10/3 地點 A103 實驗室 主席 杜建志 紀錄 陳嘉豪 出席者 呂亭寬、卓明宏、蔡欣航、陳嘉豪 時間 12:30 內容 是否將網頁納入行動裝置 決議 查閱圖書館書籍或網上查詢 導師建議 納入行動裝置更好，可詢問老師 日期 2012/10/31 地點 A103 實驗室 主席 杜建志 紀錄 陳嘉豪 出席者 呂亭寬、卓明宏、蔡欣航、陳嘉豪 時間 15:00 內容 網站須加入哪些功能 決議 線上測驗系統 導師建議 多多參考書籍或是網路查詢
日期 2012/11/21 地點 A103 實驗室 主席 杜建志 紀錄 陳嘉豪 出席者 呂亭寬、卓明宏、蔡欣航、陳嘉豪 時間 18:20 內容 討論企劃書還需修改的地方 決議 修改完後將資料 Email 給指導老師 導師建議 盡快修改完成 日期 2012/12/5 地點 A103 實驗室 主席 杜建志 紀錄 陳嘉豪 出席者 呂亭寬、卓明宏、蔡欣航、陳嘉豪 時間 23:10 內容 製作 PPT 檔和海報 決議 將 PPT 和海報圖檔 Email 給指導老師 導師建議 簡單、明瞭。
