UniSite CMS - Современный движок для Ваших сайтов.

ZHUR ARTUR.ru

Персональный блог по созданию
мощных и современных Web-Проектов!

Кто не стучится – тому не открывают. Кто не пробует – у того не получается. © Жизнь

»

Введите код полученный после подписки

  • 13

  • 3

Своя кнопка Like

Автор - Жур Артур | Добавлено - 2014-01-14 | Просмотров - 5897 | Скачено - 106

В этом уроке мы с вами реализуем свою кнопку like, по нажатию которой будет происходить прибавление голоса у конкретного товара. Кнопка работает с помощью JQuery, Ajax и PHP.

1Подключение плагина JQuery

Первое, что нужно это подключить плагин JQuery, скачать его можно тут. Разместите его на ваш сайт и подключите к страницам перед закрывающим тегом </head> . Без этого плагина JQuery код работать не будет!

Подключение плагина


2JQuery код

$(document).ready(function(){

 // Определяем нажатие на кнопку.	   
 $('.likebutton').click(function(){
   
 // Принимаем с атрибута tid - id товара. С помощью id мы сможем определить какому товару нужно прибавить голос.                
 var  itid = $(this).attr("tid");
 // Отправляем в обработчик id товара
 $.ajax({
  type: "POST",
  url: "/like.php", // Обработчик
  data: "id="+itid,// Отправляем id
  dataType: "html",
  cache: false,
  success: function(data) {  
  // Проверяем что ответил нам обработчик, если false значит пользователь уже голосовал. И выводим сообщение.
  if (data == 'false')
  {
    alert('Вы уже голосовали!');
  }  
   else
  {
    $(".likeborder p").html(data); // Если пользователь не голосовал, то помещаем в параграф общее кол-во голосов.
  }

}
});
});
});

3Обработчик like.php

// Проверяем как обратились к данному файлу. Обязательная проверка!
if($_SERVER["REQUEST_METHOD"] == "POST")
{
session_start();
// Проверяем если в сессии есть id товара значит уже голосовали.
if ($_SESSION['count_like'] != $_POST["id"])
{
// Подключение к БД.
include('db_connect.php');
$id = mysql_real_escape_string($_POST['id']); // Принимаем id товара и отчищаем от вредоностного кода.

// Получаем общее кол-во голосов.
$result = mysql_query("SELECT id, count_like FROM ваша таблица WHERE id = '$id'",$link);
$row = mysql_fetch_array($result); 

// Обновляем у товара кол-во голосов.
$update = mysql_query ("UPDATE ваша таблица SET count_like=count_like+1 WHERE id='$id'",$link);

// Прибавляем к общему числу голосов единицу и отправляем Аяксу.
echo $row["count_like"] + 1;
   
// Помещаем в сессию id товара.
$_SESSION['count_like'] = $id; 
}
else
{
    echo 'false';
}
}

4HTML код кнопки

1254

  • tid - Сюда нужно поместить id товара, этот id будет отправляться обработчику.

4CSS стили кнопки

#button-like{
    margin: 20px auto;
    width: 60px;
}
#button-like span.likeborder{
    width: 60px;
    height: 48px;
    display: inline-block;
    background: url(likeborder.png) no-repeat;
}
#button-like span.likeborder p{
    margin-top: 12px;
    margin-bottom: 0;
    text-align: center;
    font: 16px sans-serif;
}
#button-like span.likebutton{
    width: 60px;
    height: 29px;
    display: inline-block;
    margin-top: 5px;
    background: url(likebutton.png) no-repeat;
    cursor: pointer;
}
#button-like span.likebutton:hover{
    opacity: 0.8;
}

Интересное

Комментарии