<meta charset="utf-8"/>  
<meta name="viewport" content="width=device-width, initial-scale=1">

方法1：把超連結加上data-role="button"
<a href="#a1" data-role="button">按鈕</a>
(限制: header區一行只能2個按鈕, footer區無限制個)

方法2：巡覽工具列(限制: 最多一行5個按鈕)

<div data-role="navbar">
<ul>
<li><a href="#" >按鈕一</a></li>
<li><a href="#">按鈕二</a></li>
<li><a href="#">按鈕三</a></li>
</ul>
</div>

<div data-role="navbar">
<ul>
<li><a href="#a1" data-rel = "dialog" data-icon="star">按鈕一</a></li>
<li><a href="#a2" data-icon="check">按鈕二</a></li>
<li><a href="#a3" data-icon="search">按鈕三</a></li>        
</ul>
</div>

arrow-l,arrow-r,arrow-u,arrow-d,delete,Plus,minus,Check,gear,
Forward,Back,Grid,Star,Alert,info,home,Search

<div data-role="navbar">
<ul>
<li><a href="#a1" data-rel = "dialog" data-icon="star"  data-transition="slide">按鈕一</a></li>
<li><a href="#a2" data-icon="check" data-transition="flip">按鈕二</a></li>
<li><a href="#a3" data-icon="search" data-transition="slideup">按鈕三</a></li>        
</ul>
</div>

01.fade,flip,flow,pop,slide,slidefade,slideup,slidedown,turn
02.jqueryMobile的轉場效果不明，且又會造成頁面顯示delay延遲緩慢，不建議使用轉場效果

<div data-role="content"  data-theme="a">
<p>內文區</p>    
</div>
兩種theme布景a,b

方法1：Inline Position (預設): footer在內容最下面
<div data-role="header" data-position="inline"></div>
<div data-role="footer" data-position="inline"></div>

方法2：Fixed Position固定位置:footer保持在螢幕的下端
<div data-role="header" data-position="fixed"></div>
<div data-role="footer" data-position="fixed"></div>

方法3：Fullscreen Position全螢幕設定: 若點按畫面一下，header及footer都會消失(類似全螢幕)，再點按一次又會出現
<div data-role="header" data-position="fixed" data-fullscreen="true"></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>

<a href="#a1" data-role="button">按鈕</a>

(限制: header區一行只能2個按鈕, footer區無限制個)

(3).將文字轉換成有小點數字：parseFloat("文字");

(3).設定標籤內的CSS屬性：
document.getElementById('label01').innerHTML = "貨比三家不吃虧";
document.getElementById('label01').style.backgroundColor = "#FF0000";
document.getElementById('label01').style.color = "#F00";
document.getElementById('label01').style.fontSize="30px";
document.getElementById('label01').style.fontWeight = 'bold';
document.getElementById('label01').style.fontFamily="標楷體";
document.getElementById('label01').style.padding = "10px"

<a href="javascript:area()" data-role="button">計算</a>

<input type="button" id="btn1" value="按鈕" onclick="javascript:location.href='https://tw.yahoo.com/'" />

<input type="button" id="btn1" value="按鈕" onclick="gopage()" />

....................................................

<script type="text/javascript">
function gopage(){
location.href = "https://tw.yahoo.com";
}
</script>

(3).把標籤的id，例如id='p01'設定文字內容： $('#p01').text("你好");

(4).設定CSS的style 設定方法1：
 $('#p01').css('backgroundColor','#FF0000');
 $('#p01').css('fontSize', '30px');

(5).設定CSS的style 設定方法2：
$('#p01').addClass('redbackground');
$('#p01').addClass('other');

唯一的例外：下拉式選單，沒有在上面，必須用早期的html語法select-option 來做，範例：
<select id="mysize" size="4" data-native-menu="false">
<option>XL</option>
<option>L</option>
<option>M</option>
<option>S</option>
</select>

注意：在手機上無法顯示下拉式選單，除非加上data-native-menu="false"，就會出現彈出樣式選單

在網頁播放音樂Html 5語法，目前chrome支援此語法，IE9及以上版本才支援
(A).先在網頁設定一個html5標籤：<audio id="audio"></audio>
顯示控制面版：controls
自動播放：autoplay
播放次數：loop

(B).html5 使用範例：
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的瀏覽器不支援此 HTML5音樂標籤
</audio>

(C)寫javascript 程式碼：(目前支援mp3, ogg, wav)
document.getElementById('audio').src ="音樂檔名";
document.getElementById('audio').load();
document.getElementById('audio').play();

document.getElementById('audio').loop=1;

在網頁播放影片Html 5語法，目前chrome支援此語法，IE9及以上版本才支援
(A).先在網頁設定一個html5標籤：<video src="影片連結" controls></video>
顯示控制面版：controls
自動播放：autoplay
播放次數：loop

(B).html5 使用範例：
<video width="360" height="270" controls>
<source src="test.ogg" type="video/ogg">
<source src="test.mp4" type="video/mp4">
您的瀏覽器不支援此 HTML5 影片標籤
</video>

(C)寫javascript 使用範例程式碼：(ogg、mpeg 4、mp4、WebM)
document.getElementById('video').src ="檔名"
document.getElementById('video').play();

document.getElementById('video').loop=1;

方法1：Inline Position (預設): footer在內容最下面
<div data-role="header" data-position="inline"></div>
<div data-role="footer" data-position="inline"></div>

方法2：Fixed Position固定位置:footer保持在螢幕的下端
<div data-role="header" data-position="fixed"></div>
<div data-role="footer" data-position="fixed"></div>

方法3：Fullscreen Position全螢幕設定: 若點按畫面一下，header及footer都會消失(類似全螢幕)，再點按一次又會出現
<div data-role="header" data-position="fixed" data-fullscreen="true"></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>

HTML 5 <input> type 語法<input type="value">

關鍵程式碼

client端讀取xml的方法

client端讀取xml的方法
1.步驟1：讀入純文字的步驟
(A) 開啟檔案元件

(B).取得檔案參數

(C).讀取純文字檔的內容（取得字串：xmlstring）

function show02(fileinfo) {
file = fileinfo.files[0];
var fReader = new FileReader();
fReader.onload = function (event) {
document.getElementById('txt01').value = event.target.result;
xmlstring = event.target.result;
};
fReader.readAsText(file); }

2.步驟2：將字串轉成xml物件:xmlDoc=parser.parseFromString(xmlstring,"text/xml")

if (window.DOMParser) {
parser=new DOMParser();
xmlDoc=parser.parseFromString(xmlstring,"text/xml");
} else {
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.loadXML(xmlstring); }

3.步驟3：讀取的XML(xmlDoc)如何抓到第2位學生電話tel

4.讀取的XML(xmlDoc)如何抓到所有學生student的結構資料

關鍵程式碼

server端讀取xml的方法

server端讀取xml的方法
1.步驟1：server端讀進整個xml物件

2.步驟2：由xmlDoc物件，抓出所需的資料

第1位學生的姓名:xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue
第1位學生的電話:xmlDoc.getElementsByTagName("tel")[0].childNodes[0].nodeValue
第2位學生的電話:xmlDoc.getElementsByTagName("tel")[1].childNodes[0].nodeValue

讀取的XML(xmlDoc)如何抓到所有學生student的結構資料

3.步驟3：若需輸出全部xml內容在螢幕上，則要先將xml物件轉成字串

//將xml物件轉成string文字
if (window.ActiveXObject) { // for IE 瀏覽器
txt01.value = xmlDoc.xml;
} else { //chrome, firefox,Opera各種瀏覽器
txt01.value = (new XMLSerializer()).serializeToString(xmlDoc);

4.xml物件，與xml字串互相轉換的公式

(1).將字串轉換成 XML 物件

function convert_string_to_xml(strXML) {
if (window.ActiveXObject) {
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(strXML);
return xmlDoc;
} else {
parser=new DOMParser();
xmlDoc=parser.parseFromString(strXML,"text/xml");
return xmlDoc;
} }

(2).將 XML 物件轉換成字串

function convert_xml_to_string(xmlObject) {
if (window.ActiveXObject) { // for IE
return xmlObject.xml;
} else {
return (new XMLSerializer()).serializeToString(xmlObject);
} }

client端讀取json的方法
1.步驟1：讀入純文字的步驟
(A) 開啟檔案元件

var jsonstring ="";
function show01(fileinfo) {
file = fileinfo.files[0];
var fReader = new FileReader();
fReader.onload = function (event) {
document.getElementById('txt01').value = event.target.result;
jsonstring = event.target.result;
};
fReader.readAsText(file); }

2.步驟2：將字串轉成json物件: jsonDoc = JSON.parse(jsonstring)

function parsejson() {
var jsonDoc = JSON.parse(jsonstring); }

3.步驟3：如何使用jsonDoc物件

server端讀取json的方法
1.步驟1：server端讀進整個json物件

function loadjson() {
var xmlhttp = new XMLHttpRequest();
var url = "json/school.json";
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
jsonDoc = JSON.parse(xmlhttp.responseText);
myFunction(jsonDoc);
} }
xmlhttp.open("GET", url, true);
xmlhttp.send();
}

2.步驟2：由jsonDoc物件，抓出所需的資料

function myFunction(jsonDoc) {
document.getElementById("id01").innerHTML=jsonDoc[0].name;
document.getElementById("id02").innerHTML=jsonDoc[1].name;
document.getElementById("id03").innerHTML=jsonDoc[2].name;
//將json物件轉成string文字
txt01.value = JSON.stringify(arr);
}

3.步驟3：若需輸出全部json內容在螢幕上，則要先將json物件轉成字串

//將json物件轉成string文字
txt01.value = JSON.stringify(jsonDoc);

4.json物件，與json字串互相轉換的公式

5.注意：IIS不認識json檔案格式，要在MIME去新增，(副檔名：.json，mimeType=application/json)

1. (1).若要讀取excel檔案，必需在I.E.瀏覽器才能讀取（使用chrome, opera都不行，因為只有同是微軟的產品，才能讀取）

(2).讀取的方式，可以用三種方法，任一種都可以

(A).client端，必須指定client電腦完整路徑，例如:c:\\excel\\employee.xlsx
(B).server端，必須指定server電腦完整路徑，例如:c:\\excel\\employee.xlsx
(C).跨網域主機，必須指定跨網域server電腦完整url，例如:http://acupun.site/lecture/jquery_phoneGap/excel/employee.xlsx

2.容易發生的錯誤，與注意事項：

(A).檔案完整路徑寫法與傳統不同(分隔線為\\)，例:c:\\excel\\employee.xlsx
錯誤寫法1：:c/excel/employee.xlsx
錯誤寫法2：:c\excel\employee.xlsx

(B).若使用Chp 12:HTML5 表單File API元件： <input id="file01" type="file" onchange="show01(this)"/>
*其filename參數只有檔名，沒有路徑path數據的參數，
* 要取得路徑path+filename的方法是：file01.value

(C).讀取跨網域server電腦的excel檔，因為還要等待網路傳輸，會要多等一些時間。

(D).有些電腦的I.E.，因為安全性設定，不允許開啟ActiveXObject物件，所以不能開啟excel，解決辦法是，要自行手動設定，開啟ActiveXObject物件，：
方法：
打開I.E.，上方功能表：[工具]→[網際網路選項]→[安全性]→[近端內部網路]→[自訂等級]→找[將未標示成安全的 ActiveX 控制項初始化並執行指令碼]：調整按鈕為『啟用』。

3.讀取excel的方法與步驟：

(A).將employee.xlsx讀到 excelapp變數

var excelFile = "C:\\excel\\employee.xlsx";
function readExcel() {
var excelapp =new ActiveXObject("Excel.Application");
excelapp.Workbooks.Open(excelFile);
//....................

excelapp.Application.Quit();
excelapp.Quit();
excelapp = null; }

(B).從excelapp變數取出數值

//讀取excel員工資料表，第2列，第1欄數據
str = excelapp.Worksheets("員工").Cells(2,1).value+ "<br/>";
document.getElementById("id01").innerHTML=str;

(C).從excelapp變數, 轉換成物件陣列excelobj

excelobj = new Array();
for(i=0;i<12;i++){
excelobj[i] = new Object();
excelobj[i].id = excelapp.Worksheets("員工").Cells(i+2,1).value;
excelobj[i].name = excelapp.Worksheets("員工").Cells(i+2,2).value; }

(D).上一頁下一頁顯示單筆資料

var excelobj;
var i;
function changedata(i) {
str ="編號: "
str += excelobj[i].id;
str +="<br/>姓名: ";
str +=excelobj[i].name;
document.getElementById("id01").innerHTML = str; }

function next() {
i++;
if(i>excelobj.length){i=0;}
changedata(i); }

function previous() {
i--;
if(i<0){i=excelobj.length-1;}
changedata(i); }

(1).重要性：以ajax讀取跨網域資料的技術為雲端計算Cloud Computing的關鍵技術，雲端運算簡介，行政院四大智慧產業-雲端運算

(2).讀取雲端跨網域資料的兩種方法：
(1).基礎：使用ajax直接讀取雲端*.js，缺點：一次要讀取整個資料庫

(2).進階：雲端主機使用代理人(asp.net, php)來處理要回傳的資料量，優點：可以只回傳部分欄位的特定資料量

(1).目的：要讀取跨網域主機的資料： http://acupun.site/lecture/jquery_phoneGap/18-CrossDomain01.js
(2). 先改
<body>
<div id="id01"></div>
<script type="text/javascript" src="http://acupun.site/lecture/jquery_phoneGap/18-CrossDomain01.js"> </script>
</body>
(3).再改
<head>
<script type="text/javascript">
function callBackdata(txt) {
document.getElementById("id01").innerHTML=txt;
}
</script>
</head>

//方法1: jsonDoc = JSON.parse(txt)
//方法2: jsonDoc =$.parseJSON(txt)

//方法1: jsonDoc = JSON.parse(txt)
//方法2: jsonDoc =$.parseJSON(txt)

//方法1: jsonDoc = JSON.parse(txt)
//方法2: jsonDoc =$.parseJSON(txt)

<%@ Page Language="VB" debug="true" trace="false"%>
<%
Dim str01 as string = "callBackdata(JSON.stringify("
str01 &= "json資料庫內容"
Response.Write(str01)
%>

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="utf-8" %>
<%
string str = "callBackdata(JSON.stringify(";
str += "json資料庫內容";
Response.Write(str);
%>

php關鍵程式碼

方法3:

*使用php
來產生json 資料庫

下載phpStudy

<?php
$str = "callBackdata(JSON.stringify(";
$str .= "json資料庫內容";
$str .= "))";
echo $str;
?>

//注意：PHP，C#輸出json格式裡面的雙引號相同：
//雙引號要取代成如下
//PHP，C#： \"

(1).注意：因為使用到jQuery 指令$.ajax，所以要用手機網頁格式jQuery mobile來寫
(2).目的：要同一網域主機的json格式檔案
(3). 按鈕
<input name="btn02" onclick="show01()" type="button" value="（採用ajax非同步讀取法）讀取server端json格式資料" />

(3).指令$.ajax 非同步讀取跨網域資料
function show01(){
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","檔名.json",true);
//########################################
// 非同步程式部分
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)

//將伺服器server傳來的字串xmlhttp.responseText，轉成json物件陣列
var jsonObj = JSON.parse(xmlhttp.responseText);

//在這裡，顯示表格

}//end of xmlhttp.onreadystatechange
xmlhttp.send(null);
//########################################
}

(1).注意：因為使用到jQuery 指令$.ajax，所以要用手機網頁格式jQuery mobile來寫
(2).目的：要讀取跨網域主機的aspx(vb.net)或PHP所產生的json格式檔案
(3). 按鈕
<input id="txt01" type="text" size="20" onkeyup="ajaxCall('http://localhost/chp19-3.aspx?txtname=' + this.value)" />
或
<input id="txt01" type="text" size="20" onkeyup="ajaxCall('http://localhost/chp19-3.php?txtname='+ this.value)" />

***onkeyup事件：在textbox內輸入任何一個文字，就會啟動事件一次

***傳遞參數給代理人程式(aspx, php)方法：
規則：chp19.aspx?變數名稱=值
範例：chp19.aspx?txtname=john
範例：'http://localhost/chp19-3.php?txtname=' + this.value
this.value是目前textBox內所輸入的值

(3).指令$.ajax 非同步讀取跨網域資料
function ajaxCall(target){
//發出 ajax call
var data = $.ajax({
type: "get",
async: true,
url: target,
dataType: "jsonp",
jsonpCallback:"callBackdata",
});
}

(4).讀取跨網域資料後，呼叫callBackdata()來顯示即時訊息
function callBackdata(txt) {
//顯示文字訊息
document.getElementById("id01").innerHTML = txt;

//顯示顏色
if(txt.indexOf("抱歉")>=0)
{
document.getElementById("id01").style.color ="red";
}
else
{
document.getElementById("id01").style.color ="blue";
}
}

**注意：IIS不認識json檔案格式，要在MIME去新增，(副檔名：.json，mimeType=application/json)

***String.indexOf() 傳回字串第一次出現位置：(O要大寫)
str="Hello world!"
str.indexOf("world") = 6
str.indexOf("e") = 1
str.indexOf("H") = 0

<%@ Page Language="VB" debug="true" trace="false"%>
<%
dim user as string = request("txtname")
dim str as string
if user="john" then
str ="抱歉, " & user & " 已經被註冊"
else
str = user & ", 還沒被人使用過."
end if

response.Write("callBackdata(JSON.stringify('" & str & "'))")

%>


'注意：
(1).傳遞參數txtname給代理人程式aspx，在aspx接收所傳來參數方法：
request("txtname")\"
(2).回傳值方法：
response.Write("callBackdata(JSON.stringify('" & str & "'))")

php關鍵程式碼

方法3:

*使用php
來產生json 資料庫

下載phpStudy

<?php
$user = $_GET["txtname"];

if($user=="john"){
$str ="抱歉, ".$user."已經被註冊";
}else{
$str = $user.", 還沒被人使用過.";
}

echo "callBackdata(JSON.stringify('".$str."'))";
?>

/注意：
(1).傳遞參數txtname給代理人程式PHP，在PHP接收所傳來參數方法：
$_GET["txtname"]

(3).PHP字串與變數相連接方法：.
$user."你好"

(2).回傳值方法： echo "callBackdata(JSON.stringify('".$str."'))"

讀取跨網域主機的資料(II)中級篇(Access, Excel)
Chp 21:ajax非同步連線技術，讀取跨網域server端的Access,excel資料庫(此法必須透過asp.net讀取)
方法1:最簡單方法,不須使用asp.net, php, 使用<script src='....js'></script>，適合xml,json
方法2:excel可以用new ActiveXObject("Excel.Application")物件來讀取跨網域資料，缺點是速度慢
方法3:使用ajax讀取跨網域資料(json,xml,aspx)，關鍵在$.ajax({指定jsonpCallback: "callBackdata"函數，回傳必須是純文字或xml物件)，若是讀取網域aspx，aspx須回傳json,xml
方法4:必須先在IIS設定可以允許跨網域存取，,然後再使用 new XMLHttpRequest()來.open(跨網域資料庫,json,xml,aspx(讀取access,excel)

只要是(A)讀json資料, (B)方法3, (B)方法4使用ajax經由aspx讀取資料的，都必須用chrome瀏覽器
但若在client端經由File API讀取Access, Excel檔案的, 都必須用I.E.瀏覽器

(1).注意：因為使用到jQuery 指令$.ajax，所以要用手機網頁格式jQuery mobile來寫
(2).目的：要讀取跨網域主機的aspx(vb.net)或PHP所產生的json格式檔案
(3). 按鈕
<input id="txt01" type="text" size="20" onkeyup="ajaxCall('http://localhost/chp21-1.aspx?txtname=' + this.value)" />
或
<input id="txt01" type="text" size="20" onkeyup="ajaxCall('http://localhost/chp21-1.php?txtname=' + this.value)" />

***onkeyup事件：在textbox內輸入任何一個文字，就會啟動事件一次

***傳遞參數給代理人程式(aspx, php)方法：
規則：chp21-1.aspx?變數名稱=值
範例：chp21-1.aspx?txtname=john
範例：'http://localhost/chp21-1.php?txtname=' + this.value
this.value是目前textBox內所輸入的值

(3).指令$.ajax 非同步讀取跨網域資料
function ajaxCall(target){
//發出 ajax call
var data = $.ajax({
type: "get",
async: true,
url: target,
dataType: "jsonp",
jsonpCallback:"callBackdata",
});
}

(4).讀取跨網域資料後，呼叫callBackdata()來顯示即時訊息
function callBackdata(txt) {
//轉換字串變成json物件變數
var jsonDoc = JSON.parse(txt);

//顯示表格
str="<table border=1><tr><td>編號</td><td>姓</td><td>英文名</td><td>住址</td><td>電話</td></tr>";
for(i in jsonDoc)
{
str += "<tr><td>" + jsonDoc[i].id + "</td><td>" + jsonDoc[i].name + "</td><td>" + jsonDoc[i].englishname + "</td><td>" + jsonDoc[i].address + "</td><td>" + jsonDoc[i].tel + "</td></tr>";
}
str +="</table>"
document.getElementById("id01").innerHTML =str

}

**注意：IIS不認識json檔案格式，要在MIME去新增，(副檔名：.json，mimeType=application/json)

第1題

vb.net關鍵程式碼

方法3:

*使用aspx(vb.net)
來產生json 資料庫

<%@ Page Language="VB" debug="true" trace="false"%>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.OleDb" %>
<%
dim user as string = request("txtname")
'OleDb 連結資料庫
'####### Access 2003 (*.mdb) ##############
'Dim str As String = "Provider=Microsoft.Jet.Oledb.4.0;Data source=" & Server.MapPath("App_Data\資料庫名稱.mdb")
''####### Access 2007 (*.accdb) ##############
Dim str As String = "Provider=Microsoft.ACE.Oledb.12.0;Data source=" & Server.MapPath("Northwind.accdb")

Dim conn As OleDbConnection = New OleDbConnection(str)
conn.Open()

'查詢資料
Dim str1 As String = " Select * from 員工 where 姓名 like '%" & user & "%'"
Dim adp1 As OleDbDataAdapter = New OleDbDataAdapter(str1, conn)

'將查詢結果放到記憶體set1上的"1a "表格內
Dim set1 As DataSet = New DataSet
adp1.Fill(set1, "1a")

'將記憶體的資料集合存放DataTable表格tb01上
dim strjson as string = "callBackdata(JSON.stringify(["
dim i as integer
Dim tb01 As DataTable = New DataTable
tb01 = set1.tables("1a")
for i=0 to tb01.Rows.count-1
strjson &= "{""id"":""" & tb01.rows(i)("員工編號").tostring() & ""","
strjson &= """name"":""" & tb01.rows(i)("姓名").tostring() & ""","
strjson &= """englishname"":""" & tb01.rows(i)("名").tostring() & ""","
strjson &= """address"":""" & tb01.rows(i)("地址").tostring() & ""","
strjson &= """tel"":""" & tb01.rows(i)("電話號碼").tostring() & """}"

if i <> tb01.Rows.count-1 then
strjson &= ","
end if

next

strjson &= "]));"


'關閉資料庫的連結
conn.Close()

response.Write(strjson)

%>


'注意：
(1).傳遞參數txtname給代理人程式aspx，在aspx接收所傳來參數方法：
request("txtname")\"
(2).回傳json物件值：結尾必須有;
response.Write("callBackdata(JSON.stringify('" & str & "'));")
(3).若程式執行跑不出來，90%就是aspx程式輸出json格式不對
(4).把查詢到資料表的傳到DataTable
Dim tb01 As DataTable = New DataTable
tb01 = set1.tables("1a")
(5).如何知道DataTable有幾筆紀錄
tb01.Rows.count
(6).如何取得第i筆紀錄的員工編號值
tb01.rows(i)("員工編號").tostring()
(7).注意：VB，C#的差別是，輸出json格式裡面的雙引號不同：
'雙引號要取代成如下
' C#, PHP： \"
'但是VB：""
(8).例如：{"id":"1",
VB.NET要改成：{""id"":""" & tb01.rows(i)("員工編號").tostring() & """,
(9).在Windows7 上的IIS執行aspx網頁無法讀取Access，(出現錯誤: 無法讀取microsoft.oledb.jet.4.0)
原因：Window 7的IIS預設只能讀取64元Access資料 ，無法讀取32位元Access資料及應用程式
解決方法：在IIS的應用程式集區，三者都要進階設定，改成：啟用32位元應用程式: true
(10).在Windows7 上的IIS執行aspx網頁新增一筆紀錄→會發生錯誤訊息
原因: 資料庫目前只能瀏覽，無法修改
方法：檔案總管→選 網站目錄→右鍵→安全性→編輯→user, IIS_IUSER→新增→權限→打勾：完全控制，修改

如何將Access資料表轉到mySQL資料庫上

1.由Access將某資料表t1另存成excel檔案
2.打開excel檔案，另存成csv檔案（tb1.csv)
3.使用記事本打開該csv檔案，另存時，選擇編碼為utf-8（不可用ANSI格式)
4.登入mySQL資料庫
5.新增資料庫名稱（例如：Northwind）
6.選擇該資料庫後，導入（或輸入）資料表，選擇tb1.csv，編碼選utf-8，勾選（檔案首行包含資料表的欄位名稱），執行即可
7.成功匯入後，再去修改檔案名稱（例如：員工）
先選擇該資料表（Table 1)→操作→表選項→將表改名為→員工

第1題

php關鍵程式碼

方法3:

*使用php
來產生json 資料庫

下載phpStudy

<?php

//連結資料庫
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "資料庫名稱";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

mysqli_query($conn,"SET NAMES utf8");

//查詢資料表
$sql = "Select * from 資料表 where name like '%jack%'";

$result = $conn->query($sql);

//將查詢結果，輸出成json物件變數

$str="callBackdata(JSON.stringify([";    
        ////把DataTable資料轉成josn物件陣列

if ($result->num_rows > 0) {
 // output data of each row

$i=0;
while($row = $result->fetch_assoc()) {

$str .="{\"id\":\"".$row["員工編號"]."\",";
$i +=1;
if ($i == $result->num_rows)
{}
else{
$str .=",";                              
}

    }
} else {
echo "0 results";
}
//關閉資料庫的連結
$conn->close();

$str .="]));";

  echo $str;

?>

-----------------------------------------------------------------------------------------

/注意：
(1).傳遞參數txtname給代理人程式PHP，在PHP接收所傳來參數方法：
$_GET["txtname"]

(2).PHP字串與變數相連接方法：.
$user."你好"

(3).回傳值方法： echo "callBackdata(JSON.stringify('".$str."'))"

(4).json格式，雙引號，在PHP與C#，都必須將雙引號改成：\"

(5).如何知道DataTable有幾筆紀錄: $result->num_rows

(6).如何取得第i筆紀錄的員工編號值: $row["員工編號"]

(1).注意：因為使用到jQuery 指令$.ajax，所以要用手機網頁格式jQuery mobile來寫
(2).目的：ajax連線跨網域PHP新增一筆記錄到MySQL
(3). 網頁一開始載入就顯示員工資料表
<body onload="ajaxCall('http://120.114.35.200/cellphone2/chp21-9-php.php?txtname=all')">

(4). 如何讓label員工編號：與文字欄位在同一行
<div data-role="fieldcontain">
<label for="id">員工編號：</label><input id="id" type="text" size="20" data-inline="true"/>
</div>

(5). 如何讓文字欄位有提示文字
<input id="tel" type="text" placeholder="0911-123-456" size="20">

(6). 要新增一筆紀錄，就要把每個欄位值參數傳遞主機PHP程式
function btn01()
{
document.getElementById('id01').innerHTML = "";
id01 = document.getElementById('id').value;
name01 = document.getElementById('name').value;
ajaxCall('http://localhost/chp21-9-php.php?txtname=add' + "&id01=" + id01 + "&name01=" + name01+ "&tel01=" + tel01)
}

(7). 這個網頁有2個即時功能，一個即時顯示員工資料表表格，另一個是新增一筆資料到mySQL上
所以，要傳遞一個參數來區別：
** 參數txtname = all，表示顯示員工資料表表格
** 參數txtname =add，表示新增一筆資料
ajaxCall('http://localhost/chp21-9-php.php?txtname=add' + "&id01=" + id01 + "&name01=" + name01+ "&tel01=" + tel01)

(3).指令$.ajax 非同步讀取跨網域資料
function ajaxCall(target){
//發出 ajax call
var data = $.ajax({
type: "get",
async: true,
url: target,
dataType: "jsonp",
jsonpCallback:"callBackdata",
});
}

(4).讀取跨網域資料後，呼叫callBackdata()來顯示即時訊息
function callBackdata(txt) {
//轉換字串變成json物件變數
var jsonDoc = JSON.parse(txt);

//顯示表格
str="<table border=1><tr><td>編號</td><td>姓</td><td>英文名</td><td>住址</td><td>電話</td></tr>";
for(i in jsonDoc)
{
str += "<tr><td>" + jsonDoc[i].id + "</td><td>" + jsonDoc[i].name + "</td><td>" + jsonDoc[i].englishname + "</td><td>" + jsonDoc[i].address + "</td><td>" + jsonDoc[i].tel + "</td></tr>";
}
str +="</table>"
document.getElementById("id01").innerHTML =str

}

第9題

ajax連線跨網域PHP新增一筆記錄到MySQL

php關鍵程式碼

方法3:

*使用php
來產生json 資料庫

下載phpStudy

<?php

//讀取網頁所傳遞來的欄位參數
$txtname = $_GET["txtname"];

//連結資料庫
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "資料庫名稱";

//** 參數txtname = all，表示顯示員工資料表表格
if($txtname == "all")
{
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

mysqli_query($conn,"SET NAMES utf8");

//查詢資料表
$sql = "Select * from 資料表";
$result = $conn->query($sql);

$str="callBackdata(JSON.stringify([";
////把DataTable資料轉成josn物件陣列

if ($result->num_rows > 0) {
// output data of each row

$i=0;
while($row = $result->fetch_assoc()) {

$str .="{\"id\":\"".$row["員工編號"]."\",";

$i +=1;
if ($i == $result->num_rows)
{}
else{
$str .=",";
}

}
} else {
echo "0 results";
}
//關閉資料庫的連結
$conn->close();

$str .="]));";
echo $str;
}

//-----------------------------------------------------------------------------------------
//** 參數txtname =add，表示新增一筆資料
if($txtname == "add")
{

//讀取網頁所傳遞來的欄位參數
$id01 = $_GET["id01"];
$name01 = $_GET["name01"];

//連結資料庫
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "資料庫名稱";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);

//The mysqli_set_charset() function specifies the default character set to be used when sending data from and to the database server.
//設定傳到資料庫的資料編碼, Change character set to utf8
mysqli_set_charset($conn,"utf8");

// Check connection
if (!$conn) {
die("連線發生錯誤: " . mysqli_connect_error());
}

$strjson = "callBackdata(JSON.stringify(";
$strjson .="{";
$strjson .= "\"message\":";

$sql = "INSERT INTO 資料表(欄位1,欄位2)VALUES ('".$id01."','".$name01."')";
if (mysqli_query($conn, $sql)) {
$strjson .= "\"已經成功新增一筆資料"."\"}";
} else {
$strjson .= "\"錯誤: " . $sql . ", " . mysqli_error($conn)."\"}";
}

//查詢資料表
$sql = "Select * from 資料表";
$result = $conn->query($sql);

$str="callBackdata(JSON.stringify([";
////把DataTable資料轉成josn物件陣列

if ($result->num_rows > 0) {
// output data of each row

$i=0;
while($row = $result->fetch_assoc()) {
$str .="{\"id\":\"".$row["員工編號"]."\",";
$str .="\"name\":\"".$row["姓名"]."\",";

$i +=1;
if ($i == $result->num_rows)
{}
else{
$str .=",";
}
}
} else {
echo "0 results";
}
//關閉資料庫的連結
$conn->close();

$str .="]));";
echo $str;
}

?>

-----------------------------------------------------------------------------------------

/注意：
(1).傳遞參數txtname給代理人程式PHP，在PHP接收所傳來參數方法：
$_GET["txtname"]

(2).PHP字串與變數相連接方法：.
$user."你好"

(3).回傳值方法： echo "callBackdata(JSON.stringify('".$str."'))"

(4).json格式，雙引號，在PHP與C#，都必須將雙引號改成：\"

(5).如何知道DataTable有幾筆紀錄: $result->num_rows

(6).如何取得第i筆紀錄的員工編號值: $row["員工編號"]

(7).//注意mySQL資料庫都用小寫northwind(不是Northwind)

(1).注意：因為使用到jQuery 指令$.ajax，所以要用手機網頁格式jQuery mobile來寫
(2).目的：ajax連線跨網域PHP刪除一筆記錄到MySQL
(3). 網頁一開始載入就顯示員工資料表
<body onload="ajaxCall('http://localhost/chp21-9-php.php?txtname=all')">

(4). 如何讓label員工編號：與文字欄位在同一行
<div data-role="fieldcontain">
<label for="id">員工編號：</label><input id="id" type="text" size="20" data-inline="true"/>
</div>

(5). 如何讓文字欄位有提示文字
<input id="tel" type="text" placeholder="0911-123-456" size="20">

(6). 要刪除一筆紀錄，主要以編號欄位值參數傳遞主機PHP程式
function btn01()
{
document.getElementById('id01').innerHTML = "";
id01 = document.getElementById('id').value;
ajaxCall('http://120.114.35.200/cellphone2/chp21-10-php.php?txtname=search' + "&id01=" + id01)
}

(7). 這個網頁有3個即時功能，一個即時顯示員工資料表表格，一個是查詢某筆編號，一個是刪除筆某筆資料到mySQL上
所以，要傳遞一個參數來區別：
** 參數txtname = all，表示顯示員工資料表表格
** 參數txtname =search，表示查詢一筆資料(button01)
** 參數txtname =del，表示刪除一筆資料(button02)
ajaxCall('http://local/chp21-9-php.php?txtname=add' + "&id01=" + id01 + "&name01=" + name01+ "&tel01=" + tel01)

(3).指令$.ajax 非同步讀取跨網域資料
function ajaxCall(target){
//發出 ajax call
var data = $.ajax({
type: "get",
async: true,
url: target,
dataType: "jsonp",
jsonpCallback:"callBackdata",
});
}

(4).讀取跨網域資料後，呼叫callBackdata()來顯示即時訊息
function callBackdata(txt) {
//轉換字串變成json物件變數
var jsonDoc = JSON.parse(txt);

//顯示表格
str="<table border=1><tr><td>編號</td><td>姓</td><td>英文名</td><td>住址</td><td>電話</td></tr>";
for(i in jsonDoc)
{
str += "<tr><td>" + jsonDoc[i].id + "</td><td>" + jsonDoc[i].name + "</td><td>" + jsonDoc[i].englishname + "</td><td>" + jsonDoc[i].address + "</td><td>" + jsonDoc[i].tel + "</td></tr>";
}
str +="</table>"
document.getElementById("id01").innerHTML =str

}
function btn01()
{
document.getElementById('id01').innerHTML = "";
id01 = document.getElementById('id').value;
ajaxCall('http://localhost/chp21-10-php.php?txtname=search' + "&id01=" + id01)
}

function btn02()
{
document.getElementById('id01').innerHTML = "";
id01 = document.getElementById('id').value;
ajaxCall('http://localhost/chp21-10-php.php?txtname=del' + "&id01=" + id01)
}

//兩個按鈕
<div data-role="fieldcontain"><label for="id">員工編號：</label><input id="id" type="text" size="20" placeholder="輸入員工編號" data-inline="true"/></div>
<div data-role="fieldcontain">
<label for="name">姓名：</label><input id="name" type="text" size="20" data-inline="true"/></div>
<div data-role="fieldcontain">
<label for="englishname">英文名：</label><input id="englishname" placeholder="例如：Peter" type="text" size="20" data-inline="true"/></div>
<div data-role="fieldcontain">
<label for="address">住址：</label><input id="address" type="text" size="20" data-inline="true"/></div>
<div data-role="fieldcontain">
<label for="tel">電話：</label><input id="tel" type="text" placeholder="0911-123-456" size="20" data-inline="true"/></div>
<input name="btn" type="button" value="以編號查詢記錄" onclick="btn01()" data-inline="true" />
<input name="btn22" type="button" value="以編號刪除記錄" onclick="btn02()" data-inline="true" />
<div id="id01"></div>

第10題

ajax連線跨網域PHP刪除一筆記錄到MySQL

php關鍵程式碼

方法3:

*使用php
來產生json 資料庫

下載phpStudy

<?php

//讀取網頁所傳遞來的欄位參數
$txtname = $_GET["txtname"];

//連結資料庫
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "Northwind";

if($txtname == "all")
{
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

mysqli_query($conn,"SET NAMES utf8");

//查詢資料表
//$sql = "Select * from t2";
$sql = "Select * from 員工";
$result = $conn->query($sql);

$str="callBackdata(JSON.stringify([";
////把DataTable資料轉成josn物件陣列

if ($result->num_rows > 0) {
// output data of each row

$i=0;
while($row = $result->fetch_assoc()) {
//echo "id: " . $row["id"]. " - Name: " . $row["firstname"]. " " . $row["lastname"]. "<br>";

//如何輸出" 方法: \"
//如何換行 方法: \n
$str .="{\"id\":\"".$row["員工編號"]."\",";
$str .="\"name\":\"".$row["姓名"]."\",";
$str .="\"englishname\":\"".$row["名"]."\",";
$str .="\"address\":\"".$row["地址"]."\",";
$str .="\"tel\":\"".$row["電話號碼"]."\"}";

$i +=1;
if ($i == $result->num_rows)
{}
else{
$str .=",";
}

}
} else {
echo "0 results";
}
//關閉資料庫的連結
$conn->close();

$str .="]));";

echo $str;

}

if($txtname == "search")
{
//讀取網頁所傳遞來的欄位參數
$id01 = $_GET["id01"];

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

mysqli_query($conn,"SET NAMES utf8");

//查詢資料表
//$sql = "Select * from t2";
$sql = "Select * from 員工 where 員工編號='".$id01."'";
$result = $conn->query($sql);

$str="callBackdata(JSON.stringify([";
////把DataTable資料轉成josn物件陣列

if ($result->num_rows > 0) {
// output data of each row

$i=0;
while($row = $result->fetch_assoc()) {
//echo "id: " . $row["id"]. " - Name: " . $row["firstname"]. " " . $row["lastname"]. "<br>";

//如何輸出" 方法: \"
//如何換行 方法: \n
$str .="{\"id\":\"".$row["員工編號"]."\",";
$str .="\"name\":\"".$row["姓名"]."\",";
$str .="\"englishname\":\"".$row["名"]."\",";
$str .="\"address\":\"".$row["地址"]."\",";
$str .="\"tel\":\"".$row["電話號碼"]."\"}";

$i +=1;
if ($i == $result->num_rows)
{}
else{
$str .=",";
}

}
} else {
echo "0 results";
}
//關閉資料庫的連結
$conn->close();

$str .="]));";

echo $str;

}

if($txtname == "del")
{

//讀取網頁所傳遞來的欄位參數
$id01 = $_GET["id01"];

//連結資料庫
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "Northwind";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);

//The mysqli_set_charset() function specifies the default character set to be used when sending data from and to the database server.
//設定傳到資料庫的資料編碼, Change character set to utf8
mysqli_set_charset($conn,"utf8");

// Check connection
if (!$conn) {
die("連線發生錯誤: " . mysqli_connect_error());
}

$strjson = "callBackdata(JSON.stringify(";
$strjson .="{";
$strjson .= "\"message\":";

$sql ="delete from 員工 where 員工編號='".$id01."'";
//$sql = "INSERT INTO 員工(員工編號,姓名,名,地址,電話號碼)VALUES ('".$id01."','".$name01."','".$englishname01."','".$address01."','".$tel01."')";
if (mysqli_query($conn, $sql)) {
//echo "已經成功刪除資料";
$strjson .= "\"已經成功刪除一筆資料"."\"}";
} else {
//echo "錯誤: " . $sql . "<br>" . mysqli_error($conn);
$strjson .= "\"錯誤: " . $sql . ", " . mysqli_error($conn)."\"}";
//$strjson .= "\"錯誤: 無法刪除資料\"}";
}

//mysqli_close($conn);

$strjson .="))";
//echo $strjson;

//查詢資料表
$sql = "Select * from 員工";
$result = $conn->query($sql);

$str="callBackdata(JSON.stringify([";
////把DataTable資料轉成josn物件陣列

if ($result->num_rows > 0) {
// output data of each row

$i=0;
while($row = $result->fetch_assoc()) {
$str .="{\"id\":\"".$row["員工編號"]."\",";
$str .="\"name\":\"".$row["姓名"]."\",";
$str .="\"englishname\":\"".$row["名"]."\",";
$str .="\"address\":\"".$row["地址"]."\",";
$str .="\"tel\":\"".$row["電話號碼"]."\"}";

$i +=1;
if ($i == $result->num_rows)
{}
else{
$str .=",";
}
}
} else {
echo "0 results";
}
//關閉資料庫的連結
$conn->close();

$str .="]));";

echo $str;

}

?>

(1).注意：因為使用到jQuery 指令$.ajax，所以要用手機網頁格式jQuery mobile來寫
(2).目的：ajax連線跨網域PHP修改一筆記錄到MySQL
(3). 網頁一開始載入就顯示員工資料表
<body onload="ajaxCall('http://localhost/chp21-9-php.php?txtname=all')">

(4). 如何讓label員工編號：與文字欄位在同一行
<div data-role="fieldcontain">
<label for="id">員工編號：</label><input id="id" type="text" size="20" data-inline="true"/>
</div>

(5). 如何讓文字欄位有提示文字
<input id="tel" type="text" placeholder="0911-123-456" size="20">

(6). 要修改一筆紀錄，主要以編號欄位值參數傳遞主機PHP程式
function btn01()
{
document.getElementById('id01').innerHTML = "";
id01 = document.getElementById('id').value;
ajaxCall('http://120.114.35.200/cellphone2/chp21-10-php.php?txtname=search' + "&id01=" + id01)
}

(7). 這個網頁有3個即時功能，一個即時顯示員工資料表表格，一個是查詢某筆編號，一個是修改筆某筆資料到mySQL上
所以，要傳遞一個參數來區別：
** 參數txtname = all，表示顯示員工資料表表格
** 參數txtname =search，表示查詢一筆資料(button01)
** 參數txtname =update'，表示修改一筆資料(button02)
ajaxCall('http://localhost/chp21-11-php.php?txtname=update' + "&id01=" + id01 + "&name01=" + name01 + "&englishname01=" + englishname01 + "&address01=" + address01 + "&tel01=" + tel01)

(3).指令$.ajax 非同步讀取跨網域資料
function ajaxCall(target){
//發出 ajax call
var data = $.ajax({
type: "get",
async: true,
url: target,
dataType: "jsonp",
jsonpCallback:"callBackdata",
});
}

(4).讀取跨網域資料後，呼叫callBackdata()來顯示即時訊息
function callBackdata(txt) {
//轉換字串變成json物件變數
var jsonDoc = JSON.parse(txt);

//顯示表格
str="<table border=1><tr><td>編號</td><td>姓</td><td>英文名</td><td>住址</td><td>電話</td></tr>";
for(i in jsonDoc)
{
str += "<tr><td>" + jsonDoc[i].id + "</td><td>" + jsonDoc[i].name + "</td><td>" + jsonDoc[i].englishname + "</td><td>" + jsonDoc[i].address + "</td><td>" + jsonDoc[i].tel + "</td></tr>";
}
str +="</table>"
document.getElementById("id01").innerHTML =str

}
function btn01()
{
document.getElementById('id01').innerHTML = "";
id01 = document.getElementById('id').value;
ajaxCall('http://localhost/chp21-11-php.php?txtname=search' + "&id01=" + id01)
}

function btn02()
{
document.getElementById('id01').innerHTML = "";
id01 = document.getElementById('id').value;
name01 = document.getElementById('name').value;
englishname01 = document.getElementById('englishname').value;
address01 = document.getElementById('address').value;
tel01 = document.getElementById('tel').value;
ajaxCall('http://localhost/chp21-11-php.php?txtname=update' + "&id01=" + id01 + "&name01=" + name01 + "&englishname01=" + englishname01 + "&address01=" + address01 + "&tel01=" + tel01)
}

//兩個按鈕
<div data-role="fieldcontain"><label for="id">員工編號：</label><input id="id" type="text" size="20" placeholder="輸入員工編號" data-inline="true"/></div>
<div data-role="fieldcontain">
<label for="name">姓名：</label><input id="name" type="text" size="20" data-inline="true"/></div>
<div data-role="fieldcontain">
<label for="englishname">英文名：</label><input id="englishname" placeholder="例如：Peter" type="text" size="20" data-inline="true"/></div>
<div data-role="fieldcontain">
<label for="address">住址：</label><input id="address" type="text" size="20" data-inline="true"/></div>
<div data-role="fieldcontain">
<label for="tel">電話：</label><input id="tel" type="text" placeholder="0911-123-456" size="20" data-inline="true"/></div>
<input name="btn" type="button" value="以編號查詢記錄" onclick="btn01()" data-inline="true" />
<input name="btn22" type="button" value="以編號修改記錄" onclick="btn02()" data-inline="true" />

第11題

ajax連線跨網域PHP修改一筆記錄到MySQL

php關鍵程式碼

方法3:

*使用php
來產生json 資料庫

下載phpStudy

<?php

//讀取網頁所傳遞來的欄位參數
$txtname = $_GET["txtname"];

//連結資料庫
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "northwind";

if($txtname == "all")
{
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

mysqli_query($conn,"SET NAMES utf8");

//查詢資料表
//$sql = "Select * from t2";
$sql = "Select * from 員工";
$result = $conn->query($sql);

$str="callBackdata(JSON.stringify([";
////把DataTable資料轉成josn物件陣列

if ($result->num_rows > 0) {
// output data of each row

$i=0;
while($row = $result->fetch_assoc()) {
//echo "id: " . $row["id"]. " - Name: " . $row["firstname"]. " " . $row["lastname"]. "<br>";

//如何輸出" 方法: \"
//如何換行 方法: \n
$str .="{\"id\":\"".$row["員工編號"]."\",";
$str .="\"name\":\"".$row["姓名"]."\",";
$str .="\"englishname\":\"".$row["名"]."\",";
$str .="\"address\":\"".$row["地址"]."\",";
$str .="\"tel\":\"".$row["電話號碼"]."\"}";

$i +=1;
if ($i == $result->num_rows)
{}
else{
$str .=",";
}

}
} else {
echo "0 results";
}
//關閉資料庫的連結
$conn->close();

$str .="]));";

echo $str;

}

if($txtname == "search")
{
//讀取網頁所傳遞來的欄位參數
$id01 = $_GET["id01"];

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

mysqli_query($conn,"SET NAMES utf8");

//查詢資料表
//$sql = "Select * from t2";
$sql = "Select * from 員工 where 員工編號='".$id01."'";
$result = $conn->query($sql);

$str="callBackdata(JSON.stringify([";
////把DataTable資料轉成josn物件陣列

if ($result->num_rows > 0) {
// output data of each row

$i=0;
while($row = $result->fetch_assoc()) {
//echo "id: " . $row["id"]. " - Name: " . $row["firstname"]. " " . $row["lastname"]. "<br>";

//如何輸出" 方法: \"
//如何換行 方法: \n
$str .="{\"id\":\"".$row["員工編號"]."\",";
$str .="\"name\":\"".$row["姓名"]."\",";
$str .="\"englishname\":\"".$row["名"]."\",";
$str .="\"address\":\"".$row["地址"]."\",";
$str .="\"tel\":\"".$row["電話號碼"]."\"}";

$i +=1;
if ($i == $result->num_rows)
{}
else{
$str .=",";
}

}
} else {
echo "0 results";
}
//關閉資料庫的連結
$conn->close();

$str .="]));";

echo $str;

}

if($txtname == "update")
{

//讀取網頁所傳遞來的欄位參數
$id01 = $_GET["id01"];
$name01 = $_GET["name01"];
$englishname01 = $_GET["englishname01"];
$address01 = $_GET["address01"];
$tel01 = $_GET["tel01"];

//連結資料庫
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "Northwind";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);

//The mysqli_set_charset() function specifies the default character set to be used when sending data from and to the database server.
//設定傳到資料庫的資料編碼, Change character set to utf8
mysqli_set_charset($conn,"utf8");

// Check connection
if (!$conn) {
die("連線發生錯誤: " . mysqli_connect_error());
}

$strjson = "callBackdata(JSON.stringify(";
$strjson .="{";
$strjson .= "\"message\":";

$sql = "UPDATE 員工 SET 員工編號='".$id01."', 姓名='".$name01."', 名='".$englishname01."', 地址='".$address01."',電話號碼='".$tel01."' WHERE 員工編號='".$id01."'";
//$sql ="delete from 員工 where 員工編號='".$id01."'";
//$sql = "INSERT INTO 員工(員工編號,姓名,名,地址,電話號碼)VALUES ('".$id01."','".$name01."','".$englishname01."','".$address01."','".$tel01."')";
if (mysqli_query($conn, $sql)) {
//echo "已經成功刪除資料";
$strjson .= "\"已經成功刪除一筆資料"."\"}";
} else {
//echo "錯誤: " . $sql . "<br>" . mysqli_error($conn);
$strjson .= "\"錯誤: " . $sql . ", " . mysqli_error($conn)."\"}";
//$strjson .= "\"錯誤: 無法刪除資料\"}";
}

//mysqli_close($conn);

$strjson .="))";
//echo $strjson;

//查詢資料表
$sql = "Select * from 員工";
$result = $conn->query($sql);

$str="callBackdata(JSON.stringify([";
////把DataTable資料轉成josn物件陣列

if ($result->num_rows > 0) {
// output data of each row

$i=0;
while($row = $result->fetch_assoc()) {
$str .="{\"id\":\"".$row["員工編號"]."\",";
$str .="\"name\":\"".$row["姓名"]."\",";
$str .="\"englishname\":\"".$row["名"]."\",";
$str .="\"address\":\"".$row["地址"]."\",";
$str .="\"tel\":\"".$row["電話號碼"]."\"}";

$i +=1;
if ($i == $result->num_rows)
{}
else{
$str .=",";
}
}
} else {
echo "0 results";
}
//關閉資料庫的連結
$conn->close();

$str .="]));";

echo $str;

}

?>

第1步：首先須把xx.json檔案上傳到主機或用你電腦當主機，但2014前買的電腦，IIS的MIME不認識json格式，所以要先在IIS裡面把MIME類型新增，副檔名：.json，MIME類型：application/json，然後關閉IIS後再重開即可讀取，

第2步：測試可否讀取json檔案(以chrome來瀏覽才準)：http://localhost/json/book.json

第3步：撰寫jquery html網頁讀取school.json，但不能在本機端測試，會無法讀取，也必須上上傳到主機或用你電腦當主機開啟IIS來測試

01.merges：允許各平台(ios,android..)有自己專屬的程式碼，或版面設定css

02.res：在icon資料夾放各平台(ios,android..)的應用程式圖示icon，一般要設定96x96,72x72,48x48,x36x32圖
在screens資料夾放各平台(ios,android..)的等待載入圖

03.www：index.html是程式起點
在css資料夾放各平台(ios,android..)的版面設定檔案
在scripts資料夾放各平台(ios,android..)的javascript檔案，其中自行撰寫的程式都是放在index.js

04.config.xml：設定APP的基本資料(名稱，版權，作者)，更重要是設定cordova的外掛程式

05.執行後的apk檔案，放在目錄D:\vscordova\channel12-slideleft\channel12\platforms\android\build\outputs\apk

01.方法1手動加入：
步驟1：工具->NuGet封裝管理員->管理專案的NuGet套件
步驟2：搜尋jQuery Mobile，點選安裝第一個套件，在content及Scripts資料夾會更新
步驟3：將conten裡面的jquery.mobile-1.4.5.min.css複製到www/css裡面
步驟4：將Scripts裡面的jquery.mobile-1.4.5.min.js，及jquery-1.8.0.js複製到www/scripts裡面
步驟5：在index.html的<head>，寫入以下幾行import函數庫
<link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="scripts/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>

02.方法2自動加入：
步驟1：下載jQuey Mobile模組範本檔案
步驟2：VS2015自訂範本路徑是：c:\Users\使用者名稱\Documents\Visual Studio 2015\Templates\ProjectTemplates\javascript，將jQuey Mobile模組範本檔案複製到此
步驟3：在VS2015，檔案->新增->專案，範本->javascript->JqueryMobile(ApacheCordova)下載jQuey Mobile模組範本檔案

01.cordova加入jQueryMobile模組的index.htm程式碼

01.必須先安裝Android SDK：（SDK Manage管理器）
步驟1：先到C:\Program Files (x86)\Android\android-sdk，執行SDK Manager.exe
步驟2：那些模擬器都沒有安裝（預設模擬器Armeabi,Intelx86Atom這兩個模擬器也都沒有安裝，這兩個都要打勾，
注意3：但很多電腦安裝後，會顯示錯誤訊息：URL not found: C:\Program Files (x86)\Android\android-studio1\sdk\temp\googleadmobadssdkandroid-6.4.1.zip (存取被拒)， 原因：在執行SDK Manage管理器時，必須以管理員身份執行，才可被存取
方法： 在C:\Program Files (x86)\Android\android-sdk\行SDK Manager.exe，滑鼠按右鍵，選擇“以管理員身份執行”
注意4：有些電腦執行模擬器時會出現錯誤he connection to the server was unsuccessful，
解決方法：在config.xml裡面加入這行，即可解決：
<preference name="loadUrlTimeoutValue" value="700000" />

The problem might be solved by adding a timeout to call your index.html

ie you need to add super.setIntegerProperty("loadUrlTimeoutValue", 70000)

Explanation:

This can be happened due to the following reasons

The core reason: the problem is likely due to the speed of the emulator so the network is too slow complete the communication in a timely fashion.

This can be due to:

Your code/data/image is of too much of size ( I guess in your case you are using some images ,as you said you made some UI modifications, may be the size of images are high)
Your script may have a infinite or long loop, so that it takes too much of time to load.
You will be using too much of scripts (jQuery, iscroll, etc etc.. more number of plugins or scripts )

步驟4：安裝完就可以用了

ps.模擬器管理器AVD：AVD Manage
步驟1：先到C:\Program Files (x86)\Android\android-sdk
步驟2：執行AVD Manager.exe
步驟3：預設模擬器AVD19HVGA

01.如果，開啟網頁有三種選擇：程式碼視窗，設計，分割
步驟1：在網頁，按右鍵->開啟方式->含編碼的HTML(Web Form)編輯器

步驟1：到目錄res\icons\android設定各種尺寸的icon

步驟1：在config.xml加入外掛splashScreen
<plugin name="cordova-plugin-splashscreen" version="3.2.2" />
步驟2：在config.xml設定起始圖片顯示時間等資訊
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="4000" />
<preference name="SplashMaintainAspectRatio" value="false" />
步驟3：到目錄res\screens\android設定各種尺寸的圖片

01.若使用jqueryMobile的彈出視窗(呼叫page="a1"，以dialog型式顯示)，速度與效率都太慢，但若用cordova外掛，notification，速度很快
02.jqueryMobile的轉場效果不明，且又會造成頁面顯示delay延遲緩慢，不建議使用轉場效果
步驟1：在config.xml加入外掛notification
<plugin name="cordova-plugin-dialogs" version="1.2.1" />
步驟2：撰寫程式碼(在head或index.js裡面撰寫)
navigator.notification.alert("本日最新消息", null, "資訊", "確定");
**5個參數分別是：訊息內容，回應函數，標題，按鈕名稱，預設顯示文字
**若有多個按鈕的寫法：{"確定","取消"}

01.使用外掛InAppBrower，即可快速顯示Pdf，網頁，全螢幕圖片
步驟1：在config.xml加入外掛InAppBrower
<plugin name="cordova-plugin-inappbrowser" version="1.4.0" />
步驟2：撰寫程式碼(在head或index.js裡面撰寫)
cordova.InAppBrowser.open("路徑",'_blank', 'location=yes,enableViewportScale=yes');

步驟1：在config.xml加入外掛Camera
<plugin name="cordova-plugin-camera" version="2.2.0" />
步驟2：撰寫程式碼(在head或index.js裡面撰寫)
navigator.camera.getPicture(onSuccess, onFail, {
quality: 40, //相片品質 0-100
destinationType: Camera.DestinationType.FILE_URI, //使用檔案
sourceType: Camera.PictureSourceType.CAMERA, //使用相機照相
encodingType: Camera.EncodingType.JPEG, //存為JPG檔
correctOrientation: true, //可旋轉圖片
saveToPhotoAlbum: true //存到媒體庫
})

function onSuccess(thispic) {
document.getElementById('imgcamera').style.display = 'block'; //設定圖片顯示模式
document.getElementById('imgcamera').src = thispic;
}

function onFail(message) {
alert('錯誤：' + message);
}

//顯示的圖片
<img id="imgcamera" style="display:none;width:20%" src=""/>

步驟1：在config.xml加入外掛capture
<plugin name="cordova-plugin-media-capture" version="1.3.0" />
步驟2：撰寫程式碼(在head或index.js裡面撰寫)
function audio01() {
navigator.device.capture.captureAudio(onsuccessaudio, onfailaudio, { limit: 1 });
}
function onsuccessaudio(thisaudio) {
document.getElementById('idaudio').innerHTML = "<audio controls><source src='" + thisaudio[0].fullPath + "'></audio>";
}

function onfailaudio() {
alert('執行產生錯誤');
}

錯誤訊息：visual studio加入外掛plugins，可能因為軟體有bug，有時候會出現錯誤（錯誤訊息）

解決方法：
(1).在：visual studio內開啟config.xml，然後，移除所有之前已經安裝的外掛。（這樣做，才能把子目錄plugins裡面已經安裝的外掛程式刪除）（所以，只有刪除config.xml裡的設定是不夠的）
(2).複製可以成功執行的config.xml，覆蓋舊有的檔案
(3).讓程式執行（建置專案），軟體就會依據config.xml裡面的設定來產生新的外掛函數（放在子目錄plugins裡面）

在jQuery Mobile與Html5程式裡面的同一頁面書籤超連結(錨點)寫法：

1.必須用data-ajax="false"

2.目標物代號必須用id，少用name

<a href="#book1" data-ajax="false" data-role="button" >第一本書 </a>

..

..

..

<h1 id="book1">第一本書內容..... </h1>
....
...

cordova外掛7：將檔案上傳到伺服器

單一檔案，圖片jpg

寫法(1)

步驟1：在config.xml加入外掛File，File Transfer
<plugin name="cordova-plugin-file" version="4.2.0" />
<plugin name="cordova-plugin-file-transfer" version="1.5.1" />

步驟2：撰寫程式碼(在head或index.js裡面撰寫)
function uploadPicture() {
// 取得上傳圖片的URI
var img = document.getElementById(imgcamera);
var imageURI = img.src;

if (imageURI.indexOf('jpg') != -1) {
server = "http://120.14.35.117/upload.php"; // 取得上傳網址
if (server) { // 建立FileUploadOptions物件
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);
options.mimeType = "image/jpeg";
var params = new Object(); // 建立參數物件
params.value1 = "test";
params.value2 = "param";
options.params = params;
options.chunkedMode = false;
var ft = new FileTransfer(); // 上傳檔案
ft.upload(imageURI, server, onSuccess, onFail, options);
}
} else if(imageURI.indexOf('jpg') == -1) {
$('#_status').html("請照相或選擇圖片...");
}
}

function onSuccess(r) {
$('#_status').html("上傳成功: " + r.bytesSent + "位元組");
}

function onFail(error) {
$('#_status').html("上傳失敗: 錯誤碼 = " + error.code);
}

//顯示的圖片
<img id="imgcamera" style="display:none;width:20%" src=""/>

//伺服器的upload.phpPHP程式碼
<?php
// 上傳檔案的目錄
$dirname = "temp";
// 儲存上傳的圖檔
if ($_FILES) {
//mkdir($dirname, 0777, true);
//mkdir() 尝试新建一个由 path 指定的目录。默认的 mode 是 0777，意味着最大可能的访问权。
$file = $dirname . "/" . md5(date('Ymdgisu')) . ".jpg";
//PHP md5 函式的功能可以將字串打散並重新計算出 md5 雜湊函數，屬於 PHP 字串函式，經 md5 打散計算過後的字串也稱為 md5 散列，通常用於網友建立密碼時，先轉換為 md5 散列，再存入 MySQL 資料庫中，以此達到保護密碼的作用，雖然無法讓密碼完全不被破解，但至少比直接將密碼字串存入資料庫安全，避免密碼的原始字串直接顯示
@move_uploaded_file($_FILES["file"]["tmp_name"], $file);
}
?>

cordova外掛7：將檔案上傳到伺服器

單一檔案，音樂mp3

寫法(1)

步驟1：在config.xml加入外掛File，File Transfer
<plugin name="cordova-plugin-file" version="4.2.0" />
<plugin name="cordova-plugin-file-transfer" version="1.5.1" />

步驟2：撰寫程式碼(在head或index.js裡面撰寫)
function uploadmp3() {
// 取得上傳mp3的URI
var audone = document.getElementById('aud01');
var mp3URI = audone.src;

if (mp3URI.indexOf(mp3) != -1) {
server = "http://120.14.35.117/upload03.php"; // 取得上傳網址
if (server) { // 建立FileUploadOptions物件
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);
options.mimeType = "audio/mp3";
var params = new Object(); // 建立參數物件
params.value1 = "test";
params.value2 = "param";
options.params = params;
options.chunkedMode = false;
var ft = new FileTransfer(); // 上傳檔案
ft.upload(imageURI, server, onSuccess, onFail, options);
}
} else if(mp3URI.indexOf(mp3) == -1 {
$('#_status').html("請錄音或選擇mp3...");
}
}

function onSuccess(r) {
$('#_status').html("上傳成功: " + r.bytesSent + "位元組");
}

function onFail(error) {
$('#_status').html("上傳失敗: 錯誤碼 = " + error.code);
}

//顯示的mp3
<audio id='aud01' controls></audio>

//伺服器的upload03.phpPHP程式碼
<?php
// 上傳檔案的目錄
$dirname = "temp";
// 儲存上傳的圖檔
if ($_FILES) {
mkdir($dirname, 0777, true);
$file = $dirname . "/" . md5(date('Ymdgisu')) . ".mp3";
@move_uploaded_file($_FILES["file"]["tmp_name"], $file);
}
?>

cordova外掛7：將檔案上傳到伺服器

多個檔案，圖片jpg

寫法(2)

因為多個檔案上傳，每個檔案都需要一段上傳時間，這需要用非同步技術

此處採用

01.陣列累加push
02.非同步延遲.Deferred();
03.win()，

步驟1：在config.xml加入外掛File，File Transfer
<plugin name="cordova-plugin-file" version="4.2.0" />
<plugin name="cordova-plugin-file-transfer" version="1.5.1" />

步驟2：撰寫程式碼(在head或index.js裡面撰寫)
function uploadmultiPics() {
console.log("Ok, going to upload " + images.length + " images.");
if (document.getElementById('imgsee01').src.indexOf('jpg') == -1 || document.getElementById('imgsee02').src.indexOf('jpg') == -1 || document.getElementById('imgsee03').src.indexOf('jpg') == -1 || document.getElementById('aud01').src.indexOf('mp3') == -1) {
document.getElementById('status01').style.color = "red";
$('#status01').html("請先照相三張，才能一起上傳");
} else {
document.getElementById('status01').style.color = "purple";
$('#status01').html("請等待，正上傳中<img src='images/uploading.gif' />");
images.push(document.getElementById('imgsee01').src);
images.push(document.getElementById('imgsee02').src);
images.push(document.getElementById('imgsee03').src);

var defs = [];
images.forEach(function (i) {
console.log('processing ' + i);
var def = $.Deferred();

function win(r) {
console.log("thing done");
if ($.trim(r.response) === "0") {
console.log("this one failed");
def.resolve(0);
} else {
console.log("this one passed");
def.resolve(1);
}
}

function fail(error) {
console.log("upload error source " + error.source);
console.log("upload error target " + error.target);
document.getElementById('status01').style.color = "red";
$('#status01').html("上傳失敗: 錯誤碼 = " + error.code);
def.resolve(0);
}

var uri = "http://120.114.35.117/upload04.php";

var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = i.substr(i.lastIndexOf('/') + 1);
options.mimeType = "image/jpeg";

//added
var params = new Object();
params.directory = "temp"; //must correspond with $_POST['directory']
params.fileName = i.substr(i.lastIndexOf('/') + 1); //must correspond with $_POST['fileName']

options.params = params;
//end added

var ft = new FileTransfer();
ft.upload(i, uri, win, fail, options);
defs.push(def.promise());

});

$.when.apply($, defs).then(function () {
console.log("all things done");
console.dir(arguments);
});

}//end if 判別有否拍照

}//uploadmultiPics

//顯示的圖片
<img id="imgsee01" style="display:none;width:20%" src=""/>
<img id="imgsee02" style="display:none;width:20%" src=""/>
<img id="imgsee03" style="display:none;width:20%" src=""/>

//伺服器的upload04.phpPHP程式碼（這是第二種接收上傳資料的PHP寫法）
<?php
$location = $_POST['directory'];
$uploadfile = $_POST['fileName'];
$uploadfilename = $_FILES['file']['tmp_name'];

if(move_uploaded_file($uploadfilename, $location.'/'.$uploadfile)){
echo 'File successfully uploaded!';
} else {
echo 'Upload error!';
}
?>

01.到官網複製基礎網頁樣板Basic template
（語言改成lang='zh-cmn-Hant'
1. 简体中文页面：html lang=zh-cmn-Hans
2. 繁体中文页面：html lang=zh-cmn-Hant
3. 英语页面：html lang=en
注意，index.html同目錄有沒有css,js等目錄

<!DOCTYPE html>
<html lang="zh-cmn-Hant">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

01.頁首：
<div id="header" class="container" style="background-color:royalblue;color:white;">Header</div>
如果兩邊不留白，就取消class="container"

02.頁中：
<div class="container">
<div class="row">
<div class="col-sm-3" style="background-color:orange">Left Bar</div>
<div class="col-sm-7">Main content</div>
<div class="col-sm-2" style="background-color:pink">Right Bar</div>
</div>
</div>
如果兩邊不留白，就取消class="container"

01.控制小屏幕(手機)顯示設定參數：xs
小螢幕時，欄位50%：col-xs-6
小螢幕時，欄位隱藏：hidden-xs

02.範例：小螢幕(手機)左邊menu顯示50%，主內容content顯示50%，右邊menu隱藏
<div class="col-sm-3 col-xs-6" style="background-color:orange;">左邊菜單</div>
<div class="col-sm-6 col-xs-6">主要內容</div>
<div class="col-sm-3 hidden-xs" style="background-color:pink">右邊菜單</div>

03.範例：小螢幕(手機)左邊menu顯示50%，主內容content顯示50%，右邊menu顯示100%一列
<div class="col-sm-3 col-xs-6" style="background-color:orange;">左邊菜單</div>
<div class="col-sm-6 col-xs-6">主要內容</div>
<div class="col-sm-3 col-xs-12" style="background-color:pink">右邊菜單</div>

01.控制小屏幕(手機)顯示設定參數：xs
小螢幕時，欄位50%：col-xs-6
小螢幕時，欄位隱藏：hidden-xs

02.範例：小螢幕(手機)左邊menu顯示50%，主內容content顯示50%，右邊menu隱藏
<div class="col-sm-3 col-xs-6" style="background-color:orange;">左邊菜單</div>
<div class="col-sm-6 col-xs-6">主要內容</div>
<div class="col-sm-3 hidden-xs" style="background-color:pink">右邊菜單</div>

03.範例：小螢幕(手機)左邊menu顯示50%，主內容content顯示50%，右邊menu顯示100%一列
<div class="col-sm-3 col-xs-6" style="background-color:orange;">左邊菜單</div>
<div class="col-sm-6 col-xs-6">主要內容</div>
<div class="col-sm-3 col-xs-12" style="background-color:pink">右邊菜單</div>