Home > Developer > MySQL

Php+mysql+jquery implementation of the "top" and "stepping" voting function

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Index.html

<! DOCTYPE html>
<meta charset= "Utf-8" >
<title> Demo: Php+jquery+mysql implementation of "Top" and "Step" function </title>
<meta name= "keywords" content= "php,mysql,jquery"/>
<meta name= "description" content= "Helloweba demo platform, demonstrating XHTML, CSS, jquery, PHP cases and examples"/>
<link rel= "stylesheet" type= "Text/css" href= "Main.css"/>
<style type= "Text/css" >
. digg{width:420px; height:120px; margin:80px auto 20px auto; position:relative}
#dig_up, #dig_down {width:200px; height:48px; margin:10px; position:relative; border:1px solid #d3d3d3; padding-left : 42px; Cursor:pointer}
. Digup{background:url (diggs.png) no-repeat 4px 2px;}
. Digup_on{background:url (Diggs.png) no-repeat 4px-49px;}
. Digdown{background:url (Diggs.png) no-repeat 4px-102px;}
. Digdown_on{background:url (Diggs.png) no-repeat 4px-154px;}
#num_up, #num_down {position:absolute; right:6px; top:18px; font-size:20px;}
#dig_up p{height:24px; line-height:24px; color: #360}
#dig_down p{height:24px; line-height:24px; color: #f30}
bar{width:100px; height:12px; line-height:12px; border:1px solid #f0f0f0; position:relative; Text-align:center}
. bar Span{display:block; height:12px;}
. bar I{position:absolute; top:0; left:104px;}
#bar_up span{background: #360}
#bar_down span{background: #f60}
#msg {position:absolute; right:20px; top:40px; font-size:18px; color: #f00}
</style>

<body>


<div id= "Main" >
&LT;H2 class= "Top_title" >php+jquery+mysql "Top" and "Step" function <div class= "Digg" >
<div id= "dig_up" class= "Digup" >
<span id= "Num_up" ></span>
<p> very good, very powerful! </p>
<div id= "bar_up" class= "bar" ><span style= "" ></span><i></i></div>
</div>
<div id= "Dig_down" class= "Digdown" >
<span id= "Num_down" ></span>
<p> Too bad! </p>
<div id= "Bar_down" class= "bar" ><span style= "" ></span><i></i></div>
</div>
<div id= "MSG" ></div>
</div>
<!--<div class= "ad_76090" ><script src= "Bd_76090.js" type= "Text/javascript" ></script></div ><br/>-->
</div>
</body>
<script type= "Text/javascript" src= "Jquery.min.js" ></script>
<script type= "Text/javascript" >
$ (function () {
Initializing data
GetData ("do.php", 1);

$.getjson (' do.php ', function (data) {

Show number and percent progress bar effects
$ ("#bar_up span"). CSS (' width ', data.like_percent);
$ ("#bar_up i"). html (data.like_percent);
$ ("#num_down"). HTML (data.unlike);
$ ("#bar_down span"). HTML (' width ', data.unlike_percent);
$ ("#bar_down i"). html (data.unlike_percent);
});

$ ("#dig_up"). Hover (function () {
$ (this). addclass ("digup_on");
},function () {
$ (this). Removeclass ("digup_on");
});
$ ("#dig_down"). Hover (function () {
$ (this). addclass ("digdown_on");
},function () {
$ (this). Removeclass ("digdown_on");
});

$ ("#dig_up"). Click (function () {
GetData ("Do.php?action=like", 1);
});

$ ("#dig_down"). Click (function () {
GetData ("Do.php?action=unlike", 1);
});
});

function GetData (URL,SID) {
$.getjson (url,{id:sid},function (data) {
if (data.success==1) {
$ ("#num_up"). HTML (data.like);
$ ("#bar_up span"). CSS ("width", data.like_percent);
$ ("#bar_up i"). html (data.like_percent);
$ ("#num_down"). HTML (data.unlike);
$ ("#bar_down span"). CSS ("width", data.unlike_percent);
$ ("#bar_down i"). html (data.unlike_percent);
}else{
$ ("#msg"). HTML (DATA.MSG). Show (). CSS ({' Opacity ': 1, ' top ': ' 40px '). Animate ({top: ' -50px ', opacity:0}, "slow");
}
});
}
</script>


do.php

<?php
Include_once ("connect.php");

$action = $_get[' action '];
$id = 1;
$ip = Get_client_ip ();

if ($action = = ' like ') {
Likes (1, $id, $IP);
}elseif ($action = = ' unlike ') {
Likes (0, $id, $IP);
}else{
echo jsons ($id);
}

function likes ($type, $id, $ip) {
$ip _sql=mysql_query ("Select IP from votes_ip where vid= ' $id ' and ip= ' $ip '");
$count =mysql_num_rows ($ip _sql);
if ($count ==0) {//has not yet been topped
if ($type ==1) {//Top
$sql = "Update votes set likes=likes+1 where id=". $id;
}else{//tread
$sql = "Update votes set unlikes=unlikes+1 where id=". $id;
}
mysql_query ($sql);
      
$sql _in = "INSERT into VOTES_IP (VID,IP) VALUES (' $id ', ' $ip ')";
mysql_query ($sql _in);
      
echo jsons ($id);
}else{
$msg = $type ==1? ' You've already topped ': ' You've stepped on ';
$arr [' success '] = 0;
$arr [' msg '] = $msg;
echo Json_encode ($arr);
}
}

function Jsons ($id) {
$query = mysql_query ("select * from votes where id=". $id);
$row = Mysql_fetch_array ($query);
$like = $row [' Likes '];
$unlike = $row [' Unlikes '];
$arr [' Success ']=1;
$arr [' like '] = $like;
$arr [' unlike '] = $unlike;
$like _percent = Round ($like/($like + $unlike), 3) *100;
$arr [' like_percent '] = $like _percent. ' %‘;
$arr [' unlike_percent '] = (100-$like _percent). ' %‘;
   
Return Json_encode ($arr);
}

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);
}
?>

connect.php

<?php
Database configuration
$host = "localhost";
$db _user= "root";//username
$db _pass= "1234567890";//Password
$db _name= "vote";//Database name
$timezone = "Asia/shanghai";

$link =mysql_connect ($host, $db _user, $db _pass);
mysql_select_db ($db _name, $link);
mysql_query ("SET names UTF8");

Header ("content-type:text/html; Charset=utf-8 ");
?>

main.css,images/   slightly

See http://www.helloweba.com/view-blog-237.html

Php+mysql+jquery implementation of the "top" and "stepping" voting function

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More