云上運維及應(yīng)用實踐教程（第2版） 教案 9 項目四 會員注冊前臺頁面的制作、會員登錄前臺頁面的制作

教案序號：.課題項目四任務(wù)4.1-4.2會員注冊前臺頁面的制作、會員登錄前臺頁面的制作授課形式√理論□理實一體□實訓(xùn)(驗)□其它：學(xué)時安排本單元總學(xué)時：2（其中：理論2學(xué)時、實踐學(xué)時）教學(xué)內(nèi)容及目標掌握注冊、登錄功能模塊前臺頁面了解電子商務(wù)網(wǎng)站用戶登錄驗證系統(tǒng)設(shè)計過程中的要點。教學(xué)重點及難點重點、難點：注冊、登錄功能設(shè)計過程中相關(guān)頁面的布局。授課對象學(xué)情分析學(xué)生接觸網(wǎng)站建設(shè)的相關(guān)內(nèi)容時間不長，雖然有網(wǎng)頁制作的基礎(chǔ)，但基礎(chǔ)較差，需要在講授過程中，教師進行巡回指導(dǎo)或同學(xué)間小組討論。教學(xué)媒介機房授課地點5405一、課前回顧：1、網(wǎng)絡(luò)數(shù)據(jù)庫鏈接的方法？二、新課內(nèi)容：項目四任務(wù)1會員注冊前臺頁面的制作任務(wù)2會員登錄前臺頁面的制作任務(wù)1會員注冊前臺頁面的制作一、任務(wù)引出會員注冊功能是商務(wù)網(wǎng)站中必不可少的功能之一，該功能主要是幫助瀏覽者成功地注冊成網(wǎng)站會員，為以后開展相關(guān)的商務(wù)活動作準備。在本任務(wù)中，將要來完成諸暨市吉爾特機械有限公司注冊功能模塊前臺頁面、后臺頁面的制作以及相關(guān)數(shù)據(jù)表的設(shè)計，成功實現(xiàn)用戶注冊的功能。二、任務(wù)預(yù)覽三、實踐操作1、設(shè)計用戶注冊信息提交頁面在Dreamweaver環(huán)境下，打開“webdesign”動態(tài)站點文件“index.asp”（實訓(xùn)二里面已經(jīng)完成的“index.asp”），選擇【文件】→【另存為】命令，將網(wǎng)頁另存為“register.asp”。然后將“register.asp”頁面中的主體內(nèi)容稍作設(shè)計。選中“會員賬號”字段所對應(yīng)的文本框，命名為“username”；選中“密碼”字段所對應(yīng)的文本框，將其命名為“password”；選中“密碼確認”字段所對應(yīng)的文本框，將其命名為“passwordchk”；選中“電子郵件”字段所對應(yīng)的文本框，將其命名為“email”；選中“真實姓名”字段所對應(yīng)的文本框，將其命名為“realname”；選中“性別”字段所對應(yīng)的單元按鈕，將其命名為“sex”；選中“出生年月”字段所對應(yīng)的下拉菜單，將“年”字段所下拉菜單命名為“year”，將“月”字段所下拉菜單命名為“month”，將“日”字段所下拉菜單命名為“date”；選中“最高學(xué)歷”字段所對應(yīng)的下拉菜單，將其命名為“edu”；選中“所在省份”字段所對應(yīng)的下拉菜單，將其命名為“address”；選中“聯(lián)系電話”字段所對應(yīng)的文本框，將其命名為“phone”。添加表單，使表單的開始標簽與結(jié)束標簽包圍整個會員注冊模塊。同時選中表單“form”，將表單的“action”屬性設(shè)置為“register1.asp”，“method”屬性設(shè)置為“post”。公司注冊頁面表單動作定義界面2、設(shè)計用戶注冊信息提交處理頁面利用前面的模板，設(shè)計會員注冊信息后臺處理頁面“register1.asp”，具體設(shè)計制作效果?！癛egister1.asp”是會員注冊信息后臺處理界面，該網(wǎng)頁中將注冊信息寫入到數(shù)據(jù)庫中的技術(shù)實現(xiàn)代碼如下。任務(wù)2會員登錄前臺頁面的制作一、任務(wù)引出會員登錄模塊是會員進入會員管理系統(tǒng)的入口，只有登錄的會員才有管理網(wǎng)站的功能。會員登錄主要通過判斷用戶輸入的會員名和密碼是否與數(shù)據(jù)庫中的會員名和密碼相等來實現(xiàn)，相等則登錄成功，如果不相等，則彈出提示信息?，F(xiàn)在許多網(wǎng)站在登錄頁面中利用驗證碼技術(shù)，阻止一些非法的操作。在本任務(wù)中，將為“諸暨市吉爾特機械有限公司”網(wǎng)站完成用戶登錄功能的頁面制作，以方便用戶的管理操作。二、作品預(yù)覽打開并運行站點文件夾里登錄頁面文件“l(fā)ogin.asp”?？梢钥吹?，登錄頁面中主要包含“賬號”、“密碼”和“驗證碼”這些內(nèi)容。當(dāng)管理員要登錄時，分別在“賬號”、“密碼”和“驗證碼”所對應(yīng)的文本框中輸入相應(yīng)的信息，點擊登錄按鈕時，如果所輸入的信息與數(shù)據(jù)庫中已經(jīng)存在的帳號和密碼相一致的話，便可以成功地登錄到網(wǎng)站中去，登錄成功的頁面。如果所輸入的信息與數(shù)據(jù)庫中已經(jīng)存在的帳號和密碼不一致的話，便會給出登錄失敗的提示信息。網(wǎng)站管理登錄界面登錄成功界面錄失敗時所彈出的信息框三、實踐操作1、用戶登錄頁面的制作在Dreamweaver環(huán)境下，選擇【文件】→【新建命令】，創(chuàng)建ASPVBScript頁面，并將網(wǎng)頁保存為“l(fā)ogin.asp”。。選中“帳號”字段所對應(yīng)的文本框，命名為“username”；選中“密碼”字段所對應(yīng)的文本框，將其命名為“password”；選中“驗證碼”字段所對應(yīng)的文本框，將其命名為“verifycode”，并在該文本框后面新建“<img>”標簽，并將其源文件設(shè)置為“code.asp”，“code.asp”中的代碼將在下面的內(nèi)容中講到。添加表單，使表單的開始標簽與結(jié)束標簽包圍整個會員登錄模塊。同時選中表單“form”，將表單的“action”屬性設(shè)置為“l(fā)ogin1.asp”，“method”屬性設(shè)置為“post”。2、設(shè)計登錄功能后臺處理頁面“l(fā)ogin1.asp”利用前面的模板，登錄信息后臺處理頁面“l(fā)ogin1.asp”。四、小結(jié)會員注冊登錄功能是商務(wù)網(wǎng)站中必不可少的功能之一，該功能主要是