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

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

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

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

Головна мета(генеральна мета).

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

Підцілі першого рівня.

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

- Вибір середовища програмування;

- Авторизація та реєстрація користувачів у системі;

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

- Обмін повідомленнями;

- Кросбраузерність.

Підцілі другого рівня.

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

- Побудова сесії підтримки користувача;

- Збереження сеансу користувача;

- Статуси користувачів;

- Статуси та прихід повідомлень;

- Розлогінення користувачів;

- Організація діалогів на основі Ajax;

- Використання універсального фреймворка для кросбраузерності java коду.

Підцілі третього рівня

- Захист профільних даних користувача;

- Автоматичне оновлення індикаторів повідомлень. (впровадження Ajax);

- Автоматичне оновлення індикаторів Користувачів. (впровадження Ajax);

- Створення кімнати спілкування для користувача;

- Використання фреймворка jquery.(Кросплатформений);

- Використання js.

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

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

Малюнок 3.1. Діаграма цілей системного аналізу

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

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

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

- Інноваційний підхід

- Простота програмного коду

- Кросбраузерність додатку.

- Створення зручного інтерфейсу користувача

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

Інноваційний підхід.

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

Простота програмного коду.

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

Кросбраузерність додатку.

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

Попросту кажучи, таку характеристику дають сайтам, дизайн яких однаковий як в Internet Explorer, так і в Google Chrome. Відображення сайту при цьому може відрізнятися лише дрібними деталями (наприклад закругленими куточками, рівнем тіні, градієнтної або суцільною заливкою), але не кольоровою гамою, розташуванням елементів, а також, що найважливіше у визначенні даного поняття, структурою сайту, адже особливо багато проблем виникає з “блочною” версткою. Часто виникає багато проблем з версіями Internet Explorer нижче 10, тому багато розробників веб-сайтів не турбуються про кросбраузерність, а ставлять сторінку-загрузку, тобто користувач Internet Explorer може бачити лише одну сторінку, на якій йому рекомендується змінити браузер, без можливості перегляду контенту.

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

Малюнок 3.2 Діаграма дерева завдань.

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

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

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

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

· систему, в рамках якої можна вплинути на проблему для її вирішення;

· зовнішнє середовище, в якому існують та з яким взаємодіють ці дві системи.

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

Надійність системи.

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

Захищеність.

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

Швидкість опрацювання.

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

Середовище роботи.

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

Інноваційний підхід.

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

Користувацький інтерфейс.

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

Аналіз альтернативних шляхів вирішення завдання.

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

Використання альтернативних технологій.

Програмну реалізацію веб додатку було вирішено розробити трьома компонентами, а саме:

-PHP;

-JavaScript;

-AJAX.

Використання мови програмування php було зумовлене простотою та зручністю для програміста що дало можливість оцінити її як основний варіант для програмної розробки. Альтернативним шляхом вирішення може слугувати мова програмування Perl. Використовується як мова загального призначення для створення як веб додатків так і програмного забезпечення різного рівня складності. Perl запозичує можливості з багатьох інших мов програмування, як то C, shell scripting, AWK та sed. Мова надає потужні можливості для обробки тексту без довільних обмежень на довжину даних багатьох сучасних інструментів Unix, полегшуючи процес маніпуляції текстових файлів. Використовується для програмування графіки, системного адміністрування, у мережному програмуванні, у написанні програмного забезпечення, яке взаємодіє з базами даних, у програмуванні CGI для веб.

Отже доцільним альтернативним рішення програмного рівня буде використання мови perl що підтримує усі потрібні можливості для побудови веб додатку.

Для створення динаміки інтерфейсу користувача було прийнято рішення використання мови сценаріїв, що виконується на клієнтській машині, а саме JavaScript. Альтернативним рішенням щодо використання JavaScript буде Rhino. Rhino - рушій JavaScript з відкритим сирцевим кодом. Він написаний повністю на Java та підтримується Mozilla Foundation. Mozilla Foundation також підтримує іншу реалізацію рушія JavaScript, написану на C SpiderMonkey.

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

Rhino може використовуватися як зневаджувач при використанні Rhino Shell. Він також може використовуватися в застосунках при вбудовуванні Rhino.

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

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

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

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

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

Щодо використання альтернативної заміни Ajax тут можливо спроектувати використання концепції несинхронної обробки даних. Тобто по суті без фонового режиму роботи веб додатку. Ajax сам по собі існує як суміжність технології тому окремої заміни його в націоналі не існує. Для імітування принципу Ajax можливе створення динамічного підвантаження коду JavaScript в тег <SCRIPT> з використанням DOM, що здійснюється із використанням формату JSON).[14]

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

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

· phpBB Simple Chat v2.1

· Universal Ajax chat

· SmZchat vioo

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

Отже враховуючи проведені всі вище системні аналізи та проектні дослідження можемо побудувати відобразити концептуальну модель розв'язку завдання. Дерево проблем у нашому випадку буде складатись із трьох гілок,а саме:

· дерево цілей.

· дерево завдань.

· дерево альтернативних рішень.

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

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

Технології програмування додатку.

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

Алгоритм роботи додатку.

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

Використання системи збереження даних.

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

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

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

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

Концептуальний алгоритм роботи веб додатку.

Малюнок 4.1 Концептуальний алгоритм роботи веб додатку

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

Даний алгоритм роботи є класичним при створені веб додатків такого типу.

Концептуальні особливості Ajax.

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

· Використання технології динамічного звернення до веб сервера на “льоту” без перевантаження всіє веб сторінки, наприклад :

· З використання XMLHttpRequest (основний об'єкт);

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

· через динамічне створення тегу <script>;

· Через динамічне створення тегу <img>, як це реалізовано Google analytics.

· Використання DHTML для динамічного методу оновлення веб сторінки.

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

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

Структура інтерфейсу веб сторінок нашого додатку буде побудована за принципом об'єктної моделі документа DOM. Все це створюється для того, аби надати можливість комп'ютерній програмі доступу та динамічної модифікації структури, змісту та оформлення документа. Тобто структура нашої веб сторінки буде представлена у вигляді дерева DOM, де кожний елемент представляє собою окремий блок який може динамічно оновлюватись та змінювати свою структуру. Це досягається мовою гіпертекстової розмітки HTML а також каскадними таблицями стилів CSS. В єдності Ajax та Document Object Model, створюють можливість динамічного методу оновлення контенту веб сторінок нашого веб додатку.

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

Робота веб додатку на основі моделі Аjax буде складатись із таких частин:

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

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

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

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

Малюнок 4.2. Робота додатку з використанням Ajax.

Отже, як бачимо всі запити користувача спершу опрацьовуються через JavaScript обробник а потім уже надсилаються методом http у подальше опрацювання. Дані приходять та оновлюються у моделі DOM, що дає можливість бачити прихід інформації лише у тbх частинах веб сайту де це потрібно. Запит від користувачів проходить на веб сервер безпосередньо через Ajax обробник, та далі передаються за сценарієм на відповідний порт веб сервера. Потрібно зауважити що DOM модель повністю спроектована на html розмітці та css стилях.

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

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

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

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

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

HTML (англ. HyperText Markup Language - Мова розмітки гіпертексту) - стандартна мова розмітки веб-сторінок в Інтернеті. Більшість веб-сторінок створюються за допомогою мови HTML (або XHTML). Документ HTML оброблюється браузером та відтворюється на екрані у звичному для людини вигляді.[15]

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

Загальна структура веб сторінки.

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

Побудова веб сторінки буде складатись із таких частин:

1. Декларація типу документу (англ. Document type declaration, Doctype), на початку документа, в якій визначається тип документа (DTD).

2. Шапка документу (знаходиться в межах елементу head), в якій записано загальні технічні відомості або додаткова інформація про документ, яка не відтворюється безпосередньо в браузері;

3. Тіло документу (може знаходитися в елементах body або frameset), в якому міститься основна інформація документа.

Отже загальна структура веб сторінки буде складатись із декларації,шапки документу та тіла документа.

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

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

Основні функціональні частини веб додатку :

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

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

· Підтримка сесій користувача;

· Розлогінення користувача;

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

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

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

· Індикатор повідомлень;

· Індикатор стану користувача.

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

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

Для використання технології Ajax у нашому веб додатку використано фреймворк jquery. Jquery слугує хорошою бібліотекою JavaScript яка дає змогу кросплатформено організувати використання технології Ajax.

Технологія Ajax буде використовуватись у таких частинах роботи веб додатку:

- Індикатор повідомлень;

- Індикатор користувача;

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

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

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

Будуть використовуватись синхронні запити до веб сервера і у відповідь буде оновлюватись контент веб сторінки у автономному режимі без перевантаження веб сторінки. Індикатор повідомлень буде автоматично оновлюватись у поєднанні використання JavaScript та jquery, тобто будуть робитися проміжкові запити до сервера за наявністю нових даних щодо статусу користувача у системі. Статус користувача буде on-line або off-line. Тобто користувач що зареєструвався або авторизувався у системі має статус on-line, а користувач, який не зареєструвався або не авторизувався у системі має статус off-line. Індикатор повідомлень є числове значення кількості приходу нових повідомлень для користувача що є у системі. Видалення, редагування та відправка повідомлень відбувається у синхронному режим роботи користувача та веб додатку, тобто користувач може видаляти повідомлення і в той же час буде прихід нового повідомлення без перевантаження веб сторінки. Всі ці запити будуть безпосередньо звертатись до бази даних за даними які розміщені у таблицях, пізніше із бази даних вони будуть оновлюватись вже на контенті веб сторінки.

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

Для наглядної роботи функціонування веб додатку розглянемо нотацію uml діаграми сценаріїв користування. Для наглядності роботи системи відобразимо відношення прецедентів та акторів що будуть конфігурувати на цьому етапі концептуальної моделі. Малюнок 4.3 нижче показує спрощену модель роботи веб додатку.[17]

Малюнок 4.3 Спрощена модель роботи додатку на основі діаграми uml.

Висновок

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

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

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

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

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

Для функціонування веб додатку потрібен повноцінний веб сервер. Веб-сервер (англ. Web Server) - це сервер, що приймає HTTP-запити від клієнтів, зазвичай веб-браузерів, видає їм HTTP-відповіді, зазвичай разом з HTML-сторінкою, зображенням, файлом, медіа-потоком або іншими даними. Веб-сервер - основа Всесвітньої павутини.[18] Веб-сервером називають як програмне забезпечення, що виконує функції веб-сервера, так і комп'ютер, на якому це програмне забезпечення працює. Веб-сервер містить в собі встановлене програмне забезпечення яке відповідає за роботу як протоколів з'єднання так і самого функціонування веб додатку. Наш веб додаток буде функціонувати безпосередньо лише у середовищі веб сервера. Комп'ютер сервер повинен містити в собі безліч налаштувань та підключених програмних засобів що забезпечують роботу веб сайтів. Оскільки наш веб додаток призначений для роботи у мережі Інтернет, тому серверні програми будуть вимагати чималих апаратних ресурсів.

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

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

Для оперування роботою веб сервера,тобто комп'ютера віддаленого доступу, потрібний веб сервер. Найпоширенішим веб сервером сьогодення є Apache. Apache - відкритий веб-сервер Інтернет для UNIX-подібних, Microsoft Windows, Novell NetWare та інших операційних систем. Apache передусім використовується для передачі через HTTP статичних та динамічних веб-сторінок у всесвітній павутині. Багато веб-застосунків спроектовано, зважаючи на середовище і можливості, які надає цей веб-сервер. У нашому випадку буде використовуватись веб сервер apache версії 2.2.14.

Інтерпретатор мови програмування є обов'язковою складовою практично будь якого потужного та сучасного веб сервера. У нашому випадку для програмування веб додатку використовувалась мова програмування php версії 5.3.27. Тому для інтерпретації коду цієї мови програмування веб сервер повинен містити підключений та налаштований php.

Робота веб додатку неможлива без використання бази даних. Щоб мати можливість збереження даних та їх оперування потрібно щоб веб сервер мав можливість підтримки сервера бази даних. Найпоширенішим рішення щодо використання веб бази даних є MySql веб сервер бази даних. У нашому випадку буде використано MySql сервер версії 5.2.9.

Також функціонування веб сервера залежить від використання операційної серверної системи. Найчастішим випадком є операційна система сімейства unix це ubuntu або freebsd. У нашому випадку я обрав веб сервер що керується операційною системою freebsd версії 9.

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

1. Операційна система freebsd версії 9.

2. Веб-сервер apache версії 2.2.14

3. PHP інтерпретатор версії 5.3.27

4. Веб-сервер баз даних MySql версії 5.2.9

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

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

Для оптимальної роботи веб-додатку потрібна висока пропускна можливість каналу передачі даних веб сервера, тобто щоб швидкість завантаження веб сайту із сервера була досить високою. Це є ключовою умовою при формуванні апаратних характеристик та рішень. У нашому веб додаток не в'являє собою над потужного сервісу що оперує великими обсягами інформації, тому швидкодія роботи додатку не вимагає великих обсягів апаратних засобів. Обмін даними між користувачами вимагає в першу чергу синхронізації роботи веб бази даних. Обираючи веб сервер згідно оцінки швидкодії веб додатку потрібно спиратись на пропускну спроможність каналу передачі даних веб сервера. За допомогою сервісу Ping and Traceroute можна перевірити швидкодію веб сервера. Цей сервіс дозволяє відправити ping та traceroute запити до довільного сервера для оцінки його швидкодії. Можливо визначити швидкість завантаження веб сторінки будь якої складності. У нашому випадку веб сторінка не має безліч мультимедійного контенту та використання потоків відео файлів, тому швидкодія роботи веб додатку буде оптимальною при невеликих апаратних та технічних характеристиках веб сервера. Завантаження веб сторінок додатку буде залежати від реакції відповіді сервера на запити користувача. Навантаженість на сервер буде в прямому відображатись на роботі веб додатку, тобто чим більше користувачів буде адресувати запити до веб сервера на якому розміщений веб додаток тим більша можливість зменшення швидкодії. Це зумовлено вже людським фактором, тобто веб сервер може бути розрахований на одночасну роботу із 20000 тисячами користувачів а у той час коли їх буде набагато більше веб сервер не буде встигати оброблювати всі запити і далі швидкодія зменшується. Все це залежить також від апаратних характеристик веб сервера, тобто оправної пам'яті, процесора, об'єму зовнішнього накопичувача даних. Це все є ключовими питання при вирішенні оптимальних технічних характеристик веб сервера.

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

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

Невідмовність системи.

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

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

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

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

Швидкість передачі даних.

Сервер повинен підтримувати скоріть передачі даних 1000 мб/с. Всі сучасні веб сервери слугують цілому стандарту. Пропускна здатність трафіку визначає можливість навантаження роботи нашого веб додатку.

Об'єм оперативної пам'яті (ОЗП).

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

Процесор.

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

Жорсткий диск.

Жорсткий диск являє собою контейнер збереження всіх даних які потрібні для функціонування роботи веб сервера. Веб-сервери зараз оснащуються RAID масивами. RAID (англ. redundant array of independent/inexpensive disks) надлишковий масив незалежних/недорогих дисків для комп'ютера. Дисковий масив - це набір дискових пристроїв, що працюють разом, щоб підвищити швидкість і надійність системи вводу/виводу. Цим набором пристроїв керує спеціальний RAID-контролер (контролер масиву), який забезпечує функції розміщення даних по масиву; а для решти всієї системи дозволяє представляти весь масив як один логічний пристрій вводу/виводу. За рахунок паралельного виконання операцій читання і запису на кількох дисках, масив забезпечує підвищену швидкість обмінів в порівнянні з одним великим диском.

Для функціонування роботи веб додатку достатньо буде 50 мегабайт дискового простору. Це стосовно роботи додатку на звичайній основі без інтеграції його у веб сайт чи інший ресурс. Але для роботи веб додатку на сучасних веб серверах рекомендується обрати сучасні найшвидкісніші накопичувачі даних.

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

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

· Процесор - Intel Xeon Quad-Core E3-1225 v2 (3.2 ГГц);

· Об'єм оперативної пам'яті - 4 ГБ;

· Тип оперативної пам'яті - DDR3 ECC 1600 МГц;

· Жорсткий диск - 2 х 500 ГБ SATAII RaidEdititon;

· Материнська плата - SuperMicro X7DAE (RTL) Dual LGA771< i5000X> ;PCI-E+2xGbL 3PCI-X SATA RAID E-ATX 8DDR-II FBDIMM< PC2-5300>;

· Блок живлення - Seasonic SS-300TFX 300W.

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

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

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

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

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

Розглянемо взаєморозміщення та певний взаємозв'язок складових частин цілого проекту. Як було наведено раніше структура роботи веб-додатку складається із таких частин:

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

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

· Підтримка сесій користувача;

· Розлогінення користувача;

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

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

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

· Індикатор повідомлень;

· Індикатор стану користувача.

Для вирішення проблеми програмування всіх структурних частин веб додатку потрібно встанови взаємозв'язок між ними. В першу чергу взаємозв'язок відображається між такими складовими часинами:

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

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

2.Підтримка сесії користувача та розлогінення.

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

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

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

4.Індикатор повідомлень та індикатор стану користувачів.

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