1 розробка інтерактивного інтерфейсу Web -додатків засобами бібліотеки Codeigniter та технології Ajax
ЗМІСТ
СПИСОК УМОВНИХ ПОЗНАЧЕНЬ ТА СКОРОЧЕНЬ……………………...4
ВСТУП……………………………………………………………………...............5
АНАЛІТИЧНА ЧАСТИНА
1 Розробка інтерактивного інтерфейсу Web-додатків засобами бібліотеки CodeIgniter та технології Ajax…………………………………………………………7
1.1 Загальнi вiдомостi про Ajax…………………………………………………...7
1.2 Переваги технології Ajax……………………………………………………....8
1.3 Недоліки технології Ajax…………………………………………………….10
1.4 Взаємодія у Web за допомогою Ajax………………………………………..12
1.5 Суть Ajax-підходу…………………………………………………………….14
1.6 Інтернет-проекти на основі AJAX-технології…………………………….16
2 Загальна інформація про програмні бібліотеки підтримки розробки Web-додатків………………………………………………………………………………..19
2.1 Каркас додатків CodeIgniter………………………………………………….20
2.2 Асинхронний обмін даними засобами Ajax………………………………...26
3 Ініціалізація проекту та обробка запиту засобами CodeIgniter……………...28
3.1 Ініціалізація обробки запиту засобами CodeIgniter………………………...28
3.2 Приклад застосування CodeIgniter для задачі аутентифікації користувача……………………………………………………………………………30
3.3 Приклад використання бібліотеки JQuery для обміну даними засобами Ajax…………………………………………………………………………….………35
ПРОЕКТНА ЧАСТИНА
1 Приклад застосування CodeIgniter для задачі аутентифікації користувача
2 Приклад використання бібліотеки JQuery для обміну даними засобами Ajax
ЕКОНОМІЧНА ЧАСТИНА…………………………………………………..…..70
ЧАСТИНА З ОХОРОНИ ПРАЦІ……………………………………………..….71
ВИСНОВКИ……………………………………………………………………….74
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ………………………………………….75
СПИСОК УМОВНИХ ПОЗНАЧЕНЬ ТА СКОРОЧЕНЬ
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-додатків.
АНАЛІТИЧНА ЧАСТИНА
1 РОЗРОБКА ІНТЕРАКТИВНОГО ІНТЕРФЕЙСУ WEB -ДОДАТКІВ ЗАСОБАМИ БІБЛІОТЕКИ CODEIGNITER ТА ТЕХНОЛОГІЇ AJAX
1.1 Загальн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. Користувач заходить на веб-сторінку і натискає на який-небудь її елемент.