Page 1

校內活動報名系統建置 題

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

指導老師:陳隨益

生:林依婷

學校名稱:國立彰化高級商業職業學校 群別:商業管理群 科別:資料處理科

1

0

3

1

2

1

2


目錄 摘要 --------------------------------------------------------------------- 1 壹、前言 ----------------------------------------------------------------- 1 一、研究動機 ----------------------------------------------------------- 1 二、研究目的 ----------------------------------------------------------- 1 貮、文獻探討 ------------------------------------------------------------- 2 一、ASP.Net 4.0 -------------------------------------------------------- 2 二、2 層式與 3 層式網站架構 --------------------------------------------- 2 三、資料庫 ------------------------------------------------------------- 2 四、SQL 資料庫查詢語言 ------------------------------------------------- 2 參、研究架構 ------------------------------------------------------------- 3 一、研究方法 ----------------------------------------------------------- 3 二、研究流程 ----------------------------------------------------------- 3 肆、系統實作及測試 ------------------------------------------------------- 4 一、系統架構 ----------------------------------------------------------- 4 二、系統操作流程 ------------------------------------------------------- 5 三、實作過程 ----------------------------------------------------------- 6 四、系統功能展示 ------------------------------------------------------ 24 伍、結果與討論 ---------------------------------------------------------- 28 一、可行性之評估 ------------------------------------------------------ 28 二、問題與討論 -------------------------------------------------------- 29 六、結論與建議 ---------------------------------------------------------- 29 一、結論 -------------------------------------------------------------- 29 二、改善與建議 -------------------------------------------------------- 29

2


圖目錄 圖(1) 研究流程 ----------------------------------------------------------- 3 圖(2) 系統架構 ----------------------------------------------------------- 4 圖(3) 學生操作流程 ------------------------------------------------------- 5 圖(4) 行政人員操作流程 --------------------------------------------------- 5 圖(5) 實作過程 1 --------------------------------------------------------- 6 圖(6) 實作過程 2 --------------------------------------------------------- 6 圖(7) 實作過程 3 --------------------------------------------------------- 7 圖(8) 實作過程 4 --------------------------------------------------------- 7 圖(9) 實作過程 5 --------------------------------------------------------- 8 圖(10) 圖(11) 圖(12) 圖(13) 圖(14) 圖(15) 圖(16) 圖(17) 圖(18) 圖(19)

實作過程 6 -------------------------------------------------------- 8 實作過程 7 -------------------------------------------------------- 9 實作過程 8 -------------------------------------------------------- 9 實作過程 9 ------------------------------------------------------- 10 實作過程 10 ------------------------------------------------------ 10 實作過程 11 ------------------------------------------------------ 11 實作過程 12 ------------------------------------------------------ 11 實作過程 13 ------------------------------------------------------ 12 實作過程 14 ------------------------------------------------------ 12 實作過程 15 ------------------------------------------------------ 13

圖(20) 圖(21) 圖(22) 圖(23) 圖(24) 圖(25) 圖(26) 圖(27) 圖(28) 圖(29) 圖(30)

實作過程 16 實作過程 17 實作過程 18 實作過程 19 實作過程 20 實作過程 21 實作過程 22 實作過程 23 實作過程 24 實作過程 25 實作過程 26

------------------------------------------------------ 13 ------------------------------------------------------ 14 ------------------------------------------------------ 14 ------------------------------------------------------ 15 ------------------------------------------------------ 15 ------------------------------------------------------ 16 ------------------------------------------------------ 16 ------------------------------------------------------ 16 ------------------------------------------------------ 17 ------------------------------------------------------ 17 ------------------------------------------------------ 17

圖(31) 實作過程 27 ------------------------------------------------------ 18 圖(32) 實作過程 28 ------------------------------------------------------ 18 圖(33) 實作過程 29 ------------------------------------------------------ 19 圖(34) 實作過程 30 ------------------------------------------------------ 19 圖(35) 實作過程 31 ------------------------------------------------------ 20 3


圖(36) 實作過程 32 ------------------------------------------------------ 20 圖(37) 圖(38) 圖(39) 圖(40) 圖(41) 圖(42) 圖(43) 圖(44) 圖(45) 圖(46) 圖(47)

實作過程 33 ------------------------------------------------------ 20 實作過程 34 ------------------------------------------------------ 21 實作過程 35 ------------------------------------------------------ 21 實作過程 36 ------------------------------------------------------ 21 實作過程 37 ------------------------------------------------------ 22 實作過程 38 ------------------------------------------------------ 22 實作過程 39 ------------------------------------------------------ 23 實作過程 40 ------------------------------------------------------ 23 系統功能展示 1 --------------------------------------------------- 24 系統功能展示 2 --------------------------------------------------- 24 系統功能展示 3 --------------------------------------------------- 25

圖(48) 圖(49) 圖(50) 圖(51) 圖(52) 圖(53) 圖(54) 圖(55)

系統功能展示 4 --------------------------------------------------- 25 系統功能展示 5 --------------------------------------------------- 26 系統功能展示 6 --------------------------------------------------- 26 系統功能展示 7 --------------------------------------------------- 27 系統功能展示 8 --------------------------------------------------- 27 系統功能展示 9 --------------------------------------------------- 27 系統功能展示 10 -------------------------------------------------- 28 系統功能展示 11 -------------------------------------------------- 28

4


活動報名管理系統 摘要 「要活就要動」為此,學校舉辦了大大小小的活動,有這麼多活動,不知道從何 找起,也不知該如何報名,報名之後,如果突然有事情不能參加,或是改變心意 不想報名,也不知該去哪裡辦理取消手續,所以,我們使用 Microsoft Visual Studio express 2010,再搭配 Access 資料庫製作了這個專題-活動報名系統,有了它,隨 時可以查看最近有什麼活動要舉辦,活動的相關內容,必要時也可以取消報名。 行政方面,有了它,就不用在印製紙本報名表一班一班的宣傳,可以更有系統的 管理各個活動,查看有哪些學生報名,也可以隨時公告新活動,使學生能夠更及 時準確的知道關於活動的相關內容。 關鍵字:Access、Microsoft Visual Studio express 2010、專題

壹、前言 一、研究動機 每次學校舉辦一個活動,就得印活動的相關資訊,若有人要報名,就要將他 的身分資料輸入到電腦,那為什麼不直接開發一個能夠報名活動的系統,學生輸 入自己的資料申請帳號,學校隨時更新活動,若學生想報名,直接按下「我要報 名」 ,如此一來,就可直接知道有那些學生報名哪些活動,而不用人工手動輸入, 既可減少失誤,又可更方便於管理活動,還可減少浪費紙張,真是便民阿!

二、研究目的 學生方面希望能更快瀏覽各種活動,而且不用為了找不到報名表煩惱。行政 方面能夠更有系統的管理所有活動,利用網路,更新公告,如果活動臨時有變更, 不需要再使用人力到處公告,直接利用這個系統即可,省時省力。

1


貳、文獻探討 一、ASP.Net 4.0 ASP.NET是微軟在.NET Framework框架中所提供,開發Web應用程式的類別庫。 ASP.NET是ASP技術的後繼者,但它的發展性要比ASP技術要強大許多。ASP.NET 可以運行在安裝了.NET Framework的IIS伺服器上,若要在非微軟的平台上執行, 則需要使用Mono平台。ASP.NET在2.0版本已經定型,在.NET Framework 3.5上則 加上了許多功能,像是ASP.NET AJAX、ASP.NET MVC Framework、ASP.NET Dynamic Data與Microsoft Silverlight的伺服器控制項等。ASP.NET其實不是程式語言, 實際上是一個由 .NET Framework 提供的一種開發平台。也可認為ASP.NET 是.NET元件,任何.NET語言,例如C#,可以參照該元件,建立網頁或Web服務。

二、2層式與3層式網站架構 在資訊產業剛發起的年代,網路上電腦的使用是以主從式(Client/Server)服 務為主,為兩層式架構,包括用戶端的使用介面層(Presentation tier)和伺 服器端的資料服務層(Data Service tier)。而三層式(3-tier)是目前建構電 子商務系統時最常使用的架構。三層式架構之所以如此重要的原因,是應用程式 得以使用瀏覽器的操作介面,來讀取商業邏輯及資料元件,並能使資料安全的存 在防火牆(Firewall)的保護之內,而較常見的兩層式架構無法完好的應用在現 今網際網路的環境下,因為此種架構會讓公司的資料及應用邏輯暴露在使用者的 掌控範圍中。

三、資料庫 資料庫,簡單來說可視為電子化的檔案櫃——儲存電子檔案的處所。資料庫與資 料庫技術有其重大的衝擊,我們可以說,不管是什麼,只要運用到電腦,包括商 業、工程、醫學、法律、教育和圖書科學等等,資料庫都扮演著一個關鍵的角色。 我們最初的定義,資料庫(database)是相關資料的集合,藉由資料(data), 我們能得知所記錄下來的事情及它隱含的意義。

四、SQL資料庫查詢語言 結構化查詢語言(縮寫為 SQL),是一種程式語言,用於資料庫中的標準資 料查詢語言,IBM 公司是最早使用它的。

2


參、研究架構 一、研究方法 先建一個資料庫,輸入學生帳號資料和行政方面的資料,跟活動內容。開啟 Microsoft Visual Studio express 2010 建置一個空白的 ASP.Net 的空網站。用 Photo Impact 製作橫幅,之後新增一些頁面後就可以開始囉。

二、研究流程

先安裝Microsoft Access 2010 跟Microsoft Visual Studio express 2010

在Access建立活動、 使用者、參加紀錄 三個資料表

匯入資料庫

在主板頁面加入一 些內容頁面

建立一個新網站在

建立「主板頁面」

檔案系統

跟「網站導覽」

(圖 1) 研究流程

3

製作、編輯每個 頁面內容


肆、系統實作及測試 一、系統架構 此系統分為學生專區和行政專區,藉由帳密之分,可分為學生和行政人員, 行政人員可以藉由「公告活動」來公布活動內容,也可以進入「活動管理」來修 改活動資料,而學生可以在「活動瀏覽」來看學校有沒有公布什麼活動內容,有 興趣的就可以按下活動名稱的連結來到活動的詳細內容,來報名參加,也可以取 消報名,在報完名後,可以去查詢個人活動名單,加以確認。而行政人員也可以 看學生的活動名單,來確認活動的人數。

使用者 登入

學生操作

瀏覽活動

參加活動

行政操作

查詢參加 記錄統計

取消活動

(圖2) 系統架構

4

公告(新增) 活動

管理(修改、 刪除)活動

查詢活動 參加名單


二、系統操作流程 A.

學生參加活動

一開始先登入

報名成功後可以到 「參加紀錄」去看有 沒有報名成功

點選「學生專區」的 「瀏覽活動」裡面有 關於活動的詳細介紹

找到興趣的活動後按 「我要報名」,如果 改變心意不想報名也 可以按「取消報名」

(圖 3) 學生操作流程 B.

行政人員公告活動

一開始先登入

點選「行政專區」 的「活動公告」

「活動名單」可 以查詢有哪些學 生來報名活動

打上相關的資料後, 點「公告資料」, 如果輸錯了可以按 「重新輸入」 (圖 4) 行政人員操作流程 5

也可以到「活動 管理」來編輯或 刪除資料


三、實作過程 1.

一開始要先安裝 Microsoft Visual Studio express

(圖 5) 實作過程 1 2.

再來開啟 Access 來製作「活動」資料表,也就是有關於活動的內容

(圖 6) 實作過程 2

6


3.

接著製作「使用者」資料表,也就是帳號、密碼

(圖 7) 實作過程 3 4.

製作「參加紀錄」資料表,裡面記載著每一個報名的資料

(圖 8) 實作過程 4

7


5.

然後使用 Microsoft Visual Studio express 2010 來建立網站

(圖 9) 實作過程 5

6.

建立 MasterPage(主版頁面),在右邊的方案總管的「dp101226W2」按 右鍵,點「加入」點「加入新項目」點主版頁面,按「新增」

(圖 10) 實作過程 6

8


7.

在剛剛的地方建立「網站導覽」

(圖 11) 實作過程 7 8.

先在「MasterPage」建立表格再從工具箱拉「SiteMapDataSource」、 「TreeView」、「SiteMapPath」到表格裡,設定「TreeView」資料來源 為「SiteMapDataSource1」,並且美化「MasterPage」

(圖 12) 實作過程 8

9


9.

加入「default.aspx」 、 「MyRec.aspx」 、 「Add_act.aspx」 、 「Act_mgr.asp」、 「Name_list.aspx」等,如下圖

(圖 13) 實作過程 9 10. 編輯「Web.SiteMap

(圖 14) 實作過程 10

10


11. 再來要匯入資料庫,把用 Access 做的「dp101226.accdb」複製到「App.Data」 資料夾中,在「工具」按選擇資料庫/瀏覽/選「dp101226.accdb」/測試 連接

(圖 15) 實作過程 11 12. 編輯「Add_Act.aspx」 ,從工具箱拉「FormView」到「ContentPlaceHolder1」 , 設定資料來源為「AccessDataSourec1」 ,指定資料庫「dp101226.accdb」, 進階 SQL 產生選項的兩項都要勾

(圖 16) 實作過程 12

11


13. 在「Default.aspx」放「GridView」物件,在「GridView」中點「編輯資 料行」,把每一個欄位的標題(HeaderText)改為中文標題

(圖 17) 實作過程 13 14. 插入超連結「HyperLinkField」,標題為活動名稱,目的是為了能直接到 活動說明的頁面

(圖 18) 實作過程 14

12


15. 如果要瀏覽活動說明的頁面,直接按藍色的標題就會到

(圖 19) 實作過程 15

16. 在「act_mgr.aspx」放「GridView」物件,進階 SQL 產生選項也是兩個 都勾,在「GridView」智慧標籤勾選啟用「編輯」「刪除」「分頁」「排 序」

(圖 20) 實作過程 16

13


17. 在「Act_Detail.aspx」加入「DetailView」,設定資料來源參考下圖

(圖 21) 實作過程 17

18. 在這裡要按「WHERE」, 代表要傳回「活動資料表」的所有欄位

(圖 22) 實作過程 18

14


19. 建立「Login.aspx」,在「ContentPlaceHolder1」裡插入表格,在下方製 作一個表格,給使用者「學生」及「行政人員」的帳密

(圖 23) 實作過程 19

20. 在「登入」及「重新輸入」的按鈕中加入程式碼

(圖 24) 實作過程 20

15


21. 在「MasterPage.master」顯示登入狀態, 在左上角新增一個 Label 物 件

(圖 25) 實作過程 21 22. 然後開啟「MasterPage.master.vb」建立「PageLoad()」事件

(圖 26) 實作過程 22

23. 這時會發現明明還沒登入卻顯示「登入成功」,所以必須先修改 「Web.Config」的程式

(圖 27) 實作過程 23

16


24. 建置一個登出的頁面「Logout.aspx」主要是用來清除 cookie,開啟 「Logout.aspx.vb」建立一個「PageLoad()」事件

(圖 28) 實作過程 24 25. 修改「Act_Detail.aspx」,在「DetailView1」下方,加入 2 個「Button」物件 「我要報名」、「取消報名」

(圖 29) 實作過程 25

26. 然後在「Act_Detail.aspx.vb」的「PageLoad()」增加一些程式碼

(圖 30) 實作過程 26

17


27. 在「我要報名」和「取消報名」的按鈕中增加一些程式碼

(圖 31) 實作過程 27

28. 檢視是否報名成功,需要去查看報名紀錄,開啟「MyRec.aspx」,新增 「ListView1」及「Label1」到「ContentPlaceHolder1」,將「Label1」的 「text」改為「”尚未登入,請先登入!”」,然後開啟「MyRec.aspx.vb」 建立「PageLoad()」事件

(圖 32) 實作過程 28

18


29. 設定「ListView1」資料來源

(圖 33) 實作過程 29 30. 要加入「WHERE」指定查詢條件

圖(34) 實作過程 30

19


31. 開啟 Access「dp101226.accdb」建立關聯式的查詢:「個人參加紀錄」, 透過「使用者」和「活動」來完成

(圖 35) 實作過程 31 32. 然後要來製作參加紀錄的表頭,在「MyRec.aspx」加入一個「GridView」

(圖 36)實作過程 32 33. 選擇新資料來源建立「AccessDataSource2」,連結到「使用者」資料表,要 加入「WHERE」條件

(圖 37) 實作過程 33 20


34. 要區分學生跟行政人員的權限,所以必須在「Add_Act.aspx」等行政人 員可以做的事的頁面驗證是否為學生或行政人員,所以要修改 「Login.aspx.vb」的「BtnEnter_Click()」

(圖 38) 實作過程 34 35. 在「Add_Act.aspx.vb」、「Act_mgr.aspx.vb」、「Name_List.aspx.vb」 等行政人員才能操作的頁面下,建立的「PageLoad()」事件

(圖 39) 實作過程 35 36. 建立「std_err.aspx」來提示該頁面的錯誤訊息。

(圖 40) 實作過程 36 21


37. 在「Name_List.aspx」,加入「GridView」列出行政人員要查詢該筆活 動之報名參加名單,按「ORDER BY」設定按「Act_Data1」做遞減排序

(圖 4) 實作過程 37 38. 開啟 Access「dp101226.accdb」建立關聯式的查詢:「活動名單」,透 過「使用者」、「參加紀錄」和「活動」來完成

(圖 42) 實作過程 38

22


39. 在「Act_Member.aspx」加入「GridView」,按「ORDER BY」使 「Department」遞增、「Seat_Num」遞增

(圖 43) 實作過程 39 40. 在「Act_Member.aspx」上加入「GridView2」,當該活動名單的表頭,用來 查詢「活動編號」、「活動名稱」、「活動日期」,要設定「WHERE」條件

(圖 44) 實作過程 40

23


四、系統功能展示 1.

一開始的主頁面

(圖 45) 系統功能展示 1 2.

先以學生帳號登入試試

(圖 46) 系統功能展示 2

24


3.

到瀏覽活動看看有哪些活動,點選「活動名稱」進入活動介紹頁面

(圖 47) 系統功能展示 3 4.

如果已經報名,可以在這裡「取消報名」

(圖 48) 系統功能展示 4

25


5.

到「參加紀錄」可以檢視你報名了什麼活動

(圖 49) 系統功能展示 5 6.

接著以行政人員的帳密登入

(圖 50) 系統功能展示 6

26


7.

然後去「活動公告」,可以在這裡發佈活動消息

(圖 51) 系統功能展示 7 8.

在「活動管理」裡,可以刪除或編輯活動

(圖 52) 系統功能展示 8 9.

在格子裡更改完活動後,按更新就能改變

(圖 53) 系統功能展示 9 27


10. 要看有哪個活動有學生參加可以按「活動名單」

(圖 54) 系統功能展示 10 11. 點選「活動名稱」後可以查詢這個活動有哪些學生參加

(圖 55) 系統功能展示 11

伍、結果與討論 一、可行性之評估 我認為這是不可行的,還有很多地方需要改善,像是當參加人數而滿後應該 停止報名之類的,或是一個人不能重複報名同一種活動…等,還有很多地方的功 能還不完全。還有,如果能再增加「申請帳號」這個方面會更好,因為全校有這 麼多人,難道要把每個人都輸入到資料庫,真是個巨大的工程阿。假以時日,這 一定是個非常方便的系統。

28


二、問題與討論 因為是第一次接觸 Microsoft Visual Studio express 2010,所以很不熟,一開 始打程式碼時發生了很多問題使得專題不能執行,像是英文大小寫還有空格都不 能漏,資料庫的檔名也要跟程式碼裡的完全一樣,不然就會完全不能開啟。

陸、結論與建議 一、結論 在同學及老師的幫助之下,終於完成了這個專題。相較之下,上一個 Google 的協作平台雖然比較簡單,但是無法區分學生跟行政,而這個專題雖然超級難, 但功能也更齊全。雖然還有一些不足的地方需要更改,但如果學校能全面改使用 這個活動報名系統,相信在活動報名方面會更加快速、方便。做這個專題真的花 費我很多心思、時間,一開始接觸時覺得還蠻好玩的,當它可以執行時真的很有 成就感。有錯誤時,找到錯誤然後修正它,看到它變成可以執行時也覺得枉費我 花那麼多時間去做,總算是可以執行了。雖然我認為它不可行,但是如果它能再 改善一些地方的話,一定能成為好幫手。可以減少活動舉辦的困難度,可以加速 活動報名流程的時間。

二、改善與建議 因為是第一次接觸,所以一定要在上課時認真聽老師講解,不懂時就要問, 問老師或同學都可以,一定要把它搞懂,要不然問題只會越積越多,多到不知道 要從哪裡下手。而且每個字都很重要,一輸入錯字,系統便不能執行,尤其是「紀 錄」跟「記錄」,這兩個一定要分清楚。

參考文獻 1. 維基百科 ASP.NET http://zh.wikipedia.org/wiki/ASP.NET 2. 兩層式架構 http://bmeweb.niu.edu.tw/material/nwork/%E7%B6%B2%E9%9A%9B%E7%B6% B2%E8%B7%AF%E7%9A%84%E4%BC%BA%E6%9C%8D%E7%B3%BB%E7%B5%B1 %E6%9E%B6%E6%A7%8B.htm 3. 資料庫 http://epaper.gotop.com.tw/pdf/AEE003700.pdf 4. 資料庫 - 維基百科 http://zh.wikipedia.org/zh-tw/%E8%B3%87%E6%96%99%E5%BA%AB 5. SQL- 維基百科 http://zh.wikipedia.org/zh-tw/SQL 6. 小益哥資源網 https://sites.google.com/a/chsc.tw/easygo/

29

Dp101226w2