Microsoft Word PHPCh15.docx

Size: px

Start display at page:

Download "Microsoft Word PHPCh15.docx"

炭柳
7 years ago
Views:

1 Chapter 10-1 jquery Mobile 10-2 jquery Mobile

2 10-2 l PHP & MySQL 10-1 jquery Mobile PO PC (mobile website) Yahoo! PC ( Yahoo! ( Yahoo! AndroidiOSWindows 8BlackBerry OS Android jquery Mobile

3 jquery Mobile l 10-3 jquery Mobile ( jquery Mobile jquery jquery UI HTML jquery JavaScript API HTML JavaScript HTML HTML Ajax jquery UI jquery JavaScript CSS jquery Mobile HTML 5 JavaScript jquery Mobile PC.html.htm Notepad++ PC PC Opera Mobile Emulator WindowsMac Linux

4 10-4 l PHP & MySQL 10-2 jquery Mobile jquery Mobile jquery Mobile CSS ( jquery.mobile-xx.min.cssxx ) jquery JavaScript ( jquery-xx.min.js) jquery Mobile JavaScript ( jquery.mobile-xx.min.js) jquery jquery Mobile jquery jquery Mobile jquery min.js jquery.mobile zip CDN (Content Delivery Networks) jquery jquery Mobile <head> <link rel="stylesheet" href=" /> <script src=" <script src=" jquery.mobile min.css jquery min.js jquery.mobile min.js jquery Mobile CSS jquery JavaScript jquery Mobile JavaScript min jquery.mobile.structure min.css jquery.mobile.theme css jquery jquery Mobile jquery Mobile

5 jquery Mobile l 10-5 \ch10\jqm1.html 01:<!doctype html> 02:<html> 03: <head> 04: <meta charset="utf-8"> 05: <title> jquery Mobile </title> 06: <link rel="stylesheet" href=" /> 07: <script src=" 08: <script src=" 09: <meta name="viewport" content="width=device-width, initial-scale=1"> 10: </head> 11: <body> 12: </body> 13:</html> Opera Mobile Emulator jquery Mobile Web C:\jQM1.html file:///c:/jqm1.html PHP Web tw/~jean/jqm1.html PHP

6 10-6 l PHP & MySQL 06 CDN jquery Mobile CSS 07 CDN jquery JavaScript 08 CDN jquery Mobile JavaScript 09 metadata "viewport" "width=device-width, initial-scale=1" 1:1 jquery Mobile (page)(role) <jqm1.html> <body> 12 ~ 24 <div> data-role data-role page listview header dialog content fieldcontain footer controlgroup navbar collapsible button slider \ch10\jqm1.html ( 1/2) 01:<!doctype html> 02:<html> 03: <head> 04: <meta charset="utf-8"> 05: <title> jquery Mobile </title> 06: <link rel="stylesheet" href=" />

7 jquery Mobile l 10-7 \ch10\jqm1.html ( 2/2) 07: <script src=" 08: <script src=" 09: <meta name="viewport" content="width=device-width, initial-scale=1"> 10: </head> 11: <body> 12: <div data-role="page"> 13: <div data-role="header"> 14: <h1></h1> 15: </div> 16: <div data-role="content"> 17: <p> ONEPIECE 18: 19: </p> 20: </div> 21: <div data-role="footer"> 22: <h4> </h4> 23: </div> 24: </div> 25: </body> 26:</html> Opera Mobile Emulator

8 10-8 l PHP & MySQL 10-3 jquery Mobile data-theme="a-z" (theme) jquery Mobile data-theme="a" data-theme="b" data-theme="c" data-theme="d" data-theme="e" c be () c b () () c () e ()

9 jquery Mobile l 10-9 \ch10\jqm1b.html <!doctype html> <html> <head> <meta charset="utf-8"> <title> jquery Mobile </title> <link rel="stylesheet" href=" /> <script src=" <script src=" <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> b () <div data-role="page"> <div data-role="header" data-theme="b"> <h1></h1> </div> <div data-role="content"> <p> ONEPIECE </p> </div> <div data-role="footer" data-position="fixed" data-theme="e"> <h4> </h4> </div> </div> </body> </html> () c () e () data-theme "a-z" "a""b""c"..."z" "a-e" jquery Mobile jquery Mobile ThemeRoller ( ThemeRoller

10 Chapter

11 15-2 l PHP & MySQL 15-1 HTML 5JavaScriptjQueryjQuery MobilePHPMySQL () () () () () ()

12 行動商品型錄 l 15-3 () () () () ~ () ACL jpg ACL jpg AEB jpg AEB jpg AEN jpg mobile_store.jpg index.htm get_book_info.php mobile_store JPEG () ~ () JPEG () product mobile_store product book_id INT - image_name VARCHAR 32 description TEXT - ( \samples\database\mobile_store.sql)

13 15-4 l PHP & MySQL 15-2 index.htm <index.htm> id "home""intro""book" \ch15\index.htm ( 1/2) 01:<!doctype html> 02:<html> 03: <head> 04: <meta charset="utf-8"> 05: <title></title> 06: <link rel="stylesheet" href=" /> 07: <script src=" 08: <script src=" 09: <meta name="viewport" content="width=device-width, initial-scale=1"> 10: <script> 11: var book_id = 0; 12: 13: function get_book_info(mode) 14: { 15: $.get("get_book_info.php", {book_id: book_id, mode: mode}, function(data){ 16: book_id = data.book_id; 17: $("#bookimg").attr("src", data.image_name); 18: $("#bookmsg").html(data.description); 19: },"json"); 20: } 21: </script> 22: </head> 23: <body onload="javascript:get_book_info('next')"> 24: <div data-role="page" id="home"> 25: <div data-role="header" data-position="fixed"> 26: <h1></h1> 27: </div>

14 行動商品型錄 l 15-5 \ch15\index.htm ( 2/2) 28: <div data-role="content"> 29: <img src="mobile_store.jpg" width="100%"> 30: <a href="#intro" data-rel="dialog" data-role="button" data-icon="arrow-r"></a> 31: <a href="#book" data-role="button" data-icon="arrow-r"></a> 32: </div> 33: <div data-role="footer" data-position="fixed"><h4> </h4></div> 34: </div> 35: <div data-role="page" id="intro"> 36: <div data-role="header"><h1></h1></div> 37: <div data-role="content"> 38: <p> Office 39:...</p> 40: </div> 41: </div> 42: <div data-role="page" id="book"> 43: <div data-role="header"><h1></h1></div> 44: <div data-role="content"> 45: <img id="bookimg" width="100%"> 46: <p id="bookmsg" /> 47: </div> 48: <div data-role="footer" data-position="fixed"> 49: <div data-role="navbar"> 50: <ul> 51: <li><a href="#home" class="ui-btn-active ui-state-persist"></a></li> 52: <li><a href="javascript:get_book_info('prev')"></a></li> 53: <li><a href="javascript:get_book_info('next')"></a></li> 54: </ul> 55: </div> 56: </div> 57: </div> 58: </body> 59:</html>

15 15-6 l PHP & MySQL 06 CDN jquery Mobile CSS 07 CDN jquery JavaScript 08 CDN jquery Mobile JavaScript 10 ~ 21 JavaScript 11 book_id ~ 20 get_book_info() mode 15 ~ 19 jquery Ajax get_book_info.php POST book_id mode get_book_info.php get_book_info.php json json image_name description 17 ~ 18 json image_name description () ~ () 23 body onload JavaScript get_book_info() next book_id ~ "intro" 31 "book" 35 ~ ~ ~ 46 img p id bookimg bookmsg get_book_info() 48 ~ 56 get_book_info() prev get_book_info() next

16 行動商品型錄 l 15-7 get_book_info.php \ch15\get_book_info.php ( 1/2) 01:<?php 02: require_once("dbtools.inc.php"); 03: 04: $book_id = $_GET["book_id"]; 05: $mode = $_GET["mode"]; 06: $link = create_connection(); 07: 08: if ($mode == "prev") 09: { 10: $sql = "select * from product where book_id < $book_id order by book_id desc limit 1"; 11: $result = execute_sql($link, "mobile_store", $sql); 12: $total_records = mysqli_num_rows($result); 13: 14: if ($total_records == 1) 15: { 16: $row = mysqli_fetch_assoc($result); 17: 18: echo json_encode(array("book_id" => $row["book_id"], "image_name" => $row["image_name"], "description" => $row["description"])); 19: } 20: else 21: { 22: $sql = "select * from product where book_id = (select max(book_id) from product)"; 23: $result = execute_sql($link, "mobile_store", $sql); 24: $row = mysqli_fetch_assoc($result); 25: 26: echo json_encode(array("book_id" => $row["book_id"], "image_name" => $row["image_name"], "description" => $row["description"])); 27: } 28: } 29: else if ($mode == "next") 30: {

17 15-8 l PHP & MySQL \ch15\get_book_info.php ( 2/2) 31: $sql = "select * from product where book_id > $book_id order by book_id limit 1"; 32: $result = execute_sql($link, "mobile_store", $sql); 33: $total_records = mysqli_num_rows($result); 34: 35: if ($total_records == 1) 36: { 37: $row = mysqli_fetch_assoc($result); 38: 39: echo json_encode(array("book_id" => $row["book_id"], "image_name" => $row["image_name"], "description" => $row["description"])); 40: } 41: else 42: { 43: $sql = "select * from product where book_id = (select min(book_id) from product)"; 44: $result = execute_sql($link, "mobile_store", $sql); 45: $row = mysqli_fetch_assoc($result); 46: 47: echo json_encode(array("book_id" => $row["book_id"], "image_name" => $row["image_name"], "description" => $row["description"])); 48: } 49: } 50: 51: mysqli_free_result($result); 52: mysqli_close($link); 53:?> 08 ~ ~ json_encode() json json echo json get_book_info()

關於本書 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