Как сделать комментирование на сайте
Очень часто у меня спрашивают, как сделать комментирование на сайте на PHP. Я решил не объяснять на пальцах каждому, а просто написать статью, в которой показать, как делается комментирование на сайте с использованием PHP и MySQL.
Мы сейчас будем разбирать PHP-код для создания комментирования на сайте, где имеется множество страниц, на каждой из которых свои комментарии. Например, таким образом, реализовано у меня. Это самый популярный вариант, когда у каждой страницы (статьи, поста и прочего) свой набор комментариев.
Первым делом, создаём таблицу в базе данных (пусть она называется comments), где будут храниться комментарии со следующими полями:
После создания таблицы, давайте создадим HTML-форму, которую нужно будет размещать на каждой странице, где Вы хотите разрешить добавление комментариев:
Теперь займёмся обработкой формы. Для этого создаём файл comment.php с таким кодом:
query(«INSERT INTO `comments` (`name`, `page_id`, `text_comment`) VALUES (‘$name’, ‘$page_id’, ‘$text_comment’)»);// Добавляем комментарий в таблицу
header(«Location: «.$_SERVER[«HTTP_REFERER»]);// Делаем реридект обратно
?>
Но всё это уже детали, а комментирование на PHP уже сделано.
Чтобы понять весь алгоритм и, главное, научиться самостоятельно создавать подобные скрипты, обязательно изучите PHP и MySQL, и в этом Вам поможет мой Видеокурс «PHP и MySQL с Нуля до Гуру«: http://srs.myrusakov.ru/php
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 159 ):
Вы либо невнимательно читаете, либо Вам ещё просто рано про это вообще читать. Вы основы точно знаете? Теперь по вопросам: 1. Вывод комментариев на той же странице, где форма. 2. Как он может такое писать? Только если, конечно, Вы не открываете через file:///Z:\home. Если так, то забудьте про эту статью. С такой проблемой новички сталкиваются в первый день обучения PHP.
Евгений вы для начала разберите алгоритм создания комментариев. Всё создаётся на одной или двух страницах. Допустим если на двух то: text.php //это файл для формы и вивода комментов update_comment.php //это фаил обработчик Вот и всё!
сорри поспешил, ушел дальше разбираться
Спасибо Михаил всё это знал только вот не знал как id страницы отправить спасибо!!
Салам! Михайил У меня вывод комментариев на странице не выходить. В базе MySQL данные есть но на странице нету!
Тысяча причин, все перечислить невозможно. Могу лишь назвать парочку: по-другому названы поля в таблице, соответственно, неверный запрос. Либо ещё файл не обрабатывает PHP вообще, либо он имеет расширение html, либо запускается неправильно (допустим, просто открывается через двойной клик в браузере).
Михаил, а идентификатор страницы, обычная строка или с Auto_increment
Это уникальный номер страницы (число). А какой он, неважно, главное, чтобы число и уникальный.
хорошая статья)) попробую ))
Да, поскольку используется PHP-код.
теперь выдает Array ( [id] => 0 [page_id] => 150 [name] => Петр [text_comment] => Все хорошо )) ) Это как вообще?
Как мне сделать, чтоб просто выводило Имя и комментарий?
Вы не умеете работать с массивами? Очень плохо. Найдите в Google материалы по работе с массивами в PHP, посмотрите, что это такое, как они создаются, как считываются значения.
и ещё, у меня русские буквы не отображаются. Я пишу но ничего не меняется (
Ваша первая HTML форма
Первая статья в данной главе предоставит вам первый опыт создания веб-форм, в том числе проектирование простой формы, её реализацию с использованием HTML-элементов управления формой и других HTML-элементов, добавление стилей через CSS и описание того, как данные из формы отсылаются на сервер. Мы более подробно остановимся на каждой из этих подтем далее в статье.
| Необходимые знания: | Базовое представление о компьютерах и базовое понимание HTML. |
|---|---|
| Цель: | Ознакомиться с веб-формами, узнать, для чего они используются, как их проектировать, и какие базовые HTML-элементы могут понадобиться в простых ситуациях. |
Что такое Веб-форма?
Веб-формы являются одним из основных элементов взаимодействия между пользователем и сайтом или приложением. Формы позволяют пользователю ввести данные, которые затем отправляются на сервер для их дальнейшей обработки и хранения или используются на стороне клиента для обновления интерфейса (например, добавление нового элемента в список или открытие и закрытие элемента интерфейса).
В элементах управления форм можно задать правила, указывающие на определённый формат данных или значений, которые могут быть введены (валидация форм), а также к ним могут быть добавлены текстовые строки, описывающие эти элементы для зрячих и незрячих пользователей.
Проектирование формы
Перед тем, как начать программировать, всегда лучше остановиться и подумать о вашей форме. Создание быстрого наброска поможет определить верный набор данных, которые вы хотите получить от пользователя. С точки зрения UX, удобства использования интерфейса, важно помнить о том, что чем длиннее ваша форма, тем больше риск потерять пользователей. Сделайте форму краткой и лаконичной: спрашивайте только о той информации, которая вам действительно необходима.
Проектирование форм является важным этапом при создании сайта или приложения. Удобство использования форм (UX) выходит за рамки данной статьи, однако если вы хотите углубиться в эту тему, то вам следует прочитать следующие статьи:
В этой статье мы создадим простую контактную форму. Давайте сделаем набросок.
Наша форма будет состоять из трёх текстовых полей и одной кнопки. Мы узнаём у пользователя его имя, e-mail и сообщение, которое он хочет отправить. После нажатия на кнопку данные будут отправлены на веб-сервер.
Активное обучение: Реализация HTML-формы
Итак, теперь мы готовы обратиться к HTML и создать нашу форму. Для этого мы будем использовать следующие HTML-элементы: :
Компактные формы комментариев на сайт
Сегодня хочу рассказать про установку форм комментариев от Контакта и Facebook на сайт, чтобы они смотрелись компактно и не отображались одна под одной. 
Для этого надо установить сами формы комментариев и оформить их вывод с помощью простого скрипта на jQuery. Сделать это желательно заранее на этапе разработки сайта.
Содержание:
1. Устанавливаем комментарии Контакта
Заходим на страницу
Виджет для комментариев и заполняем все поля:
Будет выводиться вот такая форма:
2. Устанавливаем комментарии от Facebook
Тут не много сложнее, так как стандартная форма не привязывается к каждой странице, то есть оставленные комментарии будут отображаться на всех страницах сайта. Но об этом позже, сейчас надо получить код для вставки на сайт. Заходим в раздел для разработчиков Фейсбука, в
Комментарии, заполняем поля и в итоге получим вот такой код:
Теперь форма будет выводиться и работать, но не правильно. Чтобы комментарии привязывались к определённой странице, надо в коде вывода добавить, вот так:
Эта функция отдаёт url страницы в WP, для других движков надо искать подобные функции.
3. Оформляем формы комментариев во вкладки
Для начала, надо подключить jquery. Вставьте этот код в header.php:
Так же добавьте в style.css оформление этого бокса:
Всё, теперь формы комментариев должны у вас работать.
Пример
С помощью jQuery получилось сделать компактные комментарии, которые не занимают много места и смогут быть полезны для большинства пользователей, которые зарегистрированы в этих двух социальных сетях или в какой-нибудь одной.
Улучшение формы комментариев
От базовых до улучшенных сообщений об ошибках к фоновой синхронизации
Не исключено, что рано или поздно при разработке сайта вам придётся заняться реализацией формы, будь то регистрационная форма или форма для добавления комментариев. Я сам занимался этим уже много раз, но при создании очередной формы комментариев я задумался, насколько далеко я могу зайти в процессе её улучшения. После добавления одного улучшения мне в голову пришло другое, после реализации которого пришло ещё одно.
Вот почему я хотел бы показать вам как, используя фоновую синхронизацию, вы можете улучшить форму (в данном случае состоящую из для имени,
для сообщения и для отправки) с базовой до Улучшенной улучшенной™ версии с фоновой синхронизацией.
Базовая версия
Начнём с базовой версии HTML-формы:
Это будет работать в любом браузере. Теперь начнём улучшать форму без изменения её базовой версии.
Улучшенная HTML-версия
Делим по способностям
Для дальнейших улучшений мы будем использовать JavaScript. В нашей страницы добавим тест, отсекающий браузеры, которые не поддерживают улучшения. Мы будем использовать технику, с которой я впервые столкнулся в статье Filament Group «Enhancing optimistically».
Кастомные сообщения об ошибках
Заменим базовое сообщение об ошибке «Пожалуйста, заполните это поле» на кастомное. Для создания кастомного сообщение в наш скрипт enhanced.js (который будет загружаться только в поддерживаемых браузерах) добавим следующий код:
В таком случае, при отправке формы без комментариев, пользователю будет выводиться сообщение «Пожалуйста, введите комментарий». Вы, наверное, заметили, что я до сих пор ничего не говорил о стилях сообщений. Потому что на данный момент нет никакой возможности оформить их с помощью CSS. Раньше можно было воспользоваться селектором ::-webkit-validation-bubble для браузеров на WebKit, но он был удалён. Если вы действительно хотите оформить всплывающее окно, то вам нужно будет создать своё собственное. Но имейте в виду, что здесь есть много подводных камней, поэтому я советую использовать всплывающие окна по умолчанию.
Аяксим
Теперь, когда пользователь попытается отправить пустое поле, все современные браузеры будут выводить кастомное сообщение об ошибке, но даже если пользователь оставит комментарий, форма по-прежнему будет обрабатываться на стороне сервера, что приведёт к перезагрузке страницы. Давайте это исправим, разместив комментарий с помощью JavaScript.
Теперь наша форма прекрасно отправляет комментарии без перезагрузки страницы и при этом по-прежнему работает в неподдерживаемых браузерах.
На этом этапе вы можете задаться вопросом, почему я не использовал Fetch API. Я хотел охватить как можно больше популярных браузеров без использования полифилов и не хотел ограничиваться поддержкой только современных браузеров.
Авторасширение
Если вы напишите длинный комментарий, вам придётся проматывать текст вверх и вниз, чтобы перепроверить написанное. Исправим это с помощью авторасширения
Для этого мы будем использовать решение, которое я нашёл на CodePen.
адаптируется к длине комментария, что упрощает проверку текста.
Успех, ошибка и плохое соединение
Итак, мы добавили улучшенный HTML (атрибуты placeholder и required ), назначили кастомные сообщения об ошибках, добавили AJAX и автоматическое расширение для
Далее, для большего удобства, добавим уведомление о успешной (или неуспешной) отправке комментария и индикатор прогресса для отображения времени загрузки.
Сначала добавим новый элемент в нашу форму для отображения сообщений.
Сервис-воркер и фоновая синхронизация
Итак, мы улучшили работу с формой при плохом соединении, а теперь улучшим её при отсутствии соединения.
Чтобы узнать был ли комментарий размещён успешно, добавим обработчик событий, который проверит сообщения, поступающие от сервис-воркера.
Теперь давайте посмотрим, как выглядит наш service-worker.js.
Теперь комментарий будет опубликован в любом случае. Если вы онлайн, комментарий опубликуется сразу, если вы офлайн, он будет опубликован, как только появится связь, даже если вы уже закрыли страницу с формой.
Обратите внимание: если вы хотите проверить работоспособность окончательной версии в автономном режиме, необходимо учитывать, что сейчас в Chrome есть ошибка — просмотр страницы в автономном режиме, при использовании отладчика, не работает. Для этого вам действительно надо быть в офлайне.
Заключение
Как видите, есть много вариантов улучшить форму, а также множество других возможностей, которые я не упомянул. Столько всего можно сделать с помощью CSS, о чём я вообще не говорил здесь, но также многое можно сделать с помощью JavaScript. Самое главное здесь, что, благодаря прогрессивному улучшению, мы поддерживаем все браузеры. Некоторые посетители получат более удобный интерфейс, но абсолютно все пользователи смогут выполнить задачу и опубликовать комментарий.
Лишь немногие получат Улучшенную улучшенную™ версию, но, в зависимости от обстоятельств, каждый гарантированно получит базовую версию формы.
Если у вас есть какие-либо идеи по улучшению или вы нашли ошибку в коде, пожалуйста, создайте ишью на Гитхабе.
Комментирование на сайте скрипт установить настроить скачать описание отзыв
В самом начале нужно сказать, что эта система комментирования подойдёт вообще для всех сайтов!
О комментировании вообще и о «ecomment.su» в частности
На сайте стоит другая система комментирования!
Данная страница была написана давно, но до сих пор актуальна, все пункты, кроме данного посвящены первой моей системе комментирования ecomment.su, которую я ставил себе на сайт!
Но здесь не хватало общей информации о комментариях вообще.
Какие системы комментариев бывают!?
Системы комментирования делятся по способу хранения данных.
Системы комментирования делятся по расположению.
Когда система комментирования расположена удаленно, например вКонтакте. В таких комментариях есть свои плюсы и свои минусы. Вам ничего не нужно особенного знать. Простая установка, нужно вставить пару строк кода. Один из главных минусов, что вы никак не можете повлиять на удаленный сервер. По сути вы не являетесь владельцем данных комментариев.
Расположение комментариев у вас на сервере.(соответственно они могут разделяться на базу и файлы, о чем мы выше уже говорили) и далее после первого пункта, как раз о такой системе комментирования, на файлах, расположена локально.
Споры не утихают, какая система лучше.
Список систем комментирования для сайта
Система комментирования от вКонтакта
Система комментирования от https://facebook.com
Алгоритм работы комментариев вне зависимости ни от чего!
У комментариев есть свой алгоритм, а все останое лишь обслуживание этого алгоритма.
1). Форма комментариев :
У любого комментария должна быть форма с полями ввода. Например.
Где есть имя пользователя.
2). Метод отправки из формы :
3). Метод хранения данных :
Файлы, плюс к файлам, нужна функция file_get_contents + хранить в виде стерилизованного массива, естественно, что это должен быть ассоциативный массив
4). Вывод записанных данных :
Из базы данных мы выводили в таблицу
Вывод данных с помощью цикла
5). Уникальность страницы, комментариев и пользователя :
У каждой страницы должен быть свой уникальный идентификатор.
Описание системы комментирования для сайта(ecomment.su).
официального сайта ecomment.su, либо,
Приступим к описанию комментариев от ecomment.su
Не требует подключения базы данных.
Может быть установлена на любой сайт с поддержкой PHP5.
Имеет встроенную админку.
На официальном сайте сказано, что обгоняет по быстродействию аналогичные скрипты на основе MySQL. Ещё одно преимущество не требует MySQL.
Премодерация сообщений, которую можно выключить.
Отправка сообщений на почту, о новых сообщениях.
В файле ecomment.php все настройки описаны так подробно, что сможет настроить данную форму даже подросток!
Описание дистрибутива
Весь дистрибутив скрипта состоит из четырех файлов: ecomment.php
Это серверная часть скрипта, обслуживающая AJAX-запросы от страницы с подключенным комментированием. ecomment.js
Клиентская часть скрипта, которая будет отправлять AJAX-запросы на серверную сторону. ecomment.css
Стилевое оформление списка комментариев. Легко кастомизируется под дизайн вашего сайта простой сменой цветов. test_page.html
Тестовая страница скрипта с примером интеграции. Для работы должна быть помещена в ту же папку, где лежат предыдущие три файла.
Содержит в себе пример инициализации скрипта комментирования. ecomment_connector.php
Пример серверного варианта интеграции скрипта, когда список комментариев включается в выдачу самой страницы. Может быть полезным для надежной индексации комментариев поисковиками.
С описанием вроде закончили!
Видео : устанавливаем комментирование на сайт.
Простите за не самое хорошее качество видео! Оно было сделано довольно давно, поэтому. уж не обессудьте!
Не забываем сказать спасибо! Я старался для вас!
Процесс установки комментирования на сайт.
Теперь займёмся установкой.
Я помню, как всегда мне было трудно, когда я только начинал! И поэтому буду рассказывать настолько подробно, чтобы могли понять люди с нулевой подготовкой!
Скачать систему комментирования для сайта.
На всякий случай, все-таки сохраните данный архив, может вам потом пригодиться!
Как установить форму комментирования на сайт пошаговая инструкция.
Создаём папку на сервере, где будут лежать файлы.
И вторую папку отдельно для складирования комментов!
На каждую страницу будет создаваться отдельный малюсенький файл в формате dat.
Создайте папку с названием, чтобы папка оказалась наверху по списку папок! Чтобы её случайно не удалить и не повредить данную папку!
Я пройду заново с вами весь путь, и создам рабочий пример формы комментирования, в котором вы сможете потом потренироваться!
4. Распаковываем архив в любую папку, а уже из неё бросаем в ту папку, которую создали на сервере, либо вместе с папкой.
5. 
6.
Мы будем тренироваться на тестовой странице, которая уже есть внутри! Если она заработает, то остальное сделать будет очень просто!
Моя тестовая страница находится по такому адресу:
В файле ecomment.js указываем путь до размещения ecomment.php:
Мой путь будет такой:
Но у меня будет путь другой, а именно:
Строчка 60, можете оставить так, можете изменить…
Далее здесь же в строчке № 61, меняем код, который внутри кавычек! Просто произвольно его меняем в латинице – так написано в инструкции!
Вроде бы всё! Теперь всё измененное и сохранённое бросаем на сервер.
т.е. строчка № 7 по умолчанию:
Должна выглядеть так:
Открываем тестовую страницу!
Отправляем сообщение и…
И… что мы тут видим!?
Сообщение об ошибке:
Не удалось сохранить файл данных с комментариями.
Указанная директория хранения файлов не существует.
Просто потому, что я забыл создать ту папку о которой и говорил в пункте 2.
Только мы нажали на кнопку отправить и вот! Уже готово! Внизу нам сигнализирует, что кто-то оставил сообщение на сайте!
Не буду заходить в почту и так понятно, что это я оставил комментарий!
Можно зайти на тестовую страницу
Ну и далее нам нужно все это сделать на странице сайта!
Берём данный код и меняем путь, вторая и третья строчка. Если у вас уже подключены jquery, то первую строчку не вставлять!