PHP網(wǎng)站開發(fā)項(xiàng)目式教程任務(wù)4課件

1、任務(wù)四 表單數(shù)據(jù)的提交主要知識(shí)點(diǎn)表單數(shù)據(jù)的驗(yàn)證系統(tǒng)數(shù)組$_POST和$_GET在接收表單數(shù)據(jù)中的應(yīng)用系統(tǒng)數(shù)組$_FILES在上傳文件中的應(yīng)用表單數(shù)據(jù)提交說明動(dòng)態(tài)網(wǎng)站中很重要的一個(gè)功能是完成用戶信息的提交與處理，收集并提交用戶信息則主要是通過表單界面來實(shí)現(xiàn)（注意，用表單界面提交數(shù)據(jù)并不是唯一的方法）。該功能的實(shí)現(xiàn)包括兩個(gè)部分的代碼設(shè)計(jì)：靜態(tài)的表單頁面文件設(shè)計(jì)服務(wù)器端獲取表單數(shù)據(jù)的動(dòng)態(tài)頁面設(shè)計(jì)上面兩部分代碼完成之后，需要將兩者聯(lián)合執(zhí)行才能達(dá)到最終的要求。4.1.1 表單界面設(shè)計(jì)表單知識(shí)點(diǎn)回顧（1）設(shè)計(jì)表單界面時(shí)，必須要使用標(biāo)記生成表單容器，在該容器中添加各種表單元素或非表單元素，標(biāo)記中當(dāng)前需要設(shè)置

2、的屬性是method，取值可以是post和get兩種。（2）表單與表格的嵌套應(yīng)用格式 表單元素 （3）表單元素的生成生成表單元素：文本框、密碼框、單選按鈕、復(fù)選框、提交和重置按鈕都需要使用標(biāo)記生成，在標(biāo)記中設(shè)置type屬性取值分別是text、password、radio、checkbox、submit和reset來生成相關(guān)的元素；下拉列表需要使用和兩對(duì)標(biāo)記來生成，其中用于生成列表框，而用于生成各個(gè)選項(xiàng)；文本區(qū)域則需要使用標(biāo)記生成創(chuàng)建圖示表單界面（保存為4-1.html）表格要求：10行三列表格，第一行單元格合并，內(nèi)容居中表格第九行高度65px，其余行的高度都是25px表格第一列和第三列寬度都是

3、150px，第二列寬度是300px使用樣式設(shè)置表格所有單元格字號(hào)為10pt，然后設(shè)置第一個(gè)行的單元格字號(hào)20pt、加粗、居中頁面設(shè)計(jì)要求為了能夠使用腳本獲取各個(gè)元素的取值來完成表單數(shù)據(jù)驗(yàn)證，要求為每個(gè)需要提交數(shù)據(jù)的表單元素設(shè)置id屬性；另外，為了能夠在服務(wù)器端獲取表單元素提交的數(shù)據(jù)，又需要為相應(yīng)表單元素設(shè)置name屬性，通常，為了減少將兩個(gè)屬性值弄混的麻煩，建議大家直接將各個(gè)元素中這兩個(gè)屬性設(shè)置為相同的取值即可。一句話：表單元素通常都需要設(shè)置name和id屬性，兩者取值相同即可表單元素要求-1名字文本框的name和id屬性取值都是uname；性別單選按鈕組的name是sex，選中“男”之后，提

4、交的數(shù)據(jù)是“男”，選中“女”之后提交的數(shù)據(jù)是“女”；思考：使用哪個(gè)屬性設(shè)置單選按鈕提交的數(shù)據(jù)？年齡文本框的name和id屬性取值都是age；個(gè)人密碼框的name和id都是psd1；確認(rèn)密碼框的name和id都是psd2；使用標(biāo)記中的value屬性設(shè)置單選按鈕提交的數(shù)據(jù)表單元素要求-2愛好復(fù)選框組設(shè)置的name是like，選中各個(gè)復(fù)選框之后提交的數(shù)據(jù)分別是看書、足球、音樂和爬山。顏色下拉列表框設(shè)置的name和id都是color；個(gè)人介紹文本區(qū)域設(shè)置的name和id都是jieshao。表單元素的樣式要求為：文本框、密碼框、下拉列表框的寬度定義為280px，高度定義為20px；文本區(qū)域的寬度定義為2

5、80px，高度為60px思考問題：標(biāo)記中width=280 height=20是否起作用？上述樣式采用何種選擇符定義比較方便？4.1.2 表單數(shù)據(jù)驗(yàn)證運(yùn)行表單界面提交數(shù)據(jù)，觀察效果并思考問題：在表單界面中輸入不符合字符個(gè)數(shù)要求的姓名”liuli”，點(diǎn)擊提交，能否提交到服務(wù)器端？這樣是否合理？要如何阻止非法數(shù)據(jù)提交到服務(wù)器端？表單數(shù)據(jù)驗(yàn)證在服務(wù)器端進(jìn)行還是在瀏覽器端進(jìn)行？表單數(shù)據(jù)驗(yàn)證要求對(duì)4-1.html頁面文件中的數(shù)據(jù)需要進(jìn)行的驗(yàn)證如下：（1）要求姓名必須在6到20個(gè)字母之間（此處只進(jìn)行字符個(gè)數(shù)判斷，不需判斷輸入的字符是否是英文字母）；（2）要求年齡數(shù)據(jù)要在0100之間；（3）個(gè)人密碼需要在6

6、10個(gè)字符之間；（4）兩次輸入的密碼必須相同；（5）個(gè)人介紹文本區(qū)域不能為空。上面每個(gè)部分只要不符合要求，就直接使用javascript腳本中的alert()函數(shù)彈出一個(gè)消息框顯示相應(yīng)的錯(cuò)誤提示信息即可。需要用腳本代碼解決的基本問題說明：javascript腳本中的變量使用var定義，不需使用$符號(hào)開始，例如 var len定義變量len1.如何使用腳本代碼獲取表單元素uname？document.getElementById(uname)2.如何使用腳本代碼獲取表單元素uname的value值？document.getElementById(uname).value3.若str=studen

7、t;，如何獲取$str的長(zhǎng)度？length屬性的應(yīng)用：str.length創(chuàng)建腳本文件4-1.js完成用戶名合法性驗(yàn)證創(chuàng)建函數(shù)validate()，在函數(shù)中完成如下功能：獲取用戶名信息，使用變量uname保存獲取變量uname中串的長(zhǎng)度，使用變量len保存判斷l(xiāng)en值的大小，若低于6或者超出20，則使用alert()設(shè)置彈出消息，并返回false，表示函數(shù)執(zhí)行到此結(jié)束腳本文件的引用與函數(shù)的調(diào)用在4-1.html文件首部使用引用腳本文件此處設(shè)計(jì)的腳本函數(shù)validate()需要在點(diǎn)擊submit提交按鈕之后調(diào)用，點(diǎn)擊該按鈕后，將會(huì)觸發(fā)標(biāo)記中的onsubmit事件；在標(biāo)記中使用onsubmit=r

8、eturn validate()調(diào)用函數(shù)問題：此處return的作用如何？腳本函數(shù)全部功能的實(shí)現(xiàn)在validate()函數(shù)中繼續(xù)完善年齡、密碼和個(gè)人介紹信息的數(shù)據(jù)正確性驗(yàn)證過程。要求年齡數(shù)據(jù)要在0100之間；個(gè)人密碼需要在610個(gè)字符之間；兩次輸入的密碼必須相同；個(gè)人介紹文本區(qū)域不能為空。思考問題每個(gè)模塊中的“return false”的作用是什么？若是去掉，在相應(yīng)元素中輸入不符合要求的數(shù)據(jù)之后結(jié)果將會(huì)如何？表單數(shù)據(jù)驗(yàn)證函數(shù)的完整代碼4.1.3 使用HTML5新技術(shù)完成數(shù)據(jù)驗(yàn)證對(duì)4-1.html頁面文件中的數(shù)據(jù)需要進(jìn)行的驗(yàn)證如下：（1）要求姓名必須在6到20個(gè)字母之間；（2）要求年齡不能為空，

9、并且數(shù)據(jù)要在0100之間；（3）個(gè)人密碼需要在610個(gè)字符之間；（4）兩次輸入的密碼必須相同；（仍舊要使用js函數(shù)實(shí)現(xiàn)）（5）個(gè)人介紹文本區(qū)域不能為空。完成用戶名的合法性驗(yàn)證對(duì)用戶名的要求是6到20個(gè)字母，可以使用HTML5中表單元素新屬性pattern定義正則表達(dá)式完成在用戶名文本框中添加下面代碼pattern=a-zA-Z6,20上面代碼中a-zA-Z表示可以出現(xiàn)的字符只有大小寫字母，6,20表示最少6個(gè)，最多20個(gè)用戶輸入數(shù)據(jù)點(diǎn)擊提交時(shí)自動(dòng)完成驗(yàn)證完成年齡的合法性驗(yàn)證對(duì)年齡的要求是要求年齡不能為空，并且數(shù)據(jù)要在0100之間，使用HTML5中新型表單輸入元素number結(jié)合新屬性requi

10、red可以實(shí)現(xiàn)實(shí)現(xiàn)方案：將原來的年齡框type屬性取值由text文本框換做number數(shù)字框，設(shè)置最小值min為0，最大值max為100另外使用屬性required =required設(shè)置不允許為空用戶輸入數(shù)據(jù)點(diǎn)擊提交時(shí)自動(dòng)完成驗(yàn)證完成密碼的合法性驗(yàn)證對(duì)密碼的要求是個(gè)人密碼需要在610個(gè)字符之間；使用正則表達(dá)式屬性pattern完成，在密碼框中增加如下代碼pattern= a-zA-Z0-9!#$%&*6,10 密碼中可以使用特殊字符（根據(jù)需要可以增加）完成個(gè)人介紹的合法性驗(yàn)證對(duì)個(gè)人介紹的要求是不允許為空在個(gè)人介紹文本區(qū)域中使用required屬性即可4.2 表單數(shù)據(jù)提交用戶在表單界面中輸入數(shù)

11、據(jù)并進(jìn)行合法性驗(yàn)證之后，必須要將數(shù)據(jù)提交給服務(wù)器，由服務(wù)器對(duì)這些數(shù)據(jù)做進(jìn)一步的處理，例如，將注冊(cè)的數(shù)據(jù)插入到數(shù)據(jù)庫中，或者從數(shù)據(jù)庫中查詢登錄的數(shù)據(jù)，或者查詢用戶需要的其他信息等等。需要解決的關(guān)鍵問題（重點(diǎn)知識(shí)）：數(shù)據(jù)提交到服務(wù)器后存儲(chǔ)在哪里？如何在服務(wù)器端獲取這些數(shù)據(jù)？4.2.1 系統(tǒng)內(nèi)置數(shù)組$_POST和$_GET服務(wù)器端將根據(jù)表單標(biāo)記中method屬性的取值確定獲取數(shù)據(jù)的方法若method取值為post，則使用系統(tǒng)數(shù)組$_POST接收表單數(shù)據(jù)；若method取值為get，則使用系統(tǒng)數(shù)組$_GET接收表單數(shù)據(jù)，即一個(gè)表單所提交的數(shù)據(jù)總是以一個(gè)數(shù)組的方式保存在服務(wù)器中。思考問題：數(shù)組$_POS

12、T和$_GET的鍵名如何？如何訪問并獲取其中的數(shù)組元素？訪問系統(tǒng)數(shù)組$_POST或者$_GET$_POST和$_GET都是關(guān)聯(lián)數(shù)組，都需要通過鍵名來訪問數(shù)組元素，在處理表單數(shù)據(jù)時(shí)，它們所使用的鍵名通常是表單元素name屬性的取值，例如，若文本框中name=uname，則使用$_POSTuname可以獲取到該文本框提交到服務(wù)器端的數(shù)據(jù)。使用echo $_POSTuname或者echo $_POSTuname或者echo $_POSTuname即可輸出用戶提交的名字強(qiáng)調(diào)鍵名對(duì)引號(hào)的要求若數(shù)組元素未放入引號(hào)中，則鍵名必須使用單引號(hào)或者雙引號(hào)定界；若數(shù)組元素放在雙引號(hào)定界中，則鍵名不需要引號(hào)觀察效果并

13、思考問題在輸出結(jié)果中，復(fù)選框組“你的興趣愛好”部分顯示的結(jié)果是什么？說明什么問題？如何解決這一問題即在服務(wù)器端如何獲取和保存復(fù)選框組提交的數(shù)據(jù)？4.2.2 復(fù)選框組數(shù)據(jù)的提交復(fù)選框組提交的數(shù)據(jù)在服務(wù)器端以一個(gè)數(shù)組的形式保存，4-1.html中因?yàn)楸韱蝔orm標(biāo)記中method屬性取值為post，復(fù)選框組名稱為like，在服務(wù)器端使用$_POSTlike接收并保存復(fù)選框組提交的數(shù)據(jù)，$_POSTlike則以一個(gè)數(shù)組的形式存在思考問題：數(shù)組元素的個(gè)數(shù)如何確定？數(shù)組元素的類型是什么？數(shù)組元素的個(gè)數(shù)取決于用戶選擇的復(fù)選框的個(gè)數(shù)，而不是復(fù)選框組中包含的復(fù)選框的個(gè)數(shù)該數(shù)組是一個(gè)索引數(shù)組，索引值從0開始，使

14、用$_POSTlike0可以獲取到用戶選擇的第一個(gè)復(fù)選框所提交的數(shù)據(jù)，其它則以此類推。復(fù)選框組數(shù)據(jù)的提交例如，若用戶選擇的是“音樂”和“爬山”兩項(xiàng)，則數(shù)組$_POSTlike有兩個(gè)元素，元素$_POSTlike0的值是“音樂”，元素$_POSTlike1的值是“爬山”；再如，若用戶選擇的是“看書”、“音樂”和“爬山”三項(xiàng)，則數(shù)組$_POSTlike有三個(gè)元素，元素$_POSTlike0的值是“看書”，元素$_POSTlike1的值是“音樂”，元素$_POSTlike2的值是“爬山”；思考問題若用戶選擇了“看書”和“爬山”兩個(gè)選項(xiàng)，如何做到將兩個(gè)選項(xiàng)數(shù)據(jù)使用變量$like保存為“看書 爬山”？若

15、用戶選擇了“看書”、“音樂”和“爬山”三個(gè)選項(xiàng)，又如何做到將三個(gè)選項(xiàng)數(shù)據(jù)使用變量$like保存為“看書 音樂 爬山”？說明：使用變量$like以上面形式保存選項(xiàng)數(shù)據(jù)的目的是可以直接使用 echo $like;輸出復(fù)選框組提交的數(shù)據(jù)函數(shù)implode()的應(yīng)用為了方便輸出和保存，通常要將復(fù)選框組提交的多個(gè)數(shù)據(jù)合并到一個(gè)變量中，例如用戶選擇了看書、音樂和爬山，則設(shè)置變量$like= 看書 音樂 爬山可使用函數(shù)implode()來完成，格式如下：implode(參數(shù)1，參數(shù)2):參數(shù)1：指定在數(shù)組各個(gè)元素值之間的間隔字符參數(shù)2：數(shù)組名稱使用指定的間隔字符將指定數(shù)組的多個(gè)元素的值連接在一起，返回值為包

16、含了所有元素及位于元素與元素之間的分割符的字符串函數(shù)implode()示例$like=implode( ,$_POSTlike);將數(shù)組$_POSTlike中各個(gè)元素的值使用空格字符間隔連接成一個(gè)長(zhǎng)串4.2.3 獲取并處理表單數(shù)據(jù)創(chuàng)建4-1.php，接收并輸出下圖中數(shù)據(jù)思考問題：?jiǎn)栴}1：能否獨(dú)立運(yùn)行4-1.php文件？為什么？該文件需要在何時(shí)運(yùn)行？問題2：如何做到點(diǎn)擊頁面4-1.html中的“提交”按鈕時(shí)能夠運(yùn)行4-1.php文件？1. 4-1.php文件不能獨(dú)立運(yùn)行2. 該文件中使用的數(shù)組元素鍵名都是表單界面元素name屬性的值，獨(dú)立運(yùn)行時(shí)，這些元素不存在，鍵名不可使用3. 需要在運(yùn)行4-1

17、.html文件輸入數(shù)據(jù)并點(diǎn)擊提交按鈕之后才能運(yùn)算4-1.php文件建立4-1.html和4-1.php文件之間的關(guān)聯(lián)建立關(guān)聯(lián)的方法：在4-1.html文件的標(biāo)記中增加action=4-1.php即可。表單標(biāo)記中的action屬性的作用是設(shè)置一個(gè)服務(wù)器端的腳本文件，此處是php 文件，該文件用于獲取并處理當(dāng)前表單提交的數(shù)據(jù)，處理的方式是可以直接在瀏覽器中輸出，也可以將其存儲(chǔ)到數(shù)據(jù)庫或其他文件中以備后用問題演示與思考：使用在文件夾中雙擊運(yùn)行4-1.html文件，輸入數(shù)據(jù)并提交，結(jié)果如何？為什么？4.2.4 使用isset() 函數(shù)解決單選按鈕和復(fù)選框的問題觀察效果：運(yùn)行4-1.html頁面文件時(shí)，

18、若是用戶沒有選擇性別就提交數(shù)據(jù)，會(huì)出現(xiàn)什么提示？若是沒有選擇興趣愛好就提交數(shù)據(jù)，又會(huì)出現(xiàn)什么提示？若是用戶沒有選擇性別，會(huì)出現(xiàn)下面的提示信息：Notice: Undefined index: sex in E:apachehtdocsexam4-14-1.php on line 4若是用戶沒有選擇興趣愛好，則會(huì)出現(xiàn)下面的提示信息：Notice: Undefined index: like in E:apachehtdocsexam4-14-1.php on line 8 Warning: implode(): Invalid arguments passed in E:apachehtdocs

19、exam4-14-1.php on line 8產(chǎn)生問題的原因及解決方案產(chǎn)生問題的原因是：?jiǎn)芜x按鈕或者復(fù)選框都屬于組元素，若是沒有選擇選項(xiàng)，相當(dāng)于該組不存在，即$_POSTsex和$_POSTlike不存在，所以提示用戶沒有定義索引sex或者like。解決方案是：使用這樣的組元素之前，需要先判斷一下該組是否存在，實(shí)現(xiàn)這一功能，要使用的函數(shù)是isset()。isset()函數(shù)的功能、格式和返回值isset()函數(shù)專門用于檢測(cè)某個(gè)元素是否設(shè)置，函數(shù)格式如下：bool isset(參數(shù))參數(shù)可以是一個(gè)普通變量，也可以是一個(gè)數(shù)組元素，若是變量或數(shù)組元素存在，則返回真值，否則返回假值。思考問題：代碼is

20、set($_POSTsex)的作用是什么？判斷數(shù)組元素$_POSTsex是否存在，存在（即用戶選擇了選項(xiàng)）就返回真值，否則返回假值使用isset()函數(shù)解決問題使用isset()函數(shù)時(shí)因其返回值為真或假的特點(diǎn)，通常會(huì)將其作為if語句的條件，根據(jù)結(jié)果的真假來確定要進(jìn)行的處理操作在4-1.php文件中增加條件判斷結(jié)構(gòu)：若用戶選擇了性別，就輸出性別結(jié)果，否則輸出“你沒有選擇性別”；若用戶選擇了興趣愛好，就將所有興趣愛好結(jié)果合并到一個(gè)變量中再輸出，否則輸出“你沒有選擇興趣愛好”。4.3 文件上傳功能實(shí)現(xiàn)你在哪些網(wǎng)站或應(yīng)用程序中上傳過文件？文件上傳功能需要解決的問題：瀏覽器端（表單中）如何增加上傳文件的

21、功能服務(wù)器端如何獲取上傳文件的信息并按指定位置保存上傳文件瀏覽器端的設(shè)置第一，需要在表單標(biāo)記中設(shè)置Enctype屬性值為multipart/form-data，只有設(shè)置為multipart/form-data編碼格式，才能完成傳遞文件數(shù)據(jù)；另外完成文件上傳時(shí)，表單中method屬性取值需要設(shè)置為post。第二，action屬性必須指定能夠接收并處理上傳文件的PHP文件。第三，必須在表單界面中增加文件域元素，使用標(biāo)記的type屬性值 file來生成文件域元素，該元素需要設(shè)置name屬性的取值。例題創(chuàng)建頁面文件up.html，設(shè)計(jì)如圖所示表單界面，設(shè)文件域元素名稱為file1代碼如圖所示4.3.2

22、 服務(wù)器端的功能設(shè)置服務(wù)器端獲取上傳文件的信息上傳文件包括文件名、文件類型、文件大小、存儲(chǔ)位置等相關(guān)信息在服務(wù)器端需要通過系統(tǒng)數(shù)組$_FILES獲取這些信息問題導(dǎo)入：作為一個(gè)系統(tǒng)數(shù)組， $_FILES的鍵名如何？系統(tǒng)數(shù)組$_FILES的應(yīng)用數(shù)組的鍵名系統(tǒng)內(nèi)置數(shù)組$_FILES是一個(gè)二維關(guān)聯(lián)數(shù)組，第一個(gè)維度的鍵名是表單界面中文件域元素name屬性的取值，若是存在多個(gè)文件域元素，則它們的name屬性取值都各不相同；第二個(gè)維度的鍵名則是由系統(tǒng)提供的固定鍵名，常用的有name、type、size、tmp_name和error。$_FILES數(shù)組第二個(gè)鍵名的用法假設(shè)文件域元素name屬性取值為file1

23、，則第二個(gè)鍵名的用法和說明如下：$_FILESfile1name：表示被上傳文件的名稱；$_FILESfile1type：表示被上傳文件的類型；$_FILESfile1size：表示被上傳文件的大小，以字節(jié)計(jì)；$_FILESfile1tmp_name：表示存儲(chǔ)在服務(wù)器的文件的臨時(shí)副本的名稱；$_FILESfile1error：表示由文件上傳導(dǎo)致的錯(cuò)誤代碼。將上傳文件的大小使用kB表示函數(shù)round()的應(yīng)用$size=round($_FILESf1size/1024,2).”kB”函數(shù)round()對(duì)第一個(gè)參數(shù)指定的數(shù)據(jù)進(jìn)行四舍五入，保留的小數(shù)位數(shù)由第二個(gè)參數(shù)指定例題創(chuàng)建up.php文件，獲取up.html中文件域元素file1所上傳的文件信息，并輸出，結(jié)果如圖所示代碼如圖所示思考問題根據(jù)前面觀察的效果，上傳的文件默認(rèn)存放在哪里？文件名稱如何？如何將用戶上傳的文件使用指定名稱保存在指定位置？上傳的文件，默認(rèn)存放在系統(tǒng)盤符下的存放臨時(shí)文件的文件夾中，文件的名稱也采用了臨時(shí)名稱形式。使用函數(shù)move_uploaded_file()完成函數(shù)move_uploaded_file()格式：move_uploade