Home > Jquery, Mysql, PHP > Friend Suggestions Facebook

Friend Suggestions Facebook


Friend Suggest

Situs Jejaring Sosial seperti Facebook.com mungkin bukanlah hal asing bagi kita. Melalui situs facebook ini kita bisa menjalin komunikasi dengan orang – orang yang kita kenal yang sudah lama tidak berjumpa. Di dalam situs ini ada tampilan Suggest Friend / Saran Teman yang isinya menampilkan data – data teman yang mungkin kita kenal untuk di add menjadi teman seperti tampak pada gambar di samping berikut ini.

Bagaimana ya cara membuatnya ? Ketika saya sedang browsing – browsing sambil nunggu jam pulang kerja, ada blog yang berisikan tutorial bagaimana membuat tampilan seperti suggest friend ini. Dalam blog ini saya sertakan source code dan demo-nya.

javascript code:
$(function(){
$(“.delete”).click(function(){
var element = $(this);
var I = element.attr(“id”);
$(‘li#list’+I).fadeOut(‘slow’, function() {$(this).remove();});
return false;
});
});

Keseluruhan source saya sediakan linknya untuk di Download. Karena sourcenya rada panjang jadi ribet kalo di post semua disini. Source yang saya sertakan disini tidak menggunakan data dari database semisal mysql. Tapi untuk mengambil data-data dari tabel di mysql saya beri ilustrasi seperti ini.

contoh pengambilan data dari tabel mysql :

<ul id=”facebook”>
<?php
$sql=mysql_query(“tuliskan sql query ambil data dari tabel bla2x….”);
while($row=mysql_fetch_array($sql)){
$user_id=$row[‘id’];
$user_name=$row[‘name’];
$user_image=$row[‘image’];
?>

<li id=”list<?php echo $user_id; ?>”>
<img src=”<?php echo $user_image; ?> ” />
<span><a href=”#”color: blue;”>delete” id=”<?php echo user_id; ?>”>X</a></span>
<a href=””><?php echo $user_name;?> </a>
<span>Add as Friend</span>
</li>
<?php
}
?>

</ul>

Untuk Demo bisa dilihat disini demo
Untuk Source Code bisa dilihat disini :
http://erros.freehostia.com/facebook/facebook.rar (copi alamat ini pada url anda dan tekan enter)

Categories: Jquery, Mysql, PHP Tags:
  1. Eka Sari
    August 11, 2009 at 7:20 am

    Ajarin tentang query lagi dunk Mas…
    De lom begitu paham neh😀

  2. artzan
    February 8, 2011 at 4:13 am

    gak bisa download…..file not found

  3. artzan
    February 8, 2011 at 4:13 am

    gak bisa download…..file not found

  4. artzan
    February 9, 2011 at 5:17 am

    kagak bisa download……linknya dong

  5. July 29, 2011 at 4:31 am

    Link dwnloadnya error boss…tolong di betulin lagi

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: