Все для создания и продвижения сайтов

Верстка, программирование, SEO

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

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

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

Структура:

  1. index.html - Наша html-разметка блока с голосованием
  2. style.css - стили, для внешнего вида и фиксированного позиционирования
  3. script.js - наша js скрипты и ajax запрос
  4. 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, подключаемся к базе и выполняем запрос по одному полю (с результатом) и закрываем соединение.

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

  • id - идендификатор голосования, ставим "AUTO_INCREMENT"
  • value - результат голосования (1,2,3)
  • date - текущая дата в формате TIMESTHAMP

База данных для результатов голосования

Вот так и создаётся самая простая форма для голосования на ajax.

Последние статьи

Инструменты

Отблагодарить и поддержать автора
Если вы нашли ошибку, выделите её и нажмите Ctrl+Enter
Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.