Делаем скрипт голосования с нуля

Лучший способ узнать ответ на вопрос у читателей Вашего сайта это произвести опрос, предложив несколько вариантов ответа. Для таких целей существует большое количество готовых скриптов с различным функционалом, все они имеют свои преимущества и недостатки.  Целью этого урока будет научиться создавать собственный скрипт голосования, пусть и довольно простой, но вполне работоспособный. Чтобы избежать повторных голосов мы сделаем блокировку пользователей по ip и cookie. Все действия, конечно же, будут происходить без перезагрузки страницы, а так же сделаем небольшую, но эффектную анимацию для отображения результатов.

Подключаем jQuery на страницу:

Теперь создадим каркас для нашего голосования:

В общем блоке у нас будет отображаться вопрос и два блока: первый с вариантами ответа и возможностью проголосовать, а второй соответственно будет отображать результаты.
Ах да, забыл сказать, что все результаты голосования будут храниться в базе данных, поэтому нам понадобится создать таблицу, например, answer и заполним ее вариантами ответов:

И таблицу в которой будут храниться ip проголосовавших

Теперь осуществим вывод этих вариантов из базы на экран. Забегая немного вперед, пропишем еще и условия для вывода проголосовавших и не проголосовавших. Вот что у нас должно получиться:

Само же подключение к базе у нас будет чуть выше, до него еще доберемся. Теперь  добавим стилей, чтобы придать всему этому божеский вид:

 

Изначально блок с результатами у нас будет скрыт, если пользователь еще не проголосовал или отображаться, если голос был произведен. Чуть позже мы напишем в скрипте чтобы он показывался после того как пользователь проголосовал. При нажатии на кнопку голосовать у нас отправляется ajax запрос с вариантом ответа и заносится в базу, после чего блок #poll скрывается и отображаются результаты. Но для вывода результатов нам нужно произвести некоторые расчеты с учетом нового голоса. Прежде всего, нам нужно определиться с шириной блока голосования, так как от этого будет зависеть ширина полосок при отображении результатов. Для удобства я возьму ширину равную 200 пикселям, следовательно, 1% полоски результатов будет занимать 2 пикселя.

Теперь я приведу весь скрипт,  а затем разъясню что для чего нужно:

 

Итак, начнем по порядку. Для начала подключимся к и получим все результаты уже имеющиеся в базе и заносим их в массив answer, они нам понадобятся для дальнейших расчетов. Переменнаяbackground равна 2 это и есть та самая ширина для отображения полоски результатов, о которой уже говорилось выше, она так же пригодится в дальнейшем. Теперь нам нужно подсчитать суму всех голосов sum. Это нам нужно для определения процентного соотношения между вариантами ответов. Далее мы вычисляем это самое процентное соотношение answerPercent и длину answerWidthкаждой полоски результатов в пикселях. Затем смотрим по кукам и ip, если пользователь еще не голосовал, то выводим для него часть кода, которая будет отправлять ajax запрос на сервер и затем выводить результат с учетом нового голоса. В случае удачного ответа от сервера нам вернется 1 после чего мы производим перерасчет уже существующих результатов и выведем их на экран при этом блок с выбором вариантов скроем. Далее идет часть кода, которая выводит нам результаты для уже проголосовавших пользователей на основе предшествующих рассчетов.

Что касается обработчика, давайте его создадим. Он у нас будет принимать всего один параметр — это id варианта ответа и прибавлять к результату 1. Код довольно прост:

После всех этих манипуляций обработчик вернет нам 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.

Вы можете оставить ответ, или trackback с вашего сайта.

Leave a Reply

Надо сделать сайт? Мы выгодно сделаем сайт! ©