PHP+jQuery+MySql은 빨간색과 파란색 투표 예제를 구현합니다.

이 글은 주로 PHP+jQuery+MySql로 구현된 레드와 블루 투표의 예시를 소개합니다. 관심 있는 친구들이 참고하시면 도움이 될 것입니다.

먼저 렌더링을 보여드리겠습니다.

HTML

페이지에 빨간색과 파란색 정당의 견해뿐만 아니라 해당 투표 수와 비율, 그리고 예를 들어 #red와 #blue는 각각 빨간색과 파란색을 나타냅니다. .redhand 및 .bluehand는 손 모양 투표 버튼을 만드는 데 사용됩니다. .redbar 및 .bluebar는 빨간색과 파란색 변의 비율을 표시하고 #red_num 및 #blue_num은 양쪽의 투표 수를 표시합니다.

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

CSS

CSS를 사용하여 페이지를 아름답게 만들고, 배경 이미지를 로드하고, 상대 위치를 결정하는 등의 작업을 수행할 수 있습니다. 다음 코드를 직접 복사하여 자신의 프로젝트에서 약간 수정할 수 있습니다.

.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

핸드 버튼을 클릭하면 jQuery의 $.getJSON()을 사용하여 Ajax 요청을 백그라운드 PHP로 보냅니다. 요청이 성공하면 백그라운드에서 반환된 json 데이터를 가져옵니다. jQuery는 json 데이터를 처리합니다. 다음 함수: getdata(url,sid)는 두 개의 매개변수를 전달합니다. URL은 요청의 백엔드 PHP 주소이고 sid는 현재 투표 주제 ID를 나타냅니다. 이 함수에서 반환된 json 데이터에는 두 빨간색 모두의 투표 수가 포함됩니다. 파란색 정당과 양 정당의 비율을 기준으로 비율 막대의 너비를 계산하고 비동기적으로 대화식으로 투표 효과를 표시합니다.

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

페이지가 처음 로딩되면 getdata()를 호출한 후 클릭해서 레드팀에 투표하거나 블루팀에 투표해서 getdata()도 호출하는데 전달되는 매개변수가 다릅니다. 이 예시에서 매개변수 sid는 1로 설정되어 있으며, 이는 데이터 테이블의 id를 기준으로 설정됩니다. 개발자는 실제 프로젝트를 기준으로 정확한 id를 읽을 수 있습니다.

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

PHP

프론트 엔드는 백그라운드에서 vote.php를 요청하고 vote.php는 데이터베이스에 연결하여 수신된 매개변수를 기반으로 관련 기능을 호출합니다.

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

vote($type,$id,$ip) 함수는 투표 작업을 수행하는 데 사용됩니다. $type은 투표 당사자를 나타내고 $id는 투표 주제의 ID를 나타내며 $ip는 사용자의 현재 IP를 나타냅니다. 먼저 사용자의 현재 IP를 기반으로 현재 IP 기록이 vote_ip에 이미 존재하는지 쿼리합니다. 존재하는 경우 해당 사용자가 투표했다는 의미입니다. 그렇지 않으면 빨간색 면 또는 파란색에 대한 투표 수를 업데이트합니다. 현재 사용자 투표 기록을 vote_ip 테이블에 기록하여 반복 투표를 방지합니다.

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

함수 jsons($id)는 현재 ID에 대한 투표 수를 쿼리하고 비율을 계산하며 프런트 엔드 호출에 대한 json 데이터 형식을 반환합니다.

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

이 기사에는 사용자의 실제 IP를 얻는 기능도 포함되어 있습니다: get_client_ip(), 관련 코드를 보려면 여기를 클릭하십시오: http://www.jb51.net/article/58610.htm

MySQL

마지막으로 Mysql 데이터 테이블을 붙여넣으면 vote 테이블은 빨간색과 파란색 정당의 총 투표 수를 기록하는 데 사용되고 vote_ip 테이블은 사용자의 투표 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;

PHP+MySql+jQuery는 "좋아요" 및 "싫어요" 투표 기능을 구현합니다.

이 문서에서는 예제를 결합하여 PHP+MySql+jQuery를 사용하여 구현된 "좋아요" 및 "싫어요" 투표 기능을 설명하고 사용자의 IP를 기록하여 사용자의 투표 동작이 유효한지 여부에 관계없이 이 예는 투표 시스템으로 확장될 수도 있습니다.

먼저 페이지에 "좋아요" 및 "좋아요" 버튼, 즉 #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>
$(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); 
 }); 
});

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

관련 권장 사항:

phpStudy에서 MySQL 버전을 업그레이드하는 방법

PHP로 온라인 계산기 기능 구현

PHP로 스크립트의 비동기 실행 구현

위 내용은 PHP+jQuery+MySql은 빨간색과 파란색 투표 예제를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!