Database design
First prepare two tables, the PIC table holds the picture information, including the corresponding name of the picture, the path and the picture "like" The total, pic_ip is the user clicks on the IP data.
CREATE TABLE IF not EXISTS ' pic ' (
' id ' int (one) not NULL auto_increment,
' pic_name ' varchar not NULL,
' Pic_url ' varchar not NULL,
' Love ' int (one) not NULL DEFAULT ' 0 ',
PRIMARY KEY (' id ')
) Engine=myisam DEFAULT Charset=utf8;
CREATE TABLE IF not EXISTS ' pic_ip ' (
' id ' int (one) not NULL auto_increment,
' pic_id ' int (one) is not NULL,
' IP ' varchar not NULL,
PRIMARY KEY (' id ')
) Engine=myisam DEFAULT Charset=utf8
index.php
In index.php, we read the PIC table in PHP through the picture information and display, combined with CSS, enhance the page display effect.
| The code is as follows |
Copy Code |
| <! DOCTYPE html>
<meta charset= "Utf-8" >
<meta name= "keywords" content= "jquery" >
<meta name= "description" content= "" >
<title>jquery+ajax+php achieve "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>
<body> <div id= "Main" > <ul class= "List" >
<?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> "alt=" <?php echo $pic _name;? > "><p><a href=" # "title=" I Like "class=" img_on "rel=" <?php echo $pic _id;? > "><?php echo $love;? ></a></p></li>
<?php}?>
</ul> </div> </body>
|
In CSS, we will define the dynamic effect of the mouse sliding and leaving the red button, and position the button.
| The code is as follows |
Copy Code |
. 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 Code
When the user clicks on his favorite picture of the red button, to the background love.php send Ajax request, the request response success, update the original value.
| The code is as follows |
Copy Code |
| $ (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
Background love.php receive front-end AJAX requests, according to the submitted picture ID value, to find out whether the IP table has the user's IP click Record, if there is to tell the user has been "like", on the contrary, the operation:
1, update the picture table in the corresponding Picture Love Field value, add a value of 1.
2, the User IP information written to the PIC_IP table, to prevent users to repeat the click.
3, get the updated love value, that is, the total number of users like the picture, and the total output to the front-end page.
| The code is as follows |
Copy Code |
| <?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 id= ' $id '";
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 id= ' $id '");
$row = Mysql_fetch_array ($result);
$love = $row [' Love '];
Echo $love;
}else{
echo "Liked it ...";
} Get user 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
