第1章 PHP基礎與開發環境的建立

本投影片參考陳會安先生投影片製作修改，僅供教學使用。楊偉儒

Email: wzyang0825@gmail.com

1

第1章 PHP基礎與開發環境的建立

1‐1 Web應用程式的基礎

1‐2 網頁設計技術

1‐3 建立Windows的PHP開發環境

1‐4 PHP程式碼編輯器

1-1 Web應用程式的基礎

1‐1‐1 WWW與主從架構系統

1‐2‐1 網頁設計技術

1-1-1 WWW與主從架構系統 -WWW

「WWW」（World Wide Web）全球資訊網簡稱Web，這是在1989年歐洲高能粒子協會，Tim Berners Lee領導的研究小組開發的Internet服務，一種主從架構和分散式網路服務系統，可以在網路上傳送圖片、文字、影像和聲音等多媒體資料。

Web使用者只需啟動瀏覽器輸入URL網址後，就可以檢視儲存在Web伺服器的網頁內容，Web伺服器可以位在同一台電腦，或遠在世界的另一個地方，換句話說，秀才不出門，能知天下事，只需在家中電腦，就可以透過瀏覽器存取全世界的資源。

1-1-1 WWW與主從架構系統 -主從架構

WWW全球資訊網是一種主從架構的電腦系統，在主從架構的主端是「伺服端」（Server），指的是Web伺服器，儲存HTML網頁和圖片等相關的多媒體資料；從端是「客戶端」（Client），也就是使用者執行瀏覽器的電腦，負責和伺服器溝通和讀取伺服器的資料，傳送的是HTML網頁和相關檔案，如下圖所示：

1-1-1 WWW與主從架構系統 -HTTP通訊協定

HTTP通訊協定是一種在伺服端（Server）和客戶端（Client）之間傳送資料的通訊協定，如下圖所示：

1-1-1 WWW與主從架構系統 -HTTP通訊協定的特性

HTTP通訊協定的特性非常重要，因為它會影響Web應用程式執行時的資料分享，主要特性如下所示：

• HTTP通訊協定不會持續保持連線：只有當瀏覽器提出請求時才建立連線，在請求後就斷線等待回應，每一次請求和回應都需事先建立連線。

• HTTP通訊協定不會保留狀態：因為HTTP通訊協定不會保持連線，所以在連線時，伺服端和客戶端互相知道對方，一旦請求結束，就互不相干，所以使用者狀態並不會保留，每一次連線都如同是一位新使用者。

1-1-1 WWW與主從架構系統 -Web應用程式(說明)

Web應用程式（Web Applications）是一組網頁（包含HTML網頁、圖片和相關伺服端網頁技術的程式檔案）的集合，請注意！Web應用程式是在Web伺服器執行，不是在客戶端電腦的瀏覽器執行。

Web應用程式的主要的功能是回應使用者的請求，並且與使用者進行互動，以PHP技術來說，就是建立PHP網站的Web應用程式。目前Internet擁有多種不同類型的Web應用程式，例如：網路銀行、電子商務網站、搜尋引擎、網路商店、拍賣網站和電子公共論壇等。

1-1-1 WWW與主從架構系統 -Web應用程式(架構)

Web應用程式是一種「Web基礎」（Web‐Based）的資訊處理系統（Information Processing Systems），如下圖所示：

網頁設計在本質上是一種程式設計，不同於桌上型應用程式，網頁設計建立程式的輸出結果是HTML網頁，我們需要在瀏覽器顯示執行結果，而不是在Windows作業系統的視窗，或命令提示字元視窗。

因為HTML語言建立的網頁屬於靜態內容，沒有任何互動效果，所以，我們需要搭配網頁設計技術才能建立互動的動態網頁內容，依執行位置分為：客戶端和伺服端網頁技術。

1-1-2 網頁設計技術-說明

1-1-2 網頁設計技術-客戶端網頁技術(圖例)

客戶端網頁技術是指程式碼或網頁是在使用者客戶端電腦的瀏覽器執行，因為瀏覽器本身支援直譯器，所以可以執行客戶端網頁技術，如下圖所示：

1-1-2 網頁設計技術-客戶端網頁技術(種類1)

Java Applet：使用Java語言撰寫的一種Java應用程式，我們需要使用編譯器將原始程式碼編譯成位元組碼，即Java Applet，瀏覽器需要使用Java直譯器「JVM」（Java Virtual Machine）來執行。

JavaScript（Jscript）：JavaScript是Netscape開發的一種Script腳本語言，淺顯的程式語法，就算初學程式設計者也可以運用自如，輕鬆在網頁上建立互動效果；Jscript為微軟推出相容JavaScript的Script語言，簡單的說，Netscape或Mozilla Firefox支援JavaScript；Internet Explorer支援Jscript。

ActionScript與Flash：ActionScript是Macromedia公司開發的一種Script腳本語言，可以讓Flash動畫電影檔產生互動效果，這是一種類似JavaScript語法的腳本語言。Flash是Macromedia公司的軟體名稱，可以用來建立動畫效果，瀏覽器只需安裝Flash播放程式，就可以在網頁顯示Flash檔案建立的動畫效果。我們可以使用Flash和ActionScript來輕鬆建立動畫效果的網頁應用程式。

1-1-2 網頁設計技術-客戶端網頁技術(種類2)

VBScript：VBScript是Visual Basic語言家族的成員，全名Microsoft Visual Basic Scripting Edition，簡稱VBScript。VBScript是一種完全免費的直譯語言，它也是一種在瀏覽器執行的網頁語言，能夠讓網頁設計者開發互動多媒體的網頁內容，目前只有微軟Internet Explorer瀏覽器支援VBScript。

DHTML：「DHTML」（Dynamic HTML）是一種在瀏覽器建立HTML動態效果的技術，主要是由三種元素所組成：HTML、CSS和Script語言。

Ajax：Ajax是Asynchronous JavaScript And XML的縮寫，譯成中文就是非同步JavaScript和XML技術，Ajax技術是由HTML和CSS、XML、XML DOM和XMLHttpRequest物件組成。

Silverlight：Silverlight是一套用來開發豐富網際網路應用程式（Rich Internet Application，RIAs）的工具程式，其定位和Macromedia公司的Flash相同，這是微軟開發的RIA工具，提供網頁設計師另一種建立豐富網頁內容的選擇。

1-1-2 網頁設計技術-伺服端網頁技術(圖例)

伺服端網頁技術是在Web伺服器上執行的應用程式，而不是在客戶端電腦的瀏覽器執行，如下圖所示：

1-1-2 網頁設計技術-伺服端網頁技術(種類1)

CGI（Common Gateway Interface）：共通匣道介面提供Web伺服器執行外部程式的管道，CGI應用程式是一種外部程式的執行檔，能夠使用各種程式語言來開發，例如：Visual Basic、C、C++和Perl，程式需要編譯成執行檔案，以便在伺服端執行。

ASP（Active Server Pages）：英文字面上是一種讓網頁在伺服器上動起來的技術，能夠將Script語言內嵌HTML標籤的網頁，在伺服端產生動態網頁內容，這是一種在伺服端以直譯方式執行的網頁技術。

ASP.NET：ASP.NET是繼ASP 3.0後，微軟開發的伺服端網頁技術，以「CLR」（Common Language Runtime）架構的.NET程式設計平台，可以讓我們使用CLR語言在伺服端建立Web應用程式。

1-1-2 網頁設計技術-伺服端網頁技術(種類2)

PHP（PHP: Hypertext Preprocessor）：一種通用和開放原始碼（Open Source）的伺服端Script語言，可以直接內嵌於HTML網頁，特別適用在Web網站開發，主要是使用在Linux/Unix作業系統的伺服端網頁技術，目前也支援Windows作業系統。

JSP（Java Server Pages）：Java家族中和ASP一較長短的網頁技術，以Java語言來說，Java Applet是下載到客戶端執行的程式檔；Java Servlet是在伺服端執行；JSP是結合HTML和Java Servlet的一種伺服端網頁技術。

1-2 PHP伺服端網頁技術 - 說明

PHP（PHP: Hypertext Preprocessor）是伺服端、跨平台和內嵌於HTML網頁的腳本語言（Scripting Language），屬於一種開放原始碼（Open Source）的伺服端網頁技術。

PHP是一種廣泛應用的通用腳本語言，特別適用在Web網站的開發。PHP最初只是一套使用Perl語言撰寫的工具程式，主要是用來追蹤線上履歷表的存取，如今PHP在伺服端網頁技術已經成為主要的腳本語言之一。

1-2 PHP伺服端網頁技術 – PHP 7

源於PHP 6開發專案失敗收場，在2015年底推出的PHP新版本直接跳過6.0版，稱為PHP 7.x，PHP 7.x是使用最新Zend Engine 3.0，提供比PHP 5.6版提昇2倍的執行效能，和50%的記憶體消耗，並且提供多種全新語法，可以在不增加硬體配備情況下，服務更多的並行使用者，新版PHP 7.x可以說是目前Web伺服端網頁技術的最佳選擇。

1-2 PHP伺服端網頁技術 - PHP的用途

PHP是一種取代CGI程式的網頁程式語言，只要是CGI可以實作的功能，都可以改用PHP程式來建立，PHP語言只需配合Web伺服器和瀏覽器的開發環境，就可以透過瀏覽器執行PHP程式，並且顯示PHP執行結果的網頁內容。

不只如此，PHP還可以配合伺服端的資料庫系統建立網頁資料庫（Web Database），直接連接和存取資料庫的記錄資料在瀏覽器顯示。

1-2 PHP伺服端網頁技術 - PHP的開發環境

PHP是一種跨平台的伺服端網頁技術，支援Linux/UNIX、Windows和Mac OS等多種作業系統，在本書是建立Windows作業系統下的PHP開發環境，其使用的Web伺服器、資料庫系統和瀏覽器，如下表所示：

作業系統 Web伺服器 資料庫系統 瀏覽器

Windows Apache MySQL Google Chrome

1-3 建立Windows的PHP開發環境

1‐3‐1 安裝XAMPP的PHP整合套件

1‐3‐2 設定XAMPP的Apache伺服器埠號

1‐3‐3 啟動與停止Apache和MySQL伺服器

1‐3‐4 XAMPP管理圖示的功能表指令

1-3 建立Windows的PHP開發環境

PHP是一種伺服端網頁技術，因為目前Web網站大都是搭配資料庫系統的網頁資料庫，所以在Windows作業系統建立的PHP開發環境（正確的說是執行環境），需要同時安裝Web伺服器、PHP和資料庫系統。

為了方便讀者快速建立PHP開發環境，本書是直接使用現成AMP（Apache, MySQL, PHP）套件來自動安裝與設定Apache、PHP和MySQL，而不用自行一一安裝各種應用程式。

1-3-1 安裝XAMPP的PHP整合套件-說明

AMP套件是一種整合的PHP安裝套件，可以自動安裝與設定PHP、MySQL和Apache伺服器來建立PHP開發環境。常用AMP套件有XAMPP、WampServer和AppServ等，在本書是使用XAMPP。

XAMPP安裝套件本身是Apache Friends開發專案，也是目前最流行的PHP開發環境之一，安裝套件包含MariaDB、PHP和Perl。請注意！在XAMPP安裝套件中的MySQL是MariaDB，這是一套由MySQL原開發團隊所開發，完全相容MySQL的免費關聯式資料庫系統。在XAMPP官網：https://www.apachefriends.org/zh_tw/index.html。

1-3-1 安裝XAMPP的PHP整合套件-說明

XAMPP只適合用來做為系統開發階段使用，並不建議直接用在實際上線的系統中。 XAMPP設定的方式，是盡可能的開啟和允許所有的設定，來滿足程式開發人員的需要。對一個系統開發環境來說，這樣的設定是很棒的，但是對實際上線運作系統來，可能會造成系統安全上的漏洞。

下面是XAMPP缺乏安全性的列表：＊MySQL 的系統管理者 (root) 預設沒有密碼。＊可以透過任何網路來存取MySQL。＊可以透過任何網路來存取 PhpMyAdmin＊可以透過任何網路來存取所有範例。

24

1-3-1 安裝XAMPP的PHP整合套件

https://www.apachefriends.org/zh_tw/index.html

25

1-3-1 安裝XAMPP的PHP整合套件

26

1-3-1 安裝XAMPP的PHP整合套件

27

1-3-1 安裝XAMPP的PHP整合套件

28

1-3-1 安裝XAMPP的PHP整合套件

29

XAMPP 控制面板管理中心

30

1-3-2 設定XAMPP的Apache伺服器埠號

XAMPP套件是使用XAMPP控制面板來管理Apache和MySQL伺服器的啟動和停止，為了避免和其他執行中Web伺服器或服務的埠號相衝突，在本書是改用8080埠號，如下圖所示：

1-3-2 設定XAMPP的控制面板使用的埠號

32

1-3-2 設定XAMPP的控制面板使用的埠號

33

1-3-2 設定XAMPP的控制面板使用的埠號

34

1-3-3 啟動與停止Apache和MySQL伺服器 –開啟面板

在設定好Apache伺服器的埠號後，就可以啟動Apache和MySQL伺服器，並且進入預設的首頁，請執行「開始/所有程式/XAMPP/XAMPP Control Panel」指令啟動XAMPP控制面板，預設縮小在右下方工具列圖示，如下圖所示：

1-3-3 啟動與停止Apache和MySQL伺服器 –啟動與停止服務

按Apache哪一列【Start】鈕啟動Apache伺服器。按第二列的【Start】鈕啟動MySQL伺服器。按這2列的【Stop】鈕，就可以分別停止Apache和MySQL伺服器。

1-3-3 啟動與停止Apache和MySQL伺服器 –進入預設首頁

按Apache的【Admin】鈕，可以啟動預設瀏覽器進入預設首頁。

1-3-3 啟動與停止Apache和MySQL伺服器 –進入預設首頁

38

1-3-3 啟動與停止Apache和MySQL伺服器 –進入預設首頁

39

1-3-3 啟動與停止Apache和MySQL伺服器 –進入預設首頁

40

1-3-3 啟動與停止Apache和MySQL伺服器 –進入預設首頁

41

1-3-4 XAMPP管理圖示的功能表指令

除了在XAMPP控制面板管理Apache和MySQL伺服器的啟動和停止外，在工作列圖示的功能表也提供對應的指令，如下圖所示：

1-4 PHP程式碼編輯器 – 說明

在建立PHP執行與測試環境後，我們還需要編輯PHP程式的工具程式，在Windows作業系統可以使用【記事本】撰寫PHP程式，如果覺得【記事本】功能太過陽春，在網路上可以找到幾套取代【記事本】的加強版程式碼編輯器，其說明如下所示：• NetBbeans (有問題)• Eclipse/Neon (?)• Notepad++程式碼編輯器：一套著名的免費程式碼編輯器，支援中

文使用介面和多種程式語言的原始程式碼編輯，包含PHP，其官方網址為：https://notepad‐plus‐plus.org/。(缺支援)

• PSPad程式碼編輯器：另一套著名的免費程式碼編輯器，同樣支援中文使用介面和多種程式語言的原始程式碼編輯和PHP，其官方網址為：http://www.pspad.com/。

• fChart: 作者自行研發

1-4 PHP程式碼編輯器 – 說明

• Dreamweaver• Brackets• Sublime Text• Visual Studio• NotePad

44

Install NetBeans

https://netbeans.org/

45

Install

46

47 48

Neon

2016 年 6 月 Eclipse基金會宣布發布Eclipse Neon，這個版本的IDE支持Java、JavaScript、C/C++、PHP和Fortran等多種程式語言。

49

Neon

50

Eclipse – Direct Install

https://eclipse.org/downloads/

Eclipse的PDT(PHP Development Tools)安裝

我們可以下載PDT的來源有二：一是Eclipse的官網，另外一個就是PHP的官網Zend。

PDT web site: https://eclipse.org/pdt/

Eclipse的PDT(PHP Development Tools)安裝 –Install New Software

Zend Studio and Web Debugger

http://www.zend.com/en/products/studio/downloads#Windows

NotePad++

https://notepad‐plus‐plus.org/

55

NotePad++

56

NotePad++ Debug Plugin

Plugin http://sourceforge.net/projects/npp‐plugins/files/

NotePad++

58

NotePad++

59

NotePad++ Xdebug Plugin

Just drop the dbgpPlugin.dll into you Notepad++ plugins directory (ex: H:\program files(x86)\notepad++\plugins).

60

XDdebug for XAMPP

https://xdebug.org/

61

XDdebug for XAMPP

62

XDdebug for XAMPP

63

XDdebug for XAMPP

64

XDdebug for XAMPP

65

XDdebug for XAMPP

66

XDdebug for XAMPP

67

將畫面整個 copy 下來 (CTRL-A, CTRL-C)

XDdebug for XAMPP

68

不要懷疑，直接貼(CTRL-V) 進來 !!

按下去，分析它

XDdebug for XAMPP

69

XDdebug for XAMPP - Configuration Open H:\XAMPP\php\php.ini Add the following code to the .ini file and save

• zend_extension=H:\xampp\php\ext\php_xdebug‐2.4.1‐5.6‐vc11.dll• xdebug.remote_autostart=on• xdebug.remote_enable=on• xdebug.remote_host=127.0.0.1• xdebug.remote_port=9000• xdebug.remote_handler=dbgp• xdebug.remote_mode=req• xdebug.idkey=default• xdebug.show_exception_trace=0• xdebug.show_local_vars=9• xdebug.show_mem_delta=0• xdebug.trace_format=0• xdebug.profiler_enable  = 1 70

XDdebug for XAMPP

Restart Apache server in XAMPP The meaning of the settings can be found in 

https://xdebug.org/docs/all_settings

71

Example

Use notepad++ to new a file.

72

XDdebug for XAMPP

XAMPP 網站預設安裝目錄為C:\xampp\htdocs\

New a sites directory under H:\xampp\htdocs New a test directory under sites directory Save the php file and as test.php under test directory

73

NotePad++ Xdebug Plugin

NotePad++ Xdebug Plugin

75

NotePad++ Xdebug Plugin

如果使用虛擬主機的話，「Remote Server IP」項目要改虛擬主機的網域，而「IDE KEY」項目要改成在php.ini 的「xdebug.idekey」項目的設定值，「Remote Path」和「Local Path」這二個項目請設成要 Debug 的網站的根資料夾的路徑，另外，還要勾選下方的「Refresh local context on erery step」和「Refresh global context on every step」，都設定好之後，請點選下方的「Ok」來儲存設定。

NotePad++ Debug - 打開 Debug 工具箱 NotePad++ Debug - 打開 Debug 工具箱

78

NotePad++ Debug – 加中斷點

游標停在要中斷的那一行

加中斷點

NotePad++ Debug

中斷點

NotePad++ Debug 用瀏覽器開啟要除錯的網站

NotePad++ Debug

Allow u to change a variable

NotePad++ Debug

尚未執行，所以還看不到結果。

NotePad++ Debug

NotePad++ Debug - Run NotePad++ Plugin Manager

NotePad++ Plugin Manager NotePad++ Xdebug Plugin

接下來，請用瀏覽器開啟要除錯的網站，然後，在要開啟的網址後面加上「?XDEBUG_SESSION_START=任意字串的名稱」，例如，阿舍要除錯「http://127.0.0.1/index.php」這個網址，那麼，就要在瀏覽器用「http://127.0.0.1/index.php?XDEBUG_SESSION_START=aaaaa」網址來開啟，接著，Notepad++ 就會跳出來，就可以開始除錯了哩！ ....

http://www.arthurtoday.com/2012/10/using‐notepad‐plus‐plus‐and‐xdebug‐in‐winodws.html

https://www.youtube.com/watch?v=BheGVuhQzy0&index=6&list=PLR_6IvWwE0cqmpyiRa6xS53gE6eGquWGf

Useful Plugins

https://www.youtube.com/watch?v=E_htKiQgKO0 https://www.youtube.com/watch?v=PzjPu5F9K9Y

89

1-4 PHP程式碼編輯器 –認識fChart程式碼編輯器

fChart程式碼編輯器是筆者專為初學程式設計者量身打造的一套程式設計教學用途的開發環境，同時支援C、C#、Java和Visual Basic語言的編輯、編譯和執行，也支援PHP程式碼的編寫。

不只如此，為了減少程式碼輸入錯誤，更提供功能表指令來快速插入各種流程圖符號對應的程式碼片段，換句話說，你可以使用功能表指令來快速建立PHP程式碼。

1-4 PHP程式碼編輯器 –安裝fChart程式碼編輯器

fChart程式碼編輯器是一套綠化版工具，並不需要安裝，只需解壓縮至指定目錄就完成安裝，例如：「D:\FlowChartPHP」目錄。

1-4 PHP程式碼編輯器 –啟動和結束fChart程式碼編輯器

在解壓縮至「D:\FlowChartPHP」目錄後，我們可以啟動fChart程式碼編輯器，主要使用的執行檔有2個，其說明如下所示：

• RunfChart.exe：以系統管理員身份啟動 fChart流程圖直譯器。

• fChartCodeEditor.exe：fChart程式碼編輯器的執行檔。

RunfChart

93

RunfChart

94

RunfChart

95

RunfChart

96

1-4 PHP程式碼編輯器 –啟動和結束fChart程式碼編輯器

執行RunfChart.exe後，就可以執行功能表指令來載入流程圖專案，副檔名是.fpp，例如：Ch5_2_1.fpp，在上方執行工具列，可以使用動畫來模擬執行流程圖，按最後【程式碼編輯器】鈕，可以啟動fChart程式碼編輯器，你也可以直接執行fChartCodeEditor.exe來啟動，如下圖所示：

1-4 PHP程式碼編輯器 –啟動和結束fChart程式碼編輯器

詳細亦可上 Youtube 網站找 fChart 影片看陳會安先生介紹如何使用。

98

1-4 PHP程式碼編輯器 –設定Apache伺服器的網址

在fChart程式碼編輯器上方工具列的最後，可以指定本機Apache伺服器的URL網址，如下圖所示：

【伺服器網址】欄是本機Apache伺服器的網址，如下所示：http://localhost:8080上述網址是localhost本機，埠號是「:」符號後的8080，請注意！在網址最後並不需要加上「/」符號。

1-4 PHP程式碼編輯器 –指定預設的瀏覽器(說明)

當設定好Apache伺服器的網址，按【啟動瀏覽器】鈕是使用預設瀏覽器來測試執行PHP程式，因為本書是使用XAMPP+Google Chrome瀏覽器來測試執行PHP程式，建議將Google Chrome設為預設瀏覽器。

如果點選HTML網頁不是啟動Google Chrome瀏覽器，請自行啟動Chrome瀏覽器，應該可以在上方看到提示列，請按設為【預設瀏覽器】鈕，將Chrome設為預設瀏覽器，如下圖所示：

1-4 PHP程式碼編輯器 –指定預設的瀏覽器(設定)

如果點選HTML網頁不是啟動Google Chrome瀏覽器，請自行啟動Chrome瀏覽器，應該可以在上方看到提示列，請按設為【預設瀏覽器】鈕，將Chrome設為預設瀏覽器，如下圖所示：

Brackets

http://brackets.io/

102

Brackets

103

Brackets 相關教學

https://www.youtube.com/watch?v=gvT6pT0cdfI&list=PLLso6c_yYkNOdPBAM_E96Lmg2hZJ7C‐_0

How to install xdebug php brackets Runtime Debug?https://www.youtube.com/watch?v=ejbWCxpejhI

104

Sublime Text

https://www.sublimetext.com/

105

Sublime Text

106

Sublime Text 教學

https://www.youtube.com/watch?v=mVKDBMkFrVs&list=PLLso6c_yYkNOpZxiveo6IemGkEwgpFMJR

107