PHP網(wǎng)站開(kāi)發(fā)項(xiàng)目式教程-分頁(yè)瀏覽收郵件

任務(wù)八接收、閱讀、刪除郵件分頁(yè)瀏覽郵件打開(kāi)并閱讀郵件刪除郵件8.1分頁(yè)瀏覽郵件實(shí)現(xiàn)收件箱基本功能三個(gè)知識(shí)點(diǎn)收件箱頁(yè)面布局說(shuō)明收件箱郵件總數(shù)查詢(xún)方法說(shuō)明獲取并顯示收件箱郵件總數(shù)收件箱頁(yè)面運(yùn)行效果點(diǎn)擊email.php頁(yè)面中左側(cè)的“收信”或者“收件箱”超鏈接時(shí)，要從右側(cè)的浮動(dòng)框架子窗口中顯示右圖所示的頁(yè)面運(yùn)行效果8.1.4分頁(yè)瀏覽郵件在眾多的動(dòng)態(tài)頁(yè)面中，要瀏覽保存在數(shù)據(jù)庫(kù)中的大量數(shù)據(jù)，都需要使用分頁(yè)瀏覽技術(shù)，例如一個(gè)留言板下面的數(shù)千條留言、郵箱中的數(shù)千封郵件等等，使用分頁(yè)瀏覽技術(shù)之后，無(wú)論數(shù)據(jù)量怎樣變化，都能保證頁(yè)面的長(zhǎng)度不會(huì)發(fā)生任何變化，變化的只有頁(yè)數(shù)，只要用戶(hù)點(diǎn)擊進(jìn)入自己需要的頁(yè)面查閱信息即可。收件箱頁(yè)面布局需要?jiǎng)?chuàng)建的文件需要?jiǎng)?chuàng)建的文件有樣式文件receiveemail.css和頁(yè)面文件receiveemail.php，在頁(yè)面文件中引用樣式文件。收件箱頁(yè)面的頁(yè)面邊距要定義為0（需要在receiveemail.css文件中增加樣式代碼body{margin:0;}）盒子div1的樣式要求盒子div1的樣式要求如下：寬度為自動(dòng)，高度為25px，上下填充為0，左右填充為10px，邊距是0，盒子中文本字號(hào)為10pt，文本的行高是25px獲取并顯示收件箱中的郵件總數(shù)內(nèi)容設(shè)計(jì)步驟設(shè)計(jì)這一部分內(nèi)容需要通過(guò)如下幾個(gè)操作步驟來(lái)實(shí)現(xiàn)：第一步，啟用session，獲取$_SESSION數(shù)組中存儲(chǔ)的登錄賬號(hào)信息，并在后面連接上@163.com，為設(shè)計(jì)查詢(xún)條件做好準(zhǔn)備；第二步，連接打開(kāi)數(shù)據(jù)庫(kù)，查詢(xún)表emailmsg列receiver中包含當(dāng)前登錄賬號(hào)且沒(méi)有被刪除的郵件信息第三步，獲取查詢(xún)結(jié)果記錄集中的記錄數(shù)，即為當(dāng)前用戶(hù)收件箱中的郵件總數(shù)，在div1內(nèi)部輸出。查詢(xún)條件分析獲取當(dāng)前登錄賬號(hào)收件箱中郵件總數(shù)時(shí)需要使用的查詢(xún)語(yǔ)句中條件比較復(fù)雜，假設(shè)有四封郵件的收件人receiver列值分別如下：第一封：zhangmanyu@163.com;linqingxia@163.com;wangzuxian@163.com;第二封：linqingxia@163.com;gaoyuany@163.com;第三封：xglinqingxia@163.com;linqingxiamv@163.com;第四封：meinan@163.com;xglinqingxia@163.com;思考問(wèn)題：設(shè)變量$uname的內(nèi)容是linqingxia@163.com，如何設(shè)置條件，保證正確查到第一封和第二封郵件？能否直接使用receiverlike‘%$uname%’，為什么？使用receiverlike‘%$uname%’將獲取到這四封郵件，不符合要求，所以不可使用查詢(xún)條件設(shè)置方法正確設(shè)置方法為：receiverlike'$uname%'orreceiverlike'%;$uname%'即若是要查詢(xún)的賬號(hào)在所有收件人開(kāi)始的位置，則通過(guò)receiverlike'$uname%'條件一定能夠找到；若要查詢(xún)的賬號(hào)在中間的某個(gè)位置，則通過(guò)receiverlike'%;$uname%'一定能夠精確找到。完成div1內(nèi)容的代碼在receiveemail.php文件中增加如下代碼盒子div2及子元素的樣式要求盒子div2的樣式：寬度自動(dòng)，高度25像素，上下填充5px，左右填充20px，上下邊距5px，左右邊距0，背景淺灰色#eee，下邊框1像素、實(shí)線(xiàn)、顏色#aaf。盒子div2-1的樣式：寬度自動(dòng)，高度自動(dòng)，填充是0，邊距是0，向左浮動(dòng)；使用樣式選擇符.div2-1input定義盒子內(nèi)的兩個(gè)按鈕中顯示的文本字號(hào)是10pt。盒子div2-2的樣式：寬度自動(dòng)，高度自動(dòng)，填充0，邊距0，向右浮動(dòng)，文本行高25px，文本字號(hào)10pt。刪除和刷新按鈕說(shuō)明刪除按鈕的功能：在頁(yè)面中選擇要?jiǎng)h除的郵件之后，點(diǎn)擊“刪除”按鈕時(shí)能夠?qū)⑧]件設(shè)置為已刪除狀態(tài)，該功能需要通過(guò)執(zhí)行指定的delete.php文件來(lái)完成，該按鈕需要設(shè)置為submit類(lèi)型；點(diǎn)擊刷新按鈕時(shí)，要保證在當(dāng)前窗口中重新運(yùn)行頁(yè)面文件receiveemail.php，目的是若用戶(hù)收到了新的郵件，能夠及時(shí)刷新頁(yè)面（為了降低復(fù)雜性，該項(xiàng)目中沒(méi)有使用自動(dòng)刷新顯示新郵件功能），該按鈕需要設(shè)置為普通的button按鈕。添加div、刪除和刷新按鈕在receiveemail.php中div1盒子的后面增加div2和內(nèi)部嵌套的div2-1，添加如下內(nèi)容：確定每頁(yè)中要顯示的記錄數(shù)和郵件的總頁(yè)數(shù)每頁(yè)中要顯示的記錄數(shù)，直接在代碼中給定即可，例如$pagesize=5;收件箱中的郵件頁(yè)數(shù)根據(jù)郵件總數(shù)和每頁(yè)中的記錄數(shù)來(lái)計(jì)算，因?yàn)榈玫降泥]件頁(yè)數(shù)可能是小數(shù)，所以需要使用函數(shù)ceil()取得不小于該數(shù)的最小整數(shù)。例如，若獲取的記錄總數(shù)$reccount為17，設(shè)置的每頁(yè)記錄數(shù)$pagesize為5，則兩者相除之后的結(jié)果為3.4，使用ceil(3.4)得到的結(jié)果是不小于3.4的最小整數(shù)4；在receiveemail.php中獲取到郵件總數(shù)之后插入上面代碼確定當(dāng)前要顯示郵件信息的頁(yè)碼獲取當(dāng)前要顯示郵件信息的頁(yè)碼有兩種情況：剛打開(kāi)收件箱和點(diǎn)擊換頁(yè)超鏈接之后若是用戶(hù)剛剛打開(kāi)收件箱，顯示的應(yīng)當(dāng)是第一頁(yè)的郵件信息，之后則根據(jù)用戶(hù)點(diǎn)擊的“首頁(yè)、上頁(yè)、下頁(yè)、尾頁(yè)”超鏈接獲取當(dāng)前要顯示的郵件信息的頁(yè)碼。例如，假設(shè)當(dāng)前正在顯示的是第3頁(yè)內(nèi)容，若點(diǎn)擊“上頁(yè)”超鏈接，接下來(lái)要顯示的一定是第2頁(yè)，這個(gè)頁(yè)碼數(shù)字將通過(guò)點(diǎn)擊超鏈接的方式提交給服務(wù)器。確定當(dāng)前要顯示郵件信息的頁(yè)碼例如，假設(shè)每個(gè)超鏈接都在href屬性中使用鍵名pageno向服務(wù)器提交數(shù)據(jù)，要判斷用戶(hù)是不是剛剛打開(kāi)收件箱，需要通過(guò)檢測(cè)這些超鏈接有沒(méi)有向服務(wù)器端提交數(shù)據(jù)來(lái)實(shí)現(xiàn)，若元素$_GET['pageno']存在，說(shuō)明已經(jīng)通過(guò)點(diǎn)擊超鏈接向服務(wù)器提交數(shù)據(jù)了，此時(shí)需要獲取元素$_GET['pageno']的數(shù)據(jù)作為當(dāng)前將要顯示的郵件信息的頁(yè)碼，否則當(dāng)前必須顯示第一頁(yè)郵件信息。在receiveemail.php中獲取到總頁(yè)數(shù)之后插入該語(yǔ)句設(shè)計(jì)“首頁(yè)、上頁(yè)、下頁(yè)、尾頁(yè)”時(shí)的原則若收件箱中郵件頁(yè)數(shù)為0，則首頁(yè)、上頁(yè)、下頁(yè)、尾頁(yè)都是文本若當(dāng)前顯示第一頁(yè)，則“首頁(yè)”設(shè)置為普通文本，否則“首頁(yè)”為超鏈接，點(diǎn)擊時(shí)向服務(wù)器提交頁(yè)碼1；若當(dāng)前顯示第一頁(yè)，則“上頁(yè)”設(shè)置為普通文本，否則“上頁(yè)”為超鏈接，在點(diǎn)擊時(shí)需要向服務(wù)器提交的頁(yè)碼是當(dāng)前正在顯示的頁(yè)面頁(yè)碼減去1；若當(dāng)前顯示最后一頁(yè)，則“下頁(yè)”設(shè)置為普通文本，否則“下頁(yè)”為超鏈接，在點(diǎn)擊時(shí)需要向服務(wù)器提交的頁(yè)碼是當(dāng)前正在顯示的頁(yè)面頁(yè)碼加上1；若當(dāng)前顯示最后一頁(yè)，則“尾頁(yè)”設(shè)置為普通文本，否則設(shè)置的“尾頁(yè)”超鏈接在點(diǎn)擊時(shí)需要向服務(wù)器提交的頁(yè)碼是總頁(yè)數(shù)值。完善div2的代碼獲取當(dāng)前頁(yè)中要顯示記錄（郵件）的起始記錄號(hào)查詢(xún)當(dāng)前用戶(hù)的郵箱時(shí)，若查詢(xún)結(jié)果記錄集$res中的記錄數(shù)$reccount為17，則系統(tǒng)給定的記錄編號(hào)是從0到16的數(shù)列，若每頁(yè)顯示的記錄數(shù)$pagesize為5思考問(wèn)題：當(dāng)前頁(yè)碼與當(dāng)前頁(yè)中第一條記錄編號(hào)之間存在著怎樣的關(guān)系？即第一頁(yè)從哪條開(kāi)始顯示？第二頁(yè)從哪條開(kāi)始？第三頁(yè)？第四頁(yè)？第一頁(yè)從第0條開(kāi)始，顯示0~4條第二頁(yè)從第5條開(kāi)始，顯示5~9條第三頁(yè)從第10條開(kāi)始，顯示10~14條第四頁(yè)從第15條開(kāi)始，顯示15~16條當(dāng)前頁(yè)碼與當(dāng)前頁(yè)中第一條記錄編號(hào)之間的關(guān)系根據(jù)上表中顯示的數(shù)字關(guān)系，依據(jù)頁(yè)碼獲取當(dāng)前頁(yè)起始記錄編號(hào)的公式如下：$pagestart=($pageno-1)*$pagesize在receiveemail.php中獲取到頁(yè)碼之后插入該語(yǔ)句獲取當(dāng)前頁(yè)中要顯示的若干條記錄實(shí)現(xiàn)這一功能，需要考慮在收件箱中顯示郵件信息時(shí)，要將最后收到的郵件排列在第一頁(yè)第一條，即要按照收發(fā)郵件的日期進(jìn)行降序排序，因此設(shè)計(jì)select語(yǔ)句時(shí)，要使用orderby子句按照郵件的收發(fā)日期進(jìn)行降序排序，使用limit子句設(shè)置要獲取記錄的起始編號(hào)和記錄數(shù)；在定義的查詢(xún)收件箱所有記錄的查詢(xún)語(yǔ)句的基礎(chǔ)上增加orderby和limit兩個(gè)子句的應(yīng)用，注意orderby前面一定要保留一個(gè)空格，與之前的條件子句分隔開(kāi)執(zhí)行定義的查詢(xún)語(yǔ)句之后，使用變量$result保存查詢(xún)結(jié)果記錄集。在receiveemail.php中獲取到當(dāng)前頁(yè)起始記錄編號(hào)之后添加上面代碼盒子div3及子元素的樣式要求盒子div3的樣式要求為：寬度自動(dòng)，高度自動(dòng)，填充0，邊距0；超鏈接的樣式定義為兩種情況：沒(méi)有閱讀過(guò)的郵件超鏈接，使用類(lèi)名a1定義為黑色，沒(méi)有下畫(huà)線(xiàn)，文本加粗顯示；閱讀過(guò)的郵件超鏈接，使用標(biāo)簽名a定義為黑色，沒(méi)有下畫(huà)線(xiàn)，文本非加粗顯示。div3內(nèi)部表格的樣式要求使用包含選擇符.div3table定義樣式：寬度100%。表格單元格使用包含選擇符.div3tabletd定義樣式：高度30px，下邊框1像素、實(shí)線(xiàn)、顏色#aaf，單元格內(nèi)容在垂直方向居中，文本字號(hào)10pt。這里的下邊框用于設(shè)置每封郵件下面的橫線(xiàn)。表格需要包含5個(gè)列，列寬分別是30px、150px、自動(dòng)auto、20px和120px，分別使用class類(lèi)選擇符.td1,.td2,.td3,.td4和.td5定義修改receiveemail.php文件在盒子div2后面增加下面代碼，添加盒子div3及內(nèi)部需要的表格<table>思考問(wèn)題在變量$result中已經(jīng)包含了當(dāng)前頁(yè)要顯示的全部記錄，使用怎樣的程序結(jié)構(gòu)、采取何種方法從該變量中逐條取出記錄并輸出？因?yàn)樽詈笠豁?yè)剩下的記錄數(shù)并不確定，所以$result變量中的記錄數(shù)也是不確定的，因此此處可采用的最佳方案是使用while循環(huán)結(jié)構(gòu)，循環(huán)條件是$row=mysqli_fetch_array($result)，若是能夠從$result中取出記錄，則條件成立，接下來(lái)可輸出記錄的信息，若是沒(méi)有取出記錄，則條件不成立，說(shuō)明$result記錄指針已經(jīng)指向最后一條記錄之后，循環(huán)結(jié)束即可處理$row中的數(shù)據(jù)處理$row記錄中的數(shù)據(jù)，為輸出做準(zhǔn)備獲取當(dāng)前郵件的emailno列值，保存在變量$emailno中備用；截取當(dāng)前郵件sender列值中@符號(hào)前面的用戶(hù)名部分，保存在變量$sender中備用（使用list($sender)=explode('@',$row['sender'])實(shí)現(xiàn)）；處理當(dāng)前郵件datesorr列值中的日期時(shí)間信息，得到“Y年m月d日”的形式保存在變量$riqi中備用；使用空格做分割符，分割$row['datesorr']內(nèi)容，保留前面日期部分保存在$datesorr中，使用-做分割符，分割$datesorr的內(nèi)容，年月日分別保存在$y,$m,$d中，連接$y,$m,$d的內(nèi)容，得到“Y年m月d日”形式處理$row中的數(shù)據(jù)確定收件人賬號(hào)$uname是否閱讀過(guò)當(dāng)前郵件將當(dāng)前郵件readflag列值使用分號(hào)分割之后，將其保存在數(shù)組$readArr中；使用代碼in_array($uname,$readArr)獲取賬號(hào)$uname在數(shù)組$readArr中的索引，并將其保存在變量$isin中，該變量的取值可能是數(shù)組索引或者false。為false，則表示當(dāng)前用戶(hù)沒(méi)有閱讀過(guò)該郵件修改receiveemail.php文件修改receiveemail.php文件，在div3的表格內(nèi)部設(shè)計(jì)循環(huán)，獲取記錄，處理記錄中的數(shù)據(jù)為輸出做準(zhǔn)備輸出郵件信息輸出表格的行起始標(biāo)記輸出表格第一列的標(biāo)記（引用選擇符td1）及內(nèi)容，內(nèi)容是復(fù)選框，name定義為markup[]，value屬性取值為變量$emailno的值，類(lèi)名為checkbox；輸出表格第二列的標(biāo)記（引用選擇符td2）及內(nèi)容，內(nèi)容是超鏈接，鏈接熱點(diǎn)為變量$sender的值，鏈接打開(kāi)的文件是openemail.php，點(diǎn)擊后使用鍵名emailno向服務(wù)器端提交變量$emailno的值；若變量$isin為false，則表示當(dāng)前用戶(hù)沒(méi)有閱讀過(guò)該郵件，超鏈接要引用類(lèi)名a1。輸出表格第三列的標(biāo)記（引用選擇符td3）及內(nèi)容，內(nèi)容是超鏈接，鏈接熱點(diǎn)為當(dāng)前郵件subject列值，鏈接打開(kāi)的文件是openemail.php，點(diǎn)擊后使用鍵名emailno向服務(wù)器端提交變量$emailno的值；若變量$isin為false，則表示當(dāng)前用戶(hù)沒(méi)有閱讀過(guò)該郵件，超鏈接要引用類(lèi)名a1。輸出郵件信息輸出表格第四列的標(biāo)記（引用選擇符td4）及內(nèi)容，判斷當(dāng)前郵件附件列attachment的值是否為空，為空，則在單元格中輸出空格字符

（該字符不可或缺，若是該字符不存在，很多瀏覽器中將無(wú)法顯示該單元格的下邊框線(xiàn)）；若附件列的列值不為空，則輸出圖片flag-1.jpg；輸出表格第五列的標(biāo)記（引用選擇符td5）及內(nèi)容，內(nèi)容是變量$riqi的值；輸出表格的行結(jié)束標(biāo)記。修改receiveemail.php文件在準(zhǔn)備好要輸出的數(shù)據(jù)之后，增加如下代碼分頁(yè)瀏覽頁(yè)面存在的問(wèn)題問(wèn)題分析：在運(yùn)行receiveemail.php的頁(yè)面中，若是選擇了一封或者幾封郵件，點(diǎn)擊“刪除”按鈕時(shí)，需要運(yùn)行delete.php文件將選中的文件放入已刪除文件夾中，但是若用戶(hù)沒(méi)有選擇要?jiǎng)h除的郵件而直接點(diǎn)擊了“刪除”按鈕，需要怎樣阻止運(yùn)行delete.php文件？需要對(duì)receiveemail.php文件中的表單進(jìn)行數(shù)據(jù)驗(yàn)證，判斷如果沒(méi)有選擇要?jiǎng)h除的郵件，則阻止運(yùn)行delete.php文件需要完成的設(shè)置在receiveemail.php的<form>標(biāo)記中設(shè)置action為delete.php創(chuàng)建腳本文件receiveemail.js，在receiveemail.php文件中引用該腳本文件定義函數(shù)validate()函數(shù)validate()的功能說(shuō)明使用document.getElementsByName('markup[]')獲取當(dāng)前頁(yè)面中的所有復(fù)選框，構(gòu)成一個(gè)組，使用數(shù)組markup表示；定義一個(gè)變量result，初始值為false，若是判斷后發(fā)現(xiàn)頁(yè)面中有被選擇的復(fù)選框，則該變量值要修改為true，否則保持為false。使用for結(jié)構(gòu)逐個(gè)判斷復(fù)選框組中每個(gè)元素是否被選中，只要