php+jQuery를 사용하여 '좋아요' 및 '싫어요' 투표 기능을 구현하는 방법

이 문서에서는 예제를 사용하여 사용자의 투표 동작이 유효한지 확인하기 위해 PHP+MySql+jQuery를 사용하여 구현된 "좋아요" 및 "싫어요" 투표 기능을 설명합니다.

웹을 탐색할 때 기사, 댓글 등 웹 콘텐츠의 견해에 동의하거나 반대하고 싶을 때 웹 페이지에서 "좋아요"와 "좋아요"를 클릭하여 투표할 수 있습니다. 개발자는 ajax를 통해 전체 상호 작용 프로세스를 비동기적으로 구현할 수 있으므로 사용자 경험이 향상됩니다.

먼저 전체 인스턴스를 실행하는 데 필요한 mysql 데이터 테이블을 준비해야 합니다. 인스턴스에는 두 개의 테이블이 필요합니다. vote 테이블은 해당 기사나 댓글에 대한 사용자 투표 수를 기록하는 데 사용되며 다음과 같은 데이터를 작성합니다. Demonstration을 위해 기본적으로 id는 1이며, vote_ip 테이블은 각 사용자의 투표에 대한 IP를 기록하는 데 사용되며, 프로그램은 사용자의 IP를 기반으로 투표가 유효한지 여부를 결정합니다.

Datasheet

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

페이지에는 각각 '좋아요'와 '싫어요'를 나타내는 두 개의 버튼, 즉 #dig_up과 #dig_down이 있으며 투표는 다음에 기록됩니다. 버튼 투표 수와 해당 비율을 통해 투표 결과를 매우 직관적으로 비교할 수 있습니다.

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

CSS

그림 diggs.png를 사용하여 다양한 버튼 배경을 배치하고 위치를 설정하여 각 요소 간의 위치 관계를 배치해야 합니다.

.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

이 예제도 jQuery에 의존하므로 페이지에서 jquery 라이브러리 파일을 먼저 로드하는 것을 잊지 마세요.
먼저 jQuery는 addClass()와 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); 
 }); 
});

그런 다음 데이터를 초기화합니다. 즉, 페이지가 로드된 후 투표 수와 백분율을 포함한 초기 투표 결과를 표시해야 합니다. 사용자 정의 함수 getdata()에서 데이터를 얻는 작업을 작성하고 다양한 요청 주소와 ID 매개변수를 전달하여 데이터 로드를 완료합니다. getdata() 함수에서 ajax 요청은 백그라운드 처리의 반환 결과에 따라 투표에 성공하면 투표 수와 페이지의 해당 요소 내용이 변경됩니다. 백분율.

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

데이터 획득은 do.php를 통해 이루어집니다. do.php는 프런트 엔드 페이지에서 전달한 매개 변수에 따라 데이터베이스에 연결하고 "like"를 입력합니다. "그리고 초기 데이터 처리 모듈인 do.php 모듈의 코드 구조는 다음과 같습니다.

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

함수 likes()를 사용하여 "좋아요"를 처리합니다. 첫 번째는 사용자 IP가 이미 투표했는지 확인하는 것입니다. 사용자 IP에 투표 기록이 없으면 해당 프롬프트가 직접 반환됩니다. 해당 투표 수는 1씩 증가하고 사용자의 IP 기록은 vote_ip 테이블에 삽입됩니다. 작업이 성공하면 jsons()는 투표 후 투표 수 및 백분율과 같은 데이터를 출력하고, 그렇지 않으면 프롬프트를 입력합니다. 작업이 실패했음을 알리는 메시지입니다.

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

jsons() 함수는 투표 테이블에서 해당 ID에 대한 투표 수를 읽고, 백분율을 계산하고, 최종적으로 이 정보를 프런트 엔드 페이지에서 사용할 수 있도록 json 형식으로 출력하는 데 사용됩니다. .

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

이 예는 Ajax 원칙에 따라 구현된 프런트엔드 및 백엔드 상호 작용 기능을 사용하여 일반적인 "좋아요", 의견 동의 및 반대, 투표 시스템 및 기타 시나리오에 적용될 수 있습니다. do.php에는 사용자의 실제 IP를 얻기 위한 get_client_ip() 함수도 있습니다.

요약: 위 내용이 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

관련 권장 사항:

php XML 인터페이스 데이터를 가져오는 방법 클래스 메서드

위 내용은 php+jQuery를 사용하여 '좋아요' 및 '싫어요' 투표 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!