Tuesday, September 18, 2012

Dynamic Message Update with Pinterest like Grid Layout

Pinterest has a very unique and interesting Dynamic Grid Layout. On Updating or refreshing the Updates automatically arranges themselves. Here in this Tutorial we have implemented the same, Dynamic Message Update into the Pinterest style layout. Without the Page being refreshed, the message is inserted and the Layout rearranges itself to hold the new block.
In this Tutorial we will be doing two very simple things,
  • Update a Message dynamically using jQuery and Ajax.
  • And, we will Insert the updated message into the Dynamic Grid Layout, and the Grid will automatically adjust to take in the new update.


Database Design 


  Pinterest table :  


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


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).


  db.php  


<?php
define('DB_SERVER', 'SERVER_NAME');
define('DB_USERNAME', 'USERNAME');
define('DB_PASSWORD', 'PASSWORD');
define('DB_DATABASE', 'DATABASE');
$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'>";
echo "<p>$row[1]</p></div>";
}
?>
</div>



  javascript  


<script type="text/javascript">
$(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;
}); 
});
</script>
//Below is the Masonry part for the grid Layout
<script>
  $(function(){
    $('#container').masonry({
      itemSelector: '.box'
    });
  });
</script>



  post_pin.php  


<?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>";
}
?>


We have earlier discussed the use of Masonry jQuery for Pinterest Layout in our article Pinterest like Blog Design with Masonry jQuery plugin , in this too we have used the same and we will keep updating this tutorial to include more features like, Comment System, Image Upload, URL fetching in coming weeks. So Stay tuned.





2 comments:

  1. There are some alternative plugins beside Masonry. You may want to look at them. Here I put the link.

    http://webdesigninspirationtoday.com/article/367/5-jquery-plugins-to-produce-pinterest-like-dynamic-grid-layout

    :)

    ReplyDelete
  2. NEED HELP PLEASE - i get this error:
    (Warning: mysql_fetch_row(): supplied argument is not a valid MySQL result resource in /home/u911608192/public_html/market/market.php on line 128). What am i doing wrong ?

    ReplyDelete