Blog Details

Как создать и управлять комментариями на своем блоге: Полное руководство

Создание системы комментариев на блоге – это важный аспект для взаимодействия с вашей аудиторией. В этом посте я поделюсь с вами разметкой HTML, PHP-обработчиком, JavaScript для управления лайками и общими стилями CSS для создания привлекательных и функциональных комментариев.

1. HTML разметка комментариев

Вот пример структуры HTML комментариев, которая отображает имя автора, его статус и текст комментария. Эта структура включает в себя динамическое назначение ролей (админ, модератор и т. д.), а также интерактивные элементы для лайков и ответов.

<div class="comments-container">
    <h4 class="comments-container__title"><?=$news_comm_commentary['count_comments'];?> Комментариев</h4>

<?php foreach ($comments as $key => $element): 
    // Определение ролей
    if (isset($element['author']['user_role']) && $element['author']['user_role'] == 1) {
        $answer = 'Admin';
        $role = 'comment__author--admin';
        $review = 'comment__review--admin';
        $bgBorder = 'comment--admin';
    } elseif (isset($element['author']['user_role']) && $element['author']['user_role'] == 2) {
        $answer = 'Moderator';
        $role = 'comment__author--moderator';
        $review = 'comment__review--moderator';
        $bgBorder = 'comment--moderator';
    } else {
        // Другие роли...
        $answer = 'Guest';
        $role = 'comment__author--guest';
        $bgBorder = 'comment--guest';
    }
?>
<div id="p<?=$element['id'];?>" class="comment <?=$bgBorder;?>">
    <div class="comment__inner">
        <div class="comment__avatar <?=$role;?>">
            <img src="/assets/img/comment/<?=$element['author']['user_avatar'];?>" alt="<?=$element['author']['user_name'];?>" />
        </div>
        <div class="comment__content">
            <div class="comment__header">
                <div class="comment__author-name"><?=$element['author']['user_name'];?> <?=$element['author']['user_surname'];?></div>
                <div class="comment__review <?=$review;?>"><?=$answer;?></div>
                <div class="comment__date">Добавлено: <?=date("d.m.Y H:i", strtotime($element['published_date']));?></div>
            </div>
            <div class="comment__text"><?=$element['comment'];?></div>
            <div class="comment__actions">
                <div class="comment__likes" data-comment-id="<?=$element['id'];?>" title="Нравится">
                    <span class="like-icon"><i class="fa fa-heart <?= $element['user_has_liked'] ? 'liked' : ''; ?>"></i></span>
                    <span class="like-count"><?=$element['likes'];?></span>
                </div>
                <div class="comment__reply">
                    <a class="comment__btn-reply" href="/?reply=<?=$key;?>">Ответить</a>
                </div>
            </div>
        </div>
    </div>
</div>
<?php endforeach; ?>

</div>

2. JavaScript для лайков и взаимодействия

JavaScript код для обработки кликов на кнопку "Нравится" и обновления количества лайков на странице:

document.querySelectorAll('.comment__likes').forEach(function(btn) {
    btn.addEventListener('click', function() {
        const commentId = this.dataset.commentId;
        const heartIcon = this.querySelector('.fa-heart');
        const heartCount = this.querySelector('.like-count');

        fetch('/comment/like', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ comment_id: commentId })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                heartCount.textContent = data.likes;
                heartIcon.classList.toggle('liked'); // Переключаем класс для лайка
            }
        })
        .catch(error => console.error('Error:', error));
    });
});

3. PHP-обработка комментариев

Пример PHP-кода, который обрабатывает запросы на лайк и обновляет количество лайков в базе данных:

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $data = json_decode(file_get_contents('php://input'), true);

    if (isset($data['comment_id'])) {
        $commentId = $data['comment_id'];

        // Логика для добавления или удаления лайка
        $likeStatus = likeComment($commentId); // Ваша функция для обработки лайков
        $newLikes = updateLikeCount($commentId); // Функция для обновления количества лайков

        echo json_encode(['success' => true, 'likes' => $newLikes]);
    } else {
        http_response_code(400);
        echo json_encode(['success' => false, 'message' => 'Некорректные данные']);
    }
}

4. CSS стили для комментариев

Некоторые базовые CSS стили для оформления ваших комментариев:

``css .comments-container { max-width: 900px; margin: 0 auto; padding: 20px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background: #f7f9fc; border-radius: 12px; }

.comment { border-left: 2px solid; margin: 15px 0; padding: 15px; transition: transform 0.2s; }

.comment:hover { transform: scale(1.02); }

.comment__avatar img { width: 70px; height: 70px; border-radius: 50%; }

.comment__header { display: flex; justify-content: space-between; }

.comment__actions { margin-top: 10px; }

.comment__likes { cursor: pointer; }

.liked { color: red; / цвет для лайка / } ``

Заключение

Создание системы комментариев на вашем блоге требует сочетания HTML, JavaScript, PHP и MySQL для полноценного взаимодействия пользователя. Надеюсь, этот пост даст вам четкие инструкции по созданию и управлению комментариями. Не стесняйтесь адаптировать код под свои нужды и добавлять новые функции, чтобы улучшить пользовательский опыт. Если у вас есть вопросы или нужно больше информации, дайте знать!