Pinterest 3.0 Script with Image Upload using Php and jQuery

Our Earlier Pinterest Scripts had Dynamic Message Update and comment System, we have now upgraded that script a level by including the Image Upload function. We have used Ajax, Php and jQuery for Image Upload to maintain the dynamic nature of Script. Pinterest 3.0 Script is fast, dynamic and supports Image Upload and Load more function.

Download the Script

The Downloaded Script contains four folders, namely css, includes, js and upload with PHP files.

css

• style.css

includes

• dp.php // Database connection

js

• jquery.form.js
• jquery.masonry.min.js
• jquery-1.7.1.min.js
• pinterest.js // Our javascript functions here

Files : index.php , ajax_image.php , load_pin.php , more_pin.php , post_comment.php , post_pin.php , show_comments.php

Database Design

Step 1 after downloading the Script is creating the required database. So create a new schema (database) in MySql named pinterest, add following tables into it.

  pins :  

CREATE TABLE pins (
pid INT PRIMARY KEY AUTO_INCREMENT,
pin VARCHAR(100),
upload_id INT(10),
uid INT(10));

  comments :  

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

  uploads :  

CREATE TABLE uploads (
id INT PRIMARY KEY AUTO_INCREMENT,
image_path VARCHAR(500),
uid INT(10));

Adding Data to Database

You can easily add data to the database and can start using the Script, after creating the above mentioned Tables and updating the db.php file. We advice you to use the interface to add pins, upload pictures and add comments, do not add anything to database manually, 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  

In the index file we have added the image form along with the Pin posting form. now you can either upload picture with your Pin update or simply write a Pin message.

<div id='update'>
<div><input type='text' id='pin_update' class='textbox' name='pin_update' placeholder='Type your Pin here...' maxlength='100'/></div>
<div id='button_area'><input type='submit' id='pin_submit' class='pin_button'/></div>
<div id='upload_area'>
<form id="imageform" method="post" enctype="multipart/form-data" action='ajax_image.php'>
<b>Upload an Image:</b><input type="file" name="photoimg" id="photoimg" />
</form>
</div>
<div id='preview'></div> // Picture Preview
</div>
<?php include ("load_pin.php"); ?>

  javascript  

In javascript we still have the previous code for dynamic pin update, script for comment system and for arrangement of the grid when the comment area slides down.
Additional to this, we have included the Picture Upload script, using Ajax for dynamic upload. Also we have small script for Load More function.
For any further addition of functionality, you must add new javascript codes to the pinterest.js file only, do not change or modify other .js files.

$(function() {

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

{

var pin = $("#pin_update").val();
var x = $('.preview').attr('id');
if(x)
var z= x;
else
var z=0;
var dataString = 'pin='+ pin+ '&z=' +z;

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('');
$("#preview").html('');
$('#photoimg').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'));
$("#ctextarea"+ID).val('');
$("#commentbox"+ID).hide();
$("#container").masonry('reload');
 }
 });}
return false;
});

// Load more Pins
$('.more').live("click",function() 
{
var ID = $(this).attr("id");
$.ajax({
type: "POST",
url: "more_pin.php",
data: "last_pid="+ ID, 
cache: false,
beforeSend: function(){ $("#more"+ID).html('<img src="css/ajax-loader.gif" />'); },
success: function(html){
$("#more"+ID).show();
$("div#container").append(html);
$("#container").masonry('reload');
}
});
return false;});

Rest all files like post_comment.php , show_comments.php are same, with slight modification into post_pin.php to include picture uploaded, also additional files namely load_pin.php , more_pin.php and ajax_image.php is included. 

Image Upload is dynamic, and auto rearrangement of the Dynamic Grid takes place using Masonry reload function. For any assistance do feel free to comment and do review this great script. Do tell us whether you like it or not through your comments.

Also do not forget to LIKE , SHARE and TWEET this post so that your friends too get to know about this awesome script.

This Script is Upgraded version of :

Pinterest Dynamic Grid Script 2.0 with Php and jQuery

Dynamic Message Update with Pinterest like Grid Layout