【101 年全國高職學生實務專題製作競賽暨成果展報告書】
題
目：方便快速報名系統
指導老師：陳隨益老師
參賽學生： 巫政龍
學校名稱：國立彰化高級商業職業學校 群
別：商業管理群
科
別：資料處理科
中 華 民 國
1 0 3
年
0 2
月
0 3
日
目錄 摘要 --------------------------------------------------------------------- 1 壹、前言 ----------------------------------------------------------------- 1 一、研究動機 ----------------------------------------------------------- 1 二、研究目的 ----------------------------------------------------------- 1 貮、文獻探討 ------------------------------------------------------------- 1 一、ASP.Net 程式設計 --------------------------------------------------- 1 二、2 層式與 3 層式網站架構 --------------------------------------------- 2 三、資料庫 ------------------------------------------------------------- 2 四、SQL 資料庫查詢語言 ------------------------------------------------- 3 參、研究架構 ------------------------------------------------------------- 3 一、研究方法 ----------------------------------------------------------- 3 二、研究流程 ----------------------------------------------------------- 3 肆、系統實作及測試 ------------------------------------------------------- 3 一、系統架構 ----------------------------------------------------------- 3 二、系統操作流程 ------------------------------------------------------- 4 三、實作過程 ----------------------------------------------------------- 5 四、系統功能展示 ------------------------------------------------------ 11 伍、結果與討論 ---------------------------------------------------------- 14 一、可行性之評估 ------------------------------------------------------ 14 二、問題與討論 -------------------------------------------------------- 15 六、結論與建議 ---------------------------------------------------------- 15 一、結論 -------------------------------------------------------------- 15 二、改善與建議 -------------------------------------------------------- 15
表目錄 表一 表二 表三 表四 表五
「活動」資料表個欄位屬性 ------------------------------------------- 5 「使用者」資料表之欄位 --------------------------------------------- 5 「使用者」資料表各欄位屬性 ----------------------------------------- 6 「參加紀錄」資料表之欄位 ------------------------------------------- 6 「參加紀錄」資料表各欄位屬性 --------------------------------------- 6
圖目錄 圖一 圖二 圖三 圖四 圖五 圖六 圖七
ASP.NET 執行架構 --------------------------------------------------- 2 二層式架構圖 ------------------------------------------------------- 2 研究過程流程圖 ----------------------------------------------------- 3 系統架構圖 --------------------------------------------------------- 4 行政人員操作流程圖 ------------------------------------------------- 4 學生操作流程圖 ----------------------------------------------------- 5 登入畫面 ---------------------------------------------------------- 11
圖八 瀏覽活動 ---------------------------------------------------------- 11 圖九 我要報名 ---------------------------------------------------------- 12 圖十 參加紀錄 ---------------------------------------------------------- 12 圖十一 公告活動 -------------------------------------------------------- 13 圖十二 活動管理 -------------------------------------------------------- 13 圖十三 活動名單 -------------------------------------------------------- 14
101 年全國高職學生實務專題製作競賽專題名稱 摘要 在學校幾乎每隔幾個月甚至幾個禮拜，各個處室就會舉辦各種不同的活動， 但是由於現在教官是把原本第一節幹部集合的規定改成由廣播公布，使得有可能 有些訊息沒被注意到而忽略到許多的活動，即使班櫃仍然有紙本消息，但是在現 在這種科技發達的時代，這樣的方法很浪費資源，而且往往拿回來公布後通常都 會用傳閱方式，可是有時候就會被沒興趣的同學丟掉，使一些有興趣的同學沒參 與到活動，因此如果改成由電腦上傳的方式，讓行政單位公布活動，使用者登入 參加自己有興趣的活動便能降低上述的問題。為了完成這問題便使用了老師教的 ASP.NET 和 ACCESS 資料庫來架設這個報名系統。 關鍵字：商管群、專題製作、ASP.NET、ACCESS 資料庫
壹、前言 一、研究動機 原本報名活動的程序是由幹部帶回報名表再由有興趣的同學決定要不要參 加，但往往都會有人不知道甚至報名表不見之類的事情發生，而當報名表繳回相 關處室後整理報名人數也是件麻煩的是，由於現在每班教室都有電腦便可以使用 線上報名活動的方式來報名活動，相關處室只要上傳活動就能讓使用者報名，整 理人數也比較方便，而使用的工具便是微軟公司研發的「Microsoft Visual Web Developer Express」。
二、研究目的 做一個報名活動系統，只要有了這個便可以降低紙張的使用與浪費，各個處 室的行政作業起來也比較簡潔方便，只要運用這系統，各個班級就不用花太多時 間宣布並且催促報名表得繳交，而相關處室也只要上傳活動，修改或刪除等等… 然後統整報名人數即可，對地球上樹木資源的減少和人力資源的浪費有著明顯的 改善。
貳、文獻探討 一、ASP.Net 4.0 ASP.NET 是由微軟開發出來一種針對 Windows 應用軟體的一種開發環境，封 裝在 System.Web.dll 檔案中，顯露出 System.Web 命名空間，並提供 ASP.NET 網 頁處理、擴充以及 HTTP 通道的應用程式與通訊處理等工作，以及 Web Service 的基礎架構，ASP.NET 也可認為.NET 的元件。
1
圖一 ASP.NET 執行架構
二、2 層式與 3 層式網站架構 全球資訊網發展之初，網路上電腦使用是以主從式（Client/Server）服務為 主的兩層式架構，包括用戶端的使用介面層（Presentation tier），和伺服器端的 資料服務層（Data Service tier） 用戶端的使用介面層：負責接收使用者的資料輸入，並將結果顯示出來，包含商 業邏輯（Business Logic），例如計算，輸入核對、用戶端電腦管理、與伺服器等 工作。 伺服器端的資料服務層：負責伺服器的工作，包括資料庫的資料處理和網站伺服 器（Web Server），有時也會有一些商業邏輯的工作。傳統主從式架構最大的缺 點，為隨著功能的增加，用戶端的用戶程式會越來越複雜，不但維護不易，用戶 端電腦的負荷也會越來越大。 三層式（3-tier）是目前建構電子商務系統時最常使用的架構，與傳統兩層 式架構最大的差異處，未將商業邏輯單獨分離出來，減輕放置於用戶端或伺服器 端電腦的負擔。三層式 Web 的架構當中包含使用者介面層、商業邏輯層、和資 料服務層
圖二 二層式架構圖
三、資料庫
2
將資料電子化後的檔案櫃，也就是可以將一筆資料新增、儲存、修改、刪除， 然後以一定的方式連結，使原本獨立的資料能集合起來，並與其他的應用程式相 互連結使其更完整。
四、SQL資料庫查詢語言 又叫：「結構化查詢語言」，是一種用於資料庫的查詢語言，可以從資料 SQL 是高階的非過程化編程語言，它允許使用者在高層資料結構上工作。它不要 求使用者指定對資料的存放方法，也不需要使用者了解其具體的資料存放方式。 庫中擷取、排序和篩選特定想要的資料。IBM 公司最早應用在其資料庫系統。
參、研究架構 一、研究方法 首先有著「行政專區」和「使用者專區」分成 2 個部份後，使用 ACCESS 資 料庫建立基本所需的使用者資料、活動紀錄等等…然後再用 Microsoft Visual Web Developer Express 來製作整個網站的基本架構，在一步一步地完成裡面的基本 內頁， 然後製作登入、登出辨別使用者分分這些功能，由於這些功能很容易因 為一些小細節的地方就出錯，因此必須完成一個功能後就測試一次，藉由這樣才 不至於完成後發係錯誤很多，結果找了老半天不知道哪裡有誤，也藉由這樣的反 覆測試加深印象跟熟練度降低失誤率，最後完成這些登入、登出、上傳活動、修 改、刪除、報名等等…這些功能後，就可以開始美化版面，使他更美觀。
二、研究流程
圖三 研究過程流程圖
肆、系統實作及測試 一、 系統架構 3
圖四 系統架構圖 整個系統主要由登入跟登出來進行整個流程，然後依照登入帳號密碼判別是行 政人員或學生，如果是行政人員便可以到行政專區裡進行公告活動、管理活動或 是查詢參加的人數，反之如果是學生就沒有權限到行政專區進行上述這些行為， 只能在學生專區內瀏覽活動、參加或取消自己想要或不想參加的活動。
二、系統操作流程 （一）行政人員若要行使公告活動、管理活動或是查詢參加的人數這些流程：
圖五 行政人員操作流程圖 （二）學生若要瀏覽活到然後報名活動之後確認是否報名成功的流程：
4
圖六 學生操作流程圖
三、實作過程 1〃先利用 ACCESS 建立資料庫，包含下列這些表單： 表 1「活動」資料表個欄位屬性 主索引鍵 欄位名稱 資料類型 格式 標題 Act_Num 文字 活動編號 Add_Date 日期/時間 簡短日期 登錄日期 Act_Name 文字 活動名稱 Department 文字 辦理處室 Undertaker 文字 承辦人員 Participants 文字 參加對象 Stu_Num 數字 整數 預定名額 Fee 數字 報名費用 Location 文字 活動地點 Act_Date1 日期/時間 簡短日期 活動開始 Act_Date2 日期/時間 簡短日期 活動結束 Act_Cont 文字 活動內容 App_Date1 日期/時間 簡短日期 報名開始 App_Date2 日期/時間 簡短日期 報名截止 Remark 文字 備註 表 2「使用者」資料表之欄位 代/學號 處室/班級 序/座號 姓名 A001 教務處 1 陳大益 A002 教務處 2 陳二益 B001 學務處 1 陳三益 C001 實習處 1 陳四益 014001 資二 1 1 陳小明
帳號 aca01 aca02 stu01 pra01 014001 5
密碼 1111 1111 1111 1111 1111
預設值
電子信箱郵件 tch666@chsc.tw tch666@chsc.tw tch666@chsc.tw tch666@chsc.tw 014001@stu.chsc.tw
身分 備註 T T T T F
012003 014002 014003
商二 2 資二 1 資二 1
3 2 3
李小明 王小明 張小明
012003 014002 014003
表 3 「使用者」資料表各欄位屬性 主索引鍵 欄位名稱 資料類型 格式 User_Num 文字 Department 文字 Undertaker 文字 Seat_Num 數字 整數 User_Acc 文字 User_Pw 文字 Mail_Addr 文字 User_t 是/否 Remark 文字 圖 4 「參加紀錄」資料表之欄位 序號 帳號 活動編號 1 014001 0002 2 012005 0003
1111 1111 1111
012003@stu.chsc.tw 014002@stu.chsc.tw 014003@stu.chsc.tw
標題 代/學號 處室/班級 姓名 序/座號 帳號 密碼 電子郵件信箱 身分 備註
F F F
預設值
報名時間 2012/10/5 15:23:22 2012/10/4 20:20:20
圖 5 「參加紀錄」資料表各欄位屬性 主索引鍵 欄位名稱 資料類型 格式 s_Num 文字 User_Acc 文字 Act_Num 文字 App_Time 日期/時間
標題 序號 帳號 活動編號 報名日期
預設值
2.再利用 Microsoft Visual Web Developer Express 製作所需功能： Act_Detail 所需要用到的程式碼(確認是否登入並執行報名即取消報名) Partial Class Default2 Inherits System.Web.UI.Page '初始化變數,建立資料庫之連結 Private ids As New System.Web.UI.WebControls.AccessDataSource() Private Sub VarInit() ids.DataFile = "app_data\dp101204db.accdb" End Sub Protected Sub Page_Load(ByVal sender As Object, ByVal System.EventArgs) Handles Me.Load Call VarInit() '呼叫出始化變數,建立資料庫檔案連結之副程式 If (My.User.IsAuthenticated) Then '如果已經登入了 '判斷是否已經報名該活動了,不可重複報名 6
e
As
ids.SelectCommand = "select * from 參加紀錄 where Act_Num=@活動編號 AND User_Acc=@使用者帳號" Dim user_accl As String = My.User.Name '登入者之帳號 Dim act_num1 As String = Request.QueryString("Act_Num") '活動編號 ids.SelectParameters.Add("活動編號", act_num1) ids.SelectParameters.Add("使用者帳號", user_accl) Dim dv As Data.DataView = ids.Select(New DataSourceSelectArguments) If dv.Count > 0 Then bthApply.Visible = False bthCancel.Visible = True Label1.Text = "已經報名,請按「取消報名」鈕,取消參加!" End If End If End Sub Protected Sub bthApply_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles bthApply.Click If (Not My.User.IsAuthenticated) Then FormsAuthentication.RedirectToLoginPage() Else Dim user_acc1 As String = My.User.Name Dim act_num1 As String = Request.QueryString("Act_Num") ids.InsertCommand = "INSERT INTO 參 加 紀 錄 ([User_Acc],[Act_Num]) VALUES(@user_acc,@act_num)" ids.InsertParameters.Add("user_acc", user_acc1) ids.InsertParameters.Add("act_num", act_num1) If ids.Insert <> 0 Then Label1.Text = "報名手續完成,請查詢活動名單" bthApply.Visible = False bthCancel.Visible = True End If End If End Sub Protected Sub bthCancel_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles bthCancel.Click If (Not My.User.IsAuthenticated) Then FormsAuthentication.RedirectToLoginPage() Else Dim user_acc1 As String = My.User.Name Dim act_num1 As String = Request.QueryString("Act_Num") ids.DeleteCommand = "DELETE FROM [參加紀錄] Where Act_Num=@Act_Num AND User_Acc=@User_Acc" ids.DeleteParameters.Add("Act_Num", act_num1) 7
ids.DeleteParameters.Add("User_Acc", user_acc1) If ids.Delete <> 0 Then Label1.Text = "報名紀錄已取消,請查詢活動名單!" bthApply.Visible = True bthCancel.Visible = False End If End If End Sub End Class Act_Mgr 及 Add_Act 所需要用到的程式碼(管理及新增活動，判斷是否為行政人 員) Partial Class Default2 Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.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 End Sub End Class Partial Class Default2 Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.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 End Sub End Class Login 頁面所需要用到的程式碼(登入) Partial Class Default2 8
Inherits System.Web.UI.Page Protected Sub BtnEnter_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles BtnEnter.Click Dim sds As New System.Web.UI.WebControls.AccessDataSource() sds.DataFile = "App_Data\dp101204db.accdb" sds.SelectCommand = "select * from 使用者 where User_Acc=@會員帳號 and User_PW=@會員密碼" sds.SelectParameters.Add("會員帳號", txtAcc.Text) sds.SelectParameters.Add("會員密碼", txtPwd.Text) Dim dv As Data.DataView = sds.Select(New DataSourceSelectArguments) '判斷符合查詢紀錄的筆數,如果 0 筆,則表「帳號或密碼錯誤」 Dim user_t As Boolean = dv.Table.Rows(0).Item(7) If dv.Count = 0 Then lblShow.Text = "帳號或密碼錯誤!" Else Session.Add("user_t", user_t) lblShow.Text = "登入成功!" FormsAuthentication.RedirectFromLoginPage(txtAcc.Text, True) End If End Sub Protected Sub BtnClear_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles BtnClear.Click txtAcc.Text = "" txtPwd.Text = "" lblShow.Text = "" End Sub End Class Logout 頁面所需要的程式碼(登出) Partial Class Default2 Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal System.EventArgs) Handles Me.Load FormsAuthentication.SignOut() '清除 login 時所建立的 cookies Session.RemoveAll() '清除 Session 的內容 Response.Redirect("Default.aspx") '轉址到首頁 End Sub End Class MasterPage 所需要用到的程式碼(需判斷是否登入) Partial Class MasterPage Inherits System.Web.UI.MasterPage Protected Sub Page_Load(ByVal sender As System.EventArgs) Handles Me.Load 9
Object,
ByVal
e
As
e
As
If (Not My.User.IsAuthenticated) Then lblLogin.Text = "尚未登入，請按<a href='login.aspx'>登入</a>" Else lblLogin.Text = My.User.Name & "已登入(" & "<a href='logout.aspx'>登出 </a>)" End If End Sub End Class MyRec 所需要用到的程式碼(查詢參加紀錄) Partial Class Default2 Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal System.EventArgs) Handles Me.Load If (My.User.IsAuthenticated) Then '如果已經登錄 Dim user_acc1 As String = My.User.Name Session.Add("user_acc1", user_acc1) '取得登入者帳號 Label1.Text = "" '將登錄者帳號寫入 Session End If End Sub End Class
e
As
Web.sitemap 所需要用到的程式碼(網站地圖，用來整個網站的骨架) <?xml version="1.0" encoding="utf-8"?> <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0"> <siteMapNode url="" title ="活動報名系統" description="活動報名系統"> <siteMapNode url="" title ="學生專區" description="學生專區"> <siteMapNode url="default.aspx" title="瀏覽活動" description="瀏覽活動 "/> <siteMapNode url="MyRec.aspx " title="參加紀錄" description="參加紀錄 "/> </siteMapNode> <siteMapNode url="" title="行政專區" description=""> <siteMapNode url="add_act.aspx" title="活動公告" description="活動公告 "/> <siteMapNode url="act_mgr.aspx" title="活動管理" description="活動管理 "/> <siteMapNode url="Name_list.aspx" title="活動名單" description="活動名 單"/> </siteMapNode> </siteMapNode> </siteMap>
10
四、系統功能展示 1.按「登入」到此畫面輸入帳號密碼登入
圖七 登入畫面
2.登入後到瀏覽活動會出現已公告的活動
圖八 瀏覽活動 11
3.點選有興趣的活動進入，會出現我要報名按鈕（如果報名過會是取消報名紐）
圖九 我要報名
4.到「參加紀錄」確認是否報名完成
圖十 參加紀錄
12
5.如果是以行政人員帳號登入可以公告活動
圖十一 公告活動
6.公告後可以到「活動管理」編輯活動
圖十二 活動管理
13
7.活動公告完後可以到活動名單查看參加者
圖十三 活動名單
伍、結果與討論 一、可行性之評估
製作完這表單後發現喜歡傳統報名系統的人有 6 人，而喜歡此系統的人有 14 人
贊成
14
不贊成
6 14
大部分的人還是認為此系統是可行的，但仍有少部分的人感覺傳統的報名流 程比較好，可是大致上這系統看起來可以使用在日常的行政處理上，能被大部分 的人認為可行示示 OK 的。
二、問題與討論 在這次專題中使用的是 Microsoft Visual Web Developer Express，由於這是 第一次使用的軟體，因此在一開始並不熟悉它的使用方式，常常會遇到工具箱不 見卻找不到或是不小心微調大小就整個跑掉等等問題，還有因為這是設計一個網 站，也需要少量的程式碼，但因為概念不是太了解，所以還是必須仰賴老師的講 解跟幫忙解決問題，因為常常會有程式碼不小心打錯而偵錯時一直找不到問題在 哪，作完成後一開始那些問題都解決了，也對這程式有比較多的了解。
陸、結論與建議 一、結論 這是這學期的第二個專題作品了，我們從完全沒接觸過 Microsoft Visual Web Developer Express 的初學者經由老師的逐步講解與實際操作後，漸漸地對這個 應用程式有了初步的概念與了解，而這系痛在實務上也有著實際的實用性，有很 多的系統都可以利用這個軟體來製作並實施他，這次這個系統在實務上也很實 用，利用網際網路的發達來取代傳統的紙筆報名，大量的減少了人力浪費以及數 目的減少，對現在這個環保意識抬頭的時代，這系統將可以被沿用，而完成這次 的作品也有著相當的成就感，因為從完全沒有東西到做出完成品是勳要一段時間 的，也很謝謝所有幫助我的同學以及老師，如果沒有可以互相幫忙的同學以及幫 我們解決疑難雜症的老師，要完成這個專題還是有一定的難度，因此可以完成他 並且能應用在日常，很高興！
二、改善與建議 雖然大致上他是可行的一個系統，但由於只是簡易版，所以仍有著一些缺點 沒做到，如果以後能繼續修改這些不足的地方，這系統將更有可看性，更實用， 更方便！ （一） 如果有個使用著註冊的地方會更方便（可以讓學生或行政以外的人 使用），因為現在是使用內定的帳密，因此如果想讓其他人使用可以 改善這個地方 （二） 防盜措施太少，萬一如果某個處室被盜用帳密，那不就可以隨意地 變更已經公布的活動 （三） 因為會有很多活到被公布，可是有些過期的活動依然會繼續保留在 上面，有時候會使使用者不知道而發現報名已過期的情形，所以可以 把過期的活動篩炫或者是自動移除，這樣就可以減少這類問題 （四） 可以把各處室所公布的活動加以分類，在搜尋上多下點功夫，這樣 會更方便 （五） Cookie 的記憶時間有點常，使用者就算關閉視窗後再進去依然不會 登出，這對資訊安全方面有所疑慮
15
參考文獻 維基百科-ASP.NET。取自http://zh.wikipedia.org/wiki/ASP.NET 二層式架構。取自 http://bmeweb.niu.edu.tw/material/nwork/%E7%B6%B2%E9%9A%9B%E7%B6%B 2%E8%B7%AF%E7%9A%84%E4%BC%BA%E6%9C%8D%E7%B3%BB%E 7%B5%B1%E6%9E%B6%E6%A7%8B.htm 維基百科-資料庫。取自 http://zh.wikipedia.org/wiki/%E8%B3%87%E6%96%99%E5%BA%AB 維基百科- SQL。取自http://zh.wikipedia.org/wiki/SQL
16