
Лучший способ узнать ответ на вопрос у читателей Вашего сайта это произвести опрос, предложив несколько вариантов ответа. Для таких целей существует большое количество готовых скриптов с различным функционалом, все они имеют свои преимущества и недостатки. Целью этого урока будет научиться создавать собственный скрипт голосования, пусть и довольно простой, но вполне работоспособный. Чтобы избежать повторных голосов мы сделаем блокировку пользователей по ip и cookie. Все действия, конечно же, будут происходить без перезагрузки страницы, а так же сделаем небольшую, но эффектную анимацию для отображения результатов.
Подключаем jQuery на страницу:
1 |
<script type="text/javascript" src="jquery-1.5.1.min.js"></script> |
Теперь создадим каркас для нашего голосования:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div id="pollAjaxs"> <p class="pollTitle"></p> <div id="poll"> <form method="get" id="formPoll"> <div class="button"> <a href="#" id="vote">Голосовать</a> </div> </form> </div> <div id="resaltPoll"> <div class="button" id="er"></div> </div> </div> |
В общем блоке у нас будет отображаться вопрос и два блока: первый с вариантами ответа и возможностью проголосовать, а второй соответственно будет отображать результаты.
Ах да, забыл сказать, что все результаты голосования будут храниться в базе данных, поэтому нам понадобится создать таблицу, например, answer и заполним ее вариантами ответов:
1 2 3 4 5 6 |
CREATE TABLE IF NOT EXISTS `answer` ( `id` int(3) NOT NULL AUTO_INCREMENT, `answer` varchar(100) NOT NULL, `result` int(5) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=cp1251 AUTO_INCREMENT=9 ; |
И таблицу в которой будут храниться ip проголосовавших
1 2 3 4 5 |
CREATE TABLE IF NOT EXISTS `ip` ( `id` int(3) NOT NULL AUTO_INCREMENT, `ip` varchar(15) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=cp1251 AUTO_INCREMENT=2 ; |
Теперь осуществим вывод этих вариантов из базы на экран. Забегая немного вперед, пропишем еще и условия для вывода проголосовавших и не проголосовавших. Вот что у нас должно получиться:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<div id="pollAjaxs"> <p class="pollTitle">Вопрос?</p> <?php if(empty($_COOKIE['opros']) || ($_COOKIE['opros']) == '' || empty($ip['id'])){ ?> <div id="poll"> <form method="get" id="formPoll"> <?php mysql_data_seek($result, 0); $answer = mysql_fetch_array($result); $i = 0; do{ echo "<div class='answer'> <input type='radio' name='otvet' value='".$answer['id']."' class='otvet' id='".$i."'> ".$answer['answer']. "</div>\r\n"; $i++; }while($answer = mysql_fetch_array ($result)); ?> <div class="button"> <a href="#" id="vote">Голосовать</a> </div> </form> </div> <?php } ?> <div id="resaltPoll"> <?php mysql_data_seek($result, 0); $answer = mysql_fetch_array($result); $i = 0; do{ echo "<div class='answer' id='res_".$i."'> <div class='nameanswer'></div> <div class='font'></div> </div>\r\n"; $i++; }while($answer = mysql_fetch_array ($result)); ?> <div class='button' id='er'></div> </div> </div> |
Само же подключение к базе у нас будет чуть выше, до него еще доберемся. Теперь добавим стилей, чтобы придать всему этому божеский вид:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
* { margin: 0; padding: 0; } a:link, a:visited { color: #004F8B; text-decoration: none; } a:hover { text-decoration: none; } #pollAjaxs{ font: 11px Tahoma, Arial, Helvetica, sans-serif; width:200px; min-height:190px; border:1px solid #666; margin:10px; padding:8px; } .pollTitle{ text-align:center; margin-bottom:15px; font-weight:700; } #resaltPoll{ display:none; } .button{ text-align:center; } .button a{ background-color:#B4D2F9; border:1px solid #666; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; width:60px; margin:8px auto; padding:4px; } #resaltshow, #pollshow{ border:1px solid #666; padding:4px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } #resaltshow{ width:60px; margin:8px auto; } .answer{ height:30px; margin:5px 0; } .font{ height:10px; background:#eee url('bg.png') repeat-x; margin:3px 0; width:0; border-radius: 2px; } .pollRed{ color:#D80000; } .pollGreen{ color:#00A331; } .pollRed span, .pollGreen span{ color:#424242; } |
Изначально блок с результатами у нас будет скрыт, если пользователь еще не проголосовал или отображаться, если голос был произведен. Чуть позже мы напишем в скрипте чтобы он показывался после того как пользователь проголосовал. При нажатии на кнопку голосовать у нас отправляется ajax запрос с вариантом ответа и заносится в базу, после чего блок #poll скрывается и отображаются результаты. Но для вывода результатов нам нужно произвести некоторые расчеты с учетом нового голоса. Прежде всего, нам нужно определиться с шириной блока голосования, так как от этого будет зависеть ширина полосок при отображении результатов. Для удобства я возьму ширину равную 200 пикселям, следовательно, 1% полоски результатов будет занимать 2 пикселя.
Теперь я приведу весь скрипт, а затем разъясню что для чего нужно:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
<script type="text/javascript"> //результаты уже проголосовавших var answer = new Array(); <?php include("connect.php"); $result = mysql_query("SELECT * FROM answer",$db); $answer = mysql_fetch_array($result); $arrayips = mysql_query("SELECT * FROM ip WHERE ip = '$_SERVER[REMOTE_ADDR]'",$db); $ip = mysql_fetch_array($arrayips); $i = 0; do{ echo "answer[".$i."] = [".$answer['result'].", '".$answer['answer']."'];\r\n"; $i++; }while($answer = mysql_fetch_array ($result)); ?> //1% полоски результатов будет занимать 2 пикселя var background = 2; //Сумма всех результатов for (var i = 0, sum = 0; i < answer.length; i++){ sum += answer[i][0]; } //Вычисляем процентное соотношение результатов //и длинну полосы результатов var percent = 100/sum; var answerWidth = new Array(); var answerPercent = new Array(); for (var i = 0; i < answer.length; i++){ answerPercent[i] = answer[i][0]*percent; answerWidth[i] = answerPercent[i]*background; } <?php if(empty($_COOKIE['opros']) || ($_COOKIE['opros']) == '' || empty($ip['id'])){ ?> //Отправлям запрос обработчику по нажатию на кнопку голосовать //и выводим результаты на экран $(function() { $("#vote").click(function(){ var idAnswer = $('.otvet:checked').val(); $.ajax({ url: "action.php", type: "GET", data: {"answer": idAnswer}, cache: false, success: function(response){ if(response == 1){ var p = $(".otvet:checked").attr("id"); if(p != undefined){ sum++; var newPercent = 100/sum; answer[p][0]++; var newAnswerWidth = new Array(); var newAnswerPercent = new Array(); $("#poll").hide(); $("#resaltPoll").fadeIn(800); for (var i = 0; i < answer.length; i++){ newAnswerPercent[i] = answer[i][0]*newPercent; newAnswerWidth[i] = newAnswerPercent[i]*background; $("#res_" + i + " .font").animate({width: newAnswerWidth[i]}, 800); $("#res_" + i + " .nameanswer").html(answer[i][1] + " <strong>" + newAnswerPercent[i].toFixed(2) + "</strong> (" + answer[i][0] + ")"); } $("#er").addClass("pollGreen").html("Спасибо, Ваш голос принят<br><span>Всего проголосовало: " + sum + "</span>"); } }else{ alert("Ошибка"); } } }); return false; }); }); <?php } ?> $(document).ready(function(){ <?php if(isset($_COOKIE['opros']) || ($_COOKIE['opros']) != '' || isset($ip['id'])){ ?> //Эту часть мы выводим если пользователь уже проголосовал $("#resaltPoll").fadeIn(800); for (var i = 0; i < answer.length; i++){ $("#res_" + i + " .font").animate({width: answerWidth[i]}, 800); $("#res_" + i + " .nameanswer").html(answer[i][1] + " <strong>" + answerPercent[i].toFixed(2) + "</strong> (" + answer[i][0] + ")"); } $("#er").addClass("pollRed").html("Вы уже голосовали<br><span>Всего проголосовало: " + sum + "</span>"); <?php } ?> }); </script> |
Итак, начнем по порядку. Для начала подключимся к и получим все результаты уже имеющиеся в базе и заносим их в массив answer, они нам понадобятся для дальнейших расчетов. Переменнаяbackground равна 2 это и есть та самая ширина для отображения полоски результатов, о которой уже говорилось выше, она так же пригодится в дальнейшем. Теперь нам нужно подсчитать суму всех голосов sum. Это нам нужно для определения процентного соотношения между вариантами ответов. Далее мы вычисляем это самое процентное соотношение answerPercent и длину answerWidthкаждой полоски результатов в пикселях. Затем смотрим по кукам и ip, если пользователь еще не голосовал, то выводим для него часть кода, которая будет отправлять ajax запрос на сервер и затем выводить результат с учетом нового голоса. В случае удачного ответа от сервера нам вернется 1 после чего мы производим перерасчет уже существующих результатов и выведем их на экран при этом блок с выбором вариантов скроем. Далее идет часть кода, которая выводит нам результаты для уже проголосовавших пользователей на основе предшествующих рассчетов.
Что касается обработчика, давайте его создадим. Он у нас будет принимать всего один параметр — это id варианта ответа и прибавлять к результату 1. Код довольно прост:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<?php include("connect.php"); header("Content-type: text/html; charset=windows-1251"); if($_GET['answer']){ $answer = $_GET['answer']; $answer = addslashes($answer); $answer = htmlspecialchars($answer); $answer = stripslashes($answer); $answer = mysql_real_escape_string($answer); $arrayips = mysql_query("SELECT * FROM ip WHERE ip = '$_SERVER[REMOTE_ADDR]'",$db); $ip = mysql_fetch_array($arrayips); if(empty($_COOKIE['opros']) || ($_COOKIE['opros']) == '' || empty($ip['id'])){ $result = mysql_query("UPDATE answer SET result = result+1 WHERE id='$answer'",$db); if($result == true){ setcookie("opros", $answer, time()+9999999); mysql_query("INSERT INTO ip (ip) VALUES ('$_SERVER[REMOTE_ADDR]')",$db); echo 1; //Изменения сохранены }else{ echo 0; //не сохранены } }else{ echo 0; //не сохранены } } ?> |
После всех этих манипуляций обработчик вернет нам 1 в случае если все прошло успешно или 0 если возникли проблемы. It wont www.order-essay-online.net grow organically the way an idea must if it is to become a fully realized book.