25
1 進進 WWW 進進進進 進進進進進 進進進進進進進進進進 進進進進進進 2003

進階 WWW 程式設計 表單的處理

  • Upload
    haines

  • View
    47

  • Download
    0

Embed Size (px)

DESCRIPTION

進階 WWW 程式設計 表單的處理. 靜宜大學資訊管理學系 蔡奇偉副教授 2003. 內容大綱. 前言 基本步驟 Post 和 Get 傳送方式 範例:表單的處理 處理可複選的資料欄 範例:核取方塊的處理 範例:清單的處理 檔案上傳. 前言. 表單( form )提供網站與瀏覽者之間的互動管道。首先,瀏覽器把瀏覽者填入表單中的資料傳回網站,然後,網站伺服器呼叫預先指定的程式來處理這些表單資料,最後,網站伺服器把結果傳回給瀏覽器讓瀏覽者檢視。 許多 PHP 程式都與表單處理有關,撰寫這類的 PHP 程式之前,你必須先暸解底下的內容:. - PowerPoint PPT Presentation

Citation preview

Page 1: 進階  WWW  程式設計 表單的處理

1

進階 WWW 程式設計

表單的處理

靜宜大學資訊管理學系蔡奇偉副教授2003

Page 2: 進階  WWW  程式設計 表單的處理

2

內容大綱 前言 基本步驟 Post 和 Get 傳送方式

範例:表單的處理

處理可複選的資料欄 範例:核取方塊的處理 範例:清單的處理

檔案上傳

Page 3: 進階  WWW  程式設計 表單的處理

3

前言表單( form )提供網站與瀏覽者之間的互動管道。首先,瀏覽器把瀏覽者填入表單中的資料傳回網站,然後,網站伺服器呼叫預先指定的程式來處理這些表單資料,最後,網站伺服器把結果傳回給瀏覽器讓瀏覽者檢視。

許多 PHP 程式都與表單處理有關,撰寫這類的 PHP 程式之前,你必須先暸解底下的內容:

1. 表單的 HTML 語法

2. PHP 語言的基本結構

3. 用 PHP 程式來處理表單的概念與技巧

本章目的即教導各位上述的第 3 項內容。

Page 4: 進階  WWW  程式設計 表單的處理

4

基本步驟製作用 PHP 程式來處理表單時,我們需要完成以下的設定:

form 元件中的 method 屬性用來指定表單資料的傳送方式為 GET 或 POST 。

把 form 元件中的 action 屬性設定成處理此表單的 PHP 程式 的 URL 。

每一個表單資料元件都應該用 name 屬性來指定資料欄的名 稱。在 PHP 程式中,我們可以用這名稱來存取對應的資料值。

在 PHP 程式中,若傳送方式是 GET 的話,表單資料存在全 域對照陣列變數 $_GET 中。若傳送方式是 POST 的話,表 單資料存在全域對照陣列變數 $_POST 中。我們可以用資料 欄的名稱當作鍵值從這些對照陣列中取出對應的資料值。

Page 5: 進階  WWW  程式設計 表單的處理

5

Post 和 Get 傳送方式

表單資料可以用 <FORM> 元件的 method 屬性來指定 Post 或 G

et 傳回方式。 Post 方式是把資料用符合 HTTP 通訊協定的格式,

以封包的形式傳回 WWW 伺服器。這種方式適合傳送資料量比較

大的表單(譬如超過 1K bytes )。 Get 方式則是把表單資料附加

在 action 屬性指定的 URL 後面,傳回 WWW 伺服器。由於 UR

L 的字元長度有限(通常不得超過 1K bytes ),所以 Get 方式適

合資料量少的表單。除了資料量的差異外,在安全性方面, Post

方式比 Get 方式來得好。由於網路安全的考量因素,我們建議你採

用 Post 方式來傳送表單,即使表單的資料並不多。

Page 6: 進階  WWW  程式設計 表單的處理

6

範例:表單的處理

Page 7: 進階  WWW  程式設計 表單的處理

7

<form action="formex1.php" method="post">

<p>

姓: <input type="text" name="lastname" size="4">

&nbsp;&nbsp;&nbsp;&nbsp;

名: <input type="text" name="firstname" size="8">

</p>

<p> 性別: <input type="radio" name="sex" value="male"> 男 <input type="radio" name="sex" value="female"> 女 </p>

<p>

<input type="submit" name="Submit" value=" 送出 ">

<input type="reset" name="Reset" value=" 重設 ">

</p>

</form>

表單的 HTML 原始檔:

Page 8: 進階  WWW  程式設計 表單的處理

8

網頁說明

<form action="formex1.php" method="post">

設定表單處理程式為同目錄中的 formex1.php

用 POST 的方式來傳送表單資

<input type="text" name="lastname" size="4">

設定輸入欄的名稱,使 PHP 程式可以用這名稱來取得此欄的資料

<input type="radio" name="sex" value="male">

設定此圓鈕欄的值。若瀏覽者選取此圓鈕,此值會回傳至 WWW 伺服器, PHP 程式

因而可辨識出瀏覽者所選取的圓鈕為何

Page 9: 進階  WWW  程式設計 表單的處理

9

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=big

5">

<title> 處理表單範例一 </title>

</head>

<body>

<?php

$lastname = $_POST['lastname'];

$sex = $_POST['sex'];

echo '<p>' . $lastname . (($sex == 'male')? ' 先生 ' : ' 小姐 ' ) .

' 歡迎光臨本站 </p>';

?>

</body>

</html>

處理表單的 PHP 網頁 formex1.php

Page 10: 進階  WWW  程式設計 表單的處理

10

程式說明

$_POST 是 PHP 內建的一個對照陣列( associative array ),其中儲存使用 POST 方法傳回的表單資料。在本範例中,若表單的輸入如右圖所示,則 $_POST 內容如下:

‘lastname’ ‘ 陳’

‘firstname’ ‘ 水扁’

‘sex’ ‘male’

所以 $lastname = $_POST[‘lastname’]; 這行程式的用意是取出表單中名稱為 ‘ lastname’ 輸入欄的值,並存入變數 $lastname 中。執行後, $lastname 的值將為 ‘陳’。

Page 11: 進階  WWW  程式設計 表單的處理

11

處理可複選的資料欄

對 checkbox 或 select 這類允許複選的資料欄,命名時你必須在命稱後加上 [] 。譬如:

<form action=“checkbox.php” method=“POST”>

你如何知道本公司: <br>

<input type=“checkbox” name=“src[]” value=“magazine”>雜誌 <br>

<input type=“checkbox” name=“src[]” value=“paper”>報紙廣告 <br>

<input type=“checkbox” name=“src[]” value=“radio”>收音機

</form>

在 checkbox.php 中,變數 $_POST[‘src’] 將是一個陣列,而且其中存放瀏覽者所選取的項目值。

Page 12: 進階  WWW  程式設計 表單的處理

12

範例:核取方塊的處理

<form name=“checkbox” action="checkbox.php" method="post">

<p> 你如何知道本公司: </p>

<p><input type="checkbox" name="src[]“ value="magazine">雜誌 </p>

<p><input type="checkbox" name="src[]" value="paper">報紙廣告 </p>

<p><input type="checkbox" name="src[]" value="radio">收音機 </p>

<p>

<input type="submit" name="submit“

value=" 上傳 ">

&nbsp;&nbsp;&nbsp;&nbsp;

<input type="reset" name="reset“

value=" 重置 ">

</p>

</form>

Page 13: 進階  WWW  程式設計 表單的處理

13

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=big5">

<title> 處理表單範例一 </title>

</head>

<body>

<p> 你從下列的來源得知本公司:<?php

foreach ($_POST['src'] as $item)

echo " $item";

echo ' 。 ';

?>

</body>

</html>

處理表單的 PHP 網頁 checkbox.php

Page 14: 進階  WWW  程式設計 表單的處理

14

瀏覽者選取雜誌和收音機後,按上傳

PHP 程式執行後傳回來的結果

Page 15: 進階  WWW  程式設計 表單的處理

15

範例:清單的處理<form name=“select" method="post" action=“select.php"> <p> 你熟悉下列那些程式語言(可複選): </p> <p> <select name="proglang[]" size="5" multiple> <option value="C">C</option> <option value="C++">C++</option> <option value="Perl">Perl</option> <option value="PHP">PHP</option> <option value="Java">Java</option> </select> </p> <p> <input type="submit" name="Submit" value=" 送出 "> &nbsp;&nbsp;&nbsp; <input name="Reset" type="reset" id="Reset" value=" 重設 "> </p></form>

Page 16: 進階  WWW  程式設計 表單的處理

16

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=big5">

<title> 處理清單的 PHP 程式 </title>

</head>

<body>

<p> 你熟悉下列的程式語言:<?php

foreach ($_POST['proglang'] as $item)

echo " $item";

echo ' 。 ';

?>

</body>

</html>

處理表單的 PHP 網頁 select.php

Page 17: 進階  WWW  程式設計 表單的處理

17

瀏覽者選取 C,

C++, 和 PHP

後,按送出

PHP 程式執行後傳回來的結果

Page 18: 進階  WWW  程式設計 表單的處理

18

檔案上傳你可以用底下的設定方式來提供檔案上傳的介面:

1. 把 <FORM> 元件中的 method 屬性設成 post (因為檔案通常都比較大,不適合用 get 方式來傳送)。

2. 把 <FORM> 元件中的 enctype 屬性設成 multipart/form-data 。

3. 把 <FORM> 元件中的 action 屬性設成表單處理程式的 URL ,這個程式必須具備接收上傳檔案的能力。

4. 把 <INPUT> 元件中的 type 屬性設成 file 。

你還可以用 <FORM> 元件的 accept 屬性來限定上傳檔案的篩選。

Page 19: 進階  WWW  程式設計 表單的處理

19

<form name = “upload” method="post" action="upload.php“

enctype="multipart/form-data“>

<p> 上載檔案: <input type="file" name=“uploadFile"> </p>

<p><input type="submit" name="submit" value=" 上載 "></p>

</form>

Page 20: 進階  WWW  程式設計 表單的處理

20

PHP 會把上傳檔案的屬性存在內建的二維陣列變數 $_FILES 中。以前一頁的表單為例,底下是 $_FILES 變數的內容:

$_FILES['uploadFile']['name']

上傳檔案在客戶端電腦上原本的檔案名稱。

$_FILES['uploadFile']['type']

瀏覽器所提供的上傳檔案 MIME 型態資訊,如 image/gif 。

$_FILES['uploadFile']['size']

上傳檔案的大小(以 byte 為單位)

$_FILES['uploadFile']['tmp_name']

檔案上傳後存在伺服器的暫存檔案的路徑名稱

$_FILES['uploadFile']['error']

檔案上傳發生錯誤時,此欄存放錯誤碼( error code )資訊。

Page 21: 進階  WWW  程式設計 表單的處理

21

處理檔案上傳的 PHP 程式通常可執行底下的兩種方案:

方案一:先呼叫 PHP 的內建函式

is_uploaded_file($_FILES['uploadFile']['tmp_name'])

來確認上傳的檔案,然後用 PHP 的檔案函式來進一步處理或轉換 $

_FILES[‘uploadFile’][‘tmp_name’] 這個暫存檔。

方案二:呼叫 PHP 的內建函式

move_uploaded_file ($_FILES['uploadFile']['tmp_name'],

“/place/to/put/uploaded/file");

把暫存檔移到適當的目錄中去存放。

Page 22: 進階  WWW  程式設計 表單的處理

22

bool is_uploaded_file ( string filename )

Returns TRUE if the file named by filename was uploaded via HTTP

POST. This is useful to help ensure that a malicious user hasn't trie

d to trick the script into working on files upon which it should not be

working--for instance, /etc/passwd.

This sort of check is especially important if there is any chance that

anything done with uploaded files could reveal their contents to the

user, or even to other users on the same system.

Page 23: 進階  WWW  程式設計 表單的處理

23

bool move_uploaded_file ( string filename, string destination )

This function checks to ensure that the file designated by filename is a

valid upload file (meaning that it was uploaded via PHP's HTTP POST

upload mechanism). If the file is valid, it will be moved to the filename

given by destination.

If filename is not a valid upload file, then no action will occur, and mov

e_uploaded_file() will return FALSE.

If filename is a valid upload file, but cannot be moved for some reason,

no action will occur, and move_uploaded_file() will return FALSE. Ad

ditionally, a warning will be issued.

This sort of check is especially important if there is any chance that an

ything done with uploaded files could reveal their contents to the user,

or even to other users on the same system.

Page 24: 進階  WWW  程式設計 表單的處理

24

限制上傳檔案的大小

PHP 設定檔( php.ini )中的參數 upload_max_filesize 可用來限制上傳檔案的大小,它的預設值是 2MB 。

此外,你也可以用下列的方式:

<form name = “upload” method="post" action="upload.php“

enctype="multipart/form-data“>

<input type=“hidden” name=“MAX_FILE_SIZE" value="1024">

<p> 上載檔案: <input type="file" name=“uploadFile"> </p>

<p><input type="submit" name="submit" value=" 上載 "></p>

</form>

把目前上傳檔案的大小限制在 1KB 以內。

Page 25: 進階  WWW  程式設計 表單的處理

25

上傳多個檔案<form action="file-upload.php" method="post“

    enctype="multipart/form-data">

 Send these files:<br>

 <input name="userfile[]" type="file"><br>

 <input name="userfile[]" type="file"><br>

 <input type="submit" value="Send files">

</form>

假定上傳的檔案先後是 /tmp/review.html 和 /tmp/xwp.out 。則

$_FILES[‘userfile’][‘name’][0] 的內容是 review.html $_FILES[‘userfi

le’][‘name’][1] 的內容是 xwp.out

其它的上傳檔案屬性可依此類推。