Saturday, October 6, 2012

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 col2id='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='#'><bUserName </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='#'><bUserName </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



4 comments:

  1. this is great. i've been looking forever for a tutorial like this. is there going to be demo of your version?

    ReplyDelete
    Replies
    1. hey Jeremy, thanks for your response.
      We are working on providing a DEMO for this script, and soon you'll get it.
      And soon, a new version of this script is coming, so stay tuned.

      Delete
  2. Hey, this tut is so amazing. I love this site and hope to view the demo of this script. Thanks for anything you did :D

    ReplyDelete