Pinterest Dynamic Grid Script 2.0 with PhP and jQuery

In our last post we came up with Dynamic Message update with Pinterest like Grid layout. Now we have taken that script a step ahead by adding Comment system just like on Pinterest. We have used Ajax, Php and jQuery to include the comment system while maintaining the dynamic nature of script.
Update : Pinterest 3.0 Script with Image Upload now available.

Download the Script

Database Design 

  Pins :  

CREATE TABLE Pins (
pid INT PRIMARY KEY AUTO_INCREMENT,
pin VARCHAR(300));

  Comments :  

CREATE TABLE Comments (
com_id INT PRIMARY KEY AUTO_INCREMENT,
comment VARCHAR(200),
pid_fk INT(10));

Adding Data to Database

You can yourself add data to the database after creating the above mentioned Table, we advice you to add 10 rows with pid's as (1,2,3,4...10) and respective pin (any message of maximum 200 words). Use the interface to add comments, do not add comments manually to the database, rather use the script for that.

  db.php  

<?php
define('DB_SERVER', 'SERVER_NAME');
define('DB_USERNAME', 'USERNAME'); //Add Username
define('DB_PASSWORD', 'PASSWORD'); //Add Password
define('DB_DATABASE', 'DATABASE'); //Add Database Name
$connection = mysql_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD) or die(mysql_error());
$database = mysql_select_db(DB_DATABASE) or die(mysql_error());
?>

  index.php  

<div id='update'>

<form method="POST" action="#">

<input type='text' id='pin_update' class='textbox' name='pin_update' placeholder='Type your Pin here...'/>

<input type='submit' id='pin_submit' class='pin_button'/>

</form>

</div>

<div id="container" class="clearfix">

<?php

$sql="select * from pins order by pid DESC";

$result=mysql_query($sql);

while($row=mysql_fetch_row($result))

{

echo "<div class='box col2' id='box$pid'>";
echo "<div class='pin_holder'>";
echo "<div class='data'>$row[1]</div>";
echo "</div>";
echo "<div style='margin-left:10px;'><a href='#' class='commentopen' id='$pid'><small>Comment</small></a></div>";

}

?>

<div id="commentload<?php echo $pid;?>">
<?php include("show_comments.php"); ?>
</div>
<div class='commentpost' style='display:none;' id='commentbox<?php echo $pid;?>'>
<div class='commentbox_area'>
<form method="post" action="">
<textarea name="comment" class="comment" maxlength="200"  id="ctextarea<?php echo $pid;?>" placeholder="Add a comment..."></textarea>
<br/>
<input type="submit"  value=" Comment "  id="<?php echo $pid;?>" class="comment_button"/>
</form>
</div>
</div>
<?php
echo "</div>";
}
?>
</div>

  javascript  

In javascript we still have the previous code for dynamic pin update, additional to that we have included the script for comment system and for arrangement of the grid when the comment area slides down.

$(function() {

$("#pin_submit").click(function() 

{

var pin = $("#pin_update").val();

var dataString = 'pin='+ pin;

if(pin=='')

{

alert('Please type your message to be pinned...');

}

else

{

$.ajax({

type: "POST",

url: "post_pin.php",

data: dataString,

cache: false,

success: function(html){

$("#pin_update").val('');

$("#container").prepend(html);

$("#container").masonry('reload');

}

});

}return false;

}); 

});

//Below is the Masonry part for the grid Layout

  $(function(){

    $('#container').masonry({

      itemSelector: '.box'

    });

  });

//Comment open
$('.commentopen').live("click",function() 
{
var ID = $(this).attr("id");
$("#commentbox"+ID).slideToggle('fast');
var b=$("#box"+ID);
var a=b.height();
if($("#commentbox"+ID).height() > 1)
{
var Z=a-85;
}
else
{
var Z=a+85;
}
b.animate({height: Z }, 
function(){
$('#container').masonry();
});
return false;
});
$(function(){
    $('#container').masonry({
      itemSelector: '.box'
    });
  });

//Comment Submit
$('.comment_button').live("click",function() 
{
var ID = $(this).attr("id");
var comment= $("#ctextarea"+ID).val();
var dataString = 'comment='+ comment + '&pid=' + ID;
if($.trim(comment).length==0)
{
alert("Please Enter Comment Text");
}
else
{
$.ajax({
type: "POST",
url: "post_comment.php",
data: dataString,
cache: false,
success: function(html){
$("#commentload"+ID).append($(html).fadeIn('slow'));
$("#commentbox"+ID).hide();
$("#container").masonry('reload');
 }
 });
}
return false;
});

  post_pin.php  

To dynamically post PIN, here Pins are saved into the database and the output is shown.

<?php
include("includes/db.php");
if($_POST)
{
$pin=$_POST['pin'];
$query = "INSERT INTO pins(pin) VALUES ('$pin')";
$result=mysql_query($query);
echo "<div class='box col2'>";
echo "<p>$pin</p></div>";
}
?>

  post_comment.php  

Here comments are saved into the database.

<?php

include("includes/db.php");

if($_POST)
{
$comment=$_POST['comment'];
$pid=$_POST['pid'];
$query = "INSERT INTO comments(comment,pid_fk) VALUES ('$comment','$pid')";
$result=mysql_query($query);
echo "<div class='comment_area'>";
echo "<div class='comment_user'><img src='Image Link' /></div>";
echo "<div class='commentbody'><a href='#'><b> UserName </b></a> $comment </div></div>";
}

?>

  show_comments.php  

<?php

$command="select * from comments where pid_fk=$pid";
$comm_result=mysql_query($command);
while($cdata=mysql_fetch_row($comm_result))
{
echo "<div class='comment_area'>";
echo "<div class='comment_user'><img src='Image Link' /></div>";
echo "<div class='commentbody'><a href='#'><b> UserName </b></a> $cdata[1] </div></div>";
}

?>

We have included the jQuery 1.7.2 version and the Masonry jQuery Plugin. Soon we will be coming up with the 3rd version of this script, which will include LIKE / UNLIKE function, URL fetching and Image upload too. So stay tuned.

Related Post :
Dynamic Message Update with Pinterest like Grid Layout.
Pinterest like Blog Design with Masonry jQuery Plugin