1-23

01 開始撰寫 PHP 程式

1-6 撰寫第一個 PHP程式

PHP 程式可以嵌入 HTML 文件，也可以放在外部檔案，用戶端任何與 HTML

相容的技術亦相容於 PHP程式，例如 CSS、JavaScript等。當您決定要在網頁上

加入 PHP程式時，您並不需要改變自己一貫的網頁設計方式，只要在涉及伺服

器端功能的部分加入 PHP程式即可。

1-6-1 將 PHP程式嵌入 HTML文件

我們直接來示範如何將 PHP程式嵌入 HTML文件，請依照如下步驟操作：

1. 開啟 Notepad++，然後撰寫如下文件，注意最左邊的行號和冒號是為了方

便解說之用，不要輸入至程式碼。

\ch01\hello.php

01: 02: 03: 04: 05: 我的第一個 PHP程式 06: 07: 08: 12: 13:

03 ~ 06：HTML 文件標頭，其中第 04 行是指定網頁的編碼方式為

UTF-8，若網頁有輸出中文到瀏覽器，就一定要加上這行敘述，否則

中文會變成亂碼，而第 05 行是指定在瀏覽器的索引標籤顯示「我的

第一個 PHP程式」。

07 ~ 12：HTML文件主體，您可以在此放置網頁內容。

PHP程式碼區塊 HTML文件主體

HTML文件標頭

1-24

08 ~ 11：PHP程式碼區塊，前後以第 08、11行的 標示

起來，PHP的剖析程式會去解譯 之間的程式碼。

09：呼叫 PHP的內建函式 echo()，在網頁上顯示參數所指定的字串，

例如此處的 "Hello World!"，注意 PHP程式的敘述結尾必須加上分號

(;)。

10：呼叫 PHP的內建函式 phpinfo()，在網頁上顯示 PHP的相關資訊，

包括 PHP的版本、作業系統、Apache環境設定、MySQL支援、ODBC

支援等。

2. 從 NotePad++ 的功能表列選取 [檔案] \ [儲存檔案] 或 [檔案] \ [另存新

檔]，螢幕上會出現 [另存新檔] 對話方塊，請依照下圖操作，注意編碼方

式為 UTF-8無 BOM、檔名為 hello.php，並存放在網頁主目錄的 ch01資料

夾，即 C:\AppServ\www\ch01 (註：編碼方式可以在 [編碼] 子功能表中查

看，本書範例程式均採用 [編譯成 UTF-8碼 (檔首無 BOM)])。

4. 按 [存檔]

1. 將存檔路徑設定為網頁主目錄的 ch01資料夾，即 C:\AppServ\www\ch01

3. 輸入檔案名稱為 hello (副檔名預設為 .php)

2. 存檔類型預設為 PHP

1-25

01 開始撰寫 PHP 程式

3. 開啟瀏覽器，在網址列輸入 http://localhost/ch01/hello.php 並按 [Enter]

鍵，就會得到如下結果。

除了以 標示 PHP程式碼區塊，您也可以採用下列幾種方式，但我

們建議還是以 為主：

：若您要採用 標示 PHP 程式碼區塊，那麼必須將php.ini 檔案內的 short_open_tag 設定為 on，雖然 比 簡潔，但卻與 XML不相容。

⋯：這種寫法是以 HTML元素標示 PHP程式碼區塊，不僅冗長，而且若網頁上包含 JavaScript，容易和標示

JavaScript程式碼區塊的 ⋯ 混淆。

：這種寫法其實是用來標示 ASP 程式碼區塊，在過去，為了鼓勵 ASP網頁開發人員轉用 PHP，因而允許以 標示 PHP程

式碼區塊。

此為第09行的執行結果

此為第10行的執行結果

1-26

1-6-2 將 PHP程式放在外部檔案

我們直接來示範如何將 PHP程式放在外部檔案，請依照如下步驟操作：

1. 首先，將 PHP程式放在外部檔案。請開啟 NotePad++，然後撰寫如下 PHP

程式，編碼方式為 UTF-8 無 BOM、檔名為 demo.inc，並存放在網頁主目

錄下的 ch01資料夾 (即 C:\AppServ\www\ch01)。

\ch01\demo.inc

2. 接著，在網頁內指定外部的 PHP檔案路徑。請開啟 NotePad++，然後撰寫

如下文件，編碼方式為 UTF-8無 BOM、檔名為 hello2.php，並存放在網頁

主目錄下的 ch01 資料夾。此處是以 PHP 的內建函式 include_once() 指定

外部的 PHP檔案路徑。

\ch01\hello2.php

我的第一個 PHP程式

3. 最後，開啟瀏覽器，在網址列輸入 http://localhost/ch01/hello2.php 並按

[Enter] 鍵，就會得到如下結果。

1-27

01 開始撰寫 PHP 程式

PHP提供了下列四個內建函式可以用來指定外部的 PHP檔案路徑：

include("/path/filename")

require("/path/filename")

include_once("/path/filename")

require_once("/path/filename")

其差異如下：

當有錯誤發生時，include() 和 include_once() 僅會造成警告 (warning)，而 require() 和 require_once() 卻會造成程式終止執行 (fatal error)。

include_once() 和 require_once() 僅會載入外部的 PHP檔案一次，不會重複載入，這兩個內建函式非常實用，因為在 PHP程式中重複定義函式，

將會導致嚴重錯誤 (fatal error)。

既然如此，那麼 include() 和 require() 何時才派得上用場呢？當您希望自己撰寫出完美無暇的 PHP程式時，就可以採用這兩個比較嚴格的內建

函式，一旦重複定義函式，程式將無法執行，直到您找出錯誤。

1-28

在本節的最後，我們來補充說明一點，就是 PHP 的內建函式 echo() 除了能夠

輸出字串到網頁，也能夠輸出 HTML 元素到網頁。下面是一個例子，其中第

09行的 echo() 函式除了輸出字串 Hello World! 到網頁，還輸出 、、

三個 HTML元素到網頁，因此，這串字串的瀏覽結果將會呈現標題 1、粗

體、斜體的效果，如下圖。

\ch01\hello3.php

01: 02: 03: 04: 05: 我的第一個 PHP程式 06: 07: 08: 11: 12:

1-29

01 開始撰寫 PHP 程式

1-7 PHP程式碼撰寫慣例

在說明 PHP程式碼撰寫慣例之前，我們先來討論什麼叫做程式 (program)，所

謂程式是由一行一行的敘述或陳述式 (statement) 所組成，而敘述或陳述式則

是由「保留字」、「特殊字元」或「識別字」所組成：

保留字 (reserved word)：又稱為關鍵字 (keyword)，它是由 PHP所定義，包含特定的意義與用途，程式設計人員必須遵守 PHP的規定來使用保留

字，否則會發生錯誤。舉例來說，function 是 PHP 用來定義函式的保留

字，所以您不能使用 function定義一般的變數或常數。

特殊字元 (special character)：PHP 的特殊字元不少，例如定義函式時所使用的小括號、用來標示區塊開頭與結尾的大括號 ({ })、用來標示敘述

結尾的分號 (;)、用來標示變數名稱的錢字符號 ($)、用來標示多行註解

的 /* */ 等。

識別字 (identifier)：除了保留字、特殊字元之外，程式設計人員可以自行定義新字，做為變數或常數的名稱，例如 myName、myAddress⋯，這

些新字就叫做識別字，識別字不一定要合乎英文文法，但要合乎 PHP命

名規則，而且必須區分英文字母大小寫，稍後我們會做進一步的討論。

原則上，敘述或陳述式是程式內最小的可執行單元，而多個敘述可以構成函式

(function)、流程控制 (flow control)、類別 (class) 等較大的可執行單元。PHP

程式碼撰寫慣例涵蓋了命名規則、註解、縮排、格式等，雖然不是硬性規定，

但遵循這些慣例卻可以提高程式的可讀性，讓程式更容易偵錯與維護。

英文字母大小寫

HTML不會區分標籤與屬性的英文字母大小寫，但 PHP會區分變數名稱與常數

名稱的英文字母大小寫，不會區分內建函式或 define、function、if、else、do、

for、while等保留字的英文字母大小寫，舉例來說，$myName和 $myname是兩

個不同的變數，因為大寫的 N和小寫的 n不同，而 if和 IF指的則都是 if判斷

結構。

1-30

空白字元

PHP會自動忽略多餘的空白字元，例如下面幾個敘述的意義均相同：

分號

PHP程式的每行敘述結尾要加上分號 (;)，例如：

echo ("Hello World!");

註解

PHP提供了 // 和 # 兩種單行註解符號，例如：

PHP亦提供了 /* */ 一種多行註解符號，例如：

要注意的是切勿使用巢狀註解，以免發生錯誤，例如：

另外要提醒您，HTML的註解元素為 ，請勿與 PHP的註解符號混淆。

$x = 10; $x = 10; $x = 10;

//這是第一種單行註解符號 #這是第二種單行註解符號

/* 這是 多行註解符號 */

/* xxxxx /* 這是巢狀註解，將發生錯誤 */ */

1-31

01 開始撰寫 PHP 程式

保留字一覽

除了下表，PHP的保留字尚有一些預先定義的類別名稱、函式名稱、變數名稱、

常數名稱等，由於這些名稱非常多，無法一一列舉，有需要的讀者，可以自行

參考 PHP文件。

and or xor __FILE__

exception php_user_filter __LINE__ array ()

as break case cfunction

class const continue declare

default die () do echo ()

else elseif empty () enddeclare

endfor endforeach endif endswitch

endwhile eval () exit () extends

for foreach function global

if include () include_once () isset ()

list () new old_function print ()

require () require_once () return () static

switch unset () use var

while __FUNCTION__ __CLASS__ __METHOD__

15C H A P T E R

15-2

15-1 認識 Google API

顧名思義，Google API就是 Google提供給協力廠商或程式設計人員使用的函式

或副程式，其種類繁多，大部分的 Google服務都有對應的 API可以呼叫，例如：

Google Maps API：透過一系列的 Google Maps API，使用者可以將 Google的互動式地圖整合至自己的網站。

Android：Android 是行動裝置的軟體套件，包括作業系統、中介軟體及主要的應用程式，而 Android SDK則包含所有必要的工具和 API，可以協

助使用者開發適用於 Android行動裝置的應用程式。

Google Calendar API：透過這組日曆工具，使用者可以編輯自己的行事曆，並整合到自己的網站。

Google Toolbar API：透過這組 API，使用者可以建立 Google工具列的自訂按鈕。

YouTube API：透過這組 API，使用者可以將 YouTube的影片內容與功能整合至自己的應用程式、網站或裝置，例如搜尋影片、上傳影片、建立

播放清單、自訂播放程式等。

Google Earth API：透過 Google Earth外掛程式及其 JavaScript API，可以讓使用者將 Google Earth (3D數位地球) 加入自己的網站，並進一步繪製標

記與線條、在地表上加入圖片、新增 3D模型或載入 KML檔案，以建置

複雜的 3D地圖應用程式。

Google AJAX Search API：透過這組 API，使用者可以將 Google的搜尋功能整合在自己的網站，而且搜尋項目包括地圖、影片、新聞、部落格、

圖片、書籍等。

不同的 Google API有不同的用途與使用方式，在本章中，我們會示範如何使用

Google Maps API將 Google Maps加入網頁。至於其它 Google API，有興趣的讀

者請自行參考 Google Developers網站 (https://developers.google.com/)。

15-3

15 Google 地圖應用網站

15-2 在網頁上加入 Google Maps

在本節中，我們會以實際的例子說明如何使用 Google Maps API將 Google Maps

加入網頁，其執行結果如下，這個網頁不僅能在 PC 版瀏覽器執行，也能在行

動版瀏覽器執行，若您有需要，可以結合第 11章介紹的 jQuery Mobile，將這個

網頁改寫成行動版的介面。

1. 核選一個景點

2. 點取此鈕

3.出現Google地圖，上面會標示該景點的位置

點取此超連結可以返回上一頁繼續查詢景點

圖(ㄧ)

圖(二)

15-4

您可以往上下左右的方向拖曳地圖，也可以拖曳圖(二)右下角的調整桿，以放

大或縮小地圖的顯示比例。此外，您還可以點取左上角的 [衛星檢視]，改以衛

星圖的方式顯示地圖，例如圖(三)，至於圖(四)則是行動版瀏覽器的執行結果。

圖(三)點取左上角的 [ 衛星檢視]，改以衛星圖的方式顯示地圖

圖(四)行動版瀏覽器的執行結果

15-5

15 Google 地圖應用網站

看到 Google地圖功能，您是否以為程式碼會非常複雜？其實不會！而這主要就

是因為有 Google Maps API的幫助，我們趕快來看一下相關的程式碼。

這個例子是由下列兩個程式所組成：

：這是主程式，用來顯示核取清單，使用者只要核取景點，然後按 [檢視地圖]，就會呼叫 。

：這個程式負責透過 Google Maps API顯示地圖，並在地圖上標示景點的位置。

\ch15\farm.php

01: 02: 03: 04: 05: 06: 07: 13: 14:

15-6

08 ~ 11：定義一個名稱為 farm_address的陣列來存放各個景點的地址，若景點個數很多，可以改用MySQL資料庫來存放相關資料。

13 ~ 19：在網頁上插入一個表單，裡面有一個包含四個項目的核取清單和一個 [檢視地圖] 按鈕，其中第 13 行是利用 action 屬性指定表單處

理程式為 showmap.php，當使用者點取 [檢視地圖] 按鈕時，就會執行

showmap.php，而第 14 ~17行則是插入包含四個項目的核取清單，要注

意的是這些項目的 value屬性被指定為各個景點的地址。

\ch15\showmap.php (下頁續 1/2)

01: 02: 03: 04: 05: 06: 07: 08: var geocoder; 09: var map; 10: 11: function initialize() 12: { 13: geocoder = new google.maps.Geocoder(); 14: var latlng = new google.maps.LatLng(0, 0); 15: var myOptions = {zoom:10, center:latlng, mapTypeId:google.maps.MapTypeId.ROADMAP}; 16: map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 17: codeAddress(); 18: } 19: 20: function codeAddress() 21: { 22: var address = document.getElementById("address").value; 23: if (geocoder) 24: {

25: geocoder.geocode({'address': address}, function(results, status)

15-7

15 Google 地圖應用網站

\ch15\showmap.php (接上頁 2/2)

26: { 27: if (status == google.maps.GeocoderStatus.OK) 28: { 29: map.setCenter(results[0].geometry.location); 30: var marker = new

google.maps.Marker({map:map,position:results[0].geometry.location}); 31: } 32: else 33: { 34: alert("檢視地圖失敗，原因在於：" + status); 35: } 36: }); 37: } 38: } 39: 40: 41: 42:

15-8

14：建立一個隸屬於 google.maps.LatLng 類別的物件，然後指派給變數latlng，用來存放緯度和經度，此處是將預設的緯度和經度指派為 (0, 0)。

15：定義一個變數 myOptions，用來指定地圖選項，包括縮放比例為 10、中心點為變數 latlng所指定的緯度和經度、地圖類型為預設的 2D地圖。

16：建立一個隸屬於 google.maps.Map類別的物件，然後指派給變數 map，用來存放地圖，而且該地圖會顯示在 HTML 網頁中 id 屬性為

"map_canvas" 的元素內，此處指的是第 43行所插入的 元素。

17：呼叫 codeAddress() 函式。

20 ~ 38：定義 codeAddress() 函式，以將第 22行所取得的地址轉換成地理座標，並使用 marker在地圖上標示該位置。

41：利用 元素的 onload 屬性指定在網頁載入的同時去執行initialize() 函式。

42：在網頁上插入一個隱藏欄位，該欄位的 id屬性為 "address"，value屬性為使用者在 網頁中所核取之景點的地址，第 22行就是利

用這個元素取得要在地圖上做標示的地址。

43：利用 元素插入一個 id屬性為 "map_canvas"、寬度為 500像素、高度為 500 像素的區塊，做為地圖的容器。您也可以視實際情況指定該

區塊的大小，假設要填滿整個顯示範圍，那麼可以將 500px 全部改為

100%。

44：插入一個超連結，供使用者返回 ，以繼續查詢其它景點的地圖。

/ColorImageDict > /JPEG2000ColorACSImageDict > /JPEG2000ColorImageDict > /AntiAliasGrayImages false /CropGrayImages true /GrayImageMinResolution 300 /GrayImageMinResolutionPolicy /OK /DownsampleGrayImages true /GrayImageDownsampleType /Bicubic /GrayImageResolution 300 /GrayImageDepth -1 /GrayImageMinDownsampleDepth 2 /GrayImageDownsampleThreshold 1.50000 /EncodeGrayImages true /GrayImageFilter /DCTEncode /AutoFilterGrayImages true /GrayImageAutoFilterStrategy /JPEG /GrayACSImageDict > /GrayImageDict > /JPEG2000GrayACSImageDict > /JPEG2000GrayImageDict > /AntiAliasMonoImages false /CropMonoImages true /MonoImageMinResolution 1200 /MonoImageMinResolutionPolicy /OK /DownsampleMonoImages true /MonoImageDownsampleType /Bicubic /MonoImageResolution 1200 /MonoImageDepth -1 /MonoImageDownsampleThreshold 1.50000 /EncodeMonoImages true /MonoImageFilter /CCITTFaxEncode /MonoImageDict > /AllowPSXObjects false /CheckCompliance [ /None ] /PDFX1aCheck false /PDFX3Check false /PDFXCompliantPDFOnly false /PDFXNoTrimBoxError true /PDFXTrimBoxToMediaBoxOffset [ 0.00000 0.00000 0.00000 0.00000 ] /PDFXSetBleedBoxToMediaBox true /PDFXBleedBoxToTrimBoxOffset [ 0.00000 0.00000 0.00000 0.00000 ] /PDFXOutputIntentProfile () /PDFXOutputConditionIdentifier () /PDFXOutputCondition () /PDFXRegistryName () /PDFXTrapped /False

/CreateJDFFile false /Description > /Namespace [ (Adobe) (Common) (1.0) ] /OtherNamespaces [ > /FormElements false /GenerateStructure false /IncludeBookmarks false /IncludeHyperlinks false /IncludeInteractive false /IncludeLayers false /IncludeProfiles false /MultimediaHandling /UseObjectSettings /Namespace [ (Adobe) (CreativeSuite) (2.0) ] /PDFXOutputIntentProfileSelector /DocumentCMYK /PreserveEditing true /UntaggedCMYKHandling /LeaveUntagged /UntaggedRGBHandling /UseDocumentProfile /UseDocumentBleed false >> ]>> setdistillerparams> setpagedevice