Розробка веб-ресурсу з використанням технології асинхронного обміну даних (AJAX)

Размещено на http://www.allbest.ru/

ЗМІСТ

ВСТУП

1. ХАРАКТЕРИСТИКА ОБ'ЄКТУ ПРОЕКТУВАННЯ

1.1 Постановка завдання

1.2 Характеристики предметної області

1.3 Складові частини об'єкту проектування

1.4 Підхід до побудови користувацького інтерфейсу об'єкту проектування

1.5 Оцінка якостей проектного рішення

1.5.1 Переваги технології AJAX

1.5.2 Недоліки технології AJAX

1.6 Опис функціональності об'єкту проектування

1.7 Вибір бази даних

2. ОГЛЯД ЛІТЕРАТУРНИХ ДЖЕРЕЛ

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

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

2.3 Публікації на тему систем спілкування

3. СИСТЕМНИЙ АНАЛІЗ

3.1 Аналіз проблеми

3.2 Побудова дерева цілей

3.3 Побудова дерева завдань

3.4 Обґрунтування та агрегування критеріїв

3.5 Готові альтернативні рішення

3.6 Прийняття рішення системного аналізу

4. КОНЦЕПТУАЛЬНА МОДЕЛЬ

4.1 Модель роботи веб додатку на Ajax

4.2 Використання бази даних

4.3 Використання мови html

4.4 Використання php

4.5 Використання JavaScript

4.6 Побудова діаграми сценаріїв користування (use case діаграма)

Висновок

5. ОБҐРУНТУВАННЯ АПАРАТНИХ РІШЕНЬ

5.1 Формулювання вимог апаратного рішення

5.2 Оцінка програмного забезпечення веб-сервера

5.3 Швидкодія веб-ужитку

5.4 Спосіб використання

5.5 Характеристики апаратних рішень

5.6 Доцільний варіант апаратного забезпечення

6. ДЕТАЛІЗАЦІЯ ТЕХНІЧНОГО РІШЕННЯ

6.1 Структура роботи веб-додатку

6.2 Програмна реалізація веб-додатку

6.2.1 Побудова структури файлів

6.2.2 Структура таблиць бази даних

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

6.2.4 Програмування головного виконавчого файлу

6.2.5 Програмування авторизації користувачів

6.2.6 Програмування реєстрації користувачів

6.2.7 Програмування профільної частини користувача

6.3 Оцінка працездатності

7. ЕКОНОМІЧНА ЧАСТИНА

7.1 Розрахунок витрат на розробку та впровадження проектного рішення

7.2 Визначення комплексного показника якості

7.3 Визначення експлуатаційних витрат

7.4 Розрахунок ціни споживання проектного рішення

7.5 Визначення показників економічної ефективності

Висновки по економічній частині

ВИСНОВОК

СПИСОК ВИКОРИСТАНОЇ ЛІТЕРАТУРИ ТА ДЖЕРЕЛ

ДОДАТОК

ВСТУП

На сьогоднішній день сучасне уявлення про Інтернет значно змінилося із тих пір, коли почала широко розвиватись сфера інформаційних технологій. На сьогоднішній день розвиток всесвітньої мережі Інтернет набув великих змін, які у свою чергу дають змогу будувати принципово нові уявлення про Інтернет-технології та їх застосування. На даний час кожний веб-ресурс, який є у мережі Інтернет побудований на інноваційних принципах. Існує багато веб-технологій, які використовуються для побудови та створення веб-ресурсів (сайтів). Інноваційним підходом до створення веб-додатків є технологія асинхронної передачі даних - Ajax. На основі Ajax зараз будуються практично всі Інтернет сайти, мало не в кожному веб-проекті зустрічаються принципи асинхронності передачі даних у зв'язку з тим, що це вирішує і впливає на розвиток потужних ресурсів та їх застосування. Ajax перекладається як асинхронний JavaScript and XML. Це по суті є взаємодія двох веб-технологій таких як JavaScript- мова програмування для створення динаміки сайтів та xml - розширений язик розмітки документів. Суть цього полягає в тому, що користувач продовжує роботу із веб-ресурсом надсилаючи дані і запити на веб сервер без перевантаження сторінки у вікні браузера, в той час як при класичній моделі обміну даних без використання AJAX технології відбувається перевантаження веб сторінки при відправці чи оновленні даних отриманих у результаті взаємодії веб сервера та клієнта.

Використовуючи поєднання JavaScript та xml, можна створювати сучасні додатки, які змінюють уявлення про класичну модель поведінки веб ресурсу.

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

У даному дипломному проекті докладно розглянуто та продемонстровано технологію AJAX на основі інформаційної системи обміну даних. Було поставлене завдання створити веб-ресурс, який надає можливість обміну повідомлення між користувачами, які зареєстровані або аутентифіковані у системі, завдяки технології асинхронного обміну даних (AJAX), що дозволить відправляти, редагувати та видаляти повідомлення у асинхронному вигляді без перевантаження сторінки. Це дозволить використати інноваційний спосіб побудови веб-додатків у моєму дипломному проекті та створити сучасний програмний продукт, систему обміну повідомленнями між користувачами.

1. ХАРАКТЕРИСТИКА ОБ'ЄКТУ ПРОЕКТУВАННЯ

1.1 Постановка завдання

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

1.2 Характеристики предметної області

Предметною областю проектування є сукупність сучасних технологій проектування веб сайтів,які дозволяють будувати функціональні та новітні ресурси, при цьому використовуючи дуже прості у використанні та зручні з точки зору програміста технології. Ключовою технологією яка дуже поширено використовується при створенні серйозних проектів є технологія асинхронної передачі даних у веб-системах - Ajax. Цей підхід використали у сучасних Інтернет сервісах, як Google Suggest - підказки в рядку пошукового запиту. Яндекс повторив досвід. Google Maps - інтерактивні карти. А особливо Gmail - інтерактивний інтерфейс для пошти. Facebook, VKontakte і т.п. активно використовують Ajax. Отже це свідчить про те що AJAX - це актуальна технологія на сьогоднішній день, що все більше широко використовується. Якщо такі відомі компанії, як Google, Facebook, використовують в своїх проектах технології AJAX то це свідчить про те, що передовою умовою розвитку веб ресурсів буде саме використання технології асинхронної передачі даних, тобто AJAX. Візьмемо до уваги той факт, що на сьогоднішній день важко відшукати який-небудь веб-ресурс без використання асинхронних запитів. До появи технології AJAX, веб сайти були досить динамічними та потужними, але користувач зміг відправляти дані на веб сервер лише із перевантаженням веб сторінки на якій він знаходився, це викликало певні незручності у користуванні тому технологія AJAX дала змогу відсилати дані без перевантаження сторінки і користувач далі продовжував роботу не зважаючи на відправлені запити.

1.3 Складові частини об'єкту проектування

Об'єкт проектування в кінцевому результаті це веб сайт який дає змогу користувачам обмінюватись інформацією тобто повідомленнями як на прикладі соціальної мережі.

Структурою нашого об'єкту будемо розуміти сукупністю певних частин, що складають цілісність системи. Об'єктом нашого проектування є інформаційна система обміну даних, отже окремі блоки проектованої системи є програмованими частинами(модулями) що взаємодіють один з одним спільно та синхронно. Загальну структуру нашого об'єкту проектування розділено на такі частини: автентифікація, реєстрація, обмін повідомленнями, та профільна частина користувача. Автентифікація та реєстрація слугують механізмом доступу користувача до контенту та його особистого профілю, обмін повідомленнями та профільна частина користувача відповідають за основний функціонал об'єкта проектування - оперування інформацією користувача. Користувач має можливість відправляти, редагувати видаляти повідомлення у своїй профільній частині.

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

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

Обмін даними представляє собою головну складову частину об'єкту проектування. В цьому полягає суть правильної роботи всієї системи. Відбувається функціональна частина обміну даними у системі, тобто головні транзакції інформаційних потоків відбуваються саме у частині обміну даних. Для функціонування та правильної роботи системи потрібна злагоджена взаємодія всіх її складових частин. Обмін даними представляє в собі структуру яка складається із декількох внутрішніх складових таких, як відправка інформації, видалення інформації,редагування інформації. Ця частина проектування включає використання технології AJAX. Робота цієї частини веб сайту буде виконуватись у фоновому режимі у той час користувач буде продовжувати роботу із веб сайтом коли дані будуть передаватись на веб сервер без перевантаження сторінки з якою працює користувач у системі.

Відправка інформації.

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

Видалення інформації

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

Редагування інформації

Будь яке повідомлення яке користувач надсилає іншому користувачеві можна відредагувати. Це означає що старе повідомлення яке було відправлено раніше можливо змінити та відправити нову версію повідомлення.

Профільна частина користувача відповідає за відображення стану активності користувачів, ідентифікатор стану повідомлення. Основні функції цієї частина це стеження за приходом нових повідомлень для користувача та статуси активності користувачів на веб сайті. Використовуючи технологію Аjax ця частина проектування на веб сайті буде працювати з підтримкою технології Аjax. Користувач зможе бачити прихід нових повідомлень та користувачів які з'явились на сайті у фоновому режимі тобто без перевантаження веб сторінки. Проектна структура профільної частини користувача розділена на такі 2 розділи: ідентифікатор повідомлення та статус користувачів.

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

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

1.4 Підхід до побудови користувацького інтерфейсу об'єкту проектування

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

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

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

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

1.5 Оцінка якостей проектного рішення

1.5.1 Переваги технології AJAX

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

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

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

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

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

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

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

· Зменшення навантаження на веб сервер.

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

1.5.2 Недоліки технології AJAX

· Відсутність інтеграції із стандартними користувацькими інструментами браузера;

· Кнопка переходу між сторінками “Назад”;

· Не буде працювати кнопка “Назад” у браузері. Динамічні сторінки не реєструються браузером в історії перегляду сторінок, тому не працює кнопка «Назад». Але більшість програмістів створюють спеціальні скрипти для усунення недоліку;

· Закладки.

Оскільки динамічно генерує сторінки Javascript а не сервер тому адреса сторінки вирізається з циклу і вже ніяк не можу бути використана у майбутньому. Тому для вирішення цієї проблеми в AJAX широко використовують конструктивні посилання(prermalinks) таких випадках. Ця проблема використовується за рахунок міток # в URL.

· Проблема індексації пошуковими системами;

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

· Ускладнення проекту;

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

· Проблеми відвідуваності сайтів;

Багато веб серверів ведуть облік відвідуваності нових сторінок веб сайту. Але коли ці сторінки генеруються AJAX запитами то ця статистика стає неактуальною на сьогоднішній день.

· Безліч браузерів не є крос сумісними із JavaScript тому деякі функції можуть не працювати коректно а також це впливає на формування сторінко через запит JavaScript.

1.6 Опис функціональності об'єкту проектування

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

Реєстрація користувачів.

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

Для реєстрації користувача в системі потрібно заповнити поля вводу, тобто поле де потрібно вказати ім'я користувача та поле де потрібно вказати пароль.

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

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

Авторизація користувачів.

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

Відправка повідомлень.

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

Редагування повідомлень.

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

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

1.7 Вибір бази даних

Збереження даних “інформаційної системи обміну даних на основі Ajax технології будуть зберігатись у базі даних. База даних буде зручним та простим способом для оперування даними. Головне завдання на цьому етапі проектування - створити механізм гарантованого збереження значних обсягів інформації (так звані записи даних) та надання доступу до неї користувачеві або ж прикладній програмі. Таким чином, БД складається з двох частин: збереженої інформації та системи керування нею. Для збереження нам всіх даних буде використовуватись Структурована БД, тобто структурований опис типу фактів за допомогою схеми даних, більш відомої як модель даних.

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

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

Таблиця register

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

Таблиця message

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

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

Загальний принцип роботи системи із базою даних виглядає наступним чином:

· Звернення до таблиці user;

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

· Звернення до таблиці message;

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

· Синхронізація запитів бази даних.

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

2. ОГЛЯД ЛІТЕРАТУРНИХ ДЖЕРЕЛ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Модель AJAX:

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

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

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

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

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

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

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

· eyeOS - online - робочий стіл на Ajax;[7]

· BIM - online-аггрегатор новин на Ajax;[8]

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

Google Suggest.

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

Protopage.

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

eyeOS.

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.3 Публікації на тему систем спілкування

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

phpBB Simple Chat v2.1

Аналогом проектування за темою мого дипломного проекту є публікація по темі Ajax Simple Chat v2.1. Розробка російських програмістів що дозволяє обмінюватись повідомлення в мережі Інтернет та використовувати інтеграцію у свій веб ресурс. Простий чат Підходить як для phpBB, так і для phpBBex. Даний чат поширений з відкритим кодом, тому є можливість його редагувати або доповнювати. Широко використовується у форумах та сайтах де є велика кількість клієнтів і потрібно організувати принцип обміну повідомленнями між зареєстрованими користувачами. Чат повністю спроектований на основі технології Ajax.[10]

Можливості phpBB Simple Chat v2.1

· Повністю із підтримкою Ajax технології ;

· Приватний повідомлення;

· Звукове сповіщення;

· Вибір кольору повідомлень;

· Підтримка смайликів;

· Автовизначення посилань;

· Автоблокування флуду,

Порівнюючи його структуру роботи та функціональність можу зробити висновки, що алгоритм роботи є типовий як для веб проектів такого типу. Розробка використовує подібний алгоритм роботи системи, тупу - чат, яка проектувалась подібною у темі мого дипломного проектування. Використання phpBB Simple Chat v2.1 не є ліцензійним та дозволяється використання відкритого коду як для своїх цілей так і для модифікації продукту.

Алгоритм роботи phpBB Simple Chat v2.1.

1.Аутенфікація у системі користувача.;

2. Вхід у профільну частину користувача;

3 Перевірка наявності флуду повідомлення;

3.1 Система оповіщення повідомлень ;

3.2 Відправка повідомлень;

3.3 Видалення повідомлень;

3.4 Редагування повідомлень;

4.Розлогування у системі(підтримка сесії якщо чат інтегрований у сайт).

Алгоритм роботи phpBB Simple Chat системи дуже простий та схожий із алгоритмом роботи додатку що проектується в даному дипломному проекті. Є можливість редагування повідомлень та видалення,відправка здійснюється повністю у автономному режимі без перевантаження веб сторінки. Суттєвою різницею буде те що прихід нових повідомлень інформується через звукове оповіщення, що не підтримується у додатку проектування дипломного проекту. Інтегрувати phpBB Simple Chat у власний сайт дуже просто так само як і використовувати як окремий модуль для форуму чи то для власного сайту. Прогресивною частиною буде те що є можливість адаптації практично під різноманітну веб систему яка створюється чи проектується з використанням Ajax підходу. Головною особливістю phpBB Simple Chat є використання Ajax підходу та фонова відправка даних на сервер.

AjaxChat - чат для joomla.

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

Алгоритм роботи компоненту.

1.Реєстрація, авторизація у системі;

2. Профіль користувача;

2.1.Відправка, видалення,редагування повідомлень;

2.2 Розлогування системи;

2.3 Очистка історії.

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

SmZchat vioo (AJAX).

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

Алгоритм функціонування SmZchat vioo (AJAX)

1.Реєстрація та авторизація користувача;

2.Профільна частина користувача;

3.Кімната спілкування;

3.1 Відправка повідомлень;

3.2. Видалення повідомлень;

3.3 Редагування повідомлень;

4. Розлогінення.

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

Universal Ajax chat.

Універсальний чат для системи управління контентом joomla. Використовується для організації системи спілкування користувачів у сайті, підключається як окремий модуль. Класичний приклад веб додатку що спроектований на php 5 з підтримкою mysql бази даних та повністю з підтримкою Ajax інтерфейсу користувача. Алгоритм роботи нагадує звичайну систему спілкування типу чат із веденням діалогу користувача окремо по кімнатах спілкування.

Алгоритм функціонування Universal Ajax chat

1.Реєстрація та авторизація користувача;

2.Профільна частина користувача;

3.Кімната спілкування;

3.1 Відправка повідомлень;

3.2. Видалення повідомлень;

3.3 Редагування повідомлень;

4. Розлогінення.

Як бачимо існує безліч готовий рішень для вирішення завдання дипломного проектування. Враховуючи всі проектні та компонентні рішення можна зробити висновок про те, що системи обміну інформацією,тобто системи спілкування для веб сайту,використовують спільний інтерфейс користувача та принцип обміну даними. Використовуючи алгоритм роботи Universal Ajax chat можемо побачити,що першочерговою ланкою є авторизація користувачів а після вже йде обмін повідомленнями. Алгоритм роботи звичайної системи обміну повідомленнями для сайту нічим не відрізняється від наведених вище прикладів додатків що дає змогу інтегрувати їх абсолютно під будь який веб сайт чи додаток. Для прикладу Universal Ajax chat являє собою звичайну системі обміну повідомленнями між користувача проте реалізація програмної частини значно відрізняється від SmZchat vioo (AJAX) за рахунок модульного принципу побудови програмного коду. Додаток що проектується у даному дипломному проекті буде мати модульну програмну структуру. Програмна реалізація всіх вище наведених додатків являє собою використання технологій php,JavaScript, xml та mysql останніх версій, це дозволяє адаптувати додаток абсолютно під будь який веб ресурс що проектується де потрібно використання Ajax системи обміну даними.

Отже для нашого проектування інформаційної системи обміну даних буде використано як приклад програмну реалізацію phpBB Simple chat. Алгоритм роботи phpBB Simple chat за своєю структурою нагадує алгоритм роботи додатку який проектується у даному дипломному проекті а також функціональна частина,що відповідає за обмін даними між користувачами, ілюструє готовий результат роботи додатку що проектується. Серед інших особливостей можна виділити простоту інтерфейсу для користувачів та систему авторизації, що для прикладу,у SmZchat vioo (AJAX) та Universal Ajax chat спроектовано досить ускладнено на програмному рівні та алгоритмі роботи. Використовуючи готові рішення додатку Ajax chat - чат для joomla(Ajax chat joomla) я спроектував модель поведінки інтерфейсу користувача що дає змогу на цьому півні проектування висвітлити основні функції при роботі користувачів, які працюватимуть із веб ресурсом.

Основна інформація що стосувалась теми дипломного проектування сфокусована у пошукових системах таких як Google та Wikipedia. Користуючись пошуковими інтерфейсами було знайдено безліч публікацій та матеріалів щодо теми дипломного проектування. Теоретичні основи та спекти теми дипломного проектування були доступні сервісом Wikipedia, що дало змогу розглянути сучасний стан публікацій щодо теми дипломного проектування. Було розглянуто основні визначення та джерела інформації що постійно оновлюються останнім часом. Існує безліч готових додатків та рішень, реалізацій проектів що використовують технологію Ajax в основі систем обміну інформацією. Використовуючи готові рішення для вирішення завдання дипломного проектування, як за приклад було взято алгоритм роботи phpBB Simple chat. Цей варіант є чудовим прикладом,який демонструє роботу системи обміну інформацією користувачів веб сайту. Основна частина полягає у тому що потрібно організувати систему обміну інформації, тобто створити веб додаток типу “чат” як для прикладу у соціальних мережах. Орієнтація саме на такі готові рішення дала змогу оцінити phpBB Simple chat як чудовий аналог для проектування сласного веб додатку. Готові рішення phpBB Simple chat можна побачити у мережі Інтернет, де після початкової реєстрації можемо переходити до тестування чату.

3. СИСТЕМНИЙ АНАЛІЗ

Обґрунтування проблеми вирішення завдання полягає у детальному системному аналізу проблеми. Це дає змогу розробити певний та чіткий алгоритм розв'язку та в свою чергу приводить до правильного моделювання завдання. За допомогою аналізу складаємо послідовність дій з установлення структурних зв'язків між змінними або елементами досліджуваної системи. Для системного аналізу потрібно чітко визначити основну проблему завдання. У нашому випадку потрібно створити аналіз системи обміну інформації у для веб сайту. Потрібно чітко створити алгоритм роботи системи, проаналізувати структуру роботи та виділити основні аспекти розв'язку завдання. Найголовнішою метою цього розділу є аналіз проблеми та побудова дерева проблеми. Після висвітлення матеріалу цього розділу, поєднуємо словесну аргументацію із математичними та структурованими моделями. Вкінці даного розділу буде створено критеріальні, алгоритмічні оцінки роботи системи. В загальному випадку характеризуємо опрацювання цього розділу як дослідження з метою роз'яснення шляхів вирішення проблеми. Єдиної методики системного аналізу у наукових дослідженнях поки що немає.

3.1 Аналіз проблеми

Система обміну інформації в рамках даного дипломного проектування представляється, як веб додаток для обміну інформації між користувачами веб сайту. Система обміну інформації має бути побудована на основі технології Ajax, що створює принципово нову проблему проектування даного розділу. Обмін інформацією має здійснюватись між користувачами Інтернет сайту, тобто мають існувати певні діалоги за допомогою яких буде взаємодія між користувачами веб ресурсу. В результаті реалізується інтерфейс відправки повідомлень в системі, тобто всі повідомлення надсилаються в діалозі користувачів адже це дуже зручно особливо коли повідомлень дуже багато. На цьому етапі проектування система обміну інформації буде представлятися як діалогова система обміну повідомленнями між користувачами, саме діалогова тому що реалізація обміну повідомлень має бути у вигляді діалогів як для прикладу у соціальній мережі “Вконтакте”. Транзакція повідомлень у системі повинна відбуватись миттєво без затримок, тобто безпосередньо після того як користувач надіслав запит на відправку. Всі повідомлення якими оперує користувач повинні зберігатись у системі обміну повідомленнями. Система обміну повідомлення представляє собою веб орієнтовану базу даних. Відповідно це буде основним вибором для збереження всіх повідомлень у системі для кожного користувача конкретно. Повідомлення не повинні одразу видалятись після того як користувач прочитав. Повідомлення стають не актуальними і зберігаються у системі обміну повідомлення. Формулювання проблеми на даному етапі проектування є досить розпливчасте тому кінцевий результат проблеми може суттєво відрізнятись від початкового. Для збереження інформації про всі повідомлення що є у системі обміну база даних реляційного типу підходить найкраще. Основною проблемою цієї частини проектування є використання технології Ajax. Використання технології Ajax дозволяє відправляти запити користувача у так званому “тихому режимі”. При відправці повідомлення із діалогу повинна бути реалізована відправка даних на сервер без перевантаження сторінки що й дозволяє зробити Ajax. Адже без використання Ajax підправка на сервер здійснюється лише коли веб сторінка оновлюється, це дуже поширений випадок при класичній моделі створення веб додатків без використання Ajax підходу. В такому разі всі поля та форми що заповнені втрачаються і це дуже незручний спосіб проектування для нашого прикладу. Ця проблема являє собою ключовий принцип аналізу на даному етапі.

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

Отже як бачимо серед основних проблем проектування є використання технології Ajax та профільної частини користувача. Саме на ці аспекти в подальшому буде опрацьовуватись проектна частина. Можемо створити чітку модель дерева проблем що дасть змогу окремо побачити частини системи проектування в цілому.