返回主頁
    .
    .
    .
VB.NET程式
VC++.NET程式
JAVA程式
資料庫應用
網頁與動畫設計
互動網頁程式設計
Flash 3D商務網站
電子商務實作Asp
Project遠距教學
數典實作
Office實用技巧
Android手機程式(1)
智慧手機程式(jQM)
ionic+angularJS
Html5+CSS+javascript
多媒體概論
PDA程式
出書一
出書二
初級網頁製作
傳醫概論
    .
    .
    .
    .


 


 
 
陳擎文教學網:網頁&手機程式設計系統進階篇:jQuery Mobile(jQM)+ PhoneGap

介紹第2種智慧型手機程式設計的方法:網頁法(進階篇):使用 jQuery Mobile(jQM) + PhoneGap

 設計智慧型手機主要有兩種方法:
 (1).採用應用程式設計法:例如:使用JAVA程式來撰寫android手機程式。(或是Objective-C和Xcode來撰寫iphone程式,或使用Visual Studio VB.NET和silverlight來撰寫微軟Window Phone手機程式。
 缺點:程式技術較困難,無法跨越各種平台、各種廠牌、各種解析度。

 (2).採用網頁程式設計方法:使用Html5+CSS+javascript,結合jquery+PhoneGap。 
 優點:網頁程式較為簡單,寫好的程式可以廣泛應用,可跨越各種平台、各種廠牌
 Html 5-- 最新一代的網頁標籤語法,新增了繪圖,播放影音等的標籤
 (1).CSS -- 設定網頁標籤的各種詳細屬性,例如:,例如:style="color:#F000000"
 (2).javascript-- 一種用戶端網頁程式,可以用來控制與各種網頁標籤的互動
 (3).jQuery Mobile(jQM)-- 一種改良後的簡易使用javascript函數庫,更容易使用javascript
 (4).jquery Mobile-- 也是簡易使用的javascript函數庫,但用於智慧型手機上
 (5).PhoneGap-- 可以將設計好的智慧型手機javascript網頁程式,打包成APP程式,可以放在play商店販賣,或供人免費下載
 (6).Server2Go-- 一種web網頁伺服器工具,架站軟體(類似微軟的IIS或Linux的Apache),可以在windows桌上電腦來執行Apache伺服器,執行jquery Mobile網頁程式,或是執行PHP伺服器端網頁程式
 優點:Server2Go是綠色軟體,不需安裝,執行即可使用--
 (7).Opera Mobile Emulator手機模擬瀏覽器 -- 可以在windows桌上電腦模擬成各種廠牌的智慧型手機,來執行所開發的網頁手機程式,預覽其內容結果
  上課程式碼即時貼網站 上課即時貼網站 目前上課範例 期末考考題  
  上次上課進度 11月27上課進度    
  上課加分系統 3A加分系統 4A加分系統    
  上課求助系統 3A求助系統 4A求助系統    
  課外參考書籍原文電子書下載 參考書籍下載    
  下載軟體(Apache架站軟體) 下載phpStudy      
  作業與考試上傳方法  上傳注意事項 Ftp軟體    
  免費的網頁編輯軟體 微軟的Expression web 4(英文版) 微軟的Expression web 4(中文版)    
  javascript教學網站 w3c學校-javascript(中文版) w3c學校-javascript(英文版)    
  jQuery教學網站 w3c學校-jQuery(中文版) w3c學校-jQuery(英文版)    
  jQuery Mobile教學網站 w3c學校-jQuery Mobile(中文版) w3c學校-jQuery Mobile(英文版)    
  HTML 5 教學網站 w3c學校-HTML 5 (中文版) w3c學校-HTML 5 (英文版)    
  CSS教學網站 w3c學校-CSS 3(中文版) w3c學校-CSS(英文版)    
  html,CSS教學網站 w3c學校-html,xhtml,htm5,CSS,cSS3(中文版)      
  HTML DOM 教學網站 w3c學校-HTML DOM(中文版)    
  AJAX 教學網站 w3c學校-AJAX(中文版) w3c學校-AJAX(英文版)    
  JSON 教學網站 w3c學校-JSON(中文版) w3c學校-JSON(英文版)    
  PHP 5教學網站 w3c學校-PHP 5(中文版) w3c學校-PHP 5(英文版)    
  ASP.NET教學網站 w3c學校-ASP.NET(中文版) w3c學校-ASP.NET(英文版)    
           
           
Chp1 : 測試在智慧手機模擬器上執行已經寫好的javascript程式
  下載軟體 Server2Go架站軟體 書本版本下載     
    Opera 手機模擬瀏覽器 Opera 12.1Windows版下載    
  下載物件 雪花飄落網頁 貓走路網頁    
  下載講義 chp1手機設計簡介      
  下載講義 chp1講義      
           
Chp 2: 建立單一頁面 手機App
  下載講義 chp2講義      
  練習範例 2-1.傳統一般網頁 2-2.改良後的手機網頁 2-3.標準手機格式的網頁 2-4.小應用,建立中藥頁面
  下載jQM函數庫與CSS設定 jQM函數庫下載網站 jquery.mobile-1.4.2版直接下載    
  關鍵程式碼        
  把傳統網頁文字放大 2-page01
<meta charset="utf-8"/>  
<meta name="viewport" content="width=device-width, initial-scale=1">
  jQM標準手機單一頁面格式 單一頁面格式範本  
           
Chp 3: 多頁面的手機網頁語法,巡覽工具列
  下載講義 chp3講義      
  練習範例 3-1.測試雙頁面的連結 3-2.製作四頁面手機連結 3-3.加上返回主頁的上一頁按鈕 3-4.連結外部頁面
    3-5.連結到交談窗頁面(類似訊息方塊) 3-6.製作巡覽工具列(類似視窗程式工具列) 3-7.將巡覽工具列加上圖示icon 3-8.設定不同的頁面轉換特效
    3-9.設定頁面不同區域的不同佈景主題 3-10. 關閉程式,出現交談窗,先詢問是否否離開    
  下載練習用圖片icon icon      
  關鍵程式碼        
  jQM標準手機多頁面格式 多頁面格式範本      
  兩個頁面的連結 <a href="#a1">……<div data-role="page" id="a1">
  把超連結改成按鈕 <a href="#a1" data-role="button">第一題(40分)</a>
  返回的上一頁按鈕 <div data-role="header" data-add-back-btn = "true" data-back-btn-text ="上一頁">
  交談窗(類似訊息方塊) <a href="#a1" data-rel = "dialog">
  標題列按鈕有2種作法

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

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

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

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

  巡覽工具列加上圖示icon

<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

  若按取消則回到主頁 <a href="javascript:goquit()">確定</a>
<a href="#" data-rel="back">取消</a>
  header, footer列定位有3種作法

方法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>


           
Chp 4: 手機按鈕,文字方塊,標籤
  下載講義 chp4講義      
  下載圖片icon icon圖片1      
  練習範例 4-1.計算梯形面積 4-2.滑動軸計算梯形面積 4-3.滑鼠滑過變換圖片01 4-4.改變文字顏色尺寸大小
  練習範例 4-5.改變文字顏色尺寸大小    
  練習範例 4-11.本題多頁面架構 4-12.計算加法 4-13.計算梯形面積 4-14.使用超連結按鈕算面積
    4-15.顯示文字 4-16.文字標籤設定背景顏色,字體大小    
  關鍵程式碼        
  把超連結改成按鈕

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

 

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

 

  把按鈕改成小按鈕 <a href="#a1" data-role="button" data-mini=true>按鈕</a>
  按鈕有圓角 <a href="#a1" data-role="button" data-mini=true data-corners=true>按鈕</a>
  按鈕有圓角 <a href="#a1" data-role="button" data-mini=true data-inset=true>按鈕</a>
  按鈕變成小按鈕(1行內可多個按鈕) <a href="#a1" data-inline=true>按鈕</a>
  按鈕主題顏色 <a href="#a1" data-theme="a">按鈕</a>
兩種theme布景a,b
  按鈕有圖標 <a href="#a1" data-icon="star">按鈕</a>
arrow-l,arrow-r,arrow-u,arrow-d,delete,Plus,minus,Check,gear,
Forward,Back,Grid,Star,Alert,info,home,Search
  (1).將文字轉換成整數:parseInt("文字");
  (2).設定文字方塊內的文字值:文字方塊name.value =...;
 

(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>


  按鈕的超連結(1)

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


  按鈕的超連結(2)

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

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

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

     
Chp 5: jQuery函數庫語法
  下載講義 chp5講義      
  練習範例 5-1.本題多頁面架構 5-2.顯示文字 5-3.文字標籤設定背景顏色,字體大小 5-4.計算加法
           
  關鍵程式碼        
  (1).jQuery Function函數庫的公式:$('標籤名稱,或 #id').text("文字內容");
  (2).p 標籤,加上文字內容:$('p').text("大家好");
 

(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');

           
Chp 6:使用HTML5的 <Input type="..."> 各種小元件
  下載講義 chp6講義      
  練習範例 6-1.滑動軸設定身高體重 6-2.數字欄位+單選按鈕計算打折金額 6-3.各種常見html5表單元件 6-4.第三種判別核取按鈕,jquery最精簡的函數寫法
    6-5.新增,刪除,查詢產品資料 6-6.第二種下拉式選單:可以輸入文字,又可以有預設選項 6-7.將input日期,時間元件,轉換成日期時間變數,取出值 6-8.如何取出datalist option清單,選取的是哪一個
    6-9.如何取出select option清單,選取的是哪一個 6-10.複選選單的各種技巧    
           
  關鍵程式碼

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

     
   

type="value"

描述

button

定義可點擊的按鈕(大多與 JavaScript 使用來啟動腳本)

checkbox

定義核取方塊。

color

定義拾色器。

date

定義日期欄位(帶有 calendar 控制項)

datetime

定義日期欄位(帶有 calendar 和 time 控制項)

datetime-local

定義日期欄位(帶有 calendar 和 time 控制項)

month

定義日期欄位的月(帶有 calendar 控制項)

week

定義日期欄位的周(帶有 calendar 控制項)

time

定義日期欄位的時、分、秒(帶有 time 控制項)

email

定義用於 e-mail 位址的文本欄位

file

定義輸入欄位和 "流覽..." 按鈕,供檔上傳

hidden

定義隱藏輸入欄位

image

定義圖像作為提交按鈕

number

定義帶有 spinner 控制項的數位欄位

password

定義密碼欄位。欄位中的字元會被遮蔽。

radio

定義選項按鈕。

range

定義帶有 slider滑動軸 控制項的數位欄位。

reset

定義重新開機按鈕。重新開機按鈕會將所有表單字段重置為初始值。

search

定義用於搜索的文本欄位。

submit

定義提交按鈕。提交按鈕向伺服器發送資料。

tel

定義用於電話號碼的文本欄位。

text

默認。定義單行輸入欄位,使用者可在其中輸入文本。預設是 20 個字元。

url

定義用於 URL 的文本欄位。

唯一的例外:下拉式選單,沒有在上面,必須用早期的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",就會出現彈出樣式選單

  關鍵程式碼

另外一個不在上面的元件:如何產生滑動開關, Flip Toggle Switch(可以滑動切換開關)
<select id="select01" data-role="slider" onChange="show()">
<option value="0">是</option>
<option value="1">否</option>
</select>

  關鍵程式碼

如何判別哪個滑動開關,被點選了,程式寫法
if(select01.selectedIndex==0){
....
}else if(select01.selectedIndex==0){
.....
}

  textbox範例 <input type="text" id="txt1" requiered />
  color範例 <input type="color" id="mycolor" />
  滑動軸範例 <input type="range" id="myrange" min="1" max="100" value="1" />
  按鈕範例 <input type="button" id="btn1" value="按鈕" onclick="msg()" />
  數字範例 <input type="number" id="num1" min="1" max="10" value="1" />
  日期範例 <input type="date" id="my_date" />
  單選核取紐 <input type="radio" name="sex" id="male" chenked/> 男生<br />
<input type="radio" name="sex" id="female" />女生
  電話範例 <input type="tel" id="mytel" />
這個功能在電腦沒有效果,就跟text方塊一樣,沒有校對電話格式的功能,但在手機就會自動跳出數字鍵盤讓你輸入電話號碼
  播放音樂檔範例

在網頁播放音樂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;

           
  關鍵程式碼

HTML 5 <input> type 常用属性1 :required 此欄位一定要輸入資料,
<input type="text" id="mytext" required />

  關鍵程式碼

HTML 5 <input> type 常用属性2 :placeholder 起始提示文字,
<input type="text" id="mytext" placeholder="請輸入你的真實姓名" required />

  關鍵程式碼

HTML 5 <input> type 常用属性3 :data-inline="true" 縮小元件大小,
<input type="button" id="btn1" value="按鈕(1)" onclick="show01()" data-inline="true" />

           
  關鍵程式碼

另外一個不在上面的元件:如何產生滑動開關, Flip Toggle Switch(可以滑動切換開關)
<select id="select01" data-role="slider" onChange="show()">
<option value="0">是</option>
<option value="1">否</option>
</select>

  關鍵程式碼

如何判別哪個滑動開關,被點選了,程式寫法
if(select01.selectedIndex==0){
....
}else if(select01.selectedIndex==0){
.....
}

  關鍵程式碼

如何將很多個radio元件緊密集結合在一起,且水平排列
<fieldset data-role="controlgroup" data-type="horizontal">
...........radio選項按鈕
</fieldset>

  關鍵程式碼

如何將每個<input type元件前面加上文字標籤,方法;<label for="id名稱"></label>
<div data-role="fieldcontain">
<label for="yourname">姓名</label>
<input type="text" id ="yourname"/>
</div>

  關鍵程式碼

如何讀取某個id的內容值的兩種程式寫法(任選一種)
h = document.getElementById("height").value;
h = $('#height').val();

  關鍵程式碼

如何判別radio核選紐被點選了,兩種程式寫法(任選一種)
if (document.getElementById('discount9').checked == true)
{
alert("購物金額為:" + n*m*0.9);
}

if($('#discount9').is(':checked'))
{
alert("購物金額為:" + n*m*0.9);
}

           
Chp 7:可折疊式內容,手風琴式內容,ListView清單,toolbar02標題區與註腳區工具列
  下載圖片icon icon圖片1      
  練習範例 7-1.可折疊式內容 data-role='collapsible' 7-2.巢狀可折疊式內容 data-role='collapsible' 7-3.手風琴式內容(只會出現一個內容) data-role='collapsibleset'  
    7-4.ListView01手機最常用的ListView清單 7-5.ListView02 清單加上超連結 7-6.ListView03清單加上下標註解文字,右方註解文字 7-7.ListView04清單加上氣泡計數器,以及圖示
    7-8.ListView05清單加上搜尋功能,輸入任意關鍵字即可    
    7-9.toolbar01標題區與註腳區若要加上 工具列按鈕,標題按鈕,圖片 7-10.toolbar02標題區與註腳區工具列的三種定位方式:全螢幕固定模式,標準固定模式,同行模式 7-11.toolbar03標題區與註腳區工具列的三種定位方式:全螢幕固定模式,標準固定模式,同行模式 7-12.toolbar04固定不變的註腳工具列
           
  ListView
關鍵程式碼
<ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="查詢本店產品">
<li data-role="list-divider">女生服裝</li>
<li><a href="7-collapsible01.html" target="_blank">
<img src="icon80_80/image01.jpg" width="74" height="74" /> 牛仔褲
<p>直筒藍色牛仔褲</p>
<div class="ui-li-count">NT$ 350</div>
</a></li>
</ul>
  可折疊式內容
關鍵程式碼
<div data-role="collapsible">
<h1>牛仔褲</h1>
<p>直筒藍色牛仔褲</p>
<p>500元</p>
</div>
  手風琴內容,裡面若有巢狀內容,則無法顯示手風琴特色

<div data-role="collapsible-set">

<div data-role="collapsible">
<h1>牛仔褲</h1>
<p>直筒藍色牛仔褲</p>
<p>500元</p>
</div>

<div data-role="collapsible">
<h1>連身裙</h1>
<p>英倫風少女連身裙</p>
<p>1200元</p>
</div>
</div>

  標題區與註腳區加上 工具列按鈕 重點:標題區與註腳區若要加上 工具列按鈕的方法:使用超連結<a href=".." data-role="info">登入</a>
重點:標題區與註腳區若要加上 標題文字:有6種大小的標題<h1></h1>...........<h6></h6>
重點:標題區與註腳區若要加上 圖片:,<img src="a.gif" />
<div data-role="header">
<a href="4-button01.html" target="_blank" data-icon="star">登入</a>
<h1><img alt="" src="icon80_80/logo.png" />工具列</h1>
<a href="4-button02.html" target="_blank" data-icon="gear">設定</a>
</div>
  header, footer列定位有3種作法

方法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>


           
Chp 8-1:把jQuery或RWD網頁轉成APK,方法一:上傳到phoneGap Bulid轉成Apk
  下載講義 chp8講義      
  什麼是phoneGap 01.Adobe PhoneGap 能夠讓人用HTML5網頁技術來建立一個APP
02.包括:jQuery Mobile程式,RWD網頁,Bootsctrap網頁
  註冊並登入phoneGap Bulid雲端網站 01.到https://build.phonegap.com/網站
(需要有adobe ID帳號) 02.先sign in,然後sign in with an Adobe ID,註冊adobe ID帳號
03.在你的RWD網頁目錄下,放置confing.xml,設定檔:設定你的app的名稱,作者姓名,產品描述,icon檔案名稱
並且在網頁目錄下放置icon檔:icon.png
04.注意:所有圖片副檔名都必須用小寫字母
05.然後在網頁主目錄內,壓縮成檔名.zip(例如:company.zip)
注意:不可在網頁主目錄外面壓縮
06.然後在phonegape,選擇private,點按upload a zip file,選擇compan.zip上傳
07.建置(build)成android的apk檔案
08.下載apk安裝,或是掃描QR code直接按轉
           
Chp 8-2:把jQuery或RWD網頁轉成APK,方法二:經由GitHub+phoneGap Bulid 轉成Apk
  下載講義 chp8講義      
  什麼是GitHub 01.Github 是目前全球最大的開源代碼open-source平台
02.GitHub是放程式碼的地方,在這邊,你可以跟其它厲害的開發者們交朋友,你可以幫忙貢獻其它人的專案,其它人也可以回饋到你的專案,建立良性循環
03.GitHub已經成為全球最流行的開源項目託管平台,目前託管在Github上的項目數量已經達到了1000萬
04.GitHub是全球最大的開源軟件開發與管理社區,包括Google、Facebook等眾多技術巨頭在內都在這裡持續經營。在開源成為業界主流的情況下,GitHub上的語言流行度在一定程度上也可以反映出業界的趨勢。
  什麼是phoneGap 01.Adobe PhoneGap 能夠讓人用HTML5網頁技術來建立一個APP
02.包括:jQuery Mobile程式,RWD網頁,Bootsctrap網頁
  註冊並登入GitHub 01.註冊帳號並登入GitHub
02.到你的email回驗證信
03.回到GitHub開啟你的專案知識倉庫(repository)
Repository name:test01
Initialize this repository with a README:打勾
Add a License:MIT License
04.上傳你的專案檔案:uploads
05.上傳設定檔:confing.xml
06.上傳手機桌面icon檔:icon.png
  phoneGap Bulid雲端網站 01.到https://build.phonegap.com/網站
02.先sign in,然後sign in with an Adobe ID,註冊adobe ID帳號
03.在open source區輸入你的GitHub專案網址(例如:https://github.com/haoke/test01)
04.建置成android的apk檔案
05.下載apk安裝,或是掃描QR code直接按轉
           
Chp 9:youtube播放,任意改變佈景主題theme,QRcode二維條碼
  練習範例 9-youtube01 9-youtube02 9-youtube03  
  關鍵程式碼 9-youtube01 9-youtube02 9-youtube03  
           
  佈景主題theme 系統預設的theme只有兩種theme布景a,b
<div data-role="page" data-theme="a">

</div>
手動新增佈景主題的網站:ThemeRoller 使用ThemeRoller教學影片(英文)  
  下載佈景壓縮檔 下載佈景壓縮檔      
  練習範例 9-theme04.html(下載這個當作練習範例) 9-theme05.html(使用data-theme="d") 9-theme06.html(使用data-theme="e")  
  任意改變theme配色步驟

1.先到themeRoller網站
2.新增theme d, theme e
3.利用Adobe kuler swatches(search color/或title:輸入yellow)工具找專業配色
4.Download theme zip file: theme-yellow-blue.zip
5.加上css的連結檔案:
<link rel="stylesheet" href="themes/theme-yellow-blue.css">
<link rel="stylesheet" href="themes/theme-yellow-blue.min.css">

6.若要整頁套用布景配色:
<div data-role="page" data-fullscreen="true" data-theme="e">
若要個別元件套用,則在個別元件指定
<a href="4-button01.html" data-theme="e" data-icon="star">登入</a>

  下載主題樣板1 Flat樣板demo Flat樣板下載 Flat樣板本地端簡易下載  
 
使用Flat樣板

<head>
<link rel="stylesheet" type="text/css" href="flat/jquery.mobile.flatui.css" />
<link rel="stylesheet" type="text/css" href="flat/jquery.mobile.flatui.min.css" />
</head>
<body>
<div data-role="page" id="home" data-theme="d">

a,b,c,d,e,f,g,h

  下載主題樣板2 nativeDroid 樣板demo nativeDroid 樣板下載    
  下載主題樣板3 Bootstrap 樣板demo Bootstrap 樣板下載    
  下載主題樣板4 Squere-UI樣板demo Squere-UI 樣板下載    
           
  QR code條碼產生器 QR code條碼產生器(1) QR code條碼產生器(2) Google QR code條碼產生器(3) Google QR code條碼產生器(4)
  解譯條碼的內容 方法1:使用手機的QR code掃描器 方法2:線上QR code解碼器ZXing    
  中文要轉換為 UTF-8 編碼

中文字轉成編碼部分,有時可以直接轉(例如簡訊條碼),但有時(例如:名片通訊錄)必須先利用 url encode 轉換為 UTF-8 編碼。

(線上url encode 轉換工具)

 
Google Chart API關鍵程式碼

使用 Google Chart API 來產生一張QR碼圖片

Google Chart API使用網址URL快速線上QR Code 二維條碼製作

範例一:編碼資料為文字型態。
http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=%E5%A4%A7%E6%98%8E



修改網址後面的相關參數
http://chart.apis.google.com/chart?cht=qr&chs=大小x大小&chl=編碼資料
http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=大家好

cht=qr(代表是QR Code二維條碼)
chs=200x200(圖片大小)
chl=大明(編碼資料)

以HTML語法顯示條碼圖片的語法


<body>
<img src="http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=%E5%A4%A7%E6%98%8E" />
</body>

 

 
顯示英文網址的條碼

語法:http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=網址

範例: http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=http://www.tsu.edu.tw

結果:

 
顯示中文字的條碼

*語法: http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=中文字

*注意: 有些QRcode掃描器,中文字需要 UTF8 的 URL 編碼文字,例如空格就要寫成 %20。因此若沒經過編碼的話,中文可能會無法順利的產生。

所以,我們可用線上url encode 轉換工具 , 或是寫javascript 的 encodeURIComponent() 函式來幫我們做編碼的動作

*範例: http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=大家好

*結果:

 
傳到手機寫簡訊的條碼

*語法:http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=SMSTO:手機號碼:簡訊

*範例: http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=SMSTO:0937123456:生日快樂

*結果:

 
傳到手機顯示地圖位置的條碼

*語法:http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=geo:緯度,  經度

*範例: http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=geo:25.033408, 121.564099

*結果:

 
傳到手機寄email的條碼

*語法: http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=MATMSG:TO:電子郵件;SUB:主旨;BODY:內容;;

*範例: http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=MATMSG:TO:abca@tsu.edu.tw;SUB:你好;BODY:大家好;

*結果:

 
傳到手機打電話的條碼

*語法: http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=TEL:電話號碼

*範例: http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=TEL:0930123456

*結果:

 
傳到手機新增名片到通訊錄的條碼

*語法: http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=

BEGIN:VCARD  VERSION:3.0  FN:姓 名  N:姓;名;;;  ORG:公司名稱;部門名稱  TITLE:職稱  TEL;TYPE=CELL,VOICE:手機電話  
TEL;TYPE=WORK,VOICE:公司電話  TEL;TYPE=FAX,VOICE:傳真號碼  ADR;TYPE=WORK:;;公司地址;;;;  ADR;TYPE=HOME:;;住家地址;;;;  
EMAIL;TYPE=HOME,INTERNET:個人郵件  EMAIL;TYPE=WORK,INTERNET:公司郵件  URL:網址  GEO:經度;緯度  NOTE:備註  REV:日期時間20150324T065419Z  END:VCARD

簡易名片範例:

BEGIN:VCARD
VERSION:3.0
N:張大山
ORG:大山資訊
TEL;TYPE=WORK,VOICE:02-51723900
TEL;TYPE=CELL,VOICE:0911-777-111
TEL;TYPE=FAX,VOICE:02-57143662
EMAIL:john@a1.com.tw
URL:http://www.a1.com.tw
ADR:台南市北門路一段42號5樓
NOTE:台鐵台南站前門出口往右走,步行步行距離大約五分鐘
END:VCARD

詳細名片範例:
BEGIN:VCARD
VERSION:3.0
FN:李 小名
N:李;小名;;;
ORG:小名科技公司;研發部
TITLE:工程師
TEL;TYPE=CELL,VOICE:0922123456
TEL;TYPE=WORK,VOICE:06-5711234
TEL;TYPE=FAX,VOICE:06-5711235
ADR;TYPE=WORK:;;台南市中華路1號;;;;
ADR;TYPE=HOME:;;台南市中華路2號;;;;
EMAIL;TYPE=HOME,INTERNET:a1@yahoo.com.tw
EMAIL;TYPE=WORK,INTERNET:a2@yahoo.com.tw
URL:http://www.a1.com.tw
GEO:21.564099;25.033408
NOTE:生日在6月5日
REV:20150324T065419Z
END:VCARD

*範例: http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=...

BEGIN:VCARD  VERSION:3.0  FN:李 小名  N:李;小名;;;  ORG:小名科技公司;研發部  TITLE:工程師  
TEL;TYPE=CELL,VOICE:0922123456  TEL;TYPE=WORK,VOICE:06-5711234  TEL;TYPE=FAX,VOICE:06-5711235 
ADR;TYPE=WORK:;;台南市中華路1號;;;;  ADR;TYPE=HOME:;;台南市中華路2號;;;;  EMAIL;TYPE=HOME,INTERNET:a1@yahoo.com.tw 
EMAIL;TYPE=WORK,INTERNET:a2@yahoo.com.tw  URL:http://www.a1.com.tw  GEO:21.564099;25.033408  NOTE:生日在6月5日  
REV:20150324T065419Z  END:VCARD

*結果: 詳細名片(注意:中文字及換行符號要先轉成utf-8編碼 線上url encode 轉換工具)

 

簡易名片(注意:中文字及換行符號要先轉成utf-8編碼 線上url encode 轉換工具)

           
           
Chp 10:觸控螢幕的程式寫法
  下載講義 chp10講義      
  下載圖片i 圖片      
  練習範例 10-1.觸控螢幕,或滑鼠拖曳,向左或向右滑動頁面 10-2.觸控螢幕,或滑鼠拖曳,向左或向右滑動頁面的圖片:方法1:多頁面 10-3.觸控螢幕,或滑鼠拖曳,向左或向右滑動圖片:方法2 10-4.觸控螢幕,或滑鼠拖曳,向左或向右滑動頁面的圖片:方法3:單一頁面
    10-5.觸控螢幕,或滑鼠拖曳,向左或向右滑動頁面的圖片:方法3:單一頁面+絕對座標圖片 10-6.使用左右按鈕,向左或向右滑動圖片    
  關鍵程式碼 10-1.觸控螢幕,或滑鼠拖曳,向左或向右滑動頁面 10-2.觸控螢幕,或滑鼠拖曳,向左或向右滑動頁面的圖片:方法1:多頁面 10-3.觸控螢幕,或滑鼠拖曳,向左或向右滑動圖片:方法2 10-4.觸控螢幕,或滑鼠拖曳,向左或向右滑動頁面的圖片:方法3:單一頁面
    10-5.觸控螢幕,或滑鼠拖曳,向左或向右滑動頁面的圖片:方法3:單一頁面+絕對座標圖片 10-6.使用左右按鈕,向左或向右滑動圖片    
           
Chp 11:jQuery結合Google Map地圖應用程式的寫法
  下載講義 chp11講義      
  下載地標圖片icon 地標圖片1 地標圖片2    
  練習範例 11-1.載入 Google Map 11-2.在 Google Map建立地標 11-3.在 Google Map建立多個地標 11-4.建立景點清單頁面,連結 Google Map
    11-5.兩個地點之間的路線規劃-陣列變數寫法 11-6.兩個地點之間的路線規劃-物件變數object寫法 11-7.由自己GPS位置到目的地(必須在手機實機測試) 11-8.多按紐顯示地圖
    11-9.多按紐顯示地圖      
  關鍵程式碼 11-1.載入 Google Map 11-2.在 Google Map建立地標 11-4.建立景點清單頁面,連結 Google Map 11-5.兩個地點之間的路線規劃-陣列變數寫法
    11-7.由自己GPS位置到目的地(必須在手機實機測試) 11-8.多按紐顯示地圖 11-9.多按紐顯示地圖  
           
Chp 12:HTML5 表單File API元件:client端客戶端電腦,開啟檔案元件(filesystems, openfilediaolog),讀取純文字檔,圖檔
  練習範例 1.讀取檔案檔名,參數 2.讀文字檔到畫面 3.讀圖片檔到畫面 4.修改文字內容再存檔
  下載 純文字檔      
  關鍵程式碼

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

  開啟檔案元件 <input id="file01" type="file" onchange="show01(this)"/>
  取得檔案參數 filename = thisfileinfo.files[0].name;
filesize= thisfileinfo.files[0].size;
filetype= thisfileinfo.files[0].type;
注意:可以複選
  讀文字檔內容 function show02(fileinfo) {
file = fileinfo.files[0];
var fReader = new FileReader();
fReader.onload = function (event) {
document.getElementById('顯示文字標籤').value = event.target.result;
};
fReader.readAsText(file);
}
  讀圖片檔 var file;
var fileReader;
function show03(fileinfo) {
file = fileinfo.files[0];
if (file) {
fileReader = new FileReader();
fileReader.onload = openfile;
readFileContent() ;
}
}
function openfile(event) {
document.getElementById('img01').src = event.target.result;
}
function readFileContent() {
fileReader.readAsDataURL(file);
}
  儲存純文字檔 function show04() {
var data = document.getElementById('txt01').value;
window.location.href = "data:application/x-download;charset=utf-8," + encodeURIComponent(data)}
           
Chp 13:讀取xml資料檔(有兩種狀況:讀取client端,server端xml)(須用chrome瀏覽器才能讀取)
  xml範例 person.xml product.xml personnel.xml  
  練習範例 **1.讀取client端xml檔 **2.讀取server端xml檔 3.讀client端xml檔,以表格形式顯示資料 4.讀取client端xml檔,以上一筆,下一筆顯示資料
    **5.讀server端xml檔,以表格形式顯示資料 **6.讀server端xml檔,以上一筆,下一筆顯示資料 7.將讀入的xml檔轉成object物件變數來操作
  下載 下載xml檔      
 

關鍵程式碼

client端讀取xml的方法

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

<input id="file01" type="file" onchange="show02(this)"/>

(B).取得檔案參數

filename = thisfileinfo.files[0].name;
filesize= thisfileinfo.files[0].size;
filetype= thisfileinfo.files[0].type;

(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

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

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

man=xmlDoc.getElementsByTagName("student");
*第3位學生的電話:man[2].getElementsByTagName("tel")[0].childNodes[0].nodeValue
*印出所有學生student的姓名:
for (i=0;i<man.length;i++) {
document.write(man[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
}
 

關鍵程式碼

server端讀取xml的方法

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

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","product.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

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的結構資料

man=xmlDoc.getElementsByTagName("student");
*第3位學生的電話:man[2].getElementsByTagName("tel")[0].childNodes[0].nodeValue
*印出所有學生student的姓名:
for (i=0;i<man.length;i++) {
document.write(man[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
}

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);
} }

           
Chp 14:讀取json資料檔(有兩種狀況:讀取client端,server端json)(須用chrome瀏覽器才能讀取)
  json範例 book.json school.json personnel.json  
    zipcode01.json zipcode02.json    
  練習範例 1.讀取client端json檔 **2.讀取server端json檔 3.讀client端json檔,以表格形式顯示資料 4.讀取client端json檔,以上一筆,下一筆顯示資料
    **5.讀server端json檔,以表格形式顯示資料 **6.讀server端json檔,以上一筆,下一筆顯示資料 7.將讀入的json檔轉成object物件變數來操作 8.讀取server端json資料,產生ListView清單
    **8.讀server端json檔,在單層下拉選單 **9.讀server端json檔,在雙層下拉選單 **10.讀server端json檔,在雙層即時ul-li選單
  下載 下載json檔      
  關鍵程式碼 client端讀取json的方法

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物件

(a).觀念:將字串讀進到jsonDoc,jsonDoc本身就是一個物件變數陣列,操作法就更傳統javascript的物件變數陣列一樣
(b).第1本書的書名: jsonDoc[0].title;
第2本書的書名: jsonDoc[1].title
第3本書的書名: jsonDoc[2].title
  關鍵程式碼 server端讀取json的方法

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字串互相轉換的公式

(1).將字串轉換成 json 物件
var jsonDoc = JSON.parse(jsonstring);
(2).將json 物件轉換成字串
txt01.value = JSON.stringify(jsonDoc);

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

           
Chp 15:讀取excel資料檔(有2種狀況:讀取client端,跨網域主機excel)(須用I.E.瀏覽器,才能顯示)
  excel範例 employee.xlsx員工資料表      
  練習範例 1.讀取client端excel檔 2.以File API讀client端excel檔(失敗) 3.讀取server端excel檔,表格顯示 4.讀取跨網域主機excel,以上一筆,下一筆顯示資料
  下載 下載excel檔      
  關鍵程式碼

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); }

           
Chp 16:讀取Access資料檔(只有1種狀況:讀取client端Access)(須用I.E.瀏覽器,才能顯示)
  Access範例 Northwind.accdb
員工資料表
     
  練習範例 1.開啟client端Access2003*.mdb 2.開啟clent端Access 2007*.accdb,表格顯示 3.以File API開啟clent端*.accdb) 4.server端javascript網頁,讀取client端*.accdb
    5.server端javascript網頁,無法讀取server端路徑資料庫/跨網域Access資料庫 6.尋找員工資料表的姓名欄位關鍵字 7.尋找員工資料表的姓名欄位 8.尋找員工資料表的姓名,置入select選單
    9.尋找個別員工,顯示全部,新增,修改,刪除(程式碼不全)      
  下載 下載Access檔      
  關鍵程式碼

 

           
Chp 17:不同資料之間的彼此互轉(Access, Excel, xml, json)(注意:1-4題須用I.E.,5-8題需用chrome)
  練習範例        
  須用I.E.瀏覽 1.Access轉成xml 2.Access轉成json 3.Excel轉成xml 4.Excel轉成json
  須用chrome瀏覽 5.xml轉成json 6.xml轉成Excel(中間的轉繼檔,可以用@download來自動存檔) 7.json轉成xml 8.json轉成Excel
  關鍵程式碼
           
Chp 18:讀取跨網域主機的資料(I)初級篇(xml, json, Excel)
方法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 (但方法3須用chrome瀏覽)
方法4:必須先在IIS設定可以允許跨網域存取,,然後再使用 new XMLHttpRequest()來.open(跨網域資料庫,json,xml,aspx(讀取access,excel)

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

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

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

  json範例 personnel.json    
  練習範例 **1.方法1:讀取跨網域資料的基本原理 **2.方法1:讀取跨網域主機的json資料 3.方法1:讀取跨網域主機的xml資料 4.方法2:讀取跨網域主機的Excel資料
  須用chrome瀏覽 5.方法3:讀取跨網域主機的json資料 **5.方法3:讀取跨網域主機的xml資料    
  須用chrome瀏覽 **6.方法3:讀取跨網域主機的aspx回傳json資料      
    7.方法4:設定IIS,以XMLHttpRequest讀取跨網域xml 8.方法4:設定IIS,以XMLHttpRequest讀取跨網域json    
  第1題關鍵程式碼

方法1:最簡單方法:使用 <script></script>

注意: <script></script必須放在最後body裡面一行

(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>

  第2題關鍵程式碼

方法1:最簡單方法:使用 <script></script>

注意: <script></script必須放在最後body裡面一行
(1).目的:要讀取跨網域主機的資料: http://acupun.site/lecture/jquery_phoneGap/18-CrossDomain02-json.js
(2). 將字串轉成jsonDoc物件變數的作法,有兩種方法皆可

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

(2). 改
<body>
<div id="id01"></div>
<script type="text/javascript" src="http://acupun.site/lecture/jquery_phoneGap/18-CrossDomain02-json.js">
</script>
</body>
(3).再改
<head>
<script type="text/javascript">
//將字串轉成jsonDoc
var jsonDoc = JSON.parse(txt);
//將jsonDoc輸出成表格資料
str ="<table border=1><tr><td>編號</td><td>姓名</td><td>英文名</td><td>住址</td><td>電話</td></tr>";


.....
....
str +="</table>";
document.getElementById("id01").innerHTML = str;

}
</script>
</head>

**注意:IIS不認識json檔案格式,要在MIME去新增,(副檔名:.json,mimeType=application/json)
  第5題關鍵程式碼

方法3:使用ajax讀取跨網域資料(json,xml,aspx),關鍵在$.ajax

*不使用aspx
*不使用<script></script>
*用按鈕來驅動
(1).注意:因為使用到jQuery 指令$.ajax,所以要用手機網頁格式jQuery mobile來寫
(2).目的:要讀取跨網域主機的資料: http://acupun.site/lecture/jquery_phoneGap/18-CrossDomain02-json.js
(2). 將字串轉成jsonDoc物件變數的作法,有兩種方法皆可

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

(2). 按鈕
<input type="button" id="b1" value="ajax讀取跨網域資料" onclick="ajaxCall('跨網域資料.js')" data-inline="true" />
(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) {
//將字串轉成jsonDoc
var jsonDoc = JSON.parse(txt);
//將jsonDoc輸出成表格資料
str ="<table border=1><tr><td>編號</td><td>姓名</td><td>英文名</td><td>住址</td><td>電話</td></tr>";


.....
....

str +="</table>";
document.getElementById("id01").innerHTML = str;

}

**注意:IIS不認識json檔案格式,要在MIME去新增,(副檔名:.json,mimeType=application/json)
  第6題關鍵程式碼

方法3:使用ajax讀取跨網域資料(json,xml,aspx),關鍵在$.ajax


*使用aspx來產生json 資料庫
(1).注意:因為使用到jQuery 指令$.ajax,所以要用手機網頁格式jQuery mobile來寫
(2).目的:要讀取跨網域主機的aspx(vb.net), 或PHP所產生的json格式檔案
(3). 將字串轉成jsonDoc物件變數的作法,有兩種方法皆可

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

(4). 按鈕
<input type="button" id="b1" value="ajax讀取跨網域資料" onclick="ajaxCall('檔名.aspx')" data-inline="true" />
(5).指令$.ajax 非同步讀取跨網域資料
function ajaxCall(target){
//發出 ajax call
var data = $.ajax({
type: "get",
async: true,
url: target,
dataType: "jsonp",
jsonpCallback:"callBackdata",
});
}


(4).讀取跨網域資料後,呼叫callBackdata()來顯示表格
function callBackdata(txt) {
//將字串轉成jsonDoc
var jsonDoc = JSON.parse(txt);
//將jsonDoc輸出成表格資料
str ="<table border=1><tr><td>編號</td><td>姓名</td><td>英文名</td><td>住址</td><td>電話</td></tr>";


.....
....

str +="</table>";
document.getElementById("id01").innerHTML = str;

}

**注意:IIS不認識json檔案格式,要在MIME去新增,(副檔名:.json,mimeType=application/json)
  vb.net關鍵程式碼

方法3:

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

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


  C#.net關鍵程式碼

方法3:

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

<%@ 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#:
\"

           
Chp 19:ajax非同步連線技術,讀取同一網域server端的資料(xml, json)(注意:若要讀取josn物件的,I.E無法讀取,須用chrome,例如第2,6題)
  練習範例 1.ajax非同步連線server端的xml 2.ajax非同步連線server端的json 3.ajax非同步連線server端的aspx
    **3.ajax非同步連線server端的aspx **3.ajax非同步連線server端的PHP    
    4.ajaxgold函數庫非同步連線aspx 5.ajaxgold函數庫非同步連線xml 6.ajaxgold函數庫非同步連線json 7.ajaxgold函數庫非同步連線aspx,查詢
           
  第1題關鍵程式碼

方法3:使用ajax讀取跨網域資料(json,xml,aspx),關鍵在$.ajax


(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);
//########################################

}


  第3題關鍵程式碼

方法3:使用ajax讀取跨網域資料(json,xml,aspx),關鍵在$.ajax


*使用aspx來產生json 資料庫

(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

  vb.net關鍵程式碼

方法3:

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

<%@ 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."'))"

           
Chp 20:ajax非同步連線技術,讀取同一網域server端的Access,excel資料庫(此法必須透過asp.net讀取)(需用chrome瀏覽器才能讀取)
  練習範例 1.ajax連線同一網域server端的Access      
           
  關鍵程式碼

 

           

讀取跨網域主機的資料(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.瀏覽器

  Access下載 Northwind.accdb
員工資料表
personnel.json 跨網域jsonp資料  
  MySQL下載 員工資料表(csv)      
  須用chrome瀏覽器 1.方法3:ajax連線跨網域aspx讀取Access **1.方法3:ajax連線跨網域aspx讀取Access **1.方法3:ajax連線跨網域PHP讀取MySQL  
  須用chrome瀏覽器 2.方法3:ajax連線跨網域excel 7.方法3:ajax連線跨網域excel在$.ajax指定callBackdata函數,並以ajax顯示兩層下拉選單 8.方法3:ajax連線跨網域excel在$.ajax指定callBackdata函數,並以ajax及時顯示3層div-ul選單  
  須用chrome瀏覽器 3.方法4:設定IIS,以XMLHttpRequest讀取跨網域Access(透過aspx) 4.方法4:設定IIS,以XMLHttpRequest讀取跨網域Excel(透過aspx) 5.方法4:設定IIS,以XMLHttpRequest讀取跨網域Excel(以ajax及時顯示兩層下拉選單) 6.方法4:設定IIS,以XMLHttpRequest讀取跨網域Excel(以ajax及時顯示3層div-ul選單)
  須用chrome瀏覽器 **9.方法3:ajax連線跨網域PHP新增一筆記錄到MySQL **10.方法3:ajax連線跨網域PHP刪除一筆記錄到MySQL **11.方法3:ajax連線跨網域PHP修改一筆記錄到MySQL  
           
  讀存取刪除資料庫關鍵程式碼 1.aspx(vb.net)讀取Access關鍵程式碼 2.PHP讀取MySql關鍵程式碼    
           
  第1題關鍵程式碼

方法3:使用ajax讀取跨網域資料(json,xml,aspx),關鍵在$.ajax


*使用aspx來產生json 資料庫

(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["員工編號"]

  第9題關鍵程式碼

方法3:ajax連線跨網域PHP新增一筆記錄到MySQL

(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)

  第10題關鍵程式碼

方法3:ajax連線跨網域PHP刪除一筆記錄到MySQL

(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;

}

?>



  第11題關鍵程式碼

方法3:ajax連線跨網域PHP修改一筆記錄到MySQL

(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;

}

?>

 




   

 

           
Chp 18:jQuery讀取跨網域主機裡的資料:json
  練習範例 1.瀏覽school.json 2.讀取json簡單程式 3.讀取json資料庫來產生ListView清單 4.讀取json資料庫來產生ListView清單
  工具 解讀json結構 把 RSS 轉換成 JSON 格式 3.讀取json資料庫來產生ListView清單 4.讀取json資料庫來產生ListView清單
  關鍵程式碼

第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來測試

  關鍵程式碼  
           
           
           
Chp 31:使用cordova技術來啟用硬體端元件(相機,錄音,羅盤),(使用VS 2015 community來整合cordova函數)
  安裝VS2015 community(免費) 步驟1.安裝java SE      
    步驟2.安裝VS2015 community(硬碟要40GB以上) 安裝重點1:要用自訂安裝(不可用預設安裝) 安裝重點2:要打勾:(1).程式語言,(2).跨平台行動開發 安裝重點3:安裝完畢後,要在檔案->帳戶設定,並登入,否則只有30天試用期
  cordova專案的各資料夾

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

  如何加入jQueryMobile模組

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模組範本檔案

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

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)編輯器

  cordova外掛1:顯示安裝後的icon

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

  cordova外掛2:顯示起始圖片

步驟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設定各種尺寸的圖片

  cordova外掛3:顯示彈出訊息方塊

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個參數分別是:訊息內容,回應函數,標題,按鈕名稱,預設顯示文字

**若有多個按鈕的寫法:{"確定","取消"}

  cordova外掛4:快速顯示Pdf,網頁,全螢幕圖片

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');

  cordova外掛5:啟動相機來拍照

步驟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=""/>

  cordova外掛6:啟動麥克風來錄音

步驟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('執行產生錯誤');
}

  cordova外掛7:外掛出現錯誤

錯誤訊息: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>
....
...

  單頁面巡覽下拉式表單
jQuery Mobile Menu Navigations:
缺點:只能放在單一頁面
3Dmenu下載 blackmenu下載 bluegreenmenu下載 whitemenu下載
  巡覽下拉式表單
demo
3Dmenu demo blackmenu demo bluegreenmenu demo whitemenu demo
           
  可多頁面巡覽左右滑動表單
jQuery Mobile Menu Navigations:
silde menu可左右拉收
tegansnyderJ Slidemenu下載 Zepto深藍menu下載 jvmobile白色menu下載 frebsite天空藍menu下載(可用的,jquery可相容html5只是字體稍模糊,無法連接到multipage)
  巡覽左右滑動式表單
demo
tegansnyderJ Slidemenu demo Zepto深藍menu demo jvmobile白色menu demo frebsite天空藍menu demo(可用的,jquery可相容html5只是字體稍模糊,無法連接到multipage)
           
  可多頁面巡覽左右滑動式表單
jQuery Mobile Menu Navigations:
silde menu可左右拉收
joanclaret綠白menu 下載 pixelademo綠白menu下載 jsfiddle menu 下載 slicknav灰色menu下載(但只能做單頁面的書籤連結,無法做多頁面)
  巡覽左右滑動式表單
demo
joanclaret綠白menu demo pixelademo綠白menu demo jsfiddle menu demo slicknav灰色menu (但只能做單頁面的書籤連結,無法做多頁面)demo
           
  *可多頁面巡覽上下拉式表單
jQuery Mobile Menu Navigations:
silde menu可左右拉收
meanthemes黑色menu(能做多頁面)下載(可用,但無法自動彈回,且每個multipage都有menu,無法不顯示)      
  巡覽上下拉式表單
demo
meanthemes黑色menu(能做多頁面)demo(可用,但無法自動彈回,且每個multipage都有menu,無法不顯示)      
           
  **巡覽表單
jQuery Mobile Menu Navigations:
OK可用,只是無法自動彈回
jQuery-Ultimate-Burger-Menu(上下左右menu9種,只是無法自動彈回) jQuery Mobile Toggle Menu With CSS3 Media Queries - Biggie(能做多頁面)下載(寬銀幕可展開menu,只是無法自動彈回)    
  巡覽上下拉式表單
demo
jQuery-Ultimate-Burger-Menu(上下左右menu9種,只是無法自動彈回)demo jQuery Mobile Toggle Menu With CSS3 Media Queries - Biggie(寬銀幕可展開menu,只是無法自動彈回)demo    
           
 

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!';
}

?>

           
           
           
           
Chp 32:使用Bootstrap 當作CSS規格框架(結合免費web編輯工具brackets)
  下載brackets(免費) 下載安裝英文版brackets 如何修改英文版brackets變成中文版    
  下載Bootstrap(免費) 下載安裝英文版Bootstrap 中文版Bootstrap教學    
  下載Bootstrap3.37打包檔案 下載Bootstrap3.37打包檔案      
  02.簡單樣本程式    
  參考範本 簡單樣本程式      
  實作結果 簡單樣本範例      
  參考教學 碼雲:小馬bootstrap教學    
  建立第一個網頁

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>

  03.bootstrap頁面配置,網格      
  參考範本 頁面配置與12列網格CDN樣板程式 頁面配置與12列網格local樣板程式    
  實作結果 頁面配置與12列網格範例      
  官網教學 bootstrap的四種裝置網格grid bootstrap的一列row,共12欄col-sm-12  
  頁面配置,網格

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.頁尾:
<div id="footer" class="container" style="background-color:green;color:white;">Footer</div>
如果兩邊不留白,就取消class="container"

  04.Bootstrap 響應式網頁設計(Responsive Web Design簡稱RWD)      
  參考範本 RWD樣板CDN程式 RWD樣板local程式    
  實作結果 RWD樣板範例      
  官網教學 bootstrap的四種裝置網格CSS(英文版) bootstrap的四種裝置網格grid(英文版) bootstrap的四種裝置網格CSS(中文版)
  頁面配置,網格

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

Extra small devicesPhones (<768px) Small devicesTablets (≥768px) Medium devicesDesktops (≥992px) Large devicesDesktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto)小螢幕(手機) 750px平板 970px中型桌機螢幕 1170px大型桌機螢幕
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12

 

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>

  05.Bootstrap表格樣式        
  參考範本 表格樣式CDN樣板程式 表格樣式local樣板程式    
  實作結果 表格樣式範例    
  官網教學 bootstrap的表格教學(英文版) bootstrap的表格教學(中文版)  
  頁面配置,網格

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>

           
           
           
           
          employee.xlsx