В этом уроке мы будем создавать хороший сценарий голосования. Для создания сценария мы будем использовать Ajax, jQuery и PHP с MySql базой данных. Ajax и jQuery позволят обеспечить богатый и красочный пользовательский интерфейс. Итак, начнем!
Создание базы данных.
Для хранения вариантов голосования нам и голосов, мы будем использовать MySql базу данных. Структура базы данных выглядит следующим образом.
CREATE TABLE IF NOT EXISTS `options` ( `id` int(11) NOT NULL auto_increment, `ques_id` int(11) NOT NULL, `value` varchar(300) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=cp1251 AUTO_INCREMENT=1; CREATE TABLE IF NOT EXISTS `questions` ( `id` int(11) NOT NULL auto_increment, `ques` text NOT NULL, `created_on` datetime NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=cp1251 AUTO_INCREMENT=1; CREATE TABLE IF NOT EXISTS `votes` ( `id` int(11) NOT NULL auto_increment, `option_id` int(11) NOT NULL, `voted_on` datetime NOT NULL, `ip` varchar(16) default NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=cp1251 AUTO_INCREMENT=1;
У нас есть созданная база данных под названием poll. В ней три таблицы.
В таблице questions хранятся вопросы для голосования.
В таблице options хранятся параметры конкретного вопроса.
В таблице votes хранятся сведения о каждом голосе, которые отдали пользователи.
Надеюсь, что создание MySql базы данных не составит труда.
PHP код.
Вначале мы будем создавать сценарий вывода вопросов голосования.
Мы будем отображать самые популярные вопросы из базы данных. Пользователь в свою очередь сможет за них проголосовать. Ниже приведенный код выполняет эти действия.
$conn=mysql_connect(‘localhost’, ‘root’, ‘password’) or die("Невозможно подключиться к базе данных"); mysql_select_db("polls"); $query=mysql_query("SELECT id, ques FROM questions ORDER BY id DESC LIMIT 1"); while($row=mysql_fetch_assoc($query)){ //отображает вопросы echo "<p class="pollques" >".$row["ques"]."</p>"; $poll_id=$row["id"]; } // параметры отображения с радио-кнопки $query=mysql_query("SELECT id, value FROM options WHERE ques_id=$poll_id"); if(mysql_num_rows($query)){ echo ‘<div id="formcontainer" ><form method="post" id="pollform" action="’.$_SERVER['PHP_SELF'].’" >’; echo ‘<input type="hidden" name="pollid" value="’.$poll_id.’" />’; while($row=mysql_fetch_assoc($query)){ echo ‘<p><input type="radio" name="poll" value="’.$row['id'].’" id="option-’.$row['id'].’" /> <label for="option-’.$row['id'].’" >’.$row['value'].’</label></p>’; } echo ‘<p><input type="submit" value="Голосовать" /></p></form>’; }
Затем нам необходимо обработать голоса пользователей.
После того, как пользователь выбрал нужный ему вопрос, начинается обработка запроса. Для правильной обработки нам понадобится идентификатор выбранного варианта. А также устанавливаем куки в браузер пользователя, так браузер может определить, что пользователь уже проголосовал.
$query=mysql_query("SELECT * FROM options WHERE id=’".intval($_POST["poll"])."’"); if(mysql_num_rows($query)) { $query="INSERT INTO votes(option_id, voted_on, ip) VALUES(‘".$_POST["poll"]."’, ‘".date(‘Y-m-d H:i:s’)."’, ‘".$_SERVER['REMOTE_ADDR']."’)"; if(mysql_query($query)) { //Голос добавлен в базу данных setcookie("voted".$_POST['pollid'], ‘yes’, time()+86400*300); } else { echo "Произошла ошибка обработки запроса: ".mysql_error(); } }
Вначале мы проверяем, чтобы убедиться, что этот пользователь еще не голосовал. Кроме того, здесь мы используем функцию intval(), чтобы только цело значение проходило для выбранного варианта. После проверки голос пользователя будет добавлен в базу данных.
Мы уже создали сценарий вывода вопросов и обработчик голосования. Сейчас мы будем создавать вывод результатов.
После того, как пользователь проголосовал, нам нужно вывести все результаты голосования. Для этого мы будем использовать очень легкий способ.
$query=mysql_query("SELECT COUNT(*) as totalvotes FROM votes WHERE option_id IN(SELECT id FROM options WHERE ques_id=’$poll_id’)"); while($row=mysql_fetch_assoc($query)) $total=$row['totalvotes']; $query=mysql_query("SELECT options.id, options.value, COUNT(*) as votes FROM votes, options WHERE votes.option_id=options.id AND votes.option_id IN(SELECT id FROM options WHERE ques_id=’$poll_id’) GROUP BY votes.option_id"); while($row=mysql_fetch_assoc($query)){ $percent=round(($row['votes']*100)/$total); echo ‘<div class="option" ><p>’.$row['value'].’ (<em>’.$percent.’%, ‘.$row['votes'].’ votes</em>)</p>’; echo ‘<div class="bar ‘; if($_POST['poll']==$row['id']) echo ‘ Ваш голос ‘; echo ‘" style="width: ‘.$percent.’%; " ></div></div>’; } echo ‘<p>Результат: ‘.$total.’</p>’;
Отображать результаты мы будем на основании информации, какую мы имеем в таблице. Для этого мы будем использовать Sql функцию GROUP BY, чтобы установить ширину процентной шкалы голосов на основании полученных голосов пользователей. Весь код PHP вставим в файл под названием poll.php.
HTML код
Структура HTML кода довольно проста. Всю тяжелую работу у нас будет выполнять jQuery. Нам нужно только создать контейнер, в котором будет форма голосования или отображение результатов.
<div id="container" > <h1>Пользовательское голосование</h1> <div id="pollcontainer" > </div> <p id="loader" >Загрузка…</p> </div>
JavaScript код
Первым действием осуществим загрузку формы голосования.
При загрузке страницы, мы будем загружать форму для голосования. А если пользователь уже проголосовал, то будет загружаться результат голосования.
var loader=$(‘#loader’); var pollcontainer=$(‘#pollcontainer’); loader.fadeIn(); //Загрузка формы голосования $.get(‘poll.php’, », function(data, status){ pollcontainer.html(data); animateResults(pollcontainer); pollcontainer.find(‘#viewresult’).click(function(){ //если пользователь хочет увидеть результат loader.fadeIn(); $.get(‘poll.php’, ‘result=1′, function(data,status){ pollcontainer.fadeOut(1000, function(){ $(this).html(data); animateResults(this); }); loader.fadeOut(); }); //предупреждение по умолчанию return false; }) })
После того, как пользователь проголосовал, нам нужно выполнить обработку голосов. Для проверки голосов пользователя вначале нам нужно проверить, выбрал ли пользователь хоть один вариант. Затем после обработки PHP сценарием, отобразить результат. Результат мы будем отображать, используя функцию animateResults.
(‘#pollform’).submit(function(){ var selected_val=$(this).find(‘input[name=poll]:checked’).val(); if(selected_val!=»){ // Опубликовать данные, только если значение выбранной loader.fadeIn(); $.post(‘poll.php’, $(this).serialize(), function(data, status){ $(‘#formcontainer’).fadeOut(100, function(){ $(this).html(data); animateResults(this); loader.fadeOut(); }); }); } //предупреждение по умолчанию return false; });
Примечание! Не забудьте в начало HTML страницы добавить jQuery. Весь JavaScript код можно вставить, как отдельным файлом, так и написать в HTML странице.
На этот, пожалуй, и все.
No related posts.