Рейтинг с помощью jQuery, Ajax и PHP

В этом уроке мы создадим простой рейтинг с помощью jQuery, Ajax и PHP.

На основе прошлого урока про систему голосования мы создадим простую рейтинговую систему фотографий или чего-либо другого. В нашем примере будут использоваться именно фотографии.

Выглядеть это будет так:


Демо находится на сайте автора. В скором времени перенесем на наш сервер.

Начнем мы с создания базы данных. Это можно сделать через phpMyAdmin вручную или же использовать следующий текст:

CREATE TABLE images(
img_id INT PRIMARY KEY AUTO_INCREMENT,
img_name VARCHAR(60),
love INT);

База данных выше будет хранить все фото, а ниже - IP адреса, чтобы пользователи не могли голосовать более 1-го раза.

CREATE TABLE image_IP(
ip_id INT PRIMARY KEY AUTO_INCREMENT,
img_id_fk INT,
ip_add VARCHAR(40),
FOREIGN KEY(img_id_fk)
REFERENCES images(img_id));

После этого нам необходимо создать файл love.php, и в него поместить следующий код:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
//Image Hover Pink Heart to White Heart
$(document).ready(function()
{
$("span.on_img").mouseover(function ()
{
$(this).addClass("over_img");
});
$("span.on_img").mouseout(function ()
{
$(this).removeClass("over_img");
});
});
//Show The Love
$(function() {
$(".love").click(function()
{
var id = $(this).attr("id");
var dataString = 'id='+ id ;
var parent = $(this);
$(this).fadeOut(300);
$.ajax({
type: "POST",
url: "ajax_love.php",
data: dataString,
cache: false,
success: function(html)
{
parent.html(html);
parent.fadeIn(300);
}
});
return false;
});
});
</script>

Ниже представлен код, который будет выводить фотографии из базы данных:

<?php
include('config.php');
$sql=mysql_query("select * from images");
while($row=mysql_fetch_array($sql))
{
$img_id=$row['img_id'];
$img_url=$row['img_url'];
$love=$row['love'];
?>
<div>
<div class="box" align="left">
<a href="#" class="love" id="<?php echo $img_id; ?>">
<span class="on_img" align="left"> <?php echo $love; ?> </span>
</a>
</div>
<img src='<?php echo $img_url; ?>' />
</div>
<?php
}
?>

Еще нам понадобится файл ajax_love.php:

<?php
include("config.php");
$ip=$_SERVER['REMOTE_ADDR'];//client ip address
if($_POST['id'])
{
$id=$_POST['id'];
//IP-address verification
$ip_sql=mysql_query("select ip_add from image_IP where img_id_fk='$id' and ip_add='$ip'");
$count=mysql_num_rows($ip_sql);
if($count==0)
{
// Updateing Love Value
$sql = "update images set love=love+1 where img_id='$id'";
mysql_query( $sql);
// Inserting Client IP-address
$sql_in = "insert into image_IP (ip_add,img_id_fk) values ('$ip','$id')";
mysql_query( $sql_in);
$result=mysql_query("select love from images where img_id='$id'");
$row=mysql_fetch_array($result);
$love=$row['love'];
?>
//Display Updated Love Value
<span class="on_img" align="left"><?php echo $love; ?></span>
<?php
}
else
{
// Already Loved
echo 'NO !';
}
}
?>

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

И в конце нам понадобится немного стилей для оформления:

.box
{
background-color:#303030; padding:6px;
height:17px;
}
.on_img
{
background-image:url(on.gif);
background-repeat:no-repeat;
padding-left:35px;
cursor:pointer;
width:60px;
}
.over_img
{
background-image:url(over.gif);
background-repeat:no-repeat;
padding-left:35px;
cursor:pointer;
width:60px;
}

Все готово! До следующих уроков!

 

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.9lessons.blogspot.com
Перевел: Максим Шкурупий
Урок создан: 26 Сентября 2009
Просмотров: 58592
Правила перепечатки


5 последних уроков рубрики "PHP"

  • Фильтрация данных с помощью zend-filter

    Когда речь идёт о безопасности веб-сайта, то фраза "фильтруйте всё, экранируйте всё" всегда будет актуальна. Сегодня поговорим о фильтрации данных.

  • Контекстное экранирование с помощью zend-escaper

    Обеспечение безопасности веб-сайта — это не только защита от SQL инъекций, но и протекция от межсайтового скриптинга (XSS), межсайтовой подделки запросов (CSRF) и от других видов атак. В частности, вам нужно очень осторожно подходить к формированию HTML, CSS и JavaScript кода.

  • Подключение Zend модулей к Expressive

    Expressive 2 поддерживает возможность подключения других ZF компонент по специальной схеме. Не всем нравится данное решение. В этой статье мы расскажем как улучшили процесс подключение нескольких модулей.

  • Совет: отправка информации в Google Analytics через API

    Предположим, что вам необходимо отправить какую-то информацию в Google Analytics из серверного скрипта. Как это сделать. Ответ в этой заметке.

  • Подборка PHP песочниц

    Подборка из нескольких видов PHP песочниц. На некоторых вы в режиме online сможете потестить свой код, но есть так же решения, которые можно внедрить на свой сайт.

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 26 Сентября 2009 20:46
    Aramor
    первый нах! крутая тема
  • 26 Сентября 2009 21:00
    DiMaN_VRN
    Спасиб большое, сайт отличный, большая помощь начинающим(и не только), а есть у кого нить скрипт комметов, плз, выложите урок, заранее благодарин...
  • 26 Сентября 2009 22:56
    Magnum
    Блин, а я же присылал вам ссылку на урок с рейтингами на jquery, гораздо лучше этих 2-х последних какашек... Вы почту наверное вооще не проверяете ? Аж обидно...
    • 11 Августа 2011 16:15
      Tankizzzt
      пришли мне пожалуйста, а то сэтим я никак разобраться не могу... на мыло Tankizzzt@yandex.ru
  • 27 Сентября 2009 09:38
    buttersstoch
    А без php такого нет??
  • 27 Сентября 2009 17:32
    aleksey
    Сайт процветает, вот уже и на 1280*1024 разрешение! А вы могли бы сделать урок на эту тему, какое разрешение у пользователя, под такое разрешение и выдается сайт? Прошу ответить или посоветовать что-нибудь.
    • 21 Мая 2013 21:30
      skylinex
      Есть уже такой урок
  • 28 Сентября 2009 01:18
    Alexxhub
    Алексей. Используйте резиновые рамки с заполняющимся бэкраундом, а необходимые изображения позиционируйте контейнерами. Главное учтите, что есть еще пользователи которые пользуются разрешением 800х600 причем их немало. Я когда смотрю статистику по своему сайту сильно удивляюьс проценту людей с таким разрешением. Diman_VRN. Пройдите три урока по регистрации пользователей на сайте и принцип добавления коментов сам придет. А так же советую посмотреть диск Евгения про блоги.
  • 28 Сентября 2009 01:20
    Alexxhub
    Этот скрипт уже оформлен более приятно, нежели предыдущий. Только при попытке повторного голосования загорается слово NO! и не исчезает, желательно было бы сделать откат, показало что нельзя комментировать и все вернуло назад результаты голосования.
  • 28 Сентября 2009 10:48
    ГочаМахарадзе
    Сpasibo! klasni vesh! :)
  • 28 Сентября 2009 20:33
    Саныч
    Alexxhub, ну так в чем же проблема? Основу вам дали, а дальше делайте что хотите, откаты и т.д. Все ограничивается лишь вашей фантазией.
  • 28 Сентября 2009 20:58
    Darkenrall
    Евгений! На Воронежском торрент-форуме (http://torrents.vsi.ru) раздаются ВСЕМ желающим ВСЕ твои диски.
  • 28 Сентября 2009 20:58
    Darkenrall
    Примите меры господа - АВТОРСКОЕ ПРАВО священно!!!
  • 29 Сентября 2009 17:11
    МихаилГорюнов
    buttersstoch, без PHP невозможно, такого не бывает!
  • 19 Марта 2010 01:02
    kibertronix
    а как вносить картинки в бд?
  • 13 Апреля 2010 20:08
    Patriott
    а это голосование можно прикрутить к галерее? Что-то вроде как на одноклассниках. Просто смотрю, там ссылка специфическая.
  • 18 Мая 2010 13:10
    Stanley
    в самом начале статьи есть ошибка! пропущена скобка!!! перед точкой с запятой... love INT); CREATE TABLE images( img_id INT PRIMARY KEY AUTO_INCREMENT, img_name VARCHAR(60), love INT);
  • 28 Декабря 2010 17:36
    Demeus
    а как сделать так, чтоб при нажатии на счетчик прибавилось значение и открылось новое окно, пишу так <a href=\"$url\" class=\"love\" id=\"$img_id\" target=\"_blank\">".$img_name."</a> но переход не происходит, что нужно для этого сделать подскажите плиз, очень срочно надо
  • 13 Января 2011 16:00
    keXss
    Голосование идет с одного ip и все, а как обновлять таблицу с ip в БД, так что бы голосовать могли каждый день, но по одному разу?
  • 13 Января 2011 19:39
    keXss
    Спасибо, уже не надо, разобрался!
  • 17 Мая 2011 23:21
    F.C.K.L.
    в базе нет поля img_url, но в скарипте оно испооьзуеться
  • 17 Мая 2011 23:31
    F.C.K.L.
    и еще, нельзя проголосовать. надо в базе NULL на число изменить
  • 17 Сентября 2011 14:07
    KuleshD
    Demo скрипт не работает
  • 2 Февраля 2012 18:16
    timydbdrag
    если быстро нажимать на добавление, то можно добавить сколько угодно) такой вот баг!
    • 16 Апреля 2012 17:01
      Amphetamin
      Я сделал привязку к кукам еще. И ничего не накручивается.
      • 6 Июля 2012 14:15
        drun
        Помоги пожалуйста кодом на привязку COOKIE
  • 25 Мая 2012 17:32
    JS_JQ_BEST
    клёвая штука
  • 2 Ноября 2013 22:09
    Александр Николаев
    допилил так, что можно ставить и дислайк теперь к фоткам. Получилось то, что нужно было! Класс! Спасибо за скрипт!
  • 1 Марта 2014 12:56
    eldar1996
    У кого есть более исправленный вариант этого скрипта? поделитесь пожалуйста nummarygale@gmail.com
^ Наверх ^