Якщо ви стежите за новими web сервісами, то напевно чули про систему Orphus Дмитра Котеровим. Її основна мета - зменшити кількість орфографічних помилок на web сайтах.
Ідея дуже проста і елегантна. Якщо відвідувач бачить помилку, то він виділяє її за допомогою мишки і натискає «Ctrl + Enter». Після цього, власник сайту отримує лист з виділеним текстом. Головна перевага в тому, що відвідувачеві потрібно зробити мінімум дій. Ніяких перезавантажень сторінок і заповнення форм, потрібна тільки підтримка JavaScript в браузері.
Переваги такого рішення.
1) Ви не залежите від стороннього сервісу.
2) Повідомлення про всі помічені можна буде переглядати через web інтерфейс. Все-таки це зручніше ніж копатися в пошті 😉.
3) Чи можна легко реалізувати захист від спаму.
Отже, приступаємо.
Наша система буде складатися з трьох компонентів:
1) html сторінка зі JavaScript функцією, яка буде відправляти повідомлення (AJAX-запит);
2) PHP скрипт, який додає повідомлення в базу даних;
3) 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 полів:
1) id - первинний ключ;
2) addtime - час додавання повідомлення;
3) errmes - текст повідомлення;
4) userip - IP адреса відвідувача;
5) 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 . Раніше я з ним практично не працював, але, схоже, річ досить зручна.
завантажити
Ви можете завантажити архів зі скриптом . Для того щоб запустити приклад вам потрібно:
1) включити підтримку PDO (в php.ini);
2) створити базу даних;
3) створити таблицю для зберігання повідомлень (запит, який створює таблицю знаходиться в файлі dump.sql);
4) вказати параметри підключення до бази в файлах viewer.php і errorscollector.php.
Як бачите, за допомогою декількох десятків рядків коду ми створили досить зручну систему відправки повідомлень. Якщо у вас виникли питання або зауваження - пишіть, постараюся відповісти 😉.
UPD (27.12.2008): Увага! Скрипт, наведений у статті, працює тільки в FireFox і Opera. Кросбраузерності варіант наведено в коментарях (тестувався в FireFox, Opera, IE і Chrome).
Цікаво почитати:
Проста техніка для настройки MFA сайтів і для поліпшення QS на Лендінгем сторінках.
Lt;?Quot; encoding = "UTF-8"?
Lt;?
Quot;; }} Catch (PDOException $ e) {echo 'Не можу підключитися до БД'; }?
