#1 【心得】[JQuery推廣] 以Google Spreadsheet為網頁資料庫
lawlaw(law)
幻影之旅者LV44 / 人類 / 劍士
巴幣：134651
ＧＰ：1489
經驗：
巴幣：134651
ＧＰ：1489
經驗：
大家好,最近剛逛到這一版發現一些寫網頁的同好,所以想分享一些實用的心得.
今天分享的是以google spreadsheet作為網頁的資料庫,適用於小型的產品網頁或一些常更新的非機密資料.
先給大家看一個實例,這是我之前玩某遊戲時做出來的.
裡面所有傭兵資料,金錢/經驗對照表,經驗計算器,問答和攻略專區都是用這方法做的. 優點是只要有spreadsheet的修改權限的人 (作者可自行分享權限) 就可以進行修改,而且任何修改是會立即反映在網頁上,而最重要的是這是免費的,只要你有gmail就可以使用. 而缺點就是安全性,由於spreadsheet是在google drive裡面,所以安全性必定不及真正的經營資料庫的公司.
廢話少說,直接入正題吧.
第一步: 製作Google Spreadsheet資料庫
首先,在Google Drive裡製作一個新的spreadsheet檔案,就像製作excel檔一樣,先在第一行寫上一些heading和資料.
注意:
1. Heading一定要用英文,大/小寫或有沒有空格沒關係,但請勿用特殊符號.
2. 資料可用中文,英文或html原始碼.
3. 為了縮短網頁的load time,請把所有沒用的column和row都刪除.
資料完成後就可以publish這檔案了,在File > Publish to the web...
然後按一下Publish的藍色按鈕就會出現下面的畫面:
接下來把這串網址複製貼上記事本,這個例子的網址如下:
https://docs.google.com/spreadsheets/d/1B4aoSckRRKBt8XkoTq1h6l-JnL7bxWvoygZI389Jud4/pubhtml
紅字部分是這檔案的ID,很重要.
然後請把ID貼到下面這個地址的ID位置:
https://spreadsheets.google.com/feeds/list/ID貼在這/od6/public/values?alt=json
第二步: 製作html檔
製作一個新的html檔,我會把資料以table的方式列出來.
以下是原始碼解說:
html部分:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr>
<th>產品名稱</th>
<th>價錢</th>
</tr>
<tbody id="producttable">
</tbody>
</table>
</body>
</html>
在使用JQuery時,必定要在<head>裡面加入這句:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
然後就是製作一個table的空架 (藍字部分),最後在<tbody>加上id就完成了.
script部分:
<script>
$(function(){
var ProductName = [];
var Price = [];
$.getJSON('https://spreadsheets.google.com/feeds/list/1B4aoSckRRKBt8XkoTq1h6l-JnL7bxWvoygZI389Jud4/od6/public/values?alt=json', function (data){
for (var i=0; i < data.feed.entry.length; i++){
ProductName[i] = data.feed.entry[i].gsx$productname.$t;
Price[i] = data.feed.entry[i].gsx$price.$t;
$('#producttable').append("<tr><td>" + ProductName[i] + "</td><td>" + Price[i] + "</td></tr>");
}
});
});
</script>
以下是解說:
var ProductName = [];
var Price = [];
先製作空的array,這是要把spreadsheet資料寫進去的地方.
$.getJSON('https://spreadsheets.google.com/feeds/list/1B4aoSckRRKBt8XkoTq1h6l-JnL7bxWvoygZI389Jud4/od6/public/values?alt=json', function (data){
這個就是整篇文章的精髓,紅字部分就是就是在第一步所得的網址,藍字是所用的spreadsheet id.
for (var i=0; i < data.feed.entry.length; i++){
ProductName[i] = data.feed.entry[i].gsx$productname.$t;
Price[i] = data.feed.entry[i].gsx$price.$t;
$('#producttable').append("<tr><td>" + ProductName[i] + "</td><td>" + Price[i] + "</td></tr>");
}
最後就是寫一個for loop, data是對應上面function(data), 可以改成任何字.
data.feed.entry[i].gsx$productname.$t
這裡的productname就是google spreadsheet上的heading,把Product Name變成全小寫,然後把空格刪除,直接把兩個字連在一起就可以了.
這個for loop基本上就是在讀取spreadsheet中每一行的資料,然後再執行指令. 在這例子我是要把每一筆資料加到id為producttable的地方. (藍字)
