Page 1

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

題目: Microssoft Vi isual WWeb Dev veloper r 2010 Expres ss 應 應用 校內活動 校 動報名系 系統建置 置

參賽學 學生:沈 沈柏任

指導老 老師:陳 陳隨益

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

西元 2014 2

年 1

0 2 月 0 9


目錄 摘要 ────────────────────────────────5 壹 前言 ───────────────────────────────6 (一) (二)

研究動機 ────────────────────────────────6 研究目的 ────────────────────────────────6

貳 文獻探討 ─────────────────────────────7 (三) (四) (五)

Web 的發展 ───────────────────────────────7 知識管理的發展 ─────────────────────────────8 開發技術與工具 ─────────────────────────────9

參 研究架構 ────────────────────────────10 (六) (七)

研究方法 ───────────────────────────────10 研究流程 ───────────────────────────────10

肆 系統架構 ────────────────────────────11 伍 實作流程 ────────────────────────────11 坴 網站功能介紹與展示 ───────────────────────12 柒 結論與探討 ───────────────────────────19 (八) (九)

問題與討論 ──────────────────────────────19 結論 ─────────────────────────────────19

捌 參考資料 ────────────────────────────20

2


圖目錄 圖(一) ───────────────────────────────12 圖(二) ───────────────────────────────13 圖(三) ───────────────────────────────14 圖(四) ───────────────────────────────15 圖(五) ───────────────────────────────16 圖(六) ───────────────────────────────17 圖(七) ───────────────────────────────18

3


表目錄 表(一) ───────────────────────────────7 表(二) ───────────────────────────────10 表(三) ───────────────────────────────11

4


Microsoft Visual Web Developer 2010 Express 應用 校內活動報名系統建置 摘要

網路上大多網站系統,例如一些購物網站、公家機關網站或者私人部落格等 等都是由底下各種軟體程式所編織而成的,這次所教的軟體,正是讓我們了解網站 內部的基本建構與操作,舉凡設計網站的版面開始,過程設立了許多物件,並在其 中輸入了許多略為繁雜的程式碼,對初學者的我們來說,倒是頗為困難,一直到最 後的網站測試、美化等等,整個操作下來的心路歷程,都給我們對網路上的各種網 頁有了初步的了解與興趣。

5


壹 前言 (一) 研究動機

對於日常在網路路上瀏覽的我們,看過了許多形形種種網頁,然而,瀏 覽之際,不時對於網頁,有股想設計屬於自己理念的網站,依照自己興趣, 而利用此軟體做不同層面的操作,不再像以往只是個接受者,逐漸改變成是 可以自己建立網站,並且供他人瀏覽。

(二) 研究目的

利用此軟體,我們大致能自由的操作,設計獨一無二的網站,起初的教 學,是先以「報名系統」作為教學導覽,是個做為各項活動報名的架構,並 且需要輸入帳號密碼以作為資料的紀錄,讓我們初步了解,網路上基本的帳 號密碼登入/出、超連結,以及網頁如何記錄 cookies 的流程。

6


貳 文獻探討 (一) Web 的發展

Web 是最常用的網路應用概念,它是用戶端向伺服器端提交請求,並獲得網 頁頁面的技術總稱。Web 觀念目前可分為三個發展階段,即 Web 1.0,Web 2.0 及 Web 3.0。簡單來說,Web 1.0 是將資訊(網頁內容)靜態呈現給瀏覽者的 觀念,Web 2.0 是將資訊動態呈現在網站,瀏覽者亦能參與資訊製作的觀念, Web 3.0 則是在 Web 2.0 基礎上,讓機器(或說電腦)亦能參與資訊製作的 觀念。 Web 發展階段

特性說明 是屬於一些靜態應用,例如獲取HTML 頁面,瀏覽者 只能單純的接受網頁頁面上排版文字。加入了一些簡 單的應用程式或服務進行簡單的交流,比如用戶登

Web 1.0

錄, 查詢資料庫, 提交數據等( 這些應用也被稱 為Web1.5),瀏覽者可以查詢自己的資料,已經有基 本的個人化但不能算是完整的互動。 此為現今業界最為廣泛使用,基本概念是互動、分享 和個人化來詮釋,瀏覽者可以與網站進行溝通互動, 可以集結一群瀏覽者建立網路的社群,大家彼此在這

Web 2.0

個網站上交流心得,公司企業網站利用後台快速更新 公司網頁新聞、主管可以在系統管理員工記錄或查詢 業績等項目;例如:部落格、拍賣網站、網路影音分 享、電子商務網站等…。

表(一)

7


(二) 知識管理的發展

我們對知識管理的定義為:知識提供者(Knowledge Provider)透過知 識共享平台(Knowledge Sharing Platform) ,適時地將正確的知識給予知識 需求者(KnowledgeRequester) ,以幫助知識需求者採取正確的行動,來增進 個人或是組織績效的持續性過程。所謂知識共享平台,可以是一個資訊系統、 會議及面對面教學等型態,其目的是在讓知識的創造、確認、收集、分類、 儲存、分享、存取、使用、改進、淘汰等程序,統一在此知識共享平台上進 行,以作為知識提供者與知識需求者的連結系(Connected System)。知識管 理未來勢必走向數位化、多元化,以因應各種不同平台發展,尤其現在網路 時代,最常看到就是利用問題與回答(簡稱 QA)形成龐大的資料庫體系(如 奇摩知識+,維基百科等) ,使用者輸入關鍵字即可迅速取得解決問題的相關 知識。目前,透過網路互相分享知識已經相當的頻繁。另外,現在也相當流 行知識管理個人專案化,將個人或是一個團隊的知識經驗累積,利用網路平 台分享相關知識,也可以跨平台進行交流分享經驗或是學習,知識管理專案 化能夠將雜亂無章的 QA 形成屬於自己或團隊的知識庫,公司團隊也可以利用 屬於自己的專案知識解決重複或屬於該團隊常見的問題 。

8


(三) 開發技術與工具

ASP.NET 是承襲自微軟早期 Web 開發技術 ASP,換言之,ASP.NET 是微軟 重新改造 ASP 之後的產品。ASP.NET 的主要特性是程式設計師可以使用.NET 平 台所支援的程式語言(如 VB,C#,C++) ,撰寫 ASP.NET 程式,同時也包括 Open Source 領域的語言,像是 Perl、Python 等。若以 ASP.NET 與早期 Scripting 技術比較,前者速度較快的原因在於:.NET 平台會先把整個網站編譯成一個(或 數個)動態連結庫(Dynamic Link Library,縮寫為 DLL),然後讓網站伺服器 執行。本專題協同系統採用 ASP.NET 開發而未採用 PHP。

9


參 研究 究架構 (一) 研 研究方法 透過 Miicrosoft Visual WWeb Deve eloper 20 010 Expreess(VWD20 010) 所提 提供 的各 各項功能 能,建立網 網頁所需要 要的版面與 與物件,並 並且需要在 在其後台 台輸入特定 定的 程式 式碼,使 使該物件能 能執行我們 們所想要的 的動作,最 最後並美化 化版面,以完成初 初階 網站 站建置的 的動作。

(二) 研 研究流程

Start

輸入

網站

程式碼 碼

測試

建立 立

建立

美化

資料夾 夾

物件

版面

開啟 啟

建立

新網站 站

版面

End d

表(二)

100


肆 系統 統架構

學生專區 學

瀏覽活動 瀏 參加紀錄 參

網站導覽 覽

活動 動報名 名系統 統

活動公告 活 登入

行政專區 行

活動管理 活 活動名單 活

表(三 三)

伍 實作流 流程

製作過 過程,大致 致如上文所 所述,從一 一開始的建 建立資料夾 夾,做為 為網站架構 構存 放的 的地點,逐步開始 始設立主板 板頁面、存 存放 Acces ss 資料庫 庫的資料夾 夾,再來開 開始 設計 計版面,這裡是用 用主板頁面 面作為設計 計母體,之 之後的頁面 面再以母 母體的架構 構去 修改 改,每個 個頁面都有 有不同的功 功能,因此 此我得從工 工具箱裡拉 拉出我們 們所需要的 的物 件,有需求的話會在 在原始檔或 或者".vb"裡輸入 入所需要程 程式碼使其 其執行,並 並不 時的 的執行測 測試與存檔 檔,並在最 最後的步驟 驟,為其做 做適當美化 化與修飾 飾,增加可 可看 度。

111


坴 網站 站功能介紹 紹與展示 示 圖(一) 登入頁面

始的登入畫 畫面,下方有 有設置學生 生/行政單位 位測試用帳號 號密碼。 註:一開始

122


圖(二) 學生專區>>瀏覽活動

註:登入之 之後的起始 始畫面,這是 是用來顯示 示所有活動的 的頁面,前 前方第 2 欄有 有設置超連 連結,可以點 點進 去做活動的 的報名。

133


圖(三) 學生專區>>瀏覽活動>>活動報名

註:由上圖 圖點超連結 結進來之後的 的畫面,可 可點選下方" "我要報名 名"鈕,或者 者在最下方 方輸入報名學 學生 的學號,以 以及想報名 名的活動之活 活動編號, 完成為此帳 帳號做報名 名的動作。

144


圖(四) 學生專區>>參加紀錄

註:此頁面 面可以用來 來檢視此帳號 號密碼曾經 經報名過的活 活動。

155


圖(五) 行政單位>>活動公告

註:此頁面 面是設計來 來讓行政單位 位新增活動 動的,若是用 用非行政單 單位的帳號密 密碼登入(學 學生)時,將 將會 無法進入。

166


圖(六) 行政單位>>活動管理

註:此頁面 面是用來作 作為供行政單 單位管理所 所有活動的頁 頁面。

177


圖(七) 行政單位>>活動名單

註:此頁面 面是用來提 提供行政單位 位檢視全部 部的活動,點 點進前方第 第二欄的超連 連結將會傳 傳到該活動報 報名 者的頁面。

188


柒 結論與探討 (一) 問題與討論

在製作的過程中,我們經常會遇到繁雜的程式碼有輸入錯誤的時候,而這是就 會在程式碼下面出現底線標記錯誤,而通常一個小細節就會使系統無法執行,如此 重要的細節也沒有所謂的改善,就只能依靠鍛鍊英打的方式加強吧,畢竟這是一板 一眼地,盡量多多利用系統提供的相似字元提高輸入效率,取而代之減少失誤率, 所以此步驟對英打不快的同胞們,這是個非常耗神的地方。

(二) 結論

製作的過程中,我們學習到超連結、消除 cookie 或者是帳號密碼的登入/出 等諸如此類的製作,有別於以往所教的只是在網頁上的操作,這次是從網站 的架構起手,結合以往所學到的程式邏輯,加入一些我們時常在網路上遇到, 卻時少有人探索如何製作的按鈕以及頁面,編織成一個屬於自己的網站。 雖然在製作的過程中,經常會遇到無法執行的時候,不過透過同學間的 互相支援,可以使進度落後的同學趕上步伐,最終都導向自己設計的網站, 雖然過程中頗為艱辛,必須查看程式中哪裡出現錯誤,而十分費神,但網站 製作完成的那一刻是十分感動的。

19


捌 參考資料 小益哥資源網 https://sites.google.com/a/chsc.tw/easygo/news-2/zichukeernianjidi2cizh uantishumianbaogaofanlidanganxiazai

20

Dp1012w2  
Read more
Read more
Similar to
Popular now
Just for you