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

  • Вид работы:
    Дипломная (ВКР)
  • Предмет:
    Информационное обеспечение, программирование
  • Язык:
    Украинский
    ,
    Формат файла:
    MS Word
    197,45 Кб
  • Опубликовано:
    2014-01-17
Вы можете узнать стоимость помощи в написании студенческой работы.
Помощь в написании работы, которую точно примут!

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

ЗМІСТ

ВСТУП

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

.1 Постановка завдання

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

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

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

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

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

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

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

.7 Вибір бази даних

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

.1 Суть Ajax-підходу

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

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

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

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

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

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

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

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

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

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

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

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

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

.4 Використання php

.5 Використання JavaScript

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

Висновок

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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 Складові частини об’єкту проектування

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

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

Частина автентифікації у нашому проектуванні являється процедура встановлення належності користувачеві інформації в системі пред'явленого ним ідентифікатора <file:///C:\Users\TEMP.WS10K05R804B.000\Desktop\22ідентифікатора%22ідентифікатора>. Ця частина об’єкту проектування відповідає за достовірність наданої інформації користувача, яка є у системі. З позицій інформаційної безпеки <file:///C:\Users\TEMP.WS10K05R804B.000\Desktop\%22інформаційної%20безпеки> автентифікація для нашого об’єкта проектування є частиною процедури <file:///C:\Users\TEMP.WS10K05R804B.000\Desktop\%22процедури> надання доступу для роботи в інформаційній системі <file:///C:\Users\TEMP.WS10K05R804B.000\Desktop\%22інформаційній%20системі>.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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 технології будуть зберігатись у базі даних. База даних буде зручним та простим способом для оперування даними. Головне завдання на цьому етапі проектування - створити механізм гарантованого збереження значних обсягів інформації <#"701969.files/image001.gif">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Попросту кажучи, таку характеристику дають сайтам, дизайн яких однаковий як в Internet Explorer, так і в Google Chrome. Відображення сайту при цьому може відрізнятися лише дрібними деталями (наприклад закругленими куточками, рівнем тіні, градієнтної або суцільною заливкою), але не кольоровою гамою, розташуванням елементів, а також, що найважливіше у визначенні даного поняття, структурою сайту, адже особливо багато проблем виникає з “блочною” версткою <#"701969.files/image002.gif">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Побудова функціоналу роботи системи зосереджена на використанні сучасних версій мов програмування та синхронізації роботи користувача. Для програмування буде використовуватись мова php((англ. <#"701969.files/image003.gif">

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

 

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

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

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

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

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

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

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

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

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

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

Використання цих підходів дозволяє створювати набагато зручніші веб-інтерфейси користувача на тих сторінках сайтів, де необхідна активна взаємодія з користувачем. AJAX - асинхронний, тому користувач може переглядати далі контент сайту, поки сервер все ще обробляє запит. Браузер <#"701969.files/image004.gif">

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

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

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

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

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

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

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

HTML (англ. <#"701969.files/image005.gif">

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

Висновок

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

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

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

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

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

Для функціонування веб додатку потрібен повноцінний веб сервер. Веб-сервер (англ. <#"701969.files/image006.gif">

Малюнок 6.1 Структура файлів веб додатку

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

Уся javascript-програмна реалізація буде зберігатись у папці “javascript”. В цій папці будуть зберігатись файли javascript, які будуть використовуватись для підключення на веб сторінках.

Папка із назвою “jquery” буде містити в собі фреймворки ля роботи з Аjax. Файл add_user.php буде відповідати за реєстрацію нового користувача у системі а також за валідність введених даних користувача при реєстрації. Файл data_vaid.php буде містити в собі запрограмовані функції, які відповідають за приключення о бази даних, авторизацію користувача, реєстрацію, повірки сесії користувача, виводу повідомлень а також збереження повідомлень користувача у базі даних. Для видалення повідомлень користувача буде відповідати програмний код збережений у файлі delete.php. Файл який підключає інші функціональні частини веб-додатку має назву function.php. Запуск роботи веб додатку буде розпочинатись із файлу login.php, який дає можливість користувачеві авторизуватись або зареєструватись у системі. Для розлогінення у системі буде використовуватись файл logout.php, який дозволить кожному користувачеві здійснити вихід із свого профілю. Головна сторінка на якій буде знаходитись користувач під час роботи із веб додатком буде генеруватись файлом member.php, який дає можливість здійснювати обмін повідомлення між користувачами та повірку валідності даних користувача при вході. Файл member.php об'єднує в собі весь головний функціонал про роботі із веб додатком а саме обмін даними між користувачами, статуси повідомлень та користувачів у системі, кімнати спілкування та діалоги. Файл message.php відповідає за відображення всіх повідомлень які є для користувача а також відображає всіх користувачів у системі. Виводить із бази даних всі повідомлення ля користувачів файл message_user.php. За побудову веб сторінки що відображається у веб браузері користувача відповідає файл output.php, він містить готові функції виводу форм реєстрації користувача а також вивід системної інформації веб сторінки. За реєстрацію нового користувача у системі відповідає файл register_new.php, він аж можливість зробити запис про нового користувача у базу даних. Відправка повідомлень виконується програмним файлом send.php. Запис повідомлення користувача у базу даних здійснюється за допомогою файлу send_mes.php. Стилізація веб сторінки збережена у файлі stye1.css.Файли test.php та test_db.php використовуються для тестової повірки підключення до бази даних. Для показу всіх авторизованих або зареєстрованих користувачів веб сайту використовується файл update.php.

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

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

Оскільки у нашій системі будуть мати місце як користувачі так ї їх персональну інформацію доцільно буде спроектувати два масиву для збереження інформації. Назва бази даних буде мати ім'я Exchange. База даних буде мати 2 масиви, тобто таблиці, для збереження інформації,це таблиця message та register. Таблиця message буде відповідати за інформацію всі повідомлення користувачів а таблиця register за профільну частину користувача.

Таблиця 6.1 Структура таблиці message бази даних Mysql.

Назва поля

Тип даних

Розмір

Не пусте

Автоінкремент/ Інше значення

id

int

5

not null

auto_increment

to_mes

Int

5

Not null

-

From_mes

Int

5

Not null

-

text

Varchar

50

Not null

-

Status

int

2

Not null

-

data

Varcahr

50

null

Default null

Delete_to

int

10

Not null

-

Delete_from

int

10

Not null

-

Primary_key(id)

 


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

Поле “id” використовується індексації полів даних, тобто кожне повідомлення буде мати свій унікальний індекс. Цей індекс використовується для ідентифікації повідомлення у базі даних а також для звернення до цього повідомлення за його ідентифікатором. Це поле є унікальне і воно не може повторятись у таблиці. Максимальний розмір цього поля 5 знаків цілого тип, тобто на мові mysql це тип даних int.

Поле ‘to_mes’ відповідає за збереження ідентифікатора користувача який надіслав повідомлення іншому користувачу. Тип даних цього поля ‘int’ яке може містити 5знаків тобто п’ятизначне число. До цього поля звертаються за ідентифікатором користувача який надсилає повідомлення. Це поле не може бути пустим,тобто не може бути ‘null’.

Поле ‘from_mess’ відповідає за збереження ідентифікатора користувача якому адресоване повідомлення іншому користувачу. Тип даних цього поля ‘int’ яке може містити 5знаків тобто п’ятизначне число. До цього поля звертаються за ідентифікатором користувача якому надсилається повідомлення. Це поле не може бути пустим, тобто ‘null’.

Поле ‘text’ буде містити текст самого повідомлення, яке користувач надсилає іншому користувачу. Це поле має тип даних ‘varchar’ також воно не може бути пустим. Максимальний розмір цього поля 50 знаків,тобто повідомлення може складатись із 50-ти символів.

Поле ‘status’ відповідає за статус повідомлення, тобто коли повідомлення було прочитано користувачем воно ставить статус прочитаного 1 а якщо повідомлення не було прочитано то його статус залишається 0. Це поле має тип даних ‘int’ а також не може мати нульового значення,тобто воно є обов’язковим для використання у системі.

Поле ‘data’ відповідає за дату повідомлення яке надсилається. Це поле є обов’язкове його тип даних є ‘varchar’. Поле по замовчуванню може бути пустим, тобто мати значення ‘null’ а також має значення ‘default null’ що означає початкове значення поля заповнюється датою коли було записано повідомлення.

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

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

Структура таблиці register бази даних Mysql.

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

Таблиця 6.2 Структура таблиці register бази даних Mysql.

Назва поля

Тип даних

Розмір

Не пусте

Автоінкремент/ Інше значення

id

int

5

not null

auto_increment

username

varchar

40

Not null

-

pasword

varchar

40

Not null

-

statys

int

5

Not null

-

Primary_key(id)

 

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

Поле ‘username’ слугує для запису імені користувача що реєструється або авторизується у системі. Це поле має тип даних ‘varchar’, тобто стрічковий тип даних із довжиною у 40 символів. Також це моле не може бути пустим.

Поле ‘password’ слугує для збереження паролю користувача у системі. Тип даних ‘varchar’ із довжиною у 40 символів. Поле не може бути пустим.

Для видання статусу користувачеві існує поле ‘statys’. У цьому полі зберігається статус користувача, тобто 1 коли користувач перебуває на веб сайті та 0 коли користувача немає на веб сайті.

База даних буде мати кодування типу ‘utf-8’ яке є міжнародним стандартом який підтримують всі сучасні веб системи. UTF-8 (від англ. <#"701969.files/image007.gif">

Малюнок 6.2 Блок схема роботи авторизації користувача.

Програмний код авторизації користувача.

Авторизація користувача вимагається першочергово після запуску веб додатку. Стартовий файл роботи веб додатку login.php. Авторизація користувача розпочинається із роботи функції login_form(). Ця функція виводить поля які потрібно заповнити користувачеві для входу у його власний профіль. Файл login.php Користувач вводить пароль та логін який він при реєстрації вказував і ця інформація вважається конфіденціальною. Нижче наведений приклад коду функції login_form().

function login_form()

{

?>

<a href='register_new.php'>Не зареєстровані-??</a>

<form action="member.php" method='post'>

<p>Name:</p><input type='text' name='username'>

<p>Password:</p><input type='pasword' name='password'>

<input type='submit' value=’Увійти’ >

</form>

<?}

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

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

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

Алгоритм роботи реєстрації користувача.

1.Ввід особистих даних користувача, тобто логіну та паролю.

.Перевірка валідності даних, тобто перевірка вводу логіна та паролю на присутність.

.Перевірка введених даних на присутність у базі даних(розгалужена гілка).

.Збереження даних користувача у базі даних.

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

Алгоритм роботи користувача продемонстрований на прикладі блок схеми. Нижче на малюнку 6.3 наведена блок схема реєстрації нового користувача у базі даних.

Малюнок 6.3 Блок схема реєстрації нового користувача у базі даних.

Програмний код реєстрації користувача.

Зареєструватись у системі дає можливість функція login_form(). Ця функція виконується при запуску веб додатку. Функція відображає форму авторизації та посилання на реєстрацію користувача:

<a href='register_new.php'>Не зареєстровані-??</a>

Файл register_new.php,на який посилається гіпертекст, дає можливість зареєструватись у системі.

<?_once('function.php');_html_header();

?>

<h1>Реєстрація нового користувача.h1>

<?_registration_form();_html_footer();

?>

Файл register_new.php містить у собі функцію display_registration_form, що відповідає за вивід діалогу реєстрації нового користувача а також стандартний опис структури веб сторінки що був розглянутий у попередньому розділі. Також відбувається підключення головного функціонального файлу веб додатку це function.php. Програмний код функції display_registration_form відсилає всі дані, які користувач заповнив у полях вводу, у файл add_user.php. Програмний код файлу add_user.php продемонстрований у лістингу додатку.

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

function register($name,$password){db_connect();_select_db("user");

$zaput="select * from register where username='$name' " ;

$result=mysql_query($zaput);(mysql_num_rows($result)>0){echo "Таке імя вже існує в базі даних ";exit; }

$zaput="insert into register (username,password,status) values('".$name."','".$password."','0')";

$result=mysql_query($zaput);(!$result){echo"Помилка запису даних";}

}

асинхронний обмін інтернет повідомлення

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

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

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

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

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

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

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

Розлогування.

1. Програмування функціоналу відправки повідомлень.

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

Малюнок 6.4 Блок схема роботи функціоналу відправки повідомлення.

Програмний код функціоналу відправки повідомлень.

Відправка повідомлень здійснюється безпосередньо після реєстрації або авторизації користувача у системі. За обмін повідомлення між користувачами відповідає файл send.php. При відправці повідомлення спрацьовує javacript код у файлі output.js що знаходиться у папці javascript файлової структури веб проекту. Даний код наведений у лістингу додатку.

Відправка повідомлення розпочинається у випадку коли користувач натиснув кнопку “Відправити”, але перед відправкою відбувається повірка поля вводу повідомлення на непусте значення. Якщо повідомлення не було введене проте користувач намагається його відправити виникне помилка. Далі спрацьовує подія яка запрограмована javascript фреймворком jquery. Ця подія записується наступним чином $("#send_to").click(function(){}. Тобто спрацьовує подія при натисканні користувача на певні елемент веб сторінки. У нашому випадку це елемент “send_to” які ідентифікує кнопку відправки повідомлення. Подія викликає функцію відправки повідомлення sendMess., функція використовує асинхронний запит та відправляє дані на сервер у фоновому режимі, тобто не відбувається перевантаження веб сторінки як при класичній моделі. Функція sendMess має у собі використання Аjax функції ‘$.post()’. Функція ‘$.post()’ надсилає введене повідомлення для обробки на сервер у файл send_mes.php. Цей файл відповідає за збереження повідомлення користувача у базі даних. Зміст файлу send_mess.php наведений у лістингу.

Отже файл send_mess.php використовує функції php для збереження нового повідомлення користувача у базі даних. Збереження повідомлення у базі даних виконується за допомогоб функції send_mess що э запрограмована у файлі send_mess.php. Цій функції передається у параметри текст повідомлення адресат та відправник. Дані вся ця інформація передається у базу даних де безпосередньо зберігається як масив даних користувача.

2. Програмування функціоналу видалення повідомлень.

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

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

$(document).ready(function(){

$(".delete").click(function(){id=$(this).parent().find(".id_message").text();delete_from=$("#delete_from").text();

$.post("delete.php",{id:id,delete_from:delete_from});});

Малюнок 6.5 Блок схема функціоналу видалення повідомлень користувачів.

Отже для виділення повідомлення використовується подія яка реагує на елемент веб сторінки який має ідентифікатор delete. Видалення відбувається за допомогою Аjax технології. Ajax функція $.post() відправляє асинхронно дані у файл delete.php. Цей файл видаляє повідомлення конкретного користувача за його ідентифікатором.

3. Програмування функціоналу редагування повідомлень

Редагування повідомлень відбувається шляхом перезапису існуючого повідомлення на оновлене. За оновлення повідомлення відповідає файл user_message.js. Коли користувач нажимає на кнопку “Редагувати” викликається подія із фалу user_mesage.js яка має назву rewrie. Повідомлення яке було обране для редагування переміщається у пол. Вводу повідомлень і далі користувач вже відправляє нове повідомлення на місце старого. Повідомлення яке було редаговане замінюється на нову у базі даних під тим самим ідентифікатором. Функція редагування повідомлень наглядно розглянута нижче.

$(".rewrite").live('click',function(){text=$(this).parent().find(".rewrite_2").text();id=$(this).parent().find(".id_message").text();

$("#text").text(text);$("#id_rewrite_message").text(id);});

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

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

Статус користувачів та повідомлень зберігається у базі даних. Кожний статус являє собою цифрове значення яке має певне значення. Користувач буде мати статус “on-line” якщо у базі даних у полі statys стоїть 1 і навпаки якщо 0 тоді статус “of-line”.

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

Малюнок 6.6 Блок схема функціоналу оновлення статусу користувача.

Отже якщо користувач авторизувався або зареєструвався у системі його статус у базі даних змінюється на 1 а в іншому випадку залишається по замовчуванню 0. За вивід статусу користувача відповідає файл output.js що знаходить у папці javascript. У даному файлі існує функція setinterval, яка дає змогу робити проміжкові за часом запити до вб сервера. У нашому випадку функція оновлює статус користувачів кожні 3секунди, тобто робить синхронний запит і повертає результат. Нижче представлений код функції для оновлення статусу користувачів.

('$("#vsi_korustuvachi").load("update.php",{user1:$("#user1").text()});',3000);

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

<?

require_once('function.php');"Всі користувачі:";echo"<br>";?><META http-equiv=Content-Type content="text/html; charset=utf-8 "><?

$user=$_POST['user1'];_users_to_messages($user);?>

Файл update.php має в собі запрограмовану функцію output_user_to_messages. Дана функція робить звернення до бази даних та повертає вивід всіх користувачів у веб сайті. У лістингу 6.2.7.4 додатку 1, наглядно розглянуто код функції output_user_to_messages.

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

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

Функція оновлення індикаторів повідомлень слугує output _user_to_messages. Ця функція одночасно використовується для оновлення індикаторів повідомлень та статусу користувача. Код цієї функції що стосується оновлення індикаторів стану повідомлень наведений нижче.

if($row['status']==1){

?><font color=blue>

<?echo "Online ";?></font><?}else{echo "Ofline ";}"<a href='send.php?to=".$row["id"]."'>".$row['username']."</a>";

Малюнок 6.7 Блок схем функціонування зміни індикатора повідомлення.

5 Програмування функціоналу розлогінення користувачів.

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

<?require_once('function.php');_start();@$username=$_SESSION['valid_user'];($_SESSION['valid_user']);

$result=session_destroy();$status=0;status_user($status,$username);_html_header();echo "Ви успішно вийшли із системи.";_html_url('login.php','Ви можете знову увійти до системи.');_html_footer();?>

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

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

Перевірка працездатності програми полягає в основному у тестуванні всіх функціональних частин та системи в цілому. У нашому випадку тестування програми є доцільним у наступному:

Тестування з'єднання із базою даних

Тестування працездатності технології Аjax

Робота сесії користувача.

Тестування роботи таблиць бази даних.

Тестування кросплатформенності веб додатку.

Тестування з'єднання із базою даних.

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

Тестування працездатності технології Аjax.

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

Робота сесії користувача.

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

Тестування роботи таблиць бази даних.

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

Тестування кросплатформенності ужитку.

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

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

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

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

1.       Витрати на розробку і впровадження програмного засобу (К) визначаються як:

К = К12 (1)

де К1 - витрати на розробку програмного засобу, грн.; К2 - витрати на відлагодження і дослідну експлуатацію програмного засобу на ЕОМ, грн.

Витрати на розробку програмного засобу включають в себе:

1) витрати на оплату праці розробників (ВОП);

2) відрахування у спеціальні державні фонди (ВФ);

3) вартість додаткових виробів, що закуповуються (ВД);

4) транспортно-заготівельні витрати (ТВ);

5) витрати на придбання спецобладнання (ВСО);

6) накладні витрати (НВ);

7) інші витрати (ІВ).

Для проведення розрахунків витрат на оплату праці необхідно визначити категорії працівників, які приймають участь в процесі проектування, їх чисельність, середньоденну заробітну плату спеціаліста відповідної категорії та трудомісткість робіт у людино-днях (людино-годинах).

У проекті бере участь 4 осіб: керівник проекту, двоє інженерів-програмістів та консультант з економіки. Їх заробітна плата становить:

-       керівник проекту - 2500 грн.;

-       інженер-програміст - 2900 грн.;

-       консультант з економіки - 2000 грн.;

Трудомісткість робіт над проектом становить: 20 людино-днів для керівника проекту, 80 людино-днів для інженера-програміста та 2 людино-дні для консультанта.

Середньоденна заробітна плата і-го розробника (ЗПДі) обчислюється за формулою:

 (2)

де ЗПі - основна місячна заробітна плата розробника і-ої спеціальності, грн.; Фм - місячний фонд робочого часу, днів (24 дні).

Розрахунок витрат на оплату праці усіх розробників проекту обчислюємо за формулою:

 (3)

де ni - чисельність розробників проекту і-ої спеціальності, чол.; ti - час, витрачений на розробку проекту працівником і-ої спеціальності, дні; ЗПДі- денна заробітна плата розробника і-ої спеціальності, грн.;

Робота проводилась 4 спеціалістами, які витратили різну кількість днів на розробку системи, що наведені в табл. 7.1.

Розрахунок витрат на оплату праці розробників зводиться у таблиці 7.1.

Таблиця 7.1 Розрахунок витрат на оплату праці

Спеціальність розробника

Кількість розробників, чол.

Час роботи, дні

Денна заробітна плата розробника, грн.

Витрати на оплату праці,  грн.

1

Керівник проекту

1

20

104,17

2083,4

2

Інженер-програміст

2

80

120,83

19332,8

3

Консультант з економіки

1

2

83,83

166,66

Всього

21572,86


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

Отже, відрахування на єдиний соціальний внесок становитимуть:

ВФ = 21572,86*0,37 = 7981,96 грн.

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

4.       Витрати на придбання спецобладнання СО) для проведення експериментальних робіт розраховуються в тому випадку, коли для розробки та впровадження проектного рішення необхідне придбання додаткових технічних засобів. Вартість спецобладнання для виконання конкретного проекту визначається на основі специфікації в їх потребі та фактичних цін з урахуванням транспортно-заготівельних витрат (Втр = 12,5%).

Вихідні дані та результати розрахунків оформлено у таблиці 7.2:

Таблиця 7.2 Розрахунок вартості спецобладнання

№ п/п

Найменування обладнання

Марка, тип

Кількість на проект, шт.

Ціна за одиницю, грн.

Сума витрат, грн.

Сума витрат з урахуванням транспортно-заготівельних витрат, грн.

1

Монітор

Philips 192EL2SB/01 DVI

4

833

3332

3748,5

2

Системний блок

HP 8100E SFF

4

5469

21876

24610,5

Всього

28359


. Накладні витрати (Нв) проектних організацій включають три групи видатків: витрати на управління; загальногосподарські; невиробничі витрати. Вони розраховуються за встановленими 23% до витрат на оплату праці.

НВ = 21572,86 * 0,23 = 4961,76 грн.

6.       Інші витрати (Ів) складають видатки, які не враховані в попередніх статтях витрат. Вони розраховуються за встановленими 7% до витрат на оплату праці.

IВ = 21572,86 *0,07= 1510,10 грн.

7.       Витрати на розробку проектного рішення обчислюємо за формулою:

 

К1 = ВОП + Вф + ВД + ВСО + Нв + Ів (4)

K1 = 21572,86+ 7981,96 +0+28359+4961,76+1510,1 = 64385,68 грн.

8.       Витрати на відлагодження і дослідну експлуатацію системи визначаємо згідно формули:

 (5)

де Sм.г.- вартість однієї години роботи ПК, грн./год.; tвід- кількість годин роботи ПК на відлагодження програми, год.

Вартість однієї години роботи ПК - 0.04872 грн., тобто спожита електроенергія: 0.4 КВт / год. * 0.3648 грн. (тариф) = 0.14592 грн. На відлагодження системи було витрачено 30 днів (30*8 = 240 годин часу), тому:

К2=0,14592*240=35,02 грн.

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

12= 64420,7+ 35,02 =64420,7 грн.

Результати розрахунків зведено у наступній таблиці 7.3:

Таблиця 7.3 Кошторис витрат на розробку проектного рішення

№ п/п

Найменування елементів витрат

Сума витрат, грн.

1

Витрати на оплату праці

21572,86

2

Відрахування у єдиний соціальний внесок

7981,96

3

Витрати на експлуатацію ПК

35,02

4

Витрати на додаткові вироби, що купуються

57913,82

5

Накладні витрати

4961,76

6

Інші витрати

1510,1

Всього

64420,7

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

Комплексний показник якості (Пя) визначається шляхом порівняння показників якості проектованої системи і вибраного аналогу.

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

Для визначення Пя використовується система показників технічного рівня і якості, яка містить в собі наступні групи:

1.       Показники призначення:

1.1.  актуальність даного програмного забезпечення;

.2.    ступінь новизни;

.3.    продуктивність;

1.4.    універсальність системи;

.5.      відкритість системи;

.6.      створення копій БД;

.7.      підтримання багатокористувацького режиму;

2. Показники надійності та безпеки:

2.1.  ймовірність помилки;

2.2.    надійність обчислення;

.3.      тривалість безвідмовної роботи;

3. Патентно-правові показники:

3.1.  патентно-правовий статус;

4. Ергономічні показники:

4.1.  легкість експлуатації;

4.2.    гнучкість налаштування.

Комплексний показник якості проектованої системи визначаємо методом арифметичного середньозваженого з формули:

 (6)

де m - кількість одиничних показників (параметрів), прийнятих для оцінки якості проектованої системи; qі - коефіцієнт вагомості кожного з параметрів щодо їхнього впливу на технічний рівень та якість проектованої системи (встановлюється експертним шляхом), причому:

 (7)

 

Сi - часткові показники якості, визначені порівнянням числових значень одиничних показників проектованої системи і аналога за формулами:

 (8)

де Ппрі, Паі - кількісні значення і-го одиничного показника якості відповідно проектованої системи і аналога.

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

Отже, комплексний показник якості дорівнює ПЯ = 1,9643.

Таблиця 7.4 Визначення комплексного показника якості проектованої системи (аналога)

Показники

Числове значення показників, бали

Відносний показник якості, Сі

Коефіцієнт вагомості qі

Сі × qі


Аналог

Проект. прогр. продукт




Актуальність даного ПЗ

5

10

2

0,06

0,12

Ступінь новизни

4

10

2,5

0,07

0,175

Продуктивність

7

9

1,29

0,04

0,052

Універсальність с-ми

5

10

2

0,05

0,1

Відкритість с-ми

2

8

4

0,005

0,02

Обчислення даних

 4

9

2,25

0,145

0,33

Створення копій БД

5

10

2

0,04

0,008

Багатокорист. режим

4

10

2,5

0,09

0,225

Надійність обчислення

5

10

2

0,15

0,3

Тривалість безвідмовної роботи

9

3

3

0,07

0,21

Патентно-правовий статус

6

10

1,7

0,09

0,135

Легкість експлуатації

5

9

1,8

0,01

0,018

Ймовірність помилки

10-2

10-4

1

0,12

0,12

Гнучкість налаштування

6

10

1,7

0,06

0,102

Всього




1

1,9643

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

При порівнянні програмних засобів в експлуатаційні річні витрати включають вартість підготовки даних (Е1) і вартість годин роботи ПК (Е2) і визначаються за формулою:

 (9)

де ЕП(А) - одноразові експлуатаційні витрати на проектне рішення (аналог), грн.; Е1П(А) - вартість підготовки даних для експлуатації проектного рішення (аналогу), грн.; Е2П(А) - вартість машино-годин роботи ПК для проектного рішення (аналогу), грн.

Річні експлуатаційні витрати визначаються за формулою:

 (10)

де  - експлуатаційні річні витрати проектного рішення;  - періодичність експлуатації проектного рішення (аналогу), раз/рік.

Вартість підготовки даних для роботи на ПК (Е1) визначаються за формулою:

 (11)

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

Середньогодинна ставка оператора визначається за формулою:

 (12)

де  - основна місячна зарплата працівника і-ї категорії, грн.; b - коефіцієнт, який враховує збори до спеціальних державних фондів (b=0,37); Фг - місячний фонд робочого часу, год.

Отже, для проектного рішення середньогодинна ставка становить:

Вартість підготовки даних для роботи на ПК дорівнює:

E = (1*24*17,84)+(2*24*20,69) = 1421,28 грн.

Вартість машино-годин роботи ПК для проектного рішення становить 35,02 грн. Тоді одноразові експлуатаційні витрати на проектне рішення становлять:

EП = 1421,28 +35,02 = 1456,3 грн.

А річні експлуатаційні витрати з урахуванням того, що періодичність експлуатації проектного рішення дорівнює 2 рази/рік, становлять:

В(е)П=1456,3*2 = 2912,6 грн.

Вихідні дані та результати розрахунків витрат на підготовку даних для експлуатації на ЕОМ зводяться у таблицю 7.5.

Над проектом-аналогом працює 2 старший науковий співробітник та 3 інженера-програміста. Їх місячні заробітні ставки відповідно 26325 грн. та 11800 грн. Тоді середньогодинна ставка для кожного з них становить:

Таблиця 7.5 Розрахунок витрат на підготовку даних для роботи на ЕОМ

 Категорія персоналу

Чисельність співробітників і-ої категорії, чол.

Час роботи співробітників і-ої категорії, год.

Середньогодинна ЗП співробітника і-ої категорії, грн.

Витрати на підготовку даних, грн.

Проектне рішення

Керівник проекту

1

24

17,84

428,16

Інженер-програміст

2

24

20,69

993,12




1421,28

Аналог

Старший наук. спів-к

2

20

187,84

7513,6

Інженер-програміст

3

16

84,2

4041,6

Всього




11555,2

грн.

грн.

Трудомісткість роботи за проектом-аналогом становить 30 днів для старших наукових співробітників і по 60 днів для інженерів-програмістів. Тоді вартість підготовки даних для роботи на ПК дорівнює:

 грн.

Вартість машино-годин роботи ПК для проекту-аналогу становить 87,80 грн. Тоді одноразові експлуатаційні витрати на аналог становлять:

 грн.

А річні експлуатаційні витрати з урахуванням того, що періодичність експлуатації аналогу дорівнює 12 разів/рік, становлять:

 грн.

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

Ціна споживання (Цс) - це витрати на придбання і експлуатацію проектного рішення за весь строк його служби:

 (13)

де ЦП - ціна придбання проектного рішення, грн.;  - теперішня вартість витрат на експлуатацію проектного рішення (за весь час його експлуатації), грн.:

 (14)

де Пр - норматив рентабельності (24,5%); Ко - витрати на прив'язку та освоєння проектного рішення на конкретному об'єкті, грн., Ко = 1000 грн.; КК - витрати на доукомплектування технічних засобів на об'єкті, грн., КК = 2000 грн.; СПДВ - ставка податку на додану вартість (20%).

ЦП = 64420,7*(l+0,245)*(l+0,2)+1000+2000= 99244,5 грн.

Ціна придбання аналога відома і дорівнює:

ЦП(а) = 100000,00грн.

Теперішня вартість витрат на експлуатацію проектного рішення розраховується за формулою:

 (15)

де  - річні експлуатаційні витрати в t-ому році, грн.; Т - строк служби проектного рішення, років; R - річна ставка проценту банків (22%).

Оскільки впродовж всього строку експлуатації , то:

 (16)

де РV - ставка дисконту на період Т, яка визначається залежно від процентної ставки (R) і періоду експлуатації (Т).

При R = 0,22РV має такі значення:

T

0

1

2

3

4

5

РV

1,0

0,82

1,51

2,07

2,54

2,93


Оскільки термін експлуатації проектного рішення становить 3 роки, тоді РV = 2,07. Отже, теперішня вартість витрат на експлуатацію проектного рішення становить:

B(E)NPV= 2,07 * 2912,6 = 6029,08 грн.

Таким чином ціна споживання проектного рішення становить:

ЦС(П) = 99244,5 + 6029,08 = 105273,58 грн.

Аналогічно визначається ціна споживання для аналогу. Визначимо теперішню вартість витрат на експлуатацію аналогу. Термін експлуатації аналогу становить 3 роки, тоді РV = 2,07. Оскільки , то:

 грн.

Отже, ціна споживання проекту-аналогу становить:

 грн.

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

Оскільки базою для порівняння обрано відповідний програмний засіб, в даному розділі розраховуються такі показник

1)      Показник конкурентоспроможності:

 (17)

ККС=244606,06 *1,9643/105273,58 = 4,56

) Економічний ефект в сфері експлуатації:

 (18)

ЕЕКС = 69858 - 2912,6 = 66945,4 грн.

3)      Економічний ефект в сфері проектування:

 (19)

EПР= 100000 - 99244,5 = 755,5 грн.

Оскільки Епр>0 та Еекс>0, то розраховуємо:

.        Додатковий економічний ефект в сфері експлуатації:

 (20)

ЕЕКС Д = 66945,4 *(1,220+1,221+1,222) = 263095,42 грн.

2.       Додатковий економічний ефект в сфері проектування:

 (21)

ЕПР Д = 755,5 *(1+0,223) = 1371,87 грн.

Термін окупності витрат на проектування рішення:

 (22)

ТОК= 64420,7/ 66945,4 = 0,96 року

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

Таблиця 7.6 Показники економічної ефективності проектного рішення

Найменування показників

Одиниці вимірювання

Значення показників



Аналог

Проектне рішення

1 Капітальні вкладення

грн.

64420,7

2 Ціна придбання

грн.

99244,5


3 Річні експлуатаційні витрати

грн.

2912,6


4 Ціна споживання

грн.

105273,58


5 Економічний ефект в сфері експлуатації

грн.

66945,4

6 Додатковий економічний ефект в сфері експлуатації

грн.

263095,42

7 Економічний ефект в сфері проектування

грн.

755,5

8 Додатковий економічний ефект в сфері проектування

грн.

1371,87

9 Термін окупності витрат на проектування рішення

роки

0,96

10 Коефіцієнт конкурентоспроможності

4.56

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

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

Ціна придбання проектного рішення становить 99244,5 грн., річні експлуатаційні витрати 2912,6 грн., економічний ефект в сфері експлуатації 66945,4 грн., економічний ефект в сфері проектування 755,5 грн. Наведені розрахунки доводять доцільність розробки, оскільки забезпечується економія капіталовкладень в розробку програмного продукту та значно покращується річний економічний ефект, який отримується користувачами розробленої системи. Економічна ефективність розробки програми підтверджує її доцільність, а універсальність та практичні результати підкреслюють необхідність подальшого розвитку. Серед вагомих показників, на які слід звернути увагу, є показники надійності, що перевищують аналог в два рази. Цього було досягнуто використанням генетичних алгоритмів.

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

ВИСНОВОК

Під час проектування задачі, яка була поставлена у даному дипломному проекті, я здобув навики та принципи вирішення завдань такого типу. У ході проектування завдання освоїв основні принципи та підходи щодо розробки автоматизації вирішення проблем поставленого завдання. Основною метою мого проектування було використання системного аналізу, декомпозиції проблеми, знаходження оптимальних шляхів вирішення проблеми а також використання Аjax при створені веб додатків такого типу. Судячи із кінцевого результату проектування, вирішення проблеми за темою дипломного проектування було здійснено в повному обсязі. Мною було засвоєно принцип інтеграції технології AJAX у веб ресурс та основні програмні реалізації роботи Аjax на стороні клієнтської машини. Вивчив методи декомпозиції проблем та складних ємкісних завдань. Вивчив основні підходи до побудови програмних структур мовою php, а також javascript. Розглянув сервісні функції роботи веб браузерів в різних операційних системах для побудови кросбраузерності веб ресурсу. Для використання бази даних мною було освоєно синтаксис mysql та основні функціональні можливості реляційних таблиць. Для роботи із Аjax технологією освоїв використання javascript фреймворка jquery. Для перевірки роботи системи вивчив підхід до створення тестового алгоритму для веб додатку.

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

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

Дипломний проект надав мені можливість вивчити новітні технології програмування Інтернет сайтів та освоїти сучасні методи та підходи до проектування веб додатків високо рівня складності.

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

1. [Електронний ресурс].- адреса: www.uk.wikipedia.org/wiki/інтернет.

2.       [Електронний ресурс].- адреса: www.ukrarticles.pp.ua/pk-internet/7206-primenenie-texnologii-ajax.html

.Оригінальна назва: Pro PHP and jQuery. Автор: Джейсон Ленгсторф. Видавництво: Вильямс. Рік 2011. ISBN 978-5-8459-1693-8.

.[Електронний ресурс].- адреса: www.ganzh.blog.net.ua/2008/03/15/ajax-tehnolohiya-velycheznyh-mozhlyvostej/

.[Електронний ресурс]. - адреса www.ua.wikipedia.org/wiki/Google_Suggest

.[Електронний ресурс]. - адреса www.protopage.com/

.[Електронний ресурс].- адреса http://ua.wikipedia.org/wiki/EyeOS

. [Електронний ресурс].- адреса http://ua.wikipedia.org/wiki/EyeOS

. [Електронний ресурс].- адреса http://uk.wikipedia.org/wiki/AJAX

. [Електронний ресурс].- адреса http://phpbbex.com/forum/ viewtopic.php?t=41

11. Теория систем и системный анализ в управлении организациями: Справочник. / Под ред. В.Н. Волковой и А.А. Емельянова. - М.: Финансы и статистика, 2006 - 848 с.

12 [Електронний ресурс].- адреса www.javascript.ru/Аjax/transport/ xmlhttprequest

.[Електронний ресурс].- адреса www.ua.wikipedia.org/wiki/JSON

.[Електронний ресурс].- адреса http://www.w3.org/DOM/

15. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера, Автор: Николай Прохоренок, Год: 2010 ISBN: 978-5-9775-0540-6

16. [Електронний ресурс].- адреса <http://easywebscripts.net/ajax/>

17. MySQL 5.0. Библиотека программиста <http://www.booksgid.com/inforamtion/MySQL%205.0.%20%D0%91%D0%B8%D0%B1%D0%BB%D0%B8%D0%BE%D1%82%D0%B5%D0%BA%D0%B0%20%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%81%D1%82%D0%B0/>, Виктор Иосифович Гольцман, рік випуску 2010, ISBN: 978-5-49807-135-0.

18. Джордж Шлосснейгл. Профессиональное программирование на PHP, 2006

.Уильям Стейнмец, Брайан Вард. 75 готовых решений для вашего web-сайта на РНР, 2009

.Мишель Е. Дэвис и Джон А. Филипс. Изучаем PHP и MySQL, 2008

. Николай Прохоренок. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера, 2010

22. [Електронний ресурс].- адреса http://php.net/manual/ru/reserved. variables.session.php

23. HTML & XHTML: The Definitive Guide. Авторы: Чак Маскиано <http://www.ozon.ru/person/3007580/>, Бил Кеннеди <http://www.ozon.ru/person/3007620/>. Переводчик: Сергей Иноземцев <http://www.ozon.ru/person/264497/>, Издательство: Символ-Плюс <http://www.ozon.ru/brand/856498/>, ISBN 978-5-93286-104-2, 5-93286-104-5, 0-596-52732-2; 2011 г.

24. PHP and MySQL Web Development, Авторы: Люк Веллинг <http://www.ozon.ru/person/360400/>, Лаура Томсон <http://www.ozon.ru/person/360399/>, Переводчик: А. Моргунов <http://www.ozon.ru/person/2072765/>, Языки: Русский, Издательство: Вильямс <http://www.ozon.ru/brand/856490/>, Серия: Landmark <http://www.ozon.ru/context/detail/id/1635170/>, ISBN 978-5-8459-1574-0, 978-0-672-32916-6; 2010 г.

. HTML и XHTML. Подробное руководство ISBN: 5-93286-104-5 752 страницы 752, декабрь 2012 Символ-Плюс <http://www.books.ru/maker/simvol-plyus-2/>

ДОДАТОК

Лістинг 1. Програмний код створення таблиць бази даних.

database exchange,exchange,TABLE `mesage` (

`id` INT(5) NOT NULL AUTO_INCREMENT,

`to_mes` INT(5) NOT NULL,

`from_mes` INT(5) NOT NULL,

`text` VARCHAR(50) NOT NULL,

`status` INT(11) NOT NULL,

`data` VARCHAR(50) NULL DEFAULT NULL,

`delete_to` INT(10) NOT NULL,

`delete_from` INT(10) NOT NULL,KEY (`id`)

)ENGINE=InnoDB;TABLE `register` (

`id` INT(5) NOT NULL AUTO_INCREMENT,

`username` VARCHAR(40) NOT NULL,

`password` VARCHAR(40) NOT NULL,

`status` INT(5) NOT NULL,KEY (`id`)

)=InnoDB;

Лістинг 2.Програмний код файлу add_user.php

<?require_once('function.php');

$name=$_POST['name'];

$password=$_POST['password'];_start();(!$name || !$password){echo "Не введені обовязкові поля.";exit;}(strlen($name)>16){echo "Імя містить забагато символів. Мак 16.";exit;}(strlen($password)>16){echo "Пароль містить забагато символів. Мак 16.";exit;}(strlen($password)<6){echo "Пароль містить недостатньо символів. Мін 6.";exit;}register($name,$password);

$_SESSION['valid_user']=$name;do_html_header();"Ви успішно зареєстровані у ситемі.Перейдіть на сторінку для зареєстрованих користувачів.";_html_url('member.php','Перейти.'); do_html_footer();?>

Лістинг 3. Функція javascript для функції відправки повідомлення.

$("#send_to").click(function(){id_rewrite_message=$("#id_rewrite_message").text();

$("#id_rewrite_message").remove();

$("#message_send").show();($("#text").val()==""){$("#message_send").text("Введіть текст повідомлення!");}{(to,youText.val(),id_rewrite_message);

$("#message_send").text("Повідомлення відправлено!");

$("#message_send").hide(700);

$("#text").each(function () {

$(this).val($(this).data('defvalue'));

});}});sendMess(to,text,id_rewrite_message){

$.post("send_mess.php",{text: text,to: to,id_rewrite_message:id_rewrite_message});

}

Лістинг 4. Файл send_mess.php відповідає за збереження повідомлення у базі даних.

<?require_once('function.php');_start();_connect();

$mesage=$_POST["text"];

$to=$_POST["to"];

$id_rewrite_message=$_POST['id_rewrite_message'];(isset($id_rewrite_message))

{$from=user_id($_SESSION["valid_user"]);_mess($from,$to,$mesage,$id_rewrite_message);

}else{

$from=user_id($_SESSION["valid_user"]);

$id_rewrite_message=0;_mess($from,$to,$mesage,$id_rewrite_message);}?>

Лістинг 5. Функція оновлення статусу користувачів output_user_to_messages.

output_users_to_messages($log_user)

{db_connect();_select_db("user");

$zaput="select username,id,status from register where username !='$log_user' " ;

$result=mysql_query($zaput);($row = mysql_fetch_assoc($result)) {

$user=$row['id'];

$user2=user_id($log_user);

$zaput2="select id from mesage where status=0 and to_mes='$user2' and from_mes='$user' ";

$result2=mysql_query($zaput2);

$i=0;($row2 = mysql_fetch_assoc($result2))

{$i=$i+1;}($row['status']==1){ ?>

<font color=blue>

<?echo "Online ";

?>

</font>

<?}else{echo "Ofline ";}"<a href='send.php?to=".$row["id"]."'>".$row['username']."</a>";($i==0){echo " 0";echo "<br>";}{"+".$i;echo "<br>";

}}}

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

Файл output.js який відповідає за динаміку інтерфесу користувача.

$(document).ready(function(){youText=$("#text");to=$("#to").text();

$(function () {

$("#text").each(function () {

$(this).data('defvalue', this.value);});

});$("#send_to").click(function(){id_rewrite_message=$("#id_rewrite_message").text();

$("#id_rewrite_message").remove();

$("#message_send").show();($("#text").val()==""){$("#message_send").text("Введіть текст повідомлення!");}{sendMess(to,youText.val(),id_rewrite_message);

$("#message_send").text("Повідомлення відправлено!");

$("#message_send").hide(700);

$("#text").each(function () {$(this).val($(this).data('defvalue'));});}});sendMess(to,text,id_rewrite_message){

$.post("send_mess.php",{text: text,to: to,id_rewrite_message:id_rewrite_message});('$("#message_my").load("mess.php",{user:$("#my_user").text()});',1000);('$("#vsi_korustuvachi").load("update.php",{user1:$("#user1").text()});',3000);('$(".get_text").load("message_user.php",{to:$("#to").text(),my_user:$("#my_user").text()});',1000); });

Файл user_message.js, який відповідає за видалення та редагування повідомлень користувачів.

$(document).ready(function(){

$(".delete").click(function(){id=$(this).parent().find(".id_message").text();delete_from=$("#delete_from").text();

$.post("delete.php",{id:id,delete_from:delete_from});

});

$(".rewrite").live('click',function(){text=$(this).parent().find(".rewrite_2").text();id=$(this).parent().find(".id_message").text();

$("#text").text(text);

$("#id_rewrite_message").text(id);

});

});

Файл member.php що відповідає за роботу профільної частини користувача.

<?_once('function.php');_start();

@$username=$_POST['username'];

@$password=$_POST['password'];($username && $password)

{{login($username,$password);$_SESSION['valid_user']=$username;

}catch(Exception $e)

{do_html_header();"Вхід неможливий невірний логін та пароль.";_html_url('login.php','Вхід');_html_footer();;}}//далі має бути система спілкування.

@$user=user_id($_SESSION["valid_user"]);(reg_user()){_html_header();

?><div id="content">

<div id="header"></div>

<div id="vnesh">

<div id="vnutr">

<div id="left">

<div id=user></div>

</div>

<div id="right">

<div id=menu>

<p style="display:none;" id=my_user><?echo $user;?></p>

</div>

</div>

<div id="center">

<div id=alluser>

<span>Написати повідомлення:</span><br>

<?_users_to_messages($_SESSION["valid_user"]);

?>

</div>

</div>

<div id=podporka></div>

</div>

</div>

<div id="footer"></div>

</div>

<?_html_footer();

}

?>

Файл data_valid.php який містить в собі головні функції роботи веб ужитку.

<?db_connect()

{

@ $result=mysql_pconnect('localhost','user','password');

//mysql_query ("set character_set_client='cp1251'");

//mysql_query ("set character_set_results='cp1251'");

//mysql_query ("set collation_connection='cp1251_general_ci'");(!$result){echo "Не вдалось зэднатись ыз базою даних";exit;}

}register($name,$password)

{db_connect();_select_db("user");

$zaput="select * from register where username='$name' " ;

$result=mysql_query($zaput);(mysql_num_rows($result)>0){echo "Немає даних";exit; }

$zaput="insert into register (username,password,status) values('".$name."','".$password."','0')";

$result=mysql_query($zaput);(!$result){echo"Невдалий результат.";}

}login($username, $password)

{_connect();mysql_select_db("user");

$zaput="select * from register where username='$username' and password='$password'";

$result=mysql_query($zaput);(!$result)throw new Exception('Помилка');(mysql_num_rows($result)>0)return ;throw new Exception(' Помилка');

};function reg_user()

{global $valid_user;(isset($_SESSION['valid_user']))

{echo '-'.($_SESSION['valid_user']).'.';

$status=1;

$username=$_SESSION['valid_user'];_user($status,$username);

?>

<a href="logout.php">Вийти<a/><br><hr><?return true;

}else

{do_html_heading();echo "Поверніться та введіть обовязкові поля.";do_html_url('login.php','Вхід');do_html_footer();return false;}}function status_user($status,$username){_connect();mysql_select_db("user");$zaput="update register set status='$status' where username='$username'";mysql_query($zaput);}user_id($username){db_connect();_select_db("user");

$zaput="select id from register where username='$username'";

$result=mysql_query($zaput);

$row=mysql_fetch_assoc($result);$row['id'];

}function user_log($id)

{db_connect();_select_db("user");

$zaput="select username from register where id='$id'"; $result=mysql_query($zaput);$row=mysql_fetch_assoc($result);return $row['username'];}output_users_to_messages($log_user)

{db_connect();_select_db("user");

$zaput="select username,id,status from register where username !='$log_user' " ;

$result=mysql_query($zaput);($row = mysql_fetch_assoc($result)) {

$user=$row['id'];

$user2=user_id($log_user);

$zaput2="select id from mesage where status=0 and to_mes='$user2' and from_mes='$user' ";

$result2=mysql_query($zaput2);

$i=0;while ($row2 = mysql_fetch_assoc($result2))

{

$i=$i+1;

}($row['status']==1){

?><font color=blue>

<?"Online ";

?>

</font>

<?

}else{echo "Ofline ";}"<a href='send.php?to=".$row["id"]."'>".$row['username']."</a>";($i==0){echo " 0";echo "<br>";}else{echo"+".$i;echo "<br>";}}}send_mess($from,$to,$mesage,$id_rewrite_message)

{db_connect();_select_db("user");

$data=date('m.d.y');($id_rewrite_message==false){

$zaput="insert into mesage (to_mes,from_mes,text,status,data, delete_to,delete_from) values ('".$to."','".$from."','".$mesage."','0','".$ data."','0','0')";

$result=mysql_query($zaput);

$zaput1="update mesage set status=1 where to_mes='$from' and from_mes='$to'";

$result=mysql_query($zaput1);

}else {$zaput="update mesage set text='$mesage', status=0 where id='$id_rewrite_message'";

$result=mysql_query($zaput);}}?>

Файл add_user.php слугує додаванням нового користувача у базу даних.

<?_once('function.php');

$name=$_POST['name'];

$password=$_POST['password'];_start();(!$name || !$password){echo "Не введені обовязкові поля.";exit;}(strlen($name)>16){echo "Імя містить забагато символів. Мак 16.";exit;}(strlen($password)>16){echo "Пароль містить забагато символів. Мак 16.";exit;}(strlen($password)<6){echo "Пароль містить недостатньо символів. Мін 6.";exit;}($name,$password);

$_SESSION['valid_user']=$name;_html_header();"Ви успішно зареєстровані у ситемі.Перейдіть на сторінку для зареєстрованих користувачів.";_html_url('member.php','Перейти.');_html_footer();

?>

Файл delete.php видаляєкоористувацькі повідомлення.

<?_once('function.php');

$id=$_POST['id'];//повідомлення

$delete_from=$_POST['delete_from'];//користувач який видаляє_connect();_select_db("user");

$zaput="select delete_from from mesage where id = '$id'";

$result1=mysql_query($zaput);($row = mysql_fetch_array($result1))

{if($row['delete_from']>0)

{$zaput="update mesage set delete_to ='$delete_from' where id = '$id'";_query($zaput);

$zaput1="update mesage set status=1 where id='$id'";_query($zaput1);

$zaput2="delete from mesage where id = '$id'";_query($zaput2);

{$zaput="update mesage set delete_from='$delete_from' where id = '$id'"; _query($zaput);

}}?>

Файл function.php підключає головні функціональні файли роботи веб-додатку.

<?_once('output.php');_once('data_valid.php');

?>

Файл login.php Головний стартовий файл роботи веб додатку.

<?_once('function.php');_html_header();_form();_html_footer();

?>

Файл test.php існує для тестової перевірки роботи системи видале

<script src=jquery-1.6.4.min.js type=text/javascript></script>

<script type=text/javascript>

$(document).ready(function(){

$(".del").click(function(){($(this).attr('value'));});})</script>

<?_once('function.php');

$to=1;

$my=2;_connect();_select_db("mesage");

$zaput="select text,to_mes,status,id from mesage where to_mes='$to' and from_mes='$my' || to_mes='$my' and from_mes='$to' " ;

$result=mysql_query($zaput);($row = mysql_fetch_assoc($result))

{echo user_log($to).":".$row['text']." <br>";

?>

<input type=submit id="delete">

<?}?>

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

 

Не нашли материал для своей работы?
Поможем написать уникальную работу
Без плагиата!