PHP, MySql, jQuery implement 'like' and 'dislike' voting functions

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;

2, html page part On the page, there are two buttons that represent "like" and "dislike" respectively, namely #dig_up and #dig_down. The number of votes and their respective percentages are recorded on the buttons, making it very intuitive to compare the voting results.

 < ;p>Very good, very powerful!

Copy code

3, css code part You must use CSS to beautify the page, use a picture called diggs.png to position different button backgrounds, and set position to position the positional relationship between each element.

.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}

2, jquery part This example also relies on jQuery, so you must not forget to load the jquery library file in the page first. First, jQuery needs to process the background images that change when the mouse slides over the two voting buttons respectively, which is achieved through addClass() and removeClass().

$(function(){
 //Change the background style when the mouse slides towards and away from the voting button
 $("#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("do.php",1);

 //When clicking "Like"
 $("#dig_up").click(function(){
 getdata("do.php?action=like",1);
 });
 //Click "
 $("#dig_down").click(function(){
 getdata("do.php?action=unlike",1);
 });
});

Then, initialize the data, that is, after the page is loaded, the initial voting results should be displayed, including the number of votes and the percentage. Write the operation of obtaining data in a custom function getdata(), and complete the loading of data by passing different request addresses and id parameters. In the function getdata(), an ajax request is sent to the URL. According to the return result of the background processing, if the vote is successful, the corresponding element content in the page will be changed, including the number of votes and the percentage.

function getdata(url,sid){
 $.getJSON(url,{id:sid},function(data){
 if(data.success==1){//The vote was successful
 $( "#num_up").html(data.like);
 //Display the percentage progress bar effect by controlling the width
 $("#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{//Vote failed bbs.it-home.org
 $("#msg").html(data.msg).show( ).css({'opacity':1,'top':'40px'})
 .animate({top:'-50px',opacity:0}, "slow");
 }
 });
}

4, php code part The acquisition of data is completed through do.php. Do.php connects to the database according to the parameters passed by the front-end page, and enters the "top", "dislike" and initial data processing modules according to the conditions. The following is the do.php module code structure:

include_once("connect.php");//Connect to the database

$action = $_GET['action'];
$id = 1;
$ip = get_client_ip() ;//Get ip

if($action=='like'){//Like
 likes(1,$id,$ip);
}elseif($action=='unlike'){//Dislike
 likes(0,$id,$ip);
}else{
 echo jsons($id);
}

The function likes() is used to handle the "like" and "dislike" voting modules , the first step is to determine whether the user IP has already voted. If the user IP has voted, the corresponding prompt will be returned directly. If the user IP has no voting record, the votes table will be updated, the corresponding vote number will be increased by 1, and then the user's IP will be inserted into the votes_ip table. Record, if the operation is successful, call jsons() to output data such as the number of votes and percentage after voting, otherwise enter a prompt message indicating that the operation failed.

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){//Not liked yet
 if($type==1){//Liked
 $sql = "update votes set likes =likes+1 where id=".$id;
 }else{//dislike
 $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 {
 $msg = $type==1?'You have liked':'You have disliked';
 $arr['success'] = 0;
 $arr['msg'] = $msg;
 echo json_encode($arr);
 }
}

The function jsons() is used to read the number of votes for the corresponding id in the votes table, calculate the percentage, and finally output this information in json format , for use by front-end pages.

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

This example can be applied to common "like", agree and disagree comments, In scenarios such as voting systems, front-end and back-end interactive functions implemented using Ajax principles are used. There is also a function get_client_ip() in do.php to obtain the user’s real IP. In the source code package provided in this article, you can download it and study it.