В данной статье мы разработаем собственную систему лайков на 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:
Отлично работает, спасибо
Сделал всё работает только как сделать чтобы с 1 усройства можно было поставить 1 лайк
"В ближайшее время постараюсь расписать эти 3 пункта по подробнее с примерами."
Администратор уже второй год пошел, для Вас ближайшее время это когда?
Сколько вешать в граммах?
Было бы здорово если бы Вы все-таки выполнили свое обещание, пожалуйста)
Если конкретно интересует вариант № 3
скачал ваш пример,сделал как указанно в статье,не работает...
Что конкретно у вас не работало? Ошибки какие то были?
Проверьте, может вы указали неверные доступы к БД.
Согласен оно не работает херня полная
Здравствуйте, вы писали что может реализуете лайки с авторизацией с примерами, если вы это сделали, где можно найти?
при клике на картинку,лайк не прибавляется,показывает 0.
доступы к бд верные
Админ, очень хотелось бы увидеть эти 3 способа
Думаю в ближайшее время найду свободную минутку и напишу статью о них )
У вас оибка в исходниках в Index.php, вы зачем -то делаете выход из папки
<link href="/css/style.css" rel="stylesheet">
(знак "/" - первыйне нужен)
<link href="css/style.css" rel="stylesheet"> - вот так работает, это же относится и к другим путям)))
А так статья хорошая спасибо!))))
Это верно если из папки запускать, если же все это делается на http сервере нужно указывать адрес от корня сайта.
Т.к. например если у вас будет такого вида url http://site.ru/article/ , то css будет пытаться подгрузиться из такой директории http://site.ru/article/css/style.css - естественно это будет ошибкой
Не везде и не всегда, на хостинге у меня уже нужно прописывать локально а не отталкиваться от корня сайта.
Все работает, пытаюсь сделать так, чтобы можно было удалять лайки еще, а не только ставить, ничего не выходит. Как бы получается что-то, то коряво работает очень
При перезагрузке страницы поле колличества лайков равно нулю!
Как исправить, но при первом же клике выводится число из БД...
Александр, нужно в файле index.html подключится к БД и выбрать статьи из таблицы articles, и потом вывести их и количество лайков к каждой статье.
Как это будет работать можете посмотреть в обновленном примере или посмотреть в статье (обновил описание)
Спасибо огромное!
Сейчас буду пробовать.
Привет! Отличная статья, но без записи cookies - не имеет смысла. Как прикрутить защиту от накрутки?
1. Самый лучший способ защититься от накрутки - сделать авторизацию на сайте и разрешить ставить лайки только зарегистрированным пользователям, при этом сохранять в БД (user_id и article_id) чтобы знать какой пользователь какую статью лайкнул. Таким способом врядли можно сделать накрутку лайков, разве что кто-то зарегистрирует много аккаунтов-ботов.
2. Второй способ сохранять IP пользователя который лайкнул статью (user_ip и article_id), но тогда не все пользователи смогут поставить лайк, например из-за динамического IP. Накрутить лайки в таком случае будет не трудно, нужно просто изменить IP (например подключить прокси)
3. Третий вариант - это записывать в куки браузера что этот пользователь уже поставил лайк. Самый легкий способ накрутить лайки - просто очистить куки )
В ближайшее время постараюсь расписать эти 3 пункта по подробнее с примерами.