PHP скрипт комментариев + AJAX + JS + MYSQL + CSS


Содержание

Есть скрипт «комментариев» на AJAX + PHP

Вложения

comment.zip (11.0 Кб, 198 просмотров)
05.03.2011, 19:57

Как написать регулярное выражение для выдергивания английских букв и символов: «+», «,», «:», «-«, » «, «!», «?» и «.»
Не могу ни как собразить как написать регулярное выражение для выдергивания английских букв и.

— скрипт не работает
LUDI SCRIPT NE RABOTAET, GDE OSHIBKA. ESLI EST’ PREDLOJENIYA NA JAVA SCRIPT NE OTKOJUS’ .

Создание браузерной CAD, «math scetchpad», «Geogebra», «Живая геометрия»»
Создаю браузерную версию CAD системы, для обучения школьников стереометрии и планиметрии, что-то.

PHP скрипт комментариев + AJAX + JS + MYSQL + CSS

Освойте бесплатно наиболее простой, быстрый и гибкий способ создавать адаптивные веб-сайты.

Дизайн лендинга

Создавайте дизайн любых сайтов — для себя и на заказ!

Популярное

  • Главная
  • ->
  • Материалы
  • ->
  • Система комментирования на Ajax

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Бесплатный Курс «Практика HTML5 и CSS3»

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.

Верстайте на заказ и получайте деньги.

Что нужно знать для создания PHP-сайтов?

Ответ здесь. Только самое важное и полезное для начинающего веб-разработчика.

Узнайте, как создавать качественные сайты на PHP всего за 2 часа и 27 минут!

Создайте свой сайт за 3 часа и 30 минут.

После просмотра данного видеокурса у Вас на компьютере будет готовый к использованию сайт, который Вы сделали сами.

Вам останется лишь наполнить его нужной информацией и изменить дизайн (по желанию).

Изучите основы HTML и CSS менее чем за 4 часа.

После просмотра данного видеокурса Вы перестанете с ужасом смотреть на HTML-код и будете понимать, как он работает.

Вы сможете создать свои первые HTML-страницы и придать им нужный вид с помощью CSS.

Бесплатный курс «Сайт на WordPress»

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Хотите изучить JavaScript, но не знаете, как подступиться?

После прохождения видеокурса Вы освоите базовые моменты работы с JavaScript.

Развеются мифы о сложности работы с этим языком, и Вы будете готовы изучать JavaScript на более серьезном уровне.

*Наведите курсор мыши для приостановки прокрутки.

Система комментирования на Ajax

Исходники

Пример

В данном уроке мы будем создавать простую систему комментирования на Ajax. Мы рассмотрим, как добиться эффективного взаимодействия между jQuery и связкой PHP/MySQL с помощью JSON.

Шаг 1 — XHTML

Сначала давайте взглянем на разметку комментариев. Этот код генерируется средствами PHP в классе Comment, который мы вскоре рассмотрим.

Блок с классом avatar содержит ссылку (если человек ввел при комментировании верный url) и картинку-аватар, которая забирается с сайта gravatar.com. Мы вернемся к этому моменту, когда будем разбирать PHP-код данного примера. Также у нас есть блоки с именами name и time, и тело комментария.

Другой важный момент в разметке — форма, данные из которой отправляются методом POST. Все поля, кроме адреса сайта, обязательны для заполнения.

Форма отправляется через Ajax. Валидация целиком происходит в файле submit.php, о чем мы поговорим в части про jQuery. Каждое поле имеет соответствующий элемент label с атрибутом for.

Шаг 2 – PHP

PHP взаимодействует с MySQL и генерирует разметку комментариев. Он также получает Ajax-запросы и вставляет данные комментариев в таблицу comments в базе. Ниже приведен код, который выводит комментарии на страницу.

SQL-запрос забирает все записи из базы данных и заполняет массив comments объектами класса comments, о котором мы поговорим ниже. Данный массив потом выводится на экран.

Каждый комментарий содержит метод markup(), который генерирует готовую к использованию на странице HTML-разметку. Вы можете видеть объявление этого метода и класса ниже.

Класс забирает один ряд из базы (с помощью функции mysql_fetch_assoc()) и сохраняет его в переменную data со спецификатором private. Это делает ее доступной только для методов текущего класса. Обратиться к ней извне класса не удастся.

comment.class.php – Часть 1

Данный скрипт использует gravatar для вывода аватаров в комментариях. Для тех, кто еще не сталкивался с данным сервисом, он позволяет вам ассоциировать аватар с email-адресом. Аватар можно получить просто передав сервису gravatar.com md5() хэш от вашего e-mail адреса.


Также скрипт пытается выяснить url-адрес, по которому он расположен и определяет точный адрес картинки default_avatar.gif. Данный рисунок передается сервису вместе с хэшем, поэтому, если не было найдено аватара для конкретного email-адреса, то отображается резервная картинка.

comment.class.php – Часть 2

Метод validate() (он также — часть класса) объявлен как статический. Это означает, что он может быть вызван непосредственно с помощью Comment::validate() без необходимости создавать экземпляр объекта. Данный метод производит валидацию данных, переданных через Ajax.

Данный метод использует новые функции фильтрации, введенные в PHP 5.2.0. Они позволяют нам легко проверить введенную информацию, переданную обработчику. К примеру, filter_input(INPUT_POST,’url’,FILTER_VALIDATE_URL) означает, что мы проверяем, является ли $_POST[‘url’] корректным URL-адресом. Если да, функция вернет значение проверяемой переменной, в противном случае — ложь (false).

Это действительно удобно, так как еще недавно мы вынуждены были проверять подобные вещи, придумывая хитрые регулярные выражения и серии конструкций if.

Мы также имеем возможность использовать собственные функции для дополнительной обработки информации.

comment.class.php – Часть 3

Последний метод — validate_text(), который мы передаем как callback-функцию в два вызова filter_input выше. Она кодирует все спецсимволы HTML, надежно защищая от XSS-атак. Также он заменяет переносы строк тэгами
.

Файл submit.php получает информацию из формы комментирования через Ajax-запрос. Он проверяет данные и выводит объект JSON либо с HTML разметкой успешно добавленного комментария, либо со списком ошибок. jQuery использует свойство status для определения того, выводить ли сообщения об ошибках, либо разметку для комментария.

Ниже вы можете видеть два гипотетических ответа:

При неуспешном ответе, jQuery проходит циклом по объектам, содержащим ошибки и выводит текст ошибки рядом с соответствующим полем формы.

Шаг 3 – CSS

Теперь, когда вся разметка у нас корректно генерируется и отображается на странице, можно переходить к ее стилевому оформлению.

styles.css – Часть 1

Применяется ряд стилей из CSS3, включая скругленные углы и тени. Ясно, что в старых браузерах это работать не будет. Однако — это всего лишь представление, которое не влияет на функционирование самого скрипта.

styles.css – Часть 2

Во второй части стилевого файла мы применяем стили к комментариям и форме. Заметьте селектор input[type=text], который выбирает элементы в зависимости от атрибута type.

Шаг 4 – jQuery

Сейчас давайте разберемся с jQuery, являющимся последним шагом данного урока. После подключения библиотеки внизу страницы (для повышения скорости загрузки страницы), можно заняться написанием скрипта.

Сначала мы дожидаемся загрузки всей страницы, всей объектной модели документа (DOM). Переменная working работает как флаг, который сообщает скрипту, выполняется ли Ajax-запрос (предотвращая, таким образом, множественную отправку комментария)

Затем мы проверяем статус для определения того, был ли комментарий успешно добавлен. Если да, мы выводим полученную разметку на страницу под последним комментарием с эффектом slideDown.

Если возникли проблемы, мы отображаем сообщения об ошибках, добавляя для этого элемент span к соответствующему элементу.

На этом создание простой системы комментирования с использованием Ajax завершено!

Заключение

Чтобы скрипт работал на вашем сервере, вам нужно создать таблицу comments в вашей базе данных MySQL. Вы можете сделать это, выполнив в phpMyAdmin SQL-запрос, который находится в файле table.sql, который также приложен к исходникам. После этого вам нужно внести в файл connect.php ваши данные для подключения к серверу.

P.S. Хотие освоить такие языки и технологии веб-разработки, как PHP, Javascript, Ajax, CSS и другие? Обратите внимание на премиум-уроки по различным аспектам сайтостроения. Также вам может быть интересен бесплатный курс по созданию своей CMS-системы на PHP с нуля:

По материалам tutorialzine.com
Перевод — Дмитрий Науменко

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

unboxIT

Если информация была полезной для вас, вы можете поблагодарить за труды Яндекс деньгами: 41001164449086 или пластиковой картой:

Пишем PHP чат ООП MVC Ajax JavaScript

Сразу надо сказать что я не пытаюсь изобрести велосипед, или правильнее сказать чат, благо на сегодня их написано огромное количество. Скорее это проверка собственных навыков приобретённых после прохождения ряда курсов по PHP ООП, программированию, а также изучения JavaScript, помноженных на концепцию MVC. Всё написанное ниже является моим виденьем архитектуры построения web приложения, а именно чата, которое возможно поможет начинающим программистам.

Вступление. Структура приложения чата.

Итак, чат мы будем писать на PHP с использованием ООП в концепции MVC. При отправка сообщений и получение новых будет осуществляться динамически при помощи Ajax POST запросов.
Но прежде чем начать мне бы хотелось сразу показать структуру чата, архитектуру которая у нас выстроится в следующих частях.
Я не буду строить UML диаграммы, поскольку не все с ними знакомы, да и иллюстрация ниже более чем понятна:

Не стоит особо заострять внимание на данной картинке. Она служит лишь для понимания происходящей картины в целом, и к ней следует периодически возвращаться по окончании очередной части, чтобы не запутаться в происходящем.

Часть 1. MVC и файловая структура.

На самом деле самое сложное при написании любого приложения это создание правильной архитектуры. И здесь нам на помощь приходит концепция MVC, которая предлагает разделение приложения на части по функциональному признаку. Соответственно эти части будут находиться в разных файлах и папках организованных соответствующим образом. Именно поэтому мне хотелось бы заострить внимание на MVC чуть более подробнее.

Опишу концепцию MVC коротко, своими словами.
При таком подходе приложение разбивается на три части каждая из которых отвечает за свою сферу, а именно:

Model (Модель) – выполняет обработку данных, вычисления, и т.д.
View (Вид) – отвечает за вид, форму, в общем интерфейс отображаемый пользователю, на основании данных от модели
Controller(Контроллер) – получает данные от пользователя (от интерфейса) и передаёт их соответствующим образом модели.

На картинке выше, модели показаны синем прямоугольником, виды — зелёным, а контроллеры жёлтым.

В соответствие с MVC, и некоторыми другими соображениями структура папок чата будет выглядеть следующим образом:

config – файлы конфигурации с параметрами подключения к БД, и т.д.
controllers — контроллеры отвечающие за принятие решений по обработке данных от пользователя
css – файлы стилей
js – файлы JavaScript
lib – модели и библиотеки для работы с данными
templates – шаблоны, отвечающие за оформление внешнего вида
index.php – ну и самый главный файл с которого начинается работа всего приложения.

Часть 2. Начало работы и автозагрузка файлов.

Поскольку я буду использовать PHP ООП подход, то за место скучного подключения нужных файлов через include (require), можно написать функцию которая будет подгружать нужные файлы при инстанцировании класса:

spl_autoload_register(function($class) <
$file = str_replace(‘\\’, ‘/’, $class) . ‘.php’;
if(file_exists($file)) <
require_once($file);
>
>);

При попытке создать объект класса cMain из пространства имён (namespace) controllers (об этом чуть позже) мы автоматически выполним:

Важно заметить, что функция, str_replace в функции автозагрузчика автоматически заменит ‘\’ на ‘/’, таким образом происходит согласование пространства имён с файловой структурой приложения. Это очень важный момент.
Т.е создавая объект new controllers\cMain, мы фактически выполняем require_once controllers/cMain.

Красиво и изящно, а главное нет длинных имён классов, сложной функции автозагрузки, и файловая структура согласована с пространством имён.

Далее мы выполняем единственный метод request(), который инициализирует работу чата.

Мы только что разобрали работу файла index.php

Небольшое отступление.
Я думаю вы заметили приставку ‘c’ перед названием класса cMain, это говорит о том, что перед нами контроллер. Соответственно ‘m’ – будет означать модель. Для большей простоты и наглядности построения пользовательского интерфейса при помощи шаблонов я не буду использовать ООП, поэтому классов с ‘v’ у меня не будет.
Приставки в виде буквы в названии класса я сделал умышлено, для большей наглядности, и в действительности в этом нет никакой необходимости, поскольку пространство имён однозначно определяют принадлежность того или иного класса в концепции MVC.

Часть 3. Контроллеры.

В чате будет один единственный контроллер, cMain. Его задача, это понять от кого происходит запрос. А именно от JavaScript оставляющей чата, или это первоначальный заход пользователя, который инициализировал выполнение нашего приложения.

namespace controllers;
class cMain<
public function __construct() <
>

public function request() <
if(!$_POST) <
$messages = new \lib\mMessagesCheck(null);
$chat = new \lib\mChat($messages);
$chat->show();
>
else <
$messages = new \lib\mMessagesCheck($_POST);
if (array_key_exists(‘transmit’, $_POST))
$messages->add();
if (array_key_exists(‘receive’, $_POST))
$messages->showJson();
>
>
>

Илон Маск рекомендует:  Визуальный сайт в CSS3

Как я говорил ранее, структура папок и пространство имён согласованны, по этому контроллер находится в пространстве имён (namespace) controllers, находясь при этом в папке controllers.

Выполняя в index.php единственный метод request(), мы проверяем наличие POST запросов.

Если POST запроса нет, то, это пользователь первый раз зашёл на страницу, и мы должны показать ему интерфейс, или проще говорят вывести собственно наш чат.
Для этого мы создаём объект сообщений класса mMessagesCheck, передавая в конструктор null (поскольку отсутствует POST запрос). После чего сам объект с сообщениями передаём в конструктор класса mChat, который и отвечает за построение пользовательского интерфейса.

Если же есть POST запрос, то это Ajax запросы, инициированные JavaScript составляющей чата.
Запросы POST могут быть двух видов ‘transmit’ и ‘receive’. Для этого мы просто проверяем наличие соответствующих ключей в глобальном массиве $_POST. Названия ‘transmit‘ и ‘receive‘ выдуманные, но довольно неплохо отражают суть происходящего.

Первый запрос, ‘transmit’, говорит о необходимости добавить новое сообщение, для чего мы выполним в контроллере метод add().

Второй запрос ‘receive’, говорит о желании получить новые сообщения из БД. Здесь мы выполним метод showJson().

Забегая немного вперёд скажу, передавать и принимать сообщения (Ajax запросы), для динамического обновления страницы, мы будем в формате JSON. Не стоит пугаться этого названия, это всего лишь удобный формат представления данных и не более.

В обоих случаях нам потребуется создать объект с сообщениями new mMessagesCheck($_POST). Запрос POST мы передаём в конструктор, поскольку именно в нём будет содержатся информация о вновь добавляемом сообщении от пользователя в БД, либо о желании получить новые сообщения от БД к пользователю.

Крайне важно не возлагать работу моделей (обработку данных, вычисления) на контроллеры. Всё что должен сделать контроллер, это управлять процессом, но не более. В противном случае мы рискуем скатиться к чрезмерному разрастанию контроллера, или говоря научно к Fat Stupid Ugly Controllers (Толстые, тупые, уродливые контроллеры).


Ну да ладно, я отвлёкся, думаю, теперь настало самое время детально рассмотреть, классы модели с сообщениями mMessagesCheck и mMessages.

Часть 4. Модели mMessagesCheck и mMessages.

Сразу хочу сказать, что это самый сложный класс для понимания, поэтому, следует запастись терпением.

mMessagesCheck является прокси для класса mMessages, и оба они по паттерну GOF Proxy реализуют один и тот же интерфейс:

namespace lib;
interface iMessages <
public function __construct($post);
public function get();
public function add();
public function showJson();
>

В конструктор бы будем передавать POST запросы (если они есть).

Метод get() будет возвращать массив сообщений которые есть в БД, для дальнейшей обработки моделью класса mChat.
Метод add() будет добавлять новые сообщения в БД, руководствуясь тем что находиться в POST.
Метод showJson() будет выводить JSON представление сообщений, на основании некоторых параметров, которые опять же находятся в POST.

mMessagesCheck осуществляет проверку данных полученных методом POST, и если они корректны, то передаёт их mMessages для дальнейшего взаимодействия с БД. Таким образом mMessagesCheck как бы защищает mMessages являясь кеширующим защитником. Но оба класса реализуют один и тот же интерфейс.

Итак mMessagesCheck, имеет следующий вид:

class mMessagesCheck implements iMessages <
private $post;

public function __construct($post) <
$this->post = $post;
>

public function add() <
$correct = true;
$mObj = json_decode($this->post[‘transmit’]);
if (!isset($mObj->user) or !isset($mObj->message))
return;
$mObj->user = trim($mObj->user);
$mObj->message = trim($mObj->message);
$this->post[‘transmit’] = json_encode($mObj);
// Пробелы
if($mObj->user == » || $mObj->message == »)
$correct = false;
//HTML
if(preg_match(«/[ ]+/», $mObj->user) or preg_match(«/[ ]+/», $mObj->message))
$correct = false;
//SQL
if(preg_match(«/((\%3D)|(=))[^\n]*((\%27)|(\’)|(\-\-)|(\%3B)|(;))/i», $mObj->user) or preg_match(«/(\%27)|(\’)|(\-\-)|(\%23)|(#)/i», $mObj->message))
$correct = false;
if($correct) <
$real = new mMessages($this->post);
$real->add();
>
>

public function get() <
$real = new mMessages($this->post);
return $real->get();
>

public function showJson() <
if ($this->post[‘receive’] != ») <
$mObj = json_decode($this->post[‘receive’]);
if (preg_match(«/^[\d\+]+$/», $mObj->last)) <
$real = new mMessages($this->post);
$real->showJson();
>
>
>
>

Начнём с самого простого, метода get().
Напомню, этот метод вызывается контроллером, если запрос исходит непосредственно от пользователя, т.е. не идёт речи о в взаимодействии данных от пользователя с БД. Поэтому этот метод абсолютно безопасен, и его можно переадресовать дальше объекту класса mMessages:

Важно не забывать вернуть результат полученный непосредственно от модели mMessages с сообщениями, который мы будем позднее использовать в модели класса mChat.

Несколько сложнее работает метод showJson().
В нём проверяется что запрос не пустой, и если это так, то из последовательности символов переданных JavaScript, мы делаем полноценный объект:

В этом объекте при помощи регулярного выражения мы проверяем на корректность одно единственное свойство last. В этом свойстве храниться порядковый номер последнего сообщения которое есть у пользователя. Если это только число, то всё в порядке, и мы также переадресовываем POST запрос объекту класса mMessages.

Здесь нам нет необходимости возвращать запрос, поскольку showJson(), вызывается для того чтобы вывести, показать данные. Именно эти данные увидит JavaScript при соответствующем запросе.

Метод add() работает практически аналогичным образом.
Он принимает POST запрос, делает из него объект. У этого объекта есть 2 свойства user и message, в которых содержится информации о имени пользователя и тексте сообщения которые отправляет пользователь.
Поскольку именно эти свойства (данные) мы будем записывать в БД, их необходимо хорошенько проверить на предмет всевозможных атак, что и делается регулярными выражениями строчками ниже.

В реальности проверка входных данных на атаки должна происходить значительно серьёзнее, но это тема отдельной статьи, или даже книги, и я не хочу углубляться в эти дебри.

Теперь настало самое время рассмотреть класс mMessages.
Именно он занимается взаимодействием (правда через посредников) с БД. Фактически, его основная задача, это подготовить POST данные для записи/получения данных в/из БД в виде SQL запросов и вернуть либо вывести результат.

Итак, собcтвенно код:

class mMessages implements iMessages <
private $post;

public function __construct($post) <
$this->post = $post;
$dbConfig = new mConfigIni(‘config/db.ini’);
$this->my = new mMySQL($dbConfig->host, $dbConfig->db, $dbConfig->login, $dbConfig->pass);
>

public function get() <
$query = «SELECT * FROM `messages_oop` ORDER BY `date_msg` DESC LIMIT 50;»;
$res = $this->my->request($query);
while ($record = $res->fetch_assoc()) <
$arr[] = $record;
>
return array_reverse($arr);
>

public function showJson() <
$mObj = json_decode($this->post[‘receive’]);
$t = «SELECT * FROM `messages_oop` WHERE `id_msg` > ‘%d’ ORDER BY `date_msg` DESC LIMIT 50;»;
$query = sprintf($t, $mObj->last);
$res = $this->my->request($query);
while ($record = $res->fetch_assoc()) <
$arr[] = $record;
>
if (isset($arr)) <
echo json_encode(array_reverse($arr)); //JSON_FORCE_OBJECT
>
else
echo ‘no’;
>

public function add() <
$mObj = json_decode($this->post[‘transmit’]);
$t = «INSERT INTO `messages_oop` (`date_msg`, `user`, `message`) VALUES (now(), ‘%s’, ‘%s’);»;
$query = sprintf($t, $mObj->user, $mObj->message);
if ($this->my->request($query));
echo ‘success’;

Фактически каждый метод в этом классе формирует необходимый SQL запрос для БД, после чего он выполняется, после чего результат возвращается либо отображается. Детально рассматривать SQL запросы не вижу смысла, и хочу остановлюсь лишь на некоторых особенностях класса mMessages.

В конструкторе этого класса:

$dbConfig = new mConfigIni(‘config/db.ini’);
$this->my = new mMySQL($dbConfig->host, $dbConfig->db, $dbConfig->login, $dbConfig->pass);

В переменной $dbConfig будет храниться объект со свойствами, параметрами которые необходимы для подключения непосредственно к БД. Эти свойства мы передадим в конструктор класса mMySQL, который имеет единственный метод request($query), целью которого является выполнение соответствующего SQL запроса $query и возвращение результата.

Также не вижу смысла детально рассказывать о моделях классов mConfigIni и mMySQL, они более чем просты и понятны.

Первый класс mConfigIni, читает конфигурацию из файлов вида ‘свойство=значение’, и формирует объект с искомыми свойствами, которые позднее удобно использовать.

Второй класс mMySQL на основании данных конструктора осуществляет соединение с БД и выполняет запрос при вызове метода request($query).

Хочу обратить внимание на особенность метода add() класса mMessages.
В случае если добавление сообщения прошло успешно, мы отправим сообщение ‘success’.

Это сообщение будет принимать JS, понимая тем самым что сообщение было успешно добавлено в БД.

Почти также работает метод showJson() он берёт сообщения из БД, номера которых больше чем отправил JS (об этом чуть позже). Если таких сообщений нет, то выводиться ‘no’, если есть, то они выводятся в JSON формате для последующей интерпретацией JS:

Часть 5. Модели для создания интерфеса чата, mChat и mTemplate.

Здесь я предлагаю начать с последнего, а именно mTemplate, класс прост и изящен.

class mTemplate <
private $html;
public function __construct($file, $var = array()) <
foreach($var as $key => $item) <
$$key = $item;
>

ob_start();
include $file;
$this->html = ob_get_clean();
>

public function get() <
return $this->html;
>

Целью данного класса является создание объектов на основании файлов с шаблонами.

Наиболее интересен здесь конструктор. Мы передаём ему 2 параметра, а именно файл с шаблоном на основании какого будет создан объект, и переменные с значениями в виде массива которые будем использовать внутри этого шаблона:

public function __construct($file, $var = array())

С первым параметром всё понятно, а вот назначение второго параметра в виде массива может несколько озадачить.

Вторым параметром мы передаём массив, ключами которого будут являться название переменных в файле шаблона, а значениями будут значениями переменных.

Проще всего понять это на примере.
Рассмотрим, что произойдёт в конструкторе класса при:

$obj = new mTemplate(‘templates/messages.php’, array(‘messages’=> ‘Много сообщений’)

При выполнение цикла foreach показанного выше в переменную $messages будет записано значение ‘Много сообщений’. Далее мы стартуем буферезованный вывод, состоящий из include файла messages.php.
Для большей простоты, предположим что этот файл представляет из себя что-то вроде:

В этом файле при выполнении переменная $messages получит описанное выше значение.

После чего мы останавливаем буферезацию вывода и записываем значение в свойство $this->html объекта.
Теперь в свойстве html объекта класса mTemplate содержится:

Т.е. в свойстве готовый HTML код который можно либо использовать дальше, либо показать пользователю. От сюда следуют 2 основных метода:

get() – который вернёт готовый HTML код для последующего использования, например вставки в другой более общий шаблон.
show() – выведет готовый HTML, тем самым передав его браузеру пользователя.

Собственно, именно так и работает mChat:

namespace lib;
class mChat <
private $messages;
public function __construct($messages) <
$this->messages = $messages;
>

public function show() <
$htmlMessages = new mTemplate(‘templates/messages.php’, array(‘messages’=> $this->messages->get()));
$htmlSend = new mTemplate(‘templates/send.php’);
$htmlPopup = new mTemplate(‘templates/popup.php’);
$htmlAll = new mTemplate(‘templates/main.php’, array(‘templateMessages’ => $htmlMessages->get(), ‘templateSend’ => $htmlSend->get(), ‘templatePopup’ => $htmlPopup->get()));
$htmlAll->show();
>
>

Этот класс принимает в конструктор единственный параметр – объект сообщений, который мы передали ранее в контроллере cMain.

Далее следует рассмотреть метод show().
В первой строке, мы записываем в переменную $htmlMessages объект с готовым HTML кодом, построенный на основании шаблона ‘templates/messages.php’ и массива сообщений (полученного в результате вызова метода messages->get()).
В messages.php находится шаблон для построения сообщений чата.
Теперь $htmlMessages содержится объект в свойстве html которого, что-то вроде:

Почему в переменную мы не записываем непосредственно HTML код, а объект с свойством, станет понятно чуть ниже.

Аналогично мы поступаем с шаблоном popup.php, который нужен для включения на страницу HTML кода для всплывающих сообщений. А также send.php в котором содержится шаблон для формы отправки данных, в чат.

Самое интересное происходит в предпоследней строке метода:

$htmlAll = new mTemplate(‘templates/main.php’, array(‘templateMessages’ => $htmlMessages->get(), ‘templateSend’ => $htmlSend->get(), ‘templatePopup’ => $htmlPopup->get()));


Здесь мы производим окончательную сборку.
В общий шаблон main.php мы включаем все составные части HTML. Именно для этого мы вызываем методы get(), у соответствующих объектов. Таким образом мы передаём в шаблон main.php составные части HTML кода, но ещё не показываем его пользователю. А вот строка:

Делает именно это.

Мы показали, отправили готовый HTML код, который будет обработан браузером пользователя.

Схематично иерархию шаблонов можно представить так:

main.php(messages.php + send.php + popup.php)

Детально рассматривать каждый шаблон думаю не имеет смысла, все исходники и ссылка git репозиторий будут в конце. Мне бы хотелось, чтобы была понятна основная суть происходящего.

Внимательный читатель, заметил, что в конце шаблона messages.php есть подключение внешнего скрипта .
В некоторых шаблонах есть отсылки на JavaScript файлы которые потребуется для динамического обновления страницы, и отправки данных с новыми сообщениями на сервер в БД.

Об этом мы и поговорим далее.

Часть 6. JavaScript Ajax

На данный момент у нас есть полностью готовая HTML страница, с сообщениями которые есть БД, формой отправки и т.д. Но она полностью статична. Передавать свои сообщения и получать новые от сервера мы будем с использованием JavaScript.

Для этого в шаблонах ранее подключены 3 js файла:

Первый это библиотека Jquery.
По большому счёту она потребуется нам лишь для более удобного формирования Ajax запросов, и для некоторой анимации. Всё это можно сделать и голыми средствами JavaScript, однако Jquery значительно упростит нашу JS составляющую.

Прежде чем переходить непосредственно к рассмотрению JS файлов, надо понимать что у нас в данный происходит в браузере.
А в нем у нас примерно такой HTML код полученный от сервера:

Скрипт модуля — древовидные комментарии. Создание движка на Codeigniter + HMVC. Часть 7

Всем привет. В первую очередь хочу поздравить всех с наступившим Новым Годом! Пожелания можно почитать и оставить комментарий на странице с поздравлениями ;) И пока все гуляют, ходят в гости и едят оливье — мы с вами займемся написанием модуля комментариев. Модуль достаточно сложный, но разобравшись с ним — получите достаточно мощный инструмент обратной связи для вашего сайта.

Что же мы будем делать и что получим в итоге данного урока:

  • Сформированную и продуманную таблицу в бд для комментариев сайта
  • Список комментариев в виде дерева(возможность отвечать на отдельный комментарий)
  • Напишем рекурсивную функцию для вывода комментариев
  • Рендинг комментариев с помощью шаблона
  • Возможность выводить комментарии для любых отдельных модулей(страницы,категории,галереи и т.д.)
  • Отдельный шаблон для вывода формы комментирования
  • Еще один шаблон формы для ответа на комментарий
  • Небольшую защиту от флуда — запрет отправки более 1 комментария в течении 5 минут
  • Уведомление администратора сайта о новом комментарии на почту

Не маленький список задач мы составили, правда? Таблица комментариев mysql — будет очень похожа на таблицу движка ворд-пресс — это я заметил недавно, получив заказ на перенос всех страниц и комментариев со старого сайта клиента на разработанный мною новый! Хотя структура данной таблицы — похожа практически на всех движках;) Давайте приступим:

Илон Маск рекомендует:  Простейший контрольный тест на Java Script

По названиям полей — уже догадались что мы указываем:
article_id — ID статьи для которой оставляем комментарий
parent_id — ID родительского комментария, если это ответ
type — здесь указываем тип модуля, для страниц которого оставляем комментарий, в нашем движке пока существуют два типа: page и category
name — имя комментатора
email — почтовый адрес комментатора
site — пользователь может указать свой сайт (по желанию выводить имя в виде ссылки)
message — текст комментария(сейчас задана максимальная длина сообщения 2000 символов)
created — дата создания
public — комментарий опубликован или нет или на утверждении администратором
ip — адрес пользователя

Все предельно просто.
Но что бы можно было запретить или разрешить вывод комментариев на отдельных страницах — понадобится так же добавить ячейку в таблицу pages с названием comments_on.
`comments_on` tinyint(1) DEFAULT NULL.
Если нужно открыть комментирование и выводить комментарии — то задаем единичку. Если не хотите выводить для данной статьи — нолик. Если вы планируете открыть комментарии не только для статей сайта но и для разделов — следует добавить такое же поле и для таблицы category.

Теперь создаем папку с модулем и следующие файлы:
/modules/comments/
/modules/comments/controllers/Comments.php
/modules/comments/libraries/Comments_lib.php
/modules/comments/models/Comments_model.tpl

Задачу этих файлов можно понять по их названиям). Кстати — система работы модуля очень схожа с модулем формы.

Давайте заполним основной файл модуля Comments.php кодом — и подробнее познакомимся с системой работы:

Многие методы нашего нового класса Comments — точная копия Forms, который мы писали в предыдущей статье — настоятельно рекомендую ознакомится сперва с ним!

По порядку буду вкратце описывать логику всех функций:
get_all_comments($id, $comment_type) — думаю догадались ;) — выборка всех комментариев конкретного модуля для конкретной статьи. Сперва делаем выборку данных. Подсчитываем общее колличество комментариев для вывода числа на сайте. Далее с помощью библиотеки comments_lib и функции _build_comments — строим дерево комментариев. С помощью рекурсивной функции renderCommentList — рендерим все комментарии и помещаем В переменную $data[‘comments’] готовый html код. Далее этот код помещаем в шаблон comment_index.tpl — тем самым сформировав и передав полностью всю верстку для страницы. Содержание модели и библиотеки комментариев выложим ниже.

PHP скрипт комментариев на Codeigniter 3 + AJAX + jQuery + MySQL

Рекурсивная функция renderCommentList($tree) — генерирует html код каждого отдельного комментария с помощью шаблона comment_render.tpl в блоке

Далее — функции get_comment_form и get_comment_form_ajax — идентичные по функции, но вторую можно вывести только с помощью аякса. Зачем так делать?

Практически все боты-спамеры парсят сайты на наличие таких вот форм для комментариев. Что бы боты не забивали ваш сайт рекламой и мусором — нужно сделать так, что бы они просто не находили следующие формы на вашем сайте) В данном уроке — будем использовать обычную функцию, но вам рекомендую не выводить код формы а сайте а запускать или выводить верстку по нажатию на кнопку типа — «Оставить комментарий» — асинхронным запросом! Это не 100% защита а от направленной атаки — не защитит совершенно, но может помочь вредным скриптам — не признать ваш сайт для спама.

get_reply_comment_form — отдает код формы для ответа на уже оставленный комментарий. Параметры для данной функции (ID статьи, ID родителя, тип модуля) передаются методом POST с помощью асинхронного запроса jQuery и подставляются в скрытые поля выводимой формы в шаблоне comment_reply_form.tpl.

send_comment и аналог для ответа: send_reply_comment — обрабатывает все переданные в форме данные комментария. Предварительно проверяем — является ли запрос асинхронным иначе выводим ошибку(тоже помогает от массовой отправки спама). Логика функции аналогична send_form — модуля forms. Проверяем введенные данные, проверяем включена ли на сайте капча и правильно ли заполнили поле для нее. Прежде чем поместить все данные в базу — мы проверяем существуют ли в базе комментарии созданные менее 5 минут назад от юзера с таким же IP! Если да, то отдаем ошибку — шаблон comment_disable.tpl (можете указать другие параметры проверки или задать более-менее жесткие условия) После записи данных в базу проверяем включена ли отправка писем с заявками на почту администратору и запускаем функцию отправки _comment_mail — в положительном результате.

_final и _final_reply — это рендер шаблона, где выводим благодарность для пользователя.

_comment_mail — отвечает за отправку сообщения администратору сайта со всеми данными комментария и ссылкой на страницу. Изображение как выглядит данное письмо:

Делаем выборку данных комментария по ID, дальше выбираем данные страницы или категории к которой был оставлен отзыв. Составляем текст письма и отправляем на почту администратору — если включена соответствующая опция в настройках сайта.

Построение дерева комментариев к статьям на PHP (Codeigniter 3) с помощью рекурсии

Дальше — исходный код библиотеки модуля:

Логику работы данной рекурсии мы уже разбирали при создании модуля меню. Функции идентичные.
Модель с запросами Comments_model.php:

Думаю вопросов с данным файлом и запросами ActiveRecords не возникнет и мы пойдем дальше.

Пришло время верстки, стилизации и ява-скрипта.
Файл comment_index.tpl — выводит заголовок с количеством комментариев и блок внутри которого размещаются все данные:

Далее рассмотрим исходный код html который мы генерируем в цикле для каждого комментария:

Как видите — мы выводим блок с уникальным идентификатором post_comment_idкомментария — для обозначения места вывода формы с ответом на отзыв. Изображение(по желания), имя автора текстом или ссылкой на сайт, дата создания и содержание. Ниже текста поместим кнопку «Ответить» — при ее нажатии под отзывом появится новая форма для отправки ответа на данный комментарий.

Дальше разберем форму:

Обычная форма. Скрытое поле — идентификатор статьи, поля для ввода имени, почтового ящика, сайта, комментария и окно для ввода капчи — если она включена. action формы — путь к методу класса отвечающего за отправку комментария. Обратите внимание — что с URI мы так же передаем название модуля, для которого оставляем отзыв — если его не задать — то наш скрипт сохранит данные с типом «pages». В принципе можно задать его в скрытом поле и передать методом POST как остальные данные. На ваше усмотрение в общем.

Форма ответа на комментарий — отличается лишь заданием дополнительного скрытого поля в теле и оберткой кода данной формы — блоком с классом «reply_form»:

Шаблоны comment_final.tpl и comment_disable.tpl — обычная верстка:

Ну что же. Необходимо добавить щепотку соли из стилей:

Отлично! Давайте украсим наш уникальный модуль — кусочками ява-скрипта ;)

Рассмотрим данный код по ближе. По нажатию на кнопку «ответить» в первую очередь проверяем — нет ли у кнопки класса opened и если есть — то прячем и удаляем блок с классом reply_form с сайта и убираем класс opened с кнопки. Иначе — добавляем класс opened для нажатой кнопки и обьявляем переменные article_id, comment_id, comment_type и comment_block_id. Каждой переменной присваиваем значения аналогичного по ее названию атрибута data. Другими словами: мы задали для каждой кнопки «Ответить» 4 атрибута: тип модуля, ID статьи и ID комментария(родителя). Эти атрибуты сохраняем в переменные, объединяем в обьект и отправляем методом ajax на сервер. Ответом — получаем html код блока с формой для ответа, и этот полученный код вставляем в конце блока с комментарием на который хотим дать ответ! Вот и все. Очень простой и чистый код.

Остальные две функции — это валидация полей формы с помощью отличного скрипта bootstrapValidator — который мы так же разбирали в статье формы обратной связи. Если не читали статью — то немедленно перейдите к ее изучению. В ней мы подробно разбираем данный скрипт и его работу. Наш бутстрап валидатор позволяет на ходу проверять ошибки при заполнении формы и в случае их отсутствия посылает асинхронный запрос на сервер и выводит ответ в блок с формой ответа, заменяя ее.

Ну модуль то мы написали, таблицу pages изменили добавив новое поле comments_on. А код вывода комментариев и формы не задали в шаблоне page_full.tpl . Проверим включены ли комментарии для данной страницы и выведем все ответы и форму для ответа в под содержанием статьи вот так:

Вот и все на сегодня. Как всегда посмотреть работу скрипта вы можете в демо-версии движка. Не забыл я и про исходники сайта с модулем comments. Всех еще раз с праздниками и легкого кодинга вам, дорогие друзья. Жду много ваших положительных отзывов ;-)

Добавление записей в бд используя ajax

Добрый день! Я ajax практически не знаю, просто копался в интернете за этот день. В итоге накатал код который поидее должен был добавлять запись без перезагрузки и тут выводить ее в таблице. Однако, что-то ничего не происходит при нажатии кнопки «добавить». Кто опытным взглядом может определить в чем ошибка?

Вообщем имеется таблица article с полями:

  • article_id integer not null auto_increment primary key;
  • article_title varchar(300);

И имеются два файла:

  • index.php в котором есть вывод данных из таблицы и скрипт ajax по поводу передачи данных на вставку.
  • addArticle.php — файл в котором идет вставка записи;

Код файла addArticle.php:

Код основного файла index.php:

И вообщем этот код не срабатывает. Почему не добавляется запись ни в таблицу, ни соответственно не выводится в теге таблицы. В чем может быть ошибка?

PHP — AJAX и MySQL


AJAX можно использовать для интерактивной связи с базой данных.

Пример базы данных AJAX

В следующем примере демонстрируется, как веб-страница может получать информацию из базы данных с помощью AJAX:

Пример

Пример объяснений-база данных MySQL

Таблица базы данных, используемая в приведенном выше примере, выглядит следующим:

id FirstName LastName Age Hometown Job
1 Peter Griffin 41 Quahog Brewery
2 Lois Griffin 40 Newport Piano Teacher
3 Joseph Swanson 39 Quahog Police Officer
4 Glenn Quagmire 41 Quahog Pilot

Пример

В приведенном выше примере, когда пользователь выбирает человека в выпадающем списке выше, выполняется функция под названием «showUser ()».

PHP скрипт комментариев + AJAX + JS + MYSQL + CSS

Давайте немного вспомним, что мы уже сделали. Создали форму добавления комментариев, написали обработчик для публикации и фильтрации сообщений, подключили javascript для вывода комментариев на ajax без перезагрузки страници, сделали проверку на заполнение полей формы, и далее как, я и обещал сегодня мы подключим файл обработки капчи. Файл будет генерировать случайное число, набор символов или то, что мы ему укажим. Давайте продолжать. И следующим этапом создадим сам файл для генерации капчи и назовем его kсaptcha.php

Содержимое класса для капчи

Просто поместите этот весь код в один файл, далее вы заметили, что мы в самом верху подключали kcaptcha_config.php, в нем мы зададим параметры. Вот сам код из файла kcaptcha_config.php.

Далее давайте подведем итоги. что мы имеем. Создали форму для добавления комментариев, сделали обработчик полей формы, подключили ajax и создали класс для реализации капчи для комментариев. Что нам остаеться еще сделать? Как подключать капчу в форму смотрите в коде где создавали в первой публикации. Не забываем, что капча проверка кода будет работать только при включенной сесии. Как вообще должно это работать, давайте просто создадим тестовый файл назовем его test.php и добавим в него такое содержимое.

Если набрать и запустить в браузере этот файл, то должны увидить посреди монитора набор цифр. Если вы увидили такой результат значит сделано все правильно, и все будет работать. Давайте еще рассмотрим один файл для работы с ajax JsHttpRequest.js. Я его добавил в архив с самим файлом JsHttpRequest.php его можно скачать здесь. Ну вот в принципе мы создали форму для добавления комментариев, теперь комментарии у нас проверяються и добавляються в базу, очищенными от лишних символов, установлена защита от спама подключили капчу, защитный код, при котором робот не пройдет. Идем далее. А далее нам необходимо определиться где мы будим выводить комментарии и форму комментирования на сайте. Обычно идет материал на сайте, после него комментарии, и за комментариями идет сама форма для добавления комментариев. Как у вас состоят дела с виводом материала на сайте, я знать не могу. Но для удобства я сделал форму в отдельном блоке как вы видели, то ее можно разместить смело в конце материала.

Создаем выборку комментариев из базы данных comments и публикуем их относительно материала статьи.

Давайте вспомним некоторые поля формы которые мы создавали в первой публикации а данную тему, там мы в таблице указывали идентификатор статьи поле с названием page, а в самой форме я добавил скрытое поле которое и передаст нам на сервер идентификатор статьи. Как это работает разберем подробнее, чтобы вы это усвоили.

У нас есть скрытое поле

При размещении публикации на странице, вы обязательно указываете уникальный идентификатор статьи, или другого материала, я например реализовал его в переменной $id, куда и вставляю его в поле с именем id. На тему скрытых полей формы, я пока публикаций не писал. Вот решил немного описать вкратце как оно работает, также и переменная $guest для примера занесем в нее

Это я сделал просто для примера, вы можете это сократить и просто по умолчанию в таблице выставить это значение. Значит на этом этапе думаю все понятно двигаемся далее и создадим наконец запрос с выборкой из базы данных комментариев относительно нашего материала. Давайте приведу пример.

После того как сделали выборку с базы можно создавать стиль для помещения коментариев, создавать цикл, какой вы обычно используете но рекомендую фореч. На этом заканчиваем разбор добаления комментариев на сайте с php, mysql, ajax, jquery и javascript. Вот теперь наши комментарии добавляються выводяться и обновляються без перезагрузки страници на ayax. Кто узнает разработчиков скриптов JsHttpRequest сообщите мне их координаты обязательно поставлю ссылку на источник. Мне эти файлы попали без никакой ориентации на автора. Не хочу нарушать права. Кому, что непонятно пожалуйста пишите в комментариях будим обязательно разбирать вместе, и выручать друг-друга. До новых встречь!

Илон Маск рекомендует:  Что такое код pg_port

Комментарии для сайта

При написании самописного блога всегда наступает момент, когда нужно создать комментарии на сайте.

Этой теме: Как сделать комментарии на сайте, и посвящается данная статья.

Я покажу вам готовый код скрипта и расскажу пошагово где его разместить, как осуществить связь с MySQL, и что и куда залить и подключить, чтоб всё заработало.

Сразу уточню, что весь представленный здесь код преобразуется в файлы в Notepad++ с соответствующим расширением и в кодировке utf8

Сначала сам скрипт

Разместить этот скрипт на странице можно двумя способами.

1. Скрипт размещается непосредственно на странице между тегами

2. В корневой директории сайта создаётся папка c названием, например js, если таковой ещё нет, и в неё помещается файл скрипта под названием, допустим script_comments.js

Тогда на странице, в тег прописывается подключение этого файла к странице.

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

Следующим шагом размещаем на странице код вывода комментариев и код формы комментариев.

Вставляется это всё одним блоком в том месте страницы, где вы хотите отобразить комментарии, обычно сразу после статьи.

» .$comment[ ‘author’ ]. «

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)

Обычно представлена она открытым кодом, значит нажимаем правой клавишей и Сохранить как… сохраняем файл себе на компьютер.

Затем этот файл загружаем на сервер в папку js, которую мы создали на предыдущем шаге, и подключаем этот файл к странице, на которой будут выводится комментарии в тег .

У нас там уже есть один подключенный скрипт, рядом с ним прописываем ещё один.

Затем в директорию в которой находится файл страницы с комментариями, нужно загрузить файл с командами для БД.

$message = @ iconv («UTF-8», «UTF-8», $_POST[ ‘message’ ]);
$message = addslashes ($message);
$message = htmlspecialchars ($message);
$message = stripslashes ($message);
$message = mysql_real_escape_string ($message);

$stranica = @ iconv («UTF-8», «UTF-8», $_POST[ ‘stranica’ ]);
$stranica = addslashes ($stranica);
$stranica = htmlspecialchars ($stranica);
$stranica = stripslashes ($stranica);
$stranica = mysql_real_escape_string ($stranica);

$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
> else >

if ($_POST[ ‘js’ ] == ‘no’ ) <
if ($_POST[ ‘message’ ] != » && $_POST[ ‘author’ ] != »)<

$author = $_POST[ ‘author’ ];
$author = addslashes ($author);
$author = htmlspecialchars ($author);
$author = stripslashes ($author);
$author = mysql_real_escape_string ($author);

$message = $_POST[ ‘message’ ];
$message = addslashes ($message);
$message = htmlspecialchars ($message);
$message = stripslashes ($message);
$message = mysql_real_escape_string ($message);

$stranica = $_POST[ ‘stranica’ ];
$stranica = addslashes ($stranica);
$stranica = htmlspecialchars ($stranica);
$stranica = stripslashes ($stranica);
$stranica = mysql_real_escape_string ($stranica);

$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
> else >
?>

Следующий файл в ту же директорию — файл связи с базой данных connect.php

И последнее, что нам осталось сделать — это соединить нашу страницу, на которой будут выводится комментарии, с БД.

Для этого в самом верху страницы, перед !DOCTYPE html, вставляем следующий код

Теперь идём в БД MySQL. если у вас ещё нет БД, то её нужно создать.

На разных хостингах это делается по разному, поэтому я не буду подробно объяснять как это делается, а как создать БД на Денвере, можно прочитать здесь.

Когда база данных создана, заходим в phpMyAdmin, там должна быть строчка с именем вашей БД, и всё. Нам необходимо создать в ней таблицу.

Проходим во вкладку SQL — верхнее меню.

И в открывшемся окне пишем следующий запрос

Обратите внимание на левые апострофы, на клавиатуре на букве Ё.

Нажимаем Вперёд — всё таблица создана.

Блин, забыл привязку к конкретной странице. Переходим в таблицу во вкладку Структура, и добавляем одно поле с названием stranisa


Ну вот и всё, можно идти на свою страницу и тестировать комментарии.

Со стилевым оформлением, я надеюсь, вы справитесь самостоятельно.

После тестирования заходим снова в БД, в phpMyAdmin, в нашу созданную таблицу — все комментарии здесь

Нажимаем Отметить все и Изменить, вам откроются все отправленные комментарии, с указанием страниц, с которых они были отправлены.

Здесь их можно редактировать, удалять и переносить на другие страницы.

На этом всё. Вы можете изменить имена файлов и таблиц, но тогда внимательно просмотрите весь представленный код, и замените имена везде, где они фигурируют.

Простой пример использования PHP и AJAX.

В эпоху современного веба, большинство сайтов становятся все более интерактивными. Если ранее для получения обновленных данных нам нужно было обновить полностью страницу, то сейчас появились технологии которые позволяют полностью страницу не загружать, а только лишь отдельную ее часть. В свою очередь это предоставляет удобство как пользователям так и владельцам серверов, ведь для пользователя загрузка страницы будет быстрее, так как загружается только отдельная часть страницы, а серверу не нужно каждый раз генерировать страницу и отдавать ее пользователю. Эти возможности просто реализовать при помощи php и ajax.

Сегодня мы разберем небольшой пример для лучшего понимания работы концепции AJAX. Иногда новичкам бывает трудно понять каким же образом взаимодействует между собой php и ajax, много людей ищут примеры того как валидировать формы на лету без перезагрузки всей страницы. Я вам вкратце покажу как это делается, для того, чтобы вы могли понять основы и принципы которые позволят вам в будущем более быстро освоить другие инструменты и писать свои собственные скрипты.

Придумаем небольшое задание себе, будем проверять наличие email адреса в базе данных без перезагрузки страницы используя php и ajax. Такой пример хорошо продемонстрирует как мы можем взаимодействовать с сервером без перезагрузки страницы в браузере, а также, это часто используется при различного рода валидациях пользовательских форм. В корневом каталоге создадим 3 файла с именами index.php , email.php , validate.js .

Создание страницы

Создадим простую страницу с одной формой, которая содержит только одно поле для ввода email.
Синтаксис файла index.php

Самый простой способ работать с AJAX — это подключить фреймворк jQuery, что собственно я и сделал. jQuery предоставляет нам простой в понимании и работе синтаксис для отправки AJAX запросов, почему бы не использовать это преимущество?

Создание js скрипта

Синтаксис файла validate.js

Обработчик на php

Этот скрипт будет получать POST запрос от клиента, обрабатывать его и возвращать результат. AJAX считывает результат и на его основе принимает решение.
Синтаксис файла email.php

В нашем php скрипте, самый обычный код, который обрабатывает post запрос и печатает на странице определенный текст. В результате AJAX отправляет запрос php скрипту, скрипт его обрабатывает и выдает результат, AJAX считывает результат и изменяет страницу в реальном времени.

AJAX передает POST запрос скрипту посредством этого участка кода:

type — Тип запроса, POST или GET. В нашем случае POST;
url — адрес скрипта которому отправляют запрос;
data — данные которые передаются в запросе;
success — что делать в результате успешного выполнения запроса. В нашем случае вызывается функция;

В самом скрипте, проверка наличия email в базе выполняется при каждом вводе символа в поле email. В скрипте за обработку ввода отвечает участок $(‘#email’).keyup(function()<>); , который проверяет нажатие клавиши в поле с .
Как видите, код довольно простой и не требует особо больших навыков для понимания, все завязано на обработке событий keyup() — нажатие клавиши , click() — клик мышкой по элементу . Далее следует AJAX запрос и ответ от скрипта. Таким образом используя php и ajax можно можно получить практически безграничные возможности для создания интерактивных страниц.
Данный код не претендует на звание высококачественного, но если развить, добавить правильных валидаций на уровне клиента и сервера, ввести css, то вполне можно использовать в своих проектах.
Если у вас возникли вопросы, не стесняйтесь, пишите комментарии.
Желаю вам хорошего дня и до скорых встреч ��
Файлы примеров.

Комментарии для сайта

При написании самописного блога всегда наступает момент, когда нужно создать комментарии на сайте.

Этой теме: Как сделать комментарии на сайте, и посвящается данная статья.

Я покажу вам готовый код скрипта и расскажу пошагово где его разместить, как осуществить связь с MySQL, и что и куда залить и подключить, чтоб всё заработало.

Сразу уточню, что весь представленный здесь код преобразуется в файлы в Notepad++ с соответствующим расширением и в кодировке utf8

Сначала сам скрипт

Разместить этот скрипт на странице можно двумя способами.

1. Скрипт размещается непосредственно на странице между тегами

2. В корневой директории сайта создаётся папка c названием, например js, если таковой ещё нет, и в неё помещается файл скрипта под названием, допустим script_comments.js

Тогда на странице, в тег прописывается подключение этого файла к странице.

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

Следующим шагом размещаем на странице код вывода комментариев и код формы комментариев.

Вставляется это всё одним блоком в том месте страницы, где вы хотите отобразить комментарии, обычно сразу после статьи.

» .$comment[ ‘author’ ]. «

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)

Обычно представлена она открытым кодом, значит нажимаем правой клавишей и Сохранить как… сохраняем файл себе на компьютер.

Затем этот файл загружаем на сервер в папку js, которую мы создали на предыдущем шаге, и подключаем этот файл к странице, на которой будут выводится комментарии в тег .

У нас там уже есть один подключенный скрипт, рядом с ним прописываем ещё один.

Затем в директорию в которой находится файл страницы с комментариями, нужно загрузить файл с командами для БД.

$message = @ iconv («UTF-8», «UTF-8», $_POST[ ‘message’ ]);
$message = addslashes ($message);
$message = htmlspecialchars ($message);
$message = stripslashes ($message);
$message = mysql_real_escape_string ($message);

$stranica = @ iconv («UTF-8», «UTF-8», $_POST[ ‘stranica’ ]);
$stranica = addslashes ($stranica);
$stranica = htmlspecialchars ($stranica);
$stranica = stripslashes ($stranica);
$stranica = mysql_real_escape_string ($stranica);

$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
> else >

if ($_POST[ ‘js’ ] == ‘no’ ) <
if ($_POST[ ‘message’ ] != » && $_POST[ ‘author’ ] != »)<

$author = $_POST[ ‘author’ ];
$author = addslashes ($author);
$author = htmlspecialchars ($author);
$author = stripslashes ($author);
$author = mysql_real_escape_string ($author);

$message = $_POST[ ‘message’ ];
$message = addslashes ($message);
$message = htmlspecialchars ($message);
$message = stripslashes ($message);
$message = mysql_real_escape_string ($message);

$stranica = $_POST[ ‘stranica’ ];
$stranica = addslashes ($stranica);
$stranica = htmlspecialchars ($stranica);
$stranica = stripslashes ($stranica);
$stranica = mysql_real_escape_string ($stranica);

$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
> else >
?>

Следующий файл в ту же директорию — файл связи с базой данных connect.php

И последнее, что нам осталось сделать — это соединить нашу страницу, на которой будут выводится комментарии, с БД.

Для этого в самом верху страницы, перед !DOCTYPE html, вставляем следующий код

Теперь идём в БД MySQL. если у вас ещё нет БД, то её нужно создать.

На разных хостингах это делается по разному, поэтому я не буду подробно объяснять как это делается, а как создать БД на Денвере, можно прочитать здесь.

Когда база данных создана, заходим в phpMyAdmin, там должна быть строчка с именем вашей БД, и всё. Нам необходимо создать в ней таблицу.

Проходим во вкладку SQL — верхнее меню.

И в открывшемся окне пишем следующий запрос

Обратите внимание на левые апострофы, на клавиатуре на букве Ё.

Нажимаем Вперёд — всё таблица создана.

Блин, забыл привязку к конкретной странице. Переходим в таблицу во вкладку Структура, и добавляем одно поле с названием stranisa

Ну вот и всё, можно идти на свою страницу и тестировать комментарии.

Со стилевым оформлением, я надеюсь, вы справитесь самостоятельно.

После тестирования заходим снова в БД, в phpMyAdmin, в нашу созданную таблицу — все комментарии здесь

Нажимаем Отметить все и Изменить, вам откроются все отправленные комментарии, с указанием страниц, с которых они были отправлены.

Здесь их можно редактировать, удалять и переносить на другие страницы.

На этом всё. Вы можете изменить имена файлов и таблиц, но тогда внимательно просмотрите весь представленный код, и замените имена везде, где они фигурируют.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL