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
Database 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?
ReplyDeleteNice work!
ReplyDeleteNice 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?
ReplyDeletethanks
ReplyDeletethanks
ReplyDeletei try to run this script :( but dosn;t work :( ... i can't create that tabele in my database
ReplyDelete"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 ...
ReplyDeleteCREATE 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!
ReplyDelete[email protected]
Salta - Argentina
nice work!
ReplyDeletethanks :)
thank
ReplyDeleteCREATE TABLE IF NOT EXISTS `images` (
ReplyDelete`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?
ReplyDeleteCREATE TABLE IF NOT EXISTS `images` (
ReplyDelete`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
ReplyDeleteThx!!!!
ReplyDeletethe same as Matt Hojo happens to me ---->
ReplyDelete"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
ReplyDeleteyou can user like this script on plog,wordpress.. from http://www.urorbit-tools.com
ReplyDeletefaute dans la ligne 5 de la page ajax_love.php :
ReplyDeleteremplacer 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
ReplyDeleteThanks for this useful tuto !
ReplyDeleteJust 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!
ReplyDeleteHy! ... can you post or send me a sample database? ...
ReplyDeleteI can create the database and I fill it up with records but it doesn't works.
[email protected]
Thanks
DANNYSTYLE
Same problem as everyone else. I get to love.php fine, but all images are blank.
ReplyDeleteThe 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
ReplyDeleteYou 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
ReplyDeleteYes, yes. Thanks its nice lesson.
ReplyDeleteIt works fine for me...
Regards Henk from the Nethetlands,
Very useful in terms of sharing people. Thank you.
ReplyDeleteI always follow your site thank you wish you continued success. Thank you.
ReplyDeletethanks for sharing web design
ReplyDeleteYour site has very nice, thank you for sharing.
ReplyDeletenice work at a level of social solidarity and the opportunity to share
ReplyDeletea 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?
ReplyDelete@Hali
ReplyDelete:)
Show The Love
ReplyDeleteWarning: 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.....
ReplyDelete@bosverina send me your script at satlavida[at]gmail[dot]com
HI Srinivas Tamada. I like very match your posts.
ReplyDeleteBut 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.
ReplyDeletesame error,
ReplyDeleteWarning: 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. :)
ReplyDeleteHello buddy, Your tutorials were very nice. I was fully satisfied by your blog. Kindly maintain this forever. Thank you.
ReplyDeleteI congratulate your website very useful to people. We expect also to my own website.
ReplyDeleteHello buddy, Your tutorials were very nice.
ReplyDeleteVery good informations.Thank you for sharing us.
ReplyDeletesharing is very beatiful thanks
ReplyDeletesharing is very beautiful and high quality
ReplyDeleteSharing a very informative and useful
ReplyDeleteThe subject is too interesting, thanks for sharing
ReplyDeletesharing is very successful
ReplyDeleteit is a really nice script...thanks man... how to write a cookie storing different value... hope you can help me.
ReplyDeleteI'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?
ReplyDeleteWould like to implement this is well, however as a noob, no idea where to start with this?
ReplyDeleteI use wordpress, where to all the codes go? Maybe there are tutorials of similar things? A few words of help please
You should prevent your code from sql injection. Take a look at filter_var, mysql_real_escape_string and intval functions, before composing SQL sentences.
ReplyDeletethank you admin
ReplyDeleteMuchas gracias funciona perfecto IE7 incluido
ReplyDeleteI have a problem. This code does not work if my page's url is with a $_GET variable like this "m_profil.php/?mid=3". Please help me.
ReplyDeletefirst, the correct tables are :
ReplyDeleteCREATE TABLE IF NOT EXISTS `images` (
`img_id` int(11) NOT NULL AUTO_INCREMENT,
`img_url` varchar(60) COLLATE utf8_unicode_ci NOT NULL,
`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 ;
then, in phpmyadmin, run following the SQL :
insert into images (img_url) values (1.png)
that's it.
if you have "parse error bla bla bla" when you click the love button, change the "<?" in ajax_love.php line 24 with "<?php"
that's should work :)
thanks Ryan. yours worked well
ReplyDeleteThanks for your great tutorial.
ReplyDeleteCould you give me some advice on how to modify the code, so that it is only possible to vote for one image (if I click the heart on one of the images, the others should not be clickable anymore).
Thanks
Great article. It's always nice when you can not only be informed, but also entertained!
ReplyDeleteCan i use it for Bookmark or Favorite ?
ReplyDeletei need it to change for favorite how much value need to edit?
Thank You :)
ReplyDeleteI made it for Bookmarked and working good :)
Here is the fix of all small problems
ReplyDeleteUpdate the answer of "ryan setiawan"
DROP TABLE IF EXISTS `images`;
CREATE TABLE IF NOT EXISTS `images` (
`img_id` int(11) NOT NULL AUTO_INCREMENT,
`img_name` varchar(60) COLLATE utf8_unicode_ci NOT NULL,
`img_url` varchar(500) 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=4 ;
INSERT INTO `images` (`img_id`, `img_name`, `img_url`, `love`) VALUES
(1, '1.png', '1.png', 1),
(2, '2.png', '2.png', 1),
(3, '3.png', '3.png', 1);
DROP TABLE IF EXISTS `image_IP`;
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`),
KEY `img_id_fk` (`img_id_fk`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=4 ;
INSERT INTO `image_IP` (`ip_id`, `img_id_fk`, `ip_add`) VALUES
(1, 1, '110.39.248.175'),
(2, 3, '110.39.248.175'),
(3, 2, '110.39.248.175');
if you have "parse error bla bla bla" when you click the love button, change the "<?" in ajax_love.php line 24 with "<?php"
Great article. It's always nice when you can not only be informed, but also entertained!
ReplyDeleteInteresting to see ... thank you it's well done :)
ReplyDeleteInteresting to see ... thank you it's well done :)
ReplyDeleteGreat article. It's always nice when you can not only be informed, but also entertained!
ReplyDeleteInteresting to see ...
ReplyDeletePlease change it for PHP7, Mysqli
ReplyDelete