PHP+jQuery+MySql implements red and blue voting examples-PHP Tutorial-php.cn

This article mainly introduces the example of red and blue voting implemented by PHP jQuery MySql. Interested friends can refer to it. I hope it will be helpful to everyone.

Let me show you the renderings first:

HTML

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

<p class="vote"> 
 <p class="votetitle">您对PHP中文网提供的文章的看法？</p> 
 <p class="votetxt">非常实用<span>完全看不懂</span></p> 
 <p class="red" id="red"> 
 <p class="redhand"></p> 
 <p class="redbar" id="red_bar"> 
  <span></span> 
  <p id="red_num"></p> 
 </p> 
 </p> 
 <p class="blue" id="blue"> 
 <p class="bluehand"></p> 
 <p class="bluebar" id="blue_bar"> 
  <span></span> 
  <p id="blue_num"></p> 
 </p> 
 </p> 
</p>

Copy after login

CSS

Use CSS to beautify the page, load background images, determine relative positions, etc. You can directly copy the following code and use it in your own project Just 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}

Copy after login

jQuery

When you click the hand button, use jQuery's $.getJSON() to send an Ajax request to the background php. If the request is successful, you will get the background The json data returned is processed by jQuery. 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 ratio of both parties, calculate the width of the proportion bar based on the ratio, and display the voting effect asynchronously interactively.

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

Copy after login

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

Copy after login

PHP

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

include_once("connect.php"); 

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

if($action==&#39;red&#39;){//红方投票 
vote(1,$id,$ip); 
}elseif($action==&#39;blue&#39;){//蓝方投票 
vote(0,$id,$ip); 
}else{//默认返回初始数据 
echo jsons($id); 
}

Copy after login

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=&#39;$id&#39; and ip=&#39;$ip&#39;"); 
 $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 (&#39;$id&#39;,&#39;$ip&#39;)"; 
 mysql_query($sql_in); 
 if(mysql_insert_id()>0){ 
  echo jsons($id); 
 }else{ 
  $arr[&#39;success&#39;] = 0; 
  $arr[&#39;msg&#39;] = &#39;操作失败，请重试&#39;; 
  echo json_encode($arr); 
 } 
 }else{ 
 $arr[&#39;success&#39;] = 0; 
 $arr[&#39;msg&#39;] = &#39;已经投票过了&#39;; 
 echo json_encode($arr); 
 } 
}

Copy after login

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[&#39;likes&#39;]; 
 $blue = $row[&#39;unlikes&#39;]; 
 $arr[&#39;success&#39;]=1; 
 $arr[&#39;red&#39;] = $red; 
 $arr[&#39;blue&#39;] = $blue; 
 $red_percent = round($red/($red+$blue),3); 
 $arr[&#39;red_percent&#39;] = $red_percent; 
 $arr[&#39;blue_percent&#39;] = 1-$red_percent; 
 
 return json_encode($arr); 
}

Copy after login

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.jb51.net/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 &#39;0&#39;, 
 `unlikes` int(10) NOT NULL DEFAULT &#39;0&#39;, 
 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;

Copy after login

PHP MySql jQuery implements the "like" and "dislike" voting functions

This article combines examples to explain the "like" and "dislike" voting functions implemented using PHP MySql jQuery. Record the user IP to 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 proportion of votes are recorded on the buttons respectively. percentage.

<p class="digg"> 
 <p id="dig_up" class="digup"> 
 <span id="num_up"></span> 
 <p>很好，很强大！</p> 
 <p id="bar_up" class="bar"><span></span><i></i></p> 
 </p> 
 <p id="dig_down" class="digdown"> 
 <span id="num_down"></span> 
 <p>太差劲了！</p> 
 <p id="bar_down" class="bar"><span></span><i></i></p> 
 </p> 
 <p id="msg"></p> 
</p>
$(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?action=like",1); 
 }); 
 //单击“踩”时 
 $("#dig_down").click(function(){ 
 getdata("ajax.php?action=unlike",1); 
 }); 
});

Copy after login

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study.

Related recommendations:

How to upgrade the MySQL version in phpStudy

PHP implements online calculator function

PHP method to implement asynchronous execution of scripts

The above is the detailed content of PHP+jQuery+MySql implements red and blue voting examples. For more information, please follow other related articles on the PHP Chinese website!