《網(wǎng)絡(luò)程序開發(fā)實(shí)例 》PPT課件.pptVIP

第12章網(wǎng)絡(luò)程序開發(fā)實(shí)例,本章內(nèi)容簡(jiǎn)介,12.1 留言板,12.1.1 留言板的總體設(shè)計(jì) 12.1.2 留言板的關(guān)鍵技術(shù) 12.1.3 留言板的具體實(shí)現(xiàn),留言板,留言板可以說(shuō)是網(wǎng)上最常見的，本節(jié)就利用數(shù)據(jù)庫(kù)來(lái)實(shí)現(xiàn)一個(gè)功能比較完整的留言板，它的首頁(yè)如下圖：,12.1.1 留言板的總體設(shè)計(jì),本留言板只提供瀏覽留言和添加留言的功能，對(duì)于管理員來(lái)說(shuō)，還提供了刪除留言的功能。 根據(jù)這樣的設(shè)計(jì)思想，該系統(tǒng)將包括如下主要文件： （1）數(shù)據(jù)庫(kù)文件guest.mdb因?yàn)榱粞园灞容^簡(jiǎn)單，只要一張表就夠了，如下： （2）首頁(yè)index.asp在其中顯示所有留言和一個(gè)添加留言的表單。 （3）添加留言insert.asp當(dāng)用戶在首頁(yè)表單中輸入內(nèi)容后，就提交到本頁(yè)面，添加完畢后自動(dòng)返回首頁(yè)。 （4）刪除留言delete.asp單擊首頁(yè)中的“刪除”超鏈接就可以打開本頁(yè)面，輸入管理員密碼后就可以刪除該信息，刪除完畢返回首頁(yè)。 （5）odbc_connection.asp、config.asp、function.asp、guest.css這些是公共文件，用來(lái)存放數(shù)據(jù)庫(kù)連接語(yǔ)句、幾個(gè)常量、幾個(gè)函數(shù)和CSS樣式，可供其他文件調(diào)用。,12.1.2 留言板的關(guān)鍵技術(shù)（1）,這個(gè)留言板相對(duì)比較簡(jiǎn)單，但也有以下幾點(diǎn)關(guān)鍵之處： （1）添加不完整記錄 很多時(shí)候，都應(yīng)該允許用戶添加不完整的信息，比如本示例應(yīng)該允許用戶省略留言內(nèi)容或E-mail地址。在8.3.2節(jié)簡(jiǎn)單講過(guò)如何添加不完整的記錄，在9.4.4節(jié)里也舉例談過(guò)利用AddNew添加不完整記錄的方法。本節(jié)再來(lái)講另外一種方法。 該方法采取在添加記錄時(shí)將Insert語(yǔ)句分為前后兩部分，根據(jù)用戶提交信息分別組織前半句和后半句，最后再組成完整的Insert語(yǔ)句。具體實(shí)現(xiàn)我們稍后看insert.asp文件。,12.1.2 留言板的關(guān)鍵技術(shù)（2）,（2）對(duì)文本的處理 在添加記錄時(shí)，如果用戶提交的信息中包含了英文單引號(hào)，就會(huì)和SQL語(yǔ)句中的單引號(hào)發(fā)生沖突錯(cuò)誤。為了解決該錯(cuò)誤，可以在添加記錄時(shí)將單引號(hào)替換為連續(xù)兩個(gè)單引號(hào)，這樣就不會(huì)發(fā)生錯(cuò)誤，而且在字段中也只會(huì)添加一個(gè)單引號(hào)。 另外，在讀取記錄時(shí)，如果不進(jìn)行處理就原樣輸出，就無(wú)法實(shí)現(xiàn)換行效果；另外，用戶輸入的HTML代碼也會(huì)被執(zhí)行。而在留言板中，我們一般希望能夠?qū)崿F(xiàn)換行顯示的效果，并且能夠直接顯示用戶輸入的HTML代碼。這樣就需要用字符串函數(shù)將其中的特殊字符替換為相應(yīng)的HTML標(biāo)記或字符實(shí)體，比如將用戶在文本框中輸入的回車換行符替換為，將用戶輸入的空格替換為。 關(guān)于文本處理技術(shù)，請(qǐng)結(jié)合function.asp認(rèn)真體會(huì)。,12.1.2 留言板的關(guān)鍵技術(shù)（3）,（3）管理留言 對(duì)于大型網(wǎng)站，一般有專門的管理系統(tǒng)，管理員登錄后就可以管理各種信息，可是對(duì)于這個(gè)簡(jiǎn)單的留言板系統(tǒng)，沒(méi)有必要去建立一套專門的管理系統(tǒng)，可以將管理密碼直接寫在ASP文件中，當(dāng)要?jiǎng)h除留言時(shí)必須輸入該密碼才行，否則拒絕操作。 這也是小型網(wǎng)站經(jīng)常采取的管理方法，稍后我們結(jié)合delete.asp進(jìn)行詳細(xì)講解。,12.1.2 留言板的關(guān)鍵技術(shù)（4）,（4）客戶端JavaScript驗(yàn)證 在填寫表單信息時(shí)，通常要求用戶按照一定的規(guī)則填寫，比如必須填寫某些信息。這樣就需要來(lái)驗(yàn)證用戶填寫的信息是否符合規(guī)則，當(dāng)然，這可以在用戶提交表單后進(jìn)行驗(yàn)證。不過(guò)，利用客戶端的JavaScript驗(yàn)證代碼，可以在提交表單前在客戶端就進(jìn)行驗(yàn)證，符合規(guī)則后才提交到服務(wù)器端，這樣就可以減輕服務(wù)器的負(fù)擔(dān)。 稍后我們結(jié)合index.asp進(jìn)行詳細(xì)講解。,12.1.3 留言板的具體實(shí)現(xiàn),下面首先講解幾個(gè)公共文件，然后依次講解添加留言的主要文件。 （1）連接數(shù)據(jù)庫(kù)文件odbc_connection.asp和配置文件config.asp 連接數(shù)據(jù)庫(kù)文件中保存了連接數(shù)據(jù)庫(kù)的語(yǔ)句，配置文件用來(lái)存放一些供其他頁(yè)調(diào)用的常量。在其他文件中用Include語(yǔ)句就可以將它們包含進(jìn)去。 這樣做的好處是修改數(shù)據(jù)庫(kù)名稱、留言板名稱或密碼時(shí)只要修改這兩個(gè)文件即可。這也是許多大型程序常用的技巧。 （2）函數(shù)文件function.asp 該文件專門用來(lái)存放一些供其他頁(yè)調(diào)用的函數(shù)。 下面請(qǐng)看該函數(shù)的程序代碼：,函數(shù)文件function.asp,（3）樣式文件guest.css,CSS稱為“層疊樣式表”。它一般用來(lái)設(shè)置網(wǎng)頁(yè)的字體顏色、背景顏色、超鏈接顏色、表格樣式等各種樣式。 樣式文件guest.css代碼如下： 本文件第1行表示網(wǎng)頁(yè)背景顏色為#FFFFFF。第2行規(guī)定了和標(biāo)記中的文字的字體、大小和顏色。第3行規(guī)定超鏈接文字的字體、大小和顏色，并且規(guī)定不顯示下劃線。第4行規(guī)定當(dāng)鼠標(biāo)在超鏈接上移動(dòng)時(shí)的字體顏色，并且此時(shí)顯示下劃線。,（4）留言板首頁(yè)index.asp,本頁(yè)面主要分為兩部分：第一部分是添加留言的表單，表單會(huì)被提交到insert.asp；第二部分用來(lái)顯示所有留言，其實(shí)就是普通的查詢記錄的例子。 此外，本程序在提交表單時(shí)，使用了客戶端JavaScript驗(yàn)證來(lái)判斷用戶填寫的表單信息是否符合要求？ 要使用客戶端JavaScript驗(yàn)證，首先要在表單的標(biāo)記中添加onsubmit屬性 下面我們來(lái)講解index.asp文件,首頁(yè) 程序講解,Index.asp,（5）添加留言文件insert.asp,在首頁(yè)中填寫留言后，就可以打開insert.asp，在本文件中，將留言信息保存到數(shù)據(jù)庫(kù)中后，再重定向回首頁(yè)。 由于留言內(nèi)容和留言人E-mail可以省略，所以在本示例中要添加不完整的記錄。其中關(guān)鍵是要體會(huì)SQL字符串的形成過(guò)程，這里實(shí)際上是將SQL語(yǔ)句分成了前后兩部分，分別建立，然后最后再形成一個(gè)完整的Insert語(yǔ)句。 程序代碼如下：,（6）刪除留言文件delete.asp,當(dāng)在首頁(yè)中單擊【刪除】按鈕后，將調(diào)用本文件，首先要求用戶輸入刪除密碼123456，密碼正確后，才可以刪除，之后重定向回首頁(yè)。 需要注意ID的傳遞過(guò)程：首先將從首頁(yè)中傳遞過(guò)來(lái)的記錄編號(hào)ID保存在了隱藏文本框中；然后提交表單后再用Requet.Form獲取到該ID值。這樣可以確保不出錯(cuò)誤。 下面請(qǐng)看代碼：,12.2 聊天室,12.2.1 聊天室的總體設(shè)計(jì) 12.2.2 聊天室的關(guān)鍵技術(shù) 12.2.3 聊天室的具體實(shí)現(xiàn),聊天室,聊天室作為一個(gè)能夠吸引人氣的欄目，備受各大網(wǎng)站青睞。我們?cè)诘谖逭乱苍_發(fā)過(guò)一個(gè)簡(jiǎn)單的聊天室，本節(jié)就在此基礎(chǔ)上開發(fā)一個(gè)功能更加完善的聊天室，其中聊天室主界面如下圖：,下面依次講解。 （1）配置文件config.asp、樣式文件chat.css 這兩個(gè)文件用來(lái)配置一些常數(shù)和CSS樣式，類似于留言板，這里不再贅述。 （2）函數(shù)文件function.asp 在具體實(shí)現(xiàn)時(shí)，本程序有一個(gè)特點(diǎn)，就是將大量的比較復(fù)雜的功能語(yǔ)句包裝成了函數(shù)，統(tǒng)一放在function.asp中，其他頁(yè)面只要簡(jiǎn)單地調(diào)用這些函數(shù)即可。這也是大型程序常用的開發(fā)方法，請(qǐng)大家認(rèn)真體會(huì)。 function.asp中共包括7個(gè)函數(shù)，下面舉例講述幾個(gè)重要的函數(shù)。,GetUserName函數(shù),首先來(lái)看GetUserName函數(shù)，它用來(lái)判斷用戶名是否可以使用。其中心思想就是用該用戶名和數(shù)組中的每一項(xiàng)進(jìn)行比較。,AddUserName函數(shù),它用來(lái)將新用戶添加到在線人員名單中，其中心思想就是將該用戶名添加到數(shù)組中。,DelUserName函數(shù),它用來(lái)刪除一個(gè)用戶。其中心思想就是將該用戶名從數(shù)組中刪除掉，然后它后面的人可以向前移動(dòng)一個(gè)位置。當(dāng)然，如果只有他一人在線，直接將數(shù)組清空即可。,在function.asp中還有三個(gè)函數(shù)是關(guān)于聊天信息字符串的，其中一個(gè)用于添加新發(fā)言，另外兩個(gè)用于添加用戶到來(lái)或離去的說(shuō)明信息。 代碼如下：,（3）Global.asa,該文件主要是用來(lái)規(guī)定Session.TimeOut的時(shí)間，并且當(dāng)會(huì)話結(jié)束時(shí)調(diào)用函數(shù)將用戶從在線人員中刪除，代碼如下：,（4）聊天室首頁(yè)index.asp,首頁(yè)主要提供一個(gè)表單，用戶輸入用戶名后，先在在線人員名單中查找，如果該用戶名可以用，就將其添加到在線人員名單中，并引導(dǎo)至聊天室主頁(yè)面。 要注意，其中的操作主要是調(diào)用function.asp中的函數(shù)實(shí)現(xiàn)的。 代碼如下：,（5）聊天室主頁(yè)面whole.asp,這只是一個(gè)普通的框架文件，其中用來(lái)顯示另外三個(gè)文件，其結(jié)構(gòu)如下圖，代碼此處略。,（6）顯示聊天信息頁(yè)面f1.asp,該頁(yè)面很簡(jiǎn)單，只是讀取Application中的聊天信息并顯示在頁(yè)面上。 要注意它會(huì)調(diào)用配置文件中的常數(shù)conRefresh，默認(rèn)每隔5秒就自動(dòng)刷新頁(yè)面，以顯示最新聊天信息。 另外，因?yàn)楸玖奶焓沂菑纳贤聺L動(dòng)的，為了顯示最下面的聊天信息，需要使用下面的JavaScript語(yǔ)句自動(dòng)滾動(dòng)到最下面。 window.scroll(0,60000); 全部代碼如下：,（7）顯示在線人員名單頁(yè)面f3.asp,該頁(yè)面也很簡(jiǎn)單，就是讀取Application中的在線人員名單數(shù)組，然后利用循環(huán)逐個(gè)顯示在頁(yè)面上而已。 要注意它也會(huì)調(diào)用配置文件中的常數(shù)conRefreshOnline，默認(rèn)每隔60秒就自動(dòng)刷新頁(yè)面，以顯示最新在線人員。 代碼如下：,（8）輸入聊天內(nèi)容頁(yè)面f2.asp,這是聊天室中最主要的文件，用來(lái)輸入發(fā)言，并可以選擇說(shuō)話顏色和表情。下面來(lái)看該頁(yè)面的具體代碼：,12.3 BBS論壇,12.3.1 BBS論壇的總體設(shè)計(jì) 12.3.2 BBS論壇的關(guān)鍵技術(shù) 12.3.3 BBS論壇的具體實(shí)現(xiàn),BBS論壇,BBS又稱電子公告板，它和E-mail應(yīng)該是網(wǎng)上最早流行的欄目，給大家提供了一個(gè)空間，可以自由地抒發(fā)情感、討論問(wèn)題。 BBS的實(shí)現(xiàn)技術(shù)和12.1節(jié)講的留言板本質(zhì)上是一樣的，都是將用戶提交的信息添加到數(shù)據(jù)庫(kù)中。只不過(guò)分成了多個(gè)欄目，并可以回復(fù)。本節(jié)就來(lái)制作一個(gè)功能基本完善的BBS，它的主要頁(yè)面如下圖：,12.3.1 BBS論壇的總體設(shè)計(jì),本示例可以實(shí)現(xiàn)的功能有：分為多個(gè)欄目、發(fā)表新文章、回復(fù)文章、統(tǒng)計(jì)點(diǎn)擊次數(shù)和回復(fù)文章數(shù)、用戶注冊(cè)、登錄和修改信息，主要是體會(huì)BBS的設(shè)計(jì)思想。 本示例從宏觀上來(lái)說(shuō)分為兩個(gè)模塊，一個(gè)是瀏覽、發(fā)表和回復(fù)文章的模塊，主要是關(guān)于BBS文章的；另一個(gè)是用戶管理模塊，主要是關(guān)于BBS注冊(cè)用戶的。 根據(jù)以上要求，本系統(tǒng)包括如下文件。,（1）數(shù)據(jù)庫(kù)文件bbs.mdb,由于涉及論壇欄目信息、文章信息和用戶信息，所以依次建立了tbForum、tbBBS和tbUsers表，結(jié)構(gòu)依次如圖：,除數(shù)據(jù)庫(kù)文件外，還包括其它以下文件： （2）index.asp這是首頁(yè)，其中會(huì)顯示欄目列表，并且 顯示用戶登錄表單。 （3）BBS列表頁(yè)bbs_list.asp其中會(huì)分頁(yè)顯示當(dāng)前欄 目的第1層文章的標(biāo)題。 （4）發(fā)表新文章頁(yè)bbs_insert.asp在其中可以發(fā)表新 文章。 （5）BBS詳細(xì)頁(yè)bbs_particular在BBS列表頁(yè)單擊某 篇文章的超鏈接，就會(huì)打開該文章，其中可以看到所有 回復(fù)文章內(nèi)容，并可以回復(fù)當(dāng)前文章。 （6）回復(fù)文章頁(yè)bbs_reinsert.asp在BBS詳細(xì)頁(yè)下方 的表單中就可以回復(fù)當(dāng)前文章。 （7）用戶注冊(cè)第一步log_register1.asp其中可以注冊(cè) 用戶名和密碼。,（8）用戶注冊(cè)第二步log_register2.asp其中可以填寫 個(gè)人的詳細(xì)信息。 （9）用戶注冊(cè)第三步log_register3.asp其中顯示注冊(cè) 成功的信息。 （10）用戶登錄頁(yè)log_in.asp用戶在其中輸入正確的用 戶名和密碼后就可以登錄BBS，這樣發(fā)表文章時(shí)就會(huì)使 用該用戶名和密碼。如果不登錄，則只能使用“過(guò)客” 的名義發(fā)表文章。 （11）用戶注銷頁(yè)log_out.asp在其中會(huì)將當(dāng)前 Session信息清空。也就表示用戶退出了BBS。 （12）用戶修改密碼頁(yè)log_updatePwd.asp其中可修 改當(dāng)前用戶的密碼。 （13）用戶修改個(gè)人信息頁(yè)log_update.asp其中可修 改個(gè)人的詳細(xì)信息。 （14）odbc_connection.asp、config.asp、 function.asp、bbs.css這些是公共文件，用來(lái)存放數(shù) 據(jù)庫(kù)連接語(yǔ)句、幾個(gè)常量、函數(shù)和CSS樣式。,12.3.2 BBS論壇的關(guān)鍵技術(shù),該BBS中涉及到如下關(guān)鍵技術(shù) ： （1）復(fù)雜數(shù)據(jù)庫(kù)設(shè)計(jì) 在之前的例子中，通常只用到了一張數(shù)據(jù)表，但是在大型程序中，通常會(huì)用到許多數(shù)據(jù)表。因此請(qǐng)大家在本示例中要體會(huì)如何使用多張表。比如在發(fā)表新文章時(shí)，除了更新tbBBS表外，還要同時(shí)更新tbForum和tbUsers表。 （2）數(shù)據(jù)分頁(yè)顯示的綜合處理技術(shù) 不僅要實(shí)現(xiàn)分頁(yè)，還要在點(diǎn)擊查看詳細(xì)頁(yè)后，能夠準(zhǔn)確返回先前所在頁(yè)，這就需要在URL后面?zhèn)鬟f論壇欄目編號(hào)和頁(yè)碼參數(shù)。 （3）用戶管理技術(shù) 本示例用戶可以在線注冊(cè)，填寫個(gè)人信息。 然后用戶可以登錄，登錄后將用戶名和E-mail保存到Session中，然后用戶在發(fā)表文章時(shí)就可以用該用戶名了。 用戶登錄后，自然可以隨時(shí)修改個(gè)人信息和密碼；如果用戶不登錄，則可以使用“過(guò)客”的名義發(fā)表文章。 用戶注銷時(shí)，將Session清空即可。,12.3.3 BBS論壇的具體實(shí)現(xiàn),本示例文件較多，下面扼要講解主要內(nèi)容，請(qǐng)大家結(jié)合源文件中的注釋仔細(xì)體會(huì)。 （1）數(shù)據(jù)庫(kù)文件bbs.mdb、數(shù)據(jù)庫(kù)連接文件odbc_connection.asp、配置文件config.asp、函數(shù)文件function.asp、樣式文件bbs.css 這幾個(gè)文件類似于12.1節(jié)的留言板示例，不過(guò)要注意function.asp中的函數(shù)PersonalInfo，它將某用戶的信息返回到一個(gè)數(shù)組中，這樣可以在需要的時(shí)候方便地調(diào)用。,（2）BBS首頁(yè) index.asp,該頁(yè)面比較簡(jiǎn)單，主要是利用循環(huán)顯示所有欄目的超鏈接，單擊超鏈接就可以進(jìn)入相應(yīng)的欄目。 該頁(yè)面中還會(huì)顯示用戶登錄的表單，要注意這里使用了判斷語(yǔ)句。如果用戶未登錄，則顯示登錄表單和注冊(cè)按鈕；如果已經(jīng)登錄，則顯示退出登錄、修改個(gè)人信息、修改個(gè)人密碼的超鏈接。 代碼如下：,（3）BBS列表頁(yè) bbs_list.asp,在首頁(yè)index.asp單擊某欄目的超鏈接，就可以進(jìn)入BBS列表頁(yè)，其中會(huì)按發(fā)表文章時(shí)間倒序并分頁(yè)顯示該欄目的文章，不過(guò)只顯示第1層主題文章，不顯示第2層回復(fù)文章。 要注意兩個(gè)特殊的變量intForumId和intPage，前者用來(lái)確定顯示哪個(gè)欄目，后者用來(lái)確定顯示哪一頁(yè)？這兩個(gè)變量在不同的頁(yè)面之間都要始終記得被傳遞。 在兩種情況下intPage要設(shè)為1；第一就是從首頁(yè)打開本欄目時(shí)，第二是發(fā)表新文章后， 這樣可以確保馬上看到新發(fā)表的文章。 代碼主體部分如下：,（4）發(fā)表新文章頁(yè) bbs_insert.asp,這其實(shí)就是一個(gè)普通的添加記錄的頁(yè)面，在添加文章時(shí)，和留言板示例一樣，可以添加不完整的記錄。添加文章后，還需要更新另外兩個(gè)表，以便更新該欄目文章數(shù)目和該用戶發(fā)表文章數(shù)目。下面只列出其中部分代碼。,（5）BBS詳細(xì)頁(yè) bbs_particular.asp,單擊某一篇文章的主題，就可以進(jìn)入該文章的詳細(xì)頁(yè)。其中首先根據(jù)傳遞過(guò)來(lái)的文章ID，將本文章的點(diǎn)擊數(shù)增加1。 之后將文章及回復(fù)文章全部列出來(lái)。其中顯示記錄時(shí)略微復(fù)雜一些，每一條記錄用2行2列的表格顯示，其中顯示關(guān)于文章和作者的一些信息。在顯示作者個(gè)人信息時(shí)，會(huì)調(diào)用config.asp中的函數(shù)，獲取個(gè)人信息數(shù)組。 在本頁(yè)面下方，還會(huì)顯示一個(gè)回復(fù)表單，用戶在其中輸入內(nèi)容后，就提交到bbs_reinsert.asp中去執(zhí)行回復(fù)操作。 另外，還要注意回復(fù)表單中，會(huì)將幾個(gè)重要的變量用隱藏文本框傳遞過(guò)去。 主要代碼如下：,（6）回復(fù)文章頁(yè) bbs_reinsert.asp,當(dāng)在bbs_particular.asp中提交回復(fù)表單后，就會(huì)打開本頁(yè)面。其中就是添加一條記錄，并且更新相關(guān)的表。 其中添加記錄的語(yǔ)句和bbs_insert.asp中是非常相似的，不過(guò)要注意回復(fù)文章需要填寫正確的父文章ID。 因?yàn)榛貜?fù)文章并返回BBS列表頁(yè)時(shí)，一般希望還顯示原來(lái)的數(shù)據(jù)頁(yè)，所以最后要將intForumId和intPage都傳遞回去 代碼如下：,（7）用戶注冊(cè)文件1,用戶注冊(cè)過(guò)程實(shí)際上就是在tbUsers表中增加了一條記錄，本示例將其分為了三步。 在log_register1.asp中要注冊(cè)用戶名和密碼，其中首先要注意會(huì)使用客戶端JavaScript驗(yàn)證使得輸入的用戶名和密碼符合要求，其次要注意添加記錄前要判斷該用戶名是否已經(jīng)存在。下面列出其主要代碼。,用戶注冊(cè)文件（2）,注冊(cè)用戶名和密碼后，就會(huì)打開log_register2.asp，其中讓用戶填寫個(gè)人的詳細(xì)信息，提交表單后，就利用Update語(yǔ)句更新信息。下面來(lái)看其中的主要代碼。,（8）用戶登錄和