Создаем скрипт для автоматической отправки опечаток. Статьи. wb0.ru - Все для веб-мастера, on-line сервисы

Создаем скрипт для автоматической отправки опечаток

Если вы следите за новыми web сервисами, то наверняка слышали о системе Orphus Дмитрия Котерова. Её основная цель - уменьшить количество орфографических ошибок на web сайтах.

Идея очень простая и элегантная. Если посетитель видит ошибку, то он выделяет её с помощью мышки и нажимает "Ctrl+Enter". После этого, владелец сайта получает письмо с выделенным текстом. Главное преимущество в том, что посетителю нужно сделать минимум действий. Никаких перезагрузок страниц и заполнения форм, нужна только поддержка JavaScript в браузере.

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

Преимущества такого решения:

  1. Вы не зависите от стороннего сервиса.
  2. Сообщения об опечатках можно будет просматривать через web интерфейс. Все-таки это удобнее чем копаться в почте .
  3. Можно легко реализовать защиту от спама.
Итак, приступаем. Наша система будет состоять из трёх компонентов:
  1. html страница со JavaScript функцией, которая будет отправлять сообщение (AJAX-запрос);
  2. PHP скрипт, добавляющий сообщение в базу данных;
  3. PHP скрипт для просмотра сообщений.
Такую простую структуру я выбрал специально, т.к. по большому счету эта система должна быть интегрирована в движок сайта, а их очень много. Привязываться к отдельному решению мне не хотелось.

Рассмотрим главную страницу.

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <title>Ctrl Space Sender</title>
  7.  
  8. <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection" />
  9. <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print" />    
  10. <!-[if IE]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]->
  11.  
  12. <script type="text/javascript" src="js/jquery/jquery-1.2.3.js"></script>
  13. <script type="text/javascript">
  14. $(document).ready(
  15.     function() {
  16.         //назначаем обработчик нажатия на Ctrl + Enter
  17.         $(document).keypress(
  18.             function(e) {
  19.                 //если посетитель нажал Ctrl + Enter:
  20.                 if ((e.ctrlKey == true) &amp;&amp; (e.keyCode == 13)) {
  21.                     //:ищем выделенный текст:
  22.                     var selectedText = window.getSelection();
  23.                     //:и отправляем запрос
  24.                     $.ajax({
  25.                         type: "POST",
  26.                         url: "errorscollector.php",
  27.                         data: {text:[selectedText], pageurl:[window.location.href]},
  28.                         success: function(msg) {
  29.                             alert(msg);
  30.                         }
  31.                     });
  32.                 }
  33.             }
  34.         );
  35.     }
  36. );
  37. </script>
  38.  
  39. </head>
  40. <body>
  41. <h1>Привет</h1>
  42.  
  43. <p>Эта тестовая страница выполняет обработку нажатия на клавиши:.</p>
  44. </body>
  45. </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 скрипт, сохраняющий сообщения в базе данных.

  1. <?php
  2. try {
  3.     //получаем IP посетителя
  4.     $userIp = $_SERVER['REMOTE_ADDR'];
  5.    
  6.     $con = new PDO('mysql:host=localhost;dbname=databaseName', 'userName', 'password');
  7.     $stm = $con->prepare('SELECT id FROM errorsdata WHERE userip=:ip AND addtime > DATE_SUB(NOW(), INTERVAL 1 HOUR)');
  8.     $stm->execute(array('ip'=>$userIp));
  9.     $res = $stm->fetchAll(PDO::FETCH_ASSOC);
  10.     if (count($res) < 3) {
  11.         $qIns = $con->prepare('INSERT INTO errorsdata (errmes, userip, pageUrl) VALUES (:mes, :ip, :url)');
  12.         $qIns->execute(array('mes'=>$_POST['text'], 'ip'=>$userIp, 'url'=>$_POST['pageurl']));
  13.         if ($qIns->rowCount() == 1) {
  14.             echo "Ваше сообщение получено";
  15.         }
  16.     }
  17.     else {
  18.         echo "Вы отправляете слишком много сообщений. Пожалейте администратора!";
  19.     }
  20. }
  21. catch (PDOException $e) {
  22.     echo 'Не могу подключиться к БД';
  23. }
  24. ?>

Принцип работы следующий.

Сначала мы проверяем сколько запросов в течении последнего часа отправил данный посетитель. Для этого мы получаем из базы все записи, с данным IP и добавленные не ранее часа назад (строки 7-9).

Если таких записей меньше 3-х - добавляем сообщение в базу (строки 10-16).

В противном случае - игнорируем запрос.

Примечание. В данном примере для работы с базой я использовал PDO, если вы встраиваете эту систему в какой-то фреймворк, то удобнее будет использовать его библиотеку для работы с БД.

Как видите, скрипт возвратит обычную текстовую строку, которая и будет показана посетителю (строка 29 первого листинга).

Теперь напишем скрипт для просмотра сообщений.

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
  4.  
  5. <head>
  6.     <title>Сообщения об ошибках</title>
  7.     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  8.     <meta http-equiv="Content-Style-Type" content="text/css" />
  9.  
  10.     <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection" />
  11.     <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print" />    
  12.     <!-[if IE]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]->
  13. </head>
  14.  
  15. <body>
  16.  
  17. <?php
  18. try {
  19.     $con = new PDO('mysql:host=localhost;dbname=databaseName', 'userName', 'password');
  20.     $stm = $con->prepare('SELECT id, addtime, errmes, pageUrl FROM errorsdata');
  21.     $stm->execute();
  22.     $res = $stm->fetchAll(PDO::FETCH_ASSOC);
  23.     if (count($res) == 0) {
  24.         echo "Сообщения отсутствуют";
  25.     }
  26.     else {
  27.         echo "<table summary=\"Эта таблица содержит сообщения об ошибках\">";
  28.         echo "<caption>Сообщения об ошибках</caption>";
  29.         echo "<tr>";
  30.         echo "<th>#</th>";
  31.         echo "<th>Текст с ошибкой</th>";
  32.         echo "<th>Дата</th>";
  33.         echo "<th>URL страницы</th>";
  34.         echo "</tr>";
  35.         $i = 0;
  36.         foreach ($res as $row) {
  37.             if ($i % 2 == 0) {
  38.                 echo "<tr>";
  39.             }
  40.             else {
  41.                 echo "<tr class=\"even\">";
  42.             }
  43.             echo "<td>".$row['id']."</td>";
  44.             echo "<td>".$row['errmes']."</td>";
  45.             echo "<td>".$row['addtime']."</td>";
  46.             echo "<td><a href=\"".$row['pageUrl']."\">".$row['pageUrl']."</a></td>";
  47.             echo "</tr>";
  48.             $i++;
  49.         }
  50.         echo "</table>";
  51.     }
  52. }
  53. catch (PDOException $e) {
  54.     echo '<h1>Не могу подключиться к БД</h1>';
  55. }
  56.  
  57. ?>
  58. </body>
  59. </html>

По большому счету тут и комментировать нечего. Основную часть занимает обычная html разметка.

Мы выполняем всего один запрос (строки 20-22), с помощью которого получаем данные из базы.

После этого в цикле добавляем эти данные в html таблицу.

Кстати, чтобы не писать стили самому я использовал CSS фреймворк Blueprint. Раньше я с ним практически не работал, но, похоже, вещь довольно удобная.

Скачать

Вы можете скачать архив со скриптом. Для того чтобы запустить пример вам нужно:

  1. Включить поддержку PDO (в php.ini).
  2. Создать базу данных.
  3. Создать таблицу для хранения сообщений (запрос, создающий таблицу находится в файле dump.sql).
  4. Указать параметры подключения к базе в файлах viewer.php и errorscollector.php.
Как видите, с помощью нескольких десятков строк кода мы создали довольно удобную систему отправки сообщений.

Дополнение

Кроссбраузерный вариант скрипта:

  1. $(document).ready(
  2.         function() {
  3.                 //назначаем обработчик нажатия на Ctrl + Enter
  4.                 var isCtrl = false;
  5.                 $(document).keyup(function (e) {
  6.                         if(e.which == 17) isCtrl=false;
  7.                 }).keydown(function (e) {
  8.                         if(e.which == 17) isCtrl=true;
  9.                         if(e.which == 13 && isCtrl == true) {
  10.                                 //...ищем выделенный текст...
  11.                                 if (window.getSelection) {
  12.                                         var selectedText = window.getSelection();
  13.                                 }
  14.                                 else if (document.getSelection) {
  15.                                         var selectedText = document.getSelection();
  16.                                 }
  17.                                 else if (document.selection) {
  18.                                         var selectedText = document.selection.createRange().text;
  19.                                 }
  20.                                 //...и отправляем запрос
  21.                                 $.ajax({
  22.                                         type: "POST",
  23.                                         url: "errorscollector.php",
  24.                                         data: {text:[selectedText], pageurl:[window.location.href]},
  25.                                         success: function(msg) {
  26.                                                 alert(msg);
  27.                                         }
  28.                                 });
  29.                         }
  30.                 });
  31.         });

Дата публикации: 13.09.2010
simplecoding.org


Комментарии:
  1. MasterPRO: Проверка
    Добавлен: 2017-02-07

  2. Peter Winter: 555-555-0199@example.com
    Добавлен: 2017-10-27


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

Новости Интернет


Поиск




Наши партнеры




Последний пересчет

тИЦ:07 Окт 15
PR:09 Дек 13

Посетители

On-Line:17
Рекорд:1794
Зафиксирован:01 Окт 13

Наши партнеры

wservices.ru - регистрация доменов, Whois-сервисы Смайлы на все случаи жизни


Календарь событий


 
Copyright © 2006-2017, wb0.ru