【102 學年國立彰化高商資料處理科專題製作成果報告書】
題目: Microsoft Visual Web Developer 2010 Express 應用校內活動 報名系統建置 指導老師：陳隨益 參賽學生：吳昆恩
學校名稱：國立彰化高級商業職業學校 群別：商業管理群 科別：資料處理科
中華民國一○三年三月二十二日
目錄
摘要-------------------------------------------------------------- 5 一 前言----------------------------------------------------------- 6 1. 研究動機 ---------------------------------------------------------------- 6 2. 研究目的 ------------------------------------------------------- 6
二 文獻探討 ------------------------------------------------------ 7 3. Web 的發展 ------------------------------------------------------ 7 4. 知識管理的發展 -------------------------------------------------- 8
5. 開發技術與工具 -------------------------------------------------- 9 三 研究架構 ------------------------------------------------------ 10 6. 研究方法 ------------------------------------------------------- 10 7. 研究流程 ------------------------------------------------------- 10 四 系統架構 ------------------------------------------------------ 11 五 實作流程 ------------------------------------------------------ 11 六 網站功能介紹與展示 -------------------------------------------- 12 七 結論與探討 ---------------------------------------------------- 19 8. 問題與討論 ----------------------------------------------------- 19 9. 結論 ---------------------------------------------------------- 19
八 參考資料 ------------------------------------------------------ 20
表目錄
表(一) ------------------------------------------------------------ 7 表(二) ------------------------------------------------------------ 10 表(三) ------------------------------------------------------------ 11
圖目錄
圖(一) ------------------------------------------------------------ 12 圖(二) ------------------------------------------------------------ 13 圖(三) ------------------------------------------------------------ 14 圖(四) ------------------------------------------------------------ 15 圖(五) ------------------------------------------------------------ 16 圖(六) ------------------------------------------------------------ 17 圖(七) ------------------------------------------------------------ 18
Microsoft Visual Web Developer 2010 Express 應用 校內活動報名系統建置
摘要
在這學期跟著老師循序漸進的摸索下，讓我們從基礎做起，從編排版面、設 立物件中一步步的了解網站內部的基本建構與操作，甚至編寫出複雜的程式碼， 一直到最後的網站實測、編修等，整個操作下來的經驗體會，都讓我們對架設網 站有了初步的認知與興趣。自從漸漸接觸到 Microsoft Visual Web Developer 2010 Express 這套軟體後，網路上大部分的網站系統，像是一些遊戲官網、彰商首頁亦 或是私人部落格等等，在我們的眼裡已經不是單單感受到表面的美觀那麼膚淺， 而是能夠嘗試著去分析物件所呈現的效果是用哪些不同的程式碼編寫而成，進而 增長自己的知識。
一 前言
1. 研究動機 對於現代人而言，網路已經融入了每個人的日常作息，舉凡大多年輕 人會用部落格，而成年人則會注意網站上的財經股市，甚至連老年人都會 到 facebook 種種樹、餵餵魚，然而，在瀏覽之餘，不免會對於網站的來源 有股強烈的好奇心，進而想設計屬於自己的網站，讓自己不再是個觀眾， 逐漸加入到這個未知的領域。
2. 研究目的 使用了 Microsoft Visual Web Developer 2010 Express，我們能靈活 的運用並構築網站，從簡陋的背景開始，加入了物件，豐富了每個版面， 漸漸地為整個「報名系統」做一個初步的架構與形狀，緊接著打入一連串 的程式碼，讓帳號密碼登入、登出、超連結，以及網頁如何記錄 cookies 能夠做一個動態的執行，在於這個部分讓我們明確的了解到網站的基本建 構。
二 文獻探討 1. Asp.Net 程式設計簡介 ASP.NET 網頁可以建立 Web 應用程式的動態內容。 使用靜態 HTML 網 頁，伺服器可以滿足 Web 要求，方法是讀取檔案並以現有狀態將其傳送至 瀏覽器。 相反地，當有人要求 ASP.NET Web 網頁時，網頁會在 Web 伺服 器上當做程式執行。 網頁執行時，它可以執行網站需要的任何工作，包括 計算數值、讀取或寫入資料庫資訊，或者呼叫其他程式。 在輸出時，這個 網頁會動態產生標記 (為 HTML 或其他標記語言格式的項目)，並向瀏覽器 傳送該動態輸出。
(圖一)
2. 兩層與三層式網站架構 在傳統的主從式網路架構(抑或可稱為兩層式架構)，能有效形成用戶端的使 用者介面層和伺服器端的資料服務層這種 P2P 的快速連結方式。其傳統網路架構 中最致命的缺點，即為隨著功能的增多，而用戶端的應用程式也跟著變得繁冗複 雜，對於電腦的負荷也隨之增加。 為了補足兩層式網站架構這樣致命的缺失，而又衍生出了三層式網站架構的 概念，而兩者之間的差異處在於將商業邏輯這項工作單獨分離出來，以有效減輕 置於用戶端與伺服器端電腦的負擔。 兩層式網站架構
三層式網站架構
在全球資訊網發展初起，網路上電腦的使用是 以主從式服務為主，為兩層式架構，包括用戶 端的使用介面層，和伺服器端的資料服務層， 用戶端的使用介面層，負責接收使用者的資料 輸入，和將結果顯示出來，譬喻如用戶端的用 用程式，一般包括商業邏輯（Business Logic） 的工作，例如計算，輸入核對、用戶端電腦管 理、與伺服器等工作。伺服器端的資料服務層 負責伺服器的工作，包括資料庫的資料處理和 網站伺服器（Web Server），有時也會有一些
於三層式架構當中，所謂三層係指使用者介面 層、商業邏輯層、和資料服務層。 使用者介面層，負責接收使用者的資料輸入， 和將結果顯示出來，譬如瀏覽器或其他用戶端 應用程式。商業邏輯層，作為使用者介面與資 料庫的橋樑，負責商業法則、與業務有關的資 料處理、網站伺服器等工作，譬如使用 IIS 的 網站伺服器，採得 ASP 撰寫程式，並透過 DCOM 與 MTS 的元件相溝通，再透過 ODBC 與各種支 援 ODBC 的資料庫相連接。資料服務層，負責
商業邏輯的工作。
資料庫或訊息的處理，譬如使用 SQL Server 資料庫的預儲程序，或使用 MSMQ 做訊息的處 理等。
(表一)
3. 資料庫 資料庫本身可以說是電子化的檔案櫃，即為儲存各種電子檔案的處所，一般 具有儲存、擷取、安全保障、備份等基礎功能，而資料庫的架構可以大致區分為 三個概括層次：內層、概念層和外層，進而有效區分。資料庫系統指的是以一定 方式儲存在一起、能為多個使用者共享、與應用程式彼此獨立的資料集合。常見 的資料庫類型有 MySQL、Microsoft Access、SQL Server 等等。
(圖二)
三 研究架構 1.
研究方法
使用 Microsoft Visual Web Developer 2010 Express 作為建置網站的基礎 工具，從基礎的背景與版面開始，添加上系統所需要用到的物件與程式碼，使整 個動作能如我們預期般的執行，最後統整整個系統，在加以詳細檢查錯誤，以完 成系統網站建置的動作。
2.
研究流程
建立 資料夾
開啟 新網站
建置 版面
美化 版面
輸入 程式碼
添加 物件
進行 網站測試 (表二)
四 系統架構
(表三)
五 實作流程 在明確的整體架構與製作流程之下，首先我們開始建立一個空的資料夾，作 為存放網站架構的空間，接著建置主板頁面，使用 Access 來達成裝載大量資料的 目的，在開始進一步設計整體版面，我們以主板頁面為根，其餘的頁面為葉，有 效地承襲了主板頁面的架構再去進行個體的微調以及修改，使的各種頁面各有個 獨特的功能與特色，接下來則逐步在頁面中輸入我們所需的程式碼，以達到我們 想要它去執行的要求，並且之後必須隨時檢查及測試來保持其完整與正確性。
六 網站功能介紹與展示 登入畫面
學生專區瀏覽活動
註：登入之後的起始畫面，這是用來顯示所有活動的頁面，前方第 2 欄有設置超 連結，可以點進去做活動的報名。
學生專去參加紀錄
註：此頁面可以用來檢視此帳號密碼曾經報名過的活動。
行政單位活動公告
註：此頁面是設計來讓行政單位新增活動的，若是用非行政單位的帳號密碼登入(學生)時，將會 無法進入。
行政單位活動管理
註：此頁面是用來便於行政單位掌控所有活動的資訊。
行政單位活動名單
註：此頁面是用來提供行政單位檢視所有的活動，點選前方的藍色超連結即能傳到該活動報名者 的頁面。
七 結論與探討 1.
問題與討論 要說所有步驟中最為耗時與艱難的部分在於理解和編寫程式碼，在龐大的軟
體資訊面前，時常會碰到我們不明白的專業術語以及程式語法，每當出現此類狀 況時，總會需要更多的時間去度過這個瓶頸，又總算輸入完一套程式編碼時，又 會因為某些小錯誤而使整個執行動作停頓，而面對我們本完全不熟悉的操作環境 時，多加的利用課堂之外的空閒時間去慢慢接觸、漸漸了解，則是有效減少出錯 率的不二法門，進而使整體的流程更加流暢。
2.
結論 原本，像是自己建置網站的空想，是個如此令人陌生且遙遠的目標，但是在
經歷過一連串的接觸之後，我們學習到像是超連結、消除 cookie 或者是會員登入、 登出等與以往截然不同的內容，再加上結合了一年級使用 VB 程式碼應用的概念， 我們能夠逐步的摸索出一片屬於自己的設計理念，靈活且多變的應用於 Microsoft Visual Web Developer 2010 Express 之上，構築出我們夢想中的網站。
八 參考資料 小益哥資源網 https://sites.google.com/a/chsc.tw/easygo/news-2/zichukeernianjidi2cizh uantishumianbaogaofanlidanganxiazai 微軟 ASP.NET 網頁程式設計簡介 http://msdn.microsoft.com/zh-tw/library/ms178125(v=vs.100).aspx?ppud=4 維基百科 – 資料庫 http://zh.wikipedia.org/wiki/%E6%95%B0%E6%8D%AE%E5%BA%93