Собственная система лайков на 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 информацию о том, что пользователь уже лайкнул данную статью. Либо самое правильное решение позволить ставить лайки только зарегистрированным пользователям (как это делается в социальных сетях).

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

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