|
Если вы следите за новыми web сервисами, то наверняка слышали о системе Orphus Дмитрия Котерова. Её основная цель - уменьшить количество орфографических ошибок на web сайтах.
Идея очень простая и элегантная. Если посетитель видит ошибку, то он выделяет её с помощью мышки и нажимает "Ctrl+Enter". После этого, владелец сайта получает письмо с выделенным текстом. Главное преимущество в том, что посетителю нужно сделать минимум действий. Никаких перезагрузок страниц и заполнения форм, нужна только поддержка JavaScript в браузере.
В этой статье я расскажу о том, как самостоятельно сделать подобную систему для собственного сайта.
Преимущества такого решения:
- Вы не зависите от стороннего сервиса.
- Сообщения об опечатках можно будет просматривать через web интерфейс. Все-таки это удобнее чем копаться в почте .
- Можно легко реализовать защиту от спама.
Итак, приступаем. Наша система будет состоять из трёх компонентов:
- html страница со JavaScript функцией, которая будет отправлять сообщение (AJAX-запрос);
- PHP скрипт, добавляющий сообщение в базу данных;
- PHP скрипт для просмотра сообщений.
Такую простую структуру я выбрал специально, т.к. по большому счету эта система должна быть интегрирована в движок сайта, а их очень много. Привязываться к отдельному решению мне не хотелось.
Рассмотрим главную страницу.
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Ctrl Space Sender</title> <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection" /> <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print" /> <!-[if IE]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]-> <script type="text/javascript" src="js/jquery/jquery-1.2.3.js"></script> <script type="text/javascript"> $(document).ready( function() { //назначаем обработчик нажатия на Ctrl + Enter $(document).keypress( function(e) { //если посетитель нажал Ctrl + Enter: if ((e.ctrlKey == true) && (e.keyCode == 13)) { //:ищем выделенный текст: var selectedText = window.getSelection(); //:и отправляем запрос $.ajax({ type: "POST", url: "errorscollector.php", data: {text:[selectedText], pageurl:[window.location.href]}, success: function(msg) { alert(msg); } }); } } ); } ); </script> </head> <body> <h1>Привет</h1> <p>Эта тестовая страница выполняет обработку нажатия на клавиши:.</p> </body> </html>
Наибольший интерес здесь представляет скрипт обработки нажатий на клавиши (строки 13-37). Чтобы немного сократить его код я использовал библиотеку jQuery (строка 12).
Разберем его подробнее.
С помощью функции ready указываем, что наш код должен выполняться только после полной загрузки страницы.
Функция keypress назначает обработчик, который будет вызываться при нажатии на любую клавишу. В нашем случае этим обработчиком является анонимная функция (строки 18-33).
Примечание. Вы можете назначить обработчик любому блоку на странице. Для этого с помощью функции $(...) укажите нужный блок.
В первом параметре наша функция получает объект с данными о возникшем событии (в данном случае это нажатие на клавишу).
Код нажатой клавиши содержится в свойстве keyCode этого объекта. Кроме того, если свойство ctrlKey указывает на то, была ли нажата клавиша "Ctrl" (ctrlKey == true). Аналогичное назначение имеет свойство altKey (устанавливается в true, если нажата клавиша "Alt").
Т.е. мы проверяем, была ли нажата комбинация клавиш "Ctrl+Enter" и если да, то с помощью window.getSelection() получаем выделенный текст и отправляем AJAX запрос.
В параметре url указываем название PHP скрипта, который добавляет данные об опечатке в базу, а в параметре data - выделенный текст и адрес страницы.
После получения ответа от сервера будет вызвана функция, указанная в параметре success (строки 28-30). Она просто покажет сообщение сервера посетителю.
Таблица, в которой будут храниться сообщения, называется errorsdata и имеет 5 полей:
- id - первичный ключ;
- addtime - время добавления сообщения;
- errmes - текст сообщения;
- userip - IP адрес посетителя;
- pageUrl - адрес страницы, на которой была найдена ошибка.
Теперь рассмотрим PHP скрипт, сохраняющий сообщения в базе данных.
<?php try { //получаем IP посетителя $userIp = $_SERVER['REMOTE_ADDR']; $con = new PDO('mysql:host=localhost;dbname=databaseName', 'userName', 'password'); $stm = $con->prepare('SELECT id FROM errorsdata WHERE userip=:ip AND addtime > DATE_SUB(NOW(), INTERVAL 1 HOUR)'); $stm->execute(array('ip'=>$userIp)); $res = $stm->fetchAll(PDO::FETCH_ASSOC); if (count($res) < 3) { $qIns = $con->prepare('INSERT INTO errorsdata (errmes, userip, pageUrl) VALUES (:mes, :ip, :url)'); $qIns->execute(array('mes'=>$_POST['text'], 'ip'=>$userIp, 'url'=>$_POST['pageurl'])); if ($qIns->rowCount() == 1) { echo "Ваше сообщение получено"; } } else { echo "Вы отправляете слишком много сообщений. Пожалейте администратора!"; } } catch (PDOException $e) { echo 'Не могу подключиться к БД'; } ?>
Принцип работы следующий.
Сначала мы проверяем сколько запросов в течении последнего часа отправил данный посетитель. Для этого мы получаем из базы все записи, с данным IP и добавленные не ранее часа назад (строки 7-9).
Если таких записей меньше 3-х - добавляем сообщение в базу (строки 10-16).
В противном случае - игнорируем запрос.
Примечание. В данном примере для работы с базой я использовал PDO, если вы встраиваете эту систему в какой-то фреймворк, то удобнее будет использовать его библиотеку для работы с БД.
Как видите, скрипт возвратит обычную текстовую строку, которая и будет показана посетителю (строка 29 первого листинга).
Теперь напишем скрипт для просмотра сообщений.
Предупреждаю сразу. Прежде чем использовать его в реальном приложении, необходимо добавить авторизацию.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"> <head> <title>Сообщения об ошибках</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection" /> <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print" /> <!-[if IE]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]-> </head> <body> <?php try { $con = new PDO('mysql:host=localhost;dbname=databaseName', 'userName', 'password'); $stm = $con->prepare('SELECT id, addtime, errmes, pageUrl FROM errorsdata'); $stm->execute(); $res = $stm->fetchAll(PDO::FETCH_ASSOC); if (count($res) == 0) { echo "Сообщения отсутствуют"; } else { echo "<table summary=\"Эта таблица содержит сообщения об ошибках\">"; echo "<caption>Сообщения об ошибках</caption>"; echo "<tr>"; echo "<th>#</th>"; echo "<th>Текст с ошибкой</th>"; echo "<th>Дата</th>"; echo "<th>URL страницы</th>"; echo "</tr>"; $i = 0; foreach ($res as $row) { if ($i % 2 == 0) { echo "<tr>"; } else { echo "<tr class=\"even\">"; } echo "<td>".$row['id']."</td>"; echo "<td>".$row['errmes']."</td>"; echo "<td>".$row['addtime']."</td>"; echo "<td><a href=\"".$row['pageUrl']."\">".$row['pageUrl']."</a></td>"; echo "</tr>"; $i++; } echo "</table>"; } } catch (PDOException $e) { echo '<h1>Не могу подключиться к БД</h1>'; } ?> </body> </html>
По большому счету тут и комментировать нечего. Основную часть занимает обычная html разметка.
Мы выполняем всего один запрос (строки 20-22), с помощью которого получаем данные из базы.
После этого в цикле добавляем эти данные в html таблицу.
Кстати, чтобы не писать стили самому я использовал CSS фреймворк Blueprint. Раньше я с ним практически не работал, но, похоже, вещь довольно удобная.
Скачать
Вы можете скачать архив со скриптом. Для того чтобы запустить пример вам нужно:
- Включить поддержку PDO (в php.ini).
- Создать базу данных.
- Создать таблицу для хранения сообщений (запрос, создающий таблицу находится в файле dump.sql).
- Указать параметры подключения к базе в файлах viewer.php и errorscollector.php.
Как видите, с помощью нескольких десятков строк кода мы создали довольно удобную систему отправки сообщений.
Дополнение
Кроссбраузерный вариант скрипта:
$(document).ready( function() { //назначаем обработчик нажатия на Ctrl + Enter var isCtrl = false; $(document).keyup(function (e) { if(e.which == 17) isCtrl=false; }).keydown(function (e) { if(e.which == 17) isCtrl=true; if(e.which == 13 && isCtrl == true) { //...ищем выделенный текст... if (window.getSelection) { var selectedText = window.getSelection(); } else if (document.getSelection) { var selectedText = document.getSelection(); } else if (document.selection) { var selectedText = document.selection.createRange().text; } //...и отправляем запрос $.ajax({ type: "POST", url: "errorscollector.php", data: {text:[selectedText], pageurl:[window.location.href]}, success: function(msg) { alert(msg); } }); } }); });
|
