Сценарий голосования с использованием Ajax, jQuery, PHP

В этом уроке мы будем создавать хороший сценарий голосования. Для создания сценария мы будем использовать 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 странице.

На этот, пожалуй, и все.