網(wǎng)頁(yè)設(shè)計(jì)進(jìn)階班-php與資料庫(kù)整合

1、網(wǎng)頁(yè)設(shè)計(jì)實(shí)務(wù)-PHP 與資料庫(kù)整合,,本週的主題,網(wǎng)頁(yè)互動(dòng)的開(kāi)始-HTML表單復(fù)習(xí)PHP在電腦中都裝些什麼-資料的種類(lèi)與型態(tài)要想記住事情，就得有腦細(xì)胞-變數(shù)(儲(chǔ)存資料的空間)與運(yùn)算式,HTML表單,互動(dòng)式的網(wǎng)頁(yè)就必須製作一個(gè)使用者介面讓使用者可以做輸入資料的動(dòng)作,,使用者,,,? 填寫(xiě)表單,,? 回應(yīng)表單,伺服器,,? 讀取表單,簡(jiǎn)單的HTML表單例,HTML原始碼,表單概念,表單標(biāo)籤主要有兩個(gè)作用提供各種輸入資料的形式能讓使

2、用者通知WWW瀏覽器已經(jīng)完成輸入了表單處理表單將使用者輸入的內(nèi)容傳給指定的處理程式進(jìn)行處理此程式是在網(wǎng)頁(yè)伺服器端稱(chēng)為CGI（Common Gateway Interface）程式,表單標(biāo)籤,FORM標(biāo)籤構(gòu)成表單主體的標(biāo)籤，以…形式開(kāi)頭與結(jié)束，其它表單相關(guān)的標(biāo)籤都必須包含在其中FORM標(biāo)籤有兩個(gè)屬性：ACTION：在網(wǎng)頁(yè)伺服器端接收表單資料進(jìn)行後續(xù)處理的CGI程式之位置METHOD：選擇表單資料的傳送方法，有GET與POST

3、兩種在HTML標(biāo)籤中雖然沒(méi)有規(guī)定屬性值一定要以「"」（雙引號(hào)）括起來(lái)，但仍建議養(yǎng)成此習(xí)慣,表單標(biāo)籤,INPUT標(biāo)籤用以輸入資料，可以用來(lái)在網(wǎng)頁(yè)中設(shè)定欄位讓使用者將資料輸入主要屬性有NAME，代表輸入資料的欄位名稱(chēng)TYPE代表資料輸入的形式VALUE則代表此欄位的值依TYPE屬性的不同，附帶的其它屬性亦不一樣,INPUT標(biāo)籤屬性,文字輸入框：TYPE="TEXT"。例如，＜INPUT TYPE

4、="TEXT" SIZE="8" NAME="Name"＞其中SIZE屬性是用以指定顯示在WWW瀏覽器上文字框長(zhǎng)度可用MAXLENGTH屬性限制輸入資料的最大長(zhǎng)度VALUE屬性則是設(shè)定此文字欄位的預(yù)設(shè)值,INPUT標(biāo)籤屬性,密碼欄：TYPE="PASSWORD"。例如，＜INPUT TYPE="PASSWORD" SIZE=&qu

5、ot;8" NAME="Password"＞和文字輸入框一樣具有VALUE、MAXLENGTH、SIZE等屬性不過(guò)密碼欄設(shè)定預(yù)設(shè)值是很奇怪的事密碼欄的特色為使用者輸入資料到此欄位中時(shí)，其內(nèi)容會(huì)自動(dòng)隱藏起來(lái)，以防止輸入的密碼遭偷看到、外洩,INPUT標(biāo)籤屬性,單選鈕：TYPE="RADIO"。例如，＜INPUT TYPE="RADIO" NAME="S

6、ex" VALUE="男" CHECKED＞男＜INPUT TYPE="RADIO" NAME="Sex" VALUE="女"＞女TYPE為RADIO的標(biāo)籤往往多個(gè)一起出現(xiàn)且其N(xiāo)AME屬性具有相同的值以上例而言，即為二選一，選項(xiàng)是以小圓圈的形式出現(xiàn)CHECKED字樣只能出現(xiàn)在其中一個(gè)選項(xiàng)中，代表此欄位的預(yù)選值,INPUT標(biāo)籤屬性,核取方塊：

7、TYPE="CHECKBOX"。例如，＜INPUT TYPE="CHECKBOX" NAME="Like" VALUE="香蕉"＞香蕉＜INPUT TYPE="CHECKBOX" NAME="Like" VALUE="鳳梨"＞鳳梨＜INPUT TYPE="CHECKBOX"

8、 NAME="Like" VALUE="芒果"＞芒果和單選鈕類(lèi)似，也可以多個(gè)一起出現(xiàn)其N(xiāo)AME屬性具有相同的值可以多選，選項(xiàng)以核取方塊形式出現(xiàn)，被選取後會(huì)在方塊內(nèi)打勾CHECKED也可以用於核取方塊中且不限定只能出現(xiàn)在一個(gè)選項(xiàng)中,example-2.htm,example-2.htm原始碼,INPUT標(biāo)籤屬性,提交按鈕：TYPE="SUBMIT"。例如，＜INPUT

9、TYPE="SUBMIT" VALUE="完成"＞這是一個(gè)按鈕，按下代表送出表單並啟動(dòng)ACTION屬性指定的CGI程式處理之VALUE屬性的值可以改變按鈕上的文字描述它可以不需指定NAME屬性,INPUT標(biāo)籤屬性,重置按鈕：TYPE="RESET"。例如，＜INPUT TYPE="RESET" VALUE="取消"＞這也是一個(gè)

10、按鈕按下代表清除表單中各欄位的內(nèi)容，回復(fù)到預(yù)設(shè)的初始狀態(tài),Select標(biāo)籤,SELECT標(biāo)籤，用以產(chǎn)生下拉式選單來(lái)輸入資料。其形式如下：＜SELECT NAME="Like"＞ ＜OPTION VALUE="香蕉"＞香蕉＜/OPTION＞ ＜OPTION VALUE="鳳梨" SELECTED＞鳳梨＜/OPTION＞ ＜OPTION VALUE="芒果

11、"＞芒果＜/OPTION＞＜/SELECT＞,Select標(biāo)籤,SELECT標(biāo)籤中包含有若干個(gè)＜OPTION＞標(biāo)籤，每一項(xiàng)OPTION代表一個(gè)選項(xiàng)VALUE屬性為選項(xiàng)被選定時(shí)的傳回值，被OPTION起始與結(jié)束標(biāo)籤則是呈現(xiàn)在WWW瀏覽器中的選項(xiàng)內(nèi)容SELECTED代表預(yù)設(shè)值為選取該選項(xiàng)SIZE屬性可以設(shè)定下拉選單的高度,Select標(biāo)籤,SELECT標(biāo)籤亦可應(yīng)用於多選，於＜SELECT＞中加上MULTIPLE即可。如：

12、＜SELECT MULTIPLE NAME="Like"＞在多選的情況下，使用者可以在點(diǎn)選時(shí)同時(shí)按下鍵盤(pán)的鍵即可達(dá)到多選的目的,TEXTAREA標(biāo)籤,用以產(chǎn)生文字區(qū)塊以應(yīng)用於需輸入大量文字資料的時(shí)候和TEXT標(biāo)籤不同的是，TEXT標(biāo)籤適用於少量的文字、可以一行輸入完畢，TEXTAREA標(biāo)籤則常用於討論區(qū)、留言板中的內(nèi)容輸入。其格式如下： ＜TEXTAREA NAME="Comment"

13、ROWS="3" COLS="20"＞ 在此輸入內(nèi)容 ＜/TEXTAREA>其中ROWS屬性為文字區(qū)塊的高度、COLS屬性為文字區(qū)塊的寬度,問(wèn)題,example-1.htm中action對(duì)應(yīng)的cgi程式為?method使用的是?方法比較input標(biāo)籤中size和maxlength的不同?radio與checkbox的差別?example-3.htm與example-3

14、a.htm的差別在哪裡,表單資料驗(yàn)證,前端的表單資料驗(yàn)證表單的內(nèi)容一經(jīng)傳送到網(wǎng)頁(yè)伺服器端後即交由指定的CGI程式進(jìn)行後續(xù)的處理然而在WWW瀏覽器端可以先使用WWW瀏覽器可執(zhí)行的描述語(yǔ)言如Javascript進(jìn)行前端檢查作業(yè)，看看表單所輸入的資料是否有錯(cuò)誤,前端的表單資料驗(yàn)證優(yōu)點(diǎn),協(xié)助使用者快速找出錯(cuò)誤：在輸入資料的過(guò)程常因不小心而打錯(cuò)、或漏打，利用前端表單資料驗(yàn)證作業(yè)可在送出表單資料給網(wǎng)頁(yè)伺服器前發(fā)現(xiàn)問(wèn)題，減少使用者不必要的等候。

15、強(qiáng)化網(wǎng)站的資訊安全：簡(jiǎn)單防範(fàn)SQL Injection,前端的表單資料驗(yàn)證優(yōu)點(diǎn),降低網(wǎng)頁(yè)伺服器的負(fù)擔(dān)：錯(cuò)誤的表單輸入可能使CGI程式產(chǎn)生沒(méi)有用的結(jié)果，浪費(fèi)網(wǎng)頁(yè)伺服器執(zhí)行效能，在前端表單資料驗(yàn)證時(shí)檢查出錯(cuò)誤可避免這種情形的發(fā)生減少不必要的網(wǎng)路傳輸：網(wǎng)路頻寬是寶貴的資源，前端表單資料驗(yàn)證可減少不當(dāng)?shù)木W(wǎng)路資料傳輸,前端表單主要資料驗(yàn)證項(xiàng)目,欄位是否已經(jīng)填寫(xiě)資料，例如：密碼欄不應(yīng)為空白。欄位所填的資料是否符合應(yīng)有之格式與值域，例如年齡欄應(yīng)填

16、入小於100之整數(shù)。避免無(wú)心的錯(cuò)誤：部分資料如學(xué)號(hào)、身分證號(hào)，多具有檢查碼的設(shè)計(jì)，可用於檢驗(yàn)所輸入之學(xué)號(hào)是否合理,範(fàn)例,,看看著名網(wǎng)站的表單資料驗(yàn)證,雅虎奇摩會(huì)員註冊(cè)http://tw.reg.yahoo.com/ap/reg/preg?srv=mail&done=http%3A%2F%2Fedit.tpe.yahoo.com%2Fconfig%2Fmail%3F.intl%3Dtw&s=2,看看著名網(wǎng)站的表單資料驗(yàn)

17、證,檢視原始碼了解驗(yàn)證方法了解貫通後寫(xiě)出自己的驗(yàn)證碼一般而言還是以javascript進(jìn)行,PHP語(yǔ)法,測(cè)試程式-test.php上傳至public_html/,資料型態(tài),在PHP中，資料型態(tài)主要有八種布林型態(tài)（Booleans）整數(shù)型態(tài)（Integers）浮點(diǎn)數(shù)型態(tài)（Floating point numbers）字串型態(tài)（Strings）陣列型態(tài)（Arrays）物件型態(tài)（Objects）資源型態(tài)（Resource

18、s）空值型態(tài)（NULL）,布林型態(tài)（Booleans）,最簡(jiǎn)單的一種資料型態(tài)，其值只有True（真）與False（假）兩種。主要使用於邏輯運(yùn)算中應(yīng)用表單中， 婚姻狀態(tài)欄位(已婚/未婚)條件判斷式的結(jié)果亦為布林型態(tài)，如 if (成績(jī)>=60) { echo "及格"; } else { echo "不及格"; },整數(shù)型態(tài)（Integers）,PHP表示整數(shù)的方式可以用十進(jìn)制、十六

19、進(jìn)制與八進(jìn)制，正負(fù)號(hào)標(biāo)示於數(shù)值的前面十進(jìn)制：直接以數(shù)值表示，例如100。十六進(jìn)制：數(shù)值以0x開(kāi)頭，例如0x100，等於十進(jìn)制的256。八進(jìn)制：數(shù)值以0（阿拉伯?dāng)?shù)字的零，不是英文字母的O）開(kāi)頭，例如0100，等於十進(jìn)制的64,想想以下程式的輸出結(jié)果,PHP 的整數(shù)"; echo 0x100; echo ""; echo 0100;?>,ex2.php,你答對(duì)了嗎？,浮點(diǎn)數(shù)型

20、態(tài)（Floating point numbers）,含有小數(shù)的數(shù)值，可以用下列的方式來(lái)表示，其中e可使用大寫(xiě)也可以使用小寫(xiě)。,字串型態(tài)（Strings）,由一連串字元所構(gòu)成，每一個(gè)字元為1 Byte在PHP中並無(wú)字串長(zhǎng)度的限制表示一個(gè)字串可以把一連串的字元以一對(duì)單引號(hào)或一對(duì)雙引號(hào)將內(nèi)容前後括起來(lái)，但是其作用略有不同雙引號(hào)內(nèi)的變數(shù)（變數(shù)以$開(kāi)頭，用以?xún)?chǔ)存資料，將於稍後介紹）可被顯示成其內(nèi)容而單引號(hào)則會(huì)把它當(dāng)作是一個(gè)普通的文字處理,

21、ex3.php,PHP 的字串"; echo '我的名字叫做$myname ';?>,結(jié)果你又答對(duì)了嗎？,,問(wèn)題來(lái)了,如果字串內(nèi)有單引號(hào)或雙引號(hào)時(shí)要怎麼辦？特殊字元如換行要怎麼表示？如空中大學(xué)要以 echo 輸出echo '空中大學(xué)',特殊字元,陣列型態(tài)（Arrays）,當(dāng)同一性質(zhì)的變數(shù)需要很多個(gè)時(shí)可以使用陣列來(lái)簡(jiǎn)化它的處理,PHP 的陣列";

22、$age = array("Mary"=>18, "Tom"=>21, "Jim"=>25);echo "我的年紀(jì)是$age[Tom]歲";?>,ex4.php,想想結(jié)果、想想如何應(yīng)用,,進(jìn)一步的利用,example-3a.php,請(qǐng)問(wèn)您想知道誰(shuí)的年紀(jì)?郭秋田呂秀霞蔡玉鈴 ,example-3a.php,2

23、5, "玉鈴"=>18, "秀霞"=>20); if (array_key_exists("Name",$_POST)) { $n = $_POST["Name"]; $a = $age[$n]; echo " $n 的年紀(jì)是 $a 歲 "; }?>,物件型態(tài)（Object

24、s）,PHP提供物件的功能，使用者可以利用物件定義出較為複雜或是符合應(yīng)用需求的資料型態(tài)一個(gè)新的資料型態(tài)稱(chēng)為類(lèi)別在類(lèi)別中可定義它的成員與函數(shù)用以代表物件的屬性與操作方式使用物件的程序有兩部分首先先完成類(lèi)別的定義、宣告接著使用new來(lái)產(chǎn)生實(shí)際的物件,定義類(lèi)別的語(yǔ)法,class 類(lèi)別名稱(chēng) { var 資料成員; function 成員函數(shù)() { 函數(shù)內(nèi)容; }},ex5.php,status=$n

25、ew_status; echo "將燈號(hào)設(shè)定為" . $this->status . "燈"; } // 定義顯示目前狀態(tài)成員函數(shù) function get_signal() { echo "現(xiàn)在是" . $this->status . "燈"; }},ex5.php,PHP 的物件$s

26、 = new signal();$s->set_signal("紅");$s->get_signal();?>,執(zhí)行結(jié)果,,資源型態(tài)（Resources）,這是一種特別的型態(tài)，在PHP中資源型態(tài)變數(shù)用以連接外部的資源例如：一個(gè)資料庫(kù)連線資源型態(tài)變數(shù)必須使用特殊的函數(shù)來(lái)操作,空值型態(tài)（NULL）,空值型態(tài)只有一個(gè)值那就是NULL代表變數(shù)沒(méi)有值如$var=NULL;is_null(

27、)函數(shù)可用於檢查變數(shù)的值是否為NULL$var=" ";並不是空值，它代表$var的內(nèi)容是一個(gè)空白字元,自我評(píng)估,我了解每一種資料型態(tài)了我會(huì)表達(dá)十進(jìn)位、八進(jìn)位與十六進(jìn)位整數(shù)陣列型態(tài)懂了嗎？(很難的耶~~)物件的用途與使用時(shí)機(jī)?(難如上青天~~~)我是否看到複雜的程式不會(huì)害怕我是否看到複雜的程式不會(huì)頭昏眼花到目前為止我的精神還很好，沒(méi)有想睡覺(jué) cc..,變數(shù),變數(shù)是程式中用以?xún)?chǔ)存資料的一種方式它除了可以

28、儲(chǔ)存程式執(zhí)行過(guò)程所需的資料外也可以進(jìn)行運(yùn)算、輸出在學(xué)習(xí)任何一種程式語(yǔ)言的過(guò)程中，了解變數(shù)的各項(xiàng)運(yùn)作方式相當(dāng)?shù)闹匾?命名,在PHP中變數(shù)的名稱(chēng)前必需加上一個(gè)「$」例如：$name、$var、$i…等皆代表一個(gè)變數(shù)，變數(shù)有大小寫(xiě)的區(qū)別。PHP的變數(shù)名稱(chēng)和其他標(biāo)籤的命名規(guī)則相同，一個(gè)有效的變數(shù)名稱(chēng)是由英文字母或底線開(kāi)始，跟著是任意長(zhǎng)短的字母、數(shù)字或底線,預(yù)設(shè)變數(shù),PHP中有些變數(shù)是預(yù)先定義好的，可以直接使用，這些變數(shù)通常有特別的用途在

29、為一般的變數(shù)命名時(shí)，請(qǐng)不要使用這些變數(shù)名稱(chēng)預(yù)設(shè)變數(shù)通常為大寫(xiě)預(yù)設(shè)變數(shù)種類(lèi)$_SERVER$_GET$_POST$_SESSION $_COOKIE,$_SERVER變數(shù),SERVER_NAME：網(wǎng)頁(yè)伺服器的名稱(chēng)。SERVER_SOFTWARE：網(wǎng)頁(yè)伺服器使用的軟體。SERVER_PROTOCOL：網(wǎng)頁(yè)伺服器使用的協(xié)定。DOCUMENT_ROOT：網(wǎng)頁(yè)伺服器的網(wǎng)頁(yè)文件主目錄。HTTP_USER_AGENT：使用者WW

30、W瀏覽器的版本。REMOTE_ADDR：使用者的連線IP位址。,ex6.php,PHP 的預(yù)設(shè)變數(shù) 伺服器軟體: " . $_SERVER['SERVER_SOFTWARE'];echo " 伺服器使用的協(xié)定: " . $_SERVER['SERVER_PROTOCOL'];echo " 伺服器的網(wǎng)頁(yè)文件主目錄: " . $_SERVER[&#

31、39;DOCUMENT_ROOT'];echo " 使用者WWW瀏覽器的版本: " . $_SERVER['HTTP_USER_AGENT'];echo " 使用者的連線IP位址: " . $_SERVER['REMOTE_ADDR'];?>,,預(yù)設(shè)變數(shù),$_GET：使用HTTP GET方式傳回的變數(shù)，即可以用來(lái)接收、處理以GET方式傳回的使

32、用者所填表單資料。$_POST：使用HTTP POST方式傳回的變數(shù)，即可以用來(lái)接收、處理以POST方式傳回的使用者所填表單資料$_SESSION：讀取已註冊(cè)的SESSION變數(shù)$_COOKIE：讀取WWW瀏覽器的cookie內(nèi)容,運(yùn)算式,PHP提供的運(yùn)算常用的有指定運(yùn)算算術(shù)運(yùn)算字串運(yùn)算邏輯運(yùn)算比較運(yùn)算,指定運(yùn)算,即利用「=」（等號(hào)）把右邊的運(yùn)算結(jié)果，存入左邊的變數(shù)在等號(hào)的左邊只能是一個(gè)變數(shù)符號(hào)，如$x=$x+6以數(shù)

33、學(xué)的眼光來(lái)看，這是一個(gè)不會(huì)成立的式子在程式中則代表把原$x的值加上6後再存入$x中,算術(shù)運(yùn)算,字串運(yùn)算,功能為連接兩個(gè)字串使用的運(yùn)算子符號(hào)為「.」例如$a = $b . $c表示$a的內(nèi)容為$b與$c字串連接,邏輯運(yùn)算,比較運(yùn)算,自我評(píng)估,我了解變數(shù)的概念了嗎？我知道PHP有哪些預(yù)設(shè)變數(shù)，並知道它們的功能我會(huì)寫(xiě)一個(gè)PHP程式把預(yù)設(shè)變數(shù)的內(nèi)容顯示出來(lái)我已經(jīng)能看得懂各種不同的運(yùn)算式，並知道如何解釋它,作業(yè),在example-