PHP網(wǎng)站開(kāi)發(fā)項(xiàng)目式教程（微課版）（第2版）任務(wù)8 實(shí)現(xiàn)接收、閱讀、刪除郵件功能

PHP網(wǎng)站開(kāi)發(fā)項(xiàng)目式教程（微課版）（第2版）任務(wù)8實(shí)現(xiàn)接收、閱讀、刪除郵件功能

接收、閱讀和刪除郵件都是郵箱項(xiàng)目的核心功能，本任務(wù)中需要實(shí)現(xiàn)的功能如下。能夠使用分頁(yè)瀏覽查看收件箱中的郵件和已刪除文件夾中的郵件。單擊收件箱中當(dāng)前頁(yè)某封郵件的主題或發(fā)件人之后，能夠打開(kāi)并閱讀郵件。能夠根據(jù)用戶(hù)選擇的選項(xiàng)將收件箱中的郵件放入已刪除文件夾，也可以將已刪除文件夾中的郵件徹底刪除。任務(wù)8-1分頁(yè)瀏覽郵件

需要解決的核心問(wèn)題如何通過(guò)URL向服務(wù)器提交數(shù)據(jù)？服務(wù)器端如何獲取URL提交的數(shù)據(jù)？如何使用函數(shù)mysqli_fetch_array()獲取查詢(xún)結(jié)果記錄集中的記錄？如何訪問(wèn)記錄中每列的信息？如何設(shè)計(jì)分頁(yè)瀏覽中使用的“首頁(yè)”“上頁(yè)”“下頁(yè)”“尾頁(yè)”超鏈接？如何獲取當(dāng)前用戶(hù)收件箱的所有郵件？如何獲取郵件總頁(yè)數(shù)？如何獲取當(dāng)前頁(yè)中的所有記錄？為了能夠打開(kāi)郵件，要如何設(shè)計(jì)收件箱中每封郵件的超鏈接？分頁(yè)瀏覽中的數(shù)據(jù)驗(yàn)證的作用是什么？如何進(jìn)行驗(yàn)證？單擊email.php頁(yè)面左側(cè)的“收信”或者“收件箱”超鏈接時(shí)，要從右側(cè)的浮動(dòng)框架子窗口中顯示圖8-1所示的頁(yè)面運(yùn)行效果。圖8-1

收郵件頁(yè)面運(yùn)行效果8.1.1收郵件功能描述

在收郵件界面中需要實(shí)現(xiàn)以下描述的功能。（1）能夠獲取當(dāng)前用戶(hù)收件箱中尚未設(shè)置刪除標(biāo)志的郵件總數(shù)并顯示出來(lái)。（2）能夠?qū)崿F(xiàn)郵件的分頁(yè)瀏覽功能，輸出“首頁(yè)”“上頁(yè)”“下頁(yè)”“尾頁(yè)”的文本或者超鏈接，若當(dāng)前顯示的是第一頁(yè)中的郵件信息，則“首頁(yè)”和“上頁(yè)”超鏈接不可用，若當(dāng)前顯示的是最后一頁(yè)中的郵件信息，則“下頁(yè)”和“尾頁(yè)”超鏈接不可用。（3）能夠根據(jù)用戶(hù)單擊的頁(yè)面超鏈接進(jìn)行換頁(yè)，例如，當(dāng)前正在顯示的是第2頁(yè)，單擊“下頁(yè)”超鏈接后，能夠?qū)㈨?yè)碼3提交給服務(wù)器，以打開(kāi)下頁(yè)中的郵件信息。若此時(shí)單擊“上頁(yè)”超鏈接，則能夠?qū)㈨?yè)碼1提交給服務(wù)器，以打開(kāi)上頁(yè)中的郵件信息。（4）能夠通過(guò)查詢(xún)語(yǔ)句中的限制子句limit獲取每頁(yè)中指定的郵件，能夠使用mysqli_fetch_array()函數(shù)從查詢(xún)結(jié)果記錄集中獲取一條記錄（一封郵件的所有信息），然后以數(shù)組的形式將每封郵件的發(fā)件人、主題、收發(fā)日期以及郵件中是否有附件等信息顯示到郵件列表中。若有附件，就在指定列中顯示附件小圖標(biāo)flag-1.jpg。（5）能夠根據(jù)用戶(hù)的選擇，修改每頁(yè)中的郵件數(shù)。（6）單擊任意郵件中的發(fā)件人或者主題超鏈接時(shí)，能夠?qū)?dāng)前郵件的emailno列值（郵件序號(hào)）提交給服務(wù)器，實(shí)現(xiàn)打開(kāi)與閱讀郵件的功能。（7）能夠根據(jù)用戶(hù)是否已經(jīng)閱讀過(guò)某封郵件來(lái)確定該郵件的發(fā)件人和主題超鏈接是否要設(shè)置為加粗效果。（8）選中需要?jiǎng)h除郵件左側(cè)的復(fù)選框，單擊“刪除”按鈕之后，能夠?qū)⑦x中的所有郵件設(shè)置為已刪除郵件。8.1.2用$_GET接收URL附加數(shù)據(jù)1．為瀏覽器端功能與服務(wù)器端功能獨(dú)立創(chuàng)建文件（1）創(chuàng)建瀏覽器端文件get.html。

創(chuàng)建文件get.html，在文件內(nèi)部設(shè)置超鏈接，鏈接熱點(diǎn)是“單擊超鏈接運(yùn)行文件get.php，同時(shí)向該文件提交數(shù)據(jù)”，通過(guò)鏈接打開(kāi)的文件是get.php。單擊超鏈接時(shí)，向服務(wù)器端提交的鍵值對(duì)是data=123。

在超鏈接中設(shè)置向服務(wù)器端提交數(shù)據(jù)需要使用href="url?鍵名=鍵值"來(lái)完成。

頁(yè)面運(yùn)行效果如圖8-2所示。圖8-2

get.html的運(yùn)行效果（2）創(chuàng)建服務(wù)器端文件get.php。

創(chuàng)建文件get.php，獲取并輸出get.html文件中超鏈接提交的數(shù)據(jù)。

通過(guò)超鏈接提交的數(shù)據(jù)在服務(wù)器端必須使用系統(tǒng)數(shù)組$_GET來(lái)接收，$_GET中需要使用的鍵名是超鏈接href屬性中數(shù)據(jù)對(duì)的鍵名。

單擊圖8-2中的超鏈接之后，會(huì)運(yùn)行g(shù)et.php文件，運(yùn)行效果如圖8-3所示。圖8-3

頁(yè)面文件get.php運(yùn)行效果

在圖8-3中，瀏覽器地址欄內(nèi)的“get.php?data=123”是get.html文件中超鏈接標(biāo)簽中href屬性的取值，顯示在?后面的數(shù)據(jù)對(duì)是要通過(guò)$_GET系統(tǒng)數(shù)組接收的數(shù)據(jù)。

由此可知，要使用超鏈接向服務(wù)器提交數(shù)據(jù)時(shí)，需要使用href="url?鍵名=鍵值"來(lái)完成設(shè)置；而在服務(wù)器端必須使用系統(tǒng)數(shù)組$_GET接收超鏈接提交的數(shù)據(jù)。2．將提交數(shù)據(jù)與接收數(shù)據(jù)功能在一個(gè)文件中實(shí)現(xiàn)

將提交數(shù)據(jù)與接收數(shù)據(jù)功能在一個(gè)文件中實(shí)現(xiàn)，是指在這個(gè)文件中創(chuàng)建超鏈接，超鏈接標(biāo)簽中href屬性指定要鏈接的文件仍舊是該文件自身，即單擊超鏈接提交的數(shù)據(jù)仍舊由當(dāng)前文件自己接收并處理，提交數(shù)據(jù)在瀏覽器端完成，而接收數(shù)據(jù)在服務(wù)器端完成。8.1.3處理查詢(xún)結(jié)果記錄集中的記錄

打開(kāi)收件箱后，在顯示每頁(yè)中的郵件信息時(shí)，系統(tǒng)需要從查詢(xún)結(jié)果記錄集中逐條獲取記錄，然后以數(shù)組的形式獲取每條記錄中每列的列值。

PHP中提供了mysqli_fetch_array()、mysqli_fetch_row()、mysqli_fetch_object()、mysqli_fetch_assoc()等多種不同的函數(shù)來(lái)處理查詢(xún)結(jié)果記錄集中的記錄，本書(shū)主要講解mysqli_fetch_array()

和mysqli_fetch_object()這兩個(gè)常用的函數(shù)。1．mysqli_fetch_array()函數(shù)

使用mysqli_fetch_array()函數(shù)可以從查詢(xún)結(jié)果記錄集中獲取記錄指針指向的記錄。格式：arraymysqli_fetch_array(查詢(xún)結(jié)果記錄集)。

返回結(jié)果有兩種情況：如果記錄指針指向某條存在的記錄，則將獲取該記錄中的所有列，并且以數(shù)組的形式保存；如果記錄指針指向最后一條記錄之后，則返回false。

對(duì)于存放記錄信息的數(shù)組，可以使用兩種形式訪問(wèn)數(shù)組元素：第一種是使用從0開(kāi)始的數(shù)字索引，索引0代表查詢(xún)結(jié)果中第一列的信息，索引1代表第二列的信息，以此類(lèi)推；第二種是使用鍵名訪問(wèn)，使用數(shù)據(jù)表中的列名作為數(shù)組元素的鍵名，因?yàn)檫@種形式更直觀、更容易理解，所以成為程序中的主要用法。

創(chuàng)建頁(yè)面文件fetch_array.php，查詢(xún)數(shù)據(jù)表emailmsg中發(fā)件人wangaihua@163.com的全部郵件，獲取信息之后，將查詢(xún)結(jié)果中所有記錄的郵件序號(hào)、發(fā)件人、收件人、主題4列的列值以表格形式輸出。

頁(yè)面運(yùn)行效果如圖8-6所示。圖8-6

fetch_array.php頁(yè)面運(yùn)行效果2．mysqli_fetch_object()函數(shù)

使用mysqli_fetch_object()函數(shù)可以從查詢(xún)結(jié)果記錄集中獲取記錄指針指向的記錄。格式：objectmysqli_fetch_object(查詢(xún)結(jié)果記錄集)。

返回結(jié)果有兩種情況：若指向的記錄存在，則將返回的結(jié)果保存為對(duì)象，使用表中的列名作為對(duì)象的屬性來(lái)獲取各列的值；若指向的記錄不存在，則返回false。8.1.4分頁(yè)瀏覽郵件

為了美化設(shè)計(jì)的頁(yè)面，項(xiàng)目中仍舊要結(jié)合樣式的應(yīng)用來(lái)實(shí)現(xiàn)收郵件頁(yè)面的分頁(yè)瀏覽功能。

需要?jiǎng)?chuàng)建的文件有樣式文件receiveemail.css、頁(yè)面文件receiveemail.php和腳本文件receiveemail.js。

圖8-1所示的收件箱界面的整個(gè)頁(yè)面的邊距要定義為0（需要在receiveemail.css文件中增加樣式代碼body{margin:0;}），頁(yè)面包含上下排列的3個(gè)div，分別使用類(lèi)選擇符.div1、.div2和.div3定義樣式。下面介紹3個(gè)div的樣式定義、div中子元素的樣式定義、div內(nèi)部要顯示的內(nèi)容的獲取及輸出。

頁(yè)面布局結(jié)構(gòu)如圖8-7所示。圖8-7

receiveemail.php頁(yè)面的布局結(jié)構(gòu)1．元素<divclass="div1">的設(shè)計(jì)（1）內(nèi)容說(shuō)明。

元素<divclass="div1">中要放置的內(nèi)容是文本“收件箱”、當(dāng)前用戶(hù)收件箱中的郵件總數(shù)以及可以修改每頁(yè)郵件數(shù)的下拉列表元素，效果如圖8-8所示。圖8-8

元素<divclass="div1">中的內(nèi)容（2）樣式設(shè)計(jì)。

類(lèi)選擇符.div1的樣式要求如下：寬度為auto，高度為25px，上下填充為0，左右填充為10px，邊距為0，div中文本的字號(hào)為10pt，文本行高為25px。（3）內(nèi)容設(shè)計(jì)。

設(shè)計(jì)這一部分內(nèi)容的關(guān)鍵有兩點(diǎn)，第一是獲取當(dāng)前用戶(hù)收件箱中的郵件總數(shù)，第二是修改每頁(yè)中的記錄數(shù)。2．元素<divclass="div2">的設(shè)計(jì)（1）內(nèi)容說(shuō)明。

元素<divclass="div2">中的內(nèi)容包含兩部分，分別是位于左側(cè)的總控制復(fù)選框與“刪除”和“刷新”兩個(gè)按鈕，以及位于右側(cè)的“首頁(yè)”“上頁(yè)”“下頁(yè)”“尾頁(yè)”4個(gè)超鏈接（也可能是文本），效果如圖8-9所示。圖8-9

元素<divclass="div2">中的內(nèi)容（2）樣式設(shè)計(jì)。

類(lèi)選擇符.div2的樣式要求：寬度為auto，高度為25px，上下填充為5px，左右填充為20px，上下邊距為5px，左右邊距為0，背景為淺灰色#eee，下邊框?yàn)?px、#aaf顏色的實(shí)線。

元素<divclass="div2">中的內(nèi)容是橫向排列的兩個(gè)div，分別使用類(lèi)選擇符.div2-1和.div2-2定義樣式。元素<divclass="

div2-1">的內(nèi)容是總控制復(fù)選框以及“刪除”和“刷新”兩個(gè)按鈕，元素<divclass="div2-2">的內(nèi)容是超鏈接或文本“首頁(yè)”“上頁(yè)”“下頁(yè)”“尾頁(yè)”。

類(lèi)選擇符.div2-1的樣式要求：寬度為auto，高度為auto，填充為0，邊距為0，向左浮動(dòng)；使用包含選擇符.div2-1input定義div內(nèi)部?jī)蓚€(gè)按鈕的文本字號(hào)是10pt。

類(lèi)選擇符.div2-2的樣式要求：寬度為auto，高度為auto，填充為0，邊距為0，向右浮動(dòng)，div中文本的字號(hào)為10pt，文本行高為25px。（3）內(nèi)容設(shè)計(jì)。

這一部分內(nèi)容是為分頁(yè)瀏覽郵件信息做準(zhǔn)備，需要通過(guò)以下5步來(lái)實(shí)現(xiàn)相應(yīng)功能。①確定每頁(yè)中要顯示的記錄數(shù)：最初由程序開(kāi)發(fā)人員直接在代碼中給定的數(shù)字是5，如果用戶(hù)重新選擇了自己郵箱中每頁(yè)的記錄數(shù)，則按照用戶(hù)選擇的進(jìn)行修改。②確定收件箱中的郵件頁(yè)數(shù)：根據(jù)每頁(yè)中的記錄數(shù)和郵件總數(shù)來(lái)計(jì)算，因?yàn)榈玫降泥]件頁(yè)數(shù)可能是小數(shù)，所以需要使用函數(shù)ceil()取得不小于該數(shù)的最小整數(shù)。③確定當(dāng)前要顯示郵件信息的頁(yè)碼：若是用戶(hù)剛剛打開(kāi)收件箱，則顯示的應(yīng)當(dāng)是第1頁(yè)的郵件信息，之后系統(tǒng)會(huì)根據(jù)用戶(hù)單擊的“首頁(yè)”“上頁(yè)”“下頁(yè)”“尾頁(yè)”超鏈接獲取當(dāng)前要顯示的郵件信息的頁(yè)碼。④設(shè)計(jì)“刪除”和“刷新”按鈕：在頁(yè)面中選擇要?jiǎng)h除的郵件之后，單擊“刪除”按鈕時(shí)能夠?qū)⑧]件設(shè)置為已刪除狀態(tài)，該按鈕需要設(shè)置為submit類(lèi)型；在用戶(hù)單擊“刷新”按鈕時(shí)，要保證在當(dāng)前窗口中重新運(yùn)行頁(yè)面文件receiveemail.php，這樣做的目的是如果用戶(hù)收到了新的郵件，能夠及時(shí)刷新頁(yè)面收到郵件，該按鈕需要設(shè)置為普通的button元素。⑤設(shè)計(jì)超鏈接或文本“首頁(yè)”“上頁(yè)”“下頁(yè)”“尾頁(yè)”。在用戶(hù)單擊超鏈接時(shí)，除了要以鏈接的方式重新打開(kāi)頁(yè)面文件receiveemail.php之外，還必須能夠向該頁(yè)面文件提交需要的頁(yè)碼以實(shí)現(xiàn)頁(yè)碼的變化，提交每頁(yè)中的郵件記錄數(shù)以確保每一頁(yè)都能按照用戶(hù)的要求顯示相應(yīng)數(shù)量的記錄。3．元素<divclass="div3">的設(shè)計(jì)（1）內(nèi)容說(shuō)明。

元素<divclass="div3">的內(nèi)容包含使用表格排列的復(fù)選框、郵件的發(fā)件人、主題、附件圖標(biāo)、收發(fā)日期等信息，效果如圖8-10所示。圖8-10

元素<divclass="div3">中的內(nèi)容（2）樣式設(shè)計(jì)。

類(lèi)選擇符.div3的樣式要求為：寬度為auto，高度為auto，填充為0，邊距為0。

元素<divclass="div3">內(nèi)部表格使用包含選擇符.div3table定義樣式：寬度為100%，文本字號(hào)為10pt。

表格單元格使用包含選擇符.div3tabletd定義樣式：高度為30px，下邊框?yàn)?px、#aaf顏色的實(shí)線，單元格內(nèi)容在垂直方向上居中，這里的下邊框是針對(duì)每封郵件信息下面的橫線設(shè)計(jì)的。

表格內(nèi)部超鏈接的樣式定義為兩種情況：沒(méi)有閱讀過(guò)的郵件超鏈接，使用類(lèi)名a1定義為黑色，沒(méi)有下畫(huà)線，文本加粗顯示；閱讀過(guò)的郵件超鏈接，使用標(biāo)簽名a定義為黑色，沒(méi)有下畫(huà)線，文本非加粗顯示。

表格需要包含5列，列寬分別是30px、150px、auto、20px和120px。

收件箱的界面寬度必須能夠適應(yīng)浮動(dòng)框架子窗口的寬度，也就是必須適應(yīng)瀏覽器窗口的寬度變化，所以收件箱界面中定義的所有div都沒(méi)有設(shè)置具體的寬度值，寬度值都為auto。而在使用的表格中，將用于顯示郵件主題的第3列的寬度設(shè)置為auto，是為了保證在其他4列寬度都固定的情況下，通過(guò)這一列的寬度變化來(lái)適應(yīng)整體的寬度變化，若是5列的寬度都設(shè)置為auto，運(yùn)行效果將不穩(wěn)定。（3）內(nèi)容設(shè)計(jì)。

這一部分內(nèi)容要輸出當(dāng)前頁(yè)中的所有郵件信息，需要使用如下4個(gè)操作步驟來(lái)完成。①獲取當(dāng)前頁(yè)中要顯示郵件記錄的起始記錄號(hào)，這里所說(shuō)的記錄號(hào)不是指在emailmsg表中的郵件序號(hào)emailno，而是查詢(xún)當(dāng)前賬號(hào)收件箱中的所有郵件時(shí)得到的查詢(xún)結(jié)果記錄集中的編號(hào)，每個(gè)查詢(xún)結(jié)果記錄集中的記錄編號(hào)都是從0開(kāi)始的。要顯示記錄的頁(yè)碼$pageno當(dāng)前頁(yè)中第一條記錄的編號(hào)$pagestart1025310415表8-1

分頁(yè)瀏覽中頁(yè)碼與第一條記錄的編號(hào)的對(duì)應(yīng)關(guān)系②得到當(dāng)前頁(yè)的起始記錄號(hào)之后，需要定義新的查詢(xún)語(yǔ)句，以獲取在當(dāng)前頁(yè)中將要顯示的若干條記錄。例如，一頁(yè)中的記錄數(shù)$pagesize為5，若得到的起始記錄號(hào)是5，則需要獲取5、6、7、8、9這5條記錄。③在頁(yè)面中增加元素<divclass="div3">，在其內(nèi)部添加表格（是指添加表格的起始標(biāo)簽<table>、結(jié)束標(biāo)簽</table>以及<table>標(biāo)簽中相關(guān)屬性的設(shè)置）。④使用循環(huán)語(yǔ)句從查詢(xún)結(jié)果記錄集中逐一獲取記錄，按照如下方式進(jìn)行處理并輸出。4．控制復(fù)選框的全選操作

單擊div2中的id為control的復(fù)選框，控制同時(shí)選中或者取消選中當(dāng)前頁(yè)所有郵件前面的復(fù)選框元素。8.1.5分頁(yè)瀏覽中的數(shù)據(jù)驗(yàn)證

在運(yùn)行receiveemail.php的頁(yè)面中，若用戶(hù)選擇了一封或者幾封郵件，那么當(dāng)用戶(hù)單擊“刪除”按鈕時(shí)，需要運(yùn)行delete.php文件將選中的文件放入已刪除文件夾。但是，若用戶(hù)沒(méi)有選擇要?jiǎng)h除的郵件而直接單擊了“刪除”按鈕，就必須阻止服務(wù)器端運(yùn)行文件delete.php。

函數(shù)調(diào)用說(shuō)明如下。

在表單標(biāo)簽<form>中增加代碼onsubmit="returnvalidate();"，當(dāng)用戶(hù)單擊submit類(lèi)型的“刪除”按鈕時(shí)調(diào)用函數(shù)。

用戶(hù)沒(méi)有選擇要?jiǎng)h除的附件，直接單擊“刪除”按鈕時(shí)的運(yùn)行效果如圖8-11所示。圖8-11

驗(yàn)證腳本的運(yùn)行效果8.1.6receiveemail.css和receiveemail.php的完整代碼1．receiveemail.css的完整代碼2．receiveemail.php的完整代碼任務(wù)8-2打開(kāi)并閱讀郵件

需要解決的核心問(wèn)題如何計(jì)算一封郵件中的附件數(shù)？如何將用戶(hù)編輯郵件時(shí)按【Enter】鍵生成的字符替換為閱讀郵件內(nèi)容中的段落標(biāo)簽？函數(shù)nl2br()和str_replace()各自的含義是什么？

如何顯示附件名稱(chēng)前面的文件類(lèi)型圖標(biāo)？如何根據(jù)emailmsg表中附件信息列attachment的信息得到超鏈接要打開(kāi)的附件文件名稱(chēng)信息？如何確定是否要將當(dāng)前賬號(hào)信息寫(xiě)入emailmsg表的readflag列？

在receiveemail.php頁(yè)面中，當(dāng)用戶(hù)單擊每一封郵件的發(fā)件人或者主題時(shí)，將打開(kāi)超鏈接指定的頁(yè)面文件openemail.php，閱讀選擇的郵件內(nèi)容，同時(shí)還可以閱讀或下載附件。打開(kāi)不帶附件的郵件的界面如圖8-12所示；打開(kāi)帶附件的郵件的界面如圖8-13所示。圖8-12

打開(kāi)不帶附件的郵件的界面圖8-13

打開(kāi)帶附件的郵件的界面8.2.1打開(kāi)并閱讀郵件頁(yè)面的布局結(jié)構(gòu)及功能說(shuō)明1．布局結(jié)構(gòu)

為了保證頁(yè)面的美觀效果，與寫(xiě)郵件、收郵件界面的要求一樣，需要將整個(gè)頁(yè)面的邊距設(shè)置為0。

整個(gè)頁(yè)面的布局結(jié)構(gòu)如圖8-14所示。圖8-14

打開(kāi)郵件頁(yè)面的布局結(jié)構(gòu)

從圖8-12可以看出，打開(kāi)不帶附件的郵件之后，頁(yè)面中顯示了上下兩部分內(nèi)容。第一部分使用ID選擇符#div1定義樣式，內(nèi)容包含分行顯示的郵件主題、發(fā)件人信息、收件人信息和日期信息；第二部分使用ID選擇符#div2定義樣式，內(nèi)容是郵件內(nèi)容。

從圖8-13可以看出，打開(kāi)帶附件的郵件之后，頁(yè)面中顯示了上、中、下3部分內(nèi)容。第一部分使用ID選擇符#div1定義樣式，內(nèi)容中除了郵件主題、發(fā)件人、收件人和日期信息之外，還包含附件個(gè)數(shù)信息。第二部分使用ID選擇符#div2定義樣式，內(nèi)容仍舊是郵件內(nèi)容。第三部分使用ID選擇符#div3定義樣式，該div內(nèi)部使用不同的段落顯示了附件的名稱(chēng)以及附件名稱(chēng)下方的“下載”和“打開(kāi)”超鏈接。2．功能說(shuō)明

閱讀郵件的功能說(shuō)明如下。（1）能夠根據(jù)用戶(hù)選擇的郵件序號(hào)獲取并顯示郵件信息。（2）如果用戶(hù)是第一次閱讀某封郵件，則需要在該郵件的readflag列中增加用戶(hù)賬號(hào)信息。（3）能夠計(jì)算出附件的個(gè)數(shù)并在頁(yè)面中輸出。（4）顯示郵件內(nèi)容時(shí)，必須能夠?qū)l(fā)件人在編輯郵件內(nèi)容時(shí)按【Enter】鍵生成的字符替換為本頁(yè)面中的段落標(biāo)簽，否則無(wú)論原來(lái)的郵件內(nèi)容有多長(zhǎng)，都會(huì)顯示在一個(gè)段落中；要求每個(gè)段落第一行都要縮進(jìn)兩個(gè)字符；任何情況下都要求為內(nèi)容區(qū)保留一定的頁(yè)面空間，若元素<divid='div2'>的高度不夠200px，則將高度設(shè)置為200px，否則高度根據(jù)郵件內(nèi)容高度來(lái)確定。（5）能夠根據(jù)是否存在附件來(lái)確定是否顯示元素<divid='div3'>。（6）元素<divid='div3'>中顯示的附件文件名稱(chēng)信息前面帶有文件類(lèi)型圖標(biāo)。（7）顯示元素<divid='div3'>時(shí)，除了要輸出存放在數(shù)據(jù)表中的附件信息之外，在用戶(hù)單擊“下載”或“打開(kāi)”超鏈接時(shí)，必須實(shí)現(xiàn)附件的下載或打開(kāi)操作。

圖8-13中顯示的附件信息包含隨機(jī)數(shù)標(biāo)識(shí)、附件名稱(chēng)及附件大小3部分信息，這是為了保證用戶(hù)在接收附件之前可以確定附件的大小等。

當(dāng)用戶(hù)單擊“打開(kāi)”或“下載”超鏈接時(shí)，要打開(kāi)或下載的附件都是保存在upload文件夾下的文件，這些文件名稱(chēng)前面都帶有“（隨機(jī)數(shù)標(biāo)識(shí)）”前綴。為了保證用戶(hù)能夠正常打開(kāi)或下載附件，設(shè)計(jì)超鏈接時(shí)，要在文件名稱(chēng)前面增加“（隨機(jī)數(shù)標(biāo)識(shí)）”前綴。8.2.2字符串替換函數(shù)

字符串替換是Web編程中經(jīng)常使用的操作，如要過(guò)濾掉用戶(hù)提交的不文明詞語(yǔ)信息、處理字符串中包含的危險(xiǎn)腳本、替換掉某些關(guān)鍵詞等。1．在openemail.php文件中的應(yīng)用需求

用戶(hù)在寫(xiě)郵件界面中id為content的表單元素中輸入內(nèi)容時(shí)，經(jīng)常需要進(jìn)行換行操作，這時(shí)只需按【Enter】鍵即可，而通過(guò)頁(yè)面在瀏覽器中輸出內(nèi)容要進(jìn)行換行操作時(shí)，使用的是換行標(biāo)簽<br/>或段落標(biāo)簽<p>。【Enter】鍵與頁(yè)面標(biāo)簽之間是不通用的，因此在openemail.php頁(yè)面中顯示郵件內(nèi)容時(shí)，需要將用戶(hù)編輯郵件內(nèi)容時(shí)按【Enter】鍵生成的字符替換成HTML中的段落標(biāo)簽，這需要使用字符串替換函數(shù)來(lái)完成。

PHP提供的字符串替換函數(shù)有兩個(gè)，分別是nl2br()和str_replace()。2．nl2br()函數(shù)

nl2br()函數(shù)名稱(chēng)中的數(shù)字2實(shí)際上是to的縮寫(xiě)，簡(jiǎn)單理解該函數(shù)的作用就是，當(dāng)用戶(hù)在文本區(qū)域中輸入文本時(shí)，把用戶(hù)按【Enter】鍵生成的字符替換為HTML的換行標(biāo)簽<br/>。更為準(zhǔn)確的解釋是在字符串中的每個(gè)新行（\n）之前插入HTML換行標(biāo)簽<br/>。格式：nl2br(string)參數(shù)string是必需的，是規(guī)定要檢查的字符串。

頁(yè)面文件初始運(yùn)行結(jié)果如圖8-15所示。

圖8-15中沒(méi)有出現(xiàn)PHP代碼部分輸出的內(nèi)容。

在圖8-15中輸入3段內(nèi)容之后，單擊“提交”按鈕，得到圖8-16所示的運(yùn)行界面。

從圖8-16中可以看出，輸出的第一部分內(nèi)容將用戶(hù)編輯時(shí)輸入的3個(gè)段落都顯示在一行中，即用戶(hù)在文本區(qū)域中輸入內(nèi)容時(shí)按【Enter】鍵的操作在瀏覽器中輸出時(shí)不起任何作用；輸出的第二部分內(nèi)容則將原來(lái)的3個(gè)段落分成3行來(lái)顯示。圖8-15

txt.php文件初始運(yùn)行效果圖8-16

提交文本之后的運(yùn)行界面3．str_replace()函數(shù)

str_replace()函數(shù)能夠按照用戶(hù)的要求，將用戶(hù)指定的任意子串全部替換成另一個(gè)子串。格式：str_replace(find,replace,string,count)參數(shù)說(shuō)明：參數(shù)find，必需，規(guī)定要查找的子串，也就是將要被替換掉的子串；參數(shù)replace，必需，規(guī)定要用來(lái)替換的子串；參數(shù)string，必需，規(guī)定被搜索的字符串；參數(shù)count，可選，對(duì)替換次數(shù)進(jìn)行計(jì)數(shù)，通常很少使用。8.2.3打開(kāi)并閱讀郵件功能的實(shí)現(xiàn)

設(shè)計(jì)打開(kāi)并閱讀郵件頁(yè)面，需要?jiǎng)?chuàng)建的文件有樣式文件openemail.css和頁(yè)面文件openemail.php。

分別創(chuàng)建這兩個(gè)文件，并在openemail.css文件中使用代碼body{margin:0;}定義整個(gè)頁(yè)邊距為0。

之后在設(shè)計(jì)過(guò)程中，按照頁(yè)面內(nèi)容的順序分別設(shè)計(jì)元素<divid='div1'>、<divid='div2'>和<divid='div3'>。1．設(shè)計(jì)元素<divid='div1'>（1）元素<divid='div1'>及內(nèi)部元素的樣式要求。

使用選擇符#div1定義樣式要求：寬度為auto（保證能夠適應(yīng)浮動(dòng)框架窗口寬度的變化），高度為auto（根據(jù)實(shí)際內(nèi)容的多少來(lái)確定），上下填充為10px，左右填充為0，邊距為0，背景色為#eef，下邊框?yàn)?px、#aaf顏色的實(shí)線。

頁(yè)面中所有段落的樣式直接使用HTML標(biāo)簽名選擇符p定義：上下邊距為5px，左右邊距為0，上下填充為0，左右填充為10px（保證段落內(nèi)容左右不貼邊），段落中文本的字號(hào)為10pt，文本行高為20px。（2）設(shè)計(jì)div中的內(nèi)容。

設(shè)計(jì)元素<divid='div1'>中的內(nèi)容需要通過(guò)3個(gè)操作步驟來(lái)實(shí)現(xiàn)。①獲取要打開(kāi)的郵件的序號(hào)。②連接并打開(kāi)數(shù)據(jù)庫(kù)email，以指定的郵件序號(hào)為條件查詢(xún)數(shù)據(jù)表emailmsg，得到指定序號(hào)的郵件信息。③從服務(wù)器端輸出元素<divid='div1'>，并在其內(nèi)部輸出需要的郵件信息。2．設(shè)計(jì)元素<divid='div2'>（1）元素<divid='div2'>及內(nèi)部元素的樣式要求。

使用選擇符#div2定義樣式要求：寬度為auto，高度為auto，上下填充為10px，左右填充為0，邊距為0。

元素<divid='div2'>內(nèi)部控制輸出郵件內(nèi)容的所有段落都要增加縮進(jìn)2個(gè)字符的樣式，直接使用包含選擇符#div2p定義即可。（2）設(shè)計(jì)div中的內(nèi)容。

設(shè)計(jì)元素<divid='div2'>中的內(nèi)容需要兩個(gè)操作步驟。第1步，輸出元素<divid='div2'>，在div內(nèi)部開(kāi)始處先增加一個(gè)段落標(biāo)簽，然后將當(dāng)前郵件內(nèi)容中的回車(chē)換行符使用段落標(biāo)簽替換之后，在div中輸出。第2步，判斷元素<divid='div2'>的高度是否小于200px，若小于200px，則將其設(shè)置為200px，否則使該元素的高度根據(jù)內(nèi)容的多少自動(dòng)設(shè)置。3．設(shè)計(jì)元素<divid='div3'>（1）元素<divid='div3'>及內(nèi)部元素的樣式要求。

使用選擇符#div3定義樣式要求：寬度為auto，高度為auto，填充為0，邊距為0，邊框?yàn)?px、#aaf顏色的實(shí)線。

元素<divid='div3'>中用來(lái)顯示附件個(gè)數(shù)的段落樣式與其他段落樣式不同，這里使用包含選擇符#div3.p1定義，樣式要求為：邊距為0，背景色為#eef，文本行高為40px。

所有的附件名稱(chēng)信息前面都帶有附件文件類(lèi)型圖標(biāo)，使用選擇符#div3.p2>img定義圖標(biāo)的樣式：寬度為20px，右邊距為5px，與段落中的文件名稱(chēng)之間保留距離，在垂直方向上與文件名稱(chēng)頂端對(duì)齊。（2）設(shè)計(jì)div中的內(nèi)容。

首先判斷是否需要輸出元素<divid='div3'>，若當(dāng)前郵件中有附件，則要輸出，否則不需要輸出。

輸出元素<divid='div3'>中的內(nèi)容需要3個(gè)操作步驟。第1步，使用類(lèi)名為p1的段落控制輸出附件個(gè)數(shù)。第2步，分割數(shù)據(jù)表emailmsg中attachment的列值，獲取各個(gè)附件的信息，格式為“(隨機(jī)數(shù)標(biāo)識(shí)符)文件名稱(chēng).擴(kuò)展名(文件大小)”，并將其作為即將顯示的附件名稱(chēng)信息。第3步，對(duì)上面步驟得到的附件信息進(jìn)行處理，獲取用于超鏈接“打開(kāi)”或“下載”的附件名稱(chēng)信息，格式為“(隨機(jī)數(shù)標(biāo)識(shí)符)文件名稱(chēng).擴(kuò)展名”，這是在文件夾upload中存儲(chǔ)的文件名稱(chēng)格式。（3）顯示附件前面的圖標(biāo)。

不同類(lèi)型的附件前面應(yīng)顯示不同的圖標(biāo)，項(xiàng)目提供的圖標(biāo)文件夾內(nèi)容如圖8-19所示。

上傳的所有圖片文件，都以該圖片自身的縮略圖作為文件類(lèi)型圖標(biāo)。

實(shí)現(xiàn)該功能極佳的方案是使用jQuery代碼。在使用jQuery代碼之前，需要下載jQuery庫(kù)文件，此處使用的是jquery-1.11.3.min.js。圖8-19

提供的文件類(lèi)型圖標(biāo)4．修改emailmsg表中的readflag列值

當(dāng)用戶(hù)打開(kāi)郵件之后，要判斷當(dāng)前郵件readflag列中是否已經(jīng)保存過(guò)該用戶(hù)的賬號(hào)信息，如果沒(méi)有保存過(guò)，則意味著該用戶(hù)是第一次打開(kāi)當(dāng)前郵件，需要將用戶(hù)的賬號(hào)信息寫(xiě)入數(shù)據(jù)表emailmsg的readflag列。8.2.4openemail.css和openemail.php文件的完整代碼1．openemail.css的完整代碼2．openemail.php的完整代碼任務(wù)8-3刪除郵件

需要解決的核心問(wèn)題如何將選定的郵件放入已刪除文件夾？徹底刪除郵件時(shí)，如何將upload文件夾中的相關(guān)附件文件同時(shí)刪除？

刪除郵件包括將郵件從收件箱放入已刪除文件夾的邏輯刪除、分頁(yè)瀏覽已刪除文件夾中的內(nèi)容和將已刪除文件夾中的郵件徹底刪除3個(gè)部分的操作。8.3.1將郵件放入已刪除文件夾

在receiveemail.php頁(yè)面中，選中要?jiǎng)h除的某封或者某幾封郵件前面的復(fù)選框，如圖8-20所示。圖8-20

在receiveemail.php頁(yè)面中選中要?jiǎng)h除的郵件前面的復(fù)選框

用戶(hù)單擊“刪除”按鈕之后，將執(zhí)行頁(yè)面文件delete.php，接收receiveemail.php文件中復(fù)選框組傳遞過(guò)來(lái)的郵件序號(hào)，把被選中郵件記錄的deleted列值設(shè)置為1，即把被選中郵件放入已刪除文件夾，然后返回頁(yè)面文件receiveemail.php中，并彈出消息框告知用戶(hù)移動(dòng)到已刪除文件夾中的郵件數(shù)，效果如圖8-21所示。圖8-21

在receiveemail.php頁(yè)面中顯示被移動(dòng)到已刪除文件夾中的郵件數(shù)8.3.2分頁(yè)瀏覽已刪除文件夾中的郵件

用戶(hù)單擊

email.php

頁(yè)面左側(cè)的超鏈接“