第四章 網頁表單與資料傳遞.

Presentation on theme: "第四章 網頁表單與資料傳遞."— Presentation transcript:

1 第四章 網頁表單與資料傳遞

2 章節目錄 建立NetBeans專案 表單設計 變數的使用 運算子 PHP 接收表單資料 本章結論 重點提示 問題與討論

3 建立NetBeans專案-1/2 請點選程式集內「NetBeans」內「NetBeans IDE X」（X代表版本編號，撰稿時的版本為6.8版） 開啟NetBeans IDE後，請點選「File」功能表內「New Project」建立新專案。

4 建立NetBeans專案-2/2 Choose Project Name and Location Run Configuration
PHP Frameworks 新增網頁 返回章節目錄

5 NetBeans專案- Choose Project-1/2
選擇專案類別，「Categories」內分別有「PHP」與「Samples」兩大類。 「Categories」內的「PHP」點選後有三個選項可以挑選如下： PHP專案選項 說明 PHP Application 開啟新的專案 PHP Application with Existing Sources 將PHP檔案匯入到專案內 PHP Application from Remote Server 開啟遠端主機的PHP檔案

6 NetBeans專案- Choose Project-2/2
「Categories」內的「Samples」點選後，系統提供「Air Alliance Sample Application」這一個專案給您作為學習的參考。 請點選「Categories」內「PHP」後右側點選「PHP Application」，再請按下「Next」鈕。 返回建立專案

7 NetBeans專案- Name and Location-1/4
設定專案的名稱與位置。請先設定「Project Name」（專案名稱），Netbeans以專案為中心來進行PHP管理。 本書各章均會建立一個獨立的專案，所以本章的專案名稱請設定為「4」。 「PHP Version」指NetBeans可分析的PHP語法版本，NetBeans 6.8版可分析PHP 5.2/5.1及PHP 5.3兩套語法，請選擇「PHP 5.2/5.1」。 「Defolder Encoding」請設定為「UTF-8」。

8 NetBeans專案- Name and Location-2/4
若建立專案時也能做專案的備份，請點選「Put NetBeans metadata into a separate directory」，選擇其他目錄作為備份位置。

9 NetBeans專案- Name and Location-3/4
Netbeans提供「執行」工具可讓您編輯完PHP後呼叫瀏覽器開啟網頁，但Netbeans原預設位置為「My Documents \ NetBeans Projects \PhpProject」，而這位置並不是Apache預設的網頁位置，因此我們要變更儲存的位置，以便於日後PHP網站的維護。 請點選「Source Folder」旁 「Browse」鈕後，切換目錄到「Appserv\www」內，點選 鈕建立「4」這個資料夾後，選取該資料夾後請點選「開啟」鈕。

10 NetBeans專案- Name and Location-4/4
回到原設定畫面後，請再檢視一次，若沒有問題請按「Next」鈕繼續。 請留意資料夾名稱只能使用英文與數字，且字與字之間請勿空格。 返回建立專案

11 NetBeans專案- Run Configuration-1/3
協助設定如何執行PHP專案。這裡有三個選項將分別介紹如下： PHP專案選項 說明 PHP Application 開啟新的專案 PHP Application with Existing Sources 將PHP檔案匯入到專案內 PHP Application from Remote Server 開啟遠端主機的PHP檔案

12 NetBeans專案- Run Configuration-2/3
請點選「Local Web Site(running on local web server)」，確認「Project URL」（專案的網址）沒有錯誤（原則上「

13 NetBeans專案- Run Configuration-3/3
什麼是「以命令列的方式執行PHP引擎」？ PHP可以設計視窗程式嗎？ 以上兩個問題請參考第4-7頁介紹。 返回建立專案

14 NetBeans專案- PHP Frameworks
Symfony是一個完整的Web架構，它所提供的元件及工具可讓PHP網頁設計師進行更複雜且快速的網頁開發，本書的專案並未使用Symfony，Symfony將於進階學習手冊裡再做詳細說明。請您不用勾選後按下「Finish」鈕後完成專案設定。 返回建立專案

15 NetBeans專案-新增網頁 請點選「File」功能表內「New File」。
開啟檔案時會有PHP、XML與Other三大類別可以挑選，本書會用到頁介紹，基礎課程會使用到的是PHP類別內的「PHP Web Page」及Other類別內的「HTML File」。 各類別說明請參考第4-9頁介紹。 返回建立專案

16 表單設計-1/2 瀏覽器如何將網頁資訊送至Server端呢？必須透過html標籤內<form></form>表單元件才能將資料送出。請開啟新的HTML檔案，我們來設計表單。 <form>標籤內必須新增其他參數，才有辦法將<form>與</form>標籤內所有元件內容送至PHP 屬性 說明 action 指定表單資料要送到哪裡 method 指定表單送出的資料以什麼方式送達，傳送方式有get與post兩種方式 name 表單名稱

17 表單設計-2/2 表單上的元件可分為 文字輸入 選擇鈕與核選方塊 下拉式選單 按鈕 返回章節目錄

18 文字輸入元件-1/4 文字輸入元件共有三種：單行文字框text、密碼password與多行文字框textarea。請先依本書第4-11頁編輯表單網頁（「4」資料夾內「1.htm」）。 編輯完成後可按下NetBeans的「Run」功能表內的「Run File」或是按鍵盤的「Shift」加上「F6」就可以進行網頁預覽，預覽完後請關閉網頁或該分頁，您就不需要開啟網頁後再輸入網址來做網頁測試。

19 文字輸入元件-2/4 text與password這兩個元件共通的屬性： 所以請您試試看，上例中單行文字框與密碼文字框最多能輸入幾個字呢？
name 要傳送資料的元件名稱，當表單把資料送出後，單行文字框或密碼文字框的資料，就以該元件的name作為名稱送出，後端網頁接收時就會以name作為接收的名稱。 size 顯示在網頁上的寬度，例如8個英文字母。 maxlength 可以輸入的最大文字數量，例如上例，代表只能輸入6個英文字母。 Value 預設的文字。

20 文字輸入元件-3/4 單行文字框無法輸入大量文字，請改用多行文字框textarea。請先依本書第4-12頁編輯表單網頁（「4」資料夾內「2.htm」）。

21 文字輸入元件-4/4 多行文字框畫面大小不侷限於單行，所以可在<textarea>標籤內設定 rows（「列」，或「高」）與cols（「行」，或「寬」）的長度。 而<textarea>標籤內的name代表傳送資料的元件名稱，當表單把資 料送出後，多行文字框的資料就以該元件的name作為名稱送出，後 端網頁接收時就會以name作為接收的名稱。 多行文字框的<textarea>標籤必須成雙成對，必須要有</textarea>作 為結尾。 返回表單設計

22 選擇鈕與核選框-1/5 選擇鈕與核選框的差別在於選擇鈕是單選，核選框是複選。
請先依本書第4-13頁編輯可選擇性別與血型的表單網頁（「4」資料夾內「3.htm」）。

23 選擇鈕與核選框-2/5 以<input type=“radio” >語法設計選擇鈕元件，在<input>標籤內，可 看到以下的屬性： 屬性 說明 name 選擇鈕的名稱，若要讓多個選擇鈕成為「多選一」狀態，請將這幾個選擇鈕的name設定為相同的名字。 value 選擇鈕的內容。 checked 代表已將這個選項設定為預設選項。

24 選擇鈕與核選框-3/5 設定為同一組的選擇鈕名字name必須相同，例如範例中我們要請使 用者選取他的性別與血型，性別的兩個選擇鈕的名稱必須相同（name=“sex”），而血型的四個選擇鈕的名稱也是相同（name=“blood”）。 選擇鈕的值（value）代表要傳遞出去的內容，例如<input type=“radio” name=“blood” value=“A”>，代表當我按下這個按鈕， 按鈕的value為A，代表按下這個選擇鈕後傳送出去的內容為 「A」。

25 選擇鈕與核選框-4/5 請先依本書第4-15頁編輯可選擇用過哪些作業系統的表單（「4」資 料夾內「4.htm」）。

26 選擇鈕與核選框-5/5 我們以<input type="checkbox" >語法設計核選框元件，在<input>標籤內，我們可看到以下的屬性： 屬性 說明 name 核選框的名稱。每一個核選框的名稱均不同，這樣才可判斷選取了哪些核選框，如果核選框的名稱取相同名字，要以陣列的方式宣告。 value 核選框的值。當我選取了核選框，代表選擇了這個值。 checked 代表選項設定為勾選 返回表單設計

27 下拉式選單-1/3 倘若資料項目多，網頁上會佈滿選擇鈕或核選框，那有沒有更方便 的方法呢？
倘若資料項目多，網頁上會佈滿選擇鈕或核選框，那有沒有更方便 的方法呢？ 可用<select name=”自訂名稱” size=”1”>語法規劃下拉式選單。 <select>標籤是設定下拉式選單的標籤，在這個標籤內，我們可看到 以下的屬性： 屬性 說明 name 下拉式選單的名稱。下拉式選單內傳輸的資料，都是以這裡的名稱來傳輸。 size 顯示下拉式選單內選項的高度，預設值為1，也就是只會顯示一個選項的高度。

28 下拉式選單-2/3 <select>與</select>標籤內可加入多個<option>標籤，而<option> 標籤的目的是設定下拉式選單內的選單 。 請依本書第4-16頁編輯旅遊行程的下拉式選單網頁（「4」資料夾 內「5.htm」）。

29 下拉式選單-3/3 以<option value=“8”>高雄旗津</option>為例，網頁上顯示 「高雄旗津」，但當您在下拉式選單選取了這個選項後，傳送的值 為「8」。 option value的內容可以是中文的，這裡為了區別「傳遞的資料內容」與「顯示在網頁的文字」可以不同，所以才會如此設計。 返回表單設計

30 按鈕元件-1/3 <input type=“submit”>這一個按鈕元件會將表單內所有資料會送至表單 的action指定的位置。 <input type=" reset ">按鈕元件則會取消表單上所有的資料。 submit與reset按鈕都有固定的功能。 <input type=“button” >按鈕元件可自訂按鈕事件。

31 按鈕元件-2/3 請依本書第4-18頁編輯按鈕元件網頁，按下「自訂按鈕」鈕後會在畫 面上 顯示「hi」（檔案名稱：「4」資料夾內「6.htm」）。

32 按鈕元件-3/3 這一個表單上有三個按鈕，這三個按鈕的功能如下： 按鈕語法 按鈕作用 說明 input type ="button"
自訂功能 可以自訂按鈕功能，例如範例中的按鈕按下後會執行window.alert( )函數，彈跳出「hi」訊息。 input type ="submit" 將資料送出 功能不能變更。表單資料送至form action指定的位置。 input type ="reset" 清除表單 內容 功能不能變更。按下後表單上各式元件內容會被清除。 返回表單設計

33 變數的使用-1/3 變數是我們自訂的資料型態，儲存系統或使用者輸入產生的資料。
PHP的變數名稱前面要加上金錢符號$，這點與Linux環境的Shell Script相同。 PHP的變數大小寫代表不同意義，$a與$A視為不同變數。 建議團隊開發網頁先規定好變數的大小寫方式，免得因為變數大小 寫的問題，花許多時間去做網頁的檢查。

34 變數的使用-2/3 PHP的變數可以儲存字串、整數、浮點數（有小數的數字）、陣列 與物件這幾種型態。當我們要傳遞資料給變數時，會利用「=」，「=」代表右邊的資料傳給左邊的變數。請依本書第4-19頁編輯網頁 瞭解變數的型態 （檔案名稱：「4」資料夾內「var1.php」）。

35 變數的使用-3/3 echo 是php的內定函數，作用是將後面的資料顯示在網頁上。
以上的例子可看到第05-06行看到整數、第07-08行看到字串、 第09-10行看到浮點數、第11-14行看到陣列。 PHP不用作變數的宣告，而且PHP變數若要做不同型態資料的轉 換，也不需要轉換函數，直接就可以轉換了， 建議各位使用變數時，要先規劃好變數的名稱與變數儲存資 料的類型，以避免資料儲存運用時遺失。

36 字串與變數的連結-1/3 前面的例子各位是否發現所有輸出都連在一起？
html內的換行符號是<br>，是否可以讓變數與<br>一起輸出？ 是否 可以讓變數與其他文字一起輸出？ 請依本書第4-20頁編輯PHP網頁處理字串與變數的連結（檔案名 稱：「4」資料夾內「var2.php」）

37 字串與變數的連結-2/3 字串與變數之間若要做連結，請加上「.」，就可讓字串與變數連結 一起輸出或做其他動作了。
字串與變數之間若要做連結，請加上「.」，就可讓字串與變數連結 一起輸出或做其他動作了。 PHP的單雙引號所代表的意義也不同，請依本書第4-21頁編輯PHP 網頁瞭解單雙引號所代表意義（檔案名稱：「4」資料夾內「var3.php」）

38 字串與變數的連結-3/3 單引號內的資料，PHP不會做處理
雙引號內的資料，若PHP可以處理（例如雙引號內放了一個PHP變 數），PHP則會做處理。 範例中‘<br>’為何會產生換行的效果呢？因為<br>是html語法，所 以瀏覽器收到這樣的<br>標籤符號，就會做換行的動作。 返回章節目錄

39 運算子 變數在操作的過程中，會利用其他符號達到特定目的， 這個符號就是「運算子」。 前面所提的字串連結符號（.）就是字串運算子的運用。
變數在操作的過程中，會利用其他符號達到特定目的， 這個符號就是「運算子」。 前面所提的字串連結符號（.）就是字串運算子的運用。 PHP的運算子可分以下的種類： 1. 算術運算子 2. 指定運算子 3. 比較運算子 4. 邏輯運算子 比較運算子與邏輯運算子將於下章介紹。 返回章節目錄

40 算術運算-1/4 PHP擁有不少的算術運算符號可以運用 符號 意義 + 加法 - 減法 * 乘法 / 除法 符號 意義 % 取餘數 ++
加1 -- 減1

41 算術運算-2/4 請依本書第4-22頁編輯PHP網頁瞭解各種數值計算（檔案名稱：「4」資料夾內「var4.php」）。

42 算術運算-3/4 ++與--依使用的位置不同可分為前置運算與後置運算。
前置運算指++或--放在變數前面，代表「先加一或減一，再做別的 事情」。 後置運算指++或--放在變數後面，代表「先做別的事情，再加一或 減一」。 請依本書第4-23頁編輯PHP網頁瞭解++或—的運算（檔案名稱：「4」資料夾內「var5.php」）

43 算術運算-4/4 同樣是進行加法或減法，為何會有不同的變化呢？ 語法 說明 瀏覽器上 顯示內容 實際傳遞到 下一行內容
echo a++."<br>"; ++在變數a的後面，所以代表先做別的事情再加1 3 4 echo +$a."<br>"; ++在變數a的前面，所以代表先加1再做別的事情 5 echo $b--."<br>"; --在變數b的後面，所以代表先做別的事情再減1 echo --$b."<br>"; --在變數b的前面，所以代表先減1再做別的事情 2 返回運算子

44 指定運算子-1/2 「=」不是數學上面的「等於」，而是指將右邊運算的結果交給左 邊。例如：「$a = $a +10;」可解釋為「右邊的$a+10的結果交給 左邊的$a」。 您會發現到上面那一行語法裡，$a出現兩次，所以指定運算子在運 用時，可用更精簡的方式，將=右方的變數旁運算子移到=左邊，再 將=右方的變數刪除，可精簡為「$a+=10;」。 傳統型 精簡型 $a = $a + 7; $a += 7; $a = $a –7; $a -= 7; $a = $a * 7; $a *= 7; 傳統型 精簡型 $a = $a / 3; $a /= 3; $a = $a % 5; $a %= 5;

45 指定運算子-2/2 請依本書第4-25頁編輯PHP網頁利用精簡型的指定運算子來做數值的計算（檔案名稱：「4」資料夾內「var6.php」）。
返回運算子

46 PHP 接收表單資料 陣列變數 接收文字輸入元件資料 接收選擇鈕與核選框 接收下拉式選單 返回章節目錄

47 陣列變數-1/2 PHP從PHP 開始，提供了一套預定的陣列變數，這些陣列變數包括來自「網頁伺服器」、「PHP網頁執行環境」與「使用者於瀏覽器上輸入的資料」。 PHP5與PHP4的php.ini內可用register_global設定這些陣列變數是否可以在所有的網頁內不指定型態的方式接收使用。

48 陣列變數-2/2 register_global設定在 PHP6內取消了，所以本書不再提這個設定，希望各位開始養成習慣，日後可將網頁順利的移植到PHP6的環境。 系統提供的陣列變數種類如下： $_GET[ ]陣列變數處理經由網頁表單傳遞方式產生的資料。 $_POST [ ]陣列變數處理經由網頁表單傳遞方式產生的資料。 $_COOKIE[ ]陣列變數處理Cookies資料。 $_SESSION[ ]陣列變數處理Session資料。 $_FILES[ ]陣列變數處理網頁表單傳遞檔案方式產生的資料。 $_SERVER[ ]陣列變數處理由網頁伺服器設定產生的資料。 返回接收表單資料

49 接收文字輸入元件資料-1/8 當表單把資料送出後，PHP網頁就會以陣列變數接收。 表單傳遞料的方式有兩種，一種是get，另一種是post。
表單以get方式送出資料，php就以$_GET[‘表單上元件 的名稱’]的方式接收資料【請注意GET必須是大寫】。 表單以post方式送出資料，則接收端的網頁必須寫成 $_POST[‘表單上元件的名稱’]的方式接收資料【請注意 POST必須是大寫】。 請設計一個接收1.htm資料的PHP檔案，因目前設定為 get方式傳送資料，所以PHP網頁就以get方式接收。請 依本書第4-27頁編輯PHP網頁接收1.htm的資料（「4」資 料夾內「1.php」）。

50 接收文字輸入元件資料-2/8

51 接收文字輸入元件資料-3/8 網頁若以get方式傳送資料，網址列上將顯示網頁名稱及 所攜帶的資料。
當我在1.htm的表單上帳號輸入「php」，密碼輸入「mysql」，PHP網頁上會顯示「接收的姓名為php接收的密碼為mysql」外，網址列也變成 「 sql 」。

52 接收文字輸入元件資料-4/8 我們在網址列裡面將username的值由php改成123，網址列修改為「 enter鍵，網頁內容會因網址列接收的資料內容變更而跟著變更。

53 接收文字輸入元件資料-5/8 請將1.htm另存為1-1.htm，並請修改form內兩處語法： 原語法 新語法 method="get"
method="post" action="1.php" action="1-1.php" 請將1.php另存為1-1.php，並請將接收端的語法$_GET改 為$_POST，才有辦法接收資料（「4」資料夾 內「1- 1.php」）。

54 接收文字輸入元件資料-6/8

55 接收文字輸入元件資料-7/8 以post方式接收資料後網址列將不再出現表單傳遞的資料。
且因接收資料的方式為$_POST陣列變數，所以當您在網址列攜帶 參數，例如「 ? username= 123 & passwd=mysql」，您會發現到網頁內會是空白，代表我們不能由 網址列輸入資料，網頁資料來源必須由表單傳遞過來。

56 接收文字輸入元件資料-8/8 我們可用以下表格分析get與post的不同： 資料會不會顯示在網址上？ 使用者可否在網址上變更資料? get
能 post 不會 不能 如考慮到資料接收後不要在網址列上顯示或不要被使用者於網址 上變更資料，請改用post方式送出。 返回接收表單資料

57 接收選擇鈕與核選框-1/4 請設計一個接收3.htm資料的PHP檔案，接收選擇鈕傳送出來的資 料。請依本書第4-30頁編輯PHP網頁接收資料（「4」資料夾內「3.php」）。

58 接收選擇鈕與核選框-2/4

59 接收選擇鈕與核選框-3/4 請設計一個接收4.htm資料的PHP檔案，接收核選框傳送出來的資 料。請依本書第4-31頁編輯PHP網頁接收資料（「4」資料夾內「4.php」）。 每一個核選框的name不同，接收時每一個核選框都是不同的陣列變 數名稱。

60 接收選擇鈕與核選框-4/4 返回接收表單資料

61 接收下拉式選單-1/2 請設計一個接收5.htm資料的PHP檔案，接收下拉式選單傳送出來 的資料。請依本書第4-32頁編輯PHP網頁接收資料（「4」資料夾內「5.php」）。 下拉式選單只有一個名字，依照您不同的選項，傳送出不同的內容 返回接收表單資料

62 接收下拉式選單-2/2 返回接收表單資料

63 本章結論 說明如何利用NetBeans寫PHP，讓您可快速地使用NetBeans開發 PHP與HTML檔案。
介紹表單網頁上各式元件，您可開始設計各種不同樣式的表單供網 路使用者使用。 表單資料送出至指定的PHP網頁後，PHP網頁接收資料，用什麼接 收資料呢？這裡我們就得使用變數來接收資料，所以本章也做變數 基本的介紹，及如何接收post或get傳遞過來的資料。 您是否發現到上例以get方式傳送下拉式選單資料後，網頁上出現的 是數字？誰看的懂1代表什麼，2代表什麼呢？我們可以要求PHP網 頁偵測下拉式選單選的值是1，就會出現「台北林家花園」，選的值 是2就會出現「台北信義商圈」嗎？當然可以，下一章會介紹條件判 斷式的寫法，我們可以請PHP網頁協助我們判斷分析。 返回章節目錄

64 重點提示-1/2 <form>標籤內加上action屬性代表指定表單資料要送到哪裡，您可以 指定一個php檔案，或送到一段java script語法內處理。 <form>標籤內加上method屬性代表指定表單送出的資料以什麼方式 送達，傳送方式有get與post兩種方式。 <input type=“text”>標籤內加上name屬性代表要傳送資料的元件名 稱，當表單把資料送出後，單行文字框的資料，就以該元件的name 作為名稱送出，後端網頁接收時就會以name作為接收的名稱。 <input type="text">標籤內加上value屬性代表預設的文字內容。 <input type=“radio”>標籤內加上name屬性代表選擇鈕的名稱，若要 讓多個選擇鈕成為「多選一」狀態，請將這幾個選擇鈕的name設定 為相同的名字。 <input type=“radio”>標籤內加上value屬性代表選選擇鈕的值，您也 可以說這是選擇鈕的內容。當我按下選擇鈕，代表選擇了這個值。

65 重點提示-2/2 <input type=“radio”>標籤內加上checked屬性代表您已將這個選項設 定為預設選項。
<input type ="button">標籤代表可自訂按鈕功能。 <input type="submit">標籤代表將資料送出。 <input type="reset">標籤代表清除表單內容。 字串與變數之間若要做連結，請加上「.」，就可讓字串與變數連結 一起輸出或做其他動作了。 單引號內的資料，PHP不會做處理，而雙引號內的資料，若PHP可 以處理（例如雙引號內放了一個PHP變數），PHP則會做處理。 當表單以get方式送出資料，php就以$_GET[‘表單上元件的名稱’]的 方式接收資料【請注意GET必須是大寫】。 若表單以post方式送出資料，則接收端的網頁必須寫成$_POST[‘表 單上元件的名稱']的方式接收資料【請注意POST必須是大寫】。 返回章節目錄

66 問題與討論 -1/2 1.如何用Netbeans建立一個PHP專案？ 2.表單以get方式送出，PHP網頁如何接收資料？
3.表單以post方式送出，PHP網頁如何接收資料？ 4. <input type="text" name="test" maxlength="6" size="8"> 這個元件可以輸入幾個字？ 5. 選擇鈕的name、value、checked屬性各代表什麼意義？

67 問題與討論-2/2 6.若想要設計一個自訂功能的按鈕，該如何設計呢？ 7.PHP變數如何與其他文字一起輸出？
8.echo '$a'與echo "$a"兩者有何不同？ 9.$a++與++$a兩者有何不同？ 10.以get或post傳遞資料，哪一種傳遞方法資料會顯示在網址上？ 返回章節目錄