ساخت سیستم رای گیری مشابه فیسبوک با اموجی
سایت های شبکه اجتماعی مانند فیسبوک به دلیل پشتیبانی از تصاویر ایموجی محبوبیت فراوانی دارند. همچنین در کیبورد تمام گوشی های هوشمند بخش Emoji ها نیز وجود دارد.
و حالا قراره ما با PHP و css و jquery یک سیستم رای گیری با اموجی بسازیم که زیبایی خاصی میده به وبسایت شما.
البته مشابه همین سیستم رای گیری با اموجی برای وردپرس بصورت نیمه رایگان نیز عرضه شده ولی ممکنه خیلی از سایت ها مثل رویکت از هسته های شخصی استفاده کنن و دیگه افزونه های وردپرس کاربردی نیست برای این دسته از وبسایت ها.
در این پروژه ما با دیتابیس کار نمیکنیم و شما خودتون بهتره برنامه نویسی این بخش رو انجام بدین و تنها در اینجا ساخت رابط کاربری رو یادمیگیرید.
برای شروع یک فایل vote.html میسازیم :
<!DOCTYPE html> <html lang="en-GB" prefix="og: http://ogp.me/ns#" class="no-js no-svg"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body class="post-template-default single single-post single-format-standard do-etfw has-header-image has-sidebar colors-light"> <br><br><br><br><br><br><br><br> <div class="dw-reactions dw-reactions-post-****" data-type="vote" data-nonce="*#*#*#" data-post="****"> <div class="dw-reactions-button"> <span class="dw-reactions-main-button ">پسند</span> <div class="dw-reactions-box"> <span class="dw-reaction dw-reaction-like"><strong>پسند</strong></span> <span class="dw-reaction dw-reaction-love"><strong>عالیه</strong></span> <span class="dw-reaction dw-reaction-haha"><strong>خخخ</strong></span> <span class="dw-reaction dw-reaction-wow"><strong>نه!</strong></span> <span class="dw-reaction dw-reaction-sad"><strong>اندوه</strong></span> <span class="dw-reaction dw-reaction-angry"><strong>خشم</strong></span> </div> </div> <div class="dw-reactions-count"> <span class="dw-reaction-count dw-reaction-count-like"><strong>12</strong></span> <span class="dw-reaction-count dw-reaction-count-love"><strong>13</strong></span> <span class="dw-reaction-count dw-reaction-count-haha"><strong>14</strong></span> <span class="dw-reaction-count dw-reaction-count-wow"><strong>15</strong></span> <span class="dw-reaction-count dw-reaction-count-sad"><strong>16</strong></span> <span class="dw-reaction-count dw-reaction-count-angry"><strong>17</strong></span> </div> </div> </body> </html>
این قالب اصلی ما برای رای گیری هست که باید فایل css و jquery به اون اضافه بشه و کمی هم کد نویسی.
جای **** باید شماره پست شما یا شماره نظرنسجی شما قرار بگیره و جای *#*#* باید یک کد تصادفی قرار بگیره که جلوگیری کنه از اسپم شدن که پس از نظردهی این کد باطل میشه و میتونید مطالب زیادی رو در این مورد پیدا کنید در گوگل...
برای دریافت آخرین نسخه jquery میتونید به سایت زیر سر بزنید:
یک فایل به نام style.css ایجاد میکنیم :
@keyframes reaction {
0% {
width: 38px;
height: 38px;
top: 60px;
}
35% {
width: 48px;
height: 48px;
top: 5px;
}
100% {
width: 38px;
height: 38px;
top: 8px;
}
}
.dw-reactions {
font-family: Arial, sans-serif;
margin: 10px 0;
border:solid #eee;
border-width: 1px 0;
padding: 5px 0;
}
.dw-reactions:before,
.dw-reactions:after {
content: " ";
display: table;
}
.dw-reactions:after {
clear: both;
}
.dw-reactions {
*zoom: 1;
}
.dw-reactions-button {
position: relative;
cursor: pointer;
float: left;
}
.dw-reactions-main-button {
font-weight: bold;
font-size: 14px;
display: block;
line-height: 30px;
}
.dw-reactions-main-button:before {
content: "";
display: block;
width: 20px;
height: 20px;
margin: 4px 4px 6px 0;
float: left;
background: url(img/like.png);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.dw-reactions-main-button.dw_reaction_like {
color: rgb(88, 144, 255);
}
.dw-reactions-main-button.dw_reaction_love {
color: rgb(242, 82, 104);
}
.dw-reactions-main-button.dw_reaction_haha {
color: rgb(240, 186, 21);
}
.dw-reactions-main-button.dw_reaction_wow {
color: rgb(240, 186, 21);
}
.dw-reactions-main-button.dw_reaction_sad {
color: rgb(240, 186, 21);
}
.dw-reactions-main-button.dw_reaction_angry {
color: rgb(247, 113, 75);
}
.dw-reactions-main-button.dw_reaction_love:before {
background-image: url(img/love.png);
}
.dw-reactions-main-button.dw_reaction_haha:before {
background-image: url(img/haha.png);
}
.dw-reactions-main-button.dw_reaction_wow:before {
background-image: url(img/wow.png);
}
.dw-reactions-main-button.dw_reaction_sad:before {
background-image: url(img/sad.png);
}
.dw-reactions-main-button.dw_reaction_angry:before {
background-image: url(img/angry.png);
}
.dw-reactions-box {
position: absolute;
top: -60px;
left: 0;
background: #fff;
padding: 10px;
border: 1px solid rgba(0,0,0,0.2);
border-radius: 40px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);
box-sizing: border-box;
width: 314px;
height: 60px;
display: none;
z-index: -1;
}
.dw-reactions-button.reaction-show .dw-reactions-box {
display: block;
z-index: 1;
}
.dw-reactions-box .dw-reaction {
display: block;
position: absolute;
width: 38px;
height: 38px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
left: 12px;
top: 8px;
opacity: 0;
transform: scale(1, 1);
transition: opacity .5s ease-in-out 1s, transform .07s ease-in-out 0s, top .07s ease-in-out 0s;
}
.dw-reactions-button.reaction-show .dw-reaction {
opacity: 1;
animation-name: reaction;
animation-duration: .5s;
}
.dw-reactions-box .dw-reaction-like {
left: 12px;
transition-delay: 0s;
background-image: url(img/like.png);
}
.dw-reactions-box .dw-reaction-love {
left: 62px;
transition-delay: .05s;
background-image: url(img/love.png);
}
.dw-reactions-box .dw-reaction-haha {
left: 112px;
transition-delay: .1s;
background-image: url(img/haha.png);
}
.dw-reactions-box .dw-reaction-wow {
left: 162px;
transition-delay: .15s;
background-image: url(img/wow.png);
}
.dw-reactions-box .dw-reaction-sad {
left: 212px;
transition-delay: .2s;
background-image: url(img/sad.png);
}
.dw-reactions-box .dw-reaction-angry {
left: 262px;
transition-delay: .25s;
background-image: url(img/angry.png);
}
.dw-reactions-button.reaction-show .dw-reaction {
animation-delay: 0s;
}
.dw-reactions-button.reaction-show .dw-reaction-love {
animation-delay: .05s;
}
.dw-reactions-button.reaction-show .dw-reaction-haha {
animation-delay: .1s;
}
.dw-reactions-button.reaction-show .dw-reaction-wow {
animation-delay: .15s;
}
.dw-reactions-button.reaction-show .dw-reaction-sad {
animation-delay: .2s;
}
.dw-reactions-button.reaction-show .dw-reaction-angry {
animation-delay: .25s;
}
.dw-reaction:hover {
transform: scale(1.5, 1.5);
top: 2px;
}
.dw-reaction strong {
position: absolute;
top: -19px;
background: rgba(0,0,0,.5);
color: #fff;
font-size: 8px;
text-align: center;
left: 0;
border-radius: 38px;
padding: 1px 0;
width: 38px;
opacity: 0;
transition: opacity .2s ease-in-out 0s;
box-sizing: border-box;
}
.dw-reaction:hover strong {
opacity: 1;
}
.dw-reactions-count {
line-height: 30px;
font-size: 12px;
float: right;
}
.dw-reaction-count {
display: inline-block;
margin-left: 5px;
}
.dw-reaction-count strong {
font-weight: normal;
}
.dw-reaction-count:before {
content: "";
float: left;
width: 20px;
height: 20px;
margin: 4px 4px 6px 0;
background: url(img/like.png);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
display: block;
}
.dw-reaction-count-love:before {
background-image: url(img/love.png);
}
.dw-reaction-count-haha:before {
background-image: url(img/haha.png);
}
.dw-reaction-count-wow:before {
background-image: url(img/wow.png);
}
.dw-reaction-count-sad:before {
background-image: url(img/sad.png);
}
.dw-reaction-count-angry:before {
background-image: url(img/angry.png);
}
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}عکس های اموجی در فولدر img موجود هستش و شما میتونید به راحتی از اموجی های متحرک نیز استفاده کنید با تغییر این فایل.
در فایل vote.html به دستورات jquery زیر نیاز داریم:
<script type='text/javascript'>
/* بفرست به آدرس زیر رای رو */
var dw_reaction = {"ajax":"admin-ajax.php"};
</script>
<script type='text/javascript'>
(function($){
$.fn.extend({
disableSelection: function() {
this.each(function() {
this.onselectstart = function() {
return false;
};
this.unselectable = "on";
$(this).css('-moz-user-select', 'none');
$(this).css('-webkit-user-select', 'none');
$(this).css('-ms-user-select', 'none');
$(this).css('user-select', 'none');
});
return this;
}
});
$(document).on( 'mouseenter', 'div.dw-reactions-button', function(e){
$(this).addClass('reaction-show');
});
$(document).on('mouseleave', 'div.dw-reactions-button', function(e){
$(this).removeClass('reaction-show');
});
$(document).on('taphold','div.dw-reactions-button',function(e){
e.preventDefault();
$(this).addClass('reaction-show');
$(this).disableSelection();
});
$('div.dw-reactions-button').disableSelection();
$(document).on('click', '.dw-reaction', function(e){
e.preventDefault();
var t = $(this), $class = t.attr('class'), main = t.parent().parent().parent(), vote_type = main.attr('data-type'), voted = main.attr('data-vote'), text = t.find('strong').text();
res = $class.split(' ');
type = res[1].split('-');
$('div.dw-reactions-button').removeClass('reaction-show');
$('div.dw-reactions-box').remove();
$.ajax({
url: dw_reaction.ajax,
dataType: 'json',
type: 'POST',
data: {
action: 'dw_reaction_save_action',
nonce: main.data('nonce'),
type: type[2],
post: main.data('post'),
voted: voted
},
success: function(data) {
if ( data.success ) {
$('.dw-reactions-post-'+main.data('post')).find('.dw-reactions-count').html(data.data.html);
$('.dw-reactions-post-'+main.data('post')).find('.dw-reactions-main-button').attr('class','dw-reactions-main-button').addClass('dw_reaction_'+type[2]).text(text);
main.attr('data-vote','yes').attr('data-type', 'unvote');
}
}
});
});
})(jQuery);
</script>این قطعه کد اطلاعاتی مثل شماره پست ، نظر انتخاب شده و کد یکبارمصرف رو ب سمت سرور میفرسته و حتی میتونید با کمی ویرایش این نظرسنجی رو فقط برای اعضای ثبت نام کرده سایت فعال کرده تا آمار دقیقی از محبوبیت مطالب خود پیدا کنید.
در این قطعه کد بالا اطلاعات به فایل admin-ajax.php ارسال میشه و وظیفه آن چک صحت نظردهی و پاسخ به آن است که نمونه ای ساده از آن به شکل زیر است:
این برنامه زیر اطلاعات ثبت شده مربوط به نظرسنجی در دیتابیس را پیدا میکند که به صورت json است و یک مقدار مثبت را به نظر انتخاب شده اضافه میکند.
<?php
function restyle_text($input){
$input = number_format($input);
$input_count = substr_count($input, ',');
if($input_count != '0'){
if($input_count == '1'){
return substr($input, 0, -2).'K';
} else if($input_count == '2'){
return substr($input, 0, -6).'M';
} else if($input_count == '3'){
return substr($input, 0, -12).'B';
} else {
return;
}
} else {
return $input;
}
}
if(!empty($_POST['type']) && !empty($_POST['post'])){
if($_POST['type']=="like" || $_POST['type']=="love" || $_POST['type']=="haha" || $_POST['type']=="wow" || $_POST['type']=="sad" || $_POST['type']=="angry"){
//--->دریافت اطلاعات نظرسنجی مورد نظر
$id=(int)$_POST['post'];
$js='{"data":{"like":"12","love":"13","haha":"14","wow":"15","sad":"16","angry":"1990900"}}';
//$js='{"success":true,"data":{"html":"bb","type":"voted"}}';
$js = json_decode($js, true);
$js['data'][$_POST['type']] +=1;
$js = json_encode($js);
//-->ذخیره در دیتابیس
$js = json_decode($js);
$htm='{"success":true,"data":{"html":"<span class=\"dw-reaction-count dw-reaction-count-like\"><strong>'.restyle_text($js->data->like).'<\/strong><\/span><span class=\"dw-reaction-count dw-reaction-count-love\"><strong>'.restyle_text($js->data->love).'<\/strong><\/span><span class=\"dw-reaction-count dw-reaction-count-haha\"><strong>'.restyle_text($js->data->haha).'<\/strong><\/span><span class=\"dw-reaction-count dw-reaction-count-wow\"><strong>'.restyle_text($js->data->wow).'<\/strong><\/span><span class=\"dw-reaction-count dw-reaction-count-sad\"><strong>'.restyle_text($js->data->sad).'<\/strong><\/span><span class=\"dw-reaction-count dw-reaction-count-angry\"><strong>'.restyle_text($js->data->angry).'<\/strong><\/span>","type":"voted"}}';
echo $htm;
}}
?>همانطور که گفتیم وظیفه کامل کردن ای بخش رو به عهده خودتون میزاریم...
json موجود در دیتابیس به صورت زیر است:
{"data":{"like":"12","love":"13","haha":"14","wow":"15","sad":"16","angry":"1990900"}}که خروجی آن بصورت زیر میباشد:
{"success":true,
"data":
{"html":
"<span class=\"dw-reaction-count dw-reaction-count-like\"><strong>
'.restyle_text($js->data->like).'
<\/strong><\/span>
<span class=\"dw-reaction-count dw-reaction-count-love\"><strong>
'.restyle_text($js->data->love).'
<\/strong><\/span><span class=\"dw-reaction-count dw-reaction-count-haha\"><strong>
'.restyle_text($js->data->haha).'
<\/strong><\/span><span class=\"dw-reaction-count dw-reaction-count-wow\"><strong>
'.restyle_text($js->data->wow).'
<\/strong><\/span><span class=\"dw-reaction-count dw-reaction-count-sad\"><strong>
'.restyle_text($js->data->sad).'
<\/strong><\/span><span class=\"dw-reaction-count dw-reaction-count-angry\"><strong>
'.restyle_text($js->data->angry).'
<\/strong><\/span>"
,"type":"voted"}}100=100
1000=1K
1000000=1M
این آموزش صرفا جهت آشنایی شما بوده ...
ممنون از شما .
دریافت فایل از آدرس:
http://s9.picofile.com/file/8349974600/vote_roiket_ir_.zip.html
منبع
رویکت
