Сегодня я покажу, как с помощью 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 достаточно комментариев, для того, чтобы понять его работу.