PHP, MySql, jQuery는 '좋아요' 및 '싫어요' 투표 기능을 구현합니다.-PHP 튜토리얼-php.cn

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

WBOY

풀어 주다： 2016-07-25 08:55:30

원래의

851명이 탐색했습니다.

존재하지 않는 경우 테이블 생성 `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;
`votes`에 삽입(`id`, `likes`, `unlikes`) 값
(1, 30, 10)
존재하지 않는 경우 테이블 생성 `votes_ip`(
`id` int(10) NOT NULL,
`vid` int(10) NOT NULL,
`ip` varchar(40) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

코드 복사

2, html 페이지 부분 페이지에는 각각 '좋아요'와 '싫어요'를 나타내는 두 개의 버튼, 즉 #dig_up과 #dig_down이 버튼에 기록되어 있어 투표 결과를 매우 직관적으로 비교할 수 있습니다.

;span id="num_up">

매우 훌륭하고 매우 강력합니다!

;/div>

안타깝습니다.

;/div>

코드 복사

3. CSS 코드 부분 CSS를 사용하여 페이지를 아름답게 만들고, diggs.png라는 그림을 사용하여 다양한 버튼 배경을 배치하고, 각 요소 간의 관계를 배치할 위치를 설정해야 합니다.

.digg{너비:420px; 높이:120px; 여백:80px 자동 20px 자동; 위치:상대}

#dig_up,#dig_down{width :200px; 높이:48px; 여백:10px; 테두리:1px 솔리드 #d3d3d3; 커서:포인터}

.url(diggs.png) 없음 -반복 4px 2px;}

.digdown{배경:url(diggs.png) 반복 안함 4px -102px;}
.digdown_on{배경:url(diggs.png) 반복 없음 4px -154px;}
#num_up,#num_down{position:absolute; right:6px;
#dig_up p{height:24px; line-height:24px; color:#360}
#dig_down p{height:24px; line-height:24px; color:#f30}
.bar 너비:100px; 선 높이:12px; 테두리:1px
위치:상대적; 텍스트 정렬:중심}
스팬{display:block;
.bar i{위치:절대; 상단:0; 왼쪽:104px;}
#bar_up 스팬{배경:#360}
#bar_down 스팬{배경:#f60}
#msg 위치:절대:20px; 상단:40px; 색상:#f00}
코드 복사
이 예제도 jQuery에 의존하므로 먼저 페이지에 jquery 라이브러리 파일을 로드하는 것을 잊지 말아야 합니다. 먼저 jQuery는 두 개의 투표 버튼 위로 마우스를 이동할 때 변경되는 배경 이미지를 각각 처리해야 하며, 이는 addClass() 및 RemoveClass()를 통해 수행됩니다.

$(function(){

//마우스가 투표 버튼 방향으로 또는 반대 방향으로 슬라이드할 때 배경 스타일 변경

$(" #dig_up" ).hover(function(){

$(this).addClass("digup_on");

$(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 요청은 백그라운드 처리의 반환 결과에 따라 투표에 성공하면 투표 수와 페이지의 해당 요소 내용이 변경됩니다. 백분율.
2. function getdata(url,sid){
3. $.getJSON(url,{id:sid},function(data){
4. if (data.success==1){//투표 성공
5. $("#num_up").html(data.like)
6. //폭을 조절하여 진행률 표시줄 효과 표시
7. $ ( "#bar_up 범위").css("width",data.like_percent)
8. $("#bar_up i").html(data.like_percent)
9. $("#num_down").html ( data.unlike);
10. $("#bar_downspan").css("width",data.unlike_percent)
11. $("#bar_down i").html(data.unlike_percent); > }else{//투표 실패 bbs.it-home.org
12. $("#msg").html(data.msg).show().css({'opacity':1,'top': ' 40px'})
13. .animate({top:'-50px',opacity:0}, "느림")
14. }
15. })
16. }
코드 복사
4, php 코드 부분 do.php를 통해 데이터 획득이 완료됩니다. Do.php는 프런트엔드 페이지에서 전달된 매개변수에 따라 데이터베이스에 연결하고 조건에 따라 "상위", "좋아요" 및 초기 데이터 처리 모듈에 들어갑니다. 다음은 do.php 모듈 코드 구조입니다:
1. include_once("connect.php");//데이터베이스에 연결
3. $action = $ _GET[ 'action'];
4. $id = 1;
5. $ip = get_client_ip();//IP 가져오기
7. if($action=='like'){//Top
8. likes(1,$id,$ip);
9. }elseif($action=='unlike'){//dislike
10. likes(0,$id,$ip)
11. }else {
12. echo jsons($id);
코드 복사
likes()는 "좋아요"를 처리하는 데 사용됩니다. "dislike" 투표 모듈은 먼저 사용자 IP가 투표했는지 여부를 결정합니다. 투표한 경우 해당 프롬프트를 직접 반환합니다. 사용자 IP에 투표 기록이 없으면 투표 테이블을 업데이트하고 해당 투표에 1을 추가합니다. 해당 사용자를 vote_ip 테이블에 삽입합니다. 작업이 성공하면 jsons()가 호출되어 투표 후 투표 수 및 비율과 같은 데이터가 출력됩니다. 입력됩니다.
1. $ip_sql=mysql_query("다음에서 IP 선택 vote_ip where vid='$id' and ip='$ip'");
2. $count=mysql_num_rows($ip_sql);
3. if($count==0){//아직 좋아요가 없습니다
4. if($type==1){//Like
5. $sql = "update vote set likes=likes 1 where id=".$id;
6. }else{//Dislike
7. $sql = " update vote set likes=unlikes 1 where id=".$id;
8. }
9. mysql_query($sql);
11. $sql_in = "vote_ip(vid,ip) 값에 삽입 ( ' $id','$ip')";
12. mysql_query($sql_in);
14. if(mysql_insert_id()>0){
15. echo jsons($id);
16. } else{
17. $arr['success'] = 0;
18. $arr['msg'] = '작업이 실패했습니다. 다시 시도하세요.'
19. echo json_encode($arr) }
20. }else{
21. $msg = $type==1?'좋아요를 표시했습니다':'좋아요를 표시하지 않았습니다'
22. $arr['success'] = 0
23. $ arr[' msg'] = $msg;
24. echo json_encode($arr);
25. }
26. }
30. 코드 복사
함수 jsons()는 투표 테이블에서 해당 ID에 대한 투표 수를 읽고, 백분율을 계산하고, 최종적으로 이 정보를 프런트 엔드 페이지에서 사용할 수 있도록 json 형식으로 출력하는 데 사용됩니다.
function jsons($id){
$query = mysql_query("select * from vote where id=". $id);
$row = mysql_fetch_array($query);
$like = $row['likes']
$unlike = $row['unlikes']; '성공']=1;
$arr['like'] = $like;
$arr['unlike'] = $unlike
$like_percent = round($like/($like $ like),3)*100;
$arr['like_percent'] = $like_percent.'%'
$arr['unlike_percent'] = (100-$like_percent)
return json_encode($arr);
}
코드 복사

이 예는 일반적인 "좋아요"에 적용할 수 있습니다. 이의제기 의견 및 투표 시스템과 같은 시나리오에서는 Ajax 원칙을 사용하여 구현된 프런트엔드 및 백엔드 상호 작용 기능이 사용됩니다. do.php에는 사용자의 실제 IP를 얻기 위한 get_client_ip() 함수도 있습니다. 이 기사에서 제공하는 소스 코드 패키지에서 이를 다운로드하여 연구할 수 있습니다.