Facebook Status & Image upload using PHP – Now a days facebook is an biggest social network for world wide, there is no other network to beat the facebook so facebook still hold the first place but its not sure in future. Okay now we have move on our article. This tutorial show you how to upload images and status like facebook with comment box.

facebook status & image upload using php

Many students are request to develop facebook image upload comment application so here i have develop the simple image upload comment box in php. This is very simple in php, you have also develop this type of application after read this article.

Demo

Facebook Status & Image upload using PHP

There are many features are there in this article like upload pictures & comments, Live commenting system, Share updates, Delete comment and smiley support. So this application very helpful who wants to develop web application like picture commenting system.

Database Configuration

Here we have create one database and two tables, so first move to develop the database and create table. The table name is,
1.posts – used to store post description, image, video & post dates.
2.comments – used to store comments, commented date & comment picture.

Connection queries config file

Here, you have to create the connection coding and save the file (config.php) in your root directory.
config.php

define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', 'password');
define('DB_DATABASE', 'databasename');
define('ImageUploadPath', 'uploads/');
$post_limit = 10;
$connection = mysql_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD) or die(mysql_error());
$database = mysql_select_db(DB_DATABASE) or die(mysql_error());
mysql_query ("set character_set_results='utf8'");
$base_url='http://localhost/facebook/'; // with trailing slash
$base_folder = "facebook/"; //leave empty if you using root folder
$smiley_folder = $base_url.'assets/smileys/';

Upload the Image without refresh

When you have upload a new image, its automatically update and visible without refreshing. This is one of main advantage in our facebook project. I have also develop the same queries like facebook application so its very helpful you.

Below code will be automatically sends the image details from the form through post request without any plugins. Form data objects provide a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest send() method.

var form_data = $("#"+form_id); //form ID
var str = new FormData(form_data[0]); 

$.ajax({
  url: 'post_comment.php',
  data: str,
  processData: false,
  contentType: false,
  type: 'POST',
  success: function(data){
    alert(data);
  }
});

Comment update code

When the user upload the new image and comment the particular image information via create new comments and update the same comments also.

<?php
if(!empty($_POST['comment']) && !empty($_POST['act_id'])) {
	include_once 'includes/config.php';
	include_once 'includes/security.php';
	include_once 'includes/smileys.php';
	$pic_name = '';
	if(isset($_FILES))
	{
		//valid file formats
		$valid_file_formats = array("jpg", "png", "gif", "bmp","jpeg","PNG","JPG","JPEG","GIF","BMP");
		$filename = $_FILES['file']['name'];
		$tmp_filename = $_FILES['file']['tmp_name'];

		$filetype = strtolower($_FILES['file']['type']); 
		$extension = get_file_extension($filename); //getting file extension
		if(in_array($extension,$valid_file_formats))
		{
			//check file size
			if($_FILES["file"]["size"] < 100000) //100kb in size
			{
				//upload file

				$uploaddir = $_SERVER['DOCUMENT_ROOT'].'/'.$base_folder.'uploads/'; 
				$pic_name = time().'.'.$extension;
				$sourcePath = $_FILES['file']['tmp_name']; // Storing source path of the file in a variable
				$targetPath = $uploaddir . $pic_name; // Target path where file is to be stored
				move_uploaded_file($sourcePath,$targetPath) ; // Moving Uploaded file
			} else {
				echo "0-Image Size Should be less than 100kb";
				die;
			}

		} else {
			echo "0-Invalid File Format";
			die;
		}

	}
	
	//clean the comment message
	$comment = clean(mysql_real_escape_string($_POST['comment']));
	$comment = special_chars($comment); 
	$time = time();
	$post_id = $_POST['act_id'];
	
	//insert into wall table
	 $query = mysql_query("INSERT INTO `comments` (`comment`, `post_id`, `commented_date`, `picture`) VALUES ('$comment', '$post_id','$time', '$pic_name')") or die(mysql_error());
	 $ins_id = mysql_insert_id();
	?>
	<style>
p.msg_wrap { word-wrap:break-word; }
</style>
<li id="li-comment->?php echo $ins_id; ?>">
<div class="acomment-avatar">
<a href="http://www.facebook.com/vetbossel" rel="nofollow">
<img src="http://demos.vetbossel.in/img/favicon.png" alt="Avatar Image" >
</a>
<p style="float:right; text-align:right; font-size:10px;"><a href="javascript:;" rel="<?php echo $post_id; ?>" class="comment-delete" id="comment_delete_<?php echo $ins_id; ?>">X</a></p>
</div>
<div class="acomment-meta">
<a href="http://www.facebook.com/vetbossel" target="_blank">vetripandi</a>  0 sec ago 
</div>
<div class="acomment-content">
	<p class="msg_wrap"><?php echo parse_smileys(make_clickable(nl2br(stripslashes($comment))), $smiley_folder); ?></p>
	<?php if(!empty($pic_name)) { ?>
  <p class="msg_image"><img src="<?php echo $base_url;?>uploads/<?php echo $pic_name;?>"></p>
  <?php } ?>

</div></li>
<?php } ?>
Click to download
Click to download

We hope you have some idea in developing the commenting system, or if you still struggling in this tutorial just feel free to comment below.