Thursday, November 29, 2012

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.


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.

27 comments:

  1. Really Nice information thanks for sharing :)

    ReplyDelete
  2. Thanks!!!
    In index page i get: Warning: mysql_num_rows() expects parameter 1 to be resource, boolean given in C:\wamp\www\pinterest\load_pin.php on line 14 AND line 24

    ReplyDelete
    Replies
    1. I checked but no such problem occured, try by replacing the mysql_num_rows query by this

      mysql_num_rows("$pin_total");

      that is, enclose the $pin_total into quotes, sometime it shows error because of this.

      Delete
  3. could you please make a login and registration script that will work with all of your other script

    ReplyDelete
    Replies
    1. We already have a post for Login System, but still i will surely post a new script with Login and Registration function. Thanks for your feedback.

      Keep Visiting !

      Delete
  4. y you cant ad login & register functions :(

    ReplyDelete
  5. i am stuck on how to create the tables. I can create the table but i do not know what line to add the items you show

    ReplyDelete
    Replies
    1. After creating all the tables as mentioned, use the script to add images, posts etc.
      Load the script using browser, and add image and message.

      Delete
    2. thx abhishek sir . when i coment than its show ur pic wd coment wht when som other user coment .than also show ur pic..

      Delete
    3. Its because in the script we have included the gravatar image using my email address, you need to change that. And do not worry, very soon we are coming up with the new version of this script, which will have login and signup system and many more features.

      Delete
    4. eagerly waiting for new version

      Delete
  6. could you create the sql database file and post it here to download please?

    ReplyDelete
  7. I suggest added a demo for you're scripts...don't really know much of what this script does till i seee it in action so i can integrate it with my website. Sounds cool though.

    ReplyDelete
  8. sir .. we are waiting for update ....

    ReplyDelete
  9. sir how much time we wait for upgrade version..

    ReplyDelete
  10. Content mixes with footer when clicking "load more pin" ... please help...

    ReplyDelete
  11. Load More Pins display problem. When click on "load more pins", the loaded pins are displayed incorrectly; especially these pins get mixed with the footer of the page ... how to solve this issue ???

    ReplyDelete
    Replies
    1. You must be using Chrome Browser ? This script works fine with IE and Firefox, but this issue arises in Chrome. I am trying to find this myself. Will keep you posted.

      Delete
  12. yep, i am using Chrome Browser, but i also tested it on Firefox and it displays the same problem.... It only works fine with IE...

    ReplyDelete
  13. Hi, i have try your code..very nice but may i know why the comment I have enter do not insert in database?
    Than you

    ReplyDelete
    Replies
    1. Comments must get into Database, the script is tested and it works fine.

      Delete
    2. Yes, the script works fine. Thank you!
      Can you tell me which code in files displaying comment interface?it is in css file?

      Delete
  14. Sill waiting for "Load More Pins display problem" solution.

    ReplyDelete
  15. Great jobs bro i really appreciate your work

    ReplyDelete
  16. Where is this posting to???? Where do i define that????

    ReplyDelete