PHP動態(tài)網(wǎng)站開發(fā)項目教程（微課版） 課件 任務(wù)5、6 會員管理系統(tǒng)管理員功能、會員管理系統(tǒng)項目優(yōu)化

牟奇春主編PHP動態(tài)網(wǎng)站開發(fā)項目教程（微課版）任務(wù)5會員管理系統(tǒng)管理員功能子任務(wù)5.1管理員登錄

實現(xiàn)管理員登錄比較通用的方法有兩種。第一種方法是單獨建立一張管理員數(shù)據(jù)表，其中的所有數(shù)據(jù)記錄都是管理員。第二種方法是在現(xiàn)有的普通用戶數(shù)據(jù)表中增加一列，用來標識是否是管理員。如果是管理員，則可以把這一列設(shè)置為1，如果是普通用戶，則將這一列設(shè)置為0。為了處理方便，可以將此列默認值設(shè)置為0，這樣，用戶注冊時默認注冊為普通用戶。

對于第一種方式，在登錄時，需要單獨做一個管理員登錄的頁面，或者在普通用戶登錄時，添加一組復(fù)選框，用來標識是否是管理員登錄。如果是管理員登錄，則后端在判斷用戶名和密碼時，查詢管理員數(shù)據(jù)表。對于第二種方式，和普通用戶登錄完全一樣，只是在登錄成功后，再判斷管理員標識列的值為多少，以判斷當(dāng)前用戶是不是管理員。

管理員登錄成功后，需要單獨保存一個Session標識符，用以標識管理員登錄。由于Session的全局性，我們在任意頁面判斷是否是管理員登錄，只需要檢查是否存在這個Session標識符即可。5.1.1修改數(shù)據(jù)表結(jié)構(gòu)以實現(xiàn)管理員登錄

小王同學(xué)決定通過上述第二種方式來實現(xiàn)管理員登錄。很明顯，在前面創(chuàng)建的數(shù)據(jù)表中并無管理員標識列。因此，他必須先修改數(shù)據(jù)表。打開phpMyAdmin，找到數(shù)據(jù)表info，單擊“結(jié)構(gòu)”按鈕，在下面的“添加1個字段”提示文字后面單擊“執(zhí)行”按鈕，然后就和創(chuàng)建數(shù)據(jù)表時一樣，正常添加列即可。小王添加的列名是admin，類型可以選擇“tinyint”，長度為1，默認值設(shè)置為0（在默認值中選擇“定義”，然后輸入0即可），表示不是管理員。如果是管理員，這一列的值自然就為1。最后單擊“保存”按鈕完成添加。最后的info數(shù)據(jù)表結(jié)構(gòu)如圖5.1.1所示。圖5.1.1

添加管理員標識列后的數(shù)據(jù)表結(jié)構(gòu)5.1.2管理員登錄后查看導(dǎo)航欄的變化

根據(jù)前面小王設(shè)計的系統(tǒng)頁面，在管理員登錄后，還需要在頂部的導(dǎo)航欄中添加一個“歡迎管理員登錄”的提示信息。因此，小王同學(xué)打開nav.php文件，在顯示登錄者信息的區(qū)域修改了部分代碼。

管理員登錄后，首頁如圖5.1.2所示。圖5.1.2

管理員登錄后的頁面子任務(wù)5.2管理員查看所有會員5.2.1判斷管理員權(quán)限

正確的做法應(yīng)該是，借鑒前面包含數(shù)據(jù)庫連接文件的方法，單獨制作checkAdmin.php文件，在其中通過Session來判斷是否有管理員權(quán)限，然后在所有需要驗證管理員權(quán)限的文件中使用include包含即可。5.2.2循環(huán)輸出數(shù)據(jù)表記錄

小王同學(xué)在制作導(dǎo)航欄時，已經(jīng)給“后臺管理”欄目添加了鏈接目標文件admin.php。因此，接下來就要制作admin.php文件了。在這個文件中需要實現(xiàn)查看所有會員列表的功能。制作好admin.php文件后，可以在導(dǎo)航欄中單擊“后臺管理”跳轉(zhuǎn)至管理員頁面。

回想一下前面實現(xiàn)的登錄功能，不管是普通用戶登錄，還是管理員登錄，登錄成功后，都是跳轉(zhuǎn)至系統(tǒng)首頁。現(xiàn)在看來，這樣做已經(jīng)不太合適了，應(yīng)該區(qū)分用戶類型，如果是管理員登錄成功，則直接跳轉(zhuǎn)至admin.php頁面；如果是普通用戶登錄成功，則跳轉(zhuǎn)至首頁即可。根據(jù)這樣的思路，小王同學(xué)再次優(yōu)化了登錄成功后的跳轉(zhuǎn)邏輯。

圖5.2.1所示為管理員登錄后查看所有會員列表的結(jié)果。圖5.2.1

管理員查看所有會員列表5.2.3了解PHP中的循環(huán)語句

1．while循環(huán)

只要指定的條件成立（運算結(jié)果為真），就循環(huán)執(zhí)行代碼塊。其語法規(guī)則為：while(條件){要執(zhí)行的代碼;}2．do...while循環(huán)

首先執(zhí)行一次代碼塊，然后在指定的條件成立時重復(fù)這個循環(huán)。其語法規(guī)則為：do{要執(zhí)行的代碼;}while(條件);3．for循環(huán)

循環(huán)執(zhí)行代碼塊指定的次數(shù)。其語法規(guī)則為：for(初始值;條件;增量){要執(zhí)行的代碼;}4．foreach循環(huán)

根據(jù)數(shù)組中的元素來循環(huán)代碼塊，也就是遍歷數(shù)組，其語法規(guī)則為：foreach($arrayas$value){要執(zhí)行代碼;}或者：foreach($arrayas$key=>$value){要執(zhí)行代碼;}子任務(wù)5.3數(shù)據(jù)分頁5.3.1理解分頁的基本原理

分頁的基本原理是，在執(zhí)行數(shù)據(jù)表查詢時，使用limit關(guān)鍵字只讀取指定條數(shù)的記錄。通過多次讀取，最終顯示所有內(nèi)容。5.3.2制作分頁文件

分頁不光要實現(xiàn)后臺數(shù)據(jù)的按頁（指定數(shù)量）獲取，還需要在前端實現(xiàn)分頁的導(dǎo)航鏈接等相關(guān)功能。同時，分頁功能也是各個系統(tǒng)經(jīng)常使用的功能之一，可能會多次重復(fù)使用，因此，小王同學(xué)還是借鑒前面的制作方法，準備單獨制作一個分頁文件。這樣，以后凡是需要使用分頁的地方，都可以直接引入此文件來實現(xiàn)分頁功能。5.3.3實現(xiàn)分頁

按照下面的步驟進行操作，可快速實現(xiàn)數(shù)據(jù)分頁。（1）在admin.php中包含page.php文件。（2）查詢記錄表的記錄總數(shù)。（3）設(shè)置每一頁顯示多少條記錄。（4）讀取當(dāng)前頁碼。（5）引用分頁函數(shù)。（6）在SQL語句中加上limit關(guān)鍵字進行分頁查詢。（7）在末尾加上分頁鏈接。圖5.3.1

數(shù)據(jù)分頁效果【知識儲備】1．SQL查詢中count()函數(shù)的使用（1）count(*)：返回表中的記錄數(shù)（包括所有列），相當(dāng)于統(tǒng)計表的行數(shù)（不會忽略列值為NULL的記錄）。（2）count(1)：忽略所有列，1表示一個固定值，也可以用count(2)、count(3)代替（不會忽略列值為NULL的記錄）。（3）count(列名)：返回指定列名的記錄數(shù)，在統(tǒng)計結(jié)果時，會忽略列值為NULL的記錄（不包括空字符串和0），即列值為NULL的記錄不統(tǒng)計在內(nèi)。（4）count(distinct列名)：返回指定列名的不同值的記錄數(shù)（相同的記錄只統(tǒng)計1次），在統(tǒng)計結(jié)果時，會忽略列值為NULL的記錄（不包括空字符串和0），即列值為NULL的記錄不統(tǒng)計在內(nèi)。count(id)

as

total表示獲取記錄總數(shù)后，以total的別名返回，所以在第13行中可以使用$info['total']來得到記錄總數(shù)。2．變量作用域

在PHP中，變量是有作用域的。所謂變量作用域（VariableScope），是指特定變量在代碼中可以被訪問到的位置。變量必須在其有效范圍內(nèi)使用，如果超出有效范圍，那么變量會失去其意義。

PHP中包含3種類型變量，分別是局部變量（LocalVariable）、全局變量（GlobalVariable）、靜態(tài)變量（StaticVariable）。子任務(wù)5.4設(shè)置或取消管理員5.4.1修改文件靜態(tài)內(nèi)容5.4.2制作setAdmin.php文件5.4.3避免刪除管理員admin

最終完成的設(shè)置（取消）管理員頁面如圖5.4.1所示。圖5.4.1

設(shè)置（取消）管理員頁面子任務(wù)5.5管理員刪除用戶5.5.1修改前端頁面

5.5.2制作后端頁面【素養(yǎng)小貼士】

一個優(yōu)秀的程序員應(yīng)該養(yǎng)成哪些良好的習(xí)慣呢？1．寫代碼前應(yīng)該先想好思路，再規(guī)劃框架，最后才是局部實現(xiàn)。2．注重代碼風(fēng)格。3．注重代碼執(zhí)行效率。4．解決問題時，對于原理性的問題，不要面向搜索引擎編程。5．在執(zhí)行一些風(fēng)險操作時，一定要仔細檢查，并做好二次確認。子任務(wù)5.6管理員修改會員資料5.6.1添加資料修改鏈接

5.6.2修改modify.php文件

【任務(wù)小結(jié)】

在本任務(wù)中，主要是完成了管理員相關(guān)功能的實現(xiàn)，包括管理員的登錄、查看所有會員列表、數(shù)據(jù)分頁、設(shè)置或取消管理員、刪除用戶、修改會員資料。管理員功能和普通用戶功能的區(qū)別就是，需要通過Session中保存的標識符來識別是否為管理員。牟奇春主編PHP動態(tài)網(wǎng)站開發(fā)項目教程（微課版）任務(wù)6會員管理系統(tǒng)項目優(yōu)化子任務(wù)6.1優(yōu)化跳轉(zhuǎn)目標頁面6.1.1文件跳轉(zhuǎn)時添加來源參數(shù)6.1.2讀取來源參數(shù)，并跳轉(zhuǎn)至目標頁面

子任務(wù)6.2注冊時使用AJAX驗證用戶名是否有效6.2.1理解異步（1）同步：瀏覽器端提交請求→服務(wù)器處理→處理完畢返回。其間瀏覽器端不能干任何事。（2）異步：瀏覽器端的請求通過事件觸發(fā)→服務(wù)器處理（這時瀏覽器端仍然可以做其他事情）→處理完畢，通過回調(diào)等方式完成結(jié)果處理。

AJAX就是一種典型的異步請求技術(shù)。AJAX（AsynchronousJavaScriptAndXML）翻譯成中文就是“異步JavaScript和XML”技術(shù)，即使用JavaScript語言與服務(wù)器進行異步交互，傳輸?shù)臄?shù)據(jù)為XML（當(dāng)然，傳輸?shù)臄?shù)據(jù)不只是XML，現(xiàn)在更多使用的是JSON數(shù)據(jù)）。

AJAX不是一種新的編程語言，而是一種使用現(xiàn)有標準的新方法。

AJAX最大的優(yōu)點是在不重新加載整個頁面的情況下，可以與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁內(nèi)容（這一特點給用戶的感受是在不知不覺中完成請求和響應(yīng)過程）。6.2.2初識jQuery

在Web頁面中，使用AJAX的一個比較方便的方法是使用jQuery中封裝好的AJAX操作。

jQuery是一個快速、簡潔的JavaScript框架，于2006年1月由約翰·雷西格（JohnResig）發(fā)布。jQuery設(shè)計的宗旨是“WriteLess,DoMore”，即倡導(dǎo)寫更少的代碼，做更多的事情。它封裝了JavaScript中常用的一些功能代碼，提供了一種簡便的JavaScript設(shè)計模式，優(yōu)化了HTML文檔操作、事件處理、動畫設(shè)計和AJAX交互。

jQuery的核心特性可以總結(jié)為：具有獨特的鏈式語法和短小清晰的多功能接口；具有高效靈活的CSS選擇器，并且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。jQuery可兼容各種主流瀏覽器。

jQuery是一種非常優(yōu)秀的前端框架，在網(wǎng)絡(luò)上可以找到很多的使用教程。jQuery自2006年誕生以來，一共發(fā)行了1.x、2.x、3.x這3個大版本。而在這3個大版本下又細分了許多小版本。這3個大版本的簡單區(qū)別如下。1．IE的支持情況比較（1）情況分析1.x版本：支持IE6、IE7、IE8。2.x、3.x版本：只支持IE9及以上的版本。（2）選擇建議

如果需要兼容IE6、IE7、IE8，則只能選擇1.x版本。

如果不需要兼容IE6、IE7、IE8，則可以選擇2.x、3.x版本。因為1.x版本中有大部分代碼是針對“舊”瀏覽器做的兼容，所以增加了運行的負擔(dān)，影響了運行效率。2．插件的支持情況比較（1）情況分析

jQuery的版本都是不向后兼容的，導(dǎo)致基于jQuery開發(fā)的插件會有兼容性問題。也就是說，當(dāng)新版本的jQuery推出后，原有的插件可能無法正常使用，需要插件作者重新開發(fā)新版本。（2）選擇建議

為了保證與各種插件有更好的兼容性，可以選擇1.x版本。3．新特性比較（1）2.x版本相較于1.x版本沒有增加什么新特性，主要是去除了對IE6、IE7、IE8的支持，從而提升了性能，減小了體積。（2）3.x版本相較于之前的版本，增加了許多新特性，也改變了一些以往的特性，具體內(nèi)容可以查閱網(wǎng)絡(luò)上的相關(guān)資料。6.2.3引入jQuery庫文件

6.2.4在表單中添加事件

6.2.5實現(xiàn)方法checkUsername()

6.2.6使用jQuery中封裝的AJAX

6.2.7制作AJAX后端文件

由于系統(tǒng)中已經(jīng)有一個用戶名是admin的用戶了，如果輸入這個用戶名來注冊，則當(dāng)鼠標光標離開用戶名控件時，在用戶名控件后面顯示綠色的“此用戶名不可用”的提示信息，如圖6.2.1所示。

在用戶名控件中輸入admin1，確保是一個新的未被使用過的用戶名，當(dāng)再次失去焦點時，會在用戶名控件后面顯示黑色的“此用戶名可用”的提示，如圖6.2.2所示。圖6.2.1

用戶名不可用的效果圖

圖6.2.2

用戶名可用的效果圖6.2.8在Chrome瀏覽器中調(diào)試網(wǎng)絡(luò)通信

（1）按“F12”鍵，可以打開或關(guān)閉瀏覽器“開發(fā)者工具”。在開發(fā)者工具中單擊上面“網(wǎng)絡(luò)”選項卡，然后把鼠標光標移至用戶名文本框中，再單擊其他地方讓用戶名控件失去焦點，此時，可以清楚地看到在“網(wǎng)絡(luò)”面板中出現(xiàn)一條網(wǎng)絡(luò)請求，如圖6.2.3所示。在名稱一欄將顯示具體請求的目標網(wǎng)址，并顯示狀態(tài)、類型等。這個狀態(tài)默認是請求成功后返回的200。如果請求的文件不存在，則返回404。具體的HTTP狀態(tài)碼有很多，大家可以查詢相關(guān)資料進一步了解。圖6.2.3

在開發(fā)者工具中查看網(wǎng)絡(luò)請求（2）在查看網(wǎng)絡(luò)請求時，默認會顯示請求圖片、JavaScript文件、CSS文件等所有的網(wǎng)絡(luò)請求，而我們在使用AJAX時，只關(guān)心異步請求后端接口文件的情況，因此，我們可以單擊“過濾”選項中的“Fetch/XHR”進行網(wǎng)絡(luò)請求的過濾顯示。（3）在網(wǎng)絡(luò)請求面板中單擊“checkUsername.php”文件，在右邊會顯示這一次網(wǎng)絡(luò)請求的詳情，圖6.2.4中顯示的是“預(yù)覽”選項卡中的內(nèi)容，其中會顯示后端文件返回的結(jié)果?？梢钥吹剑@里返回的是一個JSON對象，其中包括code和msg兩個屬性。圖6.2.4

查看網(wǎng)絡(luò)請求詳情（4）單擊“標頭”選項卡，可以查看這一次網(wǎng)絡(luò)請求的響應(yīng)標志頭、請求標志頭等詳情，當(dāng)訪問后端文件出現(xiàn)問題時，這個選項卡中的內(nèi)容可以幫助我們查詢請求的各種標志頭等信息，有利于判斷問題之所在。在“載荷”選項卡中可以看到前端傳遞給后端的具體參數(shù)。子任務(wù)6.3beforeSend的使用

使用AJAX方式的優(yōu)勢很明顯，即在頁面不刷新的情況下，可以直接更新頁面內(nèi)容，使得用戶體驗更好。但由于不是同步操作，所以如果網(wǎng)絡(luò)較慢等情況導(dǎo)致更新延遲，用戶體驗就會大打折扣。為了解決這個問題，AJAX提供了一個beforeSend回調(diào)函數(shù)，在發(fā)起請求時，可以在頁面中顯示加載中（loading）圖標，給用戶明確的提示，這樣用戶體驗會更好。

當(dāng)用戶名文本框失去焦點時，執(zhí)行AJAX程序，向后端發(fā)起請求。這個請求發(fā)起后要后端程序執(zhí)行結(jié)束，并返回結(jié)果以后，前端頁面才會執(zhí)行相應(yīng)的更新。在使用jQuery的AJAX時，可以在complete、success、error這3個回調(diào)函數(shù)中進行處理，也就是說，當(dāng)后端程序執(zhí)行完畢，并將結(jié)果返回給前端后，complete回調(diào)一定會執(zhí)行。

如果執(zhí)行成功，則還會執(zhí)行success回調(diào)，如果執(zhí)行失敗，則執(zhí)行error回調(diào)。在發(fā)起請求之前，執(zhí)行beforeSend回調(diào)。因此，可以在beforeSend中顯示一個加載中圖標，在complete、success、error中隱藏加載中圖標。子任務(wù)6.4登錄時使用AJAX判斷用戶名是否有效6.4.1修改login.php文件6.4.2顯示異步登錄的效果

完成相關(guān)代碼后，小王同學(xué)測試了最終的結(jié)果。圖6.4.1所示是輸入正常的用戶名后，異步查詢顯示“√”的結(jié)果。

圖6.4.2所示是輸入不存在的用戶名后，異步查詢顯示“×”的結(jié)果。

圖6.4.1

輸入用戶名正確

圖6.4.2

輸入用戶名錯誤子任務(wù)6.5驗證碼的使用【知識儲備】1．驗證碼簡介

什么是驗證碼？驗證碼CAPTCHA是“CompletelyAutomatedPublicTuringtesttotellComputersandHumansApart”（全自動區(qū)分計算機和人類的圖靈測試）的縮寫，是一種區(qū)分用戶是計算機還是人的公共全自動程序。驗證碼這個詞最早于2002年由美國卡內(nèi)基梅隆大學(xué)的路易斯·馮·安（LuisvonAhn）等人提出。

卡內(nèi)基梅隆大學(xué)曾試圖申請此詞為注冊商標，但該申請于2008年4月21日被拒絕。一種常用的CAPTCHA是讓用戶輸入一張扭曲變形的圖片上顯示的文字或數(shù)字，使圖片扭曲變形是為了避免被光學(xué)字符識別（OpticalCharacterRecognition，OCR）之類的計算機程序自動辨識出圖片上的文字、數(shù)字而失去效果。由于這個測試是由計算機來考驗人類，而不是像標準圖靈測試中那樣由人類來考驗計算機，所以人們有時稱CAPTCHA是一種反向圖靈測試。2．驗證碼的類型

常見的驗證碼類型有圖像類型、語音類型、視頻類型、短信類型等。圖6.5.1所示為一個典型的圖像類型的驗證碼。圖6.5.1

圖像類型的驗證碼3．驗證碼的作用（1）防止惡意破解密碼。例如，一些黑客為了獲取用戶信息，通過不同的手段向服務(wù)器發(fā)送數(shù)據(jù)，猜測用戶的信息。（2）防止惡意刷票、論壇“灌水”。以論壇為例，可能會存在某些用戶連續(xù)不停地發(fā)布一些無意義的帖子。使用驗證碼可以降低用戶發(fā)布的頻率，同時可以避免使用機器人發(fā)帖。結(jié)合程序其他功能的限制，可以防止惡意刷票和論壇“灌水”。（3）防止惡意請求。例如，用戶提交一個表單信息，通過不斷向后臺請求數(shù)據(jù)信息造成服務(wù)器資源浪費，以及惡意攻擊。（4）提高趣味性。如果能在網(wǎng)站中設(shè)計一些有趣的驗證碼方式，則也能在一定程度上提高用戶對網(wǎng)站的喜愛程度。（5）獲取用戶信息。這一點在目前的網(wǎng)站中已經(jīng)屢見不鮮了。例如，我們注冊一個網(wǎng)站的賬號，需要通過手機驗證碼才可以注冊成功。6.5.1安裝GD庫

要在PHP中使用驗證碼，必須先保證PHP的GD擴展庫（簡稱GD庫）已經(jīng)打開。GD庫（也可以稱為GD2函數(shù)庫）是一個開源的用于創(chuàng)建圖像的函數(shù)庫，該函數(shù)庫由C語言編寫，可以在Perl、PHP等多種語言中使用。GD庫提供了一系列用來處理圖片的API，使用GD庫可以處理圖片、生成圖片，也可以給圖片加水印等。

安裝PHP以后，默認已經(jīng)包含很多的擴展。通過安裝擴展可以實現(xiàn)更多的功能。

以小皮面板為例，安裝好小皮面板以后，在“D:\phpstudy_pro\

Extensions\php\php7.3.4nts\ext”目錄下存放了PHP的各種擴展文件，如圖6.5.2所示。要安裝新的擴展，只需要將擴展文件（DLL文件）復(fù)制到這個目錄中，然后在php.ini文件中添加即可。要開啟或關(guān)閉小皮面板自帶的擴展，打開小皮面板的“網(wǎng)站”面板，然后在具體的某一個網(wǎng)站上單擊“管理”→“php擴展”命令，再選擇某個擴展進行管理即可，如圖6.5.3所示。

圖6.5.3中的“gd2”就是PHP的GD庫，對應(yīng)的文件是php_gd2.

dll。此時，如果打開小皮面板的“設(shè)置”→“配置文件”→“php.ini”，然后在其中搜索“gd2”，就可以看到“extension=gd2”，這表示已經(jīng)開啟了GD庫。要關(guān)閉某個擴展，只需要在這一行前面添加一個分號（表示注釋）即可，如圖6.5