校內活動系統報名建置

【國立彰化高商資料處理科專題製作成果展報告書】 題

目： 校內活動系統報名建置

指導老師： 陳隨益 老師 學

生： 劉諭禧

學校名稱：國立彰化高級商業職業學校 群

別：商管群

科

別：資料處理科

中 華 民 國

1 0 4

年

0 1

月

0 4

日

目錄 摘要 --------------------------------------------------------------- 1 壹、前言 ----------------------------------------------------------- 1 一、研究動機 ----------------------------------------------------- 1 二、研究目的 ----------------------------------------------------- 2 貮、文獻探討 ------------------------------------------------------- 2 一、ASP.Net 程式設計 --------------------------------------------- 2 二、2 層式(tier)與 3 層式(tier)網站架構---------------------------- 2 參、研究架構 ------------------------------------------------------- 6 一、研究方法 ----------------------------------------------------- 6 二、研究流程 ----------------------------------------------------- 6 三、研究進度 ----------------------------------------------------- 6 肆、系統實作及測試 ------------------------------------------------- 7 一、系統架構 ----------------------------------------------------- 8 二、系統操作流程 ------------------------------------------------- 9 三、實作過程 ------------------------------------------------- 10~21 四、系統功能展示 --------------------------------------------- 22~24 伍、結果與討論 ---------------------------------------------------- 25 一、可行性之評估 ------------------------------------------------ 25 二、問題與討論 -------------------------------------------------- 25 六、結論與建議 ---------------------------------------------------- 26 一、結論 -------------------------------------------------------- 26 二、改善與建議 -------------------------------------------------- 26

表目錄 表 1 活動資料表 ------------------------------------------------------- 10 表 2 「使用者」資料表 -------------------------------------------------- 11 表 3 「參加紀錄」資料表------------------------------------------------- 12

圖目錄 圖 1 ASP.NET --------------------------------------------------------------------------------------------------------------------------- 2 圖 2 2 層式網站架構圖 ------------------------------------------------------------------------------------------------------------- 3 圖 3 3 層式網站架構圖 ------------------------------------------------------------------------------------------------------------- 3 圖 4 資料庫架構圖 ------------------------------------------------------------------------------------------------------------------- 4 圖 5 SQL 架構圖----------------------------------------------------------------------------------------------------------------------- 4 圖 6 SQL 資料庫查詢語言意識圖------------------------------------------------------------------------------------------------ 5 圖 7 使用者操作流程圖 ------------------------------------------------------------------------------------------------------------ 7 圖 8 系統架構圖 ---------------------------------------------------------------------------------------------------------------------- 8 圖 9 系統操作流程圖 --------------------------------------------------------------------------------------------------------------- 9 圖 10 活動資料表欄位屬性圖---------------------------------------------------------------------------------------------------- 11 圖 11 使用者資料各欄位屬性圖 ------------------------------------------------------------------------------------------------ 12 圖 12「參加紀錄」資料表個欄位屬性圖 ------------------------------------------------------------------------------------- 12 圖 13 建立新網站 -------------------------------------------------------------------------------------------------------------------- 13 圖 14 建立 MasterPage(主版頁面) ---------------------------------------------------------------------------------------------- 13 圖 15 編輯「MasterPage.Master」頁面中的 「導覽」 區塊 --------------------------------------------------------- 14 圖 16 使用 MasterPage 建立所有內容網頁 ---------------------------------------------------------------------------------- 14 圖 17 建立選單 Web.SiteMap(網站導覽) ------------------------------------------------------------------------------------- 15 圖 18 新增「act_mgr.aspx」放置「GridView」物件→修改/刪除 活動 ------------------------------------------- 16 圖 19 設定 資料表主索引鍵 ----------------------------------------------------------------------------------------------------- 16 圖 20 建立「Login.aspx」頁面 -------------------------------------------------------------------------------------------------- 17 圖 21「登入」鍵並輸入程式碼如下 ------------------------------------------------------------------------------------------- 17 圖 22「重新輸入」鍵並輸入程式碼 ------------------------------------------------------------------------------------------- 18 圖 23 在「MasterPage.Master」顯示登入 ------------------------------------------------------------------------------------ 18 圖 24 修改「Wed.Config」登入模式為「Forms」 ------------------------------------------------------------------------- 18 圖 25 建置「Logout.aspx」頁面→登出 --------------------------------------------------------------------------------------- 19 圖 26 建立「MyRec.aspx」 -------------------------------------------------------------------------------------------------------- 20 圖 27 建立個人「參加紀錄」查詢 及 參加紀錄表頭 -------------------------------------------------------------------- 20 圖 28 建立公告活動權限「Add_Act.aspx」 ---------------------------------------------------------------------------------- 21 圖 29 建立「Name_List.aspx」 --------------------------------------------------------------------------------------------------- 21 圖 30 活動名單表頭 ----------------------------------------------------------------------------------------------------------------- 21 圖 31 登入系統 ------------------------------------------------------------------------------------------------------------------------ 22 圖 32 公告活動 ------------------------------------------------------------------------------------------------------------------------ 22 圖 33 修改或刪除活動 -------------------------------------------------------------------------------------------------------------- 22 圖 34 查詢參加總名額/名單 ------------------------------------------------------------------------------------------------------ 23 圖 35 瀏覽活動圖 --------------------------------------------------------------------------------------------------------------------- 23 圖 36 參加/取消參加 活動圖 ----------------------------------------------------------------------------------------------------- 23 圖 37 查詢個人參加紀錄圖 -------------------------------------------------------------------------------------------------------- 24

103 年高職學生實務專題製作校內活動系統報名建置 摘要 學校定期都會舉辦許多精彩的活動，如果透過紙張列印報名單，不僅耗費人 力，也造成不必要的資源浪費，而那些報名程序更是如此繁雜，導致程序中會有 人為疏失，更喪失了同學們的權益，因此透過「線上活動報名系統」只要花費不 到幾分鐘的時間就可以輕易完成報名手續，行政人員在統整資料上也輕鬆許多。 相較於一般程序，增添了許多效率，也可以避免人為上的疏失，如此兩全其美的 報名系統，何嘗不趕快來試一試呢？ 關鍵字，：商管群、專題製作、資料庫、報名系統

壹、前言 一、 研究動機 每當學校有辦理活動時，都是透過幹部們傳達活動項目內容等等，然而還是不能 避免轉述活動時的錯誤資訊，何況在詢問誰要報名的同時，或許有些人剛好不在 班上，更喪失了他們的權益，時間上也可能會占用到上課時間，造成了任課老師 的困擾，如果能有一個系統能解決上述的問題就好了… …

二、 研究目的

利用專題課上學得的知識，以及身邊唾手可得的資源，，建立一個放便且實 用的報名系統，能夠正確地傳達活動消息，也能夠更詳細的介紹活動內容，保障 更多人的權益，也能夠讓行政人員輕鬆地傳達活動消息，降低作業上的繁雜手 續，提升處理資料上的效率！

校內活動報名建置系統-成果報告 DP102137

1

貳、文獻探討 一、ASP.Net 4.0 

原理說明

ASP.NET 是由微軟在.NET Framework 框架中所提供，開發 Web 應用程式的類別庫，封裝 在 System.Web.dll 檔案中，顯露出 System.Web 命名空間，並提供 ASP.NET 網頁處理、擴充以及 HTTP 通道的應用程式與通訊處理等工作，以及 Web Service 的基礎架構。ASP.NET 是 ASP 技 術的後繼者，但它的發展性要比 ASP 技術要強大許多。 ASP.NET 可以運行在安裝了.NET Framework 的 IIS 伺服器上，若要在非微軟的平台上執行，則 需要使用 Mono 平台，在.NET Framework 3.5 上則加上了許多功能，像是 ASP.NET AJAX、

ASP.NET MVC Framework、ASP.NET Dynamic Data 與 Microsoft Silverlight 的伺服 器控制項等。 很多人都把 ASP.NET 當做是一種程式語言，實際上只是一個由 .NET Framework 提供的一種 開發平台 (development platform)，並非程式語言。

Implementing the Basic Patterns in ASP.NET 實施 ASP.NET 的基本模式

(圖 1)



發展源起

ASP.NET 的前身 ASP 技術，是在 IIS 2.0 上首次推出(Windows NT 3.51），當時與 ADO 1.0 一 起推出，在 IIS 3.0（Windows NT 4.0）發揚光大，成為伺服器端應用程式的熱門開發工具，微 軟還特別為它量身打造了 Visual InterDev 開發工具，在 1994 年到 2000 年之間，ASP 技術已經 成為微軟推展 Windows NT 4.0 平台的關鍵技術之一。由於它的簡單以及高度客制化的能力，也 是它能迅速竄起的原因之一。 校內活動報名建置系統-成果報告 DP102137

2

二、2層式(tier)與3層式(tier)網站架構

巨觀的相依性分析 2-tier 的結構分析 1.Form AP 直接連接資料庫撈資料處理—Form AP 相依於資料庫。 2.當資料庫的 DB Schema 變動時，會連動影響所有連接該資料庫的 Form AP。 3.因沒有明確定義企業邏輯(Business Logic)的所在處，若位於 Form AP 處，則以 scripts 處 理之；若位於資料庫內，則以 stored-procedure 處理之。這也意味了企業邏輯相依於 Form 或 資料庫的實體機制

(圖 2)



巨觀的相依性分析 — 3-tier 的結構分析

1.企業系統的核心 — Problem Domain Model。 2.由於 Problem Domain Model 沒有相依於任何元素，所以，包括 UI Form、資料庫系統等均 可以各自抽換而不會連動影響。

(圖 3) 校內活動報名建置系統-成果報告 DP102137

3

三、資料庫 

專有名詞的由來

資料庫，簡單來說是本身可視為電子化的檔案櫃_儲存電子檔案的處所，使用者可以對檔案中的 資料執行新增、擷取、更新、刪除等操作。 資料庫指的是以一定方式儲存在一起、能為多個用戶共享、具有儘可能小的冗餘度、與應用程式 彼此獨立的資料集合。

(圖 4) 

應用到的觀點

利用建立好的資料庫檔案匯入「App_Data」資料夾中 工具/連結到資料庫

(圖 5) 校內活動報名建置系統-成果報告 DP102137

4

四、SQL資料庫查詢語言 

名詞的由來

結構化查詢語言 SQL（Structured Query Language），程式語言，用於資料庫中的標準資料查詢語 言，IBM 公司最早使用在其開發的資料庫系統中。不過各種通行的資料庫系統在其實踐過程中都 對 SQL 規範作了某些編改和擴充。所以，實際上不同資料庫系統之間的 SQL 不能完全相互通用。

(圖 6)



應用到的觀點

結構查詢語言是關聯式 DBMS 的主要資料操作語言，是用來查詢/讀取/更新關聯式資料庫的主要 工具之一。一般指令中的 SQL 如 SELECT、FROM、WHERE 會以大寫標示，而 SQL 指令會被寫成 多行。

校內活動報名建置系統-成果報告 DP102137

5

參、研究架構

一、 研究方法 運用Microsoft Visual Web Developer 2010 Express 以及 Microsoft Access 2010 資料庫系統互相結合。 身分的認證很重要，首先設置一個登入系統來區分學生以及行 政人員各自的權限，如是學生，則可以按「我要報名」來參加 活動，或查詢個人歷史參加紀錄，如是行政人員，則可以公告/ 編輯/刪除活動，還可以查詢參加總人數以及參加者的資料。 三、 研究流程

校內活動報名建置系統-成果報告 DP102137

6

肆、系統實作及測試 一、系統架構 包含： A. 資料表物件： a.活動 b.活動名單 c.學生 d.參加紀錄 e.承辦人員 _____________________________________________________________________ B. 事件： a. 活動管理(行政人員權限) (a).公告活動 (b).修改或刪除活動 b. 參加活動(學生權限) (a).瀏覽活動 (b).報名活動 (c).取消報名 (d).查詢歷史參加紀錄 _____________________________________________________________________ C. 使用者操作流程：

(圖 7) _____________________________________________________________________

校內活動報名建置系統-成果報告 DP102137

7

D. 系統架構圖:

(圖 8)

校內活動報名建置系統-成果報告 DP102137

8

二、系統操作流程

利用登入系統來區分行政人員及學生的權限



行政人員權限 公告活動:新增活動項目 管理活動:編輯或刪除活動 查詢參加紀錄:查詢參加總人數/資料



學生權限 瀏覽活動:報名活動/取消報名 查詢參加名單:查詢個人參加活動之歷史紀錄

(圖 9)

校內活動報名建置系統-成果報告 DP102137

9

三、實作過程  建置工具

建立 Microsoft Visual Web Developer 2010 Express

資料庫檔案 Microsoft Access 2010

 建立資料庫

(一) 建立「活動」資料表 (1) 活動欄位 活動編號

104010101

登入日期

2014/01/01

活動名稱

快樂電腦組裝營

辦理處室

實習處

承辦人

實習人員

參加對象

資處科一年級生

預定名額

80 名

報名費用

免費

活動地點

習習大樓(201)

活動時間

2015/01/05 至 2015/01/06

活動內容

組裝電腦

報名日期

2015/01/01

備註

無 (表 1)

校內活動報名建置系統-成果報告 DP102137

10

(2)活動資料表欄位屬性(table schema)

(圖 10) (2) 開啟 Microsoft Access 2010 / 空白資料庫 / 檔名「dp102137.accdb」並建立 / 資料表名稱為「活動」/ 檢視-設計檢視 / 依序將活動資料表欄位屬性(table schema)輸入

(二)建立「使用者」資料表 (1)使用者(行政/學生)資料表之欄位 代號/ 學號 01

處室/ 班級 實習處

序號/ 座號 01

姓名

帳號

密碼

電子信箱

身分

備註

實習人員

01

0000

0000@chsc.tw

Dp102137

資二 1

37

劉諭禧

Dp102137

0000

214037@stu.ch sc.tw

T F

無 無

(表 2) (2)使用者資料各欄位屬性(table schema)

校內活動報名建置系統-成果報告 DP102137

11

(圖 11)

(三)設計「參加紀錄」資料表

(1) 「參加紀錄」資料表之欄位

序號

帳號

活動編號

報名時間

01

dp102137

104010101

2015/01/02

02

Dp102137

104010201

2015/01/03 (表 3)

(3) 「參加紀錄」資料表個欄位屬性(table schema)

(圖 11) 校內活動報名建置系統-成果報告 DP102137

12

 建置網站

I.

建立新網站

(圖 12) _____________________________________________________________________ II.

建立 MasterPage(主版頁面)

(圖 13) _____________________________________________________________________

校內活動報名建置系統-成果報告 DP102137

13

III. 編輯「MasterPage.Master」頁面中的 「導覽」 區塊 分別從工具箱拖出(如下圖)

(圖 14) _____________________________________________________________________ IV. 使用 MasterPage 建立所有內容網頁 

在方案總管的「MasterPage.aspx」按右鍵 / 加入內容頁面 / 檔名改成 / Add_act.aspx/Act_mgr.aspx/Name_list.aspx/MyRec.aspx 等頁面

(圖 15) _____________________________________________________________________ 校內活動報名建置系統-成果報告 DP102137

14

V.

建立選單 Web.SiteMap(網站導覽)

(圖 16) _____________________________________________________________________ VI. 匯入資料庫  點選「dp102137W2」按右鍵加入 / 加入 ASP.NET 資料夾 / App_Data  將「dp102137db.aaccdb」複製到 App_Data 資料夾中  點選 工具 / 連結到資料庫 / MS Access 資料庫 / 修改連結  資料庫檔名 / 瀏覽 / 選取「dp102137db.aaccdb」 _____________________________________________________________________ VII. 編輯「Add_Act.aspx」(公告活動)頁面

校內活動報名建置系統-成果報告 DP102137

15

_____________________________________________________________________ VIII. 在「Default.aspx」放置「GridView」物件→瀏覽活動

IX. 新增「act_mgr.aspx」放置「GridView」物件→修改/刪除 活動

(圖 17) 

並且設定 資料表主索引鍵

(圖 18) 校內活動報名建置系統-成果報告 DP102137

16

X.

在「Default.aspx」瀏覽活動/活動名稱加入超連結

_____________________________________________________________________ XI. 建立「Act_Detail.aspx」顯示活動詳細內容

_____________________________________________________________________ XII. 在「Act_Detail.aspx」建立報名系統

校內活動報名建置系統-成果報告 DP102137

17

_____________________________________________________________________ XIII. 建立「Login.aspx」頁面 

加入文字方塊及按鈕並更改名稱如下圖↓

(圖 19) 

連按兩下「登入」鍵並輸入程式碼如下

(圖 20) 

連按兩下「重新輸入」鍵並輸入程式碼如下

(圖 21) _____________________________________________________________________ XIV. 在「MasterPage.Master」顯示登入狀態 

放入 Label 物件並更改 ID 為 lblLogin



開啟「MasterPage.Master.vb」程式碼視窗 / 建立 「Page_Load()」事件如 下圖↓ 校內活動報名建置系統-成果報告 DP102137

18

(圖 22) _____________________________________________________________________ XV. 修改「Wed.Config」登入模式為「Forms」 

在「Wed.Config」/ 「system.wed」輸入程式碼如下↓

(圖 23) _____________________________________________________________________ XVI. 建置「Logout.aspx」頁面→登出 

在「MasterPage.Master」新增「Logout.aspx」頁面 /開啟 Logout.asp.vb 並 輸入程式碼↓

(圖 24) _____________________________________________________________________ XVII. 修改「Act_Detail.aspx」→報名 

點選「我要報名」按紐二下並輸入以下程式碼

(圖 25) 校內活動報名建置系統-成果報告 DP102137

19

_____________________________________________________________________ XVIII.

建立「MyRec.aspx」→查看使用者個人參加紀錄

(圖 26) _____________________________________________________________________ XIX. 建立個人「參加紀錄」查詢 及 參加紀錄表頭

(圖 27) _____________________________________________________________________ XX. 建立公告活動權限「Add_Act.aspx」 

首先在「login.aspx.vb」加入紅框中的程式碼如下

(圖 28) 校內活動報名建置系統-成果報告 DP102137

20



再到「Add_act.aspx.vb」「Page_Load()」事件輸入下列程式碼↓

Dim user_t As Boolean = Session("user_t") If (My.User.IsAuthenticated) And (user_t = True) Then Dim user_acc1 As String = My.User.Name Session.Add("user_acc1", user_acc1) Else Response.Redirect("std_err.aspx") End If _____________________________________________________________________ XXI. 建立「Name_List.aspx」→列出活動名單-1 及「Act_Member.aspx」→列出活動名單-2

(圖 29) _____________________________________________________________________ XXII. 活動名單表頭

(圖 30)

校內活動報名建置系統-成果報告 DP102137

21

四、系統功能展示



登入系統

(圖 31) _____________________________________________________________________ 行政人員專區展示：  公告活動

(圖 32) 

修改或刪除活動

(圖 33)

校內活動報名建置系統-成果報告 DP102137

22



查詢參加總名額/名單

(圖 34) _____________________________________________________________________ 學生專區展示：  瀏覽活動

(圖 35) 

參加/取消參加 活動

(圖 36) 校內活動報名建置系統-成果報告 DP102137

23



查詢個人參加紀錄 (尚未報名活動，故未傳回資料)

(圖 37) 

學生未有行政人員權限，因此會顯示如下圖↓

校內活動報名建置系統-成果報告 DP102137

24

伍、結果與討論

一、 可行性之評估

我認為是可行的。畢竟現在是資訊設備發達的時代，透過網路來 報名也非常普遍，如果擴充更多功能，如註冊帳號、個人化的設計等 等，勢必會有很好的評價。

二、問題與討論 這是我第一次操作 Microsoft Visual Web Developer 一開始雖然對 它很陌生，而上課操作的時間也很有限，只能回家透過講義完成上課 內容，如果有些問題還是無法解決，只要透過老師的指導以及同學的 幫助，就能獲得很好的改善！

校內活動報名建置系統-成果報告 DP102137

25

陸、結論與建議 一、結論 在製作過程中難免有些錯誤是透過自己無法解決的，但在老師指 導下以及和同學們互相找出對方的問題所在，問題便不再是問題了， 當同學在協助我解決錯誤時，也增加了我們的能力，他學會如何指導 別人，而我也吸收到了他的知識，可以說是兩全其美！經過這幾個月 來的製作也終於完成這個報名系統了！

二、改善與建議

我認為可以設置一個「註冊帳號」的頁面，畢竟在學生參加或行 政人員管理活動都需要一個用來辨識身分的登入系統，如果使用者無 法註冊帳號便無法執行那些步驟了。

校內活動報名建置系統-成果報告 DP102137

26

參考文獻 小益哥教學網 https://sites.google.com/a/chsc.tw/easygo/projects/prj2_act_app ASP.Net 介紹 http://zh.wikipedia.org/wiki/ASP.NET ASP.Net 圖片來源 http://aspdotnet4.blogspot.tw/ 2 層式 3 層式網站架構圖 http://www.kenming.idv.tw/a_af_ayser_el_as_ac_a_ac_a_cu_af_ccfc_cm SQL 資料庫查詢語言 http://zh.wikipedia.org/wiki/SQL https://www.google.com.tw/url?sa=i&rct=j&q=&esrc=s&source=images&cd=& cad=rja&uact=8&ved=0CAYQjB0&url=http%3A%2F%2Fnewsletter.ascc.sinica.e du.tw%2Findex.php%3Flid%3D223&ei=dpynVLCtF9P88QWpsoL4AQ&psig=AFQjCNGK 2S6bt4yy50YQl249i8GJzcuyow&ust=1420357051149353

校內活動報名建置系統-成果報告 DP102137

27