Implementing red and blue (upvote) voting code based on PHP jQuery MySql, jquerymysql_PHP tutorial

Based on PHP jQuery MySql to implement red and blue (upvote) voting code, jquerymysql

I will show you the rendering first:

View demo Download source code

This is a very practical voting example, applied in a two-party viewpoint voting scenario. Users can choose to vote for the party that represents their own views. This article takes the voting of the red and blue parties as an example. Through front-end and back-end interaction, it intuitively displays the number and proportion of votes cast by the red and blue parties. It is widely used.

This article is a comprehensive knowledge application article, which requires you to have basic knowledge of PHP, jQuery, MySQL, html and css.

HTML

We need to display the views of the red and blue parties on the page, as well as the corresponding number and proportion of votes, as well as hand pictures for voting interaction. In this example, #red and #blue represent the red and blue parties respectively. .redhand and .bluehand are used as hand-shaped voting buttons. .redbar and .bluebar show the proportion of red and blue sides. #red_num and #blue_num show the number of votes from both sides.

<div class="vote"> 
 <div class="votetitle">您对Helloweba提供的文章的看法？</div> 
 <div class="votetxt">非常实用<span>完全看不懂</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> 
</div> 

CSS

Use CSS to beautify the page, load background images, determine relative positions, etc. You can directly copy the following code and make slight modifications in your own project.

.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 an Ajax request to the background php. If the request is successful, the json data returned by the background will be obtained, and jQuery will process the json data. The following function: getdata(url,sid), passes two parameters. URL is the backend PHP address of the request, and sid represents the current voting topic ID. In this function, the json data returned includes the number of votes from both red and blue parties, and The proportion of both parties, the width of the proportion bar is calculated based on the proportion, and the voting effect is displayed interactively asynchronously.

function getdata(url,sid){ 
 $.getJSON(url,{id:sid},function(data){ 
 if(data.success==1){ 
  var w = 208; //定义比例条的总宽度 
  //红方投票数 
  $("#red_num").html(data.red); 
  $("#red").css("width",data.red_percent*100+"%"); 
  var red_bar_w = w*data.red_percent-10; 
  //红方比例条宽度 
  $("#red_bar").css("width",red_bar_w); 
  //蓝方投票数 
  $("#blue_num").html(data.blue); 
  $("#blue").css("width",data.blue_percent*100+"%"); 
  var blue_bar_w = w*data.blue_percent; 
  //蓝方比例条宽度 
  $("#blue_bar").css("width",blue_bar_w); 
 }else{ 
  alert(data.msg); 
 } 
 }); 
} 

When the page is loaded for the first time, getdata() is called, and then click to vote for the red team or vote for the blue team to also call getdata(), but the parameters passed are different. Note that the parameter sid in this example is set to 1, which is set based on the id in the data table. Developers can read the accurate id based on the actual project.

 $(function(){ 
 //获取初始数据 
 getdata("vote.php",1); 
 //红方投票 
 $(".redhand").click(function(){ 
 getdata("vote.php?action=red",1); 
 }); 
 //蓝方投票 
 $(".bluehand").click(function(){ 
 getdata("vote.php?action=blue",1); 
 }); 
}); 

PHP

The front end requests vote.php in the background, and vote.php will connect to the database and call related functions based on the received parameters.

include_once("connect.php"); 

$action = $_GET['action']; 
$id = intval($_GET['id']); 
$ip = get_client_ip();//获取ip 

if($action=='red'){//红方投票 
vote(1,$id,$ip); 
}elseif($action=='blue'){//蓝方投票 
vote(0,$id,$ip); 
}else{//默认返回初始数据 
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 topic, and $ip represents the user's current IP. First, based on the user's current IP, query whether the current IP record already exists in the voting record table votes_ip. If it exists, it means that the user has voted. Otherwise, update the number of votes for the red side or the blue side, and write 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='$ip'"); 
 $count=mysql_num_rows($ip_sql); 
 if($count==0){//还没有投票 
 if($type==1){//红方 
  $sql = "update votes set likes=likes+1 where id=".$id; 
 }else{//蓝方 
  $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'] = '操作失败，请重试'; 
  echo json_encode($arr); 
 } 
 }else{ 
 $arr['success'] = 0; 
 $arr['msg'] = '已经投票过了'; 
 echo json_encode($arr); 
 } 
} 

The function jsons($id) queries the number of votes for the current id, calculates the proportion and returns the json data format for the front-end call.

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 the function of obtaining the user’s real IP: get_client_ip(), Click here to see the relevant code: http://www.bkjia.com/article/58610.htm

MySQL

Finally, paste the Mysql data table. The votes table is used to record the total number of votes from both red and blue parties, and the votes_ip table is used to store the user’s voting IP records.

CREATE TABLE IF NOT EXISTS `votes` ( 
 `id` int(10) NOT NULL AUTO_INCREMENT, 
 `likes` int(10) NOT NULL DEFAULT '0', 
 `unlikes` int(10) 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(10) NOT NULL, 
 `vid` int(10) NOT NULL, 
 `ip` varchar(40) NOT NULL 
) ENGINE=MyISAM DEFAULT CHARSET=utf8; 

PHP MySql jQuery implements the like and dislike voting function

This article combines examples to explain the "like" and "dislike" voting functions implemented using PHP MySql jQuery. By recording the user's IP, it can determine whether the user's voting behavior is valid. This example can also be extended to the voting system.

First we place the "like" and "dislike" buttons on the page, namely #dig_up and #dig_down. The number of votes and the percentage of votes are recorded on the buttons respectively.

<div class="digg"> 
 <div id="dig_up" class="digup"> 
 <span id="num_up"></span> 
 <p>很好，很强大！</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>太差劲了！</p> 
 <div id="bar_down" class="bar"><span></span><i></i></div> 
 </div> 
 <div id="msg"></div> 
</div>
$(function(){ 
 //当鼠标悬浮和离开两个按钮时，切换按钮背景样式 
 $("#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"); 
 }); 
 //初始化数据 
 getdata("ajax.php",1); 
 //单击“顶”时 
 $("#dig_up").click(function(){ 
 getdata("ajax.php&#63;action=like",1); 
 }); 
 //单击“踩”时 
 $("#dig_down").click(function(){ 
 getdata("ajax.php&#63;action=unlike",1); 
 }); 
});

The above content implements the red and blue (upvote) voting code based on PHP jQuery MySql. I hope you like it.

http://www.bkjia.com/PHPjc/1049126.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/1049126.htmlTechArticleImplementing red and blue (upvote) voting code based on PHP jQuery MySql, jquerymysql will show you the renderings first: View demonstration Download the source code This is a very practical voting example, applied to both parties...