Page 1


【102 年彰化高商專題製作報告書】

目:活動報名系統

指導老師:陳隨意老師

參賽學生:劉碧婷


學校名稱:彰化高級商業職業學校 群

別:商業類群科

別:資料處理科

中華民國 103 年 02 月 07 日


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


表目錄 表1 表2 表3

研究流程------------------------------------------------------------4 系統架構------------------------------------------------------------4 系統操作過程--------------------------------------------------------5


圖目錄 圖1 圖2 圖3 圖4 圖5 圖6 圖7 圖8 圖9 圖 10 圖 11 圖 12 圖 13 圖 14 圖 15 圖 16 圖 17 圖 18 圖 19 圖 20 圖 21 圖 22 圖 23 圖 24 圖 25 圖 26 圖 27 圖 28 圖 29 圖 30 圖 31 圖 32 圖 33

ASP.Net 4.0 圖例---------------------------------------------------1 資料庫圖例---------------------------------------------------------2 SQL 資料庫查詢語言圖例---------------------------------------------2 2 層式與 3 層式網站架構圖例-----------------------------------------3 使用者資料表-------------------------------------------------------6 活動資料表---------------------------------------------------------6 參加紀錄資料表-----------------------------------------------------7 建立活動名單查詢---------------------------------------------------7 建立個人參加紀錄查詢-----------------------------------------------8 主板頁面-----------------------------------------------------------8 Web.SiteMap 建立---------------------------------------------------9 瀏覽活動-----------------------------------------------------------9 活動詳情(報名/取消報名)-------------------------------------------10 參加紀錄----------------------------------------------------------10 公告活動----------------------------------------------------------11 活動管理----------------------------------------------------------11 活動名單----------------------------------------------------------12 登入登出----------------------------------------------------------12 Web.SiteMap 設定程式碼--------------------------------------------13 報名/取消報名活動鈕*1---------------------------------------------13 報名/取消報名活動鈕*2---------------------------------------------14 報名/取消報名活動鈕*3---------------------------------------------14 權限檢測----------------------------------------------------------15 登入登出----------------------------------------------------------15 取消使用電腦使用者登入--------------------------------------------16 上方顯示登入者身分------------------------------------------------16 登入登出*1--------------------------------------------------------17 登入登出*2--------------------------------------------------------17 登入登出*3--------------------------------------------------------18 瀏覽活動*1--------------------------------------------------------18 瀏覽活動*2--------------------------------------------------------19 參加紀錄----------------------------------------------------------19 公告活動----------------------------------------------------------20


圖 34 圖 35 圖 36 圖 37

瀏覽活動*1--------------------------------------------------------20 瀏覽活動*2--------------------------------------------------------21 名單詳情----------------------------------------------------------21 使用者顯示--------------------------------------------------------22


專題名稱

摘要 各式各樣的活動在生活中出現,但絕大多數都沒有太受重視,原因可能包 含宣傳不夠或報名不方便等等……。宣傳單所造成的問題也是當今環境汙染的 一環,要怎麼做才能使活動受到注視及不造成社會成本?於是我們利用了 Visual Developer 2010 Express 來建置網站,利用這個網站,能清楚查看當期活動, 並依照登入登出系統來確保權限,不會造成有心人士濫用網站資源的問題。 關鍵字:Visual Developer 2010 Express、專題製作、商業類群科、資料處理科

壹、前言 一、研究動機 當學校舉辦活動時,時常會有人拿著一堆五花八門的宣傳單到班上,讓人 無法拒絕也難。而大多數人都會將這些沒用的紙張隨手丟棄,造成走廊及班上 的垃圾氾濫,真正有參加活動的卻少之又少。於是突發奇想,如果使用 Visual Developer 2010 Express 來製作一個專門讓師生檢視活動的網站,便可免去許多 不必要的浪費,並能讓每個人都確認自己是否有報名這個活動,以提醒自己。

二、研究目的 藉由網路,可以讓學校方便將活動的詳情公告給學生及老師,以防活動傳 遞的不順暢或未成功傳達的意外,並將使用者及管理員做權限上的區分,防止 活動機密的透漏。且可以依照登入的帳號,來檢視相對應使用者所參加的活動, 加以提醒使用者以避免遺忘。更提供管理員參加活動者的名單,方便進行確認 相關資訊及報名程序。

貳 、 文獻探討

27


一、ASP.Net 4.0 ASP.NET 是由微軟在.NET Framework 框架中所提供,ASP.NET 是 ASP 技術的 下一代,但它的發展性要比 ASP 技術要強大。它只是一個由 .NET Framework 提 供的一種開發平台,並非程式語言。

(圖 1)

二、資料庫 資料庫是本身可視為電子化的檔案櫃(註 2),資料庫指的是以一定方式儲存 在一起、能為多個使用者共享與應用程式彼此獨立的資料集合。

(圖 2)

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

(圖 3)

四、2 層式與 3 層式網站架構 2 層式與 3 層式最大的差別是在於將商業邏輯層獨立分雕出來。使用 3 層式 網站架構最大的優點是減少各單位負擔,傳統 2 層式分別是指使用者介面層、 和資料服務層這兩層。 兩層式 (圖 4)

參、研究架構

28


一、研究方法 以 Visual Developer 2010 Express 來建設基本的網頁頁面,依照工具箱的物 件來建立相對所需的功能,例如:GridView、Label、DetailView……等等,並連 結上創建好的資料庫,利用物件中的 WHERE、ORDER BY 以及進階,用來設定條 件、資料排序及搜尋特定的字串,傳回相對應的值。使用者及管理者權限方面, 先在資料庫中將兩者做區分後,再將網站傳回的值做不同程式碼的轉換,進而 來控制使用者所能使用的限制。在所有活動的活動名稱上設定好超連結,讓想 要了解活動詳情的使用者可以進行確認活動內容及報名活動的功能,而為了避 免報名活動期間,參加者有不可抗拒因素而必須取消報名,所以在網站上也設 立了取消報名的按鈕。以方便使用者取消。活動管理者更可以利用相對權限, 來了解活動的報名人數及報名人的相關資訊,例如:班級、姓名……等等,進 而讓報名手續更加快速方便。

二、研究流程 確認主題後,根據研究動機及研究方法,使用 Visual Developer 2010 Express 來創建基本網站的架構,將活動報名的使用者登入頁面放在網頁的左上角,讓 使用者做登入登出的連結。依照登入帳號來區分出使用者及管理員的相對權限 區,在活動清單的活動名稱創建超連結,依照活動名稱找到詳情,並且報名或 取消報名活動。利用資料庫來將使用者所報名的活動資訊放在個人參加紀錄欄 下,並統整出活動參加者的名單來讓管理者進行確認及相關程序。 (表 1)

肆、系統實作及測試 一、系統架構 活動報名系統依據登入登出來區分成學生專區及行政專區

(表 2)

二、系統操作流程

29


1、 登入登出:區分登入帳號是使用者或是管理員 2、 學生專區(使用者、管理員):  瀏覽活動:所有活動的清單頁面  參加紀錄:依照使用者帳號來傳回所參加的活動 3、 行政專區(管理員):  公告活動:管理者公告活動詳情之頁面  活動管理:供管理者修改活動詳情  活動名單:參加活動者的資訊

(表 3)

三、實作過程 一、資料庫 建立使用者資料表 (圖 5) 建立活動資料表 (圖 6) 建立參加紀錄資料表 (圖 7) 建立活動名單查詢 (圖 8) 建立個人參加紀錄查詢 (圖 9) 二、Visual Developer 2010 Express(版面/程式碼) 主板頁面 (圖 10) 30


Web.SiteMap 建立 (圖 11) 瀏覽活動 (圖 12) 活動詳情(報名/取消報名) (圖 13) 參加紀錄 (圖 14) 公告活動 (圖 15) 活動管理 (圖 16) 活動名單 (圖 17) 登入登出 (圖 18) Web.SiteMap 設定程式碼 (圖 19) 報名/取消報名活動鈕 *1 31


(圖 20) *2 (圖 21) *3 (圖 22) 權限檢測 (圖 23) 登入登出 (圖 24) 取消使用電腦使用者登入 (圖 25) 上方顯示登入者身分 (圖 26)

四、系統功能展示 1. 登入登出*1 (圖 27) *2 (圖 28) *3 32


(圖 29) 瀏覽活動*1 (圖 30) *2 (圖 31) 參加紀錄 (圖 32) 公告活動 (圖 33) 活動名單*1 (圖 34) *2 (圖 35)

名單詳情 (圖 36) 使用者顯示 (圖 37)

、結果與討論 33


一、可行性之評估 這個系統雖然可以運用在大部分的情況下,可是身分權限這個地方有些必 須要修改的問題,例如當a管理員公布了活動,但是b管理員卻同樣也可以修 改活動的內容,這樣可能造成惡意竄改資料的問題。所以在某些細節的部分, 還可以修改得更加完善。

二、問題與討論 整個製作網站的過程中,最讓我頭痛的就是網站的頁面排版問題,別人的 感覺物件都會乖乖站好不會亂跑,可使我的做起來卻會歪七扭八,動了這裏那 裏卻又改變了。儘管跟著老書說的一開始便修改了 Masterpage 的頁面,最後還 是無法如預期的排好。另一個問題是在登入登出那裡,那個地方不知道為甚麼 大家都很有問題,明明一模一樣的程式碼,最後卻不能執行,後來才發現一個 字打錯了,可能就會導致整個功能無法執行。

陸、結論與建議 一、結論 過程中雖然一度的想要放棄不做了,但是卻還是繼續下去,和朋友討論、 找老師詢問,花了三個多月才終於完成的報告,聽說我們目前學的是別人大學 才會教的,而且很多人學了還是不見得會做,就覺得很開心自己能夠學會這個 製作網站的工具。也許未來我們不會用到,但是我們至少比其他人更多會了一 項才藝。

二、改善與建議

34


可將使用者的權限在做更詳細的分割,清楚的劃分每個管理者所能修改己 檢視的內容。 避免有心人士的惡意竄改活動詳情。參考文獻 網路 1.維基百科-ASP NET http://zh.wikipedia.org/wiki/ASP.NET 2.維基百科-資料庫 http://zh.wikipedia.org/wiki/%E8%B3%87%E6%96%99%E5%BA%AB 3.維基百科-SQL http://zh.wikipedia.org/wiki/SQL 4.兩層式及三層式區別 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 5.yahoo 知識-SQL http://tw.knowledge.yahoo.com/question/question?qid=1105050101231 書籍 1. 儒林出版社-資料庫管理(第九章)

35

Dp101137w2劉碧婷