壹、課程說明

單元名稱 C#與網路資料庫程式設計

單元摘要 本專題結合網頁設計、資料庫、C#程式語言等資訊技術，希望學生能做出一個線上資料庫網站，為了與校園生活結合，本專題的主題為—校園公佈欄系統。

設計者 邱柏翰 教師（國立羅東高中）

學習目標 1. 能夠瞭解網頁互動程式語言的運作原理 2. 能夠瞭解資料庫與 SQL 的操作 3. 能實際設計出小型的 ASP .NET 語言專題作品

課綱範圍 資訊學科與應用專題（選修課程） 教學節數 8 節

先備知識 1. 學習過程式語言，瞭解程式語言基本語法與原理。 2. 具有資料庫概念。

評量方法

1. 口頭問答及課堂觀察 2. 上機實作 3. 專題成果展示 4. 隨堂作業

參考資源

1. MIS2000 Lab、周棟祥、吳進魯（2010）。ASP.NET 4.0 專題實務：使用 C#。台北市：松崗資產管理。

2. 資訊教育研究室（2010）。Visual C# 2008 從零開始學習手冊。台北縣：文魁行銷。

3. 山田祥寬（2007）。學會 ASP .NET 2.0 的關鍵課程。台北市：旗標。 4. 資訊學科中心出版之「98 教學資源小組研發教材手冊」「教學活動設計參考

範例－Visual C# 程式設計 (高慧君老師)」 5. 資訊學科中心出版之「100 教學資源小組研發教材手冊」教學活動設計參考

範例-Visual C# 程式設計(李啟龍教師)」

注意事項

1. 由於線上程式安全性部分於涉及層面較廣，本教材並未提及，教師可另闢專題解說。

2. 本範例所使用的資料庫為方便教學，並未正規化，請讀者留意。 3. 軟體開發環境請教師先行準備

貳、教學活動計畫

一、建置專題所需的環境（1 節課） 教學活動 時 間 說 明

1.引起動機 10 分 目前架設 WWW 網站已有簡單的軟體與方式，個人電腦的效能與現行的上網環境也漸漸成熟，可以練習架

設網站，試著當站長。

2.複習網頁伺服器運作的流程

15 分

1.2.1 基本的網頁伺服器原理

圖一：基本的網頁伺服器原理

1.2.2 伺服器端使用動態網頁技術

圖二：伺服器端使用動態網頁技術

1.2.3 ASP .NET 程式

圖三：ASP .NET 程式運作流程

3.本專題所使用的程式語言與開發工具

20 分 1.3.1 .NET Framework、ASP.NET 以及 C# 要瞭解 ASP .NET 這個技術，必須先瞭解「 .NET Framework」，因為 ASP .NET 是運作在一個叫做.NET

Framework 的「Windows 標準應用程式執行/開發環境」上面的「應用程式架構」。應用程式架構是為了讓應用程

式能夠運作而存在的基本環境及功能的集合體。

如上圖所示，以前的應用程式是直接在 Windows 平台上運行。而.NET Framework 的應用程式則是在.NET Framework 上運作、管理，所以又稱他是列管碼，過去沒有被管理的程式碼則稱作未列管碼。 .NET Framework 由兩大元件所構成—共通語言執行環境（CLR：Common Language Runtime）和.NET Framework類別庫。 1. 共通語言執行環境：是.NET 應用程式所可以共通使用的執行引擎。在 .NET Framework 上可以使用 Visual Basic、C#、J#、C++、JScript 等程式語言，而用這些程式語言所寫成的應用程式都可以在 CLR 上運行（轉成Microsoft Intermediate Language 共同中間語言），只要您把.NET Framework 環境準備好就可以了。 2. .NET Framework 類別庫：支援.NET 的各種語言可以共通使用的標準類別庫

1.3.2 Microsoft Visual Studio 2008 Express 本專題所使用的工具為「Microsoft Visual Studio 2008 Express 版 SP1」，雖然最新的版本已經到 2010版，但考量專題用不到新的功能以及軟體執行的效率，

所以選擇 2008 的版本。 下載網址建議您以關鍵字查詢「Visual Studio 2008 Express」，選擇微軟公司的網頁下載，下載的檔案格式為光碟 iso 檔約 950M，可以燒錄成光碟後使用。

軟體下載頁面

Visual Studio 2008 Express 內包括：Visual C#、Visual Basic、Visual C++、Visual Web Developer，需要逐一安裝，本專題需要安裝第四個—Visual Web Developer。

1.3.3 小結 本專題將會寫出一個互動式網頁 本專題用 Visual Studio 2008 Express 其中的 Visual

Web Developer 2008 Express 來設計互動式網頁 Visual Web Developer 2008 Express在開發ASP .NET

網站的時候，可以選擇用 Visual C#或是 Visual Basic語言，本專題使用 Visual C#

本專題資料庫檔案以 Access 2003 製作，以利學生和先前所學連結

4.上機實作 5 分

1.4.1 請學生將軟體安裝完成，檢查開發工作環境 執行軟體「開始」--「所有程式」，點擊

軟體畫面如下

檔案—新網站

語言請選擇 Visual C# 存檔的位置若您擔心將來不方便尋找的話，可以放在桌

面上，例如：C:\Documents and Settings\Administrator\桌面\hw1 資料夾的名稱請自行輸入，本例是放在桌面上一個叫

「hw1」的資料夾。 說明資料夾內的檔案 名稱 功能概述

通常會在這目錄下放置資料庫檔案，因為這個目錄可以設定存取權

限。 安排頁面、元件的地方，主要功能

是呈現畫面 撰寫程式的地方

專案的設定檔、資料庫連線方式等資料會儲存在這裡

執行、看成果 從下拉式選單「偵錯」--「開始偵錯」

或是按下「 」

二、設計專題所需的資料庫、練習 SQL 語法（2 節課）

教學活動 時 間 說 明

1.設計資料庫、資料表 15 分

2.1.1 講解資料庫、資料表的基本觀念

使用者與資料庫系統的關係

資料表

資料庫

資料表 資料表

資料表

資料庫與資料表的關係

姓名 地址 電話 游同學 羅東鎮公正路 324 號 （03）9567645 吳同學 宜蘭市復興路三段 8 號 （03）9333821 曹同學 宜蘭市女中路 2 號 （03）9324154

資料表的結構 2.1.2 使用 Access 2003 設計本專題所需要的資料庫

2.1.2.1 執行 Access 2003 2.1.2.2 從下拉式選單中選擇「檔案」--「開新檔案」--「空白資料庫」，並將檔案存成 db.mdb，存檔於桌面備用。

直的稱為「欄位」

橫的稱為「記錄」

2.1.2.3 建立資料表「公佈欄」 在上一段 db.mdb 資料庫檔案呈現開啟的狀態，點擊「使用設計檢視建立資料表」

本專題所使用的公布欄有七個欄位，設計如下：

欄位名稱 資料型態 備註/請注意 新聞編號 自動編號 請注意設定

「索引」--「是（不可重複）」

並且設定主索

引鍵 公告處室 文字 公告日期 日期/時間 公告主題 文字 公告內容 備忘 相關連結 文字 儲存超連結網

址 附加檔案 文字 儲存附件檔的

檔名（而非實體

檔案內容）

2.設計資料表 15 分

2.2.1 將上節製作的公告欄資料表填入資料

2.2.1.1 點開公告欄資料表，依照題意輸入一些測試資料方便程式撰寫時使用 2.2.1.2 輸入後的資料表可以參考下圖

3.利用現有 Excel 資料表轉入資料 20 分

為了下節課練習 SQL 語法，請學生匯入一個 Excel 檔，如果將來有現成的資料要轉入 Access，也可以使用匯入的方式。 2.3.1 在資料庫當中建立一個名為「exam」的資料表，並參考 Excel 檔案設計欄位。 2.3.2 將 Excel 檔的資料「匯入」到 exam 資料表當中（請注意欄位分隔符號改成逗號） 2.3.3 請檢查是否將資料轉入

4.SQL 語法練習 40 分

利用上節課製作的測試資料表練習 SQL 語法。 為了完成資料維護動作，資料庫通常提供有結 構化查詢語言(Structured Query Language)。結構化查詢語言(Structured Query Language)是一種資料庫標準語法，可以用來操作並維護資料庫的資料。 若授課時間不足，未用到的語法建議略過。 2.4.1 查詢語法：SELECT 欄位名稱 FROM 資料表名稱WHERE 條件敘述

點選新聞編號欄

位，再按下 設

定主索引鍵

2.4.1.1 查詢資料表 exam 的所有欄位、所有資料 SELECT * FROM exam 2.4.1.2 選取座號、姓名、國文 SELECT 座號, 姓名, 國文 FROM exam 2.4.1.3 選取國文成績及格的資料 SELECT * FROM exam WHERE 國文>=60 2.4.1.4 選取國文成績及格、英文成績不及格的資料 SELECT * FROM exam WHERE 國文>=60 AND 英文

三、使用 ASP .NET 程式語言操作 Access 資料庫（1）（2 節課）

教學活動 時 間 說 明

1.在網頁上顯示資料庫的內容 50 分

資料庫的操作不離：查詢、新增、修改、刪除等功能，

本節的主題是查詢功能，也就是將公告欄的資料顯示出

來。 3.1.1 建立新網站 請參照 1.4.1 的方式建立一個新網站，資料夾可以放在桌面上方便存取，記得語法選擇 Visul C#，預設的資料夾名稱應為「WebSite1」 3.1.2 資料庫檔案加入 在方案總管的視窗中，App_Data 的目錄上面按滑鼠右鍵「加入現有項目」

選擇您在上一節製作的的資料庫檔案 db.mdb，如此一來，db.mdb 檔案就會被複製到 WebSite1 資料夾下面的App_Data 目錄 3.1.3 將資料庫的資料顯示在頁面中（查詢） 操作的原則是：

透過 AccessDataSource 元件 ，設定資料的來源，指到一個 Access 檔案。

再透過 GridView 元件 ，以類似表格的方式將資料陳列出來。操作如下： 3.1.3.1 使用 AccessDataSource 元件

確定 Default.aspx 頁面在「設計」索引標籤

拖曳 AccessDataSource 到 Default.aspx

元件拖曳上去之後，按下一個小箭頭「>」 設定資料來源

按「瀏覽」按鈕，選擇本專題所需的資料庫

本專題的資料庫，就在專題目錄 App_Data 之下

（註：剛才已經使用「加入現有項目」將資料庫新增到

專案目錄，這時候才能選擇）

選擇所需的欄位，本專題選「*」，代表顯示所有欄位

按「測試查詢」，應該會顯示資料，否則請檢查

3.1.3.2 使用 GridView 元件與 AccessDatasource 連結 繼續拖曳 GridView 元件至 Default.aspx 畫面上

選擇資料來源「AccessDataSource1」

初步完成，可以執行成果

2.顯示欄位改良 40 分

3.2.1 顯示欄位改良 目前雖然可以將資料庫的內容顯示，但一般公告欄僅作

檢要式的呈現，使用者點入該則訊息之後才顯示出所有

資料，因此繼續將資料呈現簡化 3.2.1.1 簡化欄位，調整欄位順序 僅選擇「公告處室」「公告日期」「公告主題」，並且把順

序改為「公告主題」「公告處室」「公告日期」 點一下 GridView 旁的「>」符號，「編輯資料行」

點選 GridView 元件旁的「>」按鈕，「編輯資料行」功能

把「新聞編號」、「公告內容」、「相關連結」「附加檔案」

欄位，按「X」按鈕刪除（不顯示），並且將其他欄位透過「↑」「↓」調成如下順序

初步完成，請執行 3.2.2 將公告主題文字變成超連結

目前的公告主題以文字的方式呈現，接下來要讓它變成

一個「超連結」，使用者按下去之後顯示出整篇新聞。

將公告主題按「X」刪除

新增一個「HyperLinkField」，也就是說這個欄位可以做成一種超連結，由於他是取代公告主題，所以請將順序

調到最上層，參考下圖操作。

1.選擇 HyperLinkField 2.按「加入」按鈕，這樣就會有一個超連結的欄位，至於超連結的文字以及網址，就要繼續設定如下屬性： 設定這個「HyperLinkField」欄位的四個屬性 HeaderText 屬性設定為「公告主題」 DataNavigateUrlFields 屬性設定為「新聞編號」 DataNavigateUrlFormat 屬性設定為

「detail.aspx?id={0}」 DataTextField 屬性設定為「公告主題」 初步完成，請檢查

公告主題的文字現在變成一個超連結

仔細觀察其中一條公告，他將指向的連結為 http://網址/目錄/detail.aspx?id=新聞編號 也就是呼叫 detail.aspx 的時候，要傳送新聞編號的參數給它，以便找到正確的新聞。detail.aspx 將在下節製作。 3.2.3 製作 detail.aspx，顯示詳細的公告 在方案總管的視窗當中，按右鍵「加入新項目」，新增一

個名為 detail.aspx 的 Web Form

1.

2

請注意按滑鼠右鍵的時候，當下游標所停留的位置

在 detail.aspx 的頁面當中，先拖曳一個 AccessDataSource元件置於頁面中，然後設定資料來源（拖曳的動作請參

考上一節） 設定資料來源，這次不同的是，從網址會帶來一個新聞

編號的參數，只要秀出這一則新聞就好，其他不需要，

所以要靠 WHERE 語法來選擇，請點選「WHERE」按鈕。

WHERE 子句中，我們希望做到的 SQL 效果是 WHERE 新聞編號=網址中變數 id 的值，所以請依照圖示順序選擇。

四個選項依序設定之後，按下確認，畫面將如下圖：

1

2

3

4

設定 AccessDataSource 元件的資料來源過程，也可以測試，以下是查詢新聞編號 6 號的畫面。

這是測試畫面

AccessDataSource 的資料來源設定完成，回到設計的頁面，請再拉一個DetailsView元件到畫面當中，DetailsView是用來顯示資料的，就像 default.aspx 用 GridView 顯示資料。 至於資料來源，也是選擇 AccessDataSource1（是指這個程式當中的元件，而不是 default.aspx 當中的，雖然名稱都一樣）

請輸入

初步完成，請檢查看看

detail.aspx 畫面

3.2.4 detail.aspx 功能加強 如果要檢查 detail.aspx 是否正確，應該要從 default.aspx執行，因為是 default.aspx 呼叫 detail.aspx，若不這麼操作直接測試 detail.aspx 的話，應該畫面是空白的。 detail.aspx 目前能夠顯示一筆新聞公告的資料，但是「相關連結」還是呈現純文字狀態，而「附加檔案」也還不

能夠點選下載，以下說明如何加強功能。 3.2.4.1 將「相關連結」改成超連結可以點選 先點選 DetailsView 元件旁邊的一個小按鈕「>」，選擇「編輯欄位」

類似的操作上一節已經在 default.aspx 練習過，原則是預設 的 欄 位 以 純 文 字 顯 示 ， 而 使 用 者 可 以 新 增

HyperLinkField 欄位，透過屬性設定，讓它變成超連結。

新增一個 HyperLinkField 欄位，並設定下列屬性

HeaderText 屬性設定為「相關連結」 DataNavigateUrlFields 屬性設定為「相關連結」 DataNavigateUrlFormat 屬性設定為「」（不用設定） DataTextField 屬性設定為「相關連結」 請檢查「相關連結」是否可以點選了？ 3.2.4.2 將「附加檔案」改成超連結可以點選 參考 3.2.4.1，將原先的附加檔案欄位刪除，增加一個「HyperLinkField」欄位，並設定如下屬性： HeaderText 屬性設定為「附加檔案」 DataNavigateUrlFields 屬性設定為「附加檔案」 DataNavigateUrlFormat 屬性設定為「file/{0}」 DataTextField 屬性設定為「附加檔案」

3.2.4.3 環境準備 剛剛程式設計的構想是網站下，有一個叫做 file 的資料夾，下面放著每則新聞的附加檔案，所以「新增資料夾」，

資料夾名稱要和你的程式搭配（範例是 file） 在 file 資料

記得在 file 資料中，實際放上測試資料所提及的檔案，例如「段考範圍表.doc、行事曆.pdf、研習一覽表.doc……等」以免使用者點選時無法載檔案

3.2.5 新增、刪除的超連結 又回到 default.aspx 設計，在公告欄的底下增加兩個HyperLink 元件，製作超連結用，其中 HyperLink1 的 Text 屬性設定為：新增 NavigateUrl 屬性設定為：~/member/addnews.aspx Target 屬性設定為：_blank HyperLink2 的 Text 屬性設定為：刪除 NavigateUrl 屬性設定為：~/member/maintain.aspx Target 屬性設定為：_blank 設定後的 default.aspx 畫面應該是：

這兩個網頁將在下一節製作

2.上機練習 10 分 4.2.1 請完成本節內容

先做好兩個 HyperLink 元件

四、使用 ASP .NET 程式語言操作 Access 資料庫（2）（2 節課）

教學活動 時 間 說 明

1.設計「新增」公告的功能

50 分

4.1.1 環境準備 新增、刪除的功能分別是 addnews.aspx 和 maintain.aspx兩個網頁進行，由於這兩個功能屬於會員登入後專屬，

以免遭到網路使用者的誤用，因此請先增加一個名為

member 的資料夾，在 member 資料夾下面「加入新項目」新增 addnews.aspx、maintain.aspx 兩個檔案。

4.1.2 設計「新增」的功能：addnews.aspx 的介面 點選 addnews.aspx，依照資料庫的欄位，對應網頁該有的元件讓使用者輸入

元件類型 變數名稱 功能 下拉式選單 DropDownList1 讓使用者選擇

公告的處室，請

自 行 編 輯 項

目，新增「教務

處、學務處、總

務處、圖書館、

輔導中心」等項

目 文字盒 TextBox1 輸入公告主題 文字盒 TextBox2 輸入公告內容

請將 TextMode屬性設定為

MultiLine 文字盒 TextBox3 輸入相關連結 檔案上傳 FileUpload1 選擇檔案，上傳

檔案用 按鈕 Button1 按下去之後，新

增資料到資料

庫當中 介面設計如下圖所示：

4.1.3 設計「新增」功能 addnews.aspx 的程式 依舊透過 AccessDataSource 元件連到資料庫檔案，但這次必須增加「新增、刪除」等語法，操作過程如下：

在設定 AccessDataSource 元件的時候，請按「進階」

請勾選「產生 INSERT、UPDATE 和 DELETE 陳述式」 檢查 addnews.aspx 原始檔，當中可以發現一段關於AccessDataSource 元件的設定，當中已經備妥了InsertCommand 指令，也就是透過程式的操作，

AccessDataSource 就會幫我們把資料存到資料庫

請依照刪除線所標示的地方處理。 4.1.5 測試「新增」功能 請執行您的程式

2.設計「刪除」公告的功能

40 分

4.2.1 設計 maintain.aspx 在 member 目錄下新增 maintain.aspx，並雙擊點開。 刪除的功能將使用 GridView 內建的設定達成，不需要撰寫程式。 切換至 maintain.aspx 的「設計」頁面，拖曳AccessDataSource 元件於頁面上，並且仿照 4.1.3 設定資料來源，（點選進階按鈕產生 Insert、Update 指令） 再拖曳 GridView 元件至頁面上，資料來源選擇AccessDataSource1，只要再勾選「啟用編輯」、「啟用刪除」按鈕，就有內建的編輯、刪除功能可以用了！

1.打勾

2.顯示

2.上機練習 10 分 4.2.1 請完成本節內容

五、設定安全性、完成專題（1 節課）

教學活動 時 間 說 明

1.增加使用者登入的功能

40 分

5.1.1 設定權限 由於新增、刪除的功能會影響資料庫的資料，所以要限

制有帳號的人使用，因此需要加上登入的機制。 下拉式選單「網站」--「ASP .NET 組態」

此時會呼叫出瀏覽器，並顯示「ASP .NET 網站管理工具」的畫面

點選「安全性」，再點選「選取驗證規則」--「從網際網路」--「完成」

回到主畫面之後，「建立使用者」，就是將來要存取

「addnews.aspx」、「maintain.aspx」的人的帳號

再次回到主畫面，接下來「建立存取規則」，決定某個帳

號，可以存取某個網頁

點「member」目錄，使用者「bohann」（剛剛建立的帳號），「允許」--「確定」 5.1.2 製作登錄頁面 當使用者想要存取 addnews.aspx 或 maintain.aspx 的時候，要判斷是否有權限，不然就要導向 login.aspx 請他輸入帳號密碼，login.aspx 需要自行設計。 請先新增 login.aspx 頁面，滑鼠雙擊進入設計畫面

把 login 元件拉到頁面當中，就完成了！

login 元件直接就提供輸入的文字盒，不需自行設計

2.完成專題 10 分 5.2.1 請完成本節內容

1 2

3 4