Совсем недавно меня попросили подыскать какой-нибудь скрипт рейтинга с двумя кнопками + или -, thumb up/thumb down (две руки). Думая, что задача совсем уж простая я стал искать похожие скрипты в поисковиках. Среди требований к скрипту было защита по IP и легкая интеграция.
Среди решений в сети мне попадались либо слишком простые, даже без примера и защиты по IP, либо совсем сложные и навороченные. Но, хороший и удовлетворяющий всем требованиям скрипт, найти так и не удалось. Интернет наполнен кучей решений для звездного рейтинга (звездочки), но вот с двумя кнопками - увы. Да, есть потрясающее решение для WordPress, но переделывать мне его вовсе не хотелось. В итоге я нашел действительно хорошее и доброе решение рейтинга, но оно оказалось платным. Потратив 2-3 часа на поиски (Это действительно было так долго. Поисковики находят вроде бы хорошие решения судя по заголовкам, но открыв сайты понимаешь что тебя обманули.).
Так вот, потратив 2-3 часа на поиски решения я забил и решил написать свой рейтинг. За одно и помогу остальным, ведь не только мне может пригодиться такой вид рейтинга.
Времени было мало, поэтому я насобирал кучу разных скриптов рейтингов. Расковырял их, разложил на кусочки, а потом стал собирать.
Я четко был уверен:
- На выходе должен получится простой и легковесный рейтинг
- Защита по IP
- Легкая интеграция (вызвал функцию, влепил ID поста и все)
- Буду использовать jQuery. Проще и надежнее
- Легкая смена картинок от плюсиков до пальцев вверх и т.д.

После некоторого времени рейтинг был готов, получилось 8 файлов:

  • base.php - коннект к базе и данные для него
  • index.php - все собранное воедино как пример подключения (демка)
  • rateaction.php - обработчик событий рейтинга
  • rating.php - вывод самого рейтинга на страницу
  • jquery.js - фреймворк jQuery
  • script.js - наш скрипт с функциями для работы с рейтингом
  • style.css - стили оформления
  • thumb.php - картинки

Приведу листинг файла index.php (ниже можно и демку посмотреть и скрипт скачать в архиве):

<html>
<head>
<title>Рейтинг</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href='style.css'>
</head>
<body>
<?php
include "rating.php";
?>

<h1>Пост первый</h2>
<p>Содержание первого поста</p>
<?php callrating("1"); ?>

<h1>Пост второй</h2>
<p>Содержание второго поста</p>
<?php callrating("2", "thumb"); ?>

<h1>Пост третий</h2>
<p>Содержание третьего поста</p>
<?php callrating("3", "thumb", ' это нравится'); ?>

</body>
</html>

У функции callrating три параметра. Первый параметр, обязательный - id вашего поста или статьи, он уникальный должен быть для каждого материала. Второй параметр - класс картинок в CSS (по умолчанию он плюс/минус). Третий параметр для рейтинга, где можно ставить только + или "мне нравится", просто напишите текст или вставьте пробел - минус не отобразится.

Теперь приведу листинг файла rateaction.php, который обрабатывает данные поступающие к нему после нажатия на кнопки голосования:

<?php
include "base.php";

$id = (int)$_POST['idpost'];
$action = $_POST['action'];
$ip = mysql_escape_string($_SERVER['REMOTE_ADDR']);

$result = mysql_query("SELECT ip, id_post FROM rating_post_ip WHERE id_post = '".$id."' AND ip = '".$ip."'");
$count = mysql_num_rows($result);

if ($count == 0) {
	$result = mysql_query("SELECT id_post, up, down FROM rating_post WHERE id_post = '".$id."'");
	$row = mysql_fetch_array($result);
	$nowPlus = $row['up']; $nowMinus = $row['down'];

	if ($row['id_post']=='') {
		mysql_query("INSERT INTO `rating_post` VALUES ( '".$id."',  '0',
  '0');");
		$nowPlus = 0; $nowMinus = 0;
	}

	if ($action == 'plus') {
		$nowPlus = $nowPlus + 1;
		$upR = mysql_query("UPDATE rating_post SET up = up+1 WHERE id_post = '".$id."'");
	} else {
		$nowMinus = $nowMinus + 1;
		$upR = mysql_query("UPDATE rating_post SET down = down+1 WHERE id_post = '".$id."'");
	}

	mysql_query("INSERT INTO `rating_post_ip` VALUES ( '".$ip."', '".$id."' );");

	echo ($nowPlus-$nowMinus);
} else {
	echo 'Повторное голосование!';
}
?>

Собственно код совсем прост.

Картинка выглядит вот так, это CSS спрайт:

CSS код выглядит следующим образом:

body {
	font: 13px/1.5 Helvetica Neue,Arial,Helvetica,'Liberation Sans',FreeSans,sans-serif;
	padding: 50px;
}

.rating {
	clear: both;
	height: 16px;
}

.rating a, .rating div{
	float: left;
}

.rating .plus, .rating .minus {
	background: url("thumb.png") no-repeat 0 0 scroll transparent;
	width: 16px;
	height: 16px;
	display: block;
	margin: 0 5px 0
 0;
}

.rating .minus {
	background-position: -16px 0;
	margin: 0 0 0 5px;
}

.thumb .plus {
	background-position: 0 -16px;
}

.thumb .minus {
	background-position: -16px -16px;
}

В архиве кстати есть файл dump.sql - это дамп базы mysql. И не забудьте в файле base.php прописать свои данные соединения с базой. В общем пользуйтесь сколько угодно, используйте где угодно и меняйте как угодно, надеюсь пригодится. И еще один момент, если вы используете кэширование в PHP, то не забудьте очищать кэш текущей страницы во время голосования.

Демо-версия | Скачать

(Visited 2 473 times, 1 visits today)