I received a mail from my reader that asked to me how to implement Show the love rating system like amypink.com. So I had designed Favorite Rating with jQuery and Ajax.. It's simple just changing little code on my old post Voting system with jQuery, Ajax and PHP.. Take a look at live demo
Download Script 
Live DemoDatabase Design
images table images details
CREATE TABLE images(
img_id INT PRIMARY KEY AUTO_INCREMENT,
img_name VARCHAR(60),
love INT,
image_ip table storing ip-address.img_id INT PRIMARY KEY AUTO_INCREMENT,
img_name VARCHAR(60),
love INT,
CREATE TABLE image_IP(
ip_id INT PRIMARY KEY AUTO_INCREMENT,
img_id_fk INT,
ip_add VARCHAR(40),
FOREIGN KEY(img_id_fk)
REFERENCES images(img_id));
ip_id INT PRIMARY KEY AUTO_INCREMENT,
img_id_fk INT,
ip_add VARCHAR(40),
FOREIGN KEY(img_id_fk)
REFERENCES images(img_id));
love.php
Javascript Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
{
$("span.on_img").mouseover(function ()
{
$(this).addClass("over_img");
});
$("span.on_img").mouseout(function ()
{
$(this).removeClass("over_img");
});
});
$(".love").click(function()
{
var id = $(this).attr("id");
var dataString = 'id='+ id ;
var parent = $(this);
$(this).fadeOut(300);
$.ajax({
type: "POST",
url: "ajax_love.php",
data: dataString,
cache: false,
success: function(html)
{
parent.html(html);
parent.fadeIn(300);
}
});
});
</script>
HTML and PHP code. To display records form the images table.libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
//Image Hover Pink Heart to White Heart
$(document).ready(function(){
$("span.on_img").mouseover(function ()
{
$(this).addClass("over_img");
});
$("span.on_img").mouseout(function ()
{
$(this).removeClass("over_img");
});
});
//Show The Love
$(function() {$(".love").click(function()
{
var id = $(this).attr("id");
var dataString = 'id='+ id ;
var parent = $(this);
$(this).fadeOut(300);
$.ajax({
type: "POST",
url: "ajax_love.php",
data: dataString,
cache: false,
success: function(html)
{
parent.html(html);
parent.fadeIn(300);
}
});
return false;
});});
</script>
<?php
include('config.php');$sql=mysql_query("select * from images");
while($row=mysql_fetch_array($sql))
{
$img_id=$row['img_id'];
$img_url=$row['img_url'];
$love=$row['love'];
?>
<div>
<div class="box" align="left">
<a href="#" class="love" id="<?php echo $img_id; ?>">
<span class="on_img" align="left"> <?php echo $love; ?> </span> </a>
</div>
<img src='<?php echo $img_url; ?>' /></div>
<?php
}?>
ajax_love.php
Contains PHP code.
<?php
include("config.php");$ip=$_SERVER['REMOTE_ADDR'];//client ip address
if($_POST['id'])
{
$id=$_POST['id'];
//IP-address verification
$ip_sql=mysql_query("select ip_add from image_IP where img_id_fk='$id' and ip_add='$ip'");
$count=mysql_num_rows($ip_sql);
if($count==0)
{
// Updateing Love Value
$sql = "update images set love=love+1 where img_id='$id'";
mysql_query( $sql);
// Inserting Client IP-address
$sql_in = "insert into image_IP (ip_add,img_id_fk) values ('$ip','$id')";
mysql_query( $sql_in);
$result=mysql_query("select love from images where img_id='$id'");
$row=mysql_fetch_array($result);
$love=$row['love'];
?>
//Display Updated Love Value
<span class="on_img" align="left"><?php echo $love; ?></span>//Display Updated Love Value
<?php
}else
{
// Already Loved
echo 'NO !';
}
}
?>
CSS Code
.box
{background-color:#303030; padding:6px;
height:17px;
}
.on_img
{background-image:url(on.gif);
background-repeat:no-repeat;
padding-left:35px;
cursor:pointer;
width:60px;
}
.over_img
{background-image:url(over.gif);
background-repeat:no-repeat;
padding-left:35px;
cursor:pointer;
width:60px;
}
The testking offers you incredible testking VCP-410 online training with testking 70-640 web designing tutorials to help you learn how to improve the website contents using jQuery script.
how would i go about implying this into my blogger layout?
Nice work!
Nice Work.Code explanation helps the developer to learn the concepts easily.Can you help me in the below situation.In our web page,3000 records are displayed in the tabular format fetching from the database.Below the table there are 9 text fields.Ajax is used in the one of text field to populate the remaining 8 text fields.But since the page has more than 3000 records,ajax call is hanging up the browser.Can you suggest us a way to improve the ajax call performance?
thanks
thanks
i try to run this script :( but dosn;t work :( ... i can't create that tabele in my database
"Error
SQL query:
CREATE TABLE images(
img_id INT PRIMARY KEY AUTO_INCREMENT ,
img_name VARCHAR( 60 ) ,
love INT,
CREATE TABLE image_IP(
ip_id INT PRIMARY KEY AUTO_INCREMENT ,
img_id_fk INT,
ip_add VARCHAR( 40 ) ,
FOREIGN KEY ( img_id_fk ) REFERENCES images( img_id )
);
MySQL said: Documentation
#1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'CREATE TABLE image_IP(
ip_id INT PRIMARY KEY AUTO_INCREMENT,
img_id_fk INT,
i' at line 12 "
in images table ... is the problem ...
CREATE TABLE images(
img_id INT PRIMARY KEY AUTO_INCREMENT,
img_name VARCHAR(60),
love INT,
wher is the img_html ? and this cod is not close );
estuve mirando tus post la verdad que tengo que felicitarte!!... congrats good job!
maxxdesignstudio@gmail.com
Salta - Argentina
nice work!
thanks :)
thank
CREATE TABLE IF NOT EXISTS `images` (
`img_id` int(11) NOT NULL AUTO_INCREMENT,
`img_name` varchar(60) COLLATE utf8_unicode_ci NOT NULL,
`love` int(11) NOT NULL,
PRIMARY KEY (`img_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ;
CREATE TABLE IF NOT EXISTS `image_IP` (
`ip_id` int(11) NOT NULL AUTO_INCREMENT,
`img_id_fk` int(11) NOT NULL,
`ip_add` varchar(40) COLLATE utf8_unicode_ci NOT NULL,
PRIMARY KEY (`ip_id`),
FOREIGN KEY (`img_id_fk`) REFERENCES images(`img_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ;
That should work, if not I dont have a clue
It still wont display any images :/ I'm presuming cause I have none in the DB. Any chance you could post a screenshot up?
CREATE TABLE IF NOT EXISTS `images` (
`img_id` int(11) NOT NULL AUTO_INCREMENT,
`img_url` varchar(60) COLLATE utf8_unicode_ci NOT NULL,
`love` int(11) NOT NULL DEFAULT '0',
PRIMARY KEY (`img_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ;
CREATE TABLE IF NOT EXISTS `image_IP` (
`ip_id` int(11) NOT NULL AUTO_INCREMENT,
`img_id_fk` int(11) NOT NULL,
`ip_add` varchar(40) COLLATE utf8_unicode_ci NOT NULL,
PRIMARY KEY (`ip_id`),
FOREIGN KEY (`img_id_fk`) REFERENCES images(`img_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ;
thx collection it
Thx!!!!
the same as Matt Hojo happens to me ---->
"It still wont display any images :/ I'm presuming cause I have none in the DB."
Any chance you could clarify a little bit more this issue? thanks in advance!
i use my wordpress ? entegre ? help me
you can user like this script on plog,wordpress.. from http://www.urorbit-tools.com
faute dans la ligne 5 de la page ajax_love.php :
remplacer par :
if(isset($_POST['id']))
{...
je vais l'integrer dans mon site : www.houidi.com
Merci amigos pour ce surper tutorial
ı use wordpress?etregre pls me
Thanks for this useful tuto !
Just one question : for the jQuery function related to Ajax, do i have to put in in the page i want to use it or can i put it in the footer/header ?
Thanks ^^
thank you! for share this!
Hy! ... can you post or send me a sample database? ...
I can create the database and I fill it up with records but it doesn't works.
enastar@hotmail.com
Thanks
DANNYSTYLE
Same problem as everyone else. I get to love.php fine, but all images are blank.
The only thing I see on the page is "Show The Love" with no images?
fix please?
thanks!
The application is based on facebook and when you click on the link megusta an asynchronous request using jQuery, PHP and MySQL, where information is stored by clicking on the database with this if you reload the page the changes did not affected I hope that the application is of his total pleasure
You can see the working application here:http://www.getvay.com/Like/index.php y la puede descargar de aqui: http://www.getvay.com/pg/file/macs1407/read/1821/like-facebook
share admin thanks a lot for sharring a very successful and wonderful
Yes, yes. Thanks its nice lesson.
It works fine for me...
Regards Henk from the Nethetlands,
Very useful in terms of sharing people. Thank you.
I always follow your site thank you wish you continued success. Thank you.
thanks for sharing web design
Your site has very nice, thank you for sharing.
nice work at a level of social solidarity and the opportunity to share
a very good time thank you..
all I'm getting is broken image, I can get the love bar to show and work, however, I can not seem to get any images to show up. What is the proper way to enter the image url into the database so it will show?
@Hali
:)
Show The Love
Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in /home/*****/public_html/new/love.php on line 121
what is this? please help:)
@majdi uhmmm nice thing.....
@bosverina send me your script at satlavida[at]gmail[dot]com
HI Srinivas Tamada. I like very match your posts.
But can you help me please with some modification for this. I want
that user can upload on my site his photos and after that his photos
should by seen on my site for other user so they can vote them. I'll
be very grateful if you could help me. I hope I explained the problem
well.
P.S. All the best and keep up the good work, you are very good
This helped me a lot in compiling my blog in a proper manner.
same error,
Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in /home/*****/public_html/new/love.php on line 121
great, thanks for sharing. :)
Hello buddy, Your tutorials were very nice. I was fully satisfied by your blog. Kindly maintain this forever. Thank you.
I congratulate your website very useful to people. We expect also to my own website.
Hello buddy, Your tutorials were very nice.
Very good informations.Thank you for sharing us.
sharing is very beatiful thanks
sharing is very beautiful and high quality
Sharing a very informative and useful
The subject is too interesting, thanks for sharing
sharing is very successful
it is a really nice script...thanks man... how to write a cookie storing different value... hope you can help me.
I'm new to jQuery, php and Ajax, but I managed to get it to work. The problem is that it now shows all the images in the database. How can I get it to only show a specific img_id?