(Microsoft PowerPoint - PHP_Ch01 [\254\333\256e\274\322\246\241])

Size: px

Start display at page:

Download "(Microsoft PowerPoint - PHP_Ch01 [\254\333\256e\274\322\246\241])"

曼染邬
5 years ago
Views:

1 第 1 章 PHP 基礎與開發環境的建立 1-1 Web 應用程式的基礎 1-2 網頁設計技術 1-3 建立 Windows 的 PHP 開發環境 1-4 PHP 程式碼編輯器

2 1-1 Web 應用程式的基礎 WWW 與主從架構系統網頁設計技術

3 1-1-1 WWW 與主從架構系統 -WWW WWW (World Wide Web) 全球資訊網簡稱 Web, 這是在 1989 年歐洲高能粒子協會,Tim Berners Lee 領導的研究小組開發的 Internet 服務, 一種主從架構和分散式網路服務系統, 可以在網路上傳送圖片文字影像和聲音等多媒體資料 Web 使用者只需啟動瀏覽器輸入 URL 網址後, 就可以檢視儲存在 Web 伺服器的網頁內容,Web 伺服器可以位在同一台電腦, 或遠在世界的另一個地方, 換句話說, 秀才不出門, 能知天下事, 只需在家中電腦, 就可以透過瀏覽器存取全世界的資源

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

5 1-1-1 WWW 與主從架構系統 -HTTP 通訊協定 HTTP 通訊協定是一種在伺服端 (Server) 和客戶端 (Client) 之間傳送資料的通訊協定, 如下圖所示 :

6 1-1-1 WWW 與主從架構系統 - HTTP 通訊協定的特性 HTTP 通訊協定的特性非常重要, 因為它會影響 Web 應用程式執行時的資料分享, 主要特性如下所示 : HTTP 通訊協定不會持續保持連線 : 只有當瀏覽器提出請求時才建立連線, 在請求後就斷線等待回應, 每一次請求和回應都需事先建立連線 HTTP 通訊協定不會保留狀態 : 因為 HTTP 通訊協定不會保持連線, 所以在連線時, 伺服端和客戶端互相知道對方, 一旦請求結束, 就互不相干, 所以使用者狀態並不會保留, 每一次連線都如同是一位新使用者

7 1-1-1 WWW 與主從架構系統 - Web 應用程式 ( 說明 ) Web 應用程式 (Web Applications) 是一組網頁 ( 包含 HTML 網頁圖片和相關伺服端網頁技術的程式檔案 ) 的集合, 請注意!Web 應用程式是在 Web 伺服器執行, 不是在客戶端電腦的瀏覽器執行 Web 應用程式的主要的功能是回應使用者的請求, 並且與使用者進行互動, 以 PHP 技術來說, 就是建立 PHP 網站的 Web 應用程式目前 Internet 擁有多種不同類型的 Web 應用程式, 例如 : 網路銀行電子商務網站搜尋引擎網路商店拍賣網站和電子公共論壇等

8 1-1-1 WWW 與主從架構系統 - Web 應用程式 ( 架構 ) Web 應用程式是一種 Web 基礎 (Web-Based) 的資訊處理系統 (Information Processing Systems ), 如下圖所示 :

9 1-1-2 網頁設計技術 - 說明網頁設計在本質上是一種程式設計, 不同於桌上型應用程式, 網頁設計建立程式的輸出結果是 HTML 網頁, 我們需要在瀏覽器顯示執行結果, 而不是在 Windows 作業系統的視窗, 或命令提示字元視窗因為 HTML 語言建立的網頁屬於靜態內容, 沒有任何互動效果, 所以, 我們需要搭配網頁設計技術才能建立互動的動態網頁內容, 依執行位置分為 : 客戶端和伺服端網頁技術

10 1-1-2 網頁設計技術 - 客戶端網頁技術 ( 圖例 ) 客戶端網頁技術是指程式碼或網頁是在使用者客戶端電腦的瀏覽器執行, 因為瀏覽器本身支援直譯器, 所以可以執行客戶端網頁技術, 如下圖所示 :

11 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 來輕鬆建立動畫效果的網頁應用程式

12 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 工具, 提供網頁設計師另一種建立豐富網頁內容的選擇

13 1-1-2 網頁設計技術 - 伺服端網頁技術 ( 圖例 ) 伺服端網頁技術是在 Web 伺服器上執行的應用程式, 而不是在客戶端電腦的瀏覽器執行, 如下圖所示 :

14 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 應用程式

15 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 的一種伺服端網頁技術

16 1-2 PHP 伺服端網頁技術 - 說明 PHP(PHP: Hypertext Preprocessor) 是伺服端跨平台和內嵌於 HTML 網頁的腳本語言 (Scripting Language), 屬於一種開放原始碼 (Open Source ) 的伺服端網頁技術 PHP 是一種廣泛應用的通用腳本語言, 特別適用在 Web 網站的開發 PHP 最初只是一套使用 Perl 語言撰寫的工具程式, 主要是用來追蹤線上履歷表的存取, 如今 PHP 在伺服端網頁技術已經成為主要的腳本語言之一

17 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 伺服端網頁技術的最佳選擇

18 1-2 PHP 伺服端網頁技術 -PHP 的用途 PHP 是一種取代 CGI 程式的網頁程式語言, 只要是 CGI 可以實作的功能, 都可以改用 PHP 程式來建立,PHP 語言只需配合 Web 伺服器和瀏覽器的開發環境, 就可以透過瀏覽器執行 PHP 程式, 並且顯示 PHP 執行結果的網頁內容不只如此,PHP 還可以配合伺服端的資料庫系統建立網頁資料庫 (Web Database), 直接連接和存取資料庫的記錄資料在瀏覽器顯示

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

20 1-3 建立 Windows 的 PHP 開發環境安裝 XAMPP 的 PHP 整合套件設定 XAMPP 的 Apache 伺服器埠號啟動與停止 Apache 和 MySQL 伺服器 XAMPP 管理圖示的功能表指令

21 1-3 建立 Windows 的 PHP 開發環境 PHP 是一種伺服端網頁技術, 因為目前 Web 網站大都是搭配資料庫系統的網頁資料庫, 所以在 Windows 作業系統建立的 PHP 開發環境 ( 正確的說是執行環境 ), 需要同時安裝 Web 伺服器 PHP 和資料庫系統為了方便讀者快速建立 PHP 開發環境, 本書是直接使用現成 AMP(Apache, MySQL, PHP) 套件來自動安裝與設定 Apache PHP 和 MySQL, 而不用自行一一安裝各種應用程式

22 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 官網 :

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

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

25 1-3-3 啟動與停止 Apache 和 MySQL 伺服器啟動與停止服務按 Apache 哪一列 Start 鈕啟動 Apache 伺服器按第二列的 Start 鈕啟動 MySQL 伺服器按這 2 列的 Stop 鈕, 就可以分別停止 Apache 和 MySQL 伺服器

26 1-3-3 啟動與停止 Apache 和 MySQL 伺服器進入預設首頁按 Apache 的 Admin 鈕, 可以啟動預設瀏覽器進入預設首頁

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

28 1-4 PHP 程式碼編輯器說明在建立 PHP 執行與測試環境後, 我們還需要編輯 PHP 程式的工具程式, 在 Windows 作業系統可以使用記事本撰寫 PHP 程式, 如果覺得記事本功能太過陽春, 在網路上可以找到幾套取代記事本的加強版程式碼編輯器, 其說明如下所示 : Notepad++ 程式碼編輯器 : 一套著名的免費程式碼編輯器, 支援中文使用介面和多種程式語言的原始程式碼編輯, 包含 PHP, 其官方網址為 : PSPad 程式碼編輯器 : 另一套著名的免費程式碼編輯器, 同樣支援中文使用介面和多種程式語言的原始程式碼編輯和 PHP, 其官方網址為 :

29 1-4 PHP 程式碼編輯器認識 fchart 程式碼編輯器 fchart 程式碼編輯器是筆者專為初學程式設計者量身打造的一套程式設計教學用途的開發環境, 同時支援 C C# Java 和 Visual Basic 語言的編輯編譯和執行, 也支援 PHP 程式碼的編寫不只如此, 為了減少程式碼輸入錯誤, 更提供功能表指令來快速插入各種流程圖符號對應的程式碼片段, 換句話說, 你可以使用功能表指令來快速建立 PHP 程式碼

30 1-4 PHP 程式碼編輯器安裝 fchart 程式碼編輯器 fchart 程式碼編輯器是一套綠化版工具, 並不需要安裝, 只需解壓縮至指定目錄就完成安裝, 例如 : D:\FlowChartPHP 目錄

31 1-4 PHP 程式碼編輯器啟動和結束 fchart 程式碼編輯器在解壓縮至 D:\FlowChartPHP 目錄後, 我們可以啟動 fchart 程式碼編輯器, 主要使用的執行檔有 2 個, 其說明如下所示 : RunfChart.exe: 以系統管理員身份啟動 fchart 流程圖直譯器 fchartcodeeditor.exe:fchart 程式碼編輯器的執行檔

32 1-4 PHP 程式碼編輯器啟動和結束 fchart 程式碼編輯器執行 RunfChart.exe 後, 就可以執行功能表指令來載入流程圖專案, 副檔名是.fpp, 例如 :Ch5_2_1.fpp, 在上方執行工具列, 可以使用動畫來模擬執行流程圖, 按最後程式碼編輯器鈕, 可以啟動 fchart 程式碼編輯器, 你也可以直接執行 fchartcodeeditor.exe 來啟動, 如下圖所示 :

33 1-4 PHP 程式碼編輯器設定 Apache 伺服器的網址在 fchart 程式碼編輯器上方工具列的最後, 可以指定本機 Apache 伺服器的 URL 網址, 如下圖所示 : 伺服器網址伺服器網址欄是本機 Apache 伺服器的網址, 如下所示 : 上述網址是 localhost 本機, 埠號是 : 符號後的 8080, 請注意! 在網址最後並不需要加上 / 符號符號

34 1-4 PHP 程式碼編輯器指定預設的瀏覽器 ( 說明 ) 當設定好 Apache 伺服器的網址, 按啟動瀏覽器鈕是使用預設瀏覽器來測試執行 PHP 程式, 因為本書是使用 XAMPP+Google Chrome 瀏覽器來測試執行 PHP 程式, 建議將 Google Chrome 設為預設瀏覽器如果點選 HTML 網頁不是啟動 Google Chrome 瀏覽器, 請自行啟動 Chrome 瀏覽器, 應該可以在上方看到提示列, 請按設為預設瀏覽器鈕, 將 Chrome 設為預設瀏覽器, 如下圖所示 :

35 1-4 PHP 程式碼編輯器指定預設的瀏覽器 ( 設定 ) 如果點選 HTML 網頁不是啟動 Google Chrome 瀏覽器, 請自行啟動 Chrome 瀏覽器, 應該可以在上方看到提示列, 請按設為預設瀏覽器鈕, 將 Chrome 設為預設瀏覽器, 如下圖所示 :

Microsoft PowerPoint - PHP_Ch01.ppt [相容模式]

Microsoft PowerPoint - PHP_Ch01.ppt [相容模式] 第 1 章 PHP 基礎與開發環境的建立第 1 章 PHP 基礎與開發環境的建立本投影片參考陳會安先生投影片製作修改, 僅供教學使用楊偉儒 Email: wzyang0825@gmail.com 1 1 Web 應用程式的基礎 1 2 網頁設計技術 1 3 建立 Windows 的 PHP 開發環境 1 4 PHP 程式碼編輯器 1 1-1 Web 應用程式的基礎 1-1-1 WWW 與主從架構系統