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

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