表單的應用與 PHP 資料擷取與應用

第十一堂課：表單的應用與 PHP 資料擷取與應用

如果你想要跟 WWW 伺服器互動，就得要將你瀏覽器上的資料提交給 WWW 伺服器才行。那麼如何傳輸你的資料呢？那就得要透過表單 (form) 的功能了。舉例來說，你想要留言，就得要將你的留言訊息傳輸到伺服器上，但是伺服器怎麼知道你傳了什麼東西呢？就得要透過 WWW 伺服器跟瀏覽器間傳送的『變數』以及變數內容來處理。但是又根據不同的訊息量，伺服器能抓到的方式就不相同。那就來玩一玩吧！

本章重點目標：

關於表單 (form) ，可以參考課本第七章，page 145 ~ page 168 的內容，尤其有關 html5 的相關表單介紹，以及可以使用 CSS 來設計表單風格樣式的方法，都需要了解與考慮才好！基本上，表單的作法是：
1. 先設計好固定選項 (單選、複選、下拉式選單等等) 或非固定選項 (填入資訊，如帳號、密碼、留言等等) 在網頁上；
2. 使用者在網頁上勾選與(或)填寫資訊後，按下傳送按鈕，將資料上傳；
3. 伺服器收到上傳的資訊後，以程式語言 (PHP, Java, .NET, C# 等等) 處理這些資訊，可能會搭配資料庫；
4. 將處理的結果回傳一個訊息給使用者。
由於有 a, c, d 三個處理的資料，所以，最多可能會動用到三個檔案，一般則是動用到兩個檔案 (一個使用者網頁處理，一個伺服器端處理)。比較厲害的使用者，也有可能使用同一個檔案來處理這三個動作。
整體表單 (form) 的標籤非常重要！他可以讓你在網頁所輸入的資料『上傳』到伺服器上！並且指定了伺服器端要處理此資訊的檔案檔名。上傳的方法有兩種：(page 151 有重要資訊喔！)
- get：利用字串方式傳送，資料量較小，沒有加密，字串長度被限制在 512bytes 內。
- post：利用封包傳送模式，將資料打包成為封包狀態再傳送出去，除具有保密性之外，還可突破 512bytes 的限制。
大部分傳輸的資訊，主要是透過變數格式將資料上傳的。亦即你在網頁上面設計好變數名稱，讓使用者填寫後勾選變數內容，在將資料送上去。因此，每個設計的按鈕或填寫的資訊中，都需要有個變數名子 (variable name) 來代表用戶所勾選的資訊。
form 標籤所需要輸入的參數：
<form name="表單名(可忽略)" action="要將資料上傳到 server 端的哪個檔案處理" method="get或post">
....
</form>
小練習：製作兩個檔案實作出以按鈕傳送資料的方式：
1. 檔名：class_11_1_from.php，內容顯示『這是第一個網頁，有 form 的標籤在』，並使用 GET 的方法到 class_11_1_to.php 去；
2. 檔名：class_11_1_to.php，內容為『這是第二個網頁，主要在接收來自第一個網頁的資料』
並且在第一個網頁內的 form 標籤內，多兩個 input 的標籤，內容如下：
<input type="text" name="testing" />
<input type="submit" value="傳送到下個檔案" />
然後用瀏覽器打開第一個網頁，並按下按鈕，看看出現了什麼？(注意事項：A. 在 class_11_1_to.php 的網址列上面，出現的訊息是啥？ B. 能否使用超連結直接輸入需要的資訊？ C. 若使用 post 的方法，又會變怎樣？)
關於 input 的標籤之一：需要使用者輸入的內容模式： type="text" (page 152)
1. class_11_1_from.php：新增使用者資訊，包括 (1)姓名 (2)住址 (3)信箱 (4)電話，且每個 input 請給予適當的變數名稱(name="")
2. class_11_1_to.php：透過 <?php echo $_GET['變數名稱'] ; ?> 的方法來顯示出使用者所輸入的字串！
上述方式處理完畢後，參考 page 168 提到的 placeholder 功能，設定使用者輸入方框內的提示字元
關於 input 的標籤之二：輸入的內容為密碼： type="password"
1. class_11_1_from.php：新增兩個密碼欄位，並且確認兩次輸入的密碼要一致。
2. class_11_1_to.php：同樣利用 $_GET 來取得密碼，並且比較密碼是否為正確？透過條件判斷式如下：
```
if ( $mypassword1 == $mypassword2 ) {
	echo "兩次密碼的內容相符合呦！ <br />";
} else {
	echo "兩次輸入的密碼不相同呢！<br />";
	echo "你輸入的密碼是 $mypassword1 $mypasssword2<br />";
}
```
  請詳記這個條件判斷式的指令！
3. 加入幾個重要的密碼分析：(1)密碼欄不可以是空的 (2)密碼長度不可以少於 6 個字元，其中，字元長度可以透過 php 的 strlen($var) 來取得。至於判斷的話，可以透過 <= 或 >= 來判斷即可。
關於 input 的標籤之三：單選項目： type="radio"
這東西很有趣，你必須要指定多個項目，而且這些多個項目的 name 都必須要相同！請參考 page 155 的說明，然後製作如下的內容：
1. class_11_1_from.php：新增一項單選，裡面列出本學期的課程，並讓使用者勾選他『最』喜歡的科目；
2. class_11_1_to.php：將使用者的選擇列出來到螢幕上！
(1)需要注意的是，雖然 name 都是相同的，但是因為勾選的項目不同，因此你必須要給予 value 的值，這樣才能夠判斷使用者勾選的項目是哪一個喔。 (2)此外，如果可能的話，也能夠給予 checked="checked" 這個項目，給予『預設勾選』的項目。 (3)為了方便使用者勾選，你也可以讓使用者點選說明文字即可勾選！透過 page 163 提到的 label 標籤來處理即可。
關於 input 的標籤之四：複選項目： type="checkbox"
這個玩意兒就是複選題囉！與單選 (radio) 一個變數只有指定一個內容不同，複選可以有多個勾選的項目。因此你有兩種方式來處理變數的上傳行為， (1)因為每個複選項目都是獨立存在的，因此你可以設定『不同的變數名稱 name 』來處理，但是這樣未來後續的變數認定比較麻煩。(2)直接透過陣列來處理，變數名稱變成 name=var[] 這樣的格式。
1. class_11_1_from.php：同上一題，只是將最喜歡科目變成『複選』的功能！
2. class_11_1_to.php：將使用者的選擇列出來到螢幕上！建議使用陣列的模式來處理
  - 在收受端使用 $varname = $_REQUEST['變數'] 的方法取得，這時這個新的變數就主動變成陣列
  - 使用 foreach ( $varname as $name ) { 設定一; 設定二; 設定...; } 的方式將陣列一個一個處理掉。
處理完畢後，同樣以 label 的方式來讓使用者更容易勾選！
關於 input 標籤之五：清除與傳送： type="reset" 及 type="submit" 還有 type="image"
可以加入清除的按鈕，等於是讓使用者按下 [f5] 去刷新的感覺一樣。另外，(1)使用 submit 配合 value 的值可以設定按鈕的文字。同時，也能夠使用 CSS 的功能去調整按鈕的樣式！都是不錯的可以考慮的方向。(2)此外，如果 CSS 的方格你不喜歡，硬要使用自己建立的按鈕，那就用圖片變成按鈕，也能夠使用 image 來處理。請自己使用 photoimpact 設計一個按鈕，製作上傳的按鈕功能吧！
關於 input 標籤之六：關於檔案的傳送： type="file"
可讓你的網頁選擇檔名後上傳到伺服器上面！不過還是很有問題～因為牽涉到伺服器的相關權限問題。這裡我們做個測試，不見得能成功！瞭解意思即可！ (page 159)
1. class_11_2_from.php：form 的內容較多，因為需要在 form 標籤處加入 enctype="multipart/form-data" 的定義，如下：
```
<form action="class_11_2_to.php" method="post" enctype="multipart/form-data" >
	請選擇要上傳的檔案喔！
	<input type="file" name="myfile" size="30" />
	<input type="submit" value="按下上傳" />
</form>
```
2. class_11_2_to.php：需要透過比較複雜的手續去取得這個檔案的相關功能！通常使用 $_FILES 功能去取得！如下：
```
<?php
	echo "檔案名稱：" . $_FILES['myfile']['name']. "<br />";
	echo "檔案大小：" . $_FILES['myfile']['size']. "<br />";
	echo "檔案格式：" . $_FILES['myfile']['type']. "<br />";
	echo "暫存檔名：" . $_FILES['myfile']['tmp_name']. "<br />";
	echo "錯誤代碼：" . $_FILES['myfile']['error']. "<br />";
?>
```
下拉式選單，請參考 select 與 option 功能，可以取代單選的項目太多時之用。觀察 page 157 的介紹。
設計一個我的最愛項目，並且使用 select 與 option 的方式來處理。注意有 selected="selected" 的預設勾選項目喔！將這個項目加入 class_11_1_from.php 並在 class_11_1_to.php 讀取出來。
大量留言內容：使用 textarea 的功能！請觀察 page 154 的說明！並在 class_11_1_from.php 設計一個『自我介紹』的區塊，讓使用者自行輸入一些文字。並在 class_11_1_to.php 可以將自我介紹讀出。此外，亦使用一些文字說明來指定預設值！
指定按鈕 type="button" 製作出按鈕功能 (並非 submit 功能)
在 <button></button>項目內，我們可以放置一些元素，讓他以按鈕的方式來呈現。未來加上 id="" 項目，再搭配 java script，就可以達到不用上傳即可透過本地瀏覽器的 java script 來達成某些特殊表現功能。請參考 page 162 在你的 class_11_1_from.php 建立幾個按鈕。
利用 fieldset 與 legend 將表單雷同項目群組起來。
將 class_11_1_from.php 裡頭關於使用者相關資訊的，通通群組起來；興趣相關的項目也自己群組起來，並使用 CSS 的功能調整一下顯示的寬度，並可以調整 legend 的字型，就可以進行一些基本的美化功能了。
HTML5 的特殊表單功能：
1. 可以透過 required="required" 來設定為：『必填項目』沒有填就無法上傳喔！請在兩個密碼欄位以及一個姓名欄位加入這個項目，然後測試一下沒有填寫資料就上傳會怎樣！
2. 填寫一個萬年曆勾選的日期，透過 type="date" 的項目來處理。但目前僅有 google chrome 有支援。
3. 加入 email 格式的支援，在使用者的屬性欄位中多加一個用戶 email 填寫， type 就是 email
4. 可以有 type="search" 來做關鍵字查詢的功能！同樣要有 name 的項目才好！

本章練習與習題：

將上述資料進行完畢，並於首頁加入正確的連結，將結果上傳後，到上傳網站查閱是否正確處理才可以！

第十一堂課： 表單的應用與 PHP 資料擷取與應用

第十一堂課：表單的應用與 PHP 資料擷取與應用