PHP網(wǎng)站開(kāi)發(fā)項(xiàng)目式教程（微課版）（第2版）任務(wù)6 實(shí)現(xiàn)163郵箱登錄功能

PHP網(wǎng)站開(kāi)發(fā)項(xiàng)目式教程（微課版）（第2版）任務(wù)6實(shí)現(xiàn)163郵箱登錄功能任務(wù)6-1設(shè)計(jì)登錄界面

需要解決的核心問(wèn)題“賬號(hào)或者密碼錯(cuò)誤，請(qǐng)重新輸入”提示信息的初始樣式效果如何？該信息何時(shí)顯示？怎樣顯示？如何設(shè)計(jì)包含用戶名登錄和手機(jī)號(hào)登錄兩個(gè)選項(xiàng)卡的登錄界面？如何實(shí)現(xiàn)選項(xiàng)卡的顯示與隱藏功能？

本任務(wù)提供了兩種登錄界面的設(shè)計(jì)方案：第一種是只能以用戶名和密碼登錄的普通登錄界面；第二種是能夠選擇以用戶名登錄或手機(jī)號(hào)登錄的Tab選項(xiàng)卡式登錄界面。6.1.1設(shè)計(jì)普通登錄界面

本任務(wù)將創(chuàng)建頁(yè)面文件denglu.html，設(shè)計(jì)圖6-1所示的普通登錄界面。

若輸入的用戶名或者密碼有問(wèn)題，則無(wú)法正常登錄，會(huì)顯示圖6-2所示的界面。圖6-1

普通登錄界面

圖6-2登錄失敗之后的界面1．界面布局及樣式要求

登錄界面中需要使用的盒子及盒子的排列關(guān)系如圖6-3所示。

各個(gè)盒子的內(nèi)容及樣式要求如下。（1）類選擇符.divw的樣式要求。

寬度為370px，高度為200px，上填充為50px，其余填充為0，上下邊距為0，左右邊距為auto（設(shè)置盒子在瀏覽器窗口中居中），邊框?yàn)?px、藍(lán)色實(shí)線。圖6-3

登錄界面中使用的盒子的布局關(guān)系

元素<divclass="divw">中包含上下兩個(gè)div，上面div的內(nèi)容是設(shè)置了賬號(hào)或者密碼輸入錯(cuò)誤時(shí)要顯示的錯(cuò)誤提示信息，使用ID選擇符#errormsg定義；下面的div用于存放表單元素，使用ID選擇符#cont定義。（2）ID選擇符#errormsg的樣式要求。

寬度為200px，高度為40px，填充為0，上下邊距為0，左右邊距為auto（設(shè)置div在父元素<divclass="divw">中水平居中對(duì)齊），div的初始狀態(tài)為隱藏，div中的文本字號(hào)為10pt，文本行高為40px，文本顏色為紅色。（3）ID選擇符#cont的樣式要求。

寬度為300px，高度為160px，填充為0，上下邊距為0，左右邊距為auto，div中的文本字體為Calibri（使用該字體是為了保證在各種不同的瀏覽器中，4個(gè)空格占用的寬度都能等同于一個(gè)漢字占用的寬度），字號(hào)為10pt。

在元素<divid="cont">內(nèi)部使用段落標(biāo)簽控制表單元素的布局（也可以使用表格單元格控制布局），采用包含選擇符#contp定義段落標(biāo)簽的樣式為：上下邊距為25px，左右邊距為0。2．表單元素要求

頁(yè)面中需要定義的表單元素有4個(gè)，4個(gè)元素使用3對(duì)段落標(biāo)簽來(lái)控制，各個(gè)表單元素的name、id及樣式要求如下。

“用戶名”文本框的name和id都定義為emailaddr，樣式要求為：寬度為180px，高度為16px，上下填充為2px，左右填充為0，邊框?yàn)?px、#aaf顏色的實(shí)線。

“密碼”輸入框的name和id都定義為psd，樣式要求為：寬度為180px，高度為16px，上下填充為2px，左右填充為0，邊框?yàn)?px、#aaf顏色的實(shí)線。

“登錄”按鈕的類型是submit，單擊“登錄”按鈕提交數(shù)據(jù)之后，將執(zhí)行文件denglu.php來(lái)獲取并處理登錄信息。

“注冊(cè)”按鈕的類型是button，是普通按鈕，“注冊(cè)”按鈕被單擊之后，將打開(kāi)zhuce.html頁(yè)面進(jìn)行用戶注冊(cè)。需

要在生成按鈕的<input>標(biāo)簽內(nèi)部使用代碼onclick="window.

open('zhuce.html');"實(shí)現(xiàn)。

代碼window.open('zhuce.html')的作用是使用window.open()函數(shù)在新窗口中打開(kāi)并運(yùn)行頁(yè)面文件zhuce.html。

所有表單元素邊框都是圓角邊框，圓角半徑為5px。3．樣式代碼4．頁(yè)面代碼6.1.2設(shè)計(jì)Tab選項(xiàng)卡式登錄界面

創(chuàng)建denglu-tab.html文件，設(shè)計(jì)圖6-4所示的登錄界面。

在圖6-4所示界面中單擊“手機(jī)號(hào)登錄”選項(xiàng)卡，顯示圖6-5所示的界面。圖6-4

Tab選項(xiàng)卡式用戶名登錄界面

圖6-5Tab選項(xiàng)卡式手機(jī)號(hào)登錄界面

在圖6-5所示界面中單擊“用戶名登錄”選項(xiàng)卡，回到圖6-4所示的界面。

在圖6-4所示界面中，若輸入的賬號(hào)或者密碼錯(cuò)誤，則彈出圖6-6所示的界面。圖6-6

賬號(hào)或者密碼錯(cuò)誤提示信息顯示界面1．關(guān)于Tab選項(xiàng)卡

Tab是一個(gè)常見(jiàn)的交互元素，用戶通過(guò)鼠標(biāo)單擊或?qū)⑹髽?biāo)指針指向內(nèi)容區(qū)對(duì)應(yīng)的標(biāo)簽，來(lái)請(qǐng)求顯示該內(nèi)容區(qū)。

Web界面的設(shè)計(jì)趨勢(shì)是縮短頁(yè)面長(zhǎng)度，降低信息的顯示密度，但又不能“犧牲”可視的信息量。在這種趨勢(shì)下，應(yīng)用Tab交互元素成了越來(lái)越普遍的應(yīng)用方法。

Tab選項(xiàng)卡結(jié)構(gòu)包括上下兩層：上層為選項(xiàng)卡區(qū)，選項(xiàng)卡有選中和未選中兩種狀態(tài)，選中狀態(tài)通常以亮色顯示，當(dāng)鼠標(biāo)指針被移動(dòng)到選項(xiàng)卡上時(shí)最好顯示手狀指針以提示用戶；下層為內(nèi)容區(qū)（是重疊區(qū)域），內(nèi)容區(qū)中的內(nèi)容根據(jù)選中的選項(xiàng)卡而變化。

選項(xiàng)卡的文字標(biāo)識(shí)必須能準(zhǔn)確描述出它對(duì)應(yīng)的內(nèi)容區(qū)的信息特征；選項(xiàng)卡與其對(duì)應(yīng)的內(nèi)容看上去是一個(gè)整體。

選項(xiàng)卡區(qū)設(shè)計(jì)：選項(xiàng)卡區(qū)中的多個(gè)選項(xiàng)卡使用超鏈接元素進(jìn)行設(shè)計(jì)，超鏈接元素需要定義為浮動(dòng)塊元素，超鏈接元素的個(gè)數(shù)由選項(xiàng)卡的個(gè)數(shù)來(lái)決定，多個(gè)超鏈接元素中只有一個(gè)是亮色的。

內(nèi)容區(qū)設(shè)計(jì)：每個(gè)選項(xiàng)卡都對(duì)應(yīng)自己獨(dú)特的內(nèi)容，因此重疊的內(nèi)容區(qū)個(gè)數(shù)由選項(xiàng)卡個(gè)數(shù)來(lái)決定。2．界面布局及樣式要求

頁(yè)面使用的所有div元素的布局關(guān)系如圖6-7所示。圖6-7

使用Tab選項(xiàng)卡的登錄界面布局

外圍層使用類選擇符.divw定義，樣式要求為：寬度為371px，高度為270px，填充為0，上下邊距為0，左右邊距為auto，邊框?yàn)?px、藍(lán)色實(shí)線。

圖6-7中的ID選擇符#tab表示選項(xiàng)卡區(qū)，類選擇符.contdiv表示內(nèi)容區(qū)。（1）選項(xiàng)卡區(qū)的設(shè)計(jì)要求。

選項(xiàng)卡區(qū)使用#tab定義，樣式要求為：寬度為371px，高度為40px，填充為0，邊距為0。

選項(xiàng)卡區(qū)內(nèi)部使用塊元素形式的超鏈接元素，超鏈接元素的樣式要求為：寬度為185px，高度為40px，填充為0，邊距為0，向左浮動(dòng)，文本字號(hào)為14pt，文本顏色為黑色，文本居中，文本行高為40px，無(wú)下畫線。

兩個(gè)選項(xiàng)卡中，右側(cè)選項(xiàng)卡需要使用左邊框、下邊框和#ccf顏色的背景，使用類選擇符.tab2定義；左側(cè)選項(xiàng)卡需要使用右邊框、下邊框和#ccf顏色的背景，使用類選擇符.tab1定義。

若選中左側(cè)選項(xiàng)卡，第一個(gè)超鏈接元素a不應(yīng)用任何樣式，第二個(gè)超鏈接元素a應(yīng)用類選擇符.tab2設(shè)置的暗色的左邊框和下邊框效果，如圖6-4所示；若選中右側(cè)選項(xiàng)卡，則第二個(gè)超鏈接元素a不應(yīng)用任何樣式，第一個(gè)超鏈接元素a應(yīng)用類選擇符.tab1設(shè)置的暗色的右邊框和下邊框效果，如圖6-5所示。（2）內(nèi)容區(qū)的設(shè)計(jì)要求。

內(nèi)容區(qū)使用類選擇符.contdiv定義，樣式要求為：寬度為330px，高度為160px，填充為0，上邊距為10px，下邊距為0，左右邊距為auto。

內(nèi)容區(qū)包含一個(gè)登錄賬號(hào)和密碼錯(cuò)誤的提示信息層和需要切換的兩個(gè)內(nèi)容層。

登錄賬號(hào)和密碼錯(cuò)誤的提示信息層用ID選擇符#errormsg定義，樣式要求為：寬度為200px，高度為40px，填充為0，上下邊距為0，左右邊距為auto，初始狀態(tài)為隱藏，div中的文本字號(hào)為10pt，文本行高為40px，文本顏色為紅色。

兩個(gè)內(nèi)容層分別使用ID選擇符#cont1和#cont2定義，二者共同的樣式要求為：寬度為330px，高度為160px，填充為0，上下邊距為0，左右邊距為auto。

#cont1初始狀態(tài)顯示，#cont2初始狀態(tài)隱藏。

元素<divid="cont1">內(nèi)部包含4個(gè)表單元素，第1個(gè)元素是“用戶名”文本框，name和id都是emailaddr；第2個(gè)元素是“密碼”輸入框，name和id都是psd；第3個(gè)元素是“登錄”按鈕，類名為sbt；第4個(gè)元素是“注冊(cè)”按鈕，類名為btn。

“用戶名”文本框樣式使用ID選擇符#emailaddr定義，“密碼”輸入框樣式使用ID選擇符#psd定義，兩者的樣式要求相同：寬度為180px，高度為16px，上下填充為2px，左右填充為0，邊框?yàn)?px、#aaf顏色的實(shí)線，邊框圓角半徑為5px，元素外圍線框無(wú)（outline:none）。

“登錄”按鈕使用類選擇符.sbt定義樣式，“注冊(cè)”按鈕使用類選擇符.btn定義樣式，兩者樣式相同：寬度為100px，高度為30px，圓角半徑為5px的邊框。

元素<divid="cont2">內(nèi)部包含4個(gè)表單元素：第1個(gè)元素是“手機(jī)號(hào)”文本框，name和id都是phoneno；第2個(gè)元素是“密碼”輸入框，name和id都是psd；第3個(gè)元素是“登錄”按鈕，類名為sbt；第4個(gè)元素是“注冊(cè)”按鈕，類名為btn。其中“手機(jī)號(hào)”文本框使用ID選擇符#phoneno定義樣式，樣式要求與#emailaddr和#psd的相同。

表單元素使用段落排列，段落上下邊距為25px，左右邊距為0，文本字體為Calibri，字號(hào)為10pt。3．樣式代碼4．頁(yè)面文件代碼5．腳本部分功能實(shí)現(xiàn)

Tab選項(xiàng)卡中的每個(gè)選項(xiàng)卡在需要時(shí)都可以通過(guò)單擊操作來(lái)選擇，也可以設(shè)置為鼠標(biāo)指針指向時(shí)選擇，被選中的選項(xiàng)卡要顯示為亮色效果，與其關(guān)聯(lián)的內(nèi)容區(qū)要同時(shí)顯示，而原來(lái)為亮色的選項(xiàng)卡要設(shè)置為暗色帶邊框的效果，與其關(guān)聯(lián)的內(nèi)容區(qū)要同時(shí)隱藏。任務(wù)6-2實(shí)現(xiàn)登錄功能

需要解決的核心問(wèn)題服務(wù)器端如何判斷用戶輸入的賬號(hào)和密碼是否正確？若錯(cuò)誤，如何返回登錄界面并顯示錯(cuò)誤提示信息？若正確，如何進(jìn)入郵箱主窗口界面？如何使用sprintf()函數(shù)格式化實(shí)現(xiàn)登錄操作的SQL語(yǔ)句？這樣做的意義是什么？

登錄功能是指系統(tǒng)將用戶登錄時(shí)輸入的賬號(hào)、密碼信息提交給服務(wù)器，并判斷其正確性，然后確定是否能夠成功登錄，若不能成功登錄，則給予用戶相應(yīng)的提示。

本任務(wù)將創(chuàng)建文件denglu.php實(shí)現(xiàn)登錄功能。6.2.1創(chuàng)建denglu.php文件

創(chuàng)建denglu.php文件，實(shí)現(xiàn)如下功能。（1）獲取denglu.html頁(yè)面中用戶提交的賬號(hào)和密碼信息，并將賬號(hào)信息保存到$_SESSION系統(tǒng)數(shù)組中，這是因?yàn)樵谕瓿傻卿浿?，打開(kāi)寫郵件頁(yè)面文件writeemail.php或者收郵件頁(yè)面文件receiveemail.php時(shí)，都需要在相應(yīng)頁(yè)面中使用該賬號(hào)信息：當(dāng)用戶要發(fā)送郵件時(shí)，將該賬號(hào)信息直接作為發(fā)件人信息使用；當(dāng)用戶接收郵件時(shí)，將該賬號(hào)信息作為收件人信息使用。因此必須在登錄完成時(shí)，將賬號(hào)信息保存到系統(tǒng)數(shù)組$_SESSION中。（2）連接打開(kāi)email數(shù)據(jù)庫(kù)，在usermsg表中查詢是否存在相應(yīng)的賬號(hào)和密碼，如果不存在，則使用include"denglu.html"包含文件的方式重新運(yùn)行denglu.html文件，使用echo語(yǔ)句輸出腳本代碼，顯示id為errormsg的錯(cuò)誤提示信息層。（3）如果存在相應(yīng)的賬號(hào)和密碼，則使用include包含文件email.php，打開(kāi)郵箱主窗口界面，準(zhǔn)備編輯、發(fā)送或者接收、閱讀郵件（登錄之前，可先創(chuàng)建一個(gè)簡(jiǎn)單的email.php文件，以方便觀察運(yùn)行效果）。6.2.2解決SQL注入的問(wèn)題

運(yùn)行denglu.html文件，輸入未經(jīng)注冊(cè)的賬號(hào)和密碼字符串“wang'or'a'='a”可以成功登錄，這一問(wèn)題在5.3.5小節(jié)中解釋過(guò)，這就是SQL注入成功的現(xiàn)象，SQL注入成功之后，惡意用戶可以使用這樣的賬號(hào)生成大量的垃圾郵件。

如果在注冊(cè)時(shí)已經(jīng)使用md5()對(duì)密碼進(jìn)行加密處理，則在denglu.php文件中也必須使用md5()函數(shù)對(duì)用戶輸入的密碼進(jìn)行加密處理，這樣才能與數(shù)據(jù)庫(kù)中存儲(chǔ)的加密后的密碼進(jìn)行正確比較。此時(shí)再輸入惡意的密碼字符串“wang'or'a'='a”，加密之后條件psd='{$psd}'不再成立，但是這并不意味著SQL注入問(wèn)題已經(jīng)徹底解決。

假設(shè)惡意用戶輸入了賬號(hào)字符串“wang'or'a'='a”，經(jīng)過(guò)反復(fù)嘗試之后，試出一個(gè)可用的密碼字符串“111111”，此時(shí)他仍舊能夠成功登錄到郵箱系統(tǒng)，因此必須繼續(xù)解決惡意賬號(hào)登錄的問(wèn)題。

可以采用如下兩種方案解決SQL注入中惡意賬號(hào)登錄的問(wèn)題。1．在服務(wù)器端解決

在服務(wù)器端解決，是指允許用戶在登錄界面中輸入并提交惡意賬號(hào)。在服務(wù)器端獲取賬號(hào)進(jìn)行查詢之前，必須先使用mysqli_

real_escape_string($conn,$emailaddr)對(duì)賬號(hào)字符串進(jìn)行轉(zhuǎn)義處理，使得在輸入惡意賬號(hào)的情況下，條件emailaddr='{$emailaddr}'不會(huì)成立，以阻止惡意登錄。2．在瀏覽器端解決

在瀏覽器端解決，是指不允許用戶提交惡意賬號(hào)，需要使用表單數(shù)據(jù)驗(yàn)證來(lái)實(shí)現(xiàn)，在“用戶名”文本框?qū)?yīng)代碼中添加pattern="[a-zA-Z][a-zA-Z0-9_]{5,17}"，該正則表達(dá)式的結(jié)構(gòu)與注冊(cè)界面中賬號(hào)的正則表達(dá)式結(jié)構(gòu)要保持一致，這樣可以保證提交給服務(wù)器的賬號(hào)數(shù)據(jù)一定是符合要求的。

對(duì)密碼數(shù)據(jù)也可采用數(shù)據(jù)驗(yàn)證的形式來(lái)保證提交數(shù)據(jù)的合法性。6.2.3使用sprintf()函數(shù)格式化SQL語(yǔ)句

在denglu.php文件中查詢賬號(hào)和密碼的正確性時(shí)使用的操作語(yǔ)句為$sql="select*fromusermsgwhereemailaddr='{$emailaddr}'andpsd='{$psd}'";。該語(yǔ)句將變量$emailaddr和變量$psd直接放在相應(yīng)列的取值位置，這種表現(xiàn)方式在一定程度上會(huì)稍顯混亂，較為規(guī)范的方式是使用格式化函數(shù)將變量和SQL語(yǔ)句分離開(kāi)，PHP中實(shí)現(xiàn)這種功能的函數(shù)是sprintf()。

sprintf()函數(shù)把格式化的字符串替換成作為參數(shù)的變量，函數(shù)格式如下。sprintf(format,arg1,arg2,…)

參數(shù)format：必需，規(guī)定使用的字符串以及如何格式化其中的變量，格式字符以%為前綴。

格式字符及其含義如表6-1所示。格式字符含義

格式字符含義%%返回百分號(hào)%%G較短的%E和%f%b二進(jìn)制數(shù)%o八進(jìn)制數(shù)%cASCII值對(duì)應(yīng)的字符%s