Система оценок на jQuery и PHP
Сегодня я покажу, как с помощью jQuery и php можно созадать простенькую систему оценок, как на oboobs.ru. Только оценивать мы будем не сиськи, а статьи. =) Всего у нас будет 2 файла, не считая . Для начала создадим таблицу 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 достаточно комментариев, для того, чтобы понять его работу.
- Русско-английский переводчик, с помощью Google AJAX Language API
- jQuery JSON: получаем данные из твиттера
- Работа с JSON в PHP и jQuery
- Создаем индикатор сложности пароля
- Выделение всех элементов checkbox с помощью jQuery
15 коммент.
Спасибо! весь инет обыскал в поисках этого скрипта, огромного спасибо тебе!
Reply
Всегда рады помочь нашим читателям
Reply
А кто подскажет ,как сделать чтобы с одного ip голосовать один раз можно было?
Reply
Храни в бд ip проголосовавших пользователей, потом в rates.php проверяешь голосовали с этого ip или нет
Reply
Только не забудь времы каждому IP выставлять… У многих динамические IP. Я из-за такой чьей-то халатности попал в список IP банов (просто DHCP дал мне такой неудачный IP
)
Reply
что за плагин позволяющий так код вставлять интересно ?
p.s. емайл подписку для слежения в теме добавьте
Reply
файлик ‘../config/db.php’ хде ?
Reply
Супер!
Спасибо за примерчик – простой и наглядный !
Reply
Плагин называется 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
А где взять «../js/jquery.js»
и почему я запускаю _http://www6.wmprowerka.tu2.ru/123.php
и нет ни какого опроса.
Reply
Евгений, jquery.js скачиваете с официального сайта jQuery – _http://jquery.com/
Reply
db созда, js скачал. при загрузке пустая страница??
Reply
Мусора в коде многовато. Весь rates.php можно в 5 строк удавить: строки с 07 по 39 меняем на:
…
mysql_query(«UPDATE articles SET rating = rating «.(($operation == ‘plus’) ? ‘+’ : ‘-’).» 1 WHERE id = ‘$id’ «);
…
ну и т.д.
Ы?
Reply
Max Reply:
Февраль 24, 2010 at 20:00
Сократить можно, но более подробный пример людям легче понять. К тому же не все знают, что такое тернарный оператор.
+ нужен будет еще старый рейтинг, так, что в 5 строк ты бы не уложился.
Reply
На счет того, что новичкам легче понять я согласен, но не стоит тех же новичков с молоду приучать писать мусорный код. Имхо.
ЗЫ
Reply почему-то не сработал – выдал «ERROR: Can’t find the ‘commentformid’ div.»
Reply