56
嶺東科技大學資訊網路系 專題研究報告 上晴托嬰中心網站建置 指導老師:謝偉強 教授 員:蔣宗儒、徐斌盛 呂宥霖、陳則安 中華民國一百零六年五月

嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

Page 1: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

嶺東科技大學資訊網路系

專題研究報告

上晴托嬰中心網站建置

指導老師:謝偉強 教授

組 員:蔣宗儒、徐斌盛

呂宥霖、陳則安

中華民國一百零六年五月

Page 2: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

I

預計於一百零六年撰寫完成

感謝第二次口試委員謝偉強老師、謝景順老師及鄭育欣老師蒞臨指導。

蔣宗儒、呂宥霖

謹誌

徐斌盛、陳則安

中華民國一百零六年五月於嶺東

Page 3: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

II

誌 謝

本專題製作得以順利完成,首先要感謝指導我們的謝偉強老師,細

心引導我們,耐心的協助我們,並賜予諸多寶貴意見,讓我們更能有

效的應用在此專題,克服研究過程中所面臨的困難,給予我們最大的

協助,使本專題得以順利完成。

在專題口試期間,感謝廖惠雯老師、謝景順老師對於當下專題內容

的批評和指導,使得我們專題內容更加完善,並在口試結束後,將會

加以改善。

最後,我們要感謝「上晴托嬰中心」為本次專題提供研究主題以及

相關資訊,使得本研究的專題更有實用性,也謝謝各位組員們展現出

團隊合作的精神,在製作期間的互助和努力,共同付出以完成本報告。

再一次感謝以上所提及的老師與所有曾經給予我們協助的人,在此

一併致上最高的謝意。

蔣宗儒、呂宥霖

徐斌盛、陳則安謹誌

中華民國一百零六年五月於嶺東科技大學

Page 4: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

III

摘 要

隨著時代的變遷,少子化的問題越來越嚴重,招生工作也變成每一

所托嬰中心最為重要的課題,也因為少子化的問題,家長對於托兒機

構的品質要求也益發注重,再加上政府對於評鑑制度越來越嚴謹,使

得一般托嬰機構必須做出一些改變,才能免於被時代所淘汰、忽略。

本專題所合作的業者「上晴托嬰中心」也認知了這點,認為除了原本

擁有的管理模式,還需要一個完善、便利以及容易上手並且客製化的

一個專屬網頁。

合作業者原先是沒有自己的專屬網頁,在與業者溝通和討論後,業

者要求一套專屬的網頁。因此,我們在網頁中多建構了一個針對合作

業者需求的留言板管理系統,使得家長能夠藉由網路直接了解子女每

日在托嬰中心狀況,並且可讓老師和家長線上溝通,讓家長能夠在每

日能夠快速輕易的了解子女在托嬰中心裡學習的狀況。

本研究將藉此專題,建置一個完全專屬於合作業者需求的網頁,並

提供一個線上留言板的溝通管道,使得教師和家長的交流方式更加方

便,協助家長更加了解子女,並可建立良好的互動關係。

關鍵字:上晴托嬰中心、專屬網頁、網站建置

Page 5: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

IV

目 錄

頁次

誌謝 ................................................................................................................... I

摘要 ............................................................................................................... III

目錄 ................................................................................................................. IV

圖目錄 ........................................................................................................... VII

表目錄 ............................................................................................................... X

第一章 緒論 ................................................................................................... 1

1.1 研究背景 ........................................................................................... 1

1.2 研究動機 ........................................................................................... 1

1.3 研究目的 ........................................................................................... 2

1.4 研究流程 ........................................................................................... 3

第二章 文獻探討 ........................................................................................... 4

2.1 網站的建置流程 ............................................................................... 4

2.2 網站媒體資料類型 ........................................................................... 5

2.3 網站建置的實施困境 ....................................................................... 8

2.4 網站比較 ........................................................................................... 8

2.4.1 高雄市小蘋果托嬰中心 ............................................................ 9

Page 6: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

V

2.4.2 臺北市私立拉斐爾托嬰中心 .................................................. 11

2.4.3 網站比較表 .............................................................................. 12

第三章 研究方法 ......................................................................................... 13

3.1 研究系統對象 ................................................................................. 13

3.2 系統需求 ......................................................................................... 13

3.3 研究系統工具 ................................................................................. 14

3.3.1 ASP.NET .................................................................................... 14

3.3.2 Windows Server 2012 ............................................................ 15

3.3.3 SQL Server 2008 .................................................................... 15

3.3.4 Adobe illustrator CS6 ........................................................ 15

第四章 系統分析與實作 ............................................................................. 16

4.1 網站架構 ......................................................................................... 16

4.1.1 前端系統架構 .......................................................................... 17

4.1.2 後端系統架構 .......................................................................... 18

4.2 系統實作 ......................................................................................... 19

4.2.1 關於上晴(使用者端) .............................................................. 19

4.2.2 公佈欄(使用者端) .................................................................. 20

4.2.3 幼兒天地(使用者端) .............................................................. 21

Page 7: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

VI

4.2.4 師資介紹(使用者端) .................................................................. 22

4.2.5 留言板(使用者端) ...................................................................... 23

4.2.6 會員登入(使用者端) .................................................................. 24

4.2.7 會員資料修改(使用者端) .......................................................... 25

4.2.8 公佈欄管理(管理者端) .............................................................. 26

4.2.9 幼兒天地相簿管理(管理者端) .................................................. 27

4.2.10 師資介紹管理(管理者端) .......................................................... 28

4.2.11 留言板管理(管理者端) ............................................................ 29

4.2.12 會員註冊(管理者端) ................................................................ 30

4.2.13 會員管理(管理者端) ................................................................ 31

4.2.14 學生資料管理(管理者端) ......................................................... 32

4.3 ER-model .............................................................................................. 33

第五章 結論與未來展望 ............................................................................. 41

參考文獻 ......................................................................................................... 42

附錄 ................................................................................................................. 43

附錄一:工作分配表 .............................................................................. 44

附錄二:甘特圖 ...................................................................................... 45

Page 8: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

VII

圖目錄

圖.1. 1 研究流程圖 ........................................................................................... 3

圖.2. 1 小蘋果托嬰中心首頁截圖 ................................................................... 9

圖.2. 2 小蘋果托嬰中心網站地圖截圖 ......................................................... 10

圖.2. 3 拉斐爾托嬰中心首頁截圖 ................................................................. 11

圖.2. 4 拉斐爾托嬰中心生活日誌截圖 ......................................................... 11

圖.4. 1 前端系統架構圖 ................................................................................. 17

圖.4. 2 後端系統架構圖 ................................................................................. 18

圖.4. 3關於上晴截圖 ..................................................................................... 19

圖.4. 4公佈欄截圖 ......................................................................................... 20

圖.4. 5幼兒天地相簿截圖 ............................................................................. 21

圖.4. 6師資介紹截圖 ..................................................................................... 22

圖.4. 7留言板留言截圖 ................................................................................. 23

圖.4. 8留言板查看留言截圖 ......................................................................... 23

圖.4. 9會員資料修改截圖 ............................................................................. 24

圖.4. 10學生資料截圖 ................................................................................... 25

圖.4. 11公佈欄管理截圖 ............................................................................... 26

圖.4. 12幼兒天地相簿上傳截圖 ................................................................... 27

Page 9: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

VIII

圖.4. 13幼兒天地相簿管理截圖 ................................................................... 27

圖.4. 14新增師資資料截圖 ........................................................................... 28

圖.4. 15師資介紹管理截圖 ........................................................................... 28

圖.4. 16留言板管理截圖 ............................................................................... 29

圖.4. 17會員註冊截圖 ................................................................................... 30

圖.4. 18會員管理截圖 ................................................................................... 31

圖.4. 19新增學生資料截圖 ........................................................................... 32

圖.4. 20學生資料管理截圖 ........................................................................... 32

圖.4. 21會員關聯圖 ....................................................................................... 33

圖.4. 22會員資料型態 ................................................................................... 33

圖.4. 23管理者關聯圖 ................................................................................... 34

圖.4. 24管理者資料型態 ............................................................................... 34

圖.4. 25公佈欄關聯圖 ................................................................................... 35

圖.4. 26公佈欄資料型態 ............................................................................... 35

圖.4. 27師資註冊關聯圖 ............................................................................... 36

圖.4. 28師資註冊資料型態 ........................................................................... 36

圖.4. 29留言板關聯圖 ................................................................................... 37

圖.4. 30留言板資料型態 ............................................................................... 37

Page 10: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

IX

圖.4. 31學生註冊關聯圖 ............................................................................... 38

圖.4. 32學生註冊資料型態 ........................................................................... 38

圖.4. 33相簿關聯圖 ....................................................................................... 39

圖.4. 34相簿資料型態 ................................................................................... 39

圖.4. 35 ER-MODEL圖 ..................................................................................... 40

Page 11: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

X

表目錄

表.2. 1 網站比較表 ......................................................................................... 12

表.3. 1 研究所用之軟體工具 ......................................................................... 14

Page 12: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

1

第一章 緒論

1.1 研究背景

隨著時代的變遷,網際網路與科技的發展,現代人的生活也越來

越便利,網路上的溝通平台也漸漸的盛行,顯示了資訊科技運用在教

育上的重要性,資訊科技也成為提升國家競爭力的首要目標。

現代社會網路的使用率比以往高,也有越來越多教師善用網路資

源與家長做溝通與聯繫。許多托嬰中心也建立了自己的網站,讓家長

們能透過網路觀看教學環境、師資設備等。網站能透過雙方的觀看與

留言,彼此互動,進而增進親師之間的關係。

1.2 研究動機

由於少子化的問題越來越嚴重,因此許多托嬰中心也紛紛倒閉,

而僅存的托嬰中心也盡力的想招生,所以在網路上的宣傳也做了很多

功課,專屬網站的建置,變成現今的主流。

現代人生活的忙碌,家長常忙於工作,而沒有時間到校詢問教師

子女狀況,也沒有時間到校觀看校方的環境。進而演變出所方擁有自

己的專屬網站,讓家長們能在網頁上詢問到子女們的狀況,也可以觀

看校方的環境。

Page 13: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

2

1.3 研究目的

1. 建置一個方便家長們線上觀看校方的網站。

2. 網站內容提供關於上晴、幼兒天地、公佈欄、留言板、會員系

統以及相關連結功能。

3. 透過網站建置留言板系統,方便家長們更了解自己的子女。

Page 14: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

3

1.4 研究流程

圖.1.1研究流程圖

本專題在確定研究目標後,與全體組員一起訂定出上晴托

嬰中心網站之分析以及架構,由組長分配各項工作給組員,並

藉由每週與指導老師的會議中,於每週的會議時間進行錯誤修

正,直到網頁成形之後組員開始進行測試、除錯,到最後的專

題完成。

訂定主題

研究背景與動機

文獻探討

建置方法與工具

設置網頁架構

網站建置

網站測試

網站建置完成

專題完成

系統評估修正

Page 15: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

4

第二章 文獻探討

2.1網站的建置流程

和一般人所熟悉的軟體一樣,網站也是需要一套標準建置流程來建

立的;而網站建置流程是源自於軟體建置流程,有研究指出,許多的

軟體專案無法完全發揮原本設定功能的原因中,其中缺乏使用者的需

求與規格的不完整及需求與規格的變更就佔了大部分。比起軟體開發,

網站建置顯著存在著更多的複雜與不確定因素,所以再建置網站之前

就應該進行專案管理,好好的規畫每一個步驟。[1]

連智洋(2000)提出以使用者為中心的網頁設計方法四個階段,如下

簡述。

1、完整需求分析:網站任務、使用者的種類、目的與使用方法。

2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的

概念及所需的支持系統舆資料。

3、導覽模型設計:以概念模型為基礎,以業者特性及需求為依歸,製

作滿足各種使用者資訊需求的網頁規格與網站模型。

4、實作:再根據前述規格將之實作出。[1]

Page 16: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

5

從上述學者研究指出,可以發現網站的建置流程,第一步就像是使

用者的需求分析;第二步才是設計整體概念,第三步就是實際的網站

建置;接下來就是測試評估與維護網站。如果我們把第三步實際建置

階段再細分為程式設計與資料充實兩個步驟,將發現新成立的五個步

驟,會與 ADDIE系统設計模式非常相似。因此本專題就以 ADDIE模式

分析、設計、發展、實施與評鑑來建置托嬰中心網站。分析就是文獻

探討以及托嬰中心業者需求分析;設計就是網站整體的規畫包含版面

配置、網站設計等;發展就是實際建置網站的開始,也就是程式設計

的部分;實施就是將托嬰中心的資料一件一件,一筆一筆地新增至網

站上;評鑑就是網站使用一段時間後,托嬰中心業者會評估網站是否

達到預期的目標。[1]

2.2網站媒體資料類型

依據上一個小節之網站建置流程,可以知道網站程式設計完成,也

就是網站初期建構好了之後,接著將資料一筆一筆地新增或編輯。但

是這些資料有許多不同的類型。 [1]

網站所要分享的資料有許多種形式,各類型資料統稱為媒體。所謂

媒體(media)就是傳遞信息的媒介,例如我們用文字、語言來表達意

Page 17: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

6

見及傳遞文化,透過聲音來交換訊息,以及使用圖片表達結果或意念

等。

教學媒體的種類繁多,依多媒體的形式來區分,則可分為文字、聲

音、影像、動畫。網站內容的多樣性,一般網站可包含的媒體種類有

純文字、繪圖、照片、動畫、聲音、電腦應用軟體、影片等。一般平

面的媒體,只能進行單向的傳播,而網站的使用者卻多不只是看在「看」

網頁,還需要互動的介面設計。網際網路之所以會成為現在發展最快

的媒體,主要的原因之一是在於網站所提供與使用者的直接互動。媒

體模式區分為大眾媒體模式及電腦網路互動模式。還指出大眾媒體模

式之資料有靜態的文字或圖像,動態的音頻、視頻或體驗(觸覺、嗅

覺感官)。[2]

依據以上的說明,我們歸納出網站在建置上必須有兩種模式,一為

單向傳播資料,有文字、圖畫、照片、其他文件;另一為雙向互動資

料,有留言板。單向傳播資料如同過 web1.0 時代,只有網站提供資料

給使用者。雙向傳播資料,就像是現今 web2.0時代,強調網站與訪客、

使用者之間的互動性。[2]

這些資料類型,如何建置在托嬰中心網站上呢?我們的設計如下:

Page 18: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

7

(ー)單向傳播資料:

1.文字:設計欄位,直接線上新增編輯,存入資料庫內。

2.圖片、照片、其他文件等檔案:先設計將檔案上傳至網站平台內,

並將檔案資訊記錄於資料庫中,透過程式設計連結在網站上呈現。

(ニ)雙向傳播資料:

1.留言板:設計欄位,提供給家長線上提問或討論之用。

本專題托嬰中心網站建置,在網站媒體資料類型方面,單向傳播資

料可以直接利用網頁線上編輯,將圖文資料編輯在網頁上;而雙向互

動資料則必須另外設計留言板網站功能。

Page 19: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

8

2.3網站建置的實施困境

網站成為親師溝通的另一個工具,具有儲存資料、傳遞訊息、且內

容保密等多項功能,雖然有上述所說的幾項優勢,但在現今的環境下,

托嬰中心全面使用網站還是有它的困難所在,例如:意外突發事件的

發生,突然的停電、網路斷線、電腦當機等都是不可避免的非人為因

素,都會增加溝通上的不方便,因此還要再搭配其他的聯絡方式,才

能補強這方面的不足。[3]

2.4 網站比較

經討論分析後,本組組員找了兩間托嬰中心網頁做為

比較,本研究將透過簡單的比較找出上晴托嬰中心的優勢及劣

勢。

Page 20: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

9

2.4.1 高雄市小蘋果托嬰中心

圖.2.1 小蘋果托嬰中心首頁截圖

開啟小蘋果托嬰中心的首頁沒有明顯的學校名稱,但在左邊欄位中

有許多功能例如:關於小蘋果、公佈欄、校園資料、退費公告、小蘋果

FB、數位學習資源管、與我聯絡、網站地圖、線上管理。

其中特色是網站地圖,這項功能是讓當你在網頁中一時找不到某項

資訊時,可以透過網站地圖來做快速連結,但我們認為若是一開始將

資訊都排列好使遊覽者一目了然,這項功能也變得沒有那麼需要了。

Page 21: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

10

圖.2.2小蘋果托嬰中心網站地圖截圖

Page 22: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

11

2.4.2 臺北市私立拉斐爾托嬰中心

圖.2.3 拉斐爾托嬰中心首頁截圖

開啟拉斐爾托嬰中心的首頁,與小蘋果托嬰中心網站有很大的不同,

左側有明顯學校名稱、校徽,以及各種分類功能,中間有預約參觀、

生活日誌、行事曆、課程表、每日菜單、教學特色、環境一覽展示。

特別的是在生活日誌中,每個月都有一個主題活動,經由老師的帶

領經營,將托嬰中心特色最大化。

圖.2.4拉斐爾托嬰中心生活日誌截圖

Page 23: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

12

2.4.3 網站比較表

綜合介紹的兩個網頁,製作比較表。如表所示:

功能 上晴托嬰中心 拉斐爾托嬰中心 小蘋果

師資陣容 ✔

留言板 ✔

相簿 ✔ ✔ ✔

網站連結 ✔ ✔

雙向溝通 ✔ ✔

資料完整性 ★★★ ★ ★★

表.2.1 網站比較表

Page 24: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

13

第三章研究方法

3.1研究系統對象

本專題研究對象為上晴托嬰中心,建置一個符合業者需求之

留言板系統的網頁架設。

3.2系統需求

本專題研究的業者向本專題學生提出所需的內容為 :一個

包含所有完整資訊的托嬰中心之網頁,因應業者之訴求,本專

題將完全配合業者的需求,做出一套符合業者期待的網頁。

本專題之目的是架設托嬰中心之網頁,主要是針對瀏覽者

在看網頁時,能方便快速地了解此托嬰中心所有資訊,並且提

供留言板系統,將幼兒們的生活記錄做一個整合,令教師以及

家長更方便、快速的了解幼兒們全方面狀況。

Page 25: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

14

3.3研究系統工具

本研究因應不同功能所使用的工具,如表 3.1所示。

功能需求 工具軟體

網站首頁建置 ASP.NET

網站內容建置 ASP.NET

網頁伺服器 Window Server2012

資料庫 SQL Server 2008

照片及圖檔編輯 Adobe illustrator CS6

表.3.1研究所用之軟體工具

3.3.1 ASP.NET

ASP.NET 是微軟所提出的 .NET架構運用在網頁上的一種動

態技術,由於基本為網頁,因此本身當然就可使用 HTML、

JavaScript,此外當然也可以利用 .NET本身所涵蓋的四種語

言來完成網頁中需要執行的程式邏輯!

.NET本身涵蓋的四種語言包含 VB、C#、C++及J#,而Visual

Studio 2005是微軟為了使用者開發 .NET而設計的一個圖形介

面開發工具! [4]

Page 26: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

15

3.3.2 Windows Server 2012

Windows Server 2012,開發代號為Windows Server 8,

並擁有最新的虛擬化技術和簡單控制管理等特性、相容於任何

雲端架構的設計與整合行動裝置管理等功能,令企業可建置私

有雲端或是混合雲端,並有效降低成本。 [5]

3.3.3 SQL Server 2008

SQL Server 一般就是泛指資料庫伺服器, SQL Server 已

經是現在的網路世界中最常使用的一種伺服器之一,因為幾乎

只要網站架設,就會用到 SQL Server。[6]

3.3.4 Adobe illustrator CS6

簡稱「AI」,是 Adobe 系統業者推出的基於向量的圖形製作軟體。

是業界標準向量繪畫環境,即使在大型複雜的檔案,也依然能保持速

度與穩定。[7]

Page 27: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

16

第四章系統分析與實作

4.1網站架構

考慮使用者者能夠一打開就能輕鬆地找到需要的資訊,因此本網站

使用簡單的排版方式,讓使用者可直接在首頁即可了解本網站的所有

功能。

我們為上晴托嬰中心所設計了六項的服務與功能,依序為:關於上

晴、公佈欄、幼兒天地、師資介紹、留言板、會員登入、好站連結。

Page 28: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

17

4.1.1前端系統架構

圖.4.1 前端系統架構圖

前端系統架構圖如圖 4.1,分類為關於上晴、公佈欄、幼兒天地、

師資介紹、留言板、會員登入與好站連結。

首頁

Page 29: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

18

4.1.2後端系統架構

圖.4.2後端系統架構圖

後端系統架構如圖 4.2,主要有六項分別為關於上晴管理、

公佈欄管理、幼兒天地管理、師資介紹管理、留言板管理及會

員管理。管理者登入後台,可對網站做新增、修改、刪除動作。

後台管理

Page 30: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

19

4.2系統實作

4.2.1關於上晴(使用者端)

透過首頁介面,直接觀看到上晴托嬰中心的基本介紹,及左邊的內

容,如圖.4.3所示。

圖.4.3關於上晴截圖

Page 31: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

20

4.2.2公佈欄(使用者端)

透過公佈欄的內容,直接了解上晴托嬰中心的活動公告,如圖.4.4

所示。

圖.4.4公佈欄截圖

Page 32: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

21

4.2.3幼兒天地(使用者端)

使用者必須登入之後才可以觀看到相簿裡幼兒的照片,如圖 4.5 所

示。

圖.4.5幼兒天地相簿截圖

Page 33: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

22

4.2.4師資介紹(使用者端)

可以透過師資介紹觀看到每個老師的基本資料,如圖.4.6 所示。

圖.4.6師資介紹截圖

Page 34: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

23

4.2.5留言板(使用者端)

透過留言版可以把想要告訴托嬰中心的訊息提供給對方,傳送後可

以透過旁邊的欄位得到托嬰中心的回覆,如圖.4.7及圖.4.8所示。

圖.4.7留言板留言截圖

圖.4.8留言板查看留言截圖

Page 35: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

24

4.2.6會員資料修改(使用者端)

會員可以透過會員資料修改即時修改自己的基本資料,如圖.4.9

所示。

圖.4.9會員資料修改截圖

Page 36: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

25

4.2.7學生資料(使用者端)

會員可以透過學生資料看到自己小孩的基本簡介,如圖 4.10所

示。

圖.4.10學生資料截圖

Page 37: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

26

4.2.8公佈欄管理(管理者端)

管理者可以及時的發布托嬰中心的活動內容,也可以即時的做編輯

與刪除的動作,如圖 4.11所示。

圖.4.11公佈欄管理截圖

Page 38: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

27

4.2.9幼兒天地相簿管理(管理者端)

管理者透過相簿管理系統可以發布幼兒的照片,也可以做編輯與刪

除的動作,如圖.4.12及圖.4.13所示。

圖.4.12幼兒天地相簿上傳截圖

圖.4.13幼兒天地相簿管理截圖

Page 39: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

28

4.2.10師資介紹管理(管理者端)

管理者在師資管理的部分可以把老師的簡介新增上去,也可以做編

輯與刪除的動作,如圖.4.14 及圖.4.15 所示。

圖.4.14新增師資資料截圖

圖.4.15師資介紹管理截圖

Page 40: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

29

4.2.11留言板管理(管理者端)

管理者可以透過留言版的管理回覆使用的留言的內容,如圖.4.16

所示。

圖.4.16留言板管理截圖

Page 41: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

30

4.2.12會員註冊(管理者端)

托嬰中心會透過家長所提供的資料註冊帳號,無法讓一般的瀏覽者

註冊,如圖.4.17所示。

圖.4.17會員註冊截圖

Page 42: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

31

4.2.13會員管理(管理者端)

管理者可以透過會員管理進行編輯刪除的動作,如圖.4.18 所示。

圖.4.18會員管理截圖

Page 43: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

32

4.2.14學生資料管理(管理者端)

管理者可以新增學生的基本資料以及編輯與刪除,如圖.4.19及

圖.4.20所示。

圖.4.19新增學生資料截圖

圖.4.20學生資料管理截圖

Page 44: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

33

4.3 ER-model

一、會員

圖.4.21 會員關聯圖

圖.4.22 會員資料型態

Page 45: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

34

二、管理者

圖.4.23 管理者關聯圖

圖.4.24 管理者資料型態

Page 46: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

35

三、公佈欄

圖.4.25 公佈欄關聯圖

圖.4.26 公佈欄資料型態

Page 47: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

36

四、師資註冊

圖.4.27 師資註冊關聯圖

圖.4.28 師資註冊資料型態

Page 48: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

37

五、留言板

圖.4.29 留言板關聯圖

圖.4.30 留言板資料型態

Page 49: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

38

六、學生註冊

圖.4.31 學生註冊關聯圖

圖.4.32 學生註冊資料型態

Page 50: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

39

七、相簿

圖.4.33 相簿關聯圖

圖.4.34 相簿資料型態

Page 51: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

40

七、ER-MODEL

圖.4.35 ER-MODEL圖

Page 52: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

41

第五章 結論與未來展望

本研究透過與上晴托嬰中心合作,為上晴托嬰中心建置專屬

網站,除了讓本小組能將學校所學的知識學以致用,也能幫助

上晴托嬰中心增加曝光率、增加知名度。

本研究至此尚未十分完善,仍有需要加強與改進的部分,

也因建置網站上遇到許多困難,花了不少時間,經過組員努力

修改後呈現出期望的網頁。未來,將會繼續與上晴托嬰中心討

論是否擴充新功能例如:電子連絡簿、連結監視系統、完善行

事例等等功能或修改網頁功能,又或者可考慮為上晴托嬰中心

建置一個專屬於他們的行動電子聯絡簿APP,期許能夠吸引更

多家長,為上晴托嬰中心帶來更多效益。

Page 53: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

42

參考文獻

[1] 林明忠,《國小環境教育網站建置與評估之研究》,(國立臺東大學

教育學系教學科技碩士在職專班碩士論文,2012)

http://handle.ncl.edu.tw/11296/ndltd/62474849447303879394

[2] 黃朝盟、趙美慧(2007)。網站規畫與設計。台北縣:商鼎文化。

[3]李婉真(2006)。網站建置標準流程之需求管理的研究與探討─以大

型研究機構為例 (未出版碩士),國立交通大學,新竹市

[4] ASP.NET 講座(1)ASP.NET 簡介

http://www.codeclub.idv.tw/index.php?action=index&run=article_read&Cl

assID=30&ArticleID=504

[5] Windows Server 2012 維基百科

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

[6] SQL Server 完全入門

http://www.raidenhttpd.com/manual/sql-server.html

[7] Adobe illustrator CS6 維基百科

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

Page 55: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

44

附錄

附錄一.工作分配表

Page 56: 嶺東科技大學資訊網路系 專題研究報告 · 2、概念模型設計:依據前面的需求分析找出超媒體所關注的問領域的 概念及所需的支持系統舆資料。

45

附錄二.甘特圖