PHP動(dòng)態(tài)網(wǎng)站開發(fā)項(xiàng)目教程課件 項(xiàng)目2 項(xiàng)目前端開發(fā)

PHP動(dòng)態(tài)網(wǎng)站開發(fā)項(xiàng)目教程任務(wù)2項(xiàng)目前端開發(fā)子任務(wù)2.1項(xiàng)目開發(fā)前的準(zhǔn)備工作【任務(wù)提出】

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

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

會(huì)員注冊(cè)頁面圖2.1.2

會(huì)員登錄頁面圖2.1.3

管理員頁面圖2.1.4

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在PhpStorm中部署項(xiàng)目

在右邊單擊“+”，選擇“Inplace”命令，然后在彈出的對(duì)話框的“Newservername”文本框中輸入服務(wù)器的名字，這個(gè)名字可以自定義，小王同學(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制作注冊(cè)頁面前端部分【任務(wù)實(shí)施】2.3.1創(chuàng)建文件

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

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

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

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

對(duì)于表單中的控件而言，每一個(gè)控件都需要設(shè)置一個(gè)“name”屬性，這個(gè)屬性用于后端文件讀取其數(shù)據(jù)。其中每一組單選按鈕和每一組復(fù)選框的“name”屬性應(yīng)該保持一致。對(duì)于單選按鈕、復(fù)選框、下拉列表框等不能由用戶手動(dòng)輸入結(jié)果的控件，還需要設(shè)置“value”屬性，這個(gè)屬性的值就是后端文件最終讀取到的值。特別注意，由于復(fù)選框可以選多個(gè)值，因此，其“name”屬性要在正常的名字后面添加一對(duì)方括號(hào)，表示其類型是一個(gè)數(shù)組，這樣才能讀取到多個(gè)選項(xiàng)的值。【知識(shí)儲(chǔ)備】

小王同學(xué)在學(xué)習(xí)靜態(tài)網(wǎng)站開發(fā)課程時(shí)，沒有注意過表單提交的方式。現(xiàn)在使用PhpStorm創(chuàng)建了表單，在添加“method”屬性時(shí)，看到了有兩種不同的表單提交方式，分別是“GET”和“POST”。那么這兩種提交方式到底有什么區(qū)別呢？通過查詢相關(guān)資料，他了解了這兩種方式的區(qū)別。（1）GET提交的數(shù)據(jù)會(huì)放在URL之后，以“？”分隔URL和傳輸數(shù)據(jù)，參數(shù)之間用“&”相連，如

EditPosts.php?name=boKeYuan&id=123456；POST提交的數(shù)據(jù)會(huì)放在HTTP包的Body中。（2）GET提交的數(shù)據(jù)長(zhǎng)度有限制（注意：HTTPGET方法提交的數(shù)據(jù)長(zhǎng)度并沒有限制，HTTP規(guī)范沒有對(duì)URL長(zhǎng)度進(jìn)行限制，這個(gè)限制是指特定的瀏覽器及服務(wù)器對(duì)它的限制）；POST提交的數(shù)據(jù)長(zhǎng)度沒有限制。（3）對(duì)參數(shù)的數(shù)據(jù)類型要求不同，GET只接收美國(guó)信息交換標(biāo)準(zhǔn)代碼（AmericanStandardCodeforInformationInterchange，ASCII）；而POST沒有限制。（4）GET請(qǐng)求參數(shù)會(huì)被完整保留在瀏覽器歷史記錄里；而POST請(qǐng)求參數(shù)不會(huì)保留。（5）POST比