Создание скрипта голосования для сайта на Ajax

Сегодня рассмотрим скрипт голосования на сайте, используя Ajax для записи результатов в базу данных через обработчик.

Структура:

index.html - Наша html-разметка блока с голосованием
style.css - стили, для внешнего вида и фиксированного позиционирования
script.js - наша js скрипты и ajax запрос
obrab.php - обработчик, получает результат голосование и записывает его в базу данных

Разметка HTML и стили

Здесь мы просто создаём нашу форму и подключаем нужные нам скрипты

<html>
<head>
    <title>Голосование на ajax<title>
    <meta charset="utf-8"/>
    <link href="style.css" rel="stylesheet"/>
</head>
<body>
    
        
    		
    		
    		
    		
    			
    		
    		Закрыть форму
    	
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
	<script src="jquery.easing.1.3.js">
	<script src="script.js">
</body>
</html>

Создали общию разметку, подключили стили и библиотеки jquery и jquery.easing - для красивого эффекта появления и изчезновения нашей формы.

Скачать jquery.easing

Стили:


#widjetmain{
	background-color: #fff;
	width: 500px;
	height: 400px;
	position: fixed;
	top: -450px;
	left: 50%;
	margin-left: -250px;
	border-radius: 0 0 10px 10px;
	box-shadow: 0px 0px 6px 0px #806F6F;
	z-index: 999;
}

#widjetmainhead{
	font-size: 32px;
	color: #525A5B;
	text-align: center;
	padding: 10px 0;
	background: linear-gradient(to top, #F1F3E8, #F2F9F8);
	font-family: Georgia;
}

#widjetmainimg{
	margin-top: 10px;
}

#widjetmainimg img{
	display: block;
	float:left;
	margin-left: 32px;
	width: 120px;
}

#widjetmainimg{
	margin-top: 10px;
}

#wclose{
	margin-left: 30px;
	cursor: pointer;
}

В стилях ничего сложного, главное прошу заметить, что изначально формы голосования не будет видно (т.к. поднято на -450px вверх), в дальнейшем мы через jquery будем опускать её.

Script.js - js скрипты и ajax запрос

$(document).ready(function(){
	
	// Функция для получения кук
	function get_cookie(cookie_name){
		var results = document.cookie.match ('(^|;) ?' + cookie_name + '=([^;]*)(;|$)');
		if (results)
			return (unescape(results[2]));
		else
			return null;
	}
	// Получаем наши куки голосания
	x = get_cookie("Golos");
	
	// Если куки не существует, то пояляется форма
	if (x != "Yes"){
		setTimeout(function () {
			$('#widjetmain').stop().animate({
				top: "0px"				  
				},'slow','easeOutQuint');
			}, 1000);
	}		
}); //ready end
	
	// Закрытие формы, при клике на "Закрыть"
$('#wclose').click(function(){
	$('#widjetmain').stop().animate({
    top: "-500px"				  
	},'slow','easeOutQuint');
	document.cookie = "Golos=Yes; expires=01/05/2015 00:00:00";
});

// При нажатии на проголосовать (ajax, закрытие, запись куки)
$('#widbtn').click(function(){
	$('#widbtn').remove();
	checked = $("input:radio:checked").val();
	$.ajax({
	  type: 'POST',
	  url: 'obr.php',
	  data: ({
		'radio': checked
	  }),	  
	  success: function(){
		document.cookie = "Golos=Yes; expires=01/05/2015 00:00:00";
	  }
	});
	$('#widgetsps').html('Спасибо за ваш голос');
	setTimeout(function () {
		$('#widjetmain').stop().animate({
		top: "-300px"				  
		},'slow','easeOutQuint');
	}, 1000);
   });

Функционал такой: Пользователь заходит на сайт, выскакивает форма, он голосует, затем выполняется ajax-запрос, записывается кука и форма пропадает.

Куки используются для того, чтобы пользователям каждый раз не появлялась форма, то есть форма появляется для тех, у кого нет кук, потом они голосуют, кука записывается. И в следующий раз, когда пользователи зайдут на сайт или перейдут на другую страницу, они не увидят форму.

Описание: (по строчкам)

4 - функция для получения кук, для дальнейшей проверки
12 - получаем куку и записываем её в переменную
15 - здесь идёт проверка, если кука не существует, то появляется форма, если нет - форма не появится
25 - при клике на кнопку закрыть, форма изчезает и записывается cookie (для того, чтобы больше не появлялось голосование)
33 - выполняется скрипт при кнопке "отправить".
34 - удаляем кнопку
35 - получаем значение из голосования при выборе, у <input>, значение value (1, 2 или 3) и записываем в переменную
42 - при успешном ajax-запросе записываем cookie.
46 - вставляем текст вместо кнопки.
47 - через 1 секунду после нажатия, появляется текст и форма изчезает

Обработчик формы obrab.php и база данных

В обработчике мы получаем результаты голосования и записываем результат в базу данных.

<?php
$host     = "localhost"; // хост
$user     = "root"; // логин
$password = ""; // пароль
$db_name  = "mybase"; // имя базы данных

if (isset($_POST["radio"]) && !empty($_POST["radio"]))
{
	$val = $_POST["radio"];
	$my = mysql_connect($host, $user, $password);
	$db_select= mysql_select_db($db_name,$my);
	$sql="INSERT INTO `table` (`value`) VALUES ('$val');";
	$res = mysql_query($sql);
	mysql_close($my);
}
?>

Первые четыре переменные служат для подключения к базе данных. Потом идёт проверка на POST, записываем результат в переменную val, подключаемся к базе и выполняем запрос по одному полю (с результатом) и закрываем соединение.

Необходимо также создать базу данных, структура простая: