《Web應(yīng)用程序設(shè)計》實訓(xùn)指導(dǎo)書VIP

1、WEB應(yīng)用程序設(shè)計實訓(xùn)指導(dǎo)書WEB應(yīng)用程序設(shè)計 實驗指導(dǎo)書目 錄實訓(xùn)一 熟悉HTML語言基本結(jié)構(gòu)3實訓(xùn)二 CSS樣式設(shè)計綜合應(yīng)用5實訓(xùn)三 Response與Resquest對象應(yīng)用7實訓(xùn)四 初識NET控件：文本框、按鈕、文本標(biāo)簽9實訓(xùn)五 動態(tài)增刪NET控件11實訓(xùn)六 NET靜態(tài)控件數(shù)據(jù)綁定14實訓(xùn)七 初識NET數(shù)據(jù)庫訪問技術(shù)17實訓(xùn)一 熟悉HTML語言基本結(jié)構(gòu)實訓(xùn)目的學(xué)生通過該實訓(xùn)熟悉HTML語言的基本使用方法，進(jìn)一步體會瀏覽器解釋執(zhí)行HTML的原理，為以后ASP.net網(wǎng)絡(luò)編程打下扎實的基礎(chǔ)。實訓(xùn)任務(wù)與要求1. 利用Dreamweaver CS3編輯HTML頁面，并在瀏覽器中觀察效果，體會并

2、掌握HTML語言的基本操作和文件結(jié)構(gòu)。見效果圖2. 風(fēng)格與布局與所選樣例類似。文字內(nèi)容與圖片可另選。3. 不能以整張圖片代替網(wǎng)頁。4. 網(wǎng)頁中至少有一個文字鏈接至中國大學(xué)生在線：5. 網(wǎng)頁中至少有一個圖片鏈接至九江職業(yè)技術(shù)學(xué)院首頁：實訓(xùn)設(shè)備 Windows xp/2003/2008 server+ Dreamweaver CS3/實訓(xùn)內(nèi)容1仿樣例制作網(wǎng)頁。效果樣例實訓(xùn)二 CSS樣式設(shè)計綜合應(yīng)用實訓(xùn)目的學(xué)生通過該實訓(xùn)熟悉 A網(wǎng)站與項目的創(chuàng)建及CSS樣式元語言的基本語法及在ASP中的應(yīng)用，為以后高級網(wǎng)絡(luò)編程打下扎實的基礎(chǔ)。實訓(xùn)任務(wù)與要求1. 利用A創(chuàng)建站點。2. 利用A創(chuàng)建WebForm1.asp

3、x網(wǎng)頁文件。3. 利用A創(chuàng)建CSS樣式實現(xiàn)效果圖。實訓(xùn)設(shè)備 Windows xp/2003/2008 server+ Dreamweaver CS3/實訓(xùn)內(nèi)容1. WebForm1.aspxWebForm1.aspx字隨窗口大小而自動擴(kuò)展；并保持與上下間距分別為20px、10px，左側(cè)50px；內(nèi)部間距為上下20px,左右20px。2. 兩張圖片疊加成如圖樣式。3. 表格隨窗口變化而始終處于瀏覽器窗口右下角位置。4. 定義標(biāo)簽p樣式：仿宋體，顏色#333399，大小為12pt，行間距為1.25字體高，字間距為0.3字體高，首行縮進(jìn)2字符，文字內(nèi)容選自“什么是Javascript腳本語言”文檔前

4、3段。效果樣例實訓(xùn)三 Response與Resquest對象應(yīng)用實訓(xùn)目的學(xué)生通過該實訓(xùn)熟悉Response與Resquest對象的基本語法及在HTML超文本語言嵌入ASP中。實訓(xùn)任務(wù)與要求1. 利用A創(chuàng)建應(yīng)用項目。2. 利用A創(chuàng)建WebForm1.aspx網(wǎng)頁文件。3. 初識A的代碼后置特點及WebForm1.aspx.vb代碼分離文件的編輯。4. 利用VB.net語言作為Asp腳本語言編寫WEB程序5. 在A中利用HTML超文本標(biāo)識語言創(chuàng)建效果圖。實訓(xùn)設(shè)備 Windows xp/2003/2008 server+ Dreamweaver CS3/實訓(xùn)內(nèi)容完全利用A的代碼后置文件WebForm

5、1.aspx.vb的Page_Load過程編寫程序?qū)崿F(xiàn)效果圖中九九乘法表。核心代碼示例： Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Dim i, j As Integer Response.Write("<div align='center'><H2>九九乘法表</H2></div>") Response.Write("<table align='

6、;center' border='1' bordercolor='blue'>") Response.Write("<tr hight='35' align='center'>") Response.Write("<td width='50'>&nbsp</td>") For i = 1 To 9 Response.Write("<td width='50'>"

7、 & i & "</td>") Next Response.Write("</tr>") For i = 1 To 9 Response.Write("<tr hight='35' align='center'>") Response.Write("<td width='50'>" & i & "</td>") For j = 1 To 9 If j <

8、;= i Then Response.Write("<td width='50'>" & i * j & "</td>") Else Response.Write("<td width='50'>&nbsp</td>") End If Next Response.Write("</tr>") Next Response.Write("</table>")End Sub效

9、果樣例實訓(xùn)四 初識NET控件：文本框、按鈕、文本標(biāo)簽實訓(xùn)目的1. 要求學(xué)生熟練掌握靜態(tài)設(shè)計TextBox、Lable、Button控件應(yīng)用。2. 要求學(xué)生熟練掌握網(wǎng)頁首次加載與環(huán)回的執(zhí)行過程，熟練掌握IsPostBack的使用。3. 正確區(qū)分與掌握Button對象、行為事件（單擊）、方法的關(guān)系。4. 熟練掌握對TextBox、Lable內(nèi)容的讀取與賦值，區(qū)別對兩者分段換行的處理方法。實訓(xùn)任務(wù)與要求1. 利用A創(chuàng)建應(yīng)用項目。2. 利用A創(chuàng)建WebForm1.aspx網(wǎng)頁文件。3. 初識NET控件：文本框、按鈕、文本標(biāo)簽。4. 掌握按鈕回傳事件與ISPOSTBACK5. 簡單客戶留言板。效果圖。實

10、訓(xùn)設(shè)備 Windows xp/2003/2008 server+ Dreamweaver CS3/實訓(xùn)內(nèi)容完全利用A的代碼后置文件WebForm1.aspx.vb的Page_Load與Button1_Click過程編寫程序?qū)崿F(xiàn)簡單客戶留言板。核心代碼示例： Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 'net控件一：文本框、按鈕、文本標(biāo)簽 '首次加載頁面運行初始化TextBox1 If Not IsPostBack Then TextBo

11、x1.Text = "黃飛鴻" End If End Sub Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click Dim str As String str = "先生，你好！" '比較兩種控件中換行的方法 '標(biāo)簽控件中，兩個文本框之間換行用<br/>，多行文本中內(nèi)容自身的換行用<pre>格式化 Label1.Text = "<pre>" &am

12、p; TextBox1.Text & str & "<br/>" & TextBox3.Text & "</pre>" '以多行文本框顯示另一文本框和多行文本框內(nèi)容時，文本框之間用函數(shù)chr(13)換行，其余不變 TextBox4.Text = TextBox1.Text & str & Chr(13) & TextBox3.TextEnd Sub效果樣例實訓(xùn)五 動態(tài)增刪NET控件實訓(xùn)目的1. 要求學(xué)生熟練掌握ListBox、CheckBox、CheckBoxList

13、、RadioButton、RadioButtonList控件應(yīng)用。2. 要求學(xué)生熟練掌握動態(tài)添加常用Web控件的方法。3. 要求學(xué)生熟練掌握動態(tài)移去（刪除）常用Web控件的方法。4. 正確區(qū)分增刪控件與增刪控件項的方法。5. 常用控件默認(rèn)選項的設(shè)置方法。6. 創(chuàng)建CheckBoxList圖形選取形式與讀取選擇項狀態(tài)值的方法實訓(xùn)任務(wù)與要求1、 ListBox、CheckBox、CheckBoxList、RadioButton、RadioButtonList控件對比與操作。實訓(xùn)設(shè)備 Windows xp/2003/2008 server+ Dreamweaver CS3/實訓(xùn)內(nèi)容完全利用A的代碼后

14、置文件WebForm1.aspx.vb的Page_Load與Button1_Click過程編寫程序?qū)崿F(xiàn)動態(tài)增刪NET控件。核心代碼示例： Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click If TextBox1.Text = "" Then Label1.Text = "你沒有輸入內(nèi)容。" Else Label1.Text = "<pre>" & TextBox1.Text

15、& "</pre>" End If End Sub Protected Sub Button2_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button2.Click TextBox1.Text = "" ListBox1.ClearSelection() ListBox2.ClearSelection() CheckBox1.Checked = False CheckBox2.Checked = False CheckBox3.Checked = False

16、 CheckBox4.Checked = False CheckBoxList1.ClearSelection() CheckBoxList2.ClearSelection() RadioButton1.Checked = False RadioButton2.Checked = False RadioButton3.Checked = False RadioButton4.Checked = False RadioButtonList1.ClearSelection() '重新設(shè)定默認(rèn)選項 CheckBoxList1.Items(3).Selected = True RadioBut

17、tonList1.Items(2).Selected = True End Sub Protected Sub Button3_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button3.Click Dim TextBox2 = New TextBox() TextBox2.ID = "TextBox2" TextBox2.Width = New Unit(100) TextBox2.TextMode = TextBoxMode.SingleLine TextBox2.Style("Lef

18、t") = "20px" Panel1.Controls.Add(TextBox2) '添加一個名為"九江"的項，且狀態(tài)值為"九江" ListBox1.Items.Add("九江") '添加一個名為"九江"的項，且狀態(tài)值為"9" ListBox2.Items.Add(New ListItem("九江", "9") '插入新增項并設(shè)定索引為1 CheckBoxList1.Items.Insert(3, &

19、quot;九江") '新增項且設(shè)定為選中狀態(tài) CheckBoxList1.Items.Add("江西") CheckBoxList1.Items(CheckBoxList1.Items.Count - 1).Selected = True End Sub Protected Sub Button4_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button4.Click '移去選定的選項 ListBox2.Items.Remove(ListBox2.SelectedItem)

20、 '移去指定索引的項 CheckBoxList1.Items.RemoveAt(1) ListBox2.Items.RemoveAt(2) End Sub效果樣例實訓(xùn)六 NET靜態(tài)控件數(shù)據(jù)綁定實訓(xùn)目的1. 要求學(xué)生熟練掌握VB數(shù)組的應(yīng)用方法。2. 要求學(xué)生熟練掌握DropDownList控件3. 要求學(xué)生熟練掌握將數(shù)組綁定到Web控件的方法。4. 要求學(xué)生熟練掌握Web控件狀態(tài)值發(fā)生變化時調(diào)用方法。5. 初識驗證控件。實訓(xùn)任務(wù)與要求1、 定義數(shù)組及重置數(shù)組，將數(shù)組值綁定到DropDownList控件。實訓(xùn)設(shè)備 Windows xp/2003/2008 server+ Dreamweav

21、er CS3/實訓(xùn)內(nèi)容完全利用A的代碼后置文件WebForm1.aspx.vb的Page_Load與Button1_Click過程編寫程序?qū)崿F(xiàn)將數(shù)組綁定到DropDownList控件的方法。驗證控件的簡單應(yīng)用核心代碼示例： Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load '數(shù)據(jù)綁定 If Not IsPostBack Then Dim maxy As Integer = Year(Now() - 25 Dim i As Integer Dim y(9

22、) y(0) = "請選擇年份" For i = 1 To 9 y(i) = maxy maxy += 1 Next DropDownList_y.DataSource = y DropDownList_y.DataBind() End If Label1.Text = "" End Sub Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click Label1.Text = "已回傳服務(wù)器" End

23、Sub Protected Sub DropDownList_y_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles DropDownList_y.SelectedIndexChanged DropDownList_m.Enabled = True End Sub Protected Sub DropDownList_m_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles DropDownList_m

24、.SelectedIndexChanged Dim d(30) As Integer Dim i As Integer For i = 0 To 30 d(i) = i + 1 Next Dim y, m As Integer y = CInt(DropDownList_y.SelectedItem.Text) m = CInt(DropDownList_m.SelectedItem.Text) Select Case m Case 4, 6, 9, 11 ReDim Preserve d(29) Case 2 If y Mod 4 = 0 And y Mod 100 <> 0 O

25、r y Mod 400 = 0 Then ReDim Preserve d(28) Else ReDim Preserve d(27) End If End Select DropDownList_d.DataSource = d DropDownList_d.DataBind() DropDownList_d.Enabled = True End Sub效果樣例實訓(xùn)七 初識NET數(shù)據(jù)庫訪問技術(shù)實訓(xùn)目的1、 要求學(xué)生熟練掌握NET數(shù)據(jù)庫寫入技術(shù)。2、 要求學(xué)生熟練掌握自定義驗證控件RegularExpressionValidator正則表達(dá)式的規(guī)則。實訓(xùn)任務(wù)與要求1、 設(shè)計學(xué)生注冊信息頁面并建

26、立學(xué)生信息數(shù)據(jù)庫。實訓(xùn)設(shè)備 Windows xp/2003/2008 server+ Dreamweaver CS3/實訓(xùn)內(nèi)容利用SQL Server 2000創(chuàng)建數(shù)據(jù)庫完全利用A的代碼后置文件WebForm1.aspx.vb的Page_Load與Button1_Click過程編寫程序?qū)崿F(xiàn)將數(shù)據(jù)庫數(shù)據(jù)綁定。表達(dá)式驗證控件RegularExpressionValidator的高級應(yīng)用核心代碼示例：<asp:RegularExpressionValidator ID="RegularExpressionValidator5" runat="server"

27、; ControlToValidate="TextBox6" Display="Dynamic" ErrorMessage="RegularExpressionValidator" ValidationExpression="(d3)|d3-)|(d4)|d4-)|(d4)|(d3)(d8|d7)">（號碼錯誤）</asp:RegularExpressionValidator>Imports System.Data.SqlClientPartial Public Class WebForm12 I

28、nherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load '第二階段測試題 驗證控件及數(shù)據(jù)庫訪問 If Not IsPostBack Then Dim maxy As Integer = Year(Now() - 25 Dim i As Integer Dim y(9) y(0) = "請先選擇年份" For i = 1 To 9 y(i) = maxy maxy += 1 Next D

29、ropDownList1.DataSource = y DropDownList1.DataBind() End If End Sub Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles DropDownList1.SelectedIndexChanged DropDownList2.Enabled = True DropDownList2.ClearSelection() DropDownList2.Items(0).Selected =

30、True '每當(dāng)重新選擇年后重置月，但必須先清除原選擇項 Dim i, day(30) As Integer For i = 0 To 30 day(i) = i + 1 Next DropDownList3.DataSource = day DropDownList3.DataBind() DropDownList3.Enabled = True End Sub Protected Sub DropDownList2_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles DropDownL

31、ist2.SelectedIndexChanged Dim i, day(30) As Integer For i = 0 To 30 day(i) = i + 1 Next Dim y As Integer = CInt(DropDownList1.SelectedItem.Text) Select Case CInt(DropDownList2.SelectedItem.Text) Case 4, 6, 9, 11 ReDim Preserve day(29) Case 2 If y Mod 4 = 0 And y Mod 100 <> 0 Or y Mod 400 = 0 T

32、hen ReDim Preserve day(28) Else ReDim Preserve day(27) End If End Select DropDownList3.DataSource = day DropDownList3.DataBind() End Sub Protected Sub DropDownList6_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles DropDownList6.SelectedIndexChanged Dim dep As Integer = Drop

33、DownList6.SelectedItem.Value Select Case dep Case 1 Dim specialty() As String = "數(shù)控技術(shù)", "汽車維修", "空調(diào)維護(hù)", "檢測技術(shù)" DropDownList7.DataSource = specialty DropDownList7.DataBind() Case 2 Dim specialty() As String = "自動化", "應(yīng)用電子" DropDownList7.Data

34、Source = specialty DropDownList7.DataBind() Case 3 Dim specialty() As String = "電子商務(wù)", "注冊會計", "酒店管理", "國際貿(mào)易" DropDownList7.DataSource = specialty DropDownList7.DataBind() Case 4 Dim specialty() As String = "計算機應(yīng)用", "網(wǎng)絡(luò)工程" DropDownList7.Dat

35、aSource = specialty DropDownList7.DataBind() Case 5 Dim specialty() As String = "商務(wù)英語", "旅游英語" DropDownList7.DataSource = specialty DropDownList7.DataBind() Case 6 Dim specialty() As String = "船舶建造", "船舶導(dǎo)航" DropDownList7.DataSource = specialty DropDownList7.Da

36、taBind() End Select End Sub Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click '數(shù)據(jù)庫結(jié)構(gòu)： '數(shù)據(jù)庫名: demo '表名：login '字段：姓名（name nvarchar(20)）性別（sex char(2)）密碼（password char(32)）出生日期（birthday datetime(8)）生源地（nativeplace varchar(20)） '入學(xué)成績（grad

37、e real(4)）報考類別（types char(10)）院系（depart varchar(20)）專業(yè)（specialty varchar(20)）愛好（fond varchar(50)） '手機（mobile char(11)）電話（phone char(12)）郵箱（email varchar(50)）近照（photo varchar(50)）備注（notes varchar(600)） If IsValid Then '如果所有驗證都通過 '獲取出生年月日 Dim y As Integer = CInt(DropDownList1.SelectedItem.

38、Text) Dim m As Integer = CInt(DropDownList2.SelectedItem.Text) Dim d As Integer = CInt(DropDownList3.SelectedItem.Text) '合并日期 Dim birth As Date = DateSerial(y, m, d) '獲取愛好選擇 Dim sfond As String = "N" Dim i As Integer For i = 0 To CheckBoxList1.Items.Count - 1 If CheckBoxList1.Items

39、(i).Selected Then If sfond = "N" Then sfond = CheckBoxList1.Items(i).Text Else sfond &= "|" & CheckBoxList1.Items(i).Text End If End If Next Dim mobileNum As String = "N" Dim phoneNum As String = "N" Dim emailAdd As String = "N" If TextBox5.T

40、ext <> "" Then mobileNum = Trim(CStr(TextBox5.Text) End If If TextBox6.Text <> "" Then phoneNum = Trim(CStr(TextBox6.Text) End If If TextBox8.Text <> "" Then emailAdd = Trim(TextBox8.Text) End If '獲取個人說明 Dim remark As String = "N" If Text

41、Box9.Text <> "" Then remark = TextBox9.Text End If '上傳個人照片至服務(wù)器存儲 Dim filepath, filename, fileExtname As String filepath = FileUpload1.PostedFile.FileName fileExtname = filepath.Substring(filepath.LastIndexOf(".") If mobileNum <> "N" Then '如果有手機號 file

42、name = mobileNum & fileExtname '以手機號命名照片文件名 Else filename = TextBox1.Text & CStr(y) & CStr(m) & CStr(d) & fileExtname '否則以個人姓名+出生日期命名照片文件名 End If FileUpload1.SaveAs(Server.MapPath("images") & filename) '定義數(shù)據(jù)庫連接字符串 Dim ConnStr As String = "Server=(lo

43、cal);user id=sa; pwd=; Database=demo" '建立數(shù)據(jù)庫連接Connection對象，并創(chuàng)建一個實例 Dim conn As SqlConnection = New SqlConnection(ConnStr) '打開指定數(shù)據(jù)庫 conn.Open() '定義SQlStr變量，建立含有參數(shù)的SQL語句 Dim SQLStr As String = "INSERT INTO login (name,sex,password,birthday,nativeplace,grade,types,depart,specialty

44、,fond,mobile,phone,email,photo,notes) VALUES (name,sex,password,birthday,nativeplace,grade,types,depart,specialty,fond,mobile,phone,email,photo,notes)" '創(chuàng)建數(shù)據(jù)庫命令Command對象，并創(chuàng)建實例 Dim Cmd As SqlCommand = New SqlCommand(SQLStr, conn) '設(shè)置參數(shù)型別 Cmd.Parameters.Add(New SqlParameter("name&quo

45、t;, SqlDbType.VarChar, 20) Cmd.Parameters.Add(New SqlParameter("sex", SqlDbType.Char, 2) Cmd.Parameters.Add(New SqlParameter("password", SqlDbType.Char, 32) Cmd.Parameters.Add(New SqlParameter("birthday", SqlDbType.DateTime, 8) Cmd.Parameters.Add(New SqlParameter("

46、nativeplace", SqlDbType.VarChar, 20) Cmd.Parameters.Add(New SqlParameter("grade", SqlDbType.Real, 4) Cmd.Parameters.Add(New SqlParameter("types", SqlDbType.Char, 10) Cmd.Parameters.Add(New SqlParameter("depart", SqlDbType.VarChar, 20) Cmd.Parameters.Add(New SqlPara

47、meter("specialty", SqlDbType.VarChar, 20) Cmd.Parameters.Add(New SqlParameter("fond", SqlDbType.VarChar, 50) Cmd.Parameters.Add(New SqlParameter("mobile", SqlDbType.Char, 11) Cmd.Parameters.Add(New SqlParameter("phone", SqlDbType.Char, 12) Cmd.Parameters.Add(N

48、ew SqlParameter("email", SqlDbType.VarChar, 50) Cmd.Parameters.Add(New SqlParameter("photo", SqlDbType.VarChar, 50) Cmd.Parameters.Add(New SqlParameter("notes", SqlDbType.VarChar, 500) '設(shè)置參數(shù)值 Cmd.Parameters(0).Value = TextBox1.Text Cmd.Parameters(1).Value = RadioBut

49、tonList1.SelectedItem.Text Cmd.Parameters(2).Value = FormsAuthentication.HashPasswordForStoringInConfigFile(TextBox2.Text, "MD5") Cmd.Parameters(3).Value = birth Cmd.Parameters(4).Value = DropDownList4.SelectedItem.Text Cmd.Parameters(5).Value = Val(TextBox4.Text) Cmd.Parameters(6).Value = DropDownList5.SelectedItem.Text Cmd.Parameters(7).Value = DropDownList6.SelectedItem.Text Cmd.Parameters(8).Value = DropDownList7.SelectedItem.Text Cmd.Parameters(9).Value = sfond Cmd.Parameters(10).Value = mobileNum Cmd.Parameters(11).Value = phoneNum Cmd.Parameters(12).Value = emailAdd Cmd.Par