網頁

2015年8月3日 星期一

EZoApp 範例 - 設計小吃店訂購單

一、利用 Google製作表單
方法:雲端硬碟 / 新增 /更多 /google 表單

表單說明 : 阿旺小吃店訂單
題目1 : 芋圓
題型:單行文字
題目2 : 鬆餅
題型:單行文字
題目3 : 醉蝦
題型:單行文字
題目4 : 總額
題型:單行文字
題目5 : 訂餐人電話
題型:單行文字
Google表單參考圖:



二、以 EZoApp設計page

1 page , id :  home
插入Header元件,text : 阿旺小吃店
2 button元件
左邊 buttontext : Google 表單 (查看Google 表單回應)theme:b(反白) , href: sheet (第3個page 的 id)
右邊 buttontext : 檢視訂單,theme:b(反白), href: orderpage (第2個page 的 id)


插入 grid 元件, columns :2 (grid 有二欄)
Grid 第一列
左欄
右欄
插入 text-input 元件
Fieldcontain, label : 每份50
text-input, id : taro_ball, type:number(type
有三種值,text:文字;number:數字,可按i增減數字;password:密碼,數字以 . 顯示)

Grid 第二列
左欄
右欄
插入 text-input 元件
Fieldcontain, label : 每份100
text-input, id : waffle, type:number

Grid 第三列
左欄
插入 icon元件,text : 醉蝦,
background-image: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKTJgzxszjN-ysow4W0-_W28A-BpWWPjNM1jpzoeb622ckuNPq7qU_ZHt5FZBuA-2bjrU08M3DBb-jhlz5nXpKFQfxKJvV_MPx3hgR7234jBJbjIJA293M5S6Z1ECCBtEiVXw8nmo8fpw/s300-Ic42/shrimp.jpg
右欄
插入 text-input 元件
Fieldcontain, label : 每份150
text-input, id : shrimp, type:number
插入 grid 元件, columns :1 (grid 有一欄)
插入 text-input 元件
Fieldcontain, label : 訂餐人電話
text-input, id : phone, type:text
1 page設計參考圖:



第二個pageid: orderpage
插入 header元件,text: 阿旺小吃店
插入 grid元件, columns :2

左欄
插入 gk-text元件 text: 訂餐人電話, style : font-size:14pt
插入 gk-text元件 text: 芋圓, style : font-size:14pt
插入 gk-text元件 text: 鬆餅, style : font-size:14pt
插入 gk-text元件 text: 醉蝦, style : font-size:14pt
插入 gk-text元件 text: 總計:, style : font-size:14pt

右欄
插入 gk-text元件 id :order_phone, text: text, style : font-size:14pt
插入 gk-text元件 id :order_ taro_ball, text: text, style : font-size:14pt
插入 gk-text元件 id :order_waffle, text: text, style : font-size:14pt
插入 gk-text元件 id :order_shrimp, text: text, style : font-size:14pt
插入 gk-text元件 id :order_total, text: text, style : font-size:14pt

html標籤內第23列輸入 :
<a href>送給 Google表單</a>

2 page設計參考圖:


第三個pageid: sheet
插入 google-sheets-table元件
Key: 16FyE-ZFs0czL4-A2bb4oiNiYWs6tlZ0WZRLMIJuLLZ4
Gid: 1583175438
Google 表單 /查看回應
網址列:https://docs.google.com/spreadsheets/d/16FyE-ZFs0czL4-A2bb4oiNiYWs6tlZ0WZRLMIJuLLZ4/edit#gid=1583175438
Keyd 後面的紅色字,gid gid=後面的紅色字


插入 footer元件,text:留空;插入 icon元件,href:homeicon:backiconPOS:notext

3 page設計參考圖:


JS標籤輸入 :

var js_phone, js_taro_ball, js_waffle, js_shrimp, js_total;

var url_0 = 'https://docs.google.com/forms/d/e/1mzNjz_goObN9Nptq-cu9zQZd1bZ8GAeFmP93YvMP7Sg/formResponse?';

var para_phone = 'entry_1435064460=';
var para_taro_ball = '&entry_1538013691=';
var para_waffle = '&entry_171276427=';
var para_shrimp = '&entry_1807832216=';
var para_total = '&entry_811445316=';
var para_6 = '&submit=Submit';

$(document).on('pageinit', function () {
  js_phone = $('#phone').val();
  js_taro_ball = $('#taro_ball').val();
  js_waffle = $('#waffle').val();
  js_shrimp = $('#shrimp').val();
  js_total = js_taro_ball * 50 + js_waffle * 100 + js_shrimp * 150;
});

$(document).on('pageshow', '#orderpage', function () {
  $('#order_phone').text(js_phone);
  $('#order_taro_ball').text(js_taro_ball + '');
  $('#order_waffle').text(js_waffle + '');
  $('#order_shrimp').text(js_shrimp + '');
  $('#order_total').text(js_total + '');
 
  $('a').attr('href', url_0 + para_phone + js_phone + para_taro_ball + js_taro_ball + para_waffle + js_waffle + para_shrimp + js_shrimp + para_total + js_total + para_6);
   
});


修改部分:
var url_0  的紅色部分為 Google即時表單的id
Google表單中,查看即時表單,在網址列 e後面的紅色字:
https://docs.google.com/a/tchcvs.tw/forms/d/e/1mzNjz_goObN9Nptq-cu9zQZd1bZ8GAeFmP93YvMP7Sg/viewform



var para_phone = 'entry_1435064460=';

對  Google 即時表單此網頁,按右鍵/檢視網頁原始碼
Ctrl-F , 輸入:電話
可以快速找到 電話的entry id, 如下為 : 1435064460
其它依此類推





1 頁執行參考圖:

2頁執行參考圖:


3頁執行參考圖: