PHP動態(tài)網(wǎng)站開發(fā)項目教程（微課版） 課件 任務(wù)1、2 會員管理系統(tǒng)、項目前端開發(fā)

牟奇春主編PHP動態(tài)網(wǎng)站開發(fā)項目教程（微課版）項目1會員管理系統(tǒng)任務(wù)1準(zhǔn)備開發(fā)環(huán)境和編程環(huán)境子任務(wù)1.1配置PHP開發(fā)環(huán)境【知識儲備】

PHP（PageHypertextPreprocessor）即“頁面超文本預(yù)處理器”，是在服務(wù)器端執(zhí)行的腳本語言，尤其適用于Web開發(fā)，并可嵌入超文本標(biāo)記語言（HypertextMarkupLanguage，HTML）中。PHP的語法是在學(xué)習(xí)了C語言、吸納了Java和Perl等多種語言特色的基礎(chǔ)之上發(fā)展而來的，并根據(jù)它們的長項，如Java的面向?qū)ο缶幊?，持續(xù)提升自己。當(dāng)初創(chuàng)建PHP語言的主要目標(biāo)是讓開發(fā)人員快速編寫出優(yōu)質(zhì)的網(wǎng)站。PHP同時支持面向?qū)ο蠛兔嫦蜻^程的開發(fā)，使用非常靈活。

PHP是一種在服務(wù)器端執(zhí)行的Web應(yīng)用程序腳本語言，其開發(fā)環(huán)境主要包括PHP解釋器、Web服務(wù)器、數(shù)據(jù)庫服務(wù)器及編輯器。PHP支持Windows和Linux等多種操作系統(tǒng)。PHP典型開發(fā)環(huán)境配置為Windows+Apache+MySQL+PHP（簡稱WAMP），而Linux系統(tǒng)下的配置為Linux+Apache+MySQL+PHP（簡稱LAMP）。

Apache（音譯為阿帕奇）可以運行在幾乎所有廣泛使用的計算機(jī)平臺上，由于其具有支持跨平臺和安全性高的優(yōu)點而被廣泛使用，是最流行的Web服務(wù)器端軟件之一。它快速、可靠并且可通過簡單的應(yīng)用程序接口（ApplicationProgramInterface，API）擴(kuò)充，將Perl、Python等的解釋器編譯到服務(wù)器中。

MySQL是一個關(guān)系數(shù)據(jù)庫管理系統(tǒng)（RelationalDatabaseManagementSystem，RDBMS），由瑞典MySQLAB公司開發(fā)，屬于Oracle旗下產(chǎn)品。MySQL是最流行的關(guān)系數(shù)據(jù)庫管理系統(tǒng)之一，在Web應(yīng)用方面，MySQL是最好的關(guān)系數(shù)據(jù)庫管理系統(tǒng)應(yīng)用軟件之一。

采用PHP語言編寫完成的程序，其擴(kuò)展名是.php，這種文件是不能直接在瀏覽器中運行的，需要通過配置服務(wù)器環(huán)境的方式來運行。因此，在運行PHP文件之前，必須配置PHP開發(fā)環(huán)境，以及服務(wù)器環(huán)境。

【任務(wù)實施】1.1.1安裝小皮面板

小皮面板是PhpStudy的簡稱，其官網(wǎng)提供了Linux和Windows兩種版本，進(jìn)入小皮面板的官網(wǎng)后，根據(jù)自己的環(huán)境選擇下載相應(yīng)的版本即可。

安裝完成后，打開安裝好的小皮面板，界面如圖1.1.1所示。圖1.1.1

安裝好小皮面板打開后的界面1.1.2配置小皮面板

進(jìn)入小皮面板后，默認(rèn)處于“首頁”，在右邊的“套件”欄中單擊“Apache2.4.39”后面的“啟動”按鈕，以啟動ApacheWeb服務(wù)，單擊“MySQL5.7.26”后面的“啟動”按鈕，以啟動MySQL數(shù)據(jù)庫環(huán)境。如果系統(tǒng)沒有沖突，則在正常情況下，這兩個軟件將會成功啟動，如圖1.1.2所示。MySQL5.7.26是默認(rèn)的版本，如果需要使用MySQL8或其他版本，則只需要在左側(cè)單擊“軟件管理”，然后安裝其他版本的數(shù)據(jù)庫即可，如圖1.1.3所示。圖1.1.2

成功啟動PHP運行環(huán)境圖1.1.3

在軟件管理中安裝不同版本的數(shù)據(jù)庫

在窗口左側(cè)單擊“網(wǎng)站”，彈出一個對話框，可以在此配置網(wǎng)站，如圖1.1.4所示。在“域名”文本框中可輸入自定義的域名，如test。在“根目錄”下選擇PHP程序所在的文件夾，根據(jù)需要，可以切換PHP版本（安裝小皮面板以后，默認(rèn)使用PHP7，如果要使用其他版本的PHP，則切換至“軟件管理”），然后在PHP的相關(guān)版本選項中選擇所需版本進(jìn)行安裝，如圖1.1.5所示。

圖1.1.4

配置網(wǎng)站

圖1.1.5

安裝不同版本的PHP

網(wǎng)站配置成功后，即可在瀏覽器中輸入自定義的域名訪問網(wǎng)站。

如果要使用MySQL數(shù)據(jù)庫，則切換至“數(shù)據(jù)庫”面板，在其中可以創(chuàng)建新的數(shù)據(jù)庫。系統(tǒng)默認(rèn)的數(shù)據(jù)庫管理員用戶名是root，要修改此用戶對應(yīng)的密碼，可以單擊右邊的“操作”→“修改密碼”，如圖1.1.6所示。圖1.1.6

修改數(shù)據(jù)庫管理員的密碼子任務(wù)1.2使用PHP編程環(huán)境【知識儲備】

PhpStorm是JetBrains公司開發(fā)的一款商業(yè)化的PHP集成開發(fā)工具，其主要特色如下。（1）提供智能代碼輔助功能。PhpStorm是一個能夠真正“解析”所寫代碼的PHPIDE。它支持PHP5.3～PHP8.1，可以提供實時錯誤預(yù)防、最佳自動補全與代碼重構(gòu)、零配置調(diào)試等功能，以及擴(kuò)展的HTML、CSS和JavaScript編輯器。在處理大型項目時，PhpStorm可以顯著提高編碼效率，并節(jié)省時間。（2）提供調(diào)試、測試和性能分析功能。PhpStorm為調(diào)試、測試和分析應(yīng)用程序提供了強(qiáng)大的內(nèi)置工具。PhpStorm提供多個選項，可以利用可視化調(diào)試器調(diào)試PHP代碼。（3）PhpStorm包含WebStorm以及與HTML、串聯(lián)樣式表（CascadingStyleSheets，CSS）和JavaScript有關(guān)的所有功能。它支持所有尖端的Web開發(fā)技術(shù)，包括HTML5、CSS、Sass、Scss、Less、CoffeeScript、ECMAScriptHarmony和Jade模板等。（4）PhpStorm建立在開源的IntelliJIDEA平臺之上，產(chǎn)品自發(fā)布以來，JetBrains公司一直在不斷發(fā)展和完善這個平臺?！救蝿?wù)實施】1.2.1PhpStorm的安裝和啟動

單擊“Open”按鈕，打開PHP文件進(jìn)行編輯。單擊“CreateNewProject”按鈕可以開始創(chuàng)建新的項目。需要注意的是，一般情況下都需要按照項目的形式來編輯文件，而不要單獨打開一個文件來進(jìn)行編輯。也就是說，應(yīng)該在PhpStorm中打開（Open）項目所在的根目錄，然后在PhpStorm中編輯某個文件，而不要直接打開一個具體的文件來進(jìn)行編輯。圖1.2.1

PhpStorm軟件啟動界面1.2.2在小皮面板中配置網(wǎng)站

圖1.2.2

創(chuàng)建網(wǎng)站

圖1.2.3

打開剛創(chuàng)建的網(wǎng)站1.2.3在PhpStorm中編輯文件和配置服務(wù)器環(huán)境（1）在PhpStorm中打開E:\test目錄，如圖1.2.4所示。此時，左邊的“Project”自動顯示test，這就是當(dāng)前項目的根目錄。選中test再單擊鼠標(biāo)右鍵，選擇“New”→“PHPFile”命令，如圖1.2.5所示，可以創(chuàng)建一個新的PHP文件，將文件命名為index.php。

圖1.2.4

在PhpStorm中打開E:\test目錄

圖1.2.5在E:\test目錄中創(chuàng)建index.php文件

創(chuàng)建好PHP文件后，系統(tǒng)自動打開此文件。在右邊的編輯窗口中輸入圖1.2.6所示的內(nèi)容。圖1.2.6

在index.php中輸入內(nèi)容（2）接下來配置服務(wù)器環(huán)境。選擇“File”→“Settings”→

“Build,Execution,Deployment”→“Deployment”命令，在右邊面板中單擊“+”，再單擊“Inplace”，就創(chuàng)建了一個新的服務(wù)器，如圖1.2.7所示。在彈出的對話框的“Newservername”文本框中給新建的服務(wù)器取一個名字，如test，然后在右邊的“WebserverURL”文本框中輸入“http://test”即可，如圖1.2.8所示。圖1.2.7

創(chuàng)建新的服務(wù)器

圖1.2.8設(shè)置服務(wù)器URL根路徑（3）配置好服務(wù)器后，要運行文件查看效果時，只需將鼠標(biāo)指針移至編輯窗口右邊的瀏覽器圖標(biāo)并單擊即可，如圖1.2.9所示。單擊Chrome瀏覽器圖標(biāo)后，系統(tǒng)打開Chrome瀏覽器，并自動打開index.php文件進(jìn)行顯示，如圖1.2.10所示。圖1.2.9

運行程序圖1.2.10

程序運行結(jié)果【素養(yǎng)小貼士】

我國對知識產(chǎn)權(quán)保護(hù)的立場是非常堅定的。知識產(chǎn)權(quán)保護(hù)的相關(guān)法律規(guī)定有很多，已經(jīng)形成了比較完整的體系，包括《中華人民共和國商標(biāo)法》《中華人民共和國專利法》《中華人民共和國著作權(quán)法》《中華人民共和國反不正當(dāng)競爭法》及一些條例解釋等。

一旦侵犯知識產(chǎn)權(quán)，根據(jù)具體的情況，可能需要承擔(dān)一定的民事、刑事責(zé)任，或會受到行政處罰。因此，我們應(yīng)該積極抵制盜版軟件，維護(hù)知識產(chǎn)權(quán)，堅持購買和使用正版書刊、音像制品、電腦軟件，并主動勸親友不購買、不使用盜版制品，不閱讀、不傳播盜版讀物。如果發(fā)現(xiàn)有制作、販賣盜版制品和其他侵犯商標(biāo)權(quán)、著作權(quán)的行為，應(yīng)該積極舉報?！救蝿?wù)小結(jié)】

在任務(wù)1中，我們主要學(xué)習(xí)了PHP開發(fā)環(huán)境的配置和PHP編程環(huán)境的使用。

我們以小皮面板為例，學(xué)習(xí)了如何配置PHP開發(fā)環(huán)境。小皮面板簡單易用，使用靈活，幾乎可以滿足我們在程序開發(fā)中的所有要求。在生產(chǎn)環(huán)境中也可以使用小皮面板來部署環(huán)境。因此，掌握小皮面板的使用方法非常重要。學(xué)會使用小皮面板，再使用其他常用的PHP開發(fā)環(huán)境，也是一件比較簡單的事情。

PhpStorm是一個非常優(yōu)秀的PHPIDE，其優(yōu)勢非常明顯，但軟件本身的使用配置略顯復(fù)雜，大家可以通過網(wǎng)絡(luò)查詢其使用技巧。另外，軟件本身是英文版的，如果同學(xué)們使用起來覺得不太方便，則可以選擇“File”→“Settings”→“Plugins”命令，在其中安裝中文語言包，這樣，整個軟件就變成中文版了。牟奇春主編PHP動態(tài)網(wǎng)站開發(fā)項目教程（微課版）任務(wù)2項目前端開發(fā)子任務(wù)2.1項目開發(fā)前的準(zhǔn)備工作【任務(wù)提出】

要制作項目，首先需要進(jìn)行需求分析。小王同學(xué)計劃制作的第一個項目是“會員管理系統(tǒng)”。會員管理系統(tǒng)是大多數(shù)項目的必備模塊，完成這個項目對其他項目的完成將有極大的幫助。【任務(wù)實施】2.1.1項目需求設(shè)定

圖2.1.1～圖2.1.4所示為小王同學(xué)設(shè)計的會員管理系統(tǒng)的運行頁面。圖2.1.1

會員注冊頁面圖2.1.2

會員登錄頁面圖2.1.3

管理員頁面圖2.1.4

會員資料修改頁面2.1.2PHP的發(fā)展歷史

PHP繼承自一個名叫PHP/FI的工程。PHP/FI最早于1994年由拉斯姆斯·勒多夫（RasmusLerdorf）創(chuàng)建，最初只是一套簡單的Perl腳本，用來跟蹤訪問他主頁的人們的信息。到1996年發(fā)展為PHP/FI2.0，也就是它用C語言實現(xiàn)的第二版，在全世界已經(jīng)有幾千個用戶（估計）和大約50,000個域名安裝，大約是Internet所有域名的1%。

PHP/FI2.0在經(jīng)歷數(shù)個Beta版本的發(fā)布后，于1997年11月發(fā)布了官方正式版本。隨著PHP3.0的第一個Alpha版本的發(fā)布，PHP逐漸走向了成功。

1998年的冬天，PHP3.0官方正式版本發(fā)布不久，安迪·古特曼斯（AndiGutmans）和澤弗·蘇拉斯凱（ZeevSuraski）開始重新編寫PHP代碼。。新的引擎被稱為“ZendEngine”（這是Zeev和Andi的縮寫），成功地實現(xiàn)了這些設(shè)計目標(biāo)，并在1999年中期首次引入PHP。基于該引擎并結(jié)合了更多新功能的PHP4.0，在PHP3.0發(fā)布一年多后，于2000年5月發(fā)布了官方正式版本。

PHP5.0在長時間的開發(fā)及發(fā)布了多個預(yù)發(fā)布版本后，于2004年7月發(fā)布官方正式版本。它的核心是ZendEngine2代，引入了新的對象模型和大量新功能。

2015年12月3日，PHP7.0問世了，這是PHP的一次飛躍。PHP7.0修復(fù)了大量的bug，新增了大量功能和語法糖。這些改動涉及核心包、GD庫、PDO、ZIP、ZLIB等人們熟悉和不熟悉的核心功能與擴(kuò)展包。

PHP7.0移除了已經(jīng)被廢棄的函數(shù)，如“MySQL_”系列函數(shù)。PHP7.0的性能高于HHVM[HipHopVirtualMachine，全稱為HipHop虛擬機(jī)，會將PHP代碼轉(zhuǎn)換成高級別的字節(jié)碼，通常稱為中間語言。在運行時，HHVM通過即時編譯器將字節(jié)碼轉(zhuǎn)換為x64的機(jī)器碼。在這些方面，HHVM十分類似于C#的公共語言運行時（CommonLanguageRuntime，CLR）和Java的Java虛擬機(jī)（JavaVirtualMachine，JVM）]，并且是PHP5.6性能的兩倍。

2020年11月26日，PHP官方發(fā)布了PHP8.0的官方正式版本。子任務(wù)2.2創(chuàng)建首頁【任務(wù)實施】2.2.1創(chuàng)建項目

各項準(zhǔn)備工作就緒，小王同學(xué)要正式開始第一個項目的制作了。（1）在磁盤中創(chuàng)建一個目錄，名為member，如E:\member。（2）在小皮面板中配置一個網(wǎng)站，域名為“member”，如圖2.2.1所示。（3）打開PhpStorm，在啟動界面中選擇“Open”，打開E:\member目錄，如圖2.2.2所示。（4）選中項目根目錄member并單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“New”→“PHPFile”命令，創(chuàng)建index.php文件。成功創(chuàng)建文件后，系統(tǒng)會自動打開此文件。在打開的文件中刪除文件中默認(rèn)的代碼，然后在文件中輸入“html:5”，再按“Tab”鍵，系統(tǒng)會自動創(chuàng)建HTML5格式文檔基礎(chǔ)標(biāo)簽代碼（這是PhpStorm中的鍵盤快捷方式，類似的操作還有很多，可以通過網(wǎng)絡(luò)查詢，了解更多快捷方式）。圖2.2.1

配置網(wǎng)站域名圖2.2.2

使用PhpStorm打開項目（5）將title修改為“會員管理系統(tǒng)”，然后在頁面中創(chuàng)建1個標(biāo)題和5個導(dǎo)航菜單項，并添加相應(yīng)的CSS樣式。圖2.2.3

預(yù)覽項目首頁效果2.2.2部署項目

在PhpStorm中選擇“File”→“Settings”→“Build,

Execution,Deployment”→“Deployment”命令，如圖2.2.4所示。圖2.2.4

在PhpStorm中部署項目

在右邊單擊“+”，選擇“Inplace”命令，然后在彈出的對話框的“Newservername”文本框中輸入服務(wù)器的名字，這個名字可以自定義，小王同學(xué)就直接輸入member，如圖2.2.5所示。圖2.2.5

創(chuàng)建服務(wù)器

創(chuàng)建好服務(wù)器后，在右側(cè)的“WebserverURL”文本框中輸入在小皮面板中創(chuàng)建好的域名即可，如圖2.2.6所示。圖2.2.6

設(shè)置服務(wù)器URL根路徑子任務(wù)2.3制作注冊頁面前端部分【任務(wù)實施】2.3.1創(chuàng)建文件

在創(chuàng)建注冊頁面時，可以參考首頁文件中的部分內(nèi)容，特別是導(dǎo)航欄部分。（1）選中index.php文件并單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“Copy”→“Copy”命令。（2）選中member目錄并單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“Paste”命令。（3）在彈出的對話框中輸入新的文件名“signup.php”。（4）單擊“Refactor”按鈕，即可生成signup.php文件，如圖2.3.1所示。圖2.3.1

復(fù)制文件（5）將首頁中的導(dǎo)航欄代碼復(fù)制到signup.php文件中。由于在首頁中創(chuàng)建的導(dǎo)航鏈接在注冊頁面中也需要，相當(dāng)于其是一個公共部分，因此，這里采用了復(fù)制的方式來創(chuàng)建注冊頁面。復(fù)制代碼后，需要修改導(dǎo)航欄中當(dāng)前欄目的代碼，將“首頁”鏈接上的current樣式刪除，然后在“會員注冊”鏈接上添加current樣式。2.3.2制作注冊頁面表單

需要注意的是，在制作表單時，需要在“<form>”標(biāo)簽中設(shè)置“action”屬性，表示單擊“提交”按鈕后，將各項數(shù)據(jù)發(fā)送至對應(yīng)的網(wǎng)頁文件進(jìn)行處理。小王同學(xué)在這里設(shè)置的action屬性值是postReg.php，表示單擊“提交”按鈕后，會將用戶填寫的各項數(shù)據(jù)發(fā)送至此文件進(jìn)行下一步處理?！癿ethod”屬性指定了提交文件的方式，可以設(shè)置為“GET”和“POST”兩種方式。

2.3.3設(shè)置表單控件name屬性

對于表單中的控件而言，每一個控件都需要設(shè)置一個“name”屬性，這個屬性用于后端文件讀取其數(shù)據(jù)。其中每一組單選按鈕和每一組復(fù)選框的“name”屬性應(yīng)該保持一致。對于單選按鈕、復(fù)選框、下拉列表框等不能由用戶手動輸入結(jié)果的控件，還需要設(shè)置“value”屬性，這個屬性的值就是后端文件最終