Використання jQuery і PHP для створення Web-сторінок на базі Ajax

  1. Використання jQuery і PHP для створення Web-сторінок на базі Ajax
  2. Часто використовувані абревіатури
  3. Що таке Ajax?
  4. Що таке jQuery?
  5. Лістинг 1. Додавання двокрапок з використанням jQuery
  6. Створення простого додатка: телефонна книга
  7. Створення таблиці бази даних
  8. Лістинг 2. Код SQL для створення таблиці directory
  9. Лістинг 3. Команди SQL для заповнення таблиці
  10. Створення файлу index.php
  11. Лістинг 4. Файл HTML з формою
  12. Створення файлу find.php
  13. Лістинг 5. Створення файлу find.php
  14. Лістинг 6. Створення оператора SQL
  15. Лістинг 7. Роздруківка рядки командної echo
  16. Додавання jQuery в index.php
  17. Лістинг 8. Створення функції для запобігання типової поведінки пошукової форми
  18. Лістинг 9. Функція ajax_search ()
  19. Малюнок 1. Ajax-пошук в дії
  20. Ресурси для скачування
  21. Використання jQuery і PHP для створення Web-сторінок на базі Ajax
  22. Часто використовувані абревіатури
  23. Що таке Ajax?
  24. Що таке jQuery?
  25. Лістинг 1. Додавання двокрапок з використанням jQuery
  26. Створення простого додатка: телефонна книга
  27. Створення таблиці бази даних
  28. Лістинг 2. Код SQL для створення таблиці directory
  29. Лістинг 3. Команди SQL для заповнення таблиці
  30. Створення файлу index.php
  31. Лістинг 4. Файл HTML з формою
  32. Створення файлу find.php
  33. Лістинг 5. Створення файлу find.php
  34. Лістинг 6. Створення оператора SQL
  35. Лістинг 7. Роздруківка рядки командної echo
  36. Додавання jQuery в index.php
  37. Лістинг 8. Створення функції для запобігання типової поведінки пошукової форми
  38. Лістинг 9. Функція ajax_search ()
  39. Малюнок 1. Ajax-пошук в дії
  40. Ресурси для скачування
  41. Використання jQuery і PHP для створення Web-сторінок на базі Ajax
  42. Часто використовувані абревіатури
  43. Що таке Ajax?
  44. Що таке jQuery?
  45. Лістинг 1. Додавання двокрапок з використанням jQuery
  46. Створення простого додатка: телефонна книга
  47. Створення таблиці бази даних
  48. Лістинг 2. Код SQL для створення таблиці directory
  49. Лістинг 3. Команди SQL для заповнення таблиці
  50. Створення файлу index.php
  51. Лістинг 4. Файл HTML з формою
  52. Створення файлу find.php
  53. Лістинг 5. Створення файлу find.php
  54. Лістинг 6. Створення оператора SQL
  55. Лістинг 7. Роздруківка рядки командної echo
  56. Додавання jQuery в index.php
  57. Лістинг 8. Створення функції для запобігання типової поведінки пошукової форми
  58. Лістинг 9. Функція ajax_search ()
  59. Малюнок 1. Ajax-пошук в дії
  60. Ресурси для скачування

Використання jQuery і PHP для створення Web-сторінок на базі Ajax

Бібліотеки jQuery спрощують PHP-розробнику рішення трудомістких завдань

Більшість РНР-розробників освоювали цю мову по-старому, почавши з визначення і побудови простих РНР-сторінок та їх сполуки з простими ж таблицями MySQL. Надалі, набуваючи різноманітного досвіду, вони вчилися створювати на РНР все більш складну функціональність, об'єднувати таблиці в MySQL і вирішувати інші складні завдання.

По ходу справи програміст набуває досвід роботи і з боку клієнта. В якійсь мірі він освоює XHTML або CSS, а можливо, і програмування на JavaScript. Залежно від виду проектів йому навіть може представитися випадок попрацювати з Ajax для додання своїм Web-додатків функціональності в дусі Web 2.0. Однак у мене перший досвід роботи з Ajax виявився досить стомлюючим - доводилося вручну створювати функції і насилу продиратися крізь процес створення Ajax-сторінок.

Часто використовувані абревіатури
  • CSS: Cascading Style Sheet
  • HTML: Hypertext Markup Language
  • XHTML: Extensible Hypertext Markup Language
  • XML: Extensible Markup Language

Для деяких Ajax досі залишається таємницею за сімома печатками. У них не знаходиться часу, терпіння або знань, щоб як слід опанувати ім. Шкода, тому що багатьом клієнтам подобається функціональність в стилі Ajax, яка спрощує роботу з Web-додатками. Прочитавши цю статтю, ви дізнаєтеся досить, щоб стати справжнім профі по Ajax.

Ми покажемо, як використовувати бібліотеку jQuery, щоб легко додавати функціональність Ajax в будь-який РНР-додаток. Ми створимо просте Web-додаток із застосуванням РНР і MySQL - телефонну книгу з іменами і номерами телефону. У ній буде все необхідне - кошти пошуку по іменах або номерами телефону, таблиця MySQL і т.п. Потім ми додамо jQuery, щоб можна було шукати по іменах і номерам телефону в режимі реального часу, в процесі набору тексту. Вирішивши цю задачу, ви не тільки будете добре знати основи jQuery, але і розберетеся в деяких фундаментальних поняттях Ajax.

Що таке Ajax?

Кращий спосіб описати Ajax - це порівняти його з тим, що вам вже знайомо. Більшість Web-сторінок і додатків працює в синхронному режимі. Ви натискаєте на посилання або кнопку Submit пошукової форми, і запит передається на сервер, який обробляє його і повертає відповідь. Цю модель найточніше назвати так: «натиснув, почекав, побачив». Цей нескінченний цикл поновлення-повторення всім добре відомий. Іншими словами, щоб відображати на сторінці постійно оновлювану інформацію, потрібно або ввести якийсь механізм автоматичного оновлення, або запропонувати користувачеві натискати на посилання.

З Ajax все не так. Перша A в слові Ajax означає асинхронний. Ajax дозволяє створювати сторінки на будь-якій мові програмування, а потім наповнювати різні частини цих сторінок інформацією з бази даних або будь-якого іншого централізованого процесу на сервері. Наприклад, у вас є сайт електронної комерції, де демонструються продаються продукти. На сторінці кожного продукту є звичайні елементи: заголовки, опис, фотографія, кількість товару на складі.

Припустимо, потрібно тримати відвідувачів в курсі того, скільки одиниць товару залишилося на складі. Можна додати функцію Ajax, яка буде запускати окрему РНР-сторінку із запитом MySQL, а потім передавати цю інформацію на первинну сторінку без будь-яких дій з боку користувача і без всякої синхронної послідовності подій типу натиснув-почекав-побачив.

Буква j в слові Ajax означає JavaScript, і це пояснює джерело такої поведінки. У ньому і гідність даного підходу, і його недолік. Гідність тому, що весь код працює на стороні клієнта, так що він легко переноситься і не впливає на сервер. А недолік для багатьох РНР-розробників полягає в тому, що це інша, незвична для них середу. Тут-то і виходять на сцену інструменти, подібні jQuery: вони значно спрощують взаємодію з Ajax, прискорюючи процес розробки.

А як щодо двох останніх букв в назві: а і x? Вони означають and XML, хоча XML-частина насправді використовується не завжди. Багато Ajax-додатки добре працюють і без XML-коду: вони передають просто HTML або навіть звичайний текст. Можливо, точніше було б розшифровувати x як XMLHttpRequest, так як цей об'єкт використовується для отримання даних у фоновому режимі, тобто без перешкод для відображення або поведінки існуючої сторінки.

Що таке jQuery?

jQuery - це компактна бібліотека JavaScript, створена Джоном Резігом (John Resig) і опублікована в інтернеті на початку 2006 року. Це безкоштовне і відкрите ПЗ, яке розповсюджується за двома ліцензіями: Массачусетського технологічного інституту (MIT) і GNU General Public License. Вона привернула безліч розробників у всьому світі своєю простотою і наочністю.

Секрет її популярності в тому, що ця проста в застосуванні бібліотека спрощує JavaScript для всіх (навіть для найзатятіших back-end програмістів), дозволяючи без виснажливої ​​роботи домагатися чудових ефектів. З її допомогою можна створювати набори елементів Document Object Model (DOM), модифікувати і маніпулювати CSS, вводити елементи анімації і працювати з Ajax. Вся ця функціональність забезпечується єдиним файлом JavaScript, який можна завантажити з сайту jQuery (див. ресурси ).

Завантаживши jQuery, можна додати його до будь-якого файлу HTML або РНР, включивши простий тег <script>:

<Script type = "text / javascript" src = "/ path / to / jquery.js"> </ script>

Припустимо, перед вами стоїть досить проста, але нудна завдання з великою кількістю ручних операцій типу додавання двокрапки (:) в кінці кожної мітки форми на сайті. Можна йти напролом, відшукуючи кожну мітку форми і додаючи в кінці рядка двокрапка, а можна використовувати наступний код jQuery:

Лістинг 1. Додавання двокрапок з використанням jQuery
<Script type = "text / javascript"> $ (document) .ready (function () {$ ( "label"). Append ( ":");}); </ Script>

Це проста функція: вона чекає, поки сторінка буде повністю підготовлена ​​і завантажена (для цього служить частина $ (document) .ready ()), виконує анонімну функцію, відшукувати все елементи DOM label, а потім в кінці знайденого тексту додає двокрапка. Функція $ () дозволяє звертатися до елементів DOM по їх природним іменах, що робить цей інтерфейс ідеальним вибором для розробників, вже знайомих з DOM.

Звичайно, за допомогою jQuery можна робити багато інших речей, але це хороший перший крок. Проста вбудована функція jQuery буде працювати в будь-якому випадку, так як вона чекає закінчення завантаження сторінки. Інша рядок коду вносить зміни в усі знайдені елементи DOM label, і все це відбувається з боку клієнта, без необхідності тупо перебирати всю зроблену розмітку і вносити в неї зміни.

Створення простого додатка: телефонна книга

Тепер, коли основи jQuery прояснилися, давайте побудуємо просту телефонну книгу на базі РНР і MySQL. Ця програма складається з трьох частин:

  • таблиці MySQL з іменами і номерами телефону
  • файлу index.php з формою пошуку
  • сторінки find.php, яка звертається до таблиці бази даних.

Створимо кожен елемент окремо.

Створення таблиці бази даних

Створення таблиці бази даних в MySQL - мабуть, найпростіша частина. Ця таблиця повинна містити самий мінімум інформації - ідентифікатор (ключ таблиці), поле імені і поле номера телефону. Два останніх поля алфавітно-цифрові, так що можна використовувати функцію varchar (). Поле ідентифікатора створимо як autoincrement primary key. Назвемо цю таблицю directory, і для її створення скористаємося наступним кодом Structured Query Language (SQL):

Лістинг 2. Код SQL для створення таблиці directory
CREATE TABLE `directory` (` id` INT NOT NULL AUTO_INCREMENT, `name` VARCHAR (64) NOT NULL,` phone` VARCHAR (16) NOT NULL, PRIMARY KEY ( `id`)) TYPE = MYISAM;

Як бачите, нічого складного немає. Пізніше це додаток можна буде змінити на свій розсуд. Наприклад, можна додати поле ключових слів або адреси, що ще більше полегшить пошук. Поки ж будемо працювати з тим, що є.

Тепер треба заповнити нашу таблицю. Для введення імен і номерів можна скористатися утилітою phpMyAdmin або командним рядком. Можна також використовувати наступну послідовність команд SQL:

Лістинг 3. Команди SQL для заповнення таблиці
insert into `directory` (name, phone) values ​​( 'Tom Smith', '512-555-0111'); insert into `directory` (name, phone) values ​​( 'Bill Smith', '512-555-0112'); insert into `directory` (name, phone) values ​​( 'John Smith', '512-555-0113'); insert into `directory` (name, phone) values ​​( 'Jane Smith', '512-555-0114'); insert into `directory` (name, phone) values ​​( 'Sara Smith', '512-555-0115');

Коли значення введені, перевірте, що список виводиться, надрукувавши select * в командному рядку з робочого каталогу або натиснувши Browse в phpMyAdmin.

Створення файлу index.php

Далі, створимо просту домашню сторінку для нашого застосування. Це файл РНР з ім'ям index.php, але поки він містить головним чином код HTML. Коли ми створимо файл find.php (на наступному кроці), ми повернемося до цієї частини і завершимо її.

Поки все, що нам потрібно, це простий HTML-файл з формою. Кожен елемент форми містить унікальний ідентифікатор, так як нам потрібна можливість визначати кожен елемент за допомогою jQuery.

Лістинг 4. Файл HTML з формою
<Html> <head> <title> Welcome! </ Title> </ head> <body> <h1> Search our Phone Directory </ h1> <form id = "searchform" method = "post"> <div> < label for = "search_term"> Search name / phone </ label> <input type = "text" name = "search_term" id = "search_term" /> <input type = "submit" value = "search" id = "search_button "/> </ div> </ form> <div id =" search_results "> </ div> </ body> </ html>

Відразу впадають в очі дві речі. По-перше, з формою не пов'язане ніяких дій. Це нормально: пам'ятайте, що дана форма не повинна слідувати традиційної синхронної схемою «натиснув, почекав, побачив». Замість цього ми додаємо функціональність, яка буде стежити за діями користувача в поле search_term.

Друге, що ви повинні помітити, це елемент DOM search_results- порожній елемент прямо під формою. У ньому будуть міститися результати пошуку. Однак перш ніж йти далі, створимо сторінку find.php.

Створення файлу find.php

Файл find.php - це місце, де власне і відбувається вся дія. Він з'єднує додаток з базою даних і виконує запит до таблиці.

У першій частині файлу find.php знаходиться інформація про з'єднання. Для нашого прикладу я ввів цю інформацію прямо в файл. У більшості з вас вона буде міститися у включеному або запитуваній файлі або в складі набагато більшої середовища.

Лістинг 5. Створення файлу find.php
<? Php define (HOST, "your.host.here"); define (USER, "your-user-name"); define (PW, "your-password"); define (DB, "your-db-name"); $ Connect = mysql_connect (HOST, USER, PW) or die ( 'Could not connect to mysql server.'); mysql_select_db (DB, $ connect) or die ( 'Could not select database.');

З форми index.php буде надходити пошуковий термін. Перш ніж вводити це значення в базу даних, над ним потрібно провести певну просту обробку. Я використовую функції strip_tags () і substr () для видалення з пошукового терміна всіх тегів HTML і скорочення його розміру. Така обробка ніколи не завадить - не можна цілком довіряти тому, що вводить користувач.

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

$ Term = strip_tags (substr ($ _ POST [ 'search_term'], 0, 100)); $ Term = mysql_escape_string ($ term);

Тепер складемо оператор SQL. Ми хочемо отримувати від таблиці будь-які імена та номери телефону, відповідні пошуковому терміну. Останній повинен порівнюватися методом LIKE як з полем імені, так і з полем номера телефону, а потім робиться запит mysql_query ().

Лістинг 6. Створення оператора SQL
$ Sql ​​= "select name, phone from directory where name like '% $ term%' or phone like '% $ term%' order by name asc"; $ Result = mysql_query ($ sql);

Результати запиту можна роздрукувати. Ініціалізіруем змінну $ string, щоб зберегти результати, потім використовуємо mysql_num_rows () для перевірки наявності у відповіді будь-яких рядків. Якщо результати для пошукового терміна не отримані, $ string буде містити значення "No matches!" Якщо вони є, буде роздруковано кожне ім'я і номер телефону з безлічі результатів. В кінці процесу вся рядок виводиться на екран командою echo:

Лістинг 7. Роздруківка рядки командної echo
$ String = ''; if (mysql_num_rows ($ result)> 0) {while ($ row = mysql_fetch_object ($ result)) {$ string. = "<b>". $ row-> name. "</ b> -"; $ String. = $ Row-> phone. "</a>"; $ String. = "<br/> \ n"; }} Else {$ string = "No matches!&quot;; } Echo $ string; ?>

Звичайно, ця РНР-функціональність і сама по собі надзвичайно корисна, але поки цього не видно. Потрібно якось ввести в цей сценарій сам пошуковий термін. Ми зробимо це в наступному розділі.

Додавання jQuery в index.php

Поки все, що у нас є, це пара нешкідливих сторінок РНР і проста таблиця MySQL. З додаванням jQuery це лагідне додаток перетвориться в сучасну програму на базі Ajax, яка працює подібно настільного додатком пошуку на кшталт Spotlight в Mac OS X або Google Desktop Search.

Відкриємо файл index.php і додамо виклик свежезагруженного файлу jquery.js.

<Script src = "./ jquery.js"> </ script>

Потім створимо просту функцію, яка запобіжить типова поведінка пошукової форми. (Для цього використовується функція preventDefault ().) Все натискання кнопки Submit і події key-up (тобто події, які відбуваються при натисканні клавіш на клавіатурі) будуть переадресовуватися до нової функції ajax_search (), яку ми зараз створимо.

Лістинг 8. Створення функції для запобігання типової поведінки пошукової форми
<Script type = 'text / javascript'> $ (document) .ready (function () {$ ( "# search_results"). SlideUp (); $ ( "# search_button"). Click (function (e) {e. preventDefault (); ajax_search ();}); $ ( "# search_term"). keyup (function (e) {e.preventDefault (); ajax_search ();});});

Зауважте, як функція slideUp () використовується для тимчасового приховування елемента DOM search_results. Для звернення до цього елементу по імені застосовується функція $ (). Тим, хто знайомий з CSS, підхід jQuery теж здасться знайомим. Наприклад, у нас є елемент DOM з унікальним ідентифікатором search_results, і для звернення до нього ми використовуємо $ ( "# search_results"). Все дуже просто.

Зауважте також, що кожен раз при натисканні кнопки Search або введенні символів в поле search_term анонімна функція запобігає поведінка за умовчанням і переадресує додаток до функції ajax_search (), якою ми тепер і займемося.

Функція ajax_search () гранично проста. Нам потрібно показати елемент DOM search_results (як ви пам'ятаєте, спочатку ми його сховали), ввести значення з вхідного поля search_term, передати його функції ($ .post ()), яка асинхронно виконує файл find.php, і чекати відповіді. Коли відповідь з'явиться (як ви пам'ятаєте, ми зробили так, щоб find.php повертала відповідь в будь-якому випадку, навіть якщо збігів не виявлено), jQuery поміщає цю відповідь в елемент DOM search_results.

Лістинг 9. Функція ajax_search ()
function ajax_search () {$ ( "# search_results"). show (); var search_val = $ ( "# search_term"). val (); $ .Post ( "./ find.php", {search_term: search_val}, function (data) {if (data.length> 0) {$ ( "# search_results"). Html (data);}})} < / script>

Тепер, коли всі елементи системи на місці, можна ввести запит і подивитися, як механізм пошуку працює в режимі реального часу, витягуючи записи при кожній події натискання клавіші. Він працює і при натисканні кнопки Submit. Наприклад, на малюнку 1 в поле пошуку введена буква a, і додаток повернуло записи Жанни і Сари Сміт, в іменах яких міститься ця буква.

Малюнок 1. Ajax-пошук в дії

висновок

Звичайно, над цим додатком можна попрацювати ще. Наприклад, додати поле ключових слів і дозволити пошук за ключовими словами. Або зробити так, щоб кожен запис містила теги або ключові слова, пов'язані з різними областями діяльності. Можна додати також ресурсний пошук, щоб шукати людей, які могли б допомогти в тих чи інших проектах. Нарешті, можна додати поля email, дати народження і чого завгодно ще, а потім розширити параметри пошуку.

Справа в тому, що для частини jQuery цього додатка не важливо, що відбувається всередині. Вона лише передає пошуковий термін в файл з ім'ям find.php. Файл find.php не знає або не дбає про те, що свої інструкції отримує від функції jQuery. Для нього пошуковий термін надходить зі звичайної форми, і він використовує ці дані для виконання запиту, а потім повертає записи, які збігаються з цим терміном.

Ресурси для скачування

Схожі теми

  • оригінал статті (EN).
  • Learning jQuery від автора Learning jQuery і jQuery Reference Guide (EN). (EN)
  • Керівництво по jQuery Алекса Уолкера (Alex Walker): " jQuery: Easy JavaScript for Designers "(EN).
  • Поглиблений аналіз застосування в jQuery елементів стилів CSS: " jQuery Crash Course "Натана Сміта (Nathan Smith) (Digital Web Magazine, жовтень 2007 року) (EN).
  • Короткий довідник по розробці jQuery: jQuery in Action (Bear Bibeault, Yehuda Katz, John Resig, Manning, 2008) (EN).
  • PHP.net - центральний ресурс для PHP-розробників. (EN)
  • " Список рекомендованої літератури з PHP . "(EN)
  • Все про PHP на developerWorks. (EN)
  • Слідкуйте за developerWorks в твіттері . (EN)
  • Ресурси проекту PHP на IBM developerWorks.
  • Подкасти на developerWorks . (EN)
  • Zend Core for IBM , Готова середовище розробки PHP з підтримкою IBM DB2 V9. (EN)
  • Розділ Open Source developerWorks з великої довідковою інформацією, інструментами і оновленнями проектів допоможе вам у розробці технологій open source і їх застосуванні з продуктами IBM.
  • завантажте ознайомчі версії продуктів IBM і спробуйте інструменти розробки додатків і продукти проміжного рівня від DB2®, Lotus®, Rational®, Tivoli® і WebSphere®. (EN)

Підпишіть мене на повідомлення до коментарів

Використання jQuery і PHP для створення Web-сторінок на базі Ajax

Бібліотеки jQuery спрощують PHP-розробнику рішення трудомістких завдань

Більшість РНР-розробників освоювали цю мову по-старому, почавши з визначення і побудови простих РНР-сторінок та їх сполуки з простими ж таблицями MySQL. Надалі, набуваючи різноманітного досвіду, вони вчилися створювати на РНР все більш складну функціональність, об'єднувати таблиці в MySQL і вирішувати інші складні завдання.

По ходу справи програміст набуває досвід роботи і з боку клієнта. В якійсь мірі він освоює XHTML або CSS, а можливо, і програмування на JavaScript. Залежно від виду проектів йому навіть може представитися випадок попрацювати з Ajax для додання своїм Web-додатків функціональності в дусі Web 2.0. Однак у мене перший досвід роботи з Ajax виявився досить стомлюючим - доводилося вручну створювати функції і насилу продиратися крізь процес створення Ajax-сторінок.

Часто використовувані абревіатури
  • CSS: Cascading Style Sheet
  • HTML: Hypertext Markup Language
  • XHTML: Extensible Hypertext Markup Language
  • XML: Extensible Markup Language

Для деяких Ajax досі залишається таємницею за сімома печатками. У них не знаходиться часу, терпіння або знань, щоб як слід опанувати ім. Шкода, тому що багатьом клієнтам подобається функціональність в стилі Ajax, яка спрощує роботу з Web-додатками. Прочитавши цю статтю, ви дізнаєтеся досить, щоб стати справжнім профі по Ajax.

Ми покажемо, як використовувати бібліотеку jQuery, щоб легко додавати функціональність Ajax в будь-який РНР-додаток. Ми створимо просте Web-додаток із застосуванням РНР і MySQL - телефонну книгу з іменами і номерами телефону. У ній буде все необхідне - кошти пошуку по іменах або номерами телефону, таблиця MySQL і т.п. Потім ми додамо jQuery, щоб можна було шукати по іменах і номерам телефону в режимі реального часу, в процесі набору тексту. Вирішивши цю задачу, ви не тільки будете добре знати основи jQuery, але і розберетеся в деяких фундаментальних поняттях Ajax.

Що таке Ajax?

Кращий спосіб описати Ajax - це порівняти його з тим, що вам вже знайомо. Більшість Web-сторінок і додатків працює в синхронному режимі. Ви натискаєте на посилання або кнопку Submit пошукової форми, і запит передається на сервер, який обробляє його і повертає відповідь. Цю модель найточніше назвати так: «натиснув, почекав, побачив». Цей нескінченний цикл поновлення-повторення всім добре відомий. Іншими словами, щоб відображати на сторінці постійно оновлювану інформацію, потрібно або ввести якийсь механізм автоматичного оновлення, або запропонувати користувачеві натискати на посилання.

З Ajax все не так. Перша A в слові Ajax означає асинхронний. Ajax дозволяє створювати сторінки на будь-якій мові програмування, а потім наповнювати різні частини цих сторінок інформацією з бази даних або будь-якого іншого централізованого процесу на сервері. Наприклад, у вас є сайт електронної комерції, де демонструються продаються продукти. На сторінці кожного продукту є звичайні елементи: заголовки, опис, фотографія, кількість товару на складі.

Припустимо, потрібно тримати відвідувачів в курсі того, скільки одиниць товару залишилося на складі. Можна додати функцію Ajax, яка буде запускати окрему РНР-сторінку із запитом MySQL, а потім передавати цю інформацію на первинну сторінку без будь-яких дій з боку користувача і без всякої синхронної послідовності подій типу натиснув-почекав-побачив.

Буква j в слові Ajax означає JavaScript, і це пояснює джерело такої поведінки. У ньому і гідність даного підходу, і його недолік. Гідність тому, що весь код працює на стороні клієнта, так що він легко переноситься і не впливає на сервер. А недолік для багатьох РНР-розробників полягає в тому, що це інша, незвична для них середу. Тут-то і виходять на сцену інструменти, подібні jQuery: вони значно спрощують взаємодію з Ajax, прискорюючи процес розробки.

А як щодо двох останніх букв в назві: а і x? Вони означають and XML, хоча XML-частина насправді використовується не завжди. Багато Ajax-додатки добре працюють і без XML-коду: вони передають просто HTML або навіть звичайний текст. Можливо, точніше було б розшифровувати x як XMLHttpRequest, так як цей об'єкт використовується для отримання даних у фоновому режимі, тобто без перешкод для відображення або поведінки існуючої сторінки.

Що таке jQuery?

jQuery - це компактна бібліотека JavaScript, створена Джоном Резігом (John Resig) і опублікована в інтернеті на початку 2006 року. Це безкоштовне і відкрите ПЗ, яке розповсюджується за двома ліцензіями: Массачусетського технологічного інституту (MIT) і GNU General Public License. Вона привернула безліч розробників у всьому світі своєю простотою і наочністю.

Секрет її популярності в тому, що ця проста в застосуванні бібліотека спрощує JavaScript для всіх (навіть для найзатятіших back-end програмістів), дозволяючи без виснажливої ​​роботи домагатися чудових ефектів. З її допомогою можна створювати набори елементів Document Object Model (DOM), модифікувати і маніпулювати CSS, вводити елементи анімації і працювати з Ajax. Вся ця функціональність забезпечується єдиним файлом JavaScript, який можна завантажити з сайту jQuery (див. ресурси ).

Завантаживши jQuery, можна додати його до будь-якого файлу HTML або РНР, включивши простий тег <script>:

<Script type = "text / javascript" src = "/ path / to / jquery.js"> </ script>

Припустимо, перед вами стоїть досить проста, але нудна завдання з великою кількістю ручних операцій типу додавання двокрапки (:) в кінці кожної мітки форми на сайті. Можна йти напролом, відшукуючи кожну мітку форми і додаючи в кінці рядка двокрапка, а можна використовувати наступний код jQuery:

Лістинг 1. Додавання двокрапок з використанням jQuery
<Script type = "text / javascript"> $ (document) .ready (function () {$ ( "label"). Append ( ":");}); </ Script>

Це проста функція: вона чекає, поки сторінка буде повністю підготовлена ​​і завантажена (для цього служить частина $ (document) .ready ()), виконує анонімну функцію, відшукувати все елементи DOM label, а потім в кінці знайденого тексту додає двокрапка. Функція $ () дозволяє звертатися до елементів DOM по їх природним іменах, що робить цей інтерфейс ідеальним вибором для розробників, вже знайомих з DOM.

Звичайно, за допомогою jQuery можна робити багато інших речей, але це хороший перший крок. Проста вбудована функція jQuery буде працювати в будь-якому випадку, так як вона чекає закінчення завантаження сторінки. Інша рядок коду вносить зміни в усі знайдені елементи DOM label, і все це відбувається з боку клієнта, без необхідності тупо перебирати всю зроблену розмітку і вносити в неї зміни.

Створення простого додатка: телефонна книга

Тепер, коли основи jQuery прояснилися, давайте побудуємо просту телефонну книгу на базі РНР і MySQL. Ця програма складається з трьох частин:

  • таблиці MySQL з іменами і номерами телефону
  • файлу index.php з формою пошуку
  • сторінки find.php, яка звертається до таблиці бази даних.

Створимо кожен елемент окремо.

Створення таблиці бази даних

Створення таблиці бази даних в MySQL - мабуть, найпростіша частина. Ця таблиця повинна містити самий мінімум інформації - ідентифікатор (ключ таблиці), поле імені і поле номера телефону. Два останніх поля алфавітно-цифрові, так що можна використовувати функцію varchar (). Поле ідентифікатора створимо як autoincrement primary key. Назвемо цю таблицю directory, і для її створення скористаємося наступним кодом Structured Query Language (SQL):

Лістинг 2. Код SQL для створення таблиці directory
CREATE TABLE `directory` (` id` INT NOT NULL AUTO_INCREMENT, `name` VARCHAR (64) NOT NULL,` phone` VARCHAR (16) NOT NULL, PRIMARY KEY ( `id`)) TYPE = MYISAM;

Як бачите, нічого складного немає. Пізніше це додаток можна буде змінити на свій розсуд. Наприклад, можна додати поле ключових слів або адреси, що ще більше полегшить пошук. Поки ж будемо працювати з тим, що є.

Тепер треба заповнити нашу таблицю. Для введення імен і номерів можна скористатися утилітою phpMyAdmin або командним рядком. Можна також використовувати наступну послідовність команд SQL:

Лістинг 3. Команди SQL для заповнення таблиці
insert into `directory` (name, phone) values ​​( 'Tom Smith', '512-555-0111'); insert into `directory` (name, phone) values ​​( 'Bill Smith', '512-555-0112'); insert into `directory` (name, phone) values ​​( 'John Smith', '512-555-0113'); insert into `directory` (name, phone) values ​​( 'Jane Smith', '512-555-0114'); insert into `directory` (name, phone) values ​​( 'Sara Smith', '512-555-0115');

Коли значення введені, перевірте, що список виводиться, надрукувавши select * в командному рядку з робочого каталогу або натиснувши Browse в phpMyAdmin.

Створення файлу index.php

Далі, створимо просту домашню сторінку для нашого застосування. Це файл РНР з ім'ям index.php, але поки він містить головним чином код HTML. Коли ми створимо файл find.php (на наступному кроці), ми повернемося до цієї частини і завершимо її.

Поки все, що нам потрібно, це простий HTML-файл з формою. Кожен елемент форми містить унікальний ідентифікатор, так як нам потрібна можливість визначати кожен елемент за допомогою jQuery.

Лістинг 4. Файл HTML з формою
<Html> <head> <title> Welcome! </ Title> </ head> <body> <h1> Search our Phone Directory </ h1> <form id = "searchform" method = "post"> <div> < label for = "search_term"> Search name / phone </ label> <input type = "text" name = "search_term" id = "search_term" /> <input type = "submit" value = "search" id = "search_button "/> </ div> </ form> <div id =" search_results "> </ div> </ body> </ html>

Відразу впадають в очі дві речі. По-перше, з формою не пов'язане ніяких дій. Це нормально: пам'ятайте, що дана форма не повинна слідувати традиційної синхронної схемою «натиснув, почекав, побачив». Замість цього ми додаємо функціональність, яка буде стежити за діями користувача в поле search_term.

Друге, що ви повинні помітити, це елемент DOM search_results- порожній елемент прямо під формою. У ньому будуть міститися результати пошуку. Однак перш ніж йти далі, створимо сторінку find.php.

Створення файлу find.php

Файл find.php - це місце, де власне і відбувається вся дія. Він з'єднує додаток з базою даних і виконує запит до таблиці.

У першій частині файлу find.php знаходиться інформація про з'єднання. Для нашого прикладу я ввів цю інформацію прямо в файл. У більшості з вас вона буде міститися у включеному або запитуваній файлі або в складі набагато більшої середовища.

Лістинг 5. Створення файлу find.php
<? Php define (HOST, "your.host.here"); define (USER, "your-user-name"); define (PW, "your-password"); define (DB, "your-db-name"); $ Connect = mysql_connect (HOST, USER, PW) or die ( 'Could not connect to mysql server.'); mysql_select_db (DB, $ connect) or die ( 'Could not select database.');

З форми index.php буде надходити пошуковий термін. Перш ніж вводити це значення в базу даних, над ним потрібно провести певну просту обробку. Я використовую функції strip_tags () і substr () для видалення з пошукового терміна всіх тегів HTML і скорочення його розміру. Така обробка ніколи не завадить - не можна цілком довіряти тому, що вводить користувач.

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

$ Term = strip_tags (substr ($ _ POST [ 'search_term'], 0, 100)); $ Term = mysql_escape_string ($ term);

Тепер складемо оператор SQL. Ми хочемо отримувати від таблиці будь-які імена та номери телефону, відповідні пошуковому терміну. Останній повинен порівнюватися методом LIKE як з полем імені, так і з полем номера телефону, а потім робиться запит mysql_query ().

Лістинг 6. Створення оператора SQL
$ Sql ​​= "select name, phone from directory where name like '% $ term%' or phone like '% $ term%' order by name asc"; $ Result = mysql_query ($ sql);

Результати запиту можна роздрукувати. Ініціалізіруем змінну $ string, щоб зберегти результати, потім використовуємо mysql_num_rows () для перевірки наявності у відповіді будь-яких рядків. Якщо результати для пошукового терміна не отримані, $ string буде містити значення "No matches!" Якщо вони є, буде роздруковано кожне ім'я і номер телефону з безлічі результатів. В кінці процесу вся рядок виводиться на екран командою echo:

Лістинг 7. Роздруківка рядки командної echo
$ String = ''; if (mysql_num_rows ($ result)> 0) {while ($ row = mysql_fetch_object ($ result)) {$ string. = "<b>". $ row-> name. "</ b> -"; $ String. = $ Row-> phone. "</a>"; $ String. = "<br/> \ n"; }} Else {$ string = "No matches!&quot;; } Echo $ string; ?>

Звичайно, ця РНР-функціональність і сама по собі надзвичайно корисна, але поки цього не видно. Потрібно якось ввести в цей сценарій сам пошуковий термін. Ми зробимо це в наступному розділі.

Додавання jQuery в index.php

Поки все, що у нас є, це пара нешкідливих сторінок РНР і проста таблиця MySQL. З додаванням jQuery це лагідне додаток перетвориться в сучасну програму на базі Ajax, яка працює подібно настільного додатком пошуку на кшталт Spotlight в Mac OS X або Google Desktop Search.

Відкриємо файл index.php і додамо виклик свежезагруженного файлу jquery.js.

<Script src = "./ jquery.js"> </ script>

Потім створимо просту функцію, яка запобіжить типова поведінка пошукової форми. (Для цього використовується функція preventDefault ().) Все натискання кнопки Submit і події key-up (тобто події, які відбуваються при натисканні клавіш на клавіатурі) будуть переадресовуватися до нової функції ajax_search (), яку ми зараз створимо.

Лістинг 8. Створення функції для запобігання типової поведінки пошукової форми
<Script type = 'text / javascript'> $ (document) .ready (function () {$ ( "# search_results"). SlideUp (); $ ( "# search_button"). Click (function (e) {e. preventDefault (); ajax_search ();}); $ ( "# search_term"). keyup (function (e) {e.preventDefault (); ajax_search ();});});

Зауважте, як функція slideUp () використовується для тимчасового приховування елемента DOM search_results. Для звернення до цього елементу по імені застосовується функція $ (). Тим, хто знайомий з CSS, підхід jQuery теж здасться знайомим. Наприклад, у нас є елемент DOM з унікальним ідентифікатором search_results, і для звернення до нього ми використовуємо $ ( "# search_results"). Все дуже просто.

Зауважте також, що кожен раз при натисканні кнопки Search або введенні символів в поле search_term анонімна функція запобігає поведінка за умовчанням і переадресує додаток до функції ajax_search (), якою ми тепер і займемося.

Функція ajax_search () гранично проста. Нам потрібно показати елемент DOM search_results (як ви пам'ятаєте, спочатку ми його сховали), ввести значення з вхідного поля search_term, передати його функції ($ .post ()), яка асинхронно виконує файл find.php, і чекати відповіді. Коли відповідь з'явиться (як ви пам'ятаєте, ми зробили так, щоб find.php повертала відповідь в будь-якому випадку, навіть якщо збігів не виявлено), jQuery поміщає цю відповідь в елемент DOM search_results.

Лістинг 9. Функція ajax_search ()
function ajax_search () {$ ( "# search_results"). show (); var search_val = $ ( "# search_term"). val (); $ .Post ( "./ find.php", {search_term: search_val}, function (data) {if (data.length> 0) {$ ( "# search_results"). Html (data);}})} < / script>

Тепер, коли всі елементи системи на місці, можна ввести запит і подивитися, як механізм пошуку працює в режимі реального часу, витягуючи записи при кожній події натискання клавіші. Він працює і при натисканні кнопки Submit. Наприклад, на малюнку 1 в поле пошуку введена буква a, і додаток повернуло записи Жанни і Сари Сміт, в іменах яких міститься ця буква.

Малюнок 1. Ajax-пошук в дії

висновок

Звичайно, над цим додатком можна попрацювати ще. Наприклад, додати поле ключових слів і дозволити пошук за ключовими словами. Або зробити так, щоб кожен запис містила теги або ключові слова, пов'язані з різними областями діяльності. Можна додати також ресурсний пошук, щоб шукати людей, які могли б допомогти в тих чи інших проектах. Нарешті, можна додати поля email, дати народження і чого завгодно ще, а потім розширити параметри пошуку.

Справа в тому, що для частини jQuery цього додатка не важливо, що відбувається всередині. Вона лише передає пошуковий термін в файл з ім'ям find.php. Файл find.php не знає або не дбає про те, що свої інструкції отримує від функції jQuery. Для нього пошуковий термін надходить зі звичайної форми, і він використовує ці дані для виконання запиту, а потім повертає записи, які збігаються з цим терміном.

Ресурси для скачування

Схожі теми

  • оригінал статті (EN).
  • Learning jQuery від автора Learning jQuery і jQuery Reference Guide (EN). (EN)
  • Керівництво по jQuery Алекса Уолкера (Alex Walker): " jQuery: Easy JavaScript for Designers "(EN).
  • Поглиблений аналіз застосування в jQuery елементів стилів CSS: " jQuery Crash Course "Натана Сміта (Nathan Smith) (Digital Web Magazine, жовтень 2007 року) (EN).
  • Короткий довідник по розробці jQuery: jQuery in Action (Bear Bibeault, Yehuda Katz, John Resig, Manning, 2008) (EN).
  • PHP.net - центральний ресурс для PHP-розробників. (EN)
  • " Список рекомендованої літератури з PHP . "(EN)
  • Все про PHP на developerWorks. (EN)
  • Слідкуйте за developerWorks в твіттері . (EN)
  • Ресурси проекту PHP на IBM developerWorks.
  • Подкасти на developerWorks . (EN)
  • Zend Core for IBM , Готова середовище розробки PHP з підтримкою IBM DB2 V9. (EN)
  • Розділ Open Source developerWorks з великої довідковою інформацією, інструментами і оновленнями проектів допоможе вам у розробці технологій open source і їх застосуванні з продуктами IBM.
  • завантажте ознайомчі версії продуктів IBM і спробуйте інструменти розробки додатків і продукти проміжного рівня від DB2®, Lotus®, Rational®, Tivoli® і WebSphere®. (EN)

Підпишіть мене на повідомлення до коментарів

Використання jQuery і PHP для створення Web-сторінок на базі Ajax

Бібліотеки jQuery спрощують PHP-розробнику рішення трудомістких завдань

Більшість РНР-розробників освоювали цю мову по-старому, почавши з визначення і побудови простих РНР-сторінок та їх сполуки з простими ж таблицями MySQL. Надалі, набуваючи різноманітного досвіду, вони вчилися створювати на РНР все більш складну функціональність, об'єднувати таблиці в MySQL і вирішувати інші складні завдання.

По ходу справи програміст набуває досвід роботи і з боку клієнта. В якійсь мірі він освоює XHTML або CSS, а можливо, і програмування на JavaScript. Залежно від виду проектів йому навіть може представитися випадок попрацювати з Ajax для додання своїм Web-додатків функціональності в дусі Web 2.0. Однак у мене перший досвід роботи з Ajax виявився досить стомлюючим - доводилося вручну створювати функції і насилу продиратися крізь процес створення Ajax-сторінок.

Часто використовувані абревіатури
  • CSS: Cascading Style Sheet
  • HTML: Hypertext Markup Language
  • XHTML: Extensible Hypertext Markup Language
  • XML: Extensible Markup Language

Для деяких Ajax досі залишається таємницею за сімома печатками. У них не знаходиться часу, терпіння або знань, щоб як слід опанувати ім. Шкода, тому що багатьом клієнтам подобається функціональність в стилі Ajax, яка спрощує роботу з Web-додатками. Прочитавши цю статтю, ви дізнаєтеся досить, щоб стати справжнім профі по Ajax.

Ми покажемо, як використовувати бібліотеку jQuery, щоб легко додавати функціональність Ajax в будь-який РНР-додаток. Ми створимо просте Web-додаток із застосуванням РНР і MySQL - телефонну книгу з іменами і номерами телефону. У ній буде все необхідне - кошти пошуку по іменах або номерами телефону, таблиця MySQL і т.п. Потім ми додамо jQuery, щоб можна було шукати по іменах і номерам телефону в режимі реального часу, в процесі набору тексту. Вирішивши цю задачу, ви не тільки будете добре знати основи jQuery, але і розберетеся в деяких фундаментальних поняттях Ajax.

Що таке Ajax?

Кращий спосіб описати Ajax - це порівняти його з тим, що вам вже знайомо. Більшість Web-сторінок і додатків працює в синхронному режимі. Ви натискаєте на посилання або кнопку Submit пошукової форми, і запит передається на сервер, який обробляє його і повертає відповідь. Цю модель найточніше назвати так: «натиснув, почекав, побачив». Цей нескінченний цикл поновлення-повторення всім добре відомий. Іншими словами, щоб відображати на сторінці постійно оновлювану інформацію, потрібно або ввести якийсь механізм автоматичного оновлення, або запропонувати користувачеві натискати на посилання.

З Ajax все не так. Перша A в слові Ajax означає асинхронний. Ajax дозволяє створювати сторінки на будь-якій мові програмування, а потім наповнювати різні частини цих сторінок інформацією з бази даних або будь-якого іншого централізованого процесу на сервері. Наприклад, у вас є сайт електронної комерції, де демонструються продаються продукти. На сторінці кожного продукту є звичайні елементи: заголовки, опис, фотографія, кількість товару на складі.

Припустимо, потрібно тримати відвідувачів в курсі того, скільки одиниць товару залишилося на складі. Можна додати функцію Ajax, яка буде запускати окрему РНР-сторінку із запитом MySQL, а потім передавати цю інформацію на первинну сторінку без будь-яких дій з боку користувача і без всякої синхронної послідовності подій типу натиснув-почекав-побачив.

Буква j в слові Ajax означає JavaScript, і це пояснює джерело такої поведінки. У ньому і гідність даного підходу, і його недолік. Гідність тому, що весь код працює на стороні клієнта, так що він легко переноситься і не впливає на сервер. А недолік для багатьох РНР-розробників полягає в тому, що це інша, незвична для них середу. Тут-то і виходять на сцену інструменти, подібні jQuery: вони значно спрощують взаємодію з Ajax, прискорюючи процес розробки.

А як щодо двох останніх букв в назві: а і x? Вони означають and XML, хоча XML-частина насправді використовується не завжди. Багато Ajax-додатки добре працюють і без XML-коду: вони передають просто HTML або навіть звичайний текст. Можливо, точніше було б розшифровувати x як XMLHttpRequest, так як цей об'єкт використовується для отримання даних у фоновому режимі, тобто без перешкод для відображення або поведінки існуючої сторінки.

Що таке jQuery?

jQuery - це компактна бібліотека JavaScript, створена Джоном Резігом (John Resig) і опублікована в інтернеті на початку 2006 року. Це безкоштовне і відкрите ПЗ, яке розповсюджується за двома ліцензіями: Массачусетського технологічного інституту (MIT) і GNU General Public License. Вона привернула безліч розробників у всьому світі своєю простотою і наочністю.

Секрет її популярності в тому, що ця проста в застосуванні бібліотека спрощує JavaScript для всіх (навіть для найзатятіших back-end програмістів), дозволяючи без виснажливої ​​роботи домагатися чудових ефектів. З її допомогою можна створювати набори елементів Document Object Model (DOM), модифікувати і маніпулювати CSS, вводити елементи анімації і працювати з Ajax. Вся ця функціональність забезпечується єдиним файлом JavaScript, який можна завантажити з сайту jQuery (див. ресурси ).

Завантаживши jQuery, можна додати його до будь-якого файлу HTML або РНР, включивши простий тег <script>:

<Script type = "text / javascript" src = "/ path / to / jquery.js"> </ script>

Припустимо, перед вами стоїть досить проста, але нудна завдання з великою кількістю ручних операцій типу додавання двокрапки (:) в кінці кожної мітки форми на сайті. Можна йти напролом, відшукуючи кожну мітку форми і додаючи в кінці рядка двокрапка, а можна використовувати наступний код jQuery:

Лістинг 1. Додавання двокрапок з використанням jQuery
<Script type = "text / javascript"> $ (document) .ready (function () {$ ( "label"). Append ( ":");}); </ Script>

Це проста функція: вона чекає, поки сторінка буде повністю підготовлена ​​і завантажена (для цього служить частина $ (document) .ready ()), виконує анонімну функцію, відшукувати все елементи DOM label, а потім в кінці знайденого тексту додає двокрапка. Функція $ () дозволяє звертатися до елементів DOM по їх природним іменах, що робить цей інтерфейс ідеальним вибором для розробників, вже знайомих з DOM.

Звичайно, за допомогою jQuery можна робити багато інших речей, але це хороший перший крок. Проста вбудована функція jQuery буде працювати в будь-якому випадку, так як вона чекає закінчення завантаження сторінки. Інша рядок коду вносить зміни в усі знайдені елементи DOM label, і все це відбувається з боку клієнта, без необхідності тупо перебирати всю зроблену розмітку і вносити в неї зміни.

Створення простого додатка: телефонна книга

Тепер, коли основи jQuery прояснилися, давайте побудуємо просту телефонну книгу на базі РНР і MySQL. Ця програма складається з трьох частин:

  • таблиці MySQL з іменами і номерами телефону
  • файлу index.php з формою пошуку
  • сторінки find.php, яка звертається до таблиці бази даних.

Створимо кожен елемент окремо.

Створення таблиці бази даних

Створення таблиці бази даних в MySQL - мабуть, найпростіша частина. Ця таблиця повинна містити самий мінімум інформації - ідентифікатор (ключ таблиці), поле імені і поле номера телефону. Два останніх поля алфавітно-цифрові, так що можна використовувати функцію varchar (). Поле ідентифікатора створимо як autoincrement primary key. Назвемо цю таблицю directory, і для її створення скористаємося наступним кодом Structured Query Language (SQL):

Лістинг 2. Код SQL для створення таблиці directory
CREATE TABLE `directory` (` id` INT NOT NULL AUTO_INCREMENT, `name` VARCHAR (64) NOT NULL,` phone` VARCHAR (16) NOT NULL, PRIMARY KEY ( `id`)) TYPE = MYISAM;

Як бачите, нічого складного немає. Пізніше це додаток можна буде змінити на свій розсуд. Наприклад, можна додати поле ключових слів або адреси, що ще більше полегшить пошук. Поки ж будемо працювати з тим, що є.

Тепер треба заповнити нашу таблицю. Для введення імен і номерів можна скористатися утилітою phpMyAdmin або командним рядком. Можна також використовувати наступну послідовність команд SQL:

Лістинг 3. Команди SQL для заповнення таблиці
insert into `directory` (name, phone) values ​​( 'Tom Smith', '512-555-0111'); insert into `directory` (name, phone) values ​​( 'Bill Smith', '512-555-0112'); insert into `directory` (name, phone) values ​​( 'John Smith', '512-555-0113'); insert into `directory` (name, phone) values ​​( 'Jane Smith', '512-555-0114'); insert into `directory` (name, phone) values ​​( 'Sara Smith', '512-555-0115');

Коли значення введені, перевірте, що список виводиться, надрукувавши select * в командному рядку з робочого каталогу або натиснувши Browse в phpMyAdmin.

Створення файлу index.php

Далі, створимо просту домашню сторінку для нашого застосування. Це файл РНР з ім'ям index.php, але поки він містить головним чином код HTML. Коли ми створимо файл find.php (на наступному кроці), ми повернемося до цієї частини і завершимо її.

Поки все, що нам потрібно, це простий HTML-файл з формою. Кожен елемент форми містить унікальний ідентифікатор, так як нам потрібна можливість визначати кожен елемент за допомогою jQuery.

Лістинг 4. Файл HTML з формою
<Html> <head> <title> Welcome! </ Title> </ head> <body> <h1> Search our Phone Directory </ h1> <form id = "searchform" method = "post"> <div> < label for = "search_term"> Search name / phone </ label> <input type = "text" name = "search_term" id = "search_term" /> <input type = "submit" value = "search" id = "search_button "/> </ div> </ form> <div id =" search_results "> </ div> </ body> </ html>

Відразу впадають в очі дві речі. По-перше, з формою не пов'язане ніяких дій. Це нормально: пам'ятайте, що дана форма не повинна слідувати традиційної синхронної схемою «натиснув, почекав, побачив». Замість цього ми додаємо функціональність, яка буде стежити за діями користувача в поле search_term.

Друге, що ви повинні помітити, це елемент DOM search_results- порожній елемент прямо під формою. У ньому будуть міститися результати пошуку. Однак перш ніж йти далі, створимо сторінку find.php.

Створення файлу find.php

Файл find.php - це місце, де власне і відбувається вся дія. Він з'єднує додаток з базою даних і виконує запит до таблиці.

У першій частині файлу find.php знаходиться інформація про з'єднання. Для нашого прикладу я ввів цю інформацію прямо в файл. У більшості з вас вона буде міститися у включеному або запитуваній файлі або в складі набагато більшої середовища.

Лістинг 5. Створення файлу find.php
<? Php define (HOST, "your.host.here"); define (USER, "your-user-name"); define (PW, "your-password"); define (DB, "your-db-name"); $ Connect = mysql_connect (HOST, USER, PW) or die ( 'Could not connect to mysql server.'); mysql_select_db (DB, $ connect) or die ( 'Could not select database.');

З форми index.php буде надходити пошуковий термін. Перш ніж вводити це значення в базу даних, над ним потрібно провести певну просту обробку. Я використовую функції strip_tags () і substr () для видалення з пошукового терміна всіх тегів HTML і скорочення його розміру. Така обробка ніколи не завадить - не можна цілком довіряти тому, що вводить користувач.

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

$ Term = strip_tags (substr ($ _ POST [ 'search_term'], 0, 100)); $ Term = mysql_escape_string ($ term);

Тепер складемо оператор SQL. Ми хочемо отримувати від таблиці будь-які імена та номери телефону, відповідні пошуковому терміну. Останній повинен порівнюватися методом LIKE як з полем імені, так і з полем номера телефону, а потім робиться запит mysql_query ().

Лістинг 6. Створення оператора SQL
$ Sql ​​= "select name, phone from directory where name like '% $ term%' or phone like '% $ term%' order by name asc"; $ Result = mysql_query ($ sql);

Результати запиту можна роздрукувати. Ініціалізіруем змінну $ string, щоб зберегти результати, потім використовуємо mysql_num_rows () для перевірки наявності у відповіді будь-яких рядків. Якщо результати для пошукового терміна не отримані, $ string буде містити значення "No matches!" Якщо вони є, буде роздруковано кожне ім'я і номер телефону з безлічі результатів. В кінці процесу вся рядок виводиться на екран командою echo:

Лістинг 7. Роздруківка рядки командної echo
$ String = ''; if (mysql_num_rows ($ result)> 0) {while ($ row = mysql_fetch_object ($ result)) {$ string. = "<b>". $ row-> name. "</ b> -"; $ String. = $ Row-> phone. "</a>"; $ String. = "<br/> \ n"; }} Else {$ string = "No matches!&quot;; } Echo $ string; ?>

Звичайно, ця РНР-функціональність і сама по собі надзвичайно корисна, але поки цього не видно. Потрібно якось ввести в цей сценарій сам пошуковий термін. Ми зробимо це в наступному розділі.

Додавання jQuery в index.php

Поки все, що у нас є, це пара нешкідливих сторінок РНР і проста таблиця MySQL. З додаванням jQuery це лагідне додаток перетвориться в сучасну програму на базі Ajax, яка працює подібно настільного додатком пошуку на кшталт Spotlight в Mac OS X або Google Desktop Search.

Відкриємо файл index.php і додамо виклик свежезагруженного файлу jquery.js.

<Script src = "./ jquery.js"> </ script>

Потім створимо просту функцію, яка запобіжить типова поведінка пошукової форми. (Для цього використовується функція preventDefault ().) Все натискання кнопки Submit і події key-up (тобто події, які відбуваються при натисканні клавіш на клавіатурі) будуть переадресовуватися до нової функції ajax_search (), яку ми зараз створимо.

Лістинг 8. Створення функції для запобігання типової поведінки пошукової форми
<Script type = 'text / javascript'> $ (document) .ready (function () {$ ( "# search_results"). SlideUp (); $ ( "# search_button"). Click (function (e) {e. preventDefault (); ajax_search ();}); $ ( "# search_term"). keyup (function (e) {e.preventDefault (); ajax_search ();});});

Зауважте, як функція slideUp () використовується для тимчасового приховування елемента DOM search_results. Для звернення до цього елементу по імені застосовується функція $ (). Тим, хто знайомий з CSS, підхід jQuery теж здасться знайомим. Наприклад, у нас є елемент DOM з унікальним ідентифікатором search_results, і для звернення до нього ми використовуємо $ ( "# search_results"). Все дуже просто.

Зауважте також, що кожен раз при натисканні кнопки Search або введенні символів в поле search_term анонімна функція запобігає поведінка за умовчанням і переадресує додаток до функції ajax_search (), якою ми тепер і займемося.

Функція ajax_search () гранично проста. Нам потрібно показати елемент DOM search_results (як ви пам'ятаєте, спочатку ми його сховали), ввести значення з вхідного поля search_term, передати його функції ($ .post ()), яка асинхронно виконує файл find.php, і чекати відповіді. Коли відповідь з'явиться (як ви пам'ятаєте, ми зробили так, щоб find.php повертала відповідь в будь-якому випадку, навіть якщо збігів не виявлено), jQuery поміщає цю відповідь в елемент DOM search_results.

Лістинг 9. Функція ajax_search ()
function ajax_search () {$ ( "# search_results"). show (); var search_val = $ ( "# search_term"). val (); $ .Post ( "./ find.php", {search_term: search_val}, function (data) {if (data.length> 0) {$ ( "# search_results"). Html (data);}})} < / script>

Тепер, коли всі елементи системи на місці, можна ввести запит і подивитися, як механізм пошуку працює в режимі реального часу, витягуючи записи при кожній події натискання клавіші. Він працює і при натисканні кнопки Submit. Наприклад, на малюнку 1 в поле пошуку введена буква a, і додаток повернуло записи Жанни і Сари Сміт, в іменах яких міститься ця буква.

Малюнок 1. Ajax-пошук в дії

висновок

Звичайно, над цим додатком можна попрацювати ще. Наприклад, додати поле ключових слів і дозволити пошук за ключовими словами. Або зробити так, щоб кожен запис містила теги або ключові слова, пов'язані з різними областями діяльності. Можна додати також ресурсний пошук, щоб шукати людей, які могли б допомогти в тих чи інших проектах. Нарешті, можна додати поля email, дати народження і чого завгодно ще, а потім розширити параметри пошуку.

Справа в тому, що для частини jQuery цього додатка не важливо, що відбувається всередині. Вона лише передає пошуковий термін в файл з ім'ям find.php. Файл find.php не знає або не дбає про те, що свої інструкції отримує від функції jQuery. Для нього пошуковий термін надходить зі звичайної форми, і він використовує ці дані для виконання запиту, а потім повертає записи, які збігаються з цим терміном.

Ресурси для скачування

Схожі теми

  • оригінал статті (EN).
  • Learning jQuery від автора Learning jQuery і jQuery Reference Guide (EN). (EN)
  • Керівництво по jQuery Алекса Уолкера (Alex Walker): " jQuery: Easy JavaScript for Designers "(EN).
  • Поглиблений аналіз застосування в jQuery елементів стилів CSS: " jQuery Crash Course "Натана Сміта (Nathan Smith) (Digital Web Magazine, жовтень 2007 року) (EN).
  • Короткий довідник по розробці jQuery: jQuery in Action (Bear Bibeault, Yehuda Katz, John Resig, Manning, 2008) (EN).
  • PHP.net - центральний ресурс для PHP-розробників. (EN)
  • " Список рекомендованої літератури з PHP . "(EN)
  • Все про PHP на developerWorks. (EN)
  • Слідкуйте за developerWorks в твіттері . (EN)
  • Ресурси проекту PHP на IBM developerWorks.
  • Подкасти на developerWorks . (EN)
  • Zend Core for IBM , Готова середовище розробки PHP з підтримкою IBM DB2 V9. (EN)
  • Розділ Open Source developerWorks з великої довідковою інформацією, інструментами і оновленнями проектів допоможе вам у розробці технологій open source і їх застосуванні з продуктами IBM.
  • завантажте ознайомчі версії продуктів IBM і спробуйте інструменти розробки додатків і продукти проміжного рівня від DB2®, Lotus®, Rational®, Tivoli® і WebSphere®. (EN)

Підпишіть мене на повідомлення до коментарів

Що таке jQuery?
Що таке jQuery?
Що таке jQuery?
Що таке Ajax?
Що таке jQuery?
Quot;; } Echo $ string; ?
Що таке Ajax?
Що таке jQuery?
Quot;; } Echo $ string; ?
Що таке Ajax?