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

Size: px

Start display at page:

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

沼仿柯
7 years ago
Views:

1 第 15 章 Mobile PHP 與 Ajax 15-1 Mobile PHP 15-2 Ajax 的基礎 15-3 jquery 的 Ajax 方法 15-4 應用實例 : 關鍵字建議清單

15-1 Mobile PHP 15-1-1 建立 jquery Mobile 程式

2 15-1 Mobile PHP 建立 jquery Mobile 程式 jquery Mobile 的介面元素 PHP 的行動裝置偵測

3 建立 jquery Mobile 程式 - 說明 jquery Mobile 是基於 jquery 函數庫建立的框架 ( Framework), 可以幫助我們建立跨行動裝置的 Mobile 網頁 jquery Mobile 可以在官方網站免費下載, 其下載網址 : 請捲動視窗找到 ZIP File, 點選 Zip File: jquery.mobile zip 超連結下載完整 JavaScript CSS 和 image 檔案, 其下載檔名是 : jquery.mobile zip

4 建立 jquery Mobile 程式使用我們是在 HTML 網頁 <head> 標籤的 <script> 子標籤含括外部 JavaScript 程式碼檔案的 jquery 函數庫 ( 版本是 2.2.0) 和 jquery Mobile, 如下所示 : <link rel="stylesheet" href="jquery.mobile min.css"> <script src="jquery min.js"></script> <script src="jquery.mobile min.js"></script> <script> </script>

5 建立 jquery Mobile 程式 - 步驟一 :HTML5 的 DOCTYPE jquery Mobile 程式是 HTML5 網頁, 所以在第 1 行需要加上 HTML5 的 DOCTYPE, 如下所示 : <!DOCTYPE html>

6 建立 jquery Mobile 程式 - 步驟二 :<meta> 標籤指定編碼和縮放比例在 HTML 的 <head> 區塊需要加上 <meta> 標籤指定編碼和行動裝置的尺寸與縮放比例, 如下所示 : <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> 上述第 1 個 <meta> 標籤指定編碼為 utf-8( 此為 HTML5 寫法 ), 以便可以正確顯示中文內容, 第 2 個 <meta> 標籤指定行動裝置的寬度和縮放比例

7 建立 jquery Mobile 程式 - 步驟三 : 含括含括 jquery 和 jquery Mobile 程式碼檔案和樣式表請將相關.js 和.css 檔案都複製至 Ch15_1_1.html 的同一資料夾後, 就可以在 <head> 區塊使用 <link> 和 <script> 標籤含括 jquery 和 jquery Mobile 程式碼檔案和樣式表, 如下所示 : <link rel="stylesheet" href="jquery.mobile min.css"> <script src="jquery min.js"></script> <script src="jquery.mobile min.js"></script>

8 建立 jquery Mobile 程式 - 步驟四 : 建立頁面 jquery Mobile 是使用標記驅動 (Markup-driven) 來設定與配置頁面, 即使用 HTML5 的 data-role 屬性定義 div 元素是什麼, 如下所示 : <div data-role="page"> <div data-role="header"> <h1> 行動網頁 </h1> </div>

9 建立 jquery Mobile 程式 - 步驟四 : 建立頁面 <div data-role="main" class="ui-content"> <p>jquery Mobile 是基於 jquery 建立的框架, 支援 ios Android BlackBerry bada Windows Phone webos Symbian 和 MeeGo 的 Mobile 網頁應用程式開發 </p> </div> <div data-role="footer"> <h1> 製作者 : 陳會安 </h1> </div> </div>

10 建立 jquery Mobile 程式 - 步驟四 : 建立頁面最外層 div 元素的 data-role 屬性值是 page, 表示是一個頁面, 在之中的內容分成三個區段, 其說明如下表所示 : <div> 標籤的區段 <div data-role="header"> <div data-role="main" class="ui-content"> <div data-role="footer"> 說明定義頁面的標題列, 我們可以在此元素建立巡覽列, 加上 data-position="fixed" 屬性, 可以讓標題列固定顯示在最上方定義頁面實際的內容, 例如 : 文字圖片按鈕和表單等, 也可以只使用 role="main"( 並非所有瀏覽器都支援 ), 之後的 "uicontent" 樣式類別是在頁面內容新增額外的邊界寬度和填充頁面的註腳列, 我們也可以在此元素建立巡覽列, 如果加上 data-position="fixed" 屬性, 可以讓註腳列固定顯示在最下方

15-1-1 建立 jquery Mobile 程式 - 步驟五 : 預覽網頁內容在建立 Ch15_1_1.

11 建立 jquery Mobile 程式 - 步驟五 : 預覽網頁內容在建立 Ch15_1_1.html 後, 我們就可以使用 Google Chrome 瀏覽器來模擬預覽 Mobile 行動網頁內容, 請縮小視窗寬度來顯示, 如右圖所示 :

12 jquery Mobile 的介面元素 - 多頁面同一 jquery Mobile 程式檔可以建立多個頁面, 在同一檔案建立 id 屬性值為 home 和 about 的 2 個頁面, 如下所示 : <div data-role="page" id="home"> <div data-role="header"> </div> <div data-role="main" class="ui-content"> <p><a href="#about"> 關於本書 </a></p> </div> <div data-role="footer"> </div> </div> <div data-role="page" id="about"> <div data-role="header"> </div> <div data-role="main" class="ui-content"> </div> <div data-role="footer"> </div> </div>

13 jquery Mobile 的介面元素 - 多頁面在 home 頁面的 content 內容擁有 a 元素的超連結, 可以開啟 about 頁面, 如下所示 : <a href="#about"> 關於本書 </a> 在實務上,jQuery Mobile 預設隱藏所有 <div datarole="page"> 標籤, 除了第 1 個頁面, 即預設顯示 home 頁面

14 jquery Mobile 的介面元素 - 巡覽工具列 jquery Mobile 只需在 div 元素指定 datarole="navbar" 屬性, 就可以將其中 ul 和 li 元素轉變成巡覽工具列, 如下所示 : <div data-role="navbar"> <ul> <li><a href="#" data-icon="home"> 首頁 </a></li> <li><a href="#" data-icon="search"> 搜尋 </a></li> <li><a href="#" data-icon="info"> 關於 </a></li> </ul> </div>

15 jquery Mobile 的介面元素 - 對話方塊 jquery Mobile 頁面除了可以填滿整個行動裝置的螢幕外, 也可以建立成對話方塊, 我們只需在 jquery Mobile 頁面加上 data-dialog="true" 屬性, 如下所示 : <div data-role="page" data-dialog="true" id="book"> <div data-role="header">...</div> <div data-role="main" class="ui-content"> </div> </div>

16 jquery Mobile 的介面元素 - ListView ListView 是行動裝置最常見的使用介面, 它是一個清單, 可以顯示清單資料建立巡覽或顯示清單項目的結果資料 jquery Mobile 可以將 HTML 項目編號 (ol 和 li 元素 ) 或項目清單 (ul 和 li 元素 ) 轉換成 ListView, 即加上 datarole="listview" 屬性, 如下所示 : <ul data-role="listview" data-inset="true"> <li>html5</li> <li>css3</li> <li>javascript</li> <li>jquery</li> </ul>

17 jquery Mobile 的介面元素 - 按鈕按鈕 (buttons) 是觸控使用介面最重要的介面元素之一,jQuery Mobile 可以將 a 元素顯示成按鈕外觀, 我們只需在 a 元素加上 class="ui-btn" 屬性 ( 舊版是使用 data-role="button" 屬性 ), 就可以將超連結轉換成按鈕外觀, 而且是佔用整個螢幕可用寬度的按鈕, 如下所示 : <a href="#" class="ui-btn"> 確定 </a>

18 PHP 的行動裝置偵測 - 說明 PHP 的行動裝置偵測是在判斷瀏覽器傳回的標頭資訊, 以便判斷使用的是哪一種作業系統或瀏覽器, 如此, 可以判斷使用者是使用哪一種瀏覽裝置 :PC 或手機等行動裝置

19 PHP 的行動裝置偵測 - 使用者代理 User-Agent 使用者代理 User-Agent 是 HTTP 標頭資訊的一個特殊字串, 可以讓伺服器識別客戶端使用的作業系統版本 CPU 類型和瀏覽器種類等資訊,PHP 程式碼是使用 $_SERVER 預定變數取得此資訊, 如下所示 : echo $_SERVER["HTTP_USER_AGENT"]; 上述程式碼取得參數使用者代理 User-Agent 的標頭資訊

20 PHP 的行動裝置偵測 - PHP 的行動裝置偵測函數現在, 我們可以使用 User-Agent 和 PHP 正規運算式建立 mobile_detect() 函數, 可以判斷瀏覽裝置是否為行動裝置, 如下所示 : function mobile_detect() { $mobile_device_list ='/(alcatel amoi android avantgo blackberry benq cell cricket docomo elaine htc iemobile iphone ipad ipaq ipod j2me java midp mini mmp mobi motorola nokia palm panasonic philips phone sagem sharp smartphone sony symbian t-mobile telus vodafone wap webos wireless xda xoom zte)/i'; if (preg_match($mobile_device_list, $_SERVER['HTTP_USER_AGENT'])) return true; else return false; }

21 PHP 的行動裝置偵測 - 建立自動切換的 PC 與 Mobile 網站 ( 架構 ) 對於 PC 與 Mobile 網站來說, 我們可以針對不同裝置建立專屬網頁, 分別位於不同的子目錄, 例如 :PC 版是位在 desktop 子目錄 ;Mobile 版是位在 mobile 子目錄, 如下圖所示 :

22 PHP 的行動裝置偵測 - 建立自動切換的 PC 與 Mobile 網站 ( 程式碼 ) PHP 程式 Ch15_1_3.php 使用 mobile_detect() 函數 ( MobileDetect.inc 引入檔 ) 判斷轉址至哪一個子目錄的 index.php 首頁, 如下所示 : include("mobiledetect.inc"); // 偵測裝置是否是 Mobile if (mobile_detect()) header("location: mobile/index.php"); else header("location: desktop/index.php");

23 PHP 的行動裝置偵測 - 建立自動切換的 PC 與 Mobile 網站 ( 圖例 )

24 15-2 Ajax 的基礎 Ajax 簡介非同步 HTTP 請求 Ajax 應用程式架構

25 Ajax 簡介 - 說明 Ajax 是 Asynchronous JavaScript And XML 的縮寫, 譯成中文就是非同步 JavaScript 和 XML 技術 Ajax 可以讓 Web 應用程式如同 Windows 應用程式一般, 在瀏覽器建立快速更佳和容易使用的操作介面 Ajax 是由 Jesse James Garrett 最早提出的名稱, 事實上,Ajax 並不是全新的網頁技術, 它是以一種新方法來整合現存的多種網頁技術不過, 直到 Ajax 被大量使用在 Google 網頁設計, 例如 :Gmail Google Suggest 和 Google Maps 後,Ajax 技術才受到大家的重視, 並且快速成為目前網頁設計技術上的一顆耀眼新星

26 Ajax 簡介 -Ajax 的相關技術 HTML/XHTML 和 CSS: 在瀏覽器顯示使用者介面和呈現相關資料 XML: 伺服端非同步傳遞的資料 XML DOM: 當客戶端非同步取得 XML 資料後, 可以進一步使用 JavaScript 程式碼和 XML DOM 取出所需的資訊 XMLHttpRequest 物件 :JavaScript 程式碼是透過 XMLHttpRequest 物件來建立非同步 HTTP 請求

27 非同步 HTTP 請求 - 說明 Ajax 技術的核心是非同步 HTTP 請求 (Asynchronous HTTP Requests), 此種 HTTP 請求可以不用等待伺服端回應, 即可讓使用者執行其他互動操作, 例如 : 更改購物車的購買商品數量後, 不需等待重新載入整個網頁, 或自行按下按鈕來更新網頁, 就可以接著輸入送貨的相關資訊簡單的說, 非同步 HTTP 請求可以讓網頁使用介面, 不會因為 HTTP 請求的等待回應而中斷, 因為同步 HTTP 請求需要重新載入整頁網頁內容, 如果網路稍慢, 可能看見空白頁和網頁逐漸載入的過程, 這是和 Windows 應用程式使用者介面間的最大差異

28 非同步 HTTP 請求 - 同步 HTTP 請求傳統 HTTP 請求的過程是同步 HTTP 請求 ( Synchronous HTTP Requests), 如下圖所示 :

15-2-2 非同步 HTTP 請求 - 非同步 HTTP 請求 Ajax 技術是使用非同步 HTTP 請求, 除了第 1 次載入網頁外,HTTP

29 非同步 HTTP 請求 - 非同步 HTTP 請求 Ajax 技術是使用非同步 HTTP 請求, 除了第 1 次載入網頁外,HTTP 請求是在背景以 XMLHttpRequest 物件來送出的 HTTP 請求, 送出後, 並不需要等待回應, 所以不會影響到使用者在瀏覽器進行的互動, 如下圖所示 :

30 Ajax 應用程式架構 Ajax 應用程式架構的最大差異是在客戶端, 新增 JavaScript 撰寫的 Ajax 引擎來處理 HTTP 請求, 和取得伺服端回應的 XML 資料, 如下圖所示 :

31 15-3 jquery 的 Ajax 方法 jquery 的 Ajax 方法簡介使用 jquery 的 Ajax 方法

32 jquery 的 Ajax 方法簡介 - 說明 Ajax 請求的第一步是建立 XMLHttpRequest 物件, 雖然 Internet Explorer Firefox Safari Chrome 和 Opera 等瀏覽器都提供 XMLHttpRequest 物件不過, 有些是內建物件 ; 有些不是, 所以, 不同瀏覽器使用 JavaScript 建立 XMLHttpRequest 物件的程式碼也不同 jquery 函數庫提供多種方法來提出 XHR 請求 ( 即 XMLHttpRequest 請求 ), 而不用自行判斷使用的瀏覽器來建立 XMLHttpRequest 物件, 可以大幅減少程式碼的複雜度, 輕鬆建立跨瀏覽器的 Ajax 應用程式

33 jquery 的 Ajax 方法簡介 - 相關方法方法 load() getscript() get() post() getjson() ajax() 說明將伺服端的遠端文件使用 Ajax 請求來載入使用 Ajax 請求執行伺服端 JavaScript 程式檔案使用 HTTP GET 方法送出 Ajax 請求和取得回應使用 HTTP POST 方法送出 Ajax 請求和取得回應使用 HTTP GET 方法以 Ajax 請求來取得伺服端的 JSON 資料使用 XMLHttpRequest 物件送出 Ajax 請求

34 使用 jquery 的 Ajax 方法 -ajax() 方法 jquery 的 ajax() 方法是 jquery 的 Ajax 技術核心, 因為它是一個功能強大和能夠客製化的 Ajax 方法, 其語法也最為複雜, 如下所示 : $.ajax({ type: 'GET', url: 'getdatetime.php', data: { name : nameval, type : typeval }, success: function(data) { // 處理傳回的資料 } });

35 使用 jquery 的 Ajax 方法 - 屬性屬性 type url data success error complete beforesend 說明 HTTP 請求的方式是 GET 或 POST 目標的 URL 網址傳送至伺服器的資料成功事件, 當請求成功時執行的回撥函數失敗事件, 當請求失敗時執行的回撥函數完成事件, 不論成功或失敗, 請求完成時執行的回撥函數送出之前事件, 當送出 Ajax 的 HTTP 請求之前執行的回撥函數

36 使用 jquery 的 Ajax 方法 -Ajax 事件 jquery 的 Ajax 事件是在 Ajax 送出 HTTP 請求的過程中觸發的一些 jquery 自訂事件, 我們可以在 $.ajax() 方法參數定義事件, 如下所示 : $.ajax({ type: 'GET', url: 'postdatetime.php', error: function() { alert(" 載入網頁錯誤!"); }, success: function(data) { alert(" 載入網頁成功!"); } });

15-3-2 使用 jquery 的 Ajax 方法 - 程式範例在 PHP 程式使用 ajax() 方法送出 HTTP

37 使用 jquery 的 Ajax 方法 - 程式範例在 PHP 程式使用 ajax() 方法送出 HTTP GET 請求, 可以取得伺服端回應的 XML 文件, 其內容是我們送出的姓名, 和伺服器的日期或時間資料, 如下圖所示 :

38 15-4 應用實例 : 關鍵字建議清單關鍵字建議清單的程式架構關鍵字建議清單的使用關鍵字建議清單的程式說明

39 15-4 應用實例 : 關鍵字建議清單關鍵字建議清單是模擬 Google Suggest 的實作範例, 只需在欄位輸入關鍵字, 就可以在下方顯示提示用途的建議清單

40 關鍵字建議清單的程式架構架構關鍵字建議清單的程式架構是由 HTML 表單的使用介面 JavaScript 程式碼的 Ajax 引擎和伺服端 PHP 程式與 MySQL 資料庫所組成, 如下圖所示 :

15-4-1 關鍵字建議清單的程式架構資料庫 MySQL 資料庫 mysuggests 內含

41 關鍵字建議清單的程式架構資料庫 MySQL 資料庫 mysuggests 內含 suggest 資料表的關鍵字記錄, 擁有欄位 suggestid 和 title, 其記錄資料如下圖所示 :

15-4-2 關鍵字建議清單的使用關鍵字建議清單在執行前請參考第 10-5-2 節執行 mysuggests.

42 關鍵字建議清單的使用關鍵字建議清單在執行前請參考第節執行 mysuggests.sql 建立 mysuggests 資料庫然後啟動 Google Chrome 輸入 AjaxSuggest.html 網址 : 可以看到執行結果, 如下圖所示 :

43 關鍵字建議清單的程式說明關鍵字建議清單有 4 個程式檔案, 包含 jquery 函數庫的 jquery min.js,mysuggests.sql 是建立 MySQL 資料庫的 SQL 指令碼檔案 HTML 網頁 :AjaxSuggest.html Ajax 應用程式的使用介面 PHP 程式 :getsuggest.php 連接 MySQL 資料庫來取得關鍵字的記錄

關於本書 l 3 PhoneGap Appcelerator Titanium Sencha Touch (wrapper framework) Native App PhoneGap Build Native App Hybrid App Java Objective-C Android SDK

關於本書 l 3 PhoneGap Appcelerator Titanium Sencha Touch (wrapper framework) Native App PhoneGap Build Native App Hybrid App Java Objective-C Android SDK 2 l 跨裝置網頁設計 Android ios Windows 8 BlackBerry OS Android HTML 5 HTML 5 HTML 4.01 HTML 5 CSS 3 CSS 3 CSS 2.01 CSS 3 2D/3D PC JavaScript