Implementation of red-blue (top-step) voting code _php instance based on Php+jquery+mysql

First to show you the effect of the picture:

View Demo Download source code

This is a very useful example of voting, applied in both sides of the view against the voting scene. Users can choose to support the vote on behalf of their own views, this article to the red and blue vote for example, through the front and back platform interaction, intuitive display of red and blue votes and the proportion of the vote, the application is very extensive.

This article is a comprehensive knowledge application class that requires you to have basic knowledge of PHP, JQuery, MySQL, and HTML and CSS.

Html

We need to show the views of both red and blue on the page, as well as the corresponding number and proportion of votes, as well as hand-shaped pictures for the interactive voting, in this case the red and blue sides are #red and #blue respectively. Redhand and. Bluehand are used to make hand voting buttons,. Redbar and. Bluebar Show the proportion of red and blue, #red_num和 #blue_num show both sides of the vote.

<div class= "vote" > 
 <div class= "Votetitle" > Your views on the articles provided by Helloweba? </div> 
 <div class= "Votetxt" > very practical <span> completely read </span></div> 
 <div class= " Red "id=" Red "> 
 <div class=" Redhand "></div> 
 <div class=" Redbar "id=" Red_bar "> 
  < span></span> 
  <p id= "Red_num" ></p> 
 </div> 
 </div> 
 <div class= "Blue" id= "Blue" > 
 <div class= "Bluehand" ></div> 
 <div class= "Bluebar" id= "Blue_bar" > 
  <span></span> 
  <p id= "Blue_num" ></p> 
 </div> 
 </div> 

Css

Use CSS to beautify the page, load the background image, determine the relative position, etc., you can directly copy the following code, in your own project slightly modify it.

. vote{width:288px height:220px; margin:60px auto 20px auto;position:relative} votetitle{width:100%;height:62px; Background:url (icon.png) no-repeat 0 30px; 
FONT-SIZE:15PX} red{position:absolute; left:0; top:90px; height:80px; 
. blue{position:absolute right:0; top:90px; height:80px;} . votetxt{line-height:24px}. Votetxt span{float:right}. redhand{position:absolute; left:0;width:36px; height:36px; Background:url (Icon.png) No-repeat-1px-38px;cursor:pointer}. Bluehand{position:absolute; right:0;width:36px; height:36px; Background:url (Icon.png) No-repeat-41px-38px;cursor:pointer}. grayhand{width:34px; height:34px; Background:url ( 
icon.png) No-repeat-83px-38px;cursor:pointer}. redbar{position:absolute; left:42px; margin-top:8px;} 
. bluebar{position:absolute; right:42px; margin-top:8px;} 
. redbar Span{display:block; height:6px; background:red; width:100%;border-radius:4px;} . Bluebar span{display:block; height:6px background: #09f; width:100%;border-radius:4px; position:absolute; 
right:0}. redbar p{line-height:20px; color:red;}  . Bluebar p{line-height:20px; color: #09f; text-align:right; margin-top:6px}

Jquery

When the hand button is clicked, use jquery's $.getjson () to send AJAX requests to the backstage PHP, and if the request succeeds, it will get the JSON data back in the background and jquery will then process the JSON data. The following function: GetData (URL,SID), passed two parameters, URL is the requested background PHP address, Sid represents the current voting topic ID, we in this function, the return of the JSON data have the red and blue votes, as well as the ratio of both sides, according to the proportional ratio of the width of the bar, The asynchronous interaction shows the voting effect.

function GetData (url,sid) { 
 $.getjson (url,{id:sid},function (data) { 
 if (data.success==1) { 
  var w = 208;// Define the total width of the scale bar 
  //Red Square vote 
  $ ("#red_num"). HTML (data.red); 
  $ ("#red"). CSS ("width", data.red_percent*100+ "%"); 
  var red_bar_w = w*data.red_percent-10; 
  Red Square ratio bar width 
  $ ("#red_bar"). CSS ("width", red_bar_w); 
  Blue Party votes 
  $ ("#blue_num"). HTML (data.blue); 
  $ ("#blue"). CSS ("width", data.blue_percent*100+ "%"); 
  var blue_bar_w = w*data.blue_percent; 
  Blue square ratio bar width 
  $ ("#blue_bar"). CSS ("width", blue_bar_w); 
 } else{ 
  alert (data.msg); 
 } 
 ); 

When the page is first loaded, call GetData (), and then click on the red party to vote or give the blue vote the same call GetData (), just passing the parameters are different. Note that the parameter SID in this example is set to 1, based on the ID in the datasheet, and the developer can read the exact ID based on the actual project.

 $ (function () { 
 //Get Initial data 
 GetData ("vote.php", 1); 
 Red Party vote 
 $ (". Redhand"). Click (function () { 
 GetData ("vote.php?action=red", 1); 
 }); 
 Blue Side vote 
 $ (". Bluehand"). Click (function () { 
 GetData ("Vote.php?action=blue", 1); 
 }); 

Php

The front-end request vote.php,vote.php will connect the database according to the received parameters, and call the related function.

Include_once ("connect.php"); 

$action = $_get[' action ']; 
$id = Intval ($_get[' id ')); 
$ip = GET_CLIENT_IP ()///Get IP 

if ($action = = ' Red ') {//Red Party voting 
vote (1, $id, $IP); 
} ElseIf ($action = = ' Blue ') {//Blue voting 
vote (0, $id, $ip); 
} else{//returns the initial data 
Echo jsons ($id) by default; 

The function vote ($type, $id, $IP) is used to make a voting action, $type represents the voter, $id the ID of the voting subject, $IP represents the user's current IP. First, according to the user's current IP, query polling record table votes_ip whether the current IP record exists, if it exists, the user has voted, or update red or blue side of the vote, and the current user voting record to the VOTES_IP table to prevent repeated voting.

Function vote ($type, $id, $ip) { 
 $ip _sql=mysql_query ("Select IP from votes_ip where vid= ' $id ' and ip= '"); 
 $count =mysql_num_rows ($ip _sql); 
 if ($count ==0) {//There is no voting 
 if ($type ==1) {//Red side 
  $sql = "update votes set likes=likes+1 where id=". $id; 
 } else{//Blue side 
  $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); 
 if (mysql_insert_id () >0) { 
  echo jsons ($id); 
 } else{ 
  $arr [' success '] = 0; 
  $arr [' msg '] = ' operation failed, please try again '; 
  echo Json_encode ($arr); 
 } 
 } else{ 
 $arr [' success '] = 0; 
 $arr [' msg '] = ' already voted '; 
 echo Json_encode ($arr); 
 } 

The function jsons ($id) calculates the proportions and returns the JSON data format for front-end calls by querying the polling number of the current ID.

function Jsons ($id) { 
 $query = mysql_query ("select * from votes where id=". $id); 
 $row = Mysql_fetch_array ($query); 
 $red = $row [' likes ']; 
 $blue = $row [' unlikes ']; 
 $arr [' Success ']=1; 
 $arr [' red '] = $red; 
 $arr [' blue '] = $blue; 
 $red _percent = Round ($red/($red + $blue), 3); 
 $arr [' red_percent '] = $red _percent; 
 $arr [' blue_percent '] = 1-$red _percent; 
 
 Return Json_encode ($arr); 

The article also involves obtaining the user's real IP function:get_client_ip (), Click here to see the relevant code: http://www.jb51.net/article/58610.htm

Mysql

Finally, put on the MySQL data table, votes table used to record the total number of red and blue votes, votes_ip table is used to hold the user's voting IP records.

CREATE TABLE IF not EXISTS ' votes ' ( 
 ' id ' int ') NOT NULL auto_increment, 
 ' likes ' int (a) NOT null DEFAULT ' 0 ', 
    ' unlikes ' int () not NULL default ' 0 ', 
 PRIMARY KEY (' id ') 
) Engine=myisam DEFAULT Charset=utf8; 
INSERT into ' votes ' (' id ', ' likes ', ' Unlikes ') VALUES 
(1, a); 
CREATE TABLE IF not EXISTS ' votes_ip ' ( 
 ' id ' int (+) not null, 
 ' vid ' int (a) not NULL, 
 ' IP ' varchar ' Null 

Php+mysql+jquery to achieve top and step voting functions

This article unifies the example, explained uses the Php+mysql+jquery realization "the top" and "the Step" voting function, by records the user IP, the judgment user's voting behavior is valid, this instance can also extend to the voting system.

First we put the "top" and "Step" buttons on the page, #dig_up and #dig_down, which record the number of votes and the percentages of votes on the button.

<div class= "Digg" > <div id= "dig_up" class= "Digup" > <span id= "num_up" ></span> <p> very good, very strong Big! </p> <div id= "bar_up" class= "bar" ><span></span><i></i></div> </div > <div id= "dig_down" class= "Digdown" > <span id= "num_down" ></span> <p> it sucks! </p> <div id= "Bar_down" class= "bar" ><span></span><i></i></div> </div > <div id= "MSG" ></div> </div> $ (function () {//When mouse hovers and leaves two buttons, toggle button background Style $ ("#dig_up"). Hover (functi 
 On () {$ (this). addclass ("digup_on"); 
 },function () {$ (this). Removeclass ("digup_on"); 
 }); 
 $ ("#dig_down"). Hover (function () {$ (this). addclass ("digdown_on"); 
 },function () {$ (this). Removeclass ("digdown_on"); 
 }); 
 Initialization data GetData ("ajax.php", 1); 
 Click $ ("#dig_up") at the top of the button. Click (function () {GetData ("Ajax.php?action=like", 1); 
 }); When you click "Step" $ ("#dig_down"). Click (function () {GetData ("Ajax.php?actiOn=unlike ", 1); 
}); });

The above content implementation of the Php+jquery+mysql based on the red-blue (top-step) voting code, I hope you like.