Розробка серверно-клієнтського веб-додатку

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

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

Розгланемо інструментальнти для створення клієнт-серверних веб-додатків і мови об'єктного аналізу і проектування.

MobelFirst технології. Адаптивна, кроссбраузерна верстка.

Раніше доступ в Інтернет можна було отримати тільки з комп'ютерів. Потім в Інтернет стали виходити з мобільних телефонів. Зараз до Мережі підключилися мультимедійні плеєри, пристрої читання електронних книг і телевізори.
Що потрібно для створення сучасного веб сайту? Дотримання при створенні трьох нескладних правил:

Суворо дотримуватися всі інтернет-стандарти.
Ретельно продумати наповнення веб сторінок.
Подбати про доступність веб сторінок.

Розглянемо їх докладніше. Інтернет погрожує прийти на самі різні пристрої, які можуть бути засновані на різних апаратних і програмних платформах, часто сильно відрізняються один від одного. Так, персональні комп'ютери побудовані на апаратній платформі Intel і програмній платформі Microsoft Windows (принаймні, більшість). Мобільний телефон автора заснований на апаратно-програмній платформі Samsung.
Одне об'єднує все це апаратно-програмне різноманіття - відповідність інтернет-стандартам. Інакше пристрої в кращому випадку будуть відображати Web-сторінки неправильно, в гіршому - взагалі не будуть працювати.
З цього випливає перше правило з перерахованих раніше - Web-дизайнери при створенні Web-сторінок зобов'язані суворо дотримуватися сучасних інтернет-стандартів, щоб їх творіння однаково (ну, або майже однаково) відображалися на всіх пристроях. Перше правило також вимагає відмови від застарілих і закритих, фірмових інтернет-технологій. З застарілими технологіями все зрозуміло: мотлох - не помічник новому. Закриті ж технології незручні тим, що найчастіше контролюються єдиною фірмою, яка одноосібно "замовляє музику" і далеко не завжди прислухається до думки інтернет-спільноти. До таких технологій належать, зокрема, Adobe Flash і Microsoft ActiveX.
Відкритими інтернет-стандартами, в тому числі і Web-стандартами, займається організація World Wide Web Consortium (Консорціум Всесвітньої павутини), або скорочено W3C. Вона розробляє стандарти, погоджує їх з вимогами учасників ринку і публікує на своєму Web-сайті http://www.w3.org. Всі опубліковані там стандарти обов'язкові до застосування.
Інтернет колись починався як мережа вчених, яким було потрібно обмінюватися результатами досліджень. А що представляли собою ці результати? В основному, текст, можливо, з ілюстраціями. Вчені - публіка в цьому сенсі невибаглива, їм цілком вистачало скромних можливостей тодішнього WWW. Тепер же абсолютна більшість користувачів Інтернету - звичайні обивателі. Їм мало простого тексту з парою картинок, їм подавай добре оформлений текст, музику і відео. Вони більш вимогливим перших мешканців Мережі.
Звідси випливає друге правило - Web-дизайнери повинні піклуватися про повноту і зручність наповнення Web-сторінок.

Структура Web-сторінок повинна бути добре продумана, щоб відвідувач одразу зміг знайти на них все, що йому потрібно.
Web-сторінки повинні легко читатися і не "різати" очі.
До важливих матеріалів бажано привернути увагу відвідувача, а незначні приховати. У цьому можуть допомогти динамічні елементи: розкриваються при натисканні мишею абзаци, гіперпосилання, що виділяються при наведенні курсору миші, і ін.
Якщо Web-сайт присвячений музиці або відео, все це повинно бути доступно для відтворення прямо на його Web-сторінках, без завантаження.
Одним словом - все для зручності відвідувача! (Мабуть, це правило слід було б поставити на початку списку ...)

Інтернет погрожує прийти на самі різні пристрої з різними характеристиками: швидкодією процесора, об'ємом пам'яті, дозволом екрану, швидкістю доступу до Мережі. Але всі вони повинні забезпечити однаковий висновок Web-сторінок. Як цього досягти?
Ось і третє правило - Web-дизайнери повинні піклуватися про доступність Web-сторінок.

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

Але як ці правила реалізуються на практиці? Давайте відкриємо який-небудь сучасний Web-сайт, наприклад, належить організації W3C. Його можна знайти за інтернет-адресою http://www.w3.org.
З дизайну сайту можна зробити наступні висновки:

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

Фактично тут ми привели постулати так званої концепції MobelFirst. Це список правил, яким повинен задовольняти будь-який Web-сайт, який претендує на звання сучасного. Образно висловлюючись, це прапор, який спільно несуть трудівники Web-індустрії, крокуючи в ногу з часом.

Також концепція MobelFirst передбачає чотири принципи, які є "переднім краєм" Web-дизайну. Поки що дуже мало Web-сайтів їм слід (і "домашній" Web-сайт W3C, на жаль, не виняток ...). Розглянемо їх по порядку.
Принцип перший - розділення вмісту, подання та поведінки Web-сторінки. Тут вміст - це інформація, яка виводиться на Web-сторінці, уявлення описує формат виведення цієї інформації, а поведінка - реакцію Web-сторінки або окремих її елементів на дії відвідувача. Завдяки їх поділу ми зможемо правити, скажімо, вміст, не зачіпаючи уявлення і поведінку, або доручати створення вмісту, подання та поведінки різних людей.
Принцип другий - довантажувати вміст. Замість того щоб оновлювати всю Web-сторінку у відповідь на клацання на гіперпосиланні, ми можемо довантажувати тільки її частину, яка містить необхідну інформацію. Це сильно зменшить обсяг переданої по мережі інформації (мережевий трафік) і дозволить виконувати будь-які дії з даними після їх підвантаження.
Принцип третій - генерується вміст. Якась частина Web-сторінки може не завантажуватися по мережі, а генеруватися прямо на місці, в Web-браузері. Так ми ще сильніше скоротимо мережевий трафік.
Принцип четвертий - семантична розмітка даних. Вона дозволить нам зв'язати виведені на Web-сторінку дані згідно певним правилам. Наприклад, ми можемо семантично зв'язати сторінки довідника по HTML, і відвідувач, завантаживши будь-яку сторінку, зможе відразу ж перейти на пов'язані з нею сторінки, що містять додаткові або родинні відомості.

Мова програмування JAVASCRIPT

JavaScript це створений фірмою Netscape міжплатформений, об'єктно-орієнтована мова скриптинга (сценаріїв). Ядро JavaScript містить набір основних об'єктів, таких як Array, Date і Math, і основний набір елементів мови, таких як операції, структури управління та оператори [6, 12, 15, 16, 17]. Ядро JavaScript може бути розширено для різних цілей шляхом доповнення новими об'єктами; наприклад:

Клієнтський JavaScript розширює ядро мови, надаючи об'єкти управління браузером (Navigator або інший web-браузер) і Document Object Model (DOM). Наприклад, клієнтські розширення дають додатку можливість розміщувати елементи в HTML-формі і реагувати на дії користувача, такі як клацання миші, введення даних в форму і навігація по сторінках.
Серверна JavaScript розширює ядро мови, надаючи об'єкти, які стосуються запуску JavaScript на сервері. Наприклад, серверні розширення дають додатку можливість з'єднуватися з реляційної БД, зберігати інформацію від одного виклику додатка або виконувати роботу з файлами на сервері.

JavaScript дозволяє створювати додатки, що працюють по всій мережі Internet. Клієнтські програми працюють в браузері, такому як Netscape Navigator, а серверні додатки - на сервері, такому як Netscape Enterprise Server. Використовуючи JavaScript, Ви можете створювати динамічні HTML-сторінки, обробні користувача введення і наявні дані, використовуючи спеціальні об'єкти, файли і реляційні БД.

За допомогою функціональності JavaScript LiveConnect Ви можете організувати взаємодію кодів Java і JavaScript. З JavaScript Ви можете інстанцііровать об'єкти Java і отримувати доступ до їх public-методам і полях. З Java Ви можете отримувати доступ до об'єктів, властивостей і методів JavaScript.
Корпорація Netscape винайшла JavaScript, і JavaScript був вперше використаний в браузерах Netscape.

Ядро JavaScript. Клієнтський і серверний JavaScript мають наступні загальні елементи:

Ключові слова
Синтаксис операторів і граматику
Правила написання виразів, змінних і літералів
Лежачу в основі об'єктну модель (хоча клієнтський і серверний JavaScript мають різні зумовлені об'єкти)
зумовленості об'єкти і функції, такі як Array, Date і Math

Клієнтський JavaScript.

Web-браузери, такі як Navigator (2.0 і пізніших версій) можуть інтерпретувати оператори клієнтського JavaScript, впроваджені в HTML-сторінку. Коли браузер (або клієнт) запрошувати таку сторінку, сервер висилає клієнту по мережі повне вміст документа, включаючи HTML і оператори JavaScript.

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

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

Різні версії JavaScript працюють зі специфічними версіями Navigator'а. Наприклад, JavaScript 1.2 працює з Navigator 4.0. Деякі можливості JavaScript 1.2 недоступні в JavaScript 1.1 і тому недоступні в Navigator 3.0.
Серверний JavaScript. На сервері Ви також можете впроваджувати JavaScript в HTML-сторінки. Серверні оператори можуть з'єднуватися з реляційними БД різних виробників, розділяти інформацію між користувачами програми, отримувати доступ до файлової системи сервера або взаємодіяти з іншими додатками через LiveConnect і Java. HTML-сторінки з серверним JavaScript можуть містити також клієнтський JavaScript.

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

На першому етапі, показаному на малюнку 1.5, Ви створюєте HTML-сторінки (які можуть містити оператори як клієнтського, так і серверного JavaScript) і файли JavaScript. Потім Ви компілюєте всі ці файли в єдиний виконуваний блок.

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

На відміну від стандартних програм Common Gateway Interface (CGI), все вихідні JavaScript інтегровані безпосередньо в HTML-сторінки, прискорюючи розробку і полегшуючи обслуговування. Служба Session Management Service серверного JavaScript містить об'єкти, які Ви можете використовувати для роботи з даними, що існують між клієнтськими запитами, у декількох клієнтів або декількох додатків. Служба LiveWire Database Service серверного JavaScript надає об'єкти для доступу до БД, службовці інтерфейсом для серверів Structured Query Language (SQL).
JavaScript і Java. JavaScript і Java нагадують один одного, але мають і фундаментальні відмінності. JavaScript не має статичної типізації та суворої перевірки типів Java. JavaScript підтримує більшу частину синтаксису виразів Java і базові конструкції управління потоком.
На відміну від системи часу компіляції Java, побудованої на оголошеннях, JavaScript підтримує систему часу виконання, засновану на невеликій кількості типів даних: числових, булевих і строкових. JavaScript має об'єктну модель на базі прототипів замість більш загальної об'єктної моделі на базі класів. Модель на базі прототипів надає можливість динамічного спадкування; тобто, те, що успадковується, може відрізнятися для різних об'єктів. JavaScript також підтримує функції без спеціальних вимог оголошення. Функції можуть бути властивостями об'єктів, виконуваними як нетипові методи.

JavaScript це мова, вільна за формою, в порівнянні з Java. Ви не повинні оголошувати всі змінні, класи і методи. Ви не повинні враховувати, чи є методи public, private або protected, і не зобов'язані реалізовувати інтерфейси. Return-типи змінних, параметрів і функцій не типізовані явно.
Java це мова на базі класів, розроблений для швидкого виконання і строгої типізації. Сувора типізація означає, наприклад, що Ви не можете привести / cast ціле число Java (integer) до заслання на об'єкт або отримати доступ до private-пам'яті, порушуючи байт-коди Java. Модель Java на базі класів означає, що програми складаються виключно з класів і їх методів. Спадкування класів в Java і сувора типізація зазвичай вимагають тісно вибудуваної ієрархій об'єктів. Ці вимоги роблять програмування на Java більш складним, ніж авторизація на JavaScript.

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

Налагодження в JavaScript. JavaScript дозволяє створювати складні комп'ютерні програми. Як і у всіх інших мовах, Ви можете помилятися при написанні скриптів. Налагоджувальник Netscape JavaScript Debugger дає можливість налагоджувати Ваші скрипти.
Visual JavaScript. Netscape Visual JavaScript це утиліта візуальної розробки на базі компонентів для платформи Netscape Open Network Environment (ONE). Він спочатку призначався для використання розробниками між-платформених стандартизованих web-додатків з готових компонентів з мінімальними витратами на програмування. Ці додатки базуються на HTML, JavaScript і Java.

Мова програмування PHP

PHP - це скрипт-мова (scripting language), що вбудовується в HTML, який інтерпретується і виконується на сервері [6, 7, 8, 9, 10, 11, 12].
Основна відмінність від CGI-скриптів, написаних на інших мовах, типу Perl або C - це те, що в CGI-програмах ви самі пишете виведений HTML-код, а, використовуючи PHP - ви вбудовуєте свою програму в готову HTML-сторінку, використовуючи відкриває і закриває теги (у прикладі <? php і?>).
PHP є препроцесором HTML. Це означає, що до того, як сервер "віддасть" файл браузеру, його переглядає препроцесор-інтерпретатор. Що це означає? Файли, які піддаються обробці препроцесором, повинні мати певне розширення (зазвичай це .phtml або .php3, але ці значення можна поміняти) і містити (хоча це не обов'язкова вимога) код для препроцесора
Відмінність PHP від JavaScript, полягає в тому, що PHP-скрипт виконується на сервері, а клієнту передається результат роботи, тоді як в JavaScript-код повністю передається на клієнтську машину і тільки там виконується.
Любителі Internet Information Server знайдуть, що PHP дуже схожий на Active Server Pages (ASP), а ентузіасти Java скажуть, що PHP схожий на Java Server Pages (JSP). Ще деякими аналогами PHP є мови ColdFusion (www.allaire.com) і embperl. Всі ці мови дозволяють розміщувати код, що виконується на Web-сервері, усередині HTML-сторінок. Перед відправкою сторінки PHP-код програється на сервері і брозеру видається результат у вигляді знову таки HTML-сторінки, яка може сильно відрізнятися від тієї, що зберігається на сервері.
Найпростіше це показати на прикладі:

<Html>
<Head>
<Title> Приклад </ title>
</ Head>
<Body>
<? Php echo "Привіт, я PHP-програма!"; ?>
</ Body>
</ Html>

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

Привіт, я PHP-програма!

Відкривши вихідний текст даної сторінки ми побачимо наступне.

<Html>
<Head>
<Title> Example </ title>
</ Head>
<Body>
Привіт, я PHP-програма!
</ Body>
</ Html>

Як бачите, в результуючої сторінці немає і сліду PHP-коду. Вельми просто і марно, але PHP дозволяє робити і складніші і фантастичні речі.
Можливості PHP. У кількох словах - на PHP можна зробити все, що можна зробити за допомогою CGI-програм. Наприклад: обробляти дані з форм, генерувати динамічні сторінки, одержувати і посилати куки (cookies).
Крім цього в PHP включена підтримка багатьох баз даних (databases), що робить написання Web-додатків з використанням БД до неможливості простим.

Додатково до всього PHP розуміє протоколи IMAP, SNMP, NNTP, POP3 і навіть HTTP, а також має можливість працювати з сокетами (sockets) і спілкуватися по інших протоколах.
Коротка історія PHP. Початком PHP можна вважати осінь 1994 року, коли Rasmus Lerdorf вирішив розширити можливості своєї Home-page та написати невеликий движок для виконання найпростіших завдань. Такий движок був готовий до початку 1995 року і називався Personal Home Page Tools (звідси і скорочення PHP). Умів він не дуже багато - розумів найпростіший мова і всього кілька макросів.
До середини 1995 року з'явилася друга версія, яка називалася PHP / FI Version 2. Приставка FI - приєдналася з іншого пакета Rasmusa, що вмів обробляти форми (Form Interpritator). PHP / FI компілювався всередину Apache і використовував стандартний API Apache. PHP скрипти виявилися швидше аналогічних CGI - скриптів, так як сервера не було необхідності породжувати новий процес. Мова PHP по можливостях наблизився до Perl, найпопулярнішому мови для написання CGI-програм. Була додана підтримка багатьох відомих баз даних (наприклад, MySQL і Oracle). Інтерфейс до GD - бібліотеці, дозволяв генерувати картинки на льоту. З цього моменту почалося широке поширення PHP / FI.
В кінці 1997 Zeev Suraski і Andi Gutmans вирішили переписати внутрішній движок, з метою виправити помилки інтерпретатора та підвищити швидкість виконання скриптів. Через півроку, 6 червня 1998 року вийшла нова версія, яка була названа PHP 3.
До літа 1999 року PHP 3 був включений в кілька комерційних продуктів. За даними NetCraft на листопад 1999 PHP використовувався в більш ніж 1 млн. Доменах.
На сьогоднішній день (грудень 1999) готується до випуску нова версія PHP 4, в якій внутрішній движок буде знову переписаний (він має назву Zend - www.zend.com). Передбачається, що продуктивність нової версії буде в десятки разів вище, ніж у існуючої.
Переваги PHP. Розробникам Web-додатків немає необхідності говорити, що web-сторінки - це не тільки текст і картинки. Гідний уваги сайт повинен підтримувати деякий рівень інтерактивності з користувачем: пошук інформації, продаж продуктів, конференції і т.п. Традиційно все це реалізувалося CGI-скриптами, написаними на Perl. Але CGI-скрипти дуже погано масштабуються. Кожен новий виклик CGI, вимагає від ядра породження нового процесу, а це займає процесорний час і витрачає оперативну пам'ять. PHP пропонує інший варіант - він працює як частина Web-сервера, і цим самим схожий на ASP від Microsoft або ColdFusion від Allaire.
Синтаксис PHP дуже схожий на синтаксис C або Perl. Люди, знайомі з програмуванням, дуже швидко зможуть почати писати програми на PHP. У цій мові немає строгої типізації даних і немає необхідності в діях по виділенню / звільненню пам'яті.
Програми, написані на PHP, читаються досить легко. На відміну від Perl-програм PHP-код легко візуально прочитати і зрозуміти.
На додаток до своєї безкоштовності (хоча MySQL вимагає придбання ліцензії при використанні її в комерційних цілях) зв'язка PHP-MySQL є крос-платформної. Це означає, що ви можете, працюючи в Windows, розробляти програми під Unix. Крім того, PHP може працювати як зовнішній CGI-процес, або як звичайний інтерпретатор скриптів, або як модуль, що підключається до Apache.
І нарешті, так як даний продукт розробляється спільними зусиллями, існує величезна кількість документації і списків розсилки, до яких можна звернутися у разі виникнення будь-яких питань. Знайдені помилки виправляються досить швидко, ваші пропозиції і зауваження завжди вислухають, розглянуть, і якщо вони виявляться цінними - реалізують в новій версії.

Практика розробки серверно-клієнтського веб-додатку

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

Елементами компонентних діаграм є компоненти та інтерфейси, а також відносини залежності і реалізації. Як і інші діаграми, компонентні діаграми можуть включати примітки і обмеження. Крім того, компонентні діаграми можуть містити пакети або підсистеми, що використовуються для групування елементів моделі в великі фрагменти.
Компоненти. За своєю суттю компонент є фізичним фрагментом реалізації системи, який містить в собі програмний код (вихідний, двійковий, виконуваний), сценарні опису або набори команд операційної системи (маються на увазі командні файли). Мова UML дає наступне визначення.
Компонент - фізична і замінна частина системи, яка відповідає набору інтерфейсів і забезпечує реалізацію цього набору інтерфейсів.
Інтерфейс - дуже важлива частина поняття «компонент», його ми обговоримо в наступному підрозділі. Графічно компонент зображується як прямокутник з вкладками, що зазвичай включає ім'я.

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

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

Інтерфейси. Інтерфейс - список операцій, які визначають послуги класу або компонента. Образно кажучи, інтерфейс - це роз'єм, який стирчить із шухлядки компонента. За допомогою інтерфейсних роз'ємів компоненти стикуються один з одним, об'єднуючись в систему.
Ще одна аналогія. Інтерфейс подібний абстрактному класу, у якого відсутні властивості і працюють операції, а є тільки абстрактні операції (які не мають тіл). Якщо хочете, інтерфейс схожий на посмішку чеширского кота з правдивої історії про Алісу, де кіт окремо і посмішка окремо. Всі операції інтерфейсу відкриті і видимі клієнту (в іншому випадку вони втратили б будь-який сенс). Отже, операції інтерфейсу тільки іменують пропоновані послуги, не більше того.
Дуже важлива взаємозв'язок між компонентом і інтерфейсом. Можливі два способи відображення взаємозв'язку між компонентом і його інтерфейсами. У першому, згорнутому способі, інтерфейс зображується у формі піктограми. Компонент Образ.java, який реалізує інтерфейс, з'єднується із позначкою інтерфейсу (кружком) НаблюдательОбраза простий лінією. Компонент РицарьПечальногоОбраза.jауа, який використовує інтерфейс, пов'язаний з ним ставленням залежності.

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

За способом зв'язку компонента з інтерфейсом розрізняють:

експортований інтерфейс - той, який компонент реалізує і пропонує як послугу клієнтам;
імпортований інтерфейс - той, який компонент використовує як послугу іншого компонента.

У одного компонента може бути кілька експортованих і кілька імпортованих інтерфейсів.
Той факт, що між двома компонентами завжди знаходиться інтерфейс, усуває їх пряму залежність. Компонент, який використовує інтерфейс, буде функціонувати правильно незалежно від того, який компонент реалізує цей інтерфейс. Це дуже важливо і забезпечує гнучку заміну компонентів в інтересах розвитку системи.
Побудуємо компонентну діаграму для клієнт-серверного додатка «Інтернет-аукціон». З компонентів виділимо дві основні категорії - скрипти, написані на мовах PHP і JavaScript, і файли стилів CSS. Їх будемо позначати стереотипами script і CSS. З категорій модулів вихідного коду виділимо три основні категорії - модулі роботи з користувачами, з лотами і категоріями лотів. З зв'язків в даній UML-моделі використовуємо залежності між скриптами і файлами стилів, між головною сторінкою веб-додатки та сторінок підсистем використовуємо асоціацію, так як ці файли «знають про існування один одного».

ДІАГРАМА РОЗГОРТАННЯ

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

ІНТЕРФЕЙС ВЕБ-ДОДАТКУ

В даному підрозділі наведемо інтерфейс розробленого веб-додатку «Інтернет-аукціон». Будемо виходити з припущення, що систему використовує Адміністратор і ставиться завдання задіяти весь функціонал системи. Для написання інетерфейсу використаний затребуваний фреймворк Bootstrap.

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

Висновок.

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

Далі буде...