Рейтинг с помощью 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;
}

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