云上運(yùn)維及應(yīng)用實(shí)踐教程（第2版） 教案 9 項(xiàng)目四 會(huì)員注冊(cè)前臺(tái)頁(yè)面的制作、會(huì)員登錄前臺(tái)頁(yè)面的制作

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