Frameworks.suFrameworks.su Шпаргалка вебмастера

  • Главная
  • Framework Kohana
  • PHP
  • Javascript
  • CSS
  • Контакты
Главная / Javascript / Собственная система лайков на PHP и JQuery

Собственная система лайков на PHP и JQuery

06.04.2015 19 27763

Собственная система лайков на PHP и JQuery

В данной статье мы разработаем собственную систему лайков на PHP и использованием Ajax. Что такое лайки я думаю вам не стоит обьяснять с таким изобилием социальных сетей в наши дни :)

MYSQL

Информация о лайках будет храниться у нас в Базе Данных MYSQL. Для начала создадим структуру таблицы.

CREATE TABLE `article` (
  `id` int(11) NOT NULL auto_increment,
  `name` varchar(255) NOT NULL,
  `description` text NOT NULL,
  `count_like` int(11) default 0,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 ;

И добавим в таблицу одну статью

INSERT INTO `article` (`id`, `name`, `description`, `count_like`) VALUES
(1, 'Первая статья', 'Текст первой статьи!', 0);

HTML

Для начала подготовим html шаблон страницы

На странице мы будем выводить статьи из БД, поэтому нужно сначала подключится в БД и сделать выборку наших статтей:

<?php

/** Данные для подключения к Базе Данных */
$host = 'localhost';
$database = 'test';
$user = 'root';
$password = '';

/** Подключаемся в Базе Данных */
$pdo = new PDO('mysql:host='. $host .';dbname='.$database.';charset=utf8', $user, $password);
$pdo->exec("SET NAMES utf8");

/** Выбираем статьи и выводим их */
$query = $pdo->prepare("SELECT * FROM article");
$query->execute();
$articles = $query->fetchAll(PDO::FETCH_ASSOC);

?>
<?php if($articles):?>
    <?php foreach($articles as $article): ?>
        <div class="like" data-id="<?php print $article['id']?>"><span class="counter"><?php print $article['count_like'] ?></span></div>
    <?php endforeach; ?>
<?php endif; ?

в data-id будем хранить ID нашей статьи которую будем лайкать.

Желательно блок с подключением к БД вынести в отдельный файл и потом везде его подключать, чтобы не дублировать везде доступы к БД.

CSS

.like{
    cursor:pointer;
    width:128px;
    height:128px;
    margin:10px auto 40px;
    position:relative;
}
.like:hover.active, .like{
    background: url('../images/like.png') no-repeat;
}
.like.active, .like:hover{
    background: url('../images/like_active.png') no-repeat;
}
.like .counter{
    border: 5px solid #333333;
    bottom: -37px;
    color: #333333;
    font-size: 31px;
    left: 27px;
    position: absolute;
    text-align: center;
    width: 64px;
}

Стили для нашей страницы мы вынесем в отдельный файлик

Javascript

После того как подготовили страницу и задали стили, перейдем к javascript. Наша задача будет отправить на сервер запрос с ID статьи и обратно получить количество лайков к статье. Это нужно для того чтобы обновить актуальную информацию по количеству лайков и вывести правильный результат.

Все это нужно сделать без обнволения страницы, т.е. методом Ajax. Использовать будем библиотеку JQuery.

$(document).ready(function() {
    $(".like").bind("click", function() {
        var link = $(this);
        var id = link.data('id');
        $.ajax({
            url: "/like.php",
            type: "POST",
            data: {id:id}, // Передаем ID нашей статьи
            dataType: "json",
            success: function(result) {
                if (!result.error){ //если на сервере не произойло ошибки то обновляем количество лайков на странице
                    link.addClass('active'); // помечаем лайк как "понравившийся"
                    $('.counter',link).html(result.count);
                }else{
                    alert(result.message);
                }
            }
        });
    });
});

PHP

Теперь осталось написать скрит для обработки запросов на сервере. Для этого создаем файлик like.php:

<?php

/** Данные для подключения к Базе Данных */
$host = 'localhost';
$database = 'test';
$user = 'root';
$password = '';

/** Подключаемся в Базе Данных */
$pdo = new PDO('mysql:host='. $host .';dbname='.$database.';charset=utf8', $user, $password);
$pdo->exec("SET NAMES utf8");

/** Получаем наш ID статьи из запроса */
$id = intval($_POST['id']);
$count = 0;
$message = '';
$error = true;

/** Если нам передали ID то обновляем */
if($id){
    /** Обновляем количество лайков в статье */
    
    $query = $pdo->prepare("UPDATE article SET count_like = count_like+1  WHERE id = :id");
    $query->execute(array(':id'=>$id));
    
    /** Выбираем количество лайков в статье */
    $query = $pdo->prepare("SELECT count_like FROM article WHERE id = :id");
    $query->execute(array(':id'=>$id));
    $result = $query->fetch(PDO::FETCH_ASSOC);
    $count = isset($result['count_like']) ? $result['count_like']  : 0;
    
    $error = false;
}else{
    /** Если ID пуст - возвращаем ошибку */
    
    $error = true;
    $message = 'Статья не найдена';
}

/** Возвращаем ответ скрипту */

// Формируем масив данных для отправки
$out = array(
    'error' => $error,
    'message' => $message,
    'count' => $count,
);

// Устанавливаем заголовок ответа в формате json
header('Content-Type: text/json; charset=utf-8');

// Кодируем данные в формат json и отправляем
echo json_encode($out);

 

На этом все.

Мы в данной статье привели общее понимание как делается система лайков на PHP с использованием Ajax. Однако, для идеального скрипта его нужно еще дорабатывать и дорабатывать. Во-первых, еще нужно сделать защиту от накруток лайков, для этого нужно или записывать в cookie информацию о том, что пользователь уже лайкнул данную статью. Либо самое правильное решение позволить ставить лайки только зарегистрированным пользователям (как это делается в социальных сетях).

Если будут вопросы пишите в комментариях, буду рад помочь.

Скачать рабочий пример

Теги:
  • jQuery
  • Пример
  • Уроки

Комментарии

  1. Nicat
    Nicat
    19.03.2021 11:38

    Отлично работает, спасибо

    Ответить

    A PHP Error was encountered

    Severity: Warning

    Message: count(): Parameter must be an array or an object that implements Countable

    Filename: Extension/Core.php

    Line Number: 1057

  2. Кирлл
    Кирлл
    14.07.2017 22:12

    Сделал всё работает только как сделать чтобы с 1 усройства можно было поставить 1 лайк

    Ответить

    A PHP Error was encountered

    Severity: Warning

    Message: count(): Parameter must be an array or an object that implements Countable

    Filename: Extension/Core.php

    Line Number: 1057

  3. Норм пацан
    Норм пацан
    20.04.2017 10:25

    "В ближайшее время постараюсь расписать эти 3 пункта по подробнее с примерами."
    Администратор уже второй год пошел, для Вас ближайшее время это когда?
    Сколько вешать в граммах?

    Было бы здорово если бы Вы все-таки выполнили свое обещание, пожалуйста)
    Если конкретно интересует вариант № 3

    Ответить

    A PHP Error was encountered

    Severity: Warning

    Message: count(): Parameter must be an array or an object that implements Countable

    Filename: Extension/Core.php

    Line Number: 1057

  4. Евгений
    Евгений
    11.04.2017 21:26

    скачал ваш пример,сделал как указанно в статье,не работает...

    Ответить
    • Администратор
      Администратор
      11.04.2017 21:46

      Что конкретно у вас не работало? Ошибки какие то были?
      Проверьте, может вы указали неверные доступы к БД.

      Ответить
      • Данил Костин
        Данил Костин
        06.09.2018 19:41

        Согласен оно не работает херня полная

        Ответить

          A PHP Error was encountered

          Severity: Warning

          Message: count(): Parameter must be an array or an object that implements Countable

          Filename: Extension/Core.php

          Line Number: 1057

      • Алишер
        Алишер
        06.02.2018 18:58

        Здравствуйте, вы писали что может реализуете лайки с авторизацией с примерами, если вы это сделали, где можно найти?

        Ответить

          A PHP Error was encountered

          Severity: Warning

          Message: count(): Parameter must be an array or an object that implements Countable

          Filename: Extension/Core.php

          Line Number: 1057

      • Евгений
        Евгений
        13.04.2017 16:54

        при клике на картинку,лайк не прибавляется,показывает 0.
        доступы к бд верные

        Ответить

          A PHP Error was encountered

          Severity: Warning

          Message: count(): Parameter must be an array or an object that implements Countable

          Filename: Extension/Core.php

          Line Number: 1057

  5. Константин
    Константин
    31.03.2017 23:12

    Админ, очень хотелось бы увидеть эти 3 способа

    Ответить
    • Администратор
      Администратор
      02.04.2017 20:07

      Думаю в ближайшее время найду свободную минутку и напишу статью о них )

      Ответить

        A PHP Error was encountered

        Severity: Warning

        Message: count(): Parameter must be an array or an object that implements Countable

        Filename: Extension/Core.php

        Line Number: 1057

  6. Даниил
    Даниил
    01.08.2016 13:44

    У вас оибка в исходниках в Index.php, вы зачем -то делаете выход из папки

    <link href="/css/style.css" rel="stylesheet">

    (знак "/" - первыйне нужен)

    <link href="css/style.css" rel="stylesheet"> - вот так работает, это же относится и к другим путям)))

    А так статья хорошая спасибо!))))

    Ответить
    • Администратор
      Администратор
      01.08.2016 13:53

      Это верно если из папки запускать, если же все это делается на http сервере нужно указывать адрес от корня сайта.
      Т.к. например если у вас будет такого вида url http://site.ru/article/ , то css будет пытаться подгрузиться из такой директории http://site.ru/article/css/style.css - естественно это будет ошибкой

      Ответить
      • Kирилл Белаш
        Kирилл Белаш
        28.05.2019 01:49

        Не везде и не всегда, на хостинге у меня уже нужно прописывать локально а не отталкиваться от корня сайта.

        Ответить

          A PHP Error was encountered

          Severity: Warning

          Message: count(): Parameter must be an array or an object that implements Countable

          Filename: Extension/Core.php

          Line Number: 1057

  7. Алексей
    Алексей
    04.01.2016 20:59

    Все работает, пытаюсь сделать так, чтобы можно было удалять лайки еще, а не только ставить, ничего не выходит. Как бы получается что-то, то коряво работает очень

    Ответить

    A PHP Error was encountered

    Severity: Warning

    Message: count(): Parameter must be an array or an object that implements Countable

    Filename: Extension/Core.php

    Line Number: 1057

  8. Александр Савенков
    Александр Савенков
    23.10.2015 12:35

    При перезагрузке страницы поле колличества лайков равно нулю!
    Как исправить, но при первом же клике выводится число из БД...

    Ответить
    • Администратор
      Администратор
      23.10.2015 13:38

      Александр, нужно в файле index.html подключится к БД и выбрать статьи из таблицы articles, и потом вывести их и количество лайков к каждой статье.
      Как это будет работать можете посмотреть в обновленном примере или посмотреть в статье (обновил описание)

      Ответить
      • Александр Савенков
        Александр Савенков
        23.10.2015 19:45

        Спасибо огромное!
        Сейчас буду пробовать.

        Ответить

          A PHP Error was encountered

          Severity: Warning

          Message: count(): Parameter must be an array or an object that implements Countable

          Filename: Extension/Core.php

          Line Number: 1057

  9. Денис
    Денис
    22.10.2015 14:54

    Привет! Отличная статья, но без записи cookies - не имеет смысла. Как прикрутить защиту от накрутки?

    Ответить
    • Администратор
      Администратор
      22.10.2015 17:55

      1. Самый лучший способ защититься от накрутки - сделать авторизацию на сайте и разрешить ставить лайки только зарегистрированным пользователям, при этом сохранять в БД (user_id и article_id) чтобы знать какой пользователь какую статью лайкнул. Таким способом врядли можно сделать накрутку лайков, разве что кто-то зарегистрирует много аккаунтов-ботов.
      2. Второй способ сохранять IP пользователя который лайкнул статью (user_ip и article_id), но тогда не все пользователи смогут поставить лайк, например из-за динамического IP. Накрутить лайки в таком случае будет не трудно, нужно просто изменить IP (например подключить прокси)
      3. Третий вариант - это записывать в куки браузера что этот пользователь уже поставил лайк. Самый легкий способ накрутить лайки - просто очистить куки )

      В ближайшее время постараюсь расписать эти 3 пункта по подробнее с примерами.

      Ответить

        A PHP Error was encountered

        Severity: Warning

        Message: count(): Parameter must be an array or an object that implements Countable

        Filename: Extension/Core.php

        Line Number: 1057

Оставить комментарий Отмена

*

*

*

*

Категории

  • PHP
    • Framework Kohana
  • Javascript
  • CSS
  • Администрирование

Теги

Framework Kohana Пример jQuery Уроки CRON Установка и настройка Backup CSS3 Валидация API Bash Cache Captcha i18n Linux

Авторизация

  • Забыли пароль?
  • Регистрация

Популярные статьи

  • Находим расстояние до ближайших станции метро

    Находим расстояние до ближайших станции метро

    17.02.2017 99135
  • Регистрация и авторизация пользователей. Модуль Auth в Kohana 3.3.x

    Регистрация и авторизация пользователей. Модуль Auth в Kohana 3.3.x

    02.07.2014 40040
  • Собственная система лайков на PHP и JQuery

    Собственная система лайков на PHP и JQuery

    06.04.2015 27764
  • Javascript — сумма прописью

    Javascript — сумма прописью

    07.07.2014 18127
  • Cross-domain ajax с помощью jQuery

    Cross-domain ajax с помощью jQuery

    24.04.2015 16918
Copyright © 2014-2022 Frameworks.su. Все права защищены.