云上運維及應用實踐教程（第2版） 教案 12 項目四 任務4會員注冊功能后臺ASP網頁制作

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