Php+jquery+mysql implementation of red-blue (top-stepping) voting code, jquerymysql_php tutorial

Implementation of red-blue (top-stepping) voting code based on Php+jquery+mysql, Jquerymysql

Show us First:

View Demo Download source code

This is a very practical example of voting, applied in both views against the voting scene. The user can choose to support the party on behalf of their own views to vote, this article to the red and blue vote for example, through the front and back interactive, visual display of the red and blue sides votes and the proportion of the application is very extensive.

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

Html

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

  What do you think of the articles provided by Helloweba?  very practical, completely ignorant .            
                
      

Css

Use CSS to beautify the page, load the background image, determine the relative position and so on, you can directly copy the following code, in their own project to modify a little.

. 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, jquery's $.getjson () is used to send AJAX requests to the background PHP, and if the request succeeds, the JSON data will be returned in the background, and jquery will then process the JSON data. The following functions: GetData (URL,SID), passed two parameters, URL is the request of the background PHP address, Sid represents the current voting subject ID, we in this function, the returned JSON data has the red and blue sides of the voting number, as well as the ratio of the two sides, according to the proportion of the width of the bar calculation, Asynchronously interactive display of voting effects.

function GetData (url,sid) {  $.getjson (url,{id:sid},function (data) {  if (data.success==1) {   var w = 208;/// Defines the total width of the scale bar   //Red Square votes   $ ("#red_num"). HTML (data.red);   $ ("#red"). CSS ("width", data.red_percent*100+ "%");   var red_bar_w = w*data.red_percent-10;   Red Square Proportional Bar width   $ ("#red_bar"). CSS ("width", red_bar_w);   Blue square votes of   $ ("#blue_num"). HTML (data.blue);   $ ("#blue"). CSS ("width", data.blue_percent*100+ "%");   var blue_bar_w = w*data.blue_percent;   Blue Square Proportional 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 side to vote or give Blue the same call GetData (), just pass the parameters are different. Note that the parameter SID in this example is set to 1 and is based on the ID in the data table, and the developer can read the exact ID based on the actual item.

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

Php

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

Include_once ("connect.php"); $action = $_get[' action ']; $id = Intval ($_get[' id "); $ip = Get_client_ip ();//Get IP if ($action = = ' Red ') {//Red Square poll vote (1, $id, $IP);} ElseIf ($action = = ' Blue ') {//Blue poll vote (0, $id, $IP);} else{//returns the initial data by default Echo jsons ($id);}

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

Function vote ($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 voted  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 retry ';   echo Json_encode ($arr);  }  } else{  $arr [' success '] = 0;  $arr [' msg '] = ' already voted ';  echo Json_encode ($arr);  

The function jsons ($id) calculates the scale and returns the JSON data format for front-end invocation by querying the number of votes in 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;   

The paper also deals with the function of obtaining a user's real IP:get_client_ip (), Click here to see the relevant code: http://www.bkjia.com/article/58610.htm

Mysql

Finally, the MySQL data sheet is affixed, the votes table is used to record the total number of votes in both red and blue, and the VOTES_IP table is used to store the user's voting IP records.

CREATE TABLE IF not EXISTS ' votes ' (  ' ID ' int.) NOT NULL auto_increment,  ' likes ' int (ten) not null DEFAULT ' 0 ', 
   ' unlikes ' int (ten) not NULL default ' 0 ',  PRIMARY KEY (' id ')) engine=myisam default Charset=utf8; INSERT into ' votes ' (' id ', ' likes ', ' Unlikes ') VALUES (1, 30, 10); CREATE TABLE IF not EXISTS ' votes_ip ' (  ' id ' int (ten) not null,  ' vid ' int (ten) NOT NULL,  

Php+mysql+jquery implement top and step voting functions

Based on the example, this paper explains the "Top" and "step" voting functions realized by using Php+mysql+jquery, and by recording the user's IP, judging whether the voting behavior of the user is effective, the example can be extended to the voting system.

First we place the "top" and "Step" buttons on the page, namely #dig_up and #dig_down, which record the number of votes voted and the percentage of each.

      
Very good, very powerful!
          
Oh, that sucks!
       $ (function () {  ///When the mouse hovers and leaves two buttons, the toggle button background style is  $ ("#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");  });  Initialize data  getdata ("ajax.php", 1);  Click "Top" when  $ ("#dig_up"). Click (function () {  GetData ("Ajax.php?action=like", 1);  });  Click on "Step" when  $ ("#dig_down"). Click (function () {  GetData ("Ajax.php?action=unlike", 1);  });

The above content implemented based on PHP+JQUERY+MYSQL implementation of red-blue (top-stepping) voting code, I hope you like.

http://www.bkjia.com/PHPjc/1049126.html www.bkjia.com true http://www.bkjia.com/PHPjc/1049126.html techarticle based on php+jquery+mysql implementation of red-blue (top-stepping) voting code, Jquerymysql first show you: View demo Download Source This is a very practical example of voting, applied on both sides ...

