Facebook Like – Insert and Delete with Animation with PHP and jQuery


Fenomena layanan situs jejaring sosial memang terasa sangat menyentuh sisi kehidupan manusia sebagai mahluk sosial. Keberadaan situs-situs pertemanan telah membuat jarak yang begitu jauh menjadi hanya sejauh kedipan mata saja. Bagaimana tidak kita, dapat berinteraksi dengan teman dair segala penjuru dunia ini hanya melalui sebuah aplikasi yang telah dirancang sedemikian rupa sehingga kita dapat bersosialisai dengna mereka kapan dan dimana saja. Sebut saja Facebook, Twitter dan lain sebagainya dimana berbagai teknologi yang mereka tawarkan telah membius setiap anggota sehingga membuat layanan tersebut semakin besar. Pengaruh tersebut juga merasuki para web developer untuk mencoba membuat aplikasi yang serupa entah itu untuk tujuan bisnis, latihan dan ujicoba maupun sebagai ajang pamer kebolehan dalam membuat program sejenis. Yach.. termasuk saya juga sich.

Okey dech, kali ini kita akan belajar sebuah teknik yang cukup sederhana yaitu membuat program seperti yang ada di fabeook maupun Twitter yaitu membuat program update dan hapus data dengan jQuery dan PHP.

Berikut tampilan programnya:

fb

Struktur tabelnya:

CREATE TABLE IF NOT EXISTS `tbl_messages` (
  `mid` int(11) NOT NULL auto_increment,
  `msg` text NOT NULL,
  `ip` varchar(30) NOT NULL,
  `sent` int(11) NOT NULL,
  PRIMARY KEY  (`mid`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

index.php

<?php
date_default_timezone_set("Asia/Jakarta");
mysql_connect( 'localhost', 'root', '' );
mysql_select_db( 'drew-ajax' );

?>

<!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>Facebook Like - Insert and Delete with Animation with PHP and jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.elastic.js"></script>
<script>
$(document).ready(function(){
	
	$('textarea').elastic();
	
	// aksi untuk mengupdate data
	$("#kirim").click(function(){
		var msg = $("#msg").val();
		var dataString = "msg=" + msg;
		if( msg == '' ) {
			alert( "Mohon untuk mengisi pesan dan kesan Anda.\n\nTerimakasih,\nWebmaster" );
			document.getElementById('msg').focus();
		} else {
			$("#loading").show();
			$("#loading").fadeIn(400).html("<img src='loader.gif' align='absmiddle'> <span class='loading'>Mohon untuk menunggu...</span>");
			$.ajax({
				type: "POST",
				url: "ajax.php",
				data: dataString,
				cache: false,
				success: function(html){
					$("ul#pesan").prepend(html);
					$("ul#pesan li:first").fadeIn("slow");
					document.getElementById('msg').focus();
					document.getElementById('msg').value = '';
					$("#loading").hide();
					$("ul#pesan").load("pesan.php");
				}
			});
		} return false;
	});
	
	// menghapus data
	$(".hapus").click(function(){
		var id = $(this).attr("id");
		var dataString = 'id='+id;
		$.ajax({
			type: "POST",
			url: "hapus.php",
			data: dataString,
			cache: false,
			success: function(html){
				$("#pesan"+id).fadeOut('slow', function(){$(this).remove();});
			}
		});
		return false;		
	});	
});

</script>

<!-- koding CSS //-->
<style>
*{
	margin:0;
	padding:0;
}
body{
	font:13px/21px Arial, Helvetica, sans-serif;
	color:#494949;
	background:#F4F4F4;
	text-shadow:0px 1px 0px #fff;
}
.bungkus{
	margin:30px auto;
	padding:10px;
	width:700px;
	background: #EBEBEB;
	height:100%;
}
.kotak{
	margin:0 0 10px 0;
	padding:10px 0;
	border-bottom:1px solid #D9D9D9;
	box-shadow:0px 1px 0px #fff;
	-webkit-box-shadow:0px 1px 0px #fff;
}
form{
	margin:0;
	padding:0;
}
textarea{
	width:98%;
	border:1px solid #9B9B9B;
	border-radius:2px;
	font:14px Arial, Helvetica, sans-serif;
	padding:5px;
	overflow: auto;
	margin: 5px 0;
}
.clear{
	clear:both;
}
ol,ul{
	list-style-type:none;
}
li{
	padding:10px 0;
	border-bottom:1px solid #D9D9D9;
	box-shadow:0px 1px 0px #fff;
	-webkit-box-shadow:0px 1px 0px #fff;
}
.isi-gambar{
	float:left;
	width:80px;
	text-align:center;
}
.gambar img{
	width:50px;
	height:50px;
	margin:3px 0 0 0;
	padding:2px;
	border-radius:70px;
	border:5px solid #E2E2E2;
	background:#ffffff;
}
.isi-text{
	float:right;
	width:610px;
}
.isi-pesan{
	padding: 0 0 10px 0;
	font-weight:bold;
	font-size:12px;
}
.isi-info{
	font-size:11px;
}

.top{
	top:0;
	left:0;
	position:fixed;
	width:100%;
	height:30px;
	background:#000000;
	text-align:center;
}
.title{
	line-height:30px;
	color:#ffffff;
	text-shadow:none;
}
</style>
</head>

<body>

<div class="top">
	<div class="title">Facebook Like - Insert and Delete with Animation with PHP and jQuery</div>
</div>

<!-- Kotak untuk seluruh dokumen //-->
<div class="bungkus">

    <!-- Tampilkan form pengisian status //-->
    <div class="kotak">
    	<div class="judul">Form Pengisian Status</div>
        <form method="post" action="">
            <textarea name="msg" id="msg" placeholder="Isikan pesan dan kesan Anda..."></textarea><br />
            <input type="submit" name="act" value="Kirim" id="kirim" />
            <!-- Tampilkan loading halaman //-->
   			<span id="loading"></span>
        </form>    
    </div>
        
    <!-- Tampilkan daftar pesan yang ada //-->
    <ul id="pesan">
    <?php include 'pesan.php'; ?>
    </ul>


</div>
</body>
</html>

pesan.php

<?php
mysql_connect( 'localhost', 'root', 'vertrigo' );
mysql_select_db( 'drew-ajax' );

$sql = mysql_query( "SELECT * FROM tbl_messages ORDER BY mid DESC" );
if( mysql_num_rows( $sql ) == 0 ) {
	echo "<p>Maaf, belum ada orang yang mengirimkan statusnya. Jadilah yang pertama coy...</p>";
} else {
	while( $row = mysql_fetch_array( $sql ) ) {
		echo "<li id=\"pesan{$row['mid']}\">";
		echo "	<div class=\"isi-gambar\">";
		echo "		<div class=\"gambar\"><img src=\"who.jpg\"></div>";
		echo "	</div>";
		echo "	<div class=\"isi-text\">";
		echo "		<div class=\"isi-pesan\">{$row['msg']}</div>";
		echo "		<div class=\"isi-info\">Sent about ".time_stamp( $row['sent'] )." | From: {$row['ip']} | <a href=\"#\" id=\"{$row['mid']}\" class=\"hapus\">Delete</a></div>";
		echo "	</div>";
		echo "	<div class=\"clear\"></div>";
		echo "</li>";
	}
}

function time_stamp( $session_time ) {  
	$time_difference = time() - $session_time ; 
	$seconds = $time_difference ; 
	$minutes = round($time_difference / 60 );
	$hours = round($time_difference / 3600 ); 
	$days = round($time_difference / 86400 ); 
	$weeks = round($time_difference / 604800 ); 
	$months = round($time_difference / 2419200 ); 
	$years = round($time_difference / 29030400 ); 	
	if($seconds <= 60) {
		return "$seconds seconds ago"; 
	} else if($minutes <=60) {
	   	if($minutes==1) {
			return "one minute ago"; 
		}  else {
	   		return "$minutes minutes ago"; 
	   	}
	} else if($hours <=24) {
	   	if($hours==1) {
	   		return "one hour ago";
	  	}  else {
	 		return "$hours hours ago";
	  	}
	} else if($days <=7) {
	  	if($days==1) {
	  		 return "one day ago";
	   	}  else {
	  		return "$days days ago";
	  	}
	} else if($weeks <=4) {
	  	if($weeks==1) {
	  		return "one week ago";
	   	} else {
	  		return "$weeks weeks ago";
	  	}
	} else if($months <=12) {
	   if($months==1) {
	   		return "one month ago";
	   } else {
	  		return "$months months ago";
	  	}
	} else {
		if($years==1)  {
	   		return "one year ago";
	   	}  else {
	  		return "$years years ago";
	 	}
	}
} 
?>

ajax.php

<?php
mysql_connect( 'localhost', 'root', 'vertrigo' );
mysql_select_db( 'drew-ajax' );
$op = isset( $_GET['op'] ) ? $_GET['op '] : '';
$msg = isset( $_POST['msg'] ) ? $_POST['msg'] : '';
if( $msg ) {
	$msg = htmlentities( mysql_real_escape_string( $msg ) );
	mysql_query( "INSERT INTO tbl_messages(msg,ip,sent) VALUES('$msg','".$_SERVER['REMOTE_ADDR']."','".time()."')" );

}
?>

hapus.php

<?php
mysql_connect( 'localhost', 'root', 'vertrigo' );
mysql_select_db( 'drew-ajax' );
if( isset( $_POST['id'] ) ) {
	$id = $_POST['id'];
	mysql_query( "DELETE FROM tbl_messages WHERE mid='$id'" );
}
?>

Bagaimana, cukup mudah kan membuatnya. Semoga bermamfaat…

2 thoughts on “Facebook Like – Insert and Delete with Animation with PHP and jQuery

    1. iya gan, saat ini lagi sibuk UTS jadi mohon untuk dimaklumi ya. Kalau ada waktu luang, akan saya posting lagi artikel maupun tutorial yang lainnya.

      thanks sudah visit my blog and keep coding…

Leave a Reply

Please log in using one of these methods to post your comment:

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