網頁

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://lh3.googleusercontent.com/-_S7OyeiriIU/Vb3P9nXA4nI/AAAAAAAABYI/UNk8SlaTBNA/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頁執行參考圖:



12 則留言 :

  1. 請問為何訂單按鈕按不下去

    回覆刪除
    回覆
    1. 右邊 button,text : 檢視訂單,theme:b(反白), href: orderpage (第2個page 的 id)

      刪除
    2. 謝謝老師的回答
      我是企管系的
      因為我正在製作專題
      找不到資料

      刪除
    3. 請問老師我這樣寫對嗎?

      var js_place, js_red, js_green, js_white, js_total;

      var url_0 = 'https://docs.google.com/forms/d/1FAIpQLScsoMwYJuLSYlct0WJGxqV_sCtts4ftxfq2pIH5W-4CFXr0Xw/formResponse?';

      var para_place = 'entry_2041280458=';
      var para_red = '&entry_8354202441=';
      var para_green = '&entry_167586513=';
      var para_white = '&entry_2136586732=';
      var para_total = '&entry_1366884607=';
      var para_6 = '&submit=Submit';

      $(document).on('pageinit', function () {
      js_place = $('#place').val();
      js_red = $('#red').val();
      js_green = $('#green').val();
      js_white = $('#white').val();
      js_total = js_red * 30 + js_green * 40 + js_white * 50;
      });

      $(document).on('pageshow', '#orderpage', function () {
      $('#order_place').text(js_place);
      $('#order_red').text(js_red + '杯');
      $('#order_green').text(js_white + '杯');
      $('#order_white').text(js_green + '杯');
      $('#order_total').text(js_total + '元');

      $('a').attr('href', url_0 + para_place + js_place + para_red + js_red + para_green + js_green + para_white + js_white + para_total + js_total + para_6);

      });

      刪除
    4. 表單
      https://docs.google.com/forms/d/e/1FAIpQLScsoMwYJuLSYlct0WJGxqV_sCtts4ftxfq2pIH5W-4CFXr0Xw/viewform
      試算表
      https://docs.google.com/spreadsheets/d/19jAFCReWyT_WJUkEJ-A36XCzafNa8SbwmtQDV5o_fxw/edit?usp=sharing

      刪除
  2. var url_0 = 'https://docs.google.com/forms/d/1FAIpQLScsoMwYJuLSYlct0WJGxqV_sCtts4ftxfq2pIH5W-4CFXr0Xw/formResponse?'
    改成
    var url_0 = 'https://docs.google.com/forms/d/e/1FAIpQLScsoMwYJuLSYlct0WJGxqV_sCtts4ftxfq2pIH5W-4CFXr0Xw/formResponse?'
    否則會讀不到表

    回覆刪除
    回覆
    1. 當初我在寫此篇文章時,是不用加 e,就可看到表單,現在google 改成 要加 e, 謝謝您!

      刪除
  3. 可是我改過了還是無法讀取,請問是什麼原因?
    下面是我做的
    http://ezoui.com/export?preview&id=5nKA5BBba8UX&platform=android

    回覆刪除
    回覆
    1. line 88 column 1 , uncaught systax error. 這一行不知是寫什麼?

      刪除
    2. 老師您好,剛詢問過說是
      通常會有這樣的錯誤,代表您的 JavaScript 程式語法方面有問題
      可以切換到 JS 標籤查看看問題發生原因,謝謝

      刪除
  4. 阿旺師您好

    請問為何不能放在pageshow中執行,一定要放pageinit才會有作用?

    謝謝

    回覆刪除
    回覆
    1. pageinit 表示頁面『第一次』執行時會發生的事件,因此只會發生一次,而 pageshow 表示頁面載入時會發生的事件,每次頁面載入都會觸發.
      不能在pageshow 觸發執行,這個原因,我網路也查不到。

      刪除