Comment like and dislike function implemented by PHP combined with jQuery_jquery

When we browse the web and we want to agree or disagree with the views in the web content such as articles and comments, we can vote by clicking "Like" and "Dislike" on the web page. Developers can implement the entire interaction process asynchronously through ajax, thereby improving user experience.

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. If you have basic knowledge of PHP, MySql and jQuery, then please continue reading.

Get ready

We first need to prepare the mysql data table required to run the entire instance. The instance requires two tables. The votes table is used to record the number of user votes for corresponding articles or comments, and we write a piece of data with an id of 1 by default. For demonstration purposes, the votes_ip table is used to record the IP of each user's vote. The program determines whether the vote is valid based on the user's IP.

 
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; 

HTML

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.

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

CSS

We must use CSS to beautify the page. We use a picture diggs.png to position different button backgrounds, and position the positional relationship between each element by setting position.

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

jQuery

This example also relies on jQuery, so you must not forget to load the jquery library file in the page first.

First of all, 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(){ 
  //鼠标滑向和离开投票按钮时，变换背景样式 
  $("#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("do.php",1); 
   
  //单击“顶”时 
  $("#dig_up").click(function(){ 
    getdata("do.php?action=like",1); 
  }); 
  //单击“踩”时 
  $("#dig_down").click(function(){ 
    getdata("do.php?action=unlike",1); 
  }); 
}); 

Then, we initialize the data, that is, after the page is loaded, we need to display the initial voting results, including the number of votes and the percentage. We 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){//投票成功 
      $("#num_up").html(data.like); 
      //通过控制宽度来显示百分比进度条效果 
      $("#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{//投票失败 
      $("#msg").html(data.msg).show().css({'opacity':1,'top':'40px'}) 
      .animate({top:'-50px',opacity:0}, "slow"); 
    } 
  }); 
} 

PHP

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

 
include_once("connect.php");//连接数据库 
 
$action = $_GET['action']; 
$id = 1; 
$ip = get_client_ip();//获取ip 
 
if($action=='like'){//顶 
  likes(1,$id,$ip); 
}elseif($action=='unlike'){//踩 
  likes(0,$id,$ip); 
}else{ 
  echo jsons($id); 
} 

The function likes() is used to handle the "like" and "dislike" voting modules. First, it determines whether the user IP has already voted. If it has voted, it will directly return the corresponding prompt. If the user IP has no voting record, it will update the votes table. , add 1 to the corresponding number of votes, and then insert the user's IP record into the votes_ip table. If the operation is successful, call jsons() to output 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){//还没有顶过 
    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{ 
    $msg = $type==1?'您已经顶过了':'您已经踩过了'; 
    $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 the front-end page.

 
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, voting systems and other scenarios, using the front-end and back-end interaction functions implemented by Ajax principles. There is also a function get_client_ip() in do.php to obtain the user's real IP. I have published an article about this function before. It has been packaged in the code and is welcome to download. I will not post it here.

The above is the entire content of this article, I hope you all like it.