Kamis, 27 Juni 2013

Create Your Own Link Sharing Like Pastebin or Shortly!

Saya teh bingung, bukannya tidak mau memosting tetapi data resource yang ada pada gue bejibun sekali. Dan data resources yg ada memang membutuhkan skill bila memang mau memakainya! Masalah timbul, belum mosting sources satu eh sudah ketemu lagi source serupa dan gayanya tidak kalah brooo :-?? Koben sekarang mau berbagi apps full stylish serupa dengan layanan web pastebin.com Ada dua metode nih bos, pertama kita menggunakan bantuan layanan dari Google Spreadsheets and ke dua murni memakai script!
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 ;)

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 bertuliskanhttps://raw.github.com/lucaspiller/shortly/master/vendor/. . .Link download sekaligus sumber github.com/lucaspiller/shortly
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/

Tidak ada komentar:

Posting Komentar