Web程序設(shè)計指導書

本文格式為Word版，下載可任意編輯——Web程序設(shè)計指導書《Web程序設(shè)計》上機指導

試驗1ASP.NET基礎(chǔ)1

一、試驗?zāi)康?二、試驗要求1三、試驗步驟1試驗2C#程序設(shè)計3

一、試驗?zāi)康?二、試驗要求3三、試驗步驟3試驗3基本控件的使用5

一、試驗?zāi)康?二、試驗要求5試驗4用戶界面交互及網(wǎng)頁間的數(shù)據(jù)傳遞6

一、試驗?zāi)康?二、試驗要求6試驗5使用Web服務(wù)器常用控件8

一、試驗?zāi)康?二、試驗要求8三、試驗步驟8試驗6狀態(tài)管理對象的應(yīng)用12

一、試驗?zāi)康?2二、試驗要求12三、試驗步驟13試驗7設(shè)計數(shù)據(jù)庫應(yīng)用網(wǎng)站15

一、試驗?zāi)康?5二、試驗要求15三、試驗步驟15試驗8Web技術(shù)綜合應(yīng)用18

一、系統(tǒng)功能18二、系統(tǒng)功能模塊分析18三、數(shù)據(jù)庫設(shè)計19

1

試驗1ASP.NET基礎(chǔ)

一、試驗?zāi)康?/p>

1、通過本試驗了解HTML標記語言的基本語法格式2、了解使用HTML語言制作靜態(tài)網(wǎng)頁的基本技術(shù)3、把握HTML表格的設(shè)計方法

4、設(shè)計一個學生成績查詢的ASP.NET2.0網(wǎng)站

二、試驗要求

1、使用HTML語言，在Windows“記事本〞程序中編寫HTML代碼，制作學生成績

登記表，要求能在瀏覽器中正確顯示字體、字型、字號等格式。2、設(shè)計一個用于學生成績查詢的ASP.NET2.0網(wǎng)站。

三、試驗步驟

1、使用Windows記事本程序制作網(wǎng)頁

1）編寫HTML代碼：啟動Windows附件中的記事本程序，編寫HTML代碼2）保存HTML文件3）執(zhí)行如圖1-1

圖1-1

2、設(shè)計一個用于學生成績查詢的ASP.NET2.0網(wǎng)站1）設(shè)計要求：

假設(shè)某學?，F(xiàn)在有3個班級，要求設(shè)計一個能在網(wǎng)絡(luò)中通過IE瀏覽器進行各班級學生成績查詢的ASP.NET網(wǎng)站。

設(shè)計時可采用VisualStudio2023或記事本為每個班級創(chuàng)立一個獨立的靜態(tài)頁面class1.htm、class2.htm、class3.htm。站點開啟時首先顯示列有所有班級名稱的導航頁default.aspx，用戶通過單擊希望查看的班級名稱鏈接，開啟對應(yīng)的班級查詢網(wǎng)頁。

1

2）

創(chuàng)立ASP.NET網(wǎng)站

啟動VS2023新建一個ASP.NET網(wǎng)站項目，新建3個HTML頁文件：顯示各班級學生成績列表內(nèi)容的靜態(tài)網(wǎng)頁class1.htm、class2.htm、class3.htm。

或者，將事先已通過記事本完成的用于顯示各班級學生成績列表內(nèi)容的靜態(tài)網(wǎng)頁class1.htm、class2.htm、class3.htm添加到網(wǎng)站中?？梢灾苯訉蕚浜玫撵o態(tài)網(wǎng)頁文件復制到網(wǎng)站所在的文件夾，也可在“解決方案資源管理器〞窗口中，選擇項目的保存位置后單擊鼠標右鍵，在彈出的快捷菜單中執(zhí)行“添加現(xiàn)有項〞命令，選擇需要添加的文件，單擊按鈕。3）設(shè)計WEB頁面

切換到default.aspx的設(shè)計視圖，執(zhí)行布局菜單下的“插入表〞命令，在對話框中用戶可在可視化界面中設(shè)置HTML表格的各種屬性，單擊按鈕將表格插入到頁面當前光標位置4）設(shè)置對象屬性

分別選擇頁面中的3個超鏈接控件，在屬性窗口中按表設(shè)計它們的初始屬性。

表1-1屬性設(shè)置

控件HyperLink1~HyperLink3屬性IDTextNavigateUrlTarget值lnkClass1、lnkClass2、lnkClass3網(wǎng)絡(luò)1班、網(wǎng)絡(luò)2班、網(wǎng)絡(luò)3班class1.htm、class2.htm、class3.htm_blank說明控件在程序中使用的名稱空間上顯示的文本單擊控件時跳轉(zhuǎn)的目標URL開啟新網(wǎng)頁時的目標框架5）6）

編寫程序代碼測試運行結(jié)果

2

試驗2C#程序設(shè)計

一、試驗?zāi)康?/p>

1、通過上機操作把握結(jié)構(gòu)化設(shè)計的基本方法

2、理解順序結(jié)構(gòu)、選擇結(jié)構(gòu)和循環(huán)結(jié)構(gòu)的基本概念3、把握if?else、switch、for和while語句的使用方法

4、通過本試驗進一步理解使用C#2023創(chuàng)立ASP.NET網(wǎng)站的一般步驟和常用編程技巧

二、試驗要求

注：至少選做2題。

1、設(shè)計一個能計算1！+2！+3！+?+n！的程序2、設(shè)計一個商場收費程序

3、為小學生設(shè)計一個用于100以內(nèi)的加法練習程序。。

4、設(shè)計一個循環(huán)程序，當用戶單擊“開始〞按鈕時，產(chǎn)生8組1~9之間的隨機整數(shù)，

假使在某組中已產(chǎn)生了5個隨機數(shù)或產(chǎn)生的隨機數(shù)為6，則開始下一組。三、試驗步驟

1、設(shè)計階乘和計算程序（如圖）

圖2-1圖2-2

1)問題分析：可以將問題分為“計算若干項的和〞與“計算某數(shù)的階乘〞兩個層次

來理解，這兩個層次分別通過for循環(huán)來處理。也就是說，可以通過一個for循環(huán)的嵌套來解決問題。

2)設(shè)計WEB頁面：新建一個ASP.NET網(wǎng)站，切換到設(shè)計視圖。向頁面中添加需要說明文

字和1個文本框TextBox1;1個按鈕Button1和1和用于顯示結(jié)果的標簽控件Label1。3)設(shè)置對象屬性

表2-1屬性設(shè)置

控件TextBox1Button1Label1

屬性IDIDTextID值txtNumbtnOK確定lblResult3

說明文本框在程序中使用的名稱按鈕控件在程序中使用的名稱按鈕控件上顯示的文本標簽控件在程序中使用的名稱Text4)編寫事件代碼

2、設(shè)計商場收費程序

空標簽控件上顯示的文本

圖2-3圖2-4

要求：

1)若沒有輸入商品數(shù)量，則默認為1.2)若沒有輸入商品的編號，直接單擊按鈕，則表示統(tǒng)計完畢，

屏幕上顯示購物金額、折扣率和應(yīng)付金額。3)為了防止因用戶誤單擊按鈕導致結(jié)算數(shù)據(jù)重復出現(xiàn)，在顯示

了結(jié)算數(shù)據(jù)戶，按鈕呈灰色顯示。4)單擊按鈕明白上次購物詳細清單及結(jié)算數(shù)據(jù)，將程序恢復為

初始狀態(tài)。

步驟：

1)問題分析：用戶輸入“商品編號〞及“數(shù)量〞值后，程序根據(jù)預(yù)先的

設(shè)定進行判斷，從而得到相應(yīng)的“商品名稱〞、“單價〞、計算出小計值并將結(jié)果顯示到標簽控件中。為了得到總購物金額還需要對小計值進行累加。

2)設(shè)計WEB頁面：新建一個ASP.NET網(wǎng)站，切換到設(shè)計視圖。向頁面中

添加需要的說明文字和2個文本框；2個按鈕和一個用于顯示計算結(jié)果的標簽控件。3)設(shè)置對象的屬性

表2-2屬性設(shè)置

控件TextBox1TextBox2Button1Button2Label1

屬性IDIDIDTextIDTextIDText值txtAmounttxtSerialbtnOK確定btnBack返回lblBill空說明文本框1在程序中使用的名稱文本框2在程序中使用的名稱按鈕1控件在程序中使用的名稱按鈕1控件上顯示的文本按鈕2控件在程序中使用的名稱按鈕2控件上顯示的文本標簽控件在程序中使用的名稱標簽控件上顯示的文本4)編寫事件代碼

4

試驗3基本控件的使用

一、試驗?zāi)康?/p>

1、熟悉在MicrosoftVisualStudio.Net中建立項目的方法。

2、把握常用的Html服務(wù)器控件和Web服務(wù)器控件的主要屬性和它們的使用方法。

二、試驗要求

1、設(shè)計一個ASP.NET項目，實現(xiàn)如下功能：通過一個組合列表框選擇或輸入姓名，通過復選框選擇其愛好，然后顯示“歡迎你，愛好***的**〞的信息。其中***代表愛好，**代表姓名。

2、利用Web服務(wù)器控件及C#程序完成以下功能：1）制作一個用戶登陸界面

2）驗證用戶名和密碼是否正確，若正確給出歡迎信息，并可以輸入留言，否則，給出錯誤提醒。

5

試驗4用戶界面交互及網(wǎng)頁間的數(shù)據(jù)傳遞

一、試驗?zāi)康?/p>

（1）練習ASP.NET基本狀態(tài)管理對象的使用（2）練習網(wǎng)頁間數(shù)據(jù)傳遞的方法

二、試驗要求

（1）設(shè)計一個登錄界面，在其中輸入登錄信息后，在同一頁面給出反饋結(jié)果。要求使用Request和Response對象操作完成。操作界面截圖如下：

圖4-2圖4-1

（2）設(shè)計如下圖所示的數(shù)據(jù)輸入界面：

6

圖4-3當用戶填寫并選擇完相應(yīng)的信息，并單擊“提交〞按鈕后，在另一界面返回用戶輸入的信息。如下圖：

圖4-4

7

試驗5使用Web服務(wù)器常用控件

一、試驗?zāi)康?/p>

通過上機操作進一部理解常用Web服務(wù)器控件的屬性、事件和方法，把握控件在程序設(shè)計中的作用及特點。

通過本試驗把握在程序運行時動態(tài)地向頁面添加控件的程序設(shè)計方法。

二、試驗要求

注：以下題目至少選做2題。

本試驗為了避免將程序設(shè)計的過于繁雜，又兼顧到試驗的覆蓋面，將試驗分為兩個獨立的部分進行。

1）使用選擇性控件（下拉列表和復選框）設(shè)計一個能根據(jù)用戶選擇查詢員工信息

的Web應(yīng)用程序。

2）使用向頁面中動態(tài)添加控件的技術(shù)，設(shè)計一個簡單的在線測驗Web應(yīng)用程序。3）設(shè)計一個可以在程序運行中動態(tài)更改文本框中字體、字型和字號的網(wǎng)頁。頁面

開啟后用戶可使用程序提供的單項選擇按鈕更改字體（宋體、黑體、楷體、隸書），使用復選框更改字型（粗體、斜體和下劃線），使用下拉列表框更改字號（8、10、12、14、18、24、36、48）。文本框中的內(nèi)容為您的專業(yè)、年級、班級、學號和姓名。

4）設(shè)計一個用于按班級名稱查詢課表的網(wǎng)站。用戶可以使用頁面中的下拉列表框

選擇班級名稱，進行班級課表查詢。

5）使用用戶控件設(shè)計一個用戶注冊網(wǎng)頁。用戶控件公開Username和Password兩

個屬性，分別對應(yīng)用戶控件界面中兩個文本框的Text屬性。通過驗證時在頁面中顯示公開屬性的值。使用驗證控件對用戶輸入數(shù)據(jù)進行驗證（用戶名不能為空、兩次密碼必需一致），驗證失敗時，顯示出錯提醒信息。

三、試驗步驟

1．設(shè)計員工信息查詢程序

程序運行時的界面如圖5-1所示，用戶可通過下拉列表框選擇要查詢的員工所在的部門，程序能根據(jù)用戶選擇，自動在“姓名〞下拉列表框中添加指定部門的員工姓名。例如選擇了教務(wù)處，則姓名下拉列表框中只有教務(wù)處員工的姓名。

8

圖5-1

用戶在選擇了“部門〞和“姓名〞后，頁面中顯示該員工的基本信息（姓名，性別和生日），選擇了“住址〞，“電話〞，“學歷〞后，根據(jù)用戶選擇，程序自動將有關(guān)信息添加到頁面中，如圖6-2所示

圖5-2

假使要求“部門〞下拉列表框中顯示的是“-選擇部門-〞，則“姓名〞下拉列表框中只有供選項“-選擇姓名-〞，而沒有具體的員工姓名數(shù)據(jù)

1)設(shè)計Web頁面

新建一個ASP.NET網(wǎng)站項目，切換到設(shè)計視圖。按圖3-3所示向頁面中添加一個用于布局的HTML表格，適當調(diào)整表格的行列數(shù)及寬度。向頁面中添加必要的說明文字，添加2個下拉列表框控件DropDownList1和DropDownList2；添加一個復選框組控件CheckBoxList1和一個容件控件PlaceHolder1。適當調(diào)整個控件的大小及位置。

圖5-3設(shè)計Web頁面

9

試驗7設(shè)計數(shù)據(jù)庫應(yīng)用網(wǎng)站

一、試驗?zāi)康?/p>

通過本試驗理解在ASP.NET環(huán)境中創(chuàng)立ASP.NET數(shù)據(jù)庫應(yīng)用網(wǎng)站的方法和常用技巧；理解ADO.NET環(huán)境中的應(yīng)用；把握Web窗體控件的基本使用方法和常用屬性。本試驗除應(yīng)用到了ADO.NET包含的主要對象和GirdView數(shù)據(jù)表控件外，還設(shè)計了大量SQL查詢語句和通過ASP.NET內(nèi)置對象，在不同頁面間傳遞數(shù)據(jù)的技巧，這些都是開發(fā)Web數(shù)據(jù)庫應(yīng)用程序的基本手段，要求在程序中認真理解其含義及語句書寫格式。

二、試驗要求

在ASP.NET環(huán)境中創(chuàng)立一個簡易的留言板網(wǎng)站。設(shè)已創(chuàng)立了一個Access數(shù)據(jù)庫文件msg.mdb，其中包含有用于存放用戶留言內(nèi)容的message表和存放用戶登錄數(shù)據(jù)的userinfo表。

在userinfo表中添加一條初始記錄。其中，“密碼〞字段值為字符串“654321〞經(jīng)MD5算法加密后得到的密文字符串“C33367701511B4F6020EC61DED352059〞；“答案〞字段值為字符串“遼寧〞經(jīng)MD5算法加密后得到的密文字符串“2FF1BF5F2845959D00BCE4799AA79A99〞。

程序具體要求如下。1.用戶登錄身份驗證2.查看和發(fā)表留言3.新用戶注冊4.忘掉密碼的處理

注：也可以使用Oracle、SQLServer2000/2023等數(shù)據(jù)庫系統(tǒng)。選做題目：課本第8章習題9、10、11、12題（P274~277）。

三、試驗步驟

1.用戶登陸功能的實現(xiàn)（register.aspx）（1）設(shè)計WEB頁面

新建一個APS.NET網(wǎng)站，將準備好的數(shù)據(jù)庫文件復制到系統(tǒng)自動創(chuàng)立的App_Data文件夾中。向頁面中添加一個用于布局的HTML表格。向表格中添加必要的說明文字，添加2個文本框控件TextBox1和TextBox2，添加3個按鈕控件Button1~Button3。適當調(diào)整各控件的大小及位置。

（2）設(shè)置對象屬性

Default.aspx頁面中的控件初始屬性設(shè)置如表。

15

表7-1屬性設(shè)置

（3）編寫事件代碼

首先，在代碼窗口最上方命名空間引用區(qū)中使用以下代碼引入OleDb命名空間：usingSystem.Data.OleDb;然后，在此頁面裝入時執(zhí)行的事件過程及各控件的觸發(fā)事件過程中填入代碼，詳細代碼見程序，就不在此詳述。

2.查看和發(fā)表留言功能的實現(xiàn)（msg.aspx）（1）設(shè)計WEB頁面

向網(wǎng)站中添加新的WEB窗體，并命名為msg.aspx。向頁面中添加一個用于布局的HTML表格。向頁面中添加必要的說明文字，添加一個用于顯示留言列表的GirdView控件，添加1個標簽控件Label1，添加1個用于填寫留言文本的文本框控件TextBox1和3個按鈕控件Button1~Button3。（2）設(shè)置對象屬性

msg.aspx頁面中的控件初始屬性值見下表。

表7-2屬性設(shè)置

（3）編寫事件代碼

首先，在代碼窗口最上方命名空間引用區(qū)中使用以下代碼引入OleDb命名空間：usingSystem.Data.OleDb;然后，在此頁面裝入時執(zhí)行的事件過程及各控件的觸發(fā)事件過程中填入代碼，詳細代碼見程序。

3.新用戶注冊功能的實現(xiàn)（1）設(shè)計WEB頁面

向網(wǎng)站中添加新的WEB窗體，并命名為register.aspx。向頁面中添加一個用于布局的HTML表格。向頁面中添加必要的說明文字，添加5個文本框控件TextBox1~TextBox5，添加1個鏈接按鈕控件LinkButton1控件和2個按鈕控件Button1、Button2。適當調(diào)整各控件的大小及位置。

（2）設(shè)置對象屬性

設(shè)置register.aspx頁面中的控件初始屬性值見下表。

16

表7-3屬性設(shè)置

（3）編寫事件代碼

首先，在代碼窗口最上方命名空間引用區(qū)中使用以下代碼引入OleDb命名空間：usingSystem.Data.OleDb;然后，在此頁面裝入時執(zhí)行的事件過程及各控件的觸發(fā)事件過程中填入代碼，詳細代碼見程序。

4.恢復遺忘密碼功能的實現(xiàn)（recover.aspx）（1）設(shè)計Web頁面

通過解決方案資源管理器，向網(wǎng)站中添加一個新Web窗體并將其命名為recover.aspx。切換到設(shè)計視圖，向頁面中添加一個用于布局的HTML表格。向頁面中添加必要的說明文字，添加一個標簽控件Label1，添加2個文本框控件TextBox1、TextBox2和2個按鈕控件Button1、Button2。向表格的最終一行添加一個容器控件Panel1，并向其中添加一個用于布局的HTML表格，向表格中添加“請輸入新密碼：〞“確認新密碼：〞等說明文字，添加2個文本框控件TextBox3、TextBox4，添加1個按鈕控件Button3，適當調(diào)整各控件的大小及位置。

（2）設(shè)置對象屬性

頁面中各控件的初始屬性設(shè)置如表。

表7-4屬性設(shè)置

（3）編寫事件代碼

首先，在代碼窗口最上方命名空間引用區(qū)中使用以下代碼引入OleDb命名空間：usingSystem.Data.OleDb;

在所有事件過程之外聲明一個字符串變量strAnswer來存放從數(shù)據(jù)庫中讀取的問題“答案〞。

其他詳細代碼見程序。

stringstrAnswer;

17

試驗8Web技術(shù)綜合應(yīng)用

一、系統(tǒng)功能

教務(wù)管理系統(tǒng)根據(jù)用戶身份的不同，將操作劃分為超級管理員、普通管理員和學生權(quán)限。

1、管理員權(quán)限

管理員是系統(tǒng)中最高權(quán)限的擁有者，可以對學生、班級、課程等項目進行統(tǒng)一的管理。權(quán)限如下：學生信息管理、教師信息管理、基本課程管理、班級信息管理、選課管理、學生成績管理和用戶管理。

2、學生身份的用戶值能利用本系統(tǒng)進行與自己有關(guān)的操作，不能瀏覽或修改其他信

息，主要內(nèi)容如下：

管理個人基本信息：如瀏覽個人信息、修改密碼、查詢成績等。

執(zhí)行選課操作：學生可利用本系統(tǒng)選修相關(guān)課程，在選課過程中可查詢供選課的基本信息和教師狀況，可瀏覽截至當前選此課程的人數(shù)，也可以利用本系統(tǒng)瀏覽個人選課狀況。

二、系統(tǒng)功能模塊分析

主要功能包括以下三個方面：

1、用戶管理，包括對超級管理員、管理員、學生3種不同身份的識別以及管理。2、基本數(shù)據(jù)管理，包括對學生、教師、課程、班級、選課、成績等有關(guān)基礎(chǔ)