云上運(yùn)維及應(yīng)用實(shí)踐教程（第2版） 教案 12 項(xiàng)目四 任務(wù)4會(huì)員注冊(cè)功能后臺(tái)ASP網(wǎng)頁(yè)制作

教案序號(hào)：.課題項(xiàng)目四任務(wù)4會(huì)員注冊(cè)功能后臺(tái)ASP網(wǎng)頁(yè)制作任務(wù)5會(huì)員登錄功能后臺(tái)ASP網(wǎng)頁(yè)制作授課形式√理論□理實(shí)一體□實(shí)訓(xùn)(驗(yàn))□其它：學(xué)時(shí)安排本單元總學(xué)時(shí)：2（其中：理論2學(xué)時(shí)、實(shí)踐學(xué)時(shí)）教學(xué)內(nèi)容及目標(biāo)掌握注冊(cè)登錄功能相關(guān)數(shù)據(jù)表的設(shè)計(jì)了解電子商務(wù)網(wǎng)站用戶登錄驗(yàn)證系統(tǒng)設(shè)計(jì)過(guò)程中的要點(diǎn)。教學(xué)重點(diǎn)及難點(diǎn)重點(diǎn)、難點(diǎn)：注冊(cè)、登錄功能數(shù)據(jù)表的設(shè)計(jì)。授課對(duì)象學(xué)情分析學(xué)生接觸網(wǎng)站建設(shè)的相關(guān)內(nèi)容時(shí)間不長(zhǎng)，雖然有網(wǎng)頁(yè)制作的基礎(chǔ)，但基礎(chǔ)較差，需要在講授過(guò)程中，教師進(jìn)行巡回指導(dǎo)或同學(xué)間小組討論。教學(xué)媒介機(jī)房授課地點(diǎn)5405一、課前回顧：1、注冊(cè)功能前臺(tái)設(shè)計(jì)中應(yīng)該注意的問(wèn)題？二、新課內(nèi)容：項(xiàng)目四任務(wù)4會(huì)員注冊(cè)功能后臺(tái)ASP網(wǎng)頁(yè)制作任務(wù)5會(huì)員登錄功能后臺(tái)ASP網(wǎng)頁(yè)制作任務(wù)4會(huì)員登錄注冊(cè)功能數(shù)據(jù)庫(kù)的設(shè)計(jì)一、任務(wù)引出會(huì)員登錄模塊是會(huì)員進(jìn)入會(huì)員管理系統(tǒng)的入口，只有登錄的會(huì)員才有管理網(wǎng)站的功能。會(huì)員登錄主要通過(guò)判斷用戶輸入的會(huì)員名和密碼是否與數(shù)據(jù)庫(kù)中的會(huì)員名和密碼相等來(lái)實(shí)現(xiàn)，相等則登錄成功，如果不相等，則彈出提示信息?，F(xiàn)在許多網(wǎng)站在登錄頁(yè)面中利用驗(yàn)證碼技術(shù)，阻止一些非法的操作。在本任務(wù)中，將為“諸暨市吉爾特機(jī)械有限公司”網(wǎng)站完成用戶登錄功能的頁(yè)面制作，以方便用戶的管理操作。二、任務(wù)預(yù)覽打開并運(yùn)行站點(diǎn)文件夾里登錄頁(yè)面文件“l(fā)ogin.asp”?？梢钥吹?，登錄頁(yè)面中主要包含“賬號(hào)”、“密碼”和“驗(yàn)證碼”這些內(nèi)容。網(wǎng)頁(yè)具體的預(yù)覽效果如圖所示。當(dāng)管理員要登錄時(shí)，分別在“賬號(hào)”、“密碼”和“驗(yàn)證碼”所對(duì)應(yīng)的文本框中輸入相應(yīng)的信息，點(diǎn)擊登錄按鈕時(shí)，如果所輸入的信息與數(shù)據(jù)庫(kù)中已經(jīng)存在的帳號(hào)和密碼相一致的話，便可以成功地登錄到網(wǎng)站中去，登錄成功的頁(yè)面，預(yù)覽效果如圖所示。如果所輸入的信息與數(shù)據(jù)庫(kù)中已經(jīng)存在的帳號(hào)和密碼不一致的話，便會(huì)給出登錄失敗的提示信息，具體效果如圖4-8所示。圖“諸暨市吉爾特機(jī)械有限公司”網(wǎng)站管理登錄界面圖網(wǎng)站管理登錄成功界面圖登錄失敗時(shí)所彈出的信息框三、實(shí)踐操作1、用戶登錄頁(yè)面的制作在Dreamweaver環(huán)境下，選擇【文件】→【新建命令】，創(chuàng)建ASPVBScript頁(yè)面，并將網(wǎng)頁(yè)保存為“l(fā)ogin.asp”。具體的制作效果如圖所示。圖用戶登錄界面選中“帳號(hào)”字段所對(duì)應(yīng)的文本框，命名為“username”；選中“密碼”字段所對(duì)應(yīng)的文本框，將其命名為“password”；選中“驗(yàn)證碼”字段所對(duì)應(yīng)的文本框，將其命名為“verifycode”，并在該文本框后面新建“<img>”標(biāo)簽，并將其源文件設(shè)置為“code.asp”，如圖所示，“code.asp”中的代碼將在下面的內(nèi)容中講到。圖4-10驗(yàn)證碼顯示功能設(shè)置添加表單，使表單的開始標(biāo)簽與結(jié)束標(biāo)簽包圍整個(gè)會(huì)員登錄模塊。同時(shí)選中表單“form”，將表單的“action”屬性設(shè)置為“l(fā)ogin1.asp”，“method”屬性設(shè)置為“post”，具體如下圖所示。圖4-11表單動(dòng)作定義界面2、設(shè)計(jì)驗(yàn)證碼顯示功能“code.asp”中的代碼“code.asp”中的代碼主要功能是當(dāng)網(wǎng)頁(yè)刷新的時(shí)候，實(shí)現(xiàn)隨機(jī)出現(xiàn)四位數(shù)的驗(yàn)證碼的功能。3、設(shè)計(jì)登錄功能后臺(tái)處理頁(yè)面“l(fā)ogin1.asp”利用前面的模板，登錄信息后臺(tái)處理頁(yè)面“l(fā)ogin1.asp”，設(shè)計(jì)如圖所示。圖登錄功能后臺(tái)頁(yè)面設(shè)計(jì)4、登錄功能實(shí)現(xiàn)的后臺(tái)處理代碼會(huì)員登錄主要通過(guò)判斷用戶輸入的會(huì)員名和密碼是否與數(shù)據(jù)庫(kù)中的會(huì)員名和密碼相等來(lái)實(shí)現(xiàn)，相等則登錄成功，如果不相等，則彈出提示信息。具體功能實(shí)現(xiàn)的過(guò)程如下：①首先必須連接數(shù)據(jù)庫(kù)，調(diào)用連接數(shù)據(jù)庫(kù)的語(yǔ)句：<!--#includefile="conn.asp"-->②用戶登錄功能實(shí)現(xiàn)的ASP代碼：<%username=replace(request.form("username"),"'","")'收集“username”文本框中的信息password=replace(request.form("password"),"'","")'收集“password”文本框中的信息ifusername=""andpassword=""then'檢查“username”和“password”的值是否為空response.Write"<scriptLANGUAGE='javascript'>alert('您的管理ID或密碼有誤！');history.go(-1);</script>"response.endendififcstr(session("getcode"))<>cstr(trim(request("verifycode")))then'檢查驗(yàn)證碼輸入是否正確response.Write"<scriptLANGUAGE='javascript'>alert('請(qǐng)輸入正確的驗(yàn)證碼！');history.go(-1);</script>"response.endendifsetrs=server.CreateObject("adodb.recordset")sql="select*frommenberwhereusername='"&username&"'andpassword='"&password&"'"rs.opensql,connifrs.eofandrs.bofthenresponse.Write"<scriptLANGUAGE='javascript'>alert('登陸失??！');history.go(-1);</script>"response.endsession("username")=username'Session變量的定義session("grade")=rs("grade")rs.closesetrs=nothingendif%>5、保存網(wǎng)頁(yè)進(jìn)行預(yù)覽測(cè)試在預(yù)覽測(cè)試之前，打開“webdata.mdb”的數(shù)據(jù)庫(kù)，打開“member”數(shù)據(jù)表，手動(dòng)添加一個(gè)管理員賬戶的信息，然后進(jìn)行管理員登錄過(guò)程的驗(yàn)證。具體測(cè)試的效果如圖所示。四、小結(jié)用戶登錄驗(yàn)證系統(tǒng)是企業(yè)電子商務(wù)網(wǎng)站最最常見(jiàn)的功能模塊之一。學(xué)生要重點(diǎn)掌握用戶登錄的整個(gè)流程，并掌握用戶登錄界面與后臺(tái)登錄成功頁(yè)面