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

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

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