Loading ...
Sudah lama sekali penasaran bagaimana caranya facebook bisa langsung melakukan update pada bagian feednya. Jadi ketika kita mengupdate status di facebook status tersebut langsung hadir didalam feed berita yang ada persis dibawahnya. Feed tersebut bergeser kebawah dan status yang baru muncul dengan mulusnya dibagian paling atas dari feed berita.
Pun sampai detik ini saya belum mencoba mengutak-atik script apapun untuk mencoba memecahkan masalah diatas. Ada kakak tingkat yang mengatakan menggunakan AJAX, tapi hasil blogwalking saya kali ini jQuery lah yang menjadi titik kunci.
Berikut ini adalah langkah-langkah yang ditempuh :
- Membuat template-nyaUntuk contoh yang sederhana ini saya akan menggunakan 2 template yaitu Template Form dan Template Feed
Snippet Template Form adalah sebagai berikut
<form action="javascript:void(0);">
<textarea name="status"></textarea><br />
<input type="button" name="update" value="update" />
</form>dan untuk Snippet Template Feed adalah sebagai berikut
<div class="the-feed" style="height: 100px; width: 300px; border:1px solid black;">
<ul>
<li>Last Feed</li>
</ul>
</div> - Include jQuerySesuai dengan judulnya, saya menggunakan jQuery untuk membantu saya dengan feature ini. Karena masalah trust, saya lebih memilih untuk mengambil langsung jQuery yang berasal dari server Google
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> - Bikin fungsi interactive updateFungsi ini yang nantinya akan membuat update status menjadi beranimasi seperti yang facebook miliki
var interactiveUpdate = function(id,update) {
var idparam = '.'+ id + ' ul li:first-child';// insert new list onto the first child of ul and hide it
$(idparam).before('<li style="display:none;">'+update+'</li>');// display the hidden first child using jQuery's effect slideDown()
$(idparam).slideDown("slow");
}Fungsi ini memiliki tiga parameter penting, yaitu: id, update, and ul.
- id : adalah parameter yang mengacu kepada attribute class di dalam
yang ada di Template Form. Dalam contoh ini saya menggunakan class “example-status-1422″ (agak ribet supaya classnya unik dan tidak sama dengan class-class yang lainnya).
- update : adalah string / kalimat yang ingin di tampilkan kedalam Template Feed
- ul or ol : jika didalam Template Form kita menggunakan <ul> maka dalam fungsi diatas juga harus menggunakan ul. Demikian halnya jika di Tempate Form digunakan <ol>, maka pada fungsi diatas ol jugalah yang harus digunakan.
- id : adalah parameter yang mengacu kepada attribute class di dalam
- Mempersiapkan fungsi javascript untuk menghandle proses update statusFungsi ini akan bekerja setiap kali tombol “update” ditekan.
$(function(){updateStatus();});var updateStatus = function() {
// Set the event if the button is clicked
$('input[name="update"]‘).click(function() {// grab the status
var stat = $(’textarea[name="status"]‘).val();// call the interactiveUpdate snippet
interactiveUpdate('the-feed',stat);
});
} - Nah, tinggal menggabungkan semuanya dan.. SELESAI!Mari kita coba… (Ketikkan sesuatu pada isian Template Form dan tekan tombol “update”, kemudian perhatikan bagian Template Feed)
Template Form:
Template Feed:
- Last Feed
Tutorial ini sama sekali tidak melakukan koneksi dan menyimpan status yang baru kedalam database. Namun bukan berarti hal tersebut tidak mungkin. Dengan menggunakan konsep AJAX melalui aturan-aturan yang ada pada jQuery, koneksi ke database dapat dilakukan dengan cukup mudah. Sehingga dapat dibuat suatu kondisi ketika proses penyimpanan status yang baru kedalam database berhasil dengan sukses maka status yang baru akan muncul di list feed paling atas.
Download
Source code keseluruhannya dapat di download disini. Ini sudah saya paketkan beserta jquery, jadi tinggal dicoba-coba saja.
Compatibilitas
Feature ini sudah saya coba di beberapa browser, yaitu:
- Google Chrome 3.0.195.27
- Firefox 3.5.3
- Opera 10.00
- Safari 4.0.3
- IE 8.0.6001
Disclaimer
Fungsi-fungsi javascript yang ada dalam tutorial ini bukan diambil dari facebook. Malahan, bisa jadi facebook menggunakan cara lain didalam fitur animasi update statusnya. Perlu diingat juga bahwa ada banyak cara dan tools yang dapat digunakan untuk menghasilkan animasi update status seperti yang facebook gunakan ini.
Source : this
Rizki nastiti