第11章 制作簡(jiǎn)單動(dòng)態(tài)網(wǎng)頁(yè)P(yáng)PT學(xué)習(xí)課件

網(wǎng)頁(yè)制作實(shí)例教程(第3版),制作簡(jiǎn)單動(dòng)態(tài)網(wǎng)頁(yè)（第11章）,1，制作和使用表單2，制作和使用ASP動(dòng)態(tài)網(wǎng)頁(yè)3，連接ACCESS數(shù)據(jù)庫(kù),本章要點(diǎn)：,2,11.1.1認(rèn)識(shí)表單,11.1制作表單,表單是用戶與服務(wù)器進(jìn)行信息交流的主要工具，能為動(dòng)態(tài)網(wǎng)頁(yè)提供交互功能。表單按照統(tǒng)一模式從用戶收集信息，然后將信息提交給服務(wù)器進(jìn)行處理。一個(gè)完整的表單應(yīng)該包含兩個(gè)部分：一個(gè)是表單對(duì)象，用來在網(wǎng)頁(yè)中收集信息，另一個(gè)是表單處理程序，用來處理表單。表單處理程序在Web服務(wù)器上，當(dāng)提交一個(gè)表單時(shí)程序開始執(zhí)行。表單只有與某個(gè)表單處理程序關(guān)聯(lián)之后才能實(shí)現(xiàn)表單功能。一個(gè)網(wǎng)頁(yè)可以有多個(gè)表單，但表單中不能嵌入表單。,3,11.1.2插入表單,11.1制作表單,1，用“插入”面板,2，用“插入”菜單,4,11.1.3表單控件,11.1制作表單,（1）表單按鈕（2）文本域（3）文本區(qū)域（4）按鈕（5）復(fù)選框（6）單選按鈕（7）文件域,表單控件用來生成表單對(duì)象，是表單的主要內(nèi)容。,（8）圖像域（9）隱藏域（10）單選按鈕組（11）復(fù)選框組（12）跳轉(zhuǎn)菜單（13）字段集（14）標(biāo)簽,5,11.1.4表單屬性,11.1制作表單,（1）表單ID，為表單命名。（2）動(dòng)作，指定處理的程序的URL地址。（3）目標(biāo)，指定窗口，顯示處理表單后所返回的信息。（4）方法，指定表單的提交方法，有POST方法和GET方法兩種。（5）編碼類型，指定表單的編碼類型，在下拉列表中選擇。（6）類，用CSS樣式格式化表單。,6,11.1.5添加表單對(duì)象,11.1制作表單,例11-1可視化方法制作表單,7,11.2.1表單域標(biāo)記,11.2表單標(biāo)記,是雙標(biāo)簽，用來構(gòu)建表單域，設(shè)定表單的起始和終止位置。,.,（1）action屬性，指定處理表單的程序。（2）method屬性，指定傳遞表單數(shù)據(jù)到服務(wù)器的方式。（3）name屬性，給表單起名，便于處理表單。（4）target屬性，指定顯示表單處理結(jié)果的窗口。,8,11.2.2輸入標(biāo)記,11.2表單標(biāo)記,是單標(biāo)簽，用來定義一個(gè)用戶的輸入?yún)^(qū)域。,標(biāo)記的語(yǔ)法,type屬性決定輸入?yún)^(qū)域的類型。type=text，單行文本輸入框。typet=textarea，多行文本輸入框。type=password，密碼輸入框。type=checkbox，復(fù)選框。type=radio，單選項(xiàng)。type=submit，提交按鈕。type=reset，重置按鈕。type=button，普通按鈕。type=hidden，隱藏區(qū)域。,9,例11-2用HTML標(biāo)記制作表單,11.2表單標(biāo)記,表單標(biāo)記您的性別：先生女士您的愛好：旅游上網(wǎng)運(yùn)動(dòng),10,11.2.3和標(biāo)記,11.2表單標(biāo)記,標(biāo)記要與標(biāo)記聯(lián)合使用，在表單中創(chuàng)建下拉列表框。,語(yǔ)法：選項(xiàng)1選項(xiàng)2,（1）name屬性，指定下拉列表框的名稱。（2）size屬性，指定列表框能夠顯示幾個(gè)選項(xiàng)，默認(rèn)值1。（3）multiple屬性，添加此屬性后可以進(jìn)行多選。（4）selected屬性，添加此屬性后該選項(xiàng)為被選中狀態(tài)。（5）value屬性，指定選項(xiàng)對(duì)應(yīng)的值，對(duì)應(yīng)值被傳遞到服務(wù)器。,11,例11-3下拉列表框標(biāo)記,11.2表單標(biāo)記,下拉列表框標(biāo)記請(qǐng)選擇節(jié)目，單擊按鈕確認(rèn)。星光大道開心辭典快樂大本營(yíng)夢(mèng)想中國(guó),12,11.2.4表單驗(yàn)證,11.2表單標(biāo)記,表單驗(yàn)證是在表單提交之前對(duì)表單數(shù)據(jù)做有效性驗(yàn)證。,13,例11-4表單驗(yàn)證,11.2表單標(biāo)記,表單驗(yàn)證練習(xí)subbutton1_onclicksetf=document.form1ifisnumeric(f.text1.value)=truetheniff.text1.value10thenMsgBox請(qǐng)輸入1到10之間的數(shù)字！elseMsgBox輸入數(shù)據(jù)正確，謝謝！f.submitendifelseMsgBox請(qǐng)輸入數(shù)字！endifendsub,輸入一個(gè)1到10之間的數(shù):,14,11.3.1ASP的特點(diǎn),11.3ASP簡(jiǎn)介,（1）ASP的代碼在服務(wù)器端執(zhí)行，將執(zhí)行結(jié)果返回客戶端。（2）ASP可以方便地訪問數(shù)據(jù)庫(kù)。（3）ASP用VBScript或JavaScript作為腳本編寫語(yǔ)言。（4）凡是能執(zhí)行HTML代碼的瀏覽器都能瀏覽ASP網(wǎng)頁(yè)。（5）源程序不會(huì)傳到客戶端，保護(hù)程序源代碼，提高程序安全性。（6）ASP是面向?qū)ο蟮摹?11.3.2動(dòng)態(tài)網(wǎng)頁(yè)的常見功能,（1）將表單提交的信息存入數(shù)據(jù)庫(kù)。（2）顯示數(shù)據(jù)庫(kù)信息。（3）在主頁(yè)中添加計(jì)數(shù)器，顯示網(wǎng)站訪問量。（4）設(shè)置訪問者權(quán)限，根據(jù)不同訪問者顯示不同信息。（5）在網(wǎng)頁(yè)中添加留言簿、公告板等。,15,11.3.3ASP的程序格式,11.3ASP簡(jiǎn)介,（1）ASP代碼放在“”中，保存時(shí)文件擴(kuò)展名為“.asp”。位于“”中的代碼由服務(wù)器端處理。（2）ASP代碼用VBScript或JavaScript編寫，默認(rèn)腳本語(yǔ)言是VBScript。在程序第一行聲明所使用的腳本。聲明代碼如下：，聲明ASP代碼用VBScript編寫。，聲明ASP代碼用JavaScript編寫。（3）如果一條ASP語(yǔ)句過長(zhǎng)，可以分成幾行寫，除最后一行以外的行末加下劃線。（4）ASP代碼用rem語(yǔ)句或單引號(hào)注釋。,16,例11-4第一個(gè)ASP程序,11.3ASP簡(jiǎn)介,（1）新建文本文件“p1.asp”用記事本方式打開輸以下入代碼保存文件。第一個(gè)ASP程序這是我的第一個(gè)ASP程序。)%（2）將文件復(fù)制到“c:Inetpubwwwroot”文件夾中。（3）瀏覽器地址欄輸入/p1.asp或“http:/localhost/p1.asp”。,17,11.4.1ASP的基本內(nèi)置對(duì)象,11.4ASP的內(nèi)置對(duì)象,ASP有5個(gè)基本內(nèi)置對(duì)象，都在服務(wù)器端執(zhí)行。內(nèi)置對(duì)象不需要聲明，直接使用。,18,11.4.2Response對(duì)象,11.4ASP的內(nèi)置對(duì)象,Response對(duì)象用來從服務(wù)器給用戶發(fā)送信息，用write方法將指定內(nèi)容輸出到客戶端頁(yè)面上，輸出的內(nèi)容中可以包含HTML標(biāo)記。,write方法練習(xí)response.writeresponse.write歡迎光臨！response.writeresponse.writeresponse.write%,例11-6Response對(duì)象的write方法,19,11.4.3Request對(duì)象,11.4ASP的內(nèi)置對(duì)象,Request對(duì)象用來取得瀏覽器提交的數(shù)據(jù)，主要取得表單數(shù)據(jù)。,1Request對(duì)象的form集合用post方法提交表單以后，所有表單中的數(shù)據(jù)都被保存在Request對(duì)象的form集合中，集合元素從1開始編號(hào)。,（1）取得表單元素的值格式1：Request.form（表單中元素名）功能：按照控件名取得某個(gè)表單控件的值。格式2：Request.form（索引值）功能：按照索引值取得某個(gè)表單控件的值。（2）計(jì)算表單某元素值的個(gè)數(shù)格式：Request.form（表單中元素名）.count。功能：計(jì)算表單中某元素值的個(gè)數(shù)。,20,11.4ASP的內(nèi)置對(duì)象,例11-7用Request對(duì)象的form集合取得表單數(shù)據(jù),form集合練習(xí)輸入您的愛好：旅游上網(wǎng)唱歌打球,p4.asp,21,11.4ASP的內(nèi)置對(duì)象,例11-7用Request對(duì)象的form集合取得表單數(shù)據(jù),取得表單數(shù)據(jù)您的愛好有種，它們是：,q4.asp,22,11.4.3Request對(duì)象,11.4ASP的內(nèi)置對(duì)象,2Request對(duì)象的form數(shù)組Request對(duì)象的form集合也可以作為數(shù)組看待，數(shù)組元素從1開始編號(hào)。,例11-8用Request對(duì)象的form數(shù)組取得表單數(shù)據(jù),)使用form數(shù)組next%,q5.asp,23,11.4ASP的內(nèi)置對(duì)象,例11-7用Request對(duì)象的form集合取得表單數(shù)據(jù),form數(shù)組練習(xí)姓名:性別:帥哥美女電子郵箱:,p5.asp,24,11.4ASP的內(nèi)置對(duì)象,例11-7用Request對(duì)象的form集合取得表單數(shù)據(jù),25,11.4.4Application對(duì)象,11.4ASP的內(nèi)置對(duì)象,Application對(duì)象創(chuàng)建公共變量，存儲(chǔ)共享信息，如：站點(diǎn)訪問人數(shù)。1定義Application變量格式：Application(變量名)=值功能：創(chuàng)建Application變量，存儲(chǔ)應(yīng)用程序的共享信息。2Application對(duì)象的集合Application對(duì)象有Contents集合，集合包含對(duì)象所有變量的值，可以用foreach循環(huán)遍歷所有元素。集合元素的個(gè)數(shù)用Contents.count計(jì)算。3訪問Contents集合中元素格式1：Application.Contents(元素名)格式2：Application.Contents(索引號(hào))格式3：Application(元素名),26,11.4ASP的內(nèi)置對(duì)象,例11-9Application變量練習(xí),Application變量練習(xí),27,11.4.5Session對(duì)象,11.4ASP的內(nèi)置對(duì)象,Session對(duì)象用來創(chuàng)建私有變量，存儲(chǔ)單個(gè)用戶私有信息，如：個(gè)人密碼。,1定義Session變量格式：Session(變量名)=值功能：創(chuàng)建Session變量，用來存儲(chǔ)單個(gè)用戶的私有信息。2Session對(duì)象的Contents集合Session對(duì)象的Contents集合包含所有Session變量，可以使用循環(huán)語(yǔ)句顯示所有元素。集合元素個(gè)數(shù)由“Contents.count”給出。,Application對(duì)象與Session對(duì)象的共同點(diǎn)是它們都存儲(chǔ)在服務(wù)器端，都用來記錄瀏覽器端特定信息。不同之處在于前者是多用戶共享，后者是單用戶私有。例如，當(dāng)前有5個(gè)用戶在線，他們共享同一個(gè)Application對(duì)象，他們各自擁有自己的Session對(duì)象。,28,11.4ASP的內(nèi)置對(duì)象,例11-11Session對(duì)象練習(xí),session對(duì)象練習(xí)集合共有項(xiàng),29,11.4.6Server對(duì)象,11.4ASP的內(nèi)置對(duì)象,Server對(duì)象提供對(duì)服務(wù)器的相關(guān)操作，Server對(duì)象有2個(gè)非常實(shí)用的方法，即CreateObject方法和MapPath方法。,1Server對(duì)象的CreateObject方法Server對(duì)象用CreateObject方法創(chuàng)建服務(wù)器組件的實(shí)例，通過組件實(shí)例完成數(shù)據(jù)庫(kù)連接和其他操作。格式：Set實(shí)例名稱=Server.CreateObject(服務(wù)器組件名稱)例如：setconn=createobject(adodb.connection)2Server對(duì)象的MapPath方法Server對(duì)象用MapPath方法獲取當(dāng)前文件在服務(wù)器上的絕對(duì)路徑。格式：Server.MapPath(文件名稱)例如：server.MapPath(lyb.mdb),30,11.5.1ASP內(nèi)置組件簡(jiǎn)介,11.5用ASP處理數(shù)據(jù)庫(kù)信息,組件是能夠完成某些具體任務(wù)的應(yīng)用程序，以文件方式存儲(chǔ)在服務(wù)器上，主要是包含可執(zhí)行代碼的動(dòng)態(tài)鏈接庫(kù)（.dll）或可執(zhí)行文件（.exe）。通過調(diào)用組件完成ASP不容易完成的任務(wù)。ASP內(nèi)置組件是ASP自帶的組件，安裝IIS后，系統(tǒng)將內(nèi)置組件存儲(chǔ)在服務(wù)器上，可以直接調(diào)用。內(nèi)置組件在服務(wù)器端運(yùn)行，不需要客戶端的支持。組件由個(gè)或多個(gè)對(duì)象以及對(duì)象的方法和屬性構(gòu)成。使用組件首先要?jiǎng)?chuàng)建組件對(duì)象的實(shí)例，創(chuàng)建的實(shí)例具有原對(duì)象的一切屬性、方法和功能。,31,11.5.2DatabaseAccess組件,11.5用ASP處理數(shù)據(jù)庫(kù)信息,DatabaseAccess組件能夠通過ADO(ActiveXDataObjects)訪問服務(wù)器端的數(shù)據(jù)庫(kù)或其他表格化數(shù)據(jù)結(jié)構(gòu)中的信息。,1ADO簡(jiǎn)介ADO是一種功能強(qiáng)大的數(shù)據(jù)訪問編程模式，ASP使用ADO的腳本可以訪問各種數(shù)據(jù)庫(kù)，包括SQLserver、Access、Oracle等。ADO本身由7個(gè)對(duì)象組成，分別提供各種數(shù)據(jù)庫(kù)操作行為。ADO命令語(yǔ)句比較簡(jiǎn)單，容易掌握，具有查詢處理功能，訪問速度快，內(nèi)存需要較小。數(shù)據(jù)庫(kù)操作主要有連接數(shù)據(jù)庫(kù)、修改數(shù)據(jù)和查詢數(shù)據(jù)。,32,11.5用ASP處理數(shù)據(jù)庫(kù)信息,2ADO對(duì)象的3個(gè)主體對(duì)象ADO對(duì)象中有3個(gè)主體對(duì)象，能完成數(shù)據(jù)庫(kù)的主要操作，使用對(duì)象之前要先用server對(duì)象的createobject方法建立實(shí)例。,（1）用Connection對(duì)象建立與數(shù)據(jù)源的連接.（2）用Command對(duì)象給出對(duì)數(shù)據(jù)庫(kù)操作的命令。（3）用Recordset對(duì)結(jié)果集數(shù)據(jù)進(jìn)行瀏覽、維護(hù)等操作。,33,11.5.3連接對(duì)象Connection,11.5用ASP處理數(shù)據(jù)庫(kù)信息,Connection對(duì)象主要負(fù)責(zé)ASP與服務(wù)器端數(shù)據(jù)庫(kù)的連接。連接數(shù)據(jù)庫(kù)有多種方法，最方便靈活的方法是用連接字串。比較常用的連接字串是OLEDB連接字串。,1OLEDB連接字串OLEDB連接字串用指定數(shù)據(jù)源的方法書寫，其中的數(shù)據(jù)庫(kù)名可以用物理路徑標(biāo)識(shí)，也可以用server對(duì)象的mappath方法找出實(shí)際路徑。（1）連接字串的格式set實(shí)例名=server.createobject(adodb.connection)實(shí)例名.openprovider=microsoft.jet.oledb.4.0;datasource=datasource=datasource=datasource=datasource=DataSource=&server.MapPath(lyb.mdb)setrs.activeconnection=aa,方法3，用Connection對(duì)象的Execute方法建立Recordset對(duì)象。,sql=select*fromlysetrs=conn.execute(sql),40,11.5用ASP處理數(shù)據(jù)庫(kù)信息,例11-13用Recordset對(duì)象的方法查看記錄,代碼見p10.asp,41,11.5用ASP處理數(shù)據(jù)庫(kù)信息,例11-14用Recordset對(duì)象的方法添加記錄,代碼見p11.asp,42,11.5用ASP處理數(shù)據(jù)庫(kù)信息,例11-15用Recordset