Система оценок на jQuery и PHP



Сегодня я покажу, как с помощью jQuery и php можно созадать простенькую систему оценок, как на oboobs.ru. Только оценивать мы будем не сиськи, а статьи. =) Всего у нас будет 2 файла, не считая jQuery. Для начала создадим таблицу articles, где у нас будут храниться статьи и оценки.

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

Таблица articles.

CREATE TABLE `articles` (
  `id` int(11) NOT NULL auto_increment,
  `title` varchar(100) default NULL,
  `topic` text,
  `rating` int(11) default NULL,
  PRIMARY KEY  (`id`)
) 

В title будет хранится заголовок статьи, в topic текст статьи, в rating рейтинг статьи.


Теперь перейдем к скрипту отвечающему за вывод статей и выставление оценок.

<?php
require_once '../config/db.php'; //Подключаемся к БД
?>
<html>
	<head>
		<title>jQuery Rating</title>
		<style type="text/css">
			.article {
				border:1px solid black;
			}
			a {
				text-decoration:none;
			}
			a:hover {
				text-decoration:underline;
			}
			.plus {
				color:red;
				font-size:24px;
			}
			.minus {
				color:blue;
				font-size:24px;
			}
			.rateBar {
				font-size:25px;
				margin-left:25px;
				margin-right:10px;
				margin-top:5px;
				float:left;
			}
			.articles {
				padding-top:20px;
			}
			h2, p {
				margin:0px;
			}
			.clearing {
				clear:both;
			}
		</style>
		 <script src='../js/jquery.js' type='text/javascript'></script>
         <script type="text/javascript">
            function setRate(id, operation) {
			$.ajax({
		            type: "POST",
		            url: "rates.php",
		            data: "id=" + id + "&operation=" + operation,
		            success: function(html){
		            	$("#rating" + id).html(html);
		            }
		        }); 
            }
        </script>
	</head>
	<body>
	   <?php 
		//Выбираем и выводим записи
		$result = mysql_query("SELECT 
										id, title, topic, rating 
								FROM 
										articles 
							 ");
		while ($row = mysql_fetch_array($result)) {
		?>
		<div class="rateBar">
			<div><a class="plus" href="javascript:setRate(<?=$row['id']?>, 'plus')">+</a></div>
			<div><span id="rating<?=$row['id']?>"><?=$row['rating']?></span></div>
			<div><a class="minus" href="javascript:setRate(<?=$row['id']?>, 'minus')">-</a></div>
		</div>
		<div class="articles">
			<h2><?=$row['title']?></h2>
			<p><?=$row['topic']?></p>
		</div>
		<div class="clearing"></div>
		<?php   
    	}
	?>
	</body>
</html>

Разберем подробнее код. Чтобы поставить оценку нам нужно нажать на + или -, после чего id записи и тип операции будут переданы в функцию setRate(). Дальше данные передаются в rates.php (47 строчка), где они обрабатываются.

Файл rates.php.

<?php
require_once '../config/db.php'; //Подключаемся к БД
//Данные не фильтруются!
$id 		= $_POST['id']; //Получаем id записи
$operation 	= $_POST['operation']; //Вид операции +/-

$result = mysql_query("SELECT 
								id, topic, rating
					   FROM 
								articles
					   WHERE
					   			id = '$id'		
						");
$row = mysql_fetch_array($result);
//Если +, то прибавляем 1, если -, то вычитаем
if ($operation == 'plus') 
{
	$newRate = $row['rating'] + 1;
	//Обновляем значение в БД
        $upR = mysql_query("UPDATE 
								articles 
						SET 
								rating = '$newRate'
						WHERE
								id = '$id'
						");
	echo $newRate; //Выводим новую оценку
} 
else 
{
	$newRate = $row['rating'] - 1;
        //Обновляем значение в БД
	$upR = mysql_query("UPDATE 
								articles 
						SET 
								rating = '$newRate'
						WHERE
								id = '$id'
						");
	echo $newRate; //Выводим новую оценку
}
?>

Я думаю в файле rates.php достаточно комментариев, для того, чтобы понять его работу.



Теги: ,

Комментарии

  1. Спасибо! весь инет обыскал в поисках этого скрипта, огромного спасибо тебе!

    Reply

  2. Всегда рады помочь нашим читателям

    Reply

  3. А кто подскажет ,как сделать чтобы с одного ip голосовать один раз можно было?

    Reply

    Дмитрий Reply:


    Если голосуют зарегестрированные пользователи, то проще — записываем в отдельную ячейку его ID , а в rates.php потом уже проверяем, был ли голос с этого ID или нет

    Reply

  4. Храни в бд ip проголосовавших пользователей, потом в rates.php проверяешь голосовали с этого ip или нет

    Reply

  5. Только не забудь времы каждому IP выставлять… У многих динамические IP. Я из-за такой чьей-то халатности попал в список IP банов (просто DHCP дал мне такой неудачный IP 🙂 )

    Reply

  6. что за плагин позволяющий так код вставлять интересно ?

    p.s. емайл подписку для слежения в теме добавьте

    Reply

  7. файлик ‘../config/db.php’ хде ?

    Reply

  8. Супер!
    Спасибо за примерчик — простой и наглядный !

    Reply

  9. Плагин называется SyntaxHighlighter Evolved.
    В файле db.php следующий код:
    < ?php $dblocation="localhost"; $dbname="test"; $dbuser="root"; $dbpassword=""; $db_connect = mysql_connect($dblocation,$dbuser,$dbpassword); $db_select = mysql_select_db($dbname,$db_connect); ?>

    Reply

  10. А где взять «../js/jquery.js»
    и почему я запускаю _http://www6.wmprowerka.tu2.ru/123.php
    и нет ни какого опроса.

    Reply

  11. Евгений, jquery.js скачиваете с официального сайта jQuery — _http://jquery.com/

    Reply

  12. db созда, js скачал. при загрузке пустая страница??

    Reply

  13. Мусора в коде многовато. Весь rates.php можно в 5 строк удавить: строки с 07 по 39 меняем на:

    mysql_query(«UPDATE articles SET rating = rating «.(($operation == ‘plus’) ? ‘+’ : ‘-‘).» 1 WHERE id = ‘$id’ «);

    ну и т.д.

    Ы?

    Reply

    Max Reply:


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

    Reply

  14. На счет того, что новичкам легче понять я согласен, но не стоит тех же новичков с молоду приучать писать мусорный код. Имхо.

    ЗЫ
    Reply почему-то не сработал — выдал «ERROR: Can’t find the ‘commentformid’ div.»

    Reply

  15. Не используйте вы уэе mysql_fetch_array. Используйте mysql_fetch_assoc !

    Reply

Оставить комментарий