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

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

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

圖2.1.1～圖2.1.4所示為小王同學設計的會員管理系統(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)了這些設計目標，并在1999年中期首次引入PHP?；谠撘娌⒔Y(jié)合了更多新功能的PHP4.0，在PHP3.0發(fā)布一年多后，于2000年5月發(fā)布了官方正式版本。

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

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

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

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

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

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

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

預覽項目首頁效果2.2.2部署項目

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

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

在PhpStorm中部署項目

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

創(chuàng)建服務器

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

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

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

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

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

2.3.3設置表單控件name屬性

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

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

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