Web程序設(shè)計(jì)指導(dǎo)書

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

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

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

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

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

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

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

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

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

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

1

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

一、試驗(yàn)?zāi)康?/p>

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

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

二、試驗(yàn)要求

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

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

三、試驗(yàn)步驟

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

1）編寫HTML代碼：?jiǎn)?dòng)Windows附件中的記事本程序，編寫HTML代碼2）保存HTML文件3）執(zhí)行如圖1-1

圖1-1

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

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

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

1

2）

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

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

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

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

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

表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說明控件在程序中使用的名稱空間上顯示的文本單擊控件時(shí)跳轉(zhuǎn)的目標(biāo)URL開啟新網(wǎng)頁時(shí)的目標(biāo)框架5）6）

編寫程序代碼測(cè)試運(yùn)行結(jié)果

2

試驗(yàn)2C#程序設(shè)計(jì)

一、試驗(yàn)?zāi)康?/p>

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

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

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

二、試驗(yàn)要求

注：至少選做2題。

1、設(shè)計(jì)一個(gè)能計(jì)算1！+2！+3！+?+n！的程序2、設(shè)計(jì)一個(gè)商場(chǎng)收費(fèi)程序

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

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

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

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

圖2-1圖2-2

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

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

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

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

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

控件TextBox1Button1Label1

屬性IDIDTextID值txtNumbtnOK確定lblResult3

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

2、設(shè)計(jì)商場(chǎng)收費(fèi)程序

空標(biāo)簽控件上顯示的文本

圖2-3圖2-4

要求：

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

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

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

初始狀態(tài)。

步驟：

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

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

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

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

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

控件TextBox1TextBox2Button1Button2Label1

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

4

試驗(yàn)3基本控件的使用

一、試驗(yàn)?zāi)康?/p>

1、熟悉在MicrosoftVisualStudio.Net中建立項(xiàng)目的方法。

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

二、試驗(yàn)要求

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

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

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

5

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

一、試驗(yàn)?zāi)康?/p>

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

二、試驗(yàn)要求

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

圖4-2圖4-1

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

6

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

圖4-4

7

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

一、試驗(yàn)?zāi)康?/p>

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

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

二、試驗(yàn)要求

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

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

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

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

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

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

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

選擇班級(jí)名稱，進(jìn)行班級(jí)課表查詢。

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

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

三、試驗(yàn)步驟

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

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

8

圖5-1

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

圖5-2

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

1)設(shè)計(jì)Web頁面

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

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

9

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

一、試驗(yàn)?zāi)康?/p>

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

二、試驗(yàn)要求

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

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

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

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

三、試驗(yàn)步驟

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

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

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

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

15

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

（3）編寫事件代碼

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

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

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

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

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

（3）編寫事件代碼

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

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

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

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

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

16

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

（3）編寫事件代碼

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

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

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

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

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

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

（3）編寫事件代碼

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

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

其他詳細(xì)代碼見程序。

stringstrAnswer;

17

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

一、系統(tǒng)功能

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

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

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

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

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

管理個(gè)人基本信息：如瀏覽個(gè)人信息、修改密碼、查詢成績(jī)等。

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

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

主要功能包括以下三個(gè)方面：

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