форма комментариев для сайта html
Комментарии для сайта
Готовый код скрипта комментариев с пошаговой инструкцией, где его разместить, как осуществить связь с MySQL, и что и куда залить и подключить, чтоб всё заработало.
Я покажу вам готовый код скрипта и расскажу пошагово где его разместить, как осуществить связь с MySQL, и что и куда залить и подключить, чтоб всё заработало.
Сразу уточню, что весь представленный здесь код преобразуется в файлы в Notepad++ с соответствующим расширением и в кодировке utf8
Сначала сам скрипт
Разместить этот скрипт на странице можно двумя способами.
1. Скрипт размещается непосредственно на странице между тегами
2. В корневой директории сайта создаётся папка c названием, например js, если таковой ещё нет, и в неё помещается файл скрипта под названием, допустим script_comments.js
Тогда на странице, в тег прописывается подключение этого файла к странице.
Какой из этих вариантов лучше, я сказать затрудняюсь, но второй мне представляется более удобным.
Следующим шагом размещаем на странице код вывода комментариев и код формы комментариев.
Вставляется это всё одним блоком в том месте страницы, где вы хотите отобразить комментарии, обычно сразу после статьи.
p >>Напишите ваш отзыв: br > textarea name =» message » style =» width:80%; min-height:200px; » id =» message «> /textarea > /p >>
input name =» stranica » type =» hidden » value =»» ‘PHP_SELF’ ];?>» id =» stranica «>
input name =» js » type =» hidden » value =» no » id =» js «>
input name =» button » type =» submit » value =» Отправить » id =» send «> id =» resp «>
Так, с клиентской частью закончили, теперь пойдём на сервер.
Первым делом нужно скачать маленькую библиотеку jquery-1.5.1.min.js. (82kb)
Обычно представлена она открытым кодом, значит нажимаем правой клавишей и Сохранить как… сохраняем файл себе на компьютер.
У нас там уже есть один подключенный скрипт, рядом с ним прописываем ещё один.
Затем в директорию в которой находится файл страницы с комментариями, нужно загрузить файл с командами для БД.
$date = date ( «d-m-Y в H:i:s» );
$result = mysql_query ( «INSERT INTO messages (author, message, stranica, date) VALUES (‘$author’, ‘$message’, ‘$stranica’, ‘$date’)» );
if ($result == true)
> else
$date = date ( «d-m-Y в H:i:s» );
$result = mysql_query ( «INSERT INTO messages (author, message, stranica, date) VALUES (‘$author’, ‘$message’, ‘$stranica’, ‘$date’)» );
if ($result == true)
> else
?>
Следующий файл в ту же директорию — файл связи с базой данных connect.php
И последнее, что нам осталось сделать — это соединить нашу страницу, на которой будут выводится комментарии, с БД.
Теперь идём в БД MySQL. если у вас ещё нет БД, то её нужно создать.
На разных хостингах это делается по разному, поэтому я не буду подробно объяснять как это делается, а как создать БД на Денвере, можно прочитать здесь.
Когда база данных создана, заходим в phpMyAdmin, там должна быть строчка с именем вашей БД, и всё. Нам необходимо создать в ней таблицу.
Проходим во вкладку SQL — верхнее меню.
И в открывшемся окне пишем следующий запрос
Обратите внимание на левые апострофы, на клавиатуре на букве Ё.
Нажимаем Вперёд — всё таблица создана.
Блин, забыл привязку к конкретной странице. Переходим в таблицу во вкладку Структура, и добавляем одно поле с названием stranisa
Ну вот и всё, можно идти на свою страницу и тестировать комментарии.
Со стилевым оформлением, я надеюсь, вы справитесь самостоятельно.
После тестирования заходим снова в БД, в phpMyAdmin, в нашу созданную таблицу — все комментарии здесь
Нажимаем Отметить все и Изменить, вам откроются все отправленные комментарии, с указанием страниц, с которых они были отправлены.
Здесь их можно редактировать, удалять и переносить на другие страницы.
На этом всё. Вы можете изменить имена файлов и таблиц, но тогда внимательно просмотрите весь представленный код, и замените имена везде, где они фигурируют.
Как сделать комментирование на сайте
Очень часто у меня спрашивают, как сделать комментирование на сайте на 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-версия
Делим по способностям
Для дальнейших улучшений мы будем использовать 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. Самое главное здесь, что, благодаря прогрессивному улучшению, мы поддерживаем все браузеры. Некоторые посетители получат более удобный интерфейс, но абсолютно все пользователи смогут выполнить задачу и опубликовать комментарий.
Лишь немногие получат Улучшенную улучшенную™ версию, но, в зависимости от обстоятельств, каждый гарантированно получит базовую версию формы.
Если у вас есть какие-либо идеи по улучшению или вы нашли ошибку в коде, пожалуйста, создайте ишью на Гитхабе.
Как сделать комментарии на сайте? Системы комментариев на сайт!
Как сделать комментарии на сайте и какая система комментариев лучшая?
Здравствуйте, друзья и гости блога! Сегодня расскажу как сделать комментарии на сайте при помощи PHP и MySQL. А также мы с вами поговорим о системах комментирования для сайта и выберем из предложенных мной лучшую для вашего сайта.
Вопрос первый: Как сделать комментарии на сайте с помощью PHP и MySQL?
id – это уникальный идентификатор.
page_id – в этом поле будет хранится идентификатор страницы сайта, на которой располагается данный комментарий.
name – это имя того комментатора, который оставил данный комментарий.
text_comment – соответственно это текст текущего комментария.
Следующим этапом, после создания таблицы для комментариев в базе данных, нам нужно внедрить специальный код для наших будущих комментариев на сайт. Этот код на сайте позволит нашим комментаторам добавить свои комментарии к нашим статьям. Вот этот код:
Это простая HTML форма комментариев для сайта. Вы ее располагаете на своем сайте в том месте, где это удобно для оставления комментария к посту – естественно под самим постом.
Последний шаг в создании формы комментариев для сайта на PHP и MySQL – Делаем вывод наших комментариев на странице сайта. Вот код для этого:
Вот и все! Наша простая форма комментариев ля сайта создана и может работать на сайте.
Но это конечно не для новичка, который не станет копаться со всеми этими кодами HTML, PHP и MySQL. Также не станет изучать, как создать базу данных. Ему нужно все сразу, быстро и без головной боли. Я прав? Конечно прав!
Тогда давайте перейдем к следующему разделу моего материала и узнаем все об уже готовых системах комментариев для сайта и выберем наиболее удобную, функциональную и приемлемую для вашего сайта …
Системы комментариев для сайта. Какую выбрать?
Как сделать комментарии на сайте – это вопрос важный потому, что комментарии на сайте играют важную роль не только для общения владельца сайта и посетителя, но также комментарии важны для сео продвижения и раскрутки.
С помощью комментариев на сайте повышаются позиции сайта в поисковой выдаче, улучшаются поведенческие факторы, растет трафик на сайт, а следственно и увеличивается ваш заработок. Вот видите, как важны комментарии для сайта!
Поэтому давайте рассмотрим как сделать комментарии на сайте и какую систему комментирования выбрать, как наиболее оптимальный вариант?
Вообще комментарии на сайтах выводятся многими способами. Это и специальные плагины для wordpress движков и комментарии от социальных сетей всевозможные, такие как например Вконтакте, Facebook, Disqus. Также есть независимые сервисы, которые предлагают свои системы комментариев для сайта, например Cackle.
Я сейчас вам приведу одну табличку, которая сразу расставит все на свои места и вопросов уже не возникнет по поводу выбора системы комментариев для сайта:
Здесь все четко и ясно видно какая система комментариев является лучшей и нескольких представленных, которые чаще всего используются вебмастерами на своих ресурсах. Думаю, что пояснения здесь излишни и выбор остается только за Вами!
Я для себя уже принял решение и установил систему комментариев для своего сайта от Cackle.
Кстати если Вы уже решились выбрать систему Cackle для своего сайта, то вот вам ссылка, которая дает 5% скидку на приобретение системы комментариев от Cackle!
А у меня пока все на сегодня! Всем удачи и благополучия! До новых встреч!
Компактные формы комментариев на сайт
Сегодня хочу рассказать про установку форм комментариев от Контакта и Facebook на сайт, чтобы они смотрелись компактно и не отображались одна под одной. 
Для этого надо установить сами формы комментариев и оформить их вывод с помощью простого скрипта на jQuery. Сделать это желательно заранее на этапе разработки сайта.
Содержание:
1. Устанавливаем комментарии Контакта
Заходим на страницу
Виджет для комментариев и заполняем все поля:
Будет выводиться вот такая форма:
2. Устанавливаем комментарии от Facebook
Тут не много сложнее, так как стандартная форма не привязывается к каждой странице, то есть оставленные комментарии будут отображаться на всех страницах сайта. Но об этом позже, сейчас надо получить код для вставки на сайт. Заходим в раздел для разработчиков Фейсбука, в
Комментарии, заполняем поля и в итоге получим вот такой код:
Теперь форма будет выводиться и работать, но не правильно. Чтобы комментарии привязывались к определённой странице, надо в коде вывода добавить, вот так:
Эта функция отдаёт url страницы в WP, для других движков надо искать подобные функции.
3. Оформляем формы комментариев во вкладки
Для начала, надо подключить jquery. Вставьте этот код в header.php:
Так же добавьте в style.css оформление этого бокса:
Всё, теперь формы комментариев должны у вас работать.
Пример
С помощью jQuery получилось сделать компактные комментарии, которые не занимают много места и смогут быть полезны для большинства пользователей, которые зарегистрированы в этих двух социальных сетях или в какой-нибудь одной.