Siapkan cemilan let's get de done...
Buka halaman blog keren berikut text sharing with google spreadsheets. Pada kotak yg tersedia ketikan apapun terserah, kemudian klik tombol send! Ex: Contoh text sharing with google spreadsheets Ada tulisan apa di sana tertera? Itu link gue buat 3 hari lalu. Sudah terbayangkan fungsi dari apps tersebut :-/ Kepengen membuat itu silahkan baca sumbernya jsdo.it/Fake/gsts
Sudah jelas tertera apa yg musti kalian lakukan.
Berikut planning HTML
<textarea id="result" cols="32" rows="16" class="hidden" readonly></textarea>
<div align="center" id="share" class="hidden">
<textarea id="txt" cols="48" rows="20"></textarea><br />
<button id="send">send</button><br />
URL:
<input type="text" id="url" size="56" readonly>
<iframe name="postform" width="0" height="0" class="hidden" id="postframe" src="about:blank"></iframe>
<form action="https://spreadsheets.google.com/formResponse?formkey=dHRtWnduUUdBYlpnUTdmYVhZaXNDc0E6MQ&ifq" method="POST" id="chatform" target="postform">
<input type="hidden" name="entry.0.single" value="" id="sendtext">
<input type="hidden" name="entry.1.single" value="" id="keytext">
<input type="hidden" name="pageNumber" value="0">
<input type="hidden" name="backupCache" value="">
<input type="submit" name="submit" value="Submit" id="submitbutton" class="hidden">
</form>
</div>
<style>
body{background:#debe94}
.hidden {
display:none
}
#result {
width:100%;
height:100%
}
.loading {
min-width:16px;
min-height:16px;
background-repeat:no-repeat;
background-image:url("IMAGE-LOADINGAN 16x16")
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">//<![CDATA[
var B62SRC="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";$(function(){if(window.location.search.match(/^\?([A-Za-z0-9]{6})([A-Za-z0-9]+)$/)){var key=RegExp.$2;var timestr=base62timestr(RegExp.$1);loadResult(timestr,key);$("#result").addClass("loading");$("#result").show();return;}
$("#share").show();$("#send").click(function(){var data=$("#txt").val();if(data==""){alert("Masukan data!!!");return;}
$("#url").addClass("loading");var key="";for(var i=0,len=B62SRC.length;i<4;++i){key+=B62SRC.charAt(Math.floor(Math.random()*len));}
$("#url").val("");$("#sendtext").val(data);$("#keytext").val(key);$("#submitbutton").click();$("#send").attr("disabled","disabled");});$("#postframe").load(function(){loadPostedLog($("#keytext").val());$("#sendtext").val("");$("#keytext").val("");});$("#url").click(function(){this.select();});});function procResponse(data){$("script#jsonprequest").remove();$("#url").removeClass("loading");$("#send").removeAttr("disabled");$("#txt").val("");var rows=data.table.rows;if(rows.length<1){alert("Kesalahan akuisisi data");return;}
var time=rows[0].c[0].v;var time62=date2base62(time);var key=rows[0].c[2].v;$("#url").val("http://"+window.location.hostname+window.location.pathname+"?"+time62+key);}
function loadPostedLog(key){var param={key:"0ArUyC7fgBs1KdHRtWnduUUdBYlpnUTdmYVhZaXNDc0E",pub:1,gid:0,tq:'SELECT A, B, C WHERE C = "'+key+'" ORDER BY A DESC LIMIT 1',tqx:"responseHandler: procResponse;reqId:"+(new Date()).getTime().toString()};$("<script />",{id:"jsonprequest",src:"https://spreadsheets.google.com/tq?"+$.param(param)}).appendTo("body");}
function procResult(data){$("script#jsonprequest").remove();$("#result").removeClass("loading");var rows=data.table.rows;if(rows.length<1){alert("Data tidak ada.");return;}
$("#result").text(rows[0].c[1].v);}
function loadResult(timestr,key){var param={key:"0ArUyC7fgBs1KdHRtWnduUUdBYlpnUTdmYVhZaXNDc0E",pub:1,gid:0,tq:'SELECT A, B, C WHERE A = datetime "'+timestr+'" AND C = "'+key+'" LIMIT 1',tqx:"responseHandler: procResult;reqId:"+(new Date()).getTime().toString()};$("<script />",{id:"jsonprequest",src:"https://spreadsheets.google.com/tq?"+$.param(param)}).appendTo("body");}
function date2base62(date){return B62SRC.charAt(date.getFullYear()-1970)+
B62SRC.charAt(date.getMonth())+
B62SRC.charAt(date.getDate())+
B62SRC.charAt(date.getHours())+
B62SRC.charAt(date.getMinutes())+
B62SRC.charAt(date.getSeconds());}
function base62timestr(b62str){if(!b62str.match(/^[A-Za-z0-9]{6}$/)){return null;}
var timestr=(B62SRC.indexOf(b62str[0])+1970).toString()+"-"+
+(B62SRC.indexOf(b62str[1])+1).toString()+"-"+
+B62SRC.indexOf(b62str[2]).toString()+" "+
+B62SRC.indexOf(b62str[3]).toString()+":"+
+B62SRC.indexOf(b62str[4]).toString()+":"+
+B62SRC.indexOf(b62str[5]).toString();return timestr;}
//]]></script>
Bila sobat mau lebih privasi, silahkan buat formkey di google drive. Yang gue pusingkan bagaimana cara buat key yg ada di var param dalam script!!! Mungkin apps yg ke dua ini bisa menjadi pilihan ;)<div align="center" id="share" class="hidden">
<textarea id="txt" cols="48" rows="20"></textarea><br />
<button id="send">send</button><br />
URL:
<input type="text" id="url" size="56" readonly>
<iframe name="postform" width="0" height="0" class="hidden" id="postframe" src="about:blank"></iframe>
<form action="https://spreadsheets.google.com/formResponse?formkey=dHRtWnduUUdBYlpnUTdmYVhZaXNDc0E6MQ&ifq" method="POST" id="chatform" target="postform">
<input type="hidden" name="entry.0.single" value="" id="sendtext">
<input type="hidden" name="entry.1.single" value="" id="keytext">
<input type="hidden" name="pageNumber" value="0">
<input type="hidden" name="backupCache" value="">
<input type="submit" name="submit" value="Submit" id="submitbutton" class="hidden">
</form>
</div>
<style>
body{background:#debe94}
.hidden {
display:none
}
#result {
width:100%;
height:100%
}
.loading {
min-width:16px;
min-height:16px;
background-repeat:no-repeat;
background-image:url("IMAGE-LOADINGAN 16x16")
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">//<![CDATA[
var B62SRC="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";$(function(){if(window.location.search.match(/^\?([A-Za-z0-9]{6})([A-Za-z0-9]+)$/)){var key=RegExp.$2;var timestr=base62timestr(RegExp.$1);loadResult(timestr,key);$("#result").addClass("loading");$("#result").show();return;}
$("#share").show();$("#send").click(function(){var data=$("#txt").val();if(data==""){alert("Masukan data!!!");return;}
$("#url").addClass("loading");var key="";for(var i=0,len=B62SRC.length;i<4;++i){key+=B62SRC.charAt(Math.floor(Math.random()*len));}
$("#url").val("");$("#sendtext").val(data);$("#keytext").val(key);$("#submitbutton").click();$("#send").attr("disabled","disabled");});$("#postframe").load(function(){loadPostedLog($("#keytext").val());$("#sendtext").val("");$("#keytext").val("");});$("#url").click(function(){this.select();});});function procResponse(data){$("script#jsonprequest").remove();$("#url").removeClass("loading");$("#send").removeAttr("disabled");$("#txt").val("");var rows=data.table.rows;if(rows.length<1){alert("Kesalahan akuisisi data");return;}
var time=rows[0].c[0].v;var time62=date2base62(time);var key=rows[0].c[2].v;$("#url").val("http://"+window.location.hostname+window.location.pathname+"?"+time62+key);}
function loadPostedLog(key){var param={key:"0ArUyC7fgBs1KdHRtWnduUUdBYlpnUTdmYVhZaXNDc0E",pub:1,gid:0,tq:'SELECT A, B, C WHERE C = "'+key+'" ORDER BY A DESC LIMIT 1',tqx:"responseHandler: procResponse;reqId:"+(new Date()).getTime().toString()};$("<script />",{id:"jsonprequest",src:"https://spreadsheets.google.com/tq?"+$.param(param)}).appendTo("body");}
function procResult(data){$("script#jsonprequest").remove();$("#result").removeClass("loading");var rows=data.table.rows;if(rows.length<1){alert("Data tidak ada.");return;}
$("#result").text(rows[0].c[1].v);}
function loadResult(timestr,key){var param={key:"0ArUyC7fgBs1KdHRtWnduUUdBYlpnUTdmYVhZaXNDc0E",pub:1,gid:0,tq:'SELECT A, B, C WHERE A = datetime "'+timestr+'" AND C = "'+key+'" LIMIT 1',tqx:"responseHandler: procResult;reqId:"+(new Date()).getTime().toString()};$("<script />",{id:"jsonprequest",src:"https://spreadsheets.google.com/tq?"+$.param(param)}).appendTo("body");}
function date2base62(date){return B62SRC.charAt(date.getFullYear()-1970)+
B62SRC.charAt(date.getMonth())+
B62SRC.charAt(date.getDate())+
B62SRC.charAt(date.getHours())+
B62SRC.charAt(date.getMinutes())+
B62SRC.charAt(date.getSeconds());}
function base62timestr(b62str){if(!b62str.match(/^[A-Za-z0-9]{6}$/)){return null;}
var timestr=(B62SRC.indexOf(b62str[0])+1970).toString()+"-"+
+(B62SRC.indexOf(b62str[1])+1).toString()+"-"+
+B62SRC.indexOf(b62str[2]).toString()+" "+
+B62SRC.indexOf(b62str[3]).toString()+":"+
+B62SRC.indexOf(b62str[4]).toString()+":"+
+B62SRC.indexOf(b62str[5]).toString();return timestr;}
//]]></script>
Buka kembali link blog keren berikut shortly is pastebin in blogger template. Ada apa di sana? Sudah barang tentu hal serupa dengan text sharing with google spreadsheets namun berbeda teknik. Yang ini pakek script bos, full kombinasi scripts. Untuk menyingkat waktu dan tenaga, demo yg gue berikan merupakan markup HTML alias planning penulisan di sesi postingan.
Ex: Demo shortly is pastebin in blogger template
Download dan hostingkan ke-4 script yg bertuliskan
Pelajari sendiri detilnya mah yah :d Aku jg kagak ngerti sebatas pemakai sejati :) Maaf jika telat update postingan, gue lagi membaca 1 web keren dengan jumlah halaman 300-an lebih. Opensource semua dan hampir 99% konten gile makjang. Nanti gue bagi pada sesi postingan yang selanjutnya kalau sudah tamat acara bacanya :))
Happy coding \m/
Ex: Demo shortly is pastebin in blogger template
Download dan hostingkan ke-4 script yg bertuliskan
https://raw.github.com/lucaspiller/shortly/master/vendor/. . .
Link download sekaligus sumber github.com/lucaspiller/shortlyPelajari sendiri detilnya mah yah :d Aku jg kagak ngerti sebatas pemakai sejati :) Maaf jika telat update postingan, gue lagi membaca 1 web keren dengan jumlah halaman 300-an lebih. Opensource semua dan hampir 99% konten gile makjang. Nanti gue bagi pada sesi postingan yang selanjutnya kalau sudah tamat acara bacanya :))
Happy coding \m/
Tidak ada komentar:
Posting Komentar