Home>

Database DesignFirst prepare two tables.The pic table holds picture information.Including the name, path and total number of "likes" of the picture, pic_ip records the IP data of the user after clicking the like.

create table if not exists `pic` (
 `id` int (11) not null auto_increment, `pic_name` varchar (60) not null, `pic_url` varchar (60) not null, `love` int (11) not null default" 0 ", primary key (`id`)
) engine=myisam default charset=utf8;
create table if not exists `pic_ip` (
 `id` int (11) not null auto_increment, `pic_id` int (11) not null, `ip` varchar (40) not null, primary key (`id`)
) engine=myisam default charset=utf8

index.phpIn index.php, we read the picture information in the pic table through php and display it.Combine css to improve page display effect.

code show as below

<! Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="jquery">
<meta name="description" content="">
<title>jquery + ajax + php implements "like" rating</title>
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"</script>
<script type="text/javascript">
$(function () {
$("p a"). click (function () {
var love=$(this);
var id=love.attr ("rel");
love.fadeout (300);
$.ajax ({
type:"post",url:"love.php",data:"id =" + id,cache:false,success:function (data) {
love.html (data);
love.fadein (300);
}
});
return false;
});
});
</script>
<style type="text/css">
.clear {clear:both}
.list {width:760px;margin:20px auto}
.list li {float:left;width:360px;height:280px;margin:10px;position:relative}
.list li p (position:absolute;top:0;left:0;width:360px;height:24px;line-height:24px;background:#000;opacity:.8;filter:alpha (opacity=80);}
.list li p a {padding-left:30px;height:24px;background:url (images/heart.png) no-repeat 4px -1px;color:#fff;font-weight:bold;font-size:14px}
.list li p a:hover {background-position:4px -25px;text-decoration:none}
</style>
</head>
<body>
<div>
<ul>
<?php
include_once ("connect.php");
$sql=mysql_query ("select * from pic");
while ($row=mysql_fetch_array ($sql)) {
$pic_id=$row ["id"];
$pic_name=$row ["pic_name"];
$pic_url=$row ["pic_url"];
$love=$row ["love"];
?>
<li><img src="images /<?php echo $pic_url;?>"><p><a href="#" rel="<?php echo $pic_id;?>"><?php echo $love;?></a></p></li>
<?php}?>
</ul>
</div>
</body>
</html>

In css, we will define the dynamic effect of the mouse moving towards and away from the red heart button,And position the button.The code is as follows

.list {width:760px;margin:20px auto}
.list li {float:left;width:360px;height:280px;margin:10px;position:relative}
.list li p {position:absolute;top:0;left:0;width:360px;height:24px;line-height:24px;
background:#000;opacity:.8;filter:alpha (opacity=80);}
.list li p a (padding-left:30px;height:24px;background:url (images/heart.png) no-repeat
4px -1px;color:#fff;font-weight:bold;font-size:14px}
.list li p a:hover {background-position:4px -25px;text-decoration:none}

jquery codeWhen a user clicks the red heart button on a picture they like,Send an ajax request to the background love.php. After the request response is successful,Update the original value.

code show as below

$(function () {
  $("p a"). click (function () {
    var love=$(this);
    var id=love.attr ("rel");//corresponding id
    love.fadeout (300);//Fade effect
    $.ajax ({
      type:"post",      url:"love.php",      data:"id =" + id,      cache:false, //Do not cache this page
      success:function (data) {
        love.html (data);
        love.fadein (300);//Fade effect
      }
    });
    return false;
  });
});

love.php

The background love.php receives the ajax request from the front end, and finds whether there is a click record of the user's ip in the ip table according to the submitted image id valueIf there is, tell the user that they have "liked it", otherwise, do the following:

1. Update the value of the corresponding love field in the picture table and increase the value by 1.

2. Write the user ip information into the pic_ip table to prevent users from clicking repeatedly.

3. Get the updated love value, that is, the total number of users who like the picture,And output this total to the front page.

code show as below

<?php
$host="localhost";
$db_user="root";
$db_pass="";
$db_name="demo";
$timezone="asia/shanghai";
$link=mysql_connect ($host, $db_user, $db_pass);
mysql_select_db ($db_name, $link);
mysql_query ("set names utf8");
?>
<?php
include_once ("connect.php");
$ip=get_client_ip ();
$id=$_post ["id"];
if (! isset ($id) || empty ($id)) exit;
$ip_sql=mysql_query ("select ip from pic_ip where pic_id =" $id "and ip =" $ip "");
$count=mysql_num_rows ($ip_sql);
if ($count == 0) {
$sql="update pic set love=love + 1 where";
mysql_query ($sql);
$sql_in="insert into pic_ip (pic_id, ip) values ​​(" $id "," $ip ")";
mysql_query ($sql_in);
$result=mysql_query ("select love from pic where");
$row=mysql_fetch_array ($result);
$love=$row ["love"];
echo $love;
} else {
echo "Like it.
. ";
}
//Get the user's real ip
function get_client_ip () {
if (getenv ("http_client_ip")&&strcasecmp (getenv ("http_client_ip"), "unknown"))
$ip=getenv ("http_client_ip");
else
if (getenv ("http_x_forwarded_for")&&strcasecmp (getenv ("http_x_forwarded_for"), "unknown"))
$ip=getenv ("http_x_forwarded_for");
else
if (getenv ("remote_addr")&&strcasecmp (getenv ("remote_addr"), "unknown"))
$ip=getenv ("remote_addr");
else
if (isset ($_server ["remote_addr"])&&$_server ["remote_addr"]&&strcasecmp ($_ server ["remote_addr"], "unknown"))
$ip=$_server ["remote_addr"];
else
$ip="unknown";
return ($ip);
}
?>

The get_client_ip () function in the code is used to get the real IP of the user.

php
  • Previous Analysis of the use of Java drawing mode
  • Next jQuery drag layout to save results to database