Загальнi вiдомостi про Ajax

СПИСОК УМОВНИХ ПОЗНАЧЕНЬ ТА СКОРОЧЕНЬ

AJAX – Asynchronous JavaScript And XML (Асинхронний JavaScript і XML)

WEB – Всесвітня павутина

XML – Extensible Markup Language (Розширювана мова розмітки)

HTML – HyperText Markup Language (Мова розмітки гіпертексту)

JSON – JavaScript Object Notation (Об'єктний запис JavaScript)

CSV – Comma-Separated Values

HTTP – HyperText Transfer Protocol (Протокол передачі гіпертексту)

DOM – Document Object Model (Об'єктна модель документа)

DHTML – Dynamic HyperText Markup Language

PHP – Hypertext Preprocessor (Гіпертекстовий препроцесор)

JAVA – Об'єктно-орієнтована мова програмування

URL – Uniform Resource Locator (Уніфікований адрес ресурсу)

XMLHttpRequest – API-запит веб-клієнта (браузера) до веб-сервера за протоколом HTTP у фоновому режимі, для мовпрограмування JavaScript, JScript, VBScript

СУБД – Система керування базами даних

ООП – Об'єктно-орієнтоване програмування

ОС – Операційна система

ПЗ – Програмне забезпечення

ПК – Персональний комп’ютер

ВСТУП

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

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

Запропонований підхід реалізований у вигляді набору базових засобів для написання Ajax-додатків.

Метою дипломного проекту є розглянути технічне створення Web- додатків за допомогою Ajax.

Предметом дослідження є додаток.

Для реалізації поставленої мети слід вирішити наступні завдання:

- Детальніше ознайомитися з технологією Ajax;

- Ознайомитися принципи роботи Web-додатків;

- Детальніше ознайомитися з інформацією про програмні бібліотеки підтримки розробки Web-додатків.

- Визначення вартості даного Web-додатку.

- Детальне ознайомлення з охороною праці при роботі на ПК.

АНАЛІТИЧНА ЧАСТИНА

1 РОЗРОБКА ІНТЕРАКТИВНОГО ІНТЕРФЕЙСУ WEB-ДОДАТКІВ ЗАСОБАМИ БІБЛІОТЕКИ CODEIGNITER ТА ТЕХНОЛОГІЇ AJAX

Загальнi вiдомостi про Ajax

Ajax — група методів Web-розробки, що використовуються для створення Web-програм з багатими можливостями та мережевою взаємодією, що базується на «фоновому» обміні даними браузера з Web-сервером. В результаті сторінка не перезавантажується повністю і Web-програма стає швидкою та зручною.

Ajax це не самостійна технологія, а скоріше концепція використання декількох суміжних технологій. Ajax базується на двох основних принципах: використання технології взаємодії із сервером за допомогою JavaScript об’єкта XMLHttpRequest без перезавантаження усієї сторінки використання – для динамічної зміни вмісту сторінки та реагування на дії користувача

Для передачі даних від сервера до клієнта використовуються формати XML або JSON. Класична модель web-програм пов’язана не лише з використанням базових web-технологій, а і з специфічним способом роботи з web-програмою, при якому web-браузер є лише низькорівневим терміналом. Він не має інформації про те, який етап роботи виконується користувачем. Він лише отримує готову сторінку в форматі HTML і відображає її користувачу.

У web-програмах, побудованих за допомогою технології Ajax, частина функціональних можливостей переноситься з сервера на клієнт. На деякі дії користувача така web-програма може реагувати самостійно. Якщо наявних можливостей не вистачає для виконання ініційованих користувачем дій то відбувається взаємодія із сервером, при цьому користувач може виконувати інші дії. Оскільки HTML документ присутній на стороні клієнта протягом всьго часу роботи з web-програмою, то він здатний зберігати всю інформацію про її стан.

Технологія динамічного завантаження вмісту існувала і раніше — за допомогою атрибуту src можна було завантажити зовнішній сценарій JavaScript, який змінить поточну сторінку. Але цей метод не є дуже вдалим через обмеження атрибуту src та додатковому навантаженні на сервер, бо він має виконати додаткові дії для генерації спеціального сценарію JavaScript, що містить інструкцію, як модифікувати поточну сторінку в нову.

Засоби, що використовуються в рамках технології Ajax не єдиний спосіб забезпечити асинхронний обмін даними з сервером. Наприклад Macromedia Flash (починаючи з 4 версії) може завантажувати дані в форматі XML або CSV з серверу без перезавантаження сторінки. Але цю технологію не можна використовувати для створення багатих web-програм бо вона в основному використовується для роботи з мультимедійними даними і малопридатна для динамічної зміни вмісту сторінки.

Пізніше Microsoft створила об’єкт XMLHttpRequest в Internet Explorer 5, що і став основою Ajax.

1.2 Переваги технології Ajax

- Інтерактивність веб-інтерфейсу;

Інтерактивність веб-інтерфейсу займає ключову позицію в проектуванні веб ресурсу. Інтерактивність зумовлюється використанням мультимедійних форм, сучасними шаблонами проектування, принципом спілкування користувача із інтерфейсом сайту. Наприклад, користувач зробив запит на сервер з певними даними і має очікувати результати. На сайтах з класичними методами перед користувачем білий екран доти, доки не завантажиться вся сторінка. За звичай, в класичних сайт користувач після заповнення, наприклад, форми, мав наживати кнопку «Підтвердити» і очікувати на відповідь сервера, яка в свою чергу може містити попередження. Часто користувач змушений наново заповнювати все. Ajax дозволяє так спроектувати сторінку, що запит робитиметься після будь-якій зміни зі сторони користувача. А також технологія Ajax дозволяє залишатись користувачеві на сайті, і можна розробити заставку, яка буде з’являтись під час завантаження даних. У Додатках А є приклад, які можна запрограмовувати заставки.

- Зменшення трафіку;

Якщо в класичних моделях реалізації взаємодії клієнт-сервер, якщо користувач хоче зробити запит на сервер, то для цього в об’єкті-запиту передавалась вся сторінка, яка після оновлення завантажувалась в браузері, що вимагало збільшення використаного трафіку. Тепер «витрати» трафіку можна зменшити, завантажуючи тільки ту частину, яка змінилась. Це можна реалізовується завдяки тому, що створюється HTTP запити, які відсилаються на сервер у фоновому режимі і модифікуються тільки окремі частини web-сторінки за допомогою JavaScript, коли приходить відповідь з серверу.

- Динамічні і більш якісні веб-сайти;

Ми можемо створювати нові та більш цікаві сайти для користувачів. Йдеться про функціонал для користувачів сайту. Сучасні веб сайти дають безліч можливостей для функцій якими користувач може користуватись безпосередньо не використовуючи перевантаження веб сторінки як при класичній моделі проектування веб ресурсу. Користувачі зможуть працювати з мультимедійними сайтами, здійснювати різноманітні операції із своїми завантаженими об’єктами у інтерфейсі веб-ресурсу, все це будує принципово новий рівень якості веб сайтів і динаміки поведінки інтерфейсу, яки створюється для взаємодії користувача із веб сайтом.

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

- Зменшення навантаження на веб-сервер;

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

1.3 Недоліки технології Ajax

Відсутня інтеграція із стандартними інструментами браузера — не працює кнопка «Назад», сторінку, згенеровану за допомогою Ajax не можна додати в закладки.

Проблема з індексуванням сайту пошуковими роботами — у них відсутня підтримка JavaScript.

Використання JavaScript та DOM, що мають різну реалізацію в різних браузерах та навіть різних версіях браузерів.

JavaScript — назва реалізація мови програмування ECMAScript. Найпоширеніше і найвідоміше застосування мови — написання сценаріїв для Web-сторінок, але вона також використовується для впровадження сценаріїв керування об'єктами вбудованими в інші програми.

JavaScript за назвою дуже схожа на мову Java. Але це зовсім різні мови з різними сферами застосування. Права на назву JavaScript належать Sun Microsystems (розробник Java) але JavaScript розробляла зовсім інша компанія — Netscape для власного браузера Netscape Communications.

Зараз JavaScript підтримують всі основні двигунці браузерів — Trident (Internet Explorer), Presto (Opera), Gecko (Firefox, Mozilla, Netscape) та KHTML/WebKit (Konqueror, Safari).

JavaScript має низку властивостей об'єктно-орієнтованих мов, але завдяки концепції прототипів підтримка об'єктів в ній відрізняється від традиційних мов ООП. JavaScript має ряд властивостей, спільних з функціональними мовами, що додає мові додаткову гнучкість.

JavaScript має подібний синтаксис, але має з нею відмінності:

- об'єкти, з можливістю інтроспекції і динамічної зміни типу через механізм прототипів

- функції як об'єкти першого класу

- обробка винятків

- автоматичне приведення типів

- автоматичне прибирання сміття

- анонімні функції

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

При використанні в рамках технології DHTML JavaScript код включається в HTML-код сторінки і виконується інтерпретатором, вбудованим в браузер. Код JavaScript вставляється в теги <script></script> з обов'язковим за специфікацією HTML 4.01 атрибутом type="text/javascript", хоча в більшості браузерів мова сценаріїв по замовчуванюю саме JavaScript.

При розробці великих і нетривіальних Web-програм з використанням JavaScript дуже важлива наявність зручних та досконалих інструментів відладки. Оскільки браузери мають різні двигунці, які по різному інтерпретують JavaScript (та об’єктну модель документу), то потрібно мати налагоджувач для кожного з основних двигунців.

Проблема з налагодженням JavaScript сценаріїв є найбільшим недоліком цієї мови. Спроба стандартизації у вигляді ECMAScript не досягла успіху — кожен двигунець має особливості і, фактично, доводиться писати код для різних двигунців одночасно.

Також JavaScipt має обмеження часу на завершення свого виконання (це може бути як фіксоване число у випадку браузерів з двигунцем Gecko або інше обмеження, наприклад максимальне число елементарних операція у випадку браузерів з двигунцем Trident).

1.4 Взаємодія у Web за допомогою Ajax

В цьому механізмі доступу з’єднуючою ланкою між сервером та сторінкою є JavaScript-об’єкт XMLHttpRequest. В різних двигунцях та їх версіях він реалізований по різному тому потрібно використовувати спеціальну функцію, яка враховує всі можливі варіанти.

HTML

сторінка

Об’єкт

XMLHttpRequest

PHP

скрипт

При певних діях користувача (наприклад при активізації кнопки в складі користувацького інтерфейсу) браузер генерує запит і за допомогою JavaScript-об’єкта XMLHttpRequest відправляє його на сервер. При цьому метод доступу може бути DHTML. Користувацький інтерфейс під час відправлення запиту і отримання відповіді не блокується і користувач може продовжувати виконувати певні дії, результатом яких можуть бути нові запити до сервера — Ajax підтримує декілька одночасних взаємодій сторінки з сервером. Користувацький інтерфейс виглядає і реагує на дії користувача як звичайна програма, що полегшує роботу з ним.

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

Браузер, за допомогою JavaScript, обробляє отриману відповідь і модифікує сторінку без перезавантаження за допомогою DHTML.

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

Недоліки методу:

- важкість у розробці та налагодженні через використання мови сценаріїв JavaScript, що має специфічне застосування тому вона мало пристосована до розробки багатих web-програм.

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

- на сторінку, згенеровану за допомогою Ajax, не можна поставити пряме посилання — при модифікації сторінка не змінює адреси.

Для подолання вказаних недоліків потрібно:

- Обмежити використання мови сценаріїв JavaScript і використати технологію Java Апплетів. Повністю відмовитись від використання JavaScript не можна (це єдиний спосіб динамічної зміни сторінки, що, хоч і з недоліками, але функціонує в більшості сучасних браузерів) але якщо перенести більшу частину функціональних можливостей з сценарію JavaScript до Java Апплету і використовувати JavaScript лише для зв’язку HTML сторінки з Апплетом то складність розробки та налагодження такої системи буде на порядок нижча.

- Створювати окремі статичні сторінки, що матимуть той самий вміст, що і динамічні сторінки, але їх зможуть прочитати та обробити пошукові системи а також переглянути ті користувачі, що використовують застарілі браузери або браузери із відключеними або заблокованими додатковими можливостями (JavaScript, Java, Flash і т.п.). Також ці статичні сторінки користувач може зберегти на свій комп’ютер для перегляду оффлайн або редагування за допомогою HTML-редакторів.

- Створити спеціальний елемент користувацького інтерфейсу — «посилання на цю сторінку», що міститиме спеціально сформоване посилання, перейшовши за яким відкривається сторінка з таким самим вмістом, як і згенерована динамічно. Це потребує модифікації серверної частини (в більшості випадків ця модифікація є незначною), але подолання цього недоліку є дуже важливим для комфортної роботи з Web-сторіками, що побудовані динамічно.

1.5 Суть Ajax-підходу

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

Для того щоб краще зрозуміти суть мого дипломного проектування розглянемо головне визначення технології Ajax із інформаційного ресурсу Wikipedia. АJAX (Asynchronous JavaScript And XML) – підхід до побудови користувацьких інтерфейсів веб-застосунків, за яких веб-сторінка, не перезавантажуючись, у фоновому режимі надсилає запити на сервер і сама звідти довантажує потрібні користувачу дані. AJAX – один з компонентів концепції DHTML.

Про AJAX заговорили після появи в лютому 2005-го року статті Джесі Джеймса Гарретта (Jesse James Garrett) «Новий підхід до веб-застосунків». AJAX – не самостійна технологія. Отже як бачимо Ajax досить широко застосовується у сфері програмування веб ресурсів і це свідчить про значне вдосконалення а сама концепція використання є дуже простою з точки зору програміста.

AJAX – це несамостійна технологія, а швидше концепція використання декількох суміжних технологій. AJAX підхід до розробки призначених для користувача інтерфейсів комбінує кілька основних методів і прийомів:

- Використання DHTML для динамічної зміни змісту сторінки;

- Використання XMLHttpRequest для звернення до сервера «на льоту», не перезавантажуючи всю сторінку повністю;

- альтернативний метод – динамічне підвантаження коду JavaScript в тег <SCRIPT> з використанням DOM, що здійснюється із використанням формату JSON);

- динамічне створення дочірніх фреймів.

Використання цих підходів дозволяє створювати набагато зручніші веб-інтерфейси користувача на тих сторінках сайтів, де необхідна активна взаємодія з користувачем. AJAX – асинхронний, тому користувач може переглядати далі контент сайту, поки сервер все ще обробляє запит. Браузер не перезавантажує web-сторінку і дані посилаються на сервер без візуального підтвердження (крім випадків, коли ми самі захочемо показати процес з’єднання з сервером). Використання AJAX стало найпопулярніше після того, як компанія Google почала активно використовувати його при створенні своїх сайтів, таких як Gmail, Google Maps і Google Suggest. Створення цих сайтів підтвердило ефективність використання даного підходу.

Порівняння класичного підходу та AJAX

Класична модель веб-застосування:

- Користувач заходить на веб-сторінку і натискає на який-небудь її елемент;

- Браузер надсилає запит серверу;

- У відповідь сервер генерує повністю нову веб-сторінку і відправляє її браузеру і т. д.;

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

Модель AJAX

- Користувач заходить на веб-сторінку і натискає на який-небудь її елемент.

- Браузер відправляє відповідний запит на сервер.

- Сервер віддає тільки ту частину документа, яка змінилася.

1.6 Інтернет-проекти на основі AJAX-технології

Технологію Ajax широко використовують провідні Інтернет гіганти такі як Google, Wikipedia, yahoo, meta. Це свідчить про те що інноваційний підхід до створення потужних Інтернет проектів не обходиться без використання технології Ajax. Нижче наведені основні проекти провідних компаній,що активно розвивають та використовують Ajax підхід.

- Google suggest та Google Maps – проекти, які показали можливості Ajax;

- Protopage – гарний приклад сайту на Ajax (особисті замітки);

- eyeOS – online - робочий стіл на Ajax;

- BIM – online-аггрегатор новин на Ajax;

- Браузер по Wikipedia.org – оболонка для навігації по Wikipedia.org на ajax.

Google Suggest (англ. suggest – пропоную) це сучасний сервіс пошукового запиту який автозаповнює рядок запиту на основі декількох введених символів. Коли користувач для прикладу вводить декілька букв у рядковому запиті Google тоді автоматично за допомогою фонових запитів із бази даних підставляється готове слово яке відповідає умові запиту користувача. Даний сервіс повністю працює на основі технології AJAX.

Protopage.

Хороший приклад сайту оновлення новин,що активно використовує Ajax технологію для динамічного інтерфейсу користувача є проект Protopage. Даний сайт створений як rss система оновлення,тобто користувач у фоновому режимі без перевантаження веб сторінки бачить список свіжих новин для свого профілю.

eyeOS – веб-десктоп з відкритим кодом що будується на концепції хмарних обчислень що дозволяє співпрацю та зв'язок між користувачами. Більша частина проекту написана на PHP, XML, та JavaScript. Працює як платформа для веб-застосунків написаних з використанням eyeOS Toolkit. Включає в себе середовище робочого стола з 67 застосунками та системними утилітами. Доступна для портативних пристроїв через мобільний фронт-енд. Для розробників eyeOS надає eyeOS Toolkit – набір бібліотек для розробки застосунків для цієї ОС. Використовуючи інтегроване систему eyeSoft, що базується на Portage, кожен може створити власний репозиторій для eyeOS та поширювати застосунки через нього. Кожна частина робочого столу – це окремий застосунок, що активно використовує технологію AJAX для відправки команд користувача в форматі XML на сервер. На сервері eyeOS теж використовує XML для зберігання інформації. Кожному користувачу на сервері виділяється окремий XML файл. Отже як бачимо даний веб за стосунок повністю побудований на основі технології Ajax.

BIM.

Потужний та сучасний он-лайн генератор інформації. Використовується як генератор новин для сайту. Активно використовує технологію фонового за стосунку Ajax. Веб-сайт сервісу.

Браузер по Wikipedia.org

Веб-інформаційний ресурс працює повністю із підтримкою Ajax системи обміну даних, що свідчить про потужний інтерфейс для користувачів веб сайту. Веб-сайт із вбудованим у нього браузером працює у фоновому режимі без перевантаження веб сторінки. Отже вся оболонка навігації Wikipedia працює на основі технології Ajax.

На сьогоднішній день сучасні та потужні веб сервіси у мережі Інтернет проектуються із використанням останніх тенденцій інформаційних технології у сфері веб програмування. Технологія що дозволяє користувачам користуватись надсучасним і зручним інтерфейсом взаємодії це AJAX. За допомогою цієї концепції вдалось значно просунути практично до інноваційного рівня веб ресурси та проектування інформаційних систем.

2 Загальна інформація про програмні бібліотеки підтримки розробки Web - додатків

Останнім часом основною тенденцією при розробці Web-додатків є використання різноманітних програмних бібліотек, які прискорюють процес створення кінцевого продукту, а також надають можливості систематизувати програмний код за рахунок застосування шаблонів проектування, зокрема, «Модель-Подання-Контролер» (MVC). Існує велика кількість подібних бібліотек, найбільш універсальні та потужні часто називають каркасами розробки або фреймворками (frameworks). Серед них для мови PHP слід відзначити такі, як Zend Framework, Symfony, Cake PHP, CodeIgniter та інші. Деякі з них, наприклад Zend Framework або Symfony, надають максимальні 3 можливості порівняно з іншими, але є складними у вивченні та мають меншу швидкодію; інші – простіші у застосуванні, але надають менший набір функціональних можливостей. Узагальнена характеристика таких бібліотек наведена нижче.

1. Орієнтація на сучасні об‘єктно-орієнтовані підходи організації Web-додатків, що надає змогу будувати масштабовані, контрольовані та надійні проекти.

2. Використання шаблону MVC, який надає можливості розділити програмний код взаємодії з даними (model), візуальне подання у вигляді шаблонів сторінок (view), та узагальнений алгоритм (бізнес-логіку) обробки запиту користувача (controller), який безпосередньо використовує моделі та подання проекту.

3. Наявність уніфікованого програмного інтерфейсу до реляційних баз даних, що надає можливість використовувати різні СУБД єдиним способом.

4. Наявність мови шаблонів, що надає можливості максимально розділити HTML-шаблон сторінки від даних, які наповнюють її інформаційним змістом.

5. Використання вбудованого механізму кешування, що забезпечує прискорення завантаження вже переглянутих сторінок.

6. Використання засобів валідації даних, переданих від користувача з HTML-форм.

7. Застосування механізму зручної для користувача адресації сторінок Web-додатку з можливістю відсікання небажаних або хибних адресів.

8. Автоматичне шифрування Cookie-змінних, які надсилаються з сервера, а також управління сесіями.

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

2.1 Каркас додатків CodeIgniter

В CodeIgniter (www.codeigniter.com) реалізовано більшість можливостей, наведених вище, але, на відміну від інших каркасів, він має ряд переваг, які полягають у високій швидкості генерування серверної відповіді, простоті розробки, конфігурування та ініціалізації додатку, а також у наявності великої кількості бібліотечних функцій.

Схема виконання додатку з використанням CodeIgniter

Виконання програми засобами CodeIgniter відбувається через єдиний інтерфейс – програмний файл index.php, який виконує ініціалізацію та застосовує налаштування проекту з конфігураційних файлів, перетворює вхідні дані від користувача на внутрішні структури даних CodeIgniter та передає управління засобам маршрутизації. Останній модуль аналізує вхідні дані HTTP-запиту, а саме: метод HTTP, URL-адресу та заголовки. Якщо сторінка з такими ж вхідними даними вже існує у внутрішньому кеші CodeIgniter, то її вміст повертається без подальшої обробки безпосередньо користувачеві (через Web-сервер). В іншому випадку наступним кроком є фільтрація вхідних даних з метою уникнення несанкціонованих дій з боку можливого зловмисника: екранування даних, вилучення небажаних тегів тощо. Після цього в залежності від URL запит надходить до визначеного контролера додатку. Контролер, в свою чергу, обмінюється даними з моделями (виконує запити до бази даних, файлів тощо), за необхідності викликає бібліотечні та допоміжні функції і, наприкінці, передає дані у подання, де формується кінцева HTML-сторінка, яка передається користувачеві. Графічно дану схему ілюструє (Рисунок 2.1), на якому напівжирним шрифтом виділено ті елементи структури проекту, які кодуються програмістом, при цьому решта – вбудовані модулі CodeIgniter.

Рисунок 2.1- Схема виконання програми Codeigniter

Комплект файлів Codeigniter об’єднується в групи ієрархічно поєднаних каталогів в залежності від функціонального призначення. Головним каталогом додатку є Application. Ядро системи відповідно розташоване у System (рисунок 2.2).

Рисунок 2.2- Файлова структура проекту Codeigniter

Файл іndex.php Модуль маршрутизації Модуль кешування Модуль безпеки вхідних даних Подання додатку Контро- лер додатку Моделі додатку Бібліотеки Допом. функції Розширення HTTP-запит HTTP-відповідь (рисунок 2.1) Схема виконання програми CodeIgniter

Файлова структура проекту CodeIgniter

Комплект файлів CodeIgniter об‘єднується в групи ієрархічно поєднаних каталогів в залежності від функціонального призначення. Головним каталогом додатку є Application. Ядро системи відповідно розташоване у System (рисунок 2.2).

Конфігураційні файли проекту Контролери проекту Моделі проекту Подання проекту Файли Web-додатку Налаштування з’єднань з БД Налаштування маршрутизації URL Загальні параметри конфігурації Власні бібліотеки розробника Файли перекладу текстових фрагментів Файли ядра CodeIgniter.

З рисунока 2.2 видно, що різноманітні налаштування проекту групуються в окремі файли php, зокрема, налаштування бази даних зберігаються у database.php, маршрутизація URL – у routes.php тощо. Це дозволяє змінювати різноманітні лаштунки безпосередньо в процесі функціонування Web-додатку, не змінюючи склад файлової системи та не запускаючи додаткових командних файлів, що часто буває критичним при використанні орендованого дискового простору на сервері для Web-проектів. Крім того, на рисуноку 2.2 напівжирним шрифтом виділено блоки проекту, які реалізовує безпосередньо програміст. Найголовнішими з них є:

- контролери (controllers), які є точками входу при виконанні обробки відповідного запиту;

- моделі (models), які уніфікують доступ до зовнішніх даних (баз даних, файлів, мережних служб тощо);

- подання (views), які зберігають шаблони Web-сторінок, відокремлюючи дизайн від інформаційного вмісту HTML-документу.

Контролери

Вибір контролера, якому передається управління при обробці запиту користувача, визначається URL-адресою запиту. Типова структура URL-адреси має наступний вигляд (рисунок 2.3):

Рисунок 2.3- Формат URL-адреси, що застосовується в CodeIgniter

URL-адреса має фіксований формат, як показано на рисуноку 2.3. Першим параметром є назва контролера проекту, якому передається управління, далі метод у класі контролера, і остання частина – параметри, які отримає метод контролера.

Приклади:

- http://example.com/portfolio/latest/5 - клас контролера portfolio, метод контролера latest, 5 – параметр метода.

- http://example.com/blog/created - клас контролера blog, метод контролера created, без параметрів.

Слід зауважити, що на рисуноку 2.3 після назви сайту не вказано index.php. Як правило, на практиці позбуваються використання index.php засобами Web-сервера. Наприклад, для Web-сервера Apache необхідно в кореневому каталозі проекту (див. рисунок.2.2) створити файл .htaccess і вписати в цей файл наступні інструкції:

RewriteEngine on

RewriteCond $1 !^(index\.php|images|robots\.txt)

RewriteRule ^(.*)$ /index.php/$1 [L]

При цьому завдяки використанню модулю mod_rewrite встановлюються правила обробки запиту перед передачею його Web-додатку (тут CodeIgniter). А саме: RewriteCond вказує, які файли пропускати без обробки (index.php, images, robots.txt), а RewriteRule задає правило, що будь-який запит, крім вказаного в RewriteCond необхідно модифікувати шляхом додавання перед ним рядку index.php. Таким чином, CodeIgniter розпізнає вірний формат URL.

Моделі

Моделі призначені для об‘єднання функцій взаємодії із зовнішніми даними (файлами, базами даних) у єдиний клас. Для використання моделі необхідно створити файл PHP визначеної структури (рисунок 2.4) в каталозі /application/models. При чому назви файлу та класу мають співпадати, а назва класу записується з великої літери. Структура класу включає назву класу, ознаку успадкування від універсальної моделі (CI_Model), а також конструктор __constructor(), в якому викликається код батьківського класу. Завантаження моделі з контролера відбувається за допомогою команди:

$this->load->model('Testmodel'); де Testmodel – назва класу моделі.

Лістинг 2.1 - Приклад коду файлу моделі проекту

<?php

class Testmodel extends CI_Model {

function__construct()

{

// Call the Model constructor

parent::__construct();

}

function get_data($id)

{

$sql = "SELECT fieldl FROM tablel WHERE id = ?"; $q = $this->db->query($sql, array(id));

$row = $q->row();

return $row->field1;

}

}

В подальшому виклик методів класу моделі відбувається наступним чином:

$this->Testmodel->get_data(10);, тобто модель стає об‘єктом базового класу CodeIgniter. Для автоматичного завантаження моделі при старті проекту необхідно у конфігураційному файлі /application/config/autoload.php вписати назву моделі в відповідний масив:

$autoload['model'] = array(„testmodel‟);

Подання

Подання у CodeIgniter – це повна HTML-сторінка або її фрагмент (наприклад: заголовок, меню, основний вміст, нижня частина). Основне призначення подання – відділити логіку отримання даних від візуального вигляду. Як правило, подання містить мінімум PHP-коду: лише той, що призначено для виведення даних (echo, print тощо). Крім того, допустимим є використання циклів PHP (for, foreach тощо) для виведення даних, що мають вигляд списків, дерев та інших складних структур.

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

2.2 Асинхронний обмін даними засобами Ajax

Ajax (асинхронний Javascript) – це підхід до створення інтерактивних Web-додатків, згідно з яким обмін даними між Web-браузером та Web-сервером відбувається у фоновому режимі, що надає можливості оновлювати лише частину Web-сторінки. Такий підхід зменшує мережний трафік та дозволяє будувати додатки, наближені до «віконних», які є більш звичними для користувача. Головним чином підхід базується на використанні засобів мови JavaScript. При цьому з серверного боку жодних змін виконувати не потрібно у порівнянні з традиційним підходом. На клієнті за Ajax відповідає об‘єкт Javascript XMLHttpRequest. Передача даних за допомогою цього об‘єкта може відбуватись як у синхронному, так і у асинхронному режимі. Складність безпосереднього використання цього об‘єкта зумовлена неповною сумісністю реалізації різними браузерами. Тому, як правило, використовують крос-платформні бібліотеки, які уніфікують доступ до даного об‘єкта. Однією з таких бібліотек є JQuery. Серед її особливостей можна відзначити широкий спектр можливостей щодо пошуку та модифікації елементів Web-сторінки із застосуванням синтаксису мов XPath та CSS, наявність засобів управління подіями елементів сторінки, візуальні ефекти тощо. З огляду на задачі Ajax JQuery пропонує наступні можливості:

1. Завантаження даних з сервера безпосередньо у елемент сторінки (наприклад, у параграф).

2. Завантаження та виконання програмного коду мовою Javascript.

3. Завантаження даних із сервера у форматі JSON, що спрощує перетворення даних у об‘єкти Javascript.

4. Відправлення даних на сервер.

5. Обробка помилок, що виникли при передачі даних.

6. Серіалізація даних HTML-форми для подальшої передачі на сервер.

3 Ініціалізація проекту та обробка запиту засобами CodeIgniter

3.1 Ініціалізація обробки запиту засобами CodeIgniter

Інсталяційний пакет CodeIgniter містить усі необхідні файли проекту, які необхідно розгорнути у кореневий каталог htdocsWeb-сервера Apache, попередньо очистивши його вміст. Файлова структура при цьому буде мати вигляд як на рисунку 2.2. За замовчуванням каталоги controllersта viewsмістять тестові файли controllers.phpта welcome.phpвідповідно. Ці файли можна використовувати як зразок для створення власного проекту. Розглянемо детальніше хід виконання програми на прикладі даного зразка. Надрукувавши в браузері рядок запиту http://localhost/index.php/ ,на екрані отримаємо результат, подібний зображеному на рисуноку 3.1.

Рисунок 3.1- Результат обробки стартової сторінки проекту-зразка

Алгоритм обробки полягає у наступному. Web-сервер, отримавши запит, передає його на виконання файлу index.php, який знаходиться безпосередньо в htdocs. Оскільки в URL не міститься жодного уточнення після index.php, то застосовуються налаштування за умовчанням, вказані в конфігураційному файлі routes.php:

$route['default_controller'] = 'welcome';

Завдяки цьому, управління передається у контролер Welcomeз файлу application/controllers/welcome.php(за домовленістю назва файлу і класу має співпадати, але назва класу записується з великої літери). Код файлу welcome.phpпредставлено на лістингу 3.1:

Лістинг 3.1 - Приклад коду файлу-контролера welcome.php

<?php if (!defined('BASEPATH')) exit('No direct script access allowed');

class Welcome extends CI_Controller {

function__construct()

{

parent::__construct();

}

function index()

{

$this->load->view('welcome_message');

}

}

Основу файлу welcome.phpскладає клас Welcome, успадкований від CI_Controller– базового класу для всіх контролерів проекту. Суттєвим методом в ньому є index(), оскільки саме цей метод викликається за замовчуванням у випадку, коли URL не містить додаткових елементів, крім …/index.php. В цьому методі записано код:

$this->load->view('welcome_message');

- який означає, що необхідно передати управління компоненту подання (view) з назвою файла welcome_message.phpз метою генерації сторінки HTML. Як правило, файли подання містять код HTML з найпростішими вставками мовою PHP: операторами та функціями виведення (echo, printтощо), а також циклів (for, foreachта іншими). Це обумовлено власне метою подання – об‘єднання статичного коду HTML та динамічних даних, отриманих в результаті взаємодії програми з базою даних, файлами тощо.

3.2 Приклад застосування CodeIgniter для задачі аутентифікації користувача

Розглянемо приклад аутентифікації користувача з використанням його ім‘я та паролю, які зберігаються у базі даних. Узагальнений алгоритм розробки даної програми полягає у наступному.

1. Підготовка бази даних: створення таблиці, занесення даних, налаштування конфігурації проекту.

2. Реалізація контролеру проекту з функціями виведення форми уведення даних про користувача та виведення результату аутентифікації.

3. Створення моделі з функцією перевірки імені/паролю користувача.

4. Створення подання сторінки форми уведення даних про користувача та сторінки результату аутентифікації.

Підготовка бази даних

Підготовка структур бази даних складається зі створення бази даних (команда create database userdb), вибору бази даних (команда use userdb), створення таблиці usersіз полями id, unameта upwd), а також внесення рядка даних у таблицю (команда insert into). Приклад виконання наведених команд зображено на лістингу 3.2.

Лістинг 3.2 - Приклад коду файлу протоколу команд підготовки бази даних

C:\xampp\mysql\bin>mysql -u root -p Enter password: ********

Welcome to the MySQL monitor. Commands end with ; or \g.

Vour MySQL connection id is 2

Server version: 5.0.51b-community-log MySQL Community Edition (GPL)

Type 'help;' or ’\h' for help. Type '\c' to clear the buffer.

mysql> create database userdb;

Query OK, 1 row affected (0.05 sec)

mysql> use userdb;

Database changed

mysql> create table users (id integer auto_increment, uname varchar(20), upwd ua rchar(20), primary key (id));

Query OK, O rows affected (0.01 sec)

mysql>insert into users(uname,upwd) values ('userl',‘ pwd1');

Query OK, 1 row affected (0.03 sec)

mysql> select * from users;

| id | uname | upwd |

| 1 | userl | pwd1 |

1 row in set (0.0O sec)

mysql>

Реалізація контролера проекту

Як відзначалось вище, контролер виконує функцію управління ходом обробки запиту від користувача. В прикладі необхідно реалізувати два метода класу контролера: виведення форми уведення ім‘я користувача та його паролю, а також вікна результату аутентифікації. Програмний код контролера показано на лістингу 3.4. Клас контролера містить два відповідних методи: index() та login_result(). Перший метод викликає подання loginдля виведення форми. Другий метод більш складний: відбувається завантаження об‘єкта взаємодії з базою даних та об‘єкта моделі usermodel. Після цього викликається у об‘єкті моделі метод login, який порівнює передані у якості параметрів дані про користувача з вмістом бази даних. Якщо порівняння виконано успішно, формується масив $dataдля передачі у подання та викликається обробка подання afterloginOK. Інакше – у масив $dataзаписується поточний час і ім‘я користувача.

Лістинг 3.3 - Приклад коду контролера User

<? php if (!defined(•BASEPATH')) exit('No direct script access allowed’)

class User extends CI_Controller {

function__construct()

{

parent:: construct();

}

function index()

{

$this->load->view('login');

}

function login_result()

{

$this->load->database();

$this->load->model('usernodel');

if ($this->usernodel->login($this->input->post("name"), $this->input->post("pwd")))

{

$data[’unane']=$this->input->post("nane");

$this->load->view('afterloginOK',$data);

}

else

{

$data['unane']=$this->input->post("nane"); $data['dt']=date('H:i:s');

$this->load->view ('afterloginBAD',$data);

}

}

}

Створення моделі проекту

Моделі традиційно відповідають за взаємодію із базою даних, тому відповідний клас прикладу містить функцію порівняння даних про користувача із вмістом бази даних. Слід зауважити, що CodeIgniter виконує під‘єднання автоматично під час завантаження об‘єкта database, тому код класу моделі містить лише команди доступу до таблиць бази даних (див. лістингу 3.4).

Лістинг 3.4 - Приклад коду реалізації класу моделі проекта

<?php

class Usernodel extends CI_Model {

function__construct()

{

// Call the Model constructor parent::construct();

}

function login($unane, $upud)

{

$sql - "SELECT count(*) cnt FROM users WHERE unane - ? AND upwd - ? ";

$q - $this->db->query($sql, array($unane, $upud));

$row - $q->row();

return ($row->cnt > 0);

}

}

Зазначимо, що оскільки CodeIgniter є об‘єктно-орієнтованою бібліотекою, то результати, що повертаються з бази даних, мають вигляд об‘єктів класу запиту (у прикладі: $row->cnt), де члени класу відповідають полям, визначеним у запиті select.

Створення подання даних

Проект містить 3 форми: уведення даних про користувача, успішної та неуспішної аутентифікації користувача. Код відповідних файлів містить HTML-шаблон та фрагменту PHP. Вміст відповідних файлів наведено на рисунках 3.2-3.4.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<titlе>АутентиФікація</titlе>

<style>

*{font-family:Arial}

p{nargin:5px 0 0 0}

</style>

</head>

<body>

<h3>АутентиФікація</h3>

<forn action="/index.php/user/login_result" method="post">

<p> Ім'я: </p><p> <input type="text" name="name" value=""> </p>

<p> Пароль:</p><p> <input type="password" name="pud" value=""> </p>

<p><input type="submit" value="Перевірити"/>

</form>

</body>

</html>

Рисунок 3.2 - HTML-шаблон та візуальна форма сторінки уведення даних про користувача

<!DOCTVPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<titlе> </titlе>

<style>

*{font-family: Arial}

p{margin:5px 0 0 0}

</style>

</head>

<body>

<h3>АутентиФікація успішна</h3>

<p> Користувач: <?=$uname?> </p>

</body>

</html>

Рисунок 3.3 - HTML-шаблон та візуальна форма сторінки успішної аутентифікації (файл afterloginOK.php)

На рисунку 3.3 міститься фрагмент мовою PHP <?=$uname?>, яка вказує, що необхідно вставити значення змінної $uname, яка була передана з контролера ($data[„uname‟]).

<!DOCTVPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<titlе> </titlе>

<style>

*{font-family: Arial}

p{margin:5px 0 0 0}

</style>

</head>

<body>

<h3>АутентиФікацію не виконано</h3>

<р>Користувач: <?=$uname?> </р>

<р>Дата/час спроби: <?=$dt?> </р>

</body>

</html>

Рисунок 3.4 - HTML-шаблон та візуальна форма сторінки неуспішної аутентифікації (файл afterloginBAD.php)

Аналогічно файлу afterloginOK.phpна рисунку 3.8 проілюстровано HTML-шаблон із фрагментами PHP виведення змінних з іменем користувача та поточного часу, значення яких встановлено у контролері додатку.

3.3 Приклад використання бібліотеки CodeIgniter для обміну даними засобами Ajax

Серед застосувань бібліотеки CodeIgniter найбільш поширеним є динамічне завантаження інформації у елементи сторінки HTML. Як приклад розглянемо задачу виведення підказки в залежності від набраного користувачем тексту в поле форми (рисунок 3.5). Для реалізації даної задачі необхідно створити три файли і розмістити їх на сервері:

1. HTML-сторінка (hint.html).

2. Програма мовою Javascript із використанням CodeIgniter (hint.js).

3. Текстовий файл, який містить можливі підказки (hint.txt).

Рисунок 3.5. Результат роботи асинхронного завантаження даних у HTML-сторінку

HTML-сторінка містить код, який задає структуру документа (на лістинг 3.5):

Лістинг 3.5 - Приклад коду HTML-сторінки

<C!DOCTVPE html>

<html>

<head>

<script type^'text/jauascript" src="jquery;.js"></script>

<script type="text/jauascript" src="hint.js"></script>

<meta charset=utf-8 />

<title> ПрикладJquery Ajax</title>

<style type="text/css">

#hint {border: 1px solid black; margin:0}

#hint>diu:houer {background: ttccc}

#hint {display:none; margin-left:4px>

</style>

</head>

<body>

<form>

<diu>Mido :</diu>

<input type^'text" autoconplete="off" id="city"/>

<diu id="hint"></diu>

</form>

</body>

</html>

З лістинга 3.5 видно, що для виконання задачі включено підтримку бібліотеки CodeIgniter, а також зовнішній файл hint.js, який здійснює операції уведення-виведення. Крім того, задаються мінімально необхідні налаштування стилів (тег <style>), а також власне форма HTML із елементом city – текстовим полем та контейнером divз id=”hint”для виведення підказки.

Код програмного файлу hint.jsнаведено на (лістингу 3.6). Особливостями роботи даної програми є використання засобів CodeIgniter для завантаження списку даних (назв міст) з сервера в асинхронному режимі (.get()).

Лістинг 3.5 - Приклад коду програми мовою Javascript

// ініціалізація поля уведення з id="city"

$().ready( function()

{

$<"itcity").keyup(show_hint).click(cl);

}

);

// сховати та очистити підказку

function cl(euent)

{

$("#hint").hide();

$(^"#hint").empty();

}

// показати підказку

function show_hint(euent)

{

// очистити застарілі підказки

cl(null)

// s - активний елемент зі списку підказок

s = euent.target

if ($(s).ual()=="") return;

// отримати список підказок, Math.random() - захист від кешування $.get ("hint .txt?^,a+Math.random(), function (data) {

if (data==^,,,,) return

var a = data.split('\n')

for (uar і in a) {

// якщо підказка підходить, додати її в список

if (а[і].indexOf($("#city").ual())>-1)

$("hint").append ("<diu>"+a[і]+a"</diu>")

}

// підготувати оброблювач onclick для кожної підказки всередені контейнера

$("#hint>diu").click(function(event){ $("#city").ual( $(euent.target).text());cl(null)})

// змінити стил підказки

$("#hint>diu").сss({"font-weight":"bold"})

// якщо є підказки, показати їх

if($("#hint>div").length>0)

$("#hint").width($("#city").width()).show();

}

}

Функція .ready()виконується в момент завантаження сторінки, функція cl()викликається, коли необхідно приховати та очистити підказку (наприклад, при виборі зі списку), а функція show_hint()виконується при натисканні користувачем клавіші клавіатури. Крім того, використовуються засоби пошуку елементів HTML із використанням синтаксису мови CSS, зокрема #hint>divозначає «знайти усі елементи div всередині елемента з id=hint.

Для прикладу файл hint.txt, який містить підказки має наступний вигляд (риcунок 3.6):

Київ

Полтава

Одеса

Львів

Луганськ

Рисунок 3.6 - Вміст файлу hint.txt, який містить можливі підказки

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

ПРОЕКТНА ЧАСТИНА