Розробка веб-додатку підтримки клієнтів аптеки

Дерев’янко, Денис Ігорович

Please use this identifier to cite or link to this item: https://er.chdtu.edu.ua/handle/ChSTU/6896

Title:	Розробка веб-додатку підтримки клієнтів аптеки
Authors:	Тарасенко , Ярослав Володимирович Дерев’янко, Денис Ігорович
Keywords:	веб-сервіс;веб-хостинг;веб-додаток;бронювання ліків;розробка
Issue Date:	14-Jun-2022
Abstract:	Кваліфікаційна робота присвячена проектуванню й розробці веб-додатку підтримки клієнтів аптеки. У данній роботі звернули увагу на бронювання ліків для його подальшого використання в невеликій аптечній мережі регіонального рівня. У першому розділі кваліфікаційної роботи виконано аналіз предметної області та огляд наявних в Україні веб-сервісів аптек для бронювання ліків. У другому розділі кваліфікаційної роботи здійснено огляд, аналіз веб-додатків та їх характеристик. Також деталізована постановка завдання. У третьому розділі кваліфікаційної роботи здійснено здійснено формування вимог, зовнішніх сутностей і варіантів використання. Проведено проектування й опис архітектури веб-сервісу. У четвертому розділі кваліфікаційної роботи розкрити питання з вибору засобів розробки веб-додатку та проведено його обґрунтування. Виконано розробку моделі даних і компонентів веб-сервісу для бронювання ліків. Проведено розгортання розробленого веб-сервісу на вибраному веб-хостингу.
URI:	https://er.chdtu.edu.ua/handle/ChSTU/6896
Appears in Collections:	126 Інформаційні системи та технології (Web-технології, web-дизайн)

Files in This Item:

File	Description	Size	Format
РЕП_БАК_Дерев'янко_WEB-1811.pdf Restricted Access		3.05 MB	Adobe PDF	View/Open Request a copy

Show full item record

Extracted text

МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ

КАФЕДРА ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ ПРОЕКТУВАННЯ

Пояснювальна записка
до кваліфікованої роботи бакалавра
на тему: «Розробка веб-додатку підтримки клієнтів аптеки»

Виконав студент 4 курсу,
групи Web-cпеціальністі 126
Інформаційні системи та технології,
ОП «Web-технології, Web-дизайн»

Дерев’янко Денис Ігорович

Керівник

Рецензент

Черкаси-2022 року
АНОТАЦІЯ

Розробка веб-додатку підтримки клієнтів аптеки // Кваліфікаційна робота
освітнього рівня «Бакалавр» // Дерев’янко Денис Ігорович // Черкаський державний
технологічний університет, факультет інформаційних технологій і систем, кафедра
інформаційних технологій проектування, група Web1811 // Черкаси, 2022 // стор.
79, рис. – 17, табл. – 0, слайдів – 17, додат.– 5, бібліогр. – 35.

Ключові слова: підтримка, клієнтів, аптеки, бронювання, ліки, аптечні
мережі, веб-додаток, веб-сервіс, трирівнева архітектура, база даних, веб-хостинг,
CDN-хостинг.

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

3

ANNOTATION

Development of a web application to support pharmacy clients // Qualification
work of the educational level "Bachelor" // Derevyanko Denis Igorovich // Cherkasy State
Technological University, Faculty of Information Technologies and Systems, Department
of Information Technologies, Web1811// Cherkasy, 2022 // p. 79, fig. - 17, table. - 0,
slides - 17, appendix - 5, bibliogr. - 35..

Keywords: customer support, pharmacy, booking, medicines, pharmacy
networks, web application, web service, three-tier architecture, database, web hosting,
CDN hosting.
Qualification work is devoted to the design and development of a web
application to support pharmacy customers. In this paper, attention was drawn to the
reservation of drugs for further use in a small pharmacy network at the regional level.
In the first section of the qualification work the analysis of the subject area and
the review of the web services of pharmacies for booking medicines available in
Ukraine are performed.
The second section of the qualification work reviews, analyzes web applications
and their characteristics. The task statement is also detailed.
In the third section of the qualification work, the formation of requirements,
external entities and uses has been carried out. The design and description of the web
service architecture is carried out.
In the fourth section of the qualification work to reveal the issue of choosing the
means of developing a web application and its justification. The model of data and
components of the web service for booking medicines has been developed. Deployment
of the developed web service on the selected web hosting has been carried out.
4

ЗМІСТ
СПИСОК СКОРОЧЕНЬ ТА УМОВНИХ ПОЗНАЧЕНЬ .................................. 3
ВСТУП ................................................................................................................... 4
1 ПОСТАНОВКА ЗАДАЧІ. ОГЛЯД ІСНУЮЧИХ РІШЕНЬ, АНАЛОГІВ . 6
1.1 Короткий опис предметної області ....................................................... 6
1.2 Аналіз наявних сервісів .......................................................................... 7
2 ОБГРУНТУВАННЯ ТЕХНІЧНОГО ЗАВДАННЯ.................................... 15
2.1 Веб-додаток та його характеристики .................................................. 15
2.2 Постановка завдання ............................................................................. 21
3 РОЗРОБКА СТРУКТУРНИХ, ФУНКЦІОНАЛЬНИХ ТА
ПРИНЦИПОВИХ РІШЕНЬ ...................................................................................... 22
3.1 Формування вимог до веб-додатку підтримки клієнтів аптеки ....... 22
3.2 Визначення зовнішніх сутностей і варіантів використання ............. 24
3.3 Проектування архітектури веб-додатку .............................................. 28
4 РОЗРОБКА, РОЗГОРТАННЯ ТА ВИКОРИСТАННЯ ВЕБ-ДОДАТКУ 32
4.1 Обґрунтування вибору засобів розробки веб-додатку підтримки
клієнтів аптеки ....................................................................................................... 32
4.2 Розробка моделі даних веб-додатку .................................................... 34
4.3 Розробка компонентів веб-додатку ..................................................... 39
4.4 Розгортання веб-додатку ...................................................................... 46
4.4.1 Перенесення зображень на CDN-хостинг ................................... 46
4.4.2 Пересилання файлів веб-додатку на веб-хостинг ....................... 48
4.4.3 Перенесення бази даних веб-додатку на веб-хостинг ................ 49
4.5 Демонстрація роботи веб-додатку ...................................................... 50
ВИСНОВКИ ......................................................................................................... 53
ДОДАТОК А ........................................................................................................ 54
ДОДАТОК Б ........................................................................................................ 55
ДОДАТОК В ........................................................................................................ 56
ДОДАТОК Г ........................................................................................................ 64
ДОДАТОК Д ........................................................................................................ 73
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ........................................................... 76

ЧДТУ 22WEBC-2077.003.ПЗ
Змн. Арк. № докум. Підпис Дата
Розроб. Дерев’янко Д.І.
О. Розробка веб-додатку Літ. Арк. Акрушів
Перевір. Та расенко Я.В. підтримки клієнтів аптеки н 2 79
Реценз. ФІТІС,
Н. Контр. Пояснювальна записка кафедра ІТП, WEBC
Затверд. Прокопенко Т.О.

СПИСОК СКОРОЧЕНЬ ТА УМОВНИХ ПОЗНАЧЕНЬ

БД – база даних
ПЗ – програмне забезпечення
ПК – персональний комп’ютер
СКБД – система керування базами даних
AJAX (англ. Asynchronous JavaScript And XML) – асинхронний Java-Script і XML,
підхід до створення веб-сторінок з використанням асинхронного (у фоновому
режимі) обміну даних між веб-браузером і веб-сервером.
CDN (англ. Content Delivery Network) – мережа доставки контенту.
CRUD (англ. Create, Read, Update, Delete) – чотири базові функції для роботи з
даними: створення, читання, оновлення, видалення.
CSS (англ. Cascading Style Sheets) – каскадні таблиці стилів.
E-Mail (англ. electronic mail) – електронна пошта.
ER (англ. entity-relationship) – модель «сутність-зв’язок».
FTP (англ. File Transfer Protocol) – протокол передачі файлів.
HTML (англ. HyperText Markup Language) – мова розмітки гіпертексту.
IT (англ. information technologies) – інформаційні технології.
JS (англ. JavaScript) – динамічна мова програмування, що використовується для
створення скриптів веб-сторінок.
PHP (англ. Hypertext Preprocessor, Personal Home Page) – гіпертекстовий
препроцесор, скриптова мова програмування, створена для генерування
вебсторінок на стороні веб-сервера.
SQL (англ. Structured Query Language) – мова структурованих запитів, декларативна
мова програмування для взаємодії з реляційними базами даних.
URL (англ. Uniform Resource Locator) – уніфікований локатор ресурсів, система
стандартизованих адрес електронних ресурсів.

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 3
Змн. Арк. № Документа_ Підпис__ Дата
_

ВСТУП

Медицина є однією з найбільших галузей наукової та практичної діяльності
людини. Сфера охорони здоров'я дуже важлива для життєдіяльності суспільства. У
людей часто виникають проблеми зі здоров’ям і в зв’язку з цим виникає потреба в
отриманні допомоги від працівників медичної сфери. Тому автоматизації процесів
в цій сфері будуть завжди актуальною задачею. Також можна сказати, що це є
галузь, яка потребує інновацій, адже якість лікування пацієнтів є дуже важливою.
Автоматизація може бути проявлена в різних областях медицини та взагалі
людського побуту. На сьогоднішній день впровадження інформаційних технологій
у сфери життєдіяльності особи, суспільства є основною рушійною силою сучасних
соціальних трансформацій.
Актуальність теми роботи. XXI століття відзначається широким
впровадженням інформаційних технологій у різні сфери людської діяльності, у
тому числі й у сферу фармацевтики [1].
Таким чином, при здійсненні продажу фармацевтичних засобів
використовується веб-сервіси для підтримки клієнтів аптеки. Такі веб-сервіси
стають заміною онлайн-аптек [2]: за допомогою них споживачі можуть
переглянути, де продаються необхідні ліки, забронювати, забрати їх у вибраному
аптечному закладі й оплатити бронювання.
З березня 2020 року в Україні діє карантин через пандемію коронавірусу
(COVID-19). До переліку обмежень входить заборона на присутність в аптеці понад
однієї людини на 10 кв.м. торгової площі, крім персоналу аптечного закладу. Через
це люди вимушені чекати на вулиці у черзі та заходити здебільшого по-одному,
адже більше не дозволяє площа торгової зали.
Одним з можливих рішень даної проблеми, а в подальшому оптимізації
роботи аптеки, — є створення онлайн-сервісу аптеки, де покупці матимуть
можливість подивитися наявність ліків у конкретній аптеці, забронювати їх та
забрати у визначений час, до моменту якого працівники закладу вже підготують та
упакують ліки, а покупцю залишиться лише забрати ліки та їх оплатити. Це
Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 4
Змн. Арк. № Документа_ Підпис__ Дата
_

полегшить життя як працівників медичного закладу, так і покупців, бо зменшить
черги та ризики зараження вірусом.
Також можна зазначити, що за допомогою веб-сервісів клієнти можуть
забронювати ліки онлайн і потім піти до аптечного закладу, де їм просто видадуть
ліки або замовити кур'єрську доставку. Отже, у зв’язку зі збільшенням
використання інформаційних технологій у фармацевтиці та у зв’язку з
карантинними обмеженнями через пандемію COVID-19, розробка веб-сервісу для
підтримки клієнтів аптеки у вигляді бронювання ліків є актуальною темою для
дослідження.
Мета і завдання роботи. Метою розробки є надання додаткових послуг
підтримки клієнтів аптеки, тобто бронювання ліків під час їх продажу, що дозволяє
споживачам отримати вищий рівень обслуговування, пов’язаного з покупкою ліків,
і дозволяє аптечним закладам залучати нових клієнтів для реалізації ліків.
Для розробки пропонується веб-сервіс, який призначений для використання
в аптечній мережі регіонального рівня і зможе зайняти свою нішу на
фармацевтичному ринку.
Для досягнення визначеної мети необхідно виконати наступні завдання:
- провести аналіз джерел, що стосуються сфери бронювання ліків;
- здійснити огляд наявних найбільших веб-сервісів для бронювання ліків, що
працюють на території України;
- провести формулювання основних вимог до розроблюваного вебсервісу для
бронювання ліків та здійснити виділення зовнішніх сутностей і варіанти
використання;
- здійснити проектування й опис архітектури розроблюваного вебсервісу для
бронювання ліків;
- здійснити проектування та розробку бази даних і інших компонентів
розроблюваного веб-сервісу для бронювання ліків, провести опис їх
взаємодії та принципів роботи;
- здійснити розгортання веб-сервісу для бронювання ліків шляхом
перенесення його компонентів на веб-хостинг.
Арк.
ЧДТУ 22WEBC-2077.003.ПЗ
5
Змн. Арк. № Документа_ Підпис__ Дата
_

1 ПОСТАНОВКА ЗАДАЧІ. ОГЛЯД ІСНУЮЧИХ РІШЕНЬ,
АНАЛОГІВ

1.1 Короткий опис предметної області

Інформаційні технології надають можливість фармацевтичному ринку
використовувати нові способи для ведення бізнесу та створення комунікації з
кінцевими споживачами. Одним з видів використання інформаційних технологій у
фармацевтичній галузі є запровадження онлайн-аптек, що здійснюють реалізацію
ліків так само, як і інші інтернет-магазини. Проте, відповідно до українського
законодавства (та й законодавства багатьох країн Європейського Союзу), торгівля
лікарськими засобами повинна проводитися лише за допомогою аптечних закладів,
а здійснення електронної торгівлі або торгівлі через пошту чи інші неаптечні
заклади заборонене [2].
Для того, щоб працювати в рамках закону України та використовувати
інформаційні технології й мережу Інтернет для оптимізації своєї роботи й
отримання більшої кількості нових клієнтів, аптеки можуть використовувати
вебсервіси для бронювання ліків.
У загальному робота таких сервісів виглядає так: споживач хоче купити ліки
або навіть декілька різних видів ліків в одній аптеці. Для цього він використовує
веб-сервіс для бронювання, переглядає наявність потрібних ліків у аптеках та
здійснює їх бронювання в найближчій аптеці, у якій вони доступні.
Після цього споживач може в назначений час відвідати вибрану аптеку,
здійснити оплату за заброньовані ліки та забрати їх. Аптека ж, натомість, у такий
спосіб отримує нового клієнта.
Таким чином, веб-сервіс для бронювання ліків дає вигоду як споживачеві,
який здійснює бронювання, так і аптеці, яка виконує це бронювання. Крім цього,
такі веб-сервіси можуть надавати наступні переваги:
- нижча вартість лікарських засобів, ніж у звичайних аптеках за рахунок
зменшення витрат;
Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 6
Змн. Арк. № Документа_ Підпис__ Дата
_

- знижки та персональні пропозиції за допомогою програми лояльності для
постійних клієнтів; • можливість вибирати будь-який зручний для клієнта час
під час бронювання;
- надання додаткової інформації про лікарські засоби з метою залучення
потенційних клієнтів;
- забезпечення доступності ліків для споживачів, які проживають у невеликих
населених пунктах;
- продаж реклами виробникам лікарських засобів [2, 3, 4].
Саме поєднання позитивних сторін для споживачів й аптек та деякі
законодавчі обмеження дали можливість веб-сервісам для бронювання ліків
зайняти своє вагоме місце в інтернет-комерції лікарських засобів в Україні і стати
засобом цифрової комунікації на фармацевтичному ринку.

1.2 Аналіз наявних сервісів

На українському ринку лікарських засобів можна виділити два основні типи
веб-сервісів пітримки клієнтів з питань бронювання ліків: онлайн-портали, до яких
підключаються різні аптеки, та власні веб-сервіси великих аптечних мереж.
Серед наявних онлайн-порталів розглянемо веб-сервіси Tabletki.ua та
GeoApteka, а серед великих аптечних мереж – мережі «Аптека Доброго Дня» й «1
Соціальна Аптека».
Великі мережі аптек, наприклад як Аптека Низьких цін або Доброго Дня,
мають власні онлайн-сайти, на яких можна замовити ліки та доставку кур’єром у
великих містах або Новою Поштою. Такі способи стають у нагоді, але не
дозволяють забезпечити необхідними ліками людей, які мешкають у маленьких
містах та селах і не мають наявних можливостей для отримання ліків.
Розглянемо більш детально наступні аптеки:
1) Tabletki.ua
Tabletki.ua – найбільший в Україні онлайн-портал, призначений для
бронювання й пошуку лікарських засобів та іншої фармацевтичної продукції [5].
Арк.
ЧДТУ 22WEBC-2077.003.ПЗ
Змн. Арк. № Документа 7
_ Підпис__ Дата
_

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

Рисунок 1.1 – Сайт портала «Tabletki.ua»

Портал приділяє велику увагу достовірності й актуальності інформації про
фармацевтичні продукцію та вимагає від аптек регулярно надавати останні дані про
свій асортимент [4, 5].
Самий проект Tabletki.ua був заснований у 2008 році у вигляді сайту, який
надавав користувачам інформацію про ціни на ліки. Від початку свого заснування
й до сьогодні цей проект активно й динамічно розвивається [3, 4].
Таким чином, він став одним із перших на фармацевтичному ринку, хто
запустив онлайн-сервіси підтримки клієнтів для бронювання ліків.
Також Tabletki.ua на своєму офіційному сайті [5] вказує, що до веб-сервісів
бронювання й пошуку ліків підключено понад 5500 аптек по всій України.
2) GeoApteka
Веб-сервіс GeoApteka надає користувачам послуги перегляду актуальної
інформації про наявність, вартість і місця продажу лікарських засобів, а також
Арк.
ЧДТУ 22WEBC-2077.003.ПЗ
Змн. Арк. № Документа_ Підпис__ Дата 8
_

надає послуги їх бронювання. За допомогою GeoApteka користувачі отримують
можливість знайти по карті найближчі до себе аптеки, в яких вони можуть купити
необхідні ліки, переглянути графік роботи цих аптек та оформити бронювання ліків
у них [7, 8].
За інформацією в [3] станом на 2019 рік у GeoApteka (рис. 1.2) з’явилися
засоби для підтримки урядової програми «Доступні ліки». Ці засоби допомагають
користувачам набагато легше знаходити ліки, які підлягають відшкодуванню за
цією програмою, а також аптеки, що можуть у рамках цієї програми безкоштовно
надавати певні ліки своїм клієнтам.

Рисунок 1.2 – Сайт вебсервісу «GeoApteka»

3) Мережа «Аптека низьких цін№
Є однією з найпопулярніших в Україні. Має великий каталог товарів.
Перейшовши на сайт Аптеки низьких цін, неозброєним оком можна побачити те,
що сайт справді має сучасний інтерфейс. В око відразу кидаються навігаційні
елементи - такі як навігаційна панель та каталог товарів, що дає можливість відразу
Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 9
Змн. Арк. № Документа_ Підпис__ Дата
_

почати пошук потрібних товарів.
Каталог товарів містить багато пунктів: Медикаменти, Краса та догляд,
Дитячі товари, Щоденна гігієна і так далі. Самі ж пункти поділяються на підпункти.
Наприклад, Пункт Медикаменти поділяється на Застуда та Грип, Знеболюючі
препарати, Протипухлинні препарати і тому подібне. Що є дуже зручно, якщо у
клієнт не знає, які саме препарати йому потрібні. Крім того, на сторінках препаратів
міститься детальна інформація про сам препарат, що дуже допомагає.
Є можливість зареєструватись на сайті. Це є корисним як для самого клієнта,
оскільки він отримує спеціальні бонуси і може відслідковувати історію своїх
покупок, так і для адміністрації сайту, оскільки є можливість робити розсилки щодо
акцій, спеціальних пропозицій тощо.
Основним недоліком цієї аптеки є складність та нагромадженість
інтерфейсу. Так справді, з одного боку це добре, що клієнту під очі остійно
попадають попередження про акції і показується багато додаткової інформації, але
в такому випадку дуже складно стає орієнтуватися особливо людям, які не звикли
до покупок онлайн (рис. 1.3).

Рисунок 1.3 – Сайт аптеки «АНЦ»

4) Мережа «1 Соціальна Аптека»
Іншою мережею аптек, що надає власні веб-сервіси для бронювання ліків, є
мережа «1 Соціальна Аптека» [11], яка є брендом компанії «Фармастор». Цій
компанії також належить мережа «Аптека Доброго Дня».
Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 10
Змн. Арк. № Документа_ Підпис__ Дата
_

Перші аптеки мережі «1 Соціальна Аптека» відкрилися в кінці 2015 року.
На сьогодні в мережі числяться понад 150 аптек як у містах-мільйонниках, так і
районах [11, 12]. Таким чином, «1 Соціальна Аптека» можна назвати однією з
мереж, які найбільш динамічно розвиваються на українському ринку.
Мережа аптек позиціонує себе як продавців ліків та інших фармацевтичних
товарів, які намагаються реалізовувати свої товари з якомога найменшою націнкою
до закупівельної ціни. Для цього мережа постійно розробляє проекти з
громадськими організаціями та органами влади, що мають на меті створення
сприятливих умов для купівлі лікарських засобів вразливими верствами населення
(рис. 1.4).

Рисунок 1.4 – Сайт аптеки «1 Соціальна Аптека»

З 1 грудня 2016 року для користувачів мережі «1 Соціальна Аптека»
доступний сервіс для бронювання ліків, яким можна користуватися через
офіційний веб-сайт мережі. Цей сервіс надає можливість здійснювати пошук
необхідних лікарських засобів та бронювати їх. Під час оформлення бронювання
сервіс дозволяє вибрати місто для отримання замовлення та зі списку аптек у місті
вибрати ту, за якою й буде зареєстроване бронювання та в якій користувач зможе
отримати ліки [11].
Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 11
Змн. Арк. № Документа_ Підпис__ Дата
_

У підсумку аналізу сайтів, які належать великим мережам аптек, такі як
apteka24, viridis., можна зробити висновок, що в той час як великі мережі в
основному мають гарно зроблені сайти - майже неможливо знайти сайт якоїсь
локальної аптеки, яка не належить певній мережі. Дуже часто такі аптеки, якщо і
мають веб-сторінку, то на ній не має можливості купувати і замовляти товари.
5) Мережа «Аптека Доброго Дня»
На українському фармацевтичному ринку однією з найбільших аптечних
мереж є «Аптека Доброго Дня» [9].
Мережа «Аптека Доброго Дня» – це мережа національного рівня, до якої
належать понад 220 закладів, розташованих по всій території України. Для
підтримки постійних клієнтів у мережі розроблена Програма Лояльності, що
дозволяє користувачам накопичувати бонуси й розраховуватися ними під час
наступних покупок. Крім цього, «Аптека Доброго Дня» також є одним з партнерів
програми Fishka, за допомогою якої клієнти можуть розраховуватися бонусами,
отриманими при покупках товарів та послуг партнерів (рис. 1.5).

Рисунок 1.5 – Сайт аптеки «Аптека Доброго Дня»

Мережа «Аптека Доброго Дня» часто бере участь у програмах виробників:
«Про-прайс», «Медікард», Orange Card. Ці програми допомагають людям з
хронічними захворюваннями отримувати високі знижки на покупку спеціальних
ліків [9].
Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 12
Змн. Арк. № Документа_ Підпис__ Дата
_

Сама аптечна мережа, крім власного веб-сайту з усіма послугами, також
розробила й додаток для мобільних пристроїв, які працюють під операційними
системами Android та iOS.Так само, як і веб-сайт, мобільний додаток дає
можливість здійснювати пошук потрібних ліків зі всього асортименту, визначати
найближчі аптеки мережі, переглядати їх графік роботи, здійснювати онлайн-
бронювання ліків. До інших функціональних можливостей цього додатку належить
підтримка віртуальних бонусних карки та сервіс для нагадування про прийом ліків.
За допомогою створення особистих кабінетів користувачі можуть
переглядати свою історію покупок і бронювань, отримувати знижки та персональні
пропозиції на основі переглянутих товарів [10].
6) Аптека «Фармація»
На рисунку 1.6 можна побачити будову основної сторінки аптеки
“Фармація” та побачити, що вони не мають опції замовити товар.

Рисунок 1.6 – Основна сторінка аптеки «Фармація»

Ще одним конкурентом для майбутнього вебдодатку є можливість доставки
ліків з аптеки за допомогою сервісу доставки Glovo. На час карантину вони знизили
вартість доставки зі 60 грн до 1 грн, але Glovo працює лише в 11 великих містах.
Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 13
Змн. Арк. № Документа_ Підпис__ Дата
_

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

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 14
Змн. Арк. № Документа_ Підпис__ Дата
_

2 ОБГРУНТУВАННЯ ТЕХНІЧНОГО ЗАВДАННЯ

2.1 Веб-додаток та його характеристики

На основі розглянутих інтернет аптек можна прийти до висновку, що в
майбутньому проекті слід сфокусуватися на створенні веб-додатку не для великих
мереж аптек, а для невеликої локальної аптеки, з простим та зручним інтерфейсом.
Сучасний веб-додаток – це унікальна розробка, орієнтована на вирішення
певних завдань. Воно стає все більш затребуваним, оскільки дозволяє ефективніше
вести бізнес-процеси.
Для розширення кількості послуг, підвищення їх якості та простоти
уявлення, компанії вважають за краще замовити web-додаток. Фінансові вкладення
в його розробку швидко окупаються.
Будь-який подібний додаток відображається на екрані монітора або
смартфона, як вебсторінка. На ній міститься не тільки певна інформація, але й
передбачені функціональні кнопки, вікна. Всі вони дозволяють виконувати
конкретні дії для отримання необхідного результату.
Позитивна особливість розробки – клієнтові немає необхідності
встановлювати на свій пристрій програмне забезпечення. Платформа працює
безпосередньо у браузері.
Для розробки серверної частини майданчика використовуються різні мови
та інструменти програмування:
- Ruby;
- Perl;
- PHP;
- Python;
- NodeJS;
- та інші.
Розробка клієнтської частини передбачає використання:
- Ajax;
- JavaScript; Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 15
Змн. Арк. № Документа_ Підпис__ Дата
_

- HTML;
- та ін.
Все залежить від завдань, які необхідно вирішити. Тому попередньо
проводиться оцінка бізнесу, його аналіз. Це дозволяє зрозуміти – що саме слід
реалізувати, і яким чином.
Веб-додаток може бути найрізноманітнішим, все залежить від сфери, в якій
саме він буде створений і запущений. Хоча такий поділ умовний. Тому що легко
придумати безліч тематик, напрямків, для яких буде актуальна реалізація такого
продукту:
- бронювання готелів та квитків, автомобілів і т.д.;
- купівля товарів;
- замовлення їжі, різних послуг;
- розваги, ігри;
- фінансові, банківські послуги різного типу – починаючи від
калькулятора валют і закінчуючи повноцінним онлайн-банкінгом;
- соціальні мережі;
- освітні програми – наприклад, з вивчення іноземної мови;
- біржі фрілансу;
- CRM та багато іншого.
Для прикладу розглянемо найпоширеніші, популярні продукти.
1) ERP
Такі продукти створюються для великих підприємств. З їх допомогою
вдається підкорити нові висоти. Зокрема, серед переваг сервісів:
- стандартизація звітності;
- оптимізація внутрішніх процесів;
- поліпшення взаємодії між підрозділами;
- контроль вирішення поставлених завдань;
- синхронізація процесів, в яких задіяні різні підрозділи;
- та багато інших.
2) Корпоративний портал
Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 16
Змн. Арк. № Документа_ Підпис__ Дата
_

Це теж веб-додаток, який являє собою сучасний інструмент, з безліччю
функцій. Завдяки розробці оптимізуються всі існуючі процеси. Додаток дозволяє
успішно вирішувати такі завдання:
- підвищення якості обслуговування клієнтів;
- поліпшення ефективності роботи персоналу;
- оптимізація взаємозв’язків між відділами;
- більш зручне спілкування з контрагентами;
- можливості вести віддалену роботу з документацією.
Завдяки всього перерахованого також підвищується мобільність
співробітників компанії.
3) Электронна комерція
E-commerce web-додаток дає можливість виробникам і/або постачальникам
пропонувати свої товари потенційні аудиторії безпосередньо в мережі. Майданчик
допомагає організувати всі процеси, спрямовані на:
- прийом;
- обробку;
- управління;
- відстеження замовлень.
Серед основних завдань, які дозволяє вирішувати такий додаток, варто
виділити:
- отримання замовлення від потенційного клієнта з детальним описом
запиту;
- швидке виведення на ринок нового товару;
- суттєве зниження витрат, необхідних для укладення/завершення угоди;
- значне скорочення «дороги», яку продукт змушений пройти від
постачальника до клієнта.

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 17
Змн. Арк. № Документа_ Підпис__ Дата
_

4) CRM
Такий веб-додаток призначений для спрощення взаємовідносин з клієнтами,
покупцями. Він дозволяє ефективно вирішувати різні завдання, серед яких
контроль і планування.
Також слід виділити наступні завдання:
- збереження бази клієнтів і швидкий доступ до неї;
- чітка аналітика за всіми замовленями, продажами;
- збільшення обсягу продажів;
- оптимізація діяльності співробітників компанії;
- суттєве зниження використання паперових документів.
У підсумку можна визначити, що у всіх додатків є однакові, спільні риси,
характеристики.
а) Розвиток e-commerce. Всі вони сприяють розвитку, популяризації e-
commerce напрямку. Процеси, пов’язані з купівлею, проводяться в Інтернеті:
комунікація, оформлення договору купівлі-продажу, підписання документації і т.д.
б) Взаємовигідний процес. Від використання додатків виграють обидві
сторони: ідеально реалізується принцип win-win.
в) Оптимізація процесу обслуговування. Будь-який веб-додаток суттєво
спрощує процес обслуговування клієнтів. За одиницю часу вдається обробити
набагато більше замовлень, звернень. Компанії стають мобільними. Їх
співробітники можуть перебувати в різних містах і країнах, успішно взаємодіючи
та виконуючи свої завдання.
г) Простота вибору товару. Клієнту набагато простіше зорієнтуватися у
продуктах компанії. Він отримує всю інформацію про товар, послугу, оформляє
доставку, здійснює оплату, не залишаючи свого крісла.
Створення веб-додатку передбачає декілька етапів, які потрібно
реалізовувати в строгій послідовності, що дозволить уникнути помилок і витрат
часу на їх усунення.

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 18
Змн. Арк. № Документа_ Підпис__ Дата
_

1. Дослідження та аналіз
Спочатку проводиться аналіз діяльності компанії, її сфери бізнесу і цільової
аудиторії. Зібрані дані допомагають зрозуміти, що саме потрібно впровадити, які
функції необхідні.
При дослідженні проект-менеджер чи аналітик проводить інтерв’ю, під час
яких уточнює всі вимоги щодо майбутнього продукту.
Найчастіше, при проведенні інтерв’ю, вдається отримати багато корисної і
цінної інформації. Замовник розробки, спілкуючись з менеджером, краще розуміє,
що йому потрібно і змінює свої вимоги. Оскільки в процесі обговорення
виявляються сценарії, про які раніше не замислювалися.
За результатами досліджень готується детальне технічне завдання, в якому
описуються всі деталі.
2. Дизайн
При проектуванні інтерфейсу враховуються всі сучасні тренди і вимоги.
Оформлення має бути не тільки привабливим, але й легким для сприйняття.
Але найголовніше – інтерфейс зобов’язаний характеризуватися простотою,
доступністю та зручністю використання. Щоб у клієнта, який вперше користується
веб-додатком, не виникали труднощі.
Опрацьовується оформлення для кожного окремого екрану, створюються
необхідні графічні елементи. При переходах між екранами може бути впроваджена
анімація.
Створюється дизайн не тільки для десктопної версії, але й для мобільної. На
екранах смартфонів і планшетів не так багато місця, потрібно раціонально
використовувати його. Крім того, зробити так, щоб управляти функціями на екрані
можна було однією рукою.
3. Розробка та програмування
Тут вкрай важливими є два параметри:
- швидкість завантаження – користувачі не люблять сторінок, які завантажуються
дуже довго;
- архітектура – детально опрацьовується.
Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 19
Змн. Арк. № Документа_ Підпис__ Дата
_

Можливе налаштування сервера. Це повинно індивідуально
обумовлюватися та прописуватися у технічному завданні. Всі моменти обов’язково
узгоджуються.
4. Тестування
Обов’язково проводиться тестування. Воно необхідне, щоб виявити
недоліки та помилки в роботі, невідповідність технічним завданням. Якщо виявлені
помилки, вони обов’язково виправляються.
5. Впровадження та завершення
Веб-додаток впроваджується, передається замовнику. Він проводить
прийом роботи. Фахівці інструктують, показують, як саме функціонує розробка.
І на завершення розглянемо переваги та позитивні характеристики
застосування веб-додатків.
1. Доступність. Програма доступна з будь-якої точки планети, де є доступ
до Інтернету, з будь-якого пристрою:
- комп’ютера;
- ноутбука;
- смартфона;
- планшета і т.д.
2. Адаптивність. На відміну від нативних продуктів, web-application не
вимагають конкретної операційної системи. Вони працюють на всіх ОС і у всіх
існуючих браузерах:
- Опера;
- Хром;
- Файерфокс та ін.
З огляду на вищесказане, слід окремо відзначити їх економічність. Адже
немає необхідності розробляти окремі продукти для кожної ОС або браузера.
3. Відсутність програмного забезпечення для клієнтів. Не потрібно нічого
завантажувати і встановлювати. Це спрощує процес користування.
Також суттєво оптимізується процес обслуговування, модернізації
інтерфейсу. Всі оновлення активуються автоматично при завантаженні сторінки.
Арк.
ЧДТУ 22WEBC-2077.003.ПЗ
20
Змн. Арк. № Документа_ Підпис__ Дата
_

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

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

Мета розробки — створення веб-додатку підтримки клієнтів аптеки у
вигляді онлайн-сервісу з бронювання лікарських засобів для аптек, щоб
оптимізувати процес продажу товарів в умовах пандемії через коронавірус,
зменшити час, витрачений на обслуговування одного клієнта, розробити систему
бонусів для покупців та знизити можливі ризики захворювань.
Переваги онлайн-сервісу:
- Веб-додаток працюватиме цілодобово, тому покупець матиме можливість
дізнатися про наявність та забронювати ліки у зручний час, а потім за кілька хвилин
забрати їх в аптеці;
- Створення бази постійних клієнтів, які реєструватимуться на сайті та у
подальшому отримуватимуть знижки під час покупки ліків;
- Продаж рекламних площ онлайн-сервісу, як додаткове джерело доходу для
маленького підприємства;
- Підтримка послуги кур’єрської доставки, що забезпечить збільшення
кількості покупців, а також дозволить підвищити впізнаваність бренду для
можливого подальшого розширення;
- Зменшення ризику зараження вірусами завдяки доставці кур’єром або
зменшенню часу купівлі, бо провізор в аптеці заздалегідь підготує необхідні ліки;
- Після закінчення епідемії онлайн-сервіс дозволить зменшити черги в аптеці,
що призведе до збільшення кількості покупців та більшого прибутку.
Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 21
Змн. Арк. № Документа_ Підпис__ Дата
_

3 РОЗРОБКА СТРУКТУРНИХ, ФУНКЦІОНАЛЬНИХ ТА
ПРИНЦИПОВИХ РІШЕНЬ

3.1 Формування вимог до веб-додатку підтримки клієнтів аптеки

Після аналізу предметної області перейдемо до формування вимог до
розроблюваного веб-сервісу для бронювання ліків. У загальному вимоги до
програмного забезпечення можна поділити на дві групи: функціональні та
нефункціональні [13, 14].
Функціональні вимоги – це вимоги, які пов’язані з функціонуванням і
поведінкою самого ПЗ. Вони задаються користувачем ПЗ та визначають усю
функціональність усередині програмної системи [13]. Серед функціональних вимог
до розроблюваного веб-сервісу для бронювання ліків визначимо наступні:
- можливість пошуку користувачем ліків за їхньою назвою чи категорією;
- можливість додавання користувачем вибраних ліків до списку бронювань;
- надання можливості перегляду цін та зображень ліків;
- забезпечення можливості вибору кількості одиниць упакувань ліків при
оформленні бронювання;
- можливість оформлення й надсилання списку бронювань користувачем із
вказанням контактних даних;
- надання можливості для адміністратора веб-сервісу або менеджера аптеки за
допомогою адміністраторської панелі (адмін-панелі) отримання доступу до
записів, розміщених у базі даних;
- надання можливості для адміністратора або менеджера виконувати CRUD-
операції щодо записів у базі даних;
- можливість для адміністратора або менеджера вибору записів для виконання
операцій з ними;
- обмеження доступу для адміністратора або менеджера до записів з
оформленими бронюваннями: серед операцій доступний лише перегляд.

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 22
Змн. Арк. № Документа_ Підпис__ Дата
_

До іншої групи вимог належать нефункціональні вимоги. Нефункціональні
вимоги – вимоги, не пов’язані з функціональним аспектом ПЗ. Вони є неявними
характеристиками ПЗ, які користувачі припускають. Зазвичай нефункціональні
вимоги – це обмеження якості, яким повинна відповідати програмна система
[13, 14].
Сформуємо нефункціональні вимоги до розроблюваного веб-сервісу для
бронювання ліків:
- вимоги до графічного інтерфейсу користувача: ліки повинні
відображатися у вигляді окремих блоків, які місять інформацію про ліки та їх
зображення;
- розділення структури веб-додатку на дві частини: для взаємодії з
користувачем і для забезпечення роботи адміністратора веб-сервісу або менеджера
аптеки в адмін-панелі;
- забезпечення введення паролю при авторизації користувача в
адмінпанелі;
- реалізація реєстрації користувача в адмін-панелі;
- забезпечення зберігання записів про користувачів адмінпанелі в базі
даних, у яких пароль зберігається у вигляді хеш-значення, отриманого за
допомогою криптографічного алгоритму хешування;
- забезпечення того, щоб дані, які вводяться користувачем, перевірялися
на відповідність до певних комбінацій символів за допомогою регулярних виразів;
- забезпечення зберігання файлів усіх зображень за допомогою
технології CDN.
Звернемо увагу, що подані списки функціональних і нефункціональних
вимог до розроблюваного веб-сервісу для бронювання ліків не є кінцевими. У ході
подальшої розробки, проектування та підтримки веб-сервісу перелік вимог до
нього може доповнюватися й розширюватися.

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 23
Змн. Арк. № Документа_ Підпис__ Дата
_

3.2 Визначення зовнішніх сутностей і варіантів використання

Для більш точного опису функціональних вимог до розроблюваного веб-
сервісу для бронювання ліків та специфікації його функціональної поведінки
здійснимо визначення зовнішніх сутностей і варіантів використання веб-сервісу та
побудову відповідної діаграми варіантів використання.
Визначення зовнішніх сутностей та варіантів використання дозволяє
зрозуміти способи взаємодії зовнішніх користувачів з модельованою системою. У
загальному, суть моделювання варіантів використання полягає в тому, що, надати
можливість моделювати й розробляти систему з точки зору самого користувача
[15].
Діаграма варіантів використання (англ. use case diagram) призначена якраз
для візуального подання взаємодії користувача з системою, взаємозв’язків між різ-
ними варіантами використання й користувачами без відображення зайвих деталей
[15, 16]. Сама діаграма складається з таких компонентів:
- зовнішні сутності (актори);
- варіанти використання (прецеденти);
- зв’язки між варіантами використання та між зовнішніми сутностями;
- межі системи.
У ході розгляду компонентів діаграми варіантів використання будемо
описувати компоненти, які стосуються розроблюваного веб-сервісу для
бронювання ліків. Першим компонентом, який ми розглянемо, буде зовнішня
сутність.
Зовнішня сутність (актор, англ. actor) – це будь-який об’єкт, суб’єкт або
система, що ззовні взаємодіє з модельованою системою. Ця взаємодія полягає у
виконанні варіантів використання, необхідних зовнішній сутності для досягнення
своїх цілей. Для виконання певного варіанту використання системи зовнішня
сутність здійснює надсилання відповідних повідомлень [16].
Для розроблюваного веб-сервісу для бронювання ліків визначимо зовнішні
сутності "Користувач" та "Адміністратор".
Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 24
Змн. Арк. № Документа_ Підпис__ Дата
_

Зовнішня сутність "Користувач" представляє звичайного користувача веб-
додатку, який використовує його для пошуку й бронювання потрібних ліків.
Зовнішня сутність "Адміністратор" відображає адміністратора веб-додатку або
менеджера аптеки, який за допомогою нього має доступ до основних операцій із
записами в базі даних.
Для подання опису функціональної поведінки розроблюваного веб-додатку
побудуємо дві діаграми варіантів використання: для зовнішніх сутностей
"Користувач" і "Адміністратор". Діаграма варіантів використання для зовнішньої
сутності "Користувач" представлена на рисунку 3.1. Під час опису цієї діаграми
водночас розглянемо інші компоненти діаграми: варіанти використання, зв’язки та
межі системи.
Варіант використання (прецедент, англ. use case) відображає деяку частину
функціоналу, який може виконувати зовнішня сутність при взаємодії з
модельованою системою. Варіант використання призначений для специфікації
загального функціонування системи й не описує її внутрішньої структури [16].

Рисунок 3.1 – Діаграма варіантів використання для зовнішньої сутності
"Користувач"

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 25
Змн. Арк. № Документа_ Підпис__ Дата
_

Діаграма на рисунку 3.1 містить сім варіантів використання, які може
виконувати "Користувач" при взаємодії з веб-додатком для бронювання ліків. Усі
варіанти використання розміщені в межах розроблюваної системи.
Межі системи на діаграмі варіантів використання позначають саму систему
в цілому та використовуються для відокремлення зовнішніх сутностей і варіантів
використання системи, які з пов’язані [15]. У нашому випадку системою є веб-
додаток для бронювання ліків.
На діаграмі подано, що зовнішня сутність "Користувач" при взаємодії з
розроблюваним веб-додатком перебуває у зв’язку лише з чотирма варіантами
використання. Таким зв’язком є відношення асоціації. Відношення асоціації (англ.
association relationship) – один з типів відношень на діаграмі варіантів
використання, який описує взаємодію зовнішньої сутності з певним варіантом
використання та вказує на те, що ця зовнішня сутність ініціює його [16].
Таким чином, "Користувач" під час взаємодії з веб-додатком може
переглядати ліки, додати ліки до списку бронювань, визначити кількість одиниць
ліків для бронювання та здійснити надсилання списку бронювань. Примітка на
діаграмі вказує, що "Користувач" при надсиланні списку бронювань також виконує
надсилання своїх контактних даних. Як можемо побачити на діаграмі, решта
варіантів використання перебувають у відношеннях з цими варіантами
використання.
Також на діаграмі показано, що варіант використання "Переглядати ліки"
пов’язаний з варіантами використання "Здійснити пошук ліків" та "Сортувати ліки
за різними параметрами" за допомогою відношення розширення.
Відношення розширення (англ. extend relation) відображає зв’язок між
двома варіантами використання, у якому один варіант використання задає свою
поведінку в поведінці іншого лише за виконання певних умов [16]. Таким чином,
при виконанні варіанту використання "Переглядати ліки" можливе також
здійснення пошуку ліків і сортування ліків за різними параметрами. Такі
можливості були визначені у функціональних вимогах до веб-сервісу.

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 26
Змн. Арк. № Документа_ Підпис__ Дата
_

Після опису діаграми варіантів використання розроблюваного веб-додатку
для зовнішньої сутності "Користувач" перейдемо до визначення варіантів
використання для зовнішньої сутності "Адміністратор" і розгляду відповідної
діаграми. Цю діаграму зображено на рисунку 3.2.

Рисунок 3.2 – Діаграма варіантів використання для зовнішньої сутності
"Адміністратор"

На діаграмі з рисунку 3.2 бачимо, що зовнішня сутність "Адміністратор"
зв’язана відношеннями узагальнення з двома іншими сутностями:
"Незареєстрований адміністратор" та "Зареєстрований адміністратор".
Відношення узагальнення (англ. generalization relationship) – тип зв’язку між
зовнішніми су тностями або між варіантами використання, коли об’єкти мають
спільні властивості та є окремими випадками загального об’єкта. Таким чином,
відношення показує зв’язки типу «базовий-похідний» між об’єктами [15, 16]. Для
нашого випадку "Адміністратор", що представляє адміністратора й менеджера
аптеки, є загальним випадком для "Незареєстрованого адміністратора" й
"Зареєстрованого адміністратора".
На діаграмі в межах веб-додатку для бронювання знаходяться одинадцять
варіантів використання. Для окремих випадків "Адміністратора" асоційовано три
варіанти використання.

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 27
Змн. Арк. № Документа_ Підпис__ Дата
_

На діаграмі показано, що варіант використання "Робота з записами в базі
даних" є узагальненням варіантів використання "Робота з записами про
бронювання" й "Робота з записами про ліки". Таким чином, при здійсненні роботи
з записами в базі даних для адміністратора є доступною робота з записами про
бронювання і з записами про ліки.
Самий варіант використання "Робота з записами про бронювання" включає
у свою поведінку "Перегляд записів". Це означає, що для роботи з записа ми про
бронювання веб-сервіс дозволяє "Адміністратору" здійснювати лише перегляд цих
записів, що й було описано у функціональних вимогах. Натомість, відношення
включення, у яких перебуває варіант використання "Робота з записами про ліки",
показують, що цей варіант використання містить у собі функціональну поведінку,
яка надає можливість виконувати чотири основні CRUD-операції з записами про
ліки: "Перегляд записів", "Додавання нових записів", "Редагування записів" та
"Видалення записів".
Після того, як були визначені, які зовнішні сутності будуть взаємодіяти з
розроблюваним веб-додатком для бронювання ліків і які варіанти використання він
їм надає, можна перейти до опису архітектури веб-сервісу та визначення його
базової структури.

3.3 Проектування архітектури веб-додатку

Вибір архітектурної моделі для розроблюваного веб-додатку допомагає
визначити концепцію структури веб-додатку та описати зв’язки між його
структурними елементами. При виборі архітектурної моделі зупинимося на
архітектурі «клієнт-сервер».
Архітектура «клієнт-сервер» є найпопулярнішою концепцією для створення
програмних систем у розподілених мережах, таких, як Інтернет. Ця архітектурна
модель передбачає розділення системи на два типи компонентів [17]:
- сервери, що здійснюють надання послуг;
- клієнти, які використовують надані послуги.
Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 28
Змн. Арк. № Документа_ Підпис__ Дата
_

Таким чином, архітектура «клієнт-сервер» розділяє завдання між серверами
та клієнтами. Клієнти виконують ініціацію запитів до серверів на певні послуги, а
сервери здійснюють надання цих послуг. Взаємодія між клієнтами та серверами
здійснюється за допомогою мережі [18].
До основних переваг цієї архітектурної моделі можна віднести:
- доступ до послуг у будь-який час, у будь-якому місці;
- платформо-незалежність;
- покращена масштабованість;
- високий рівень продуктивності за рахунок розподілення системи;
- незалежність вузлів, яка полегшує їх заміну чи переміщення.
Одним з прикладів популярності моделі «клієнт-сервер» є її використання в
мережі всесвітнього павутиння [18, 19]. Саме на основі цього та на основі переваг
для проектування структури розроблюваного веб-додатку підтримки клієнтів, для
бронювання ліків вибираємо архітектуру «клієнт-сервер».
За функціональністю архітектура «клієнт-сервер» може мати декілька
різних рівнів. Залежно від їх кількості та призначення існують наступні типи цієї
моделі: однорівнева, дворівнева, трирівнева, N-рівнева архітектури [19].
Для майбутнього веб-додатку використаємо найбільш поширений тип
архітектури «клієнт-сервер» – трирівневу архітектуру (англ. three-tier architecture),
який розділяє програмну систему на три рівні [19, 20]:
- рівень представлення (англ. presentation tier) – містить інтерфейс
користувача, призначений для взаємодії кінцевого користувача з системою;
відповідає за відображення інформації й збирання даних від користувача;
- прикладний рівень (англ. application tier) – серце програмної системи;
здійснює обробку даних, зібраних на рівні представлення, на основі бізнес-логіки;
виконує операції з даними за допомогою взаємодії з рівнем даних;
- рівень даних (англ. data tier) – відповідає за доступ до даних; здійснює
збереження та управління даними, які обробляються в програмній системі.

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 29
Змн. Арк. № Документа_ Підпис__ Дата
_

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

Рисунок 1.3 – Схема веб-додатку підтримки клієнтів аптеки

З рисунку бачимо, що на рівні представлення розроблюваного веб-додатку
перебуває веб-браузер, який відображає інформацію для кінцевого користувача за
допомого найпопулярніших засобів: HTML-сторінок, CSS-стилів і JavaScript-
скриптів. JavaScript-скрипти також ініціюють запити для передачі даних від
користувача для їх обробки на прикладному рівня.
Прикладним рівнем є веб-сервер, у якому містяться модулі для генерування
сторінок та обробки запитів, отриманих від рівня представлення. Крім цього на
цьому рівні знаходяться модулі, що взаємодіють з базою даних і виконують усю
бізнес-логіку веб-додатку: отримання переліку ліків, надсилання бронювань,
отримання записів про ліки й бронювання тощо.
Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 30
Змн. Арк. № Документа_ Підпис__ Дата
_

За рівень даних відповідає сервер баз даних, на якому працює СКБД, яка
надає доступ до бази даних веб-додатку з питання бронювання ліків. СКБД
обробляє запитів, отримані від прикладного рівня, виконує операції над даними та
повертає до прикладного рівня результати виконання їх виконання [20].
Під час проектування веб-сервісу ми логічно об’єднуємо прикладний рівень
і рівень даних, так що вони утворюють сервер у моделі «клієнт-сервер», який
приймає запити від клієнта та виконує бізнес-логіку. Рівень представлення, таким
чином, відповідає за клієнта, що отримує дані від користувача й надсилає запити
до сервера для реалізації функціоналу [17, 19].

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 31
Змн. Арк. № Документа_ Підпис__ Дата
_

4 РОЗРОБКА, РОЗГОРТАННЯ ТА ВИКОРИСТАННЯ ВЕБ-ДОДАТКУ

4.1 Обґрунтування вибору засобів розробки веб-додатку підтримки
клієнтів аптеки

У ході розробки веб-додатку ключове значення має вибір засобів розробки.
Для розробки веб-сервісу, визначеного під час постановки завдання, необхідно
здійснити вибір засобів для функціонування на кожному рівні: для реалізації
інтерфейсу користувача, виконання бізнес-логіки і зберігання даних.
Нижче наведено перелік засобів, які були вибрані для розробки веб-додатку
підтримки клієнтів аптеки:
- PHP версії 7.1 – для реалізації бізнес-логіки і створення інтерфейсу користувача;
- Bootstrap версії 4.5 – для побудови елементів графічного інтерфейсу;
- JavaScript з jQuery версії 3.5 – для реалізації взаємодії користувача з графічним
інтерфейсом;
- MySQL версії 5.6 – для зберігання даних й роботи з базою даних.
Розглянемо особливості та переваги цих засобів, що вплинули на їх вибір
під час розробки веб-додатку для бронювання ліків.
Так, PHP – це одна з найпоширеніших скриптових мов програмування з
відкритим вихідним кодом. Основним способом використання PHP є запуск
скриптів на веб-сервері і їх обробка інтерпретатором для генерування HTML-
сторінок, які можна переглядати у веб-браузері.
До причин популярності мови PHP у веб-розробці належить простота її
освоєння: вона спеціально спроектована, щоб її код вбудовуватися в HTML-
розмітку й оброблятися інтерпретатором для генерування сторінки [21].
Іншою перевагою PHP підтримка багатьох операційних систем (Linux,
Windows, macOS, Solaris, FreeBSD) і сучасних веб-серверів (Apache, Internet
Information Services (IIS), Nginx). Ще однією вагомою перевагою PHP є простота
роботи з базами даних і підтримка широкого вибору СКБД.

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 32
Змн. Арк. № Документа_ Підпис__ Дата
_

Так, бібліотеки для підключення й роботи з БД підтримуються як з основні
СКБД (SQL Server, MySQL, Oracle), так і NoSQL-СКБД, як MongoDB [22, 23].
Таким чином, з урахування популярності та наведених переваг вибрали PHP
для реалізації бізнес-логіки розроблюваного веб-сервісу та створення інтерфейсу
користувача за допомогою генерування HTML-сторінок.
Водночас для реалізації інтерфейсу користувача веб-додатку підтримки
клієнтів аптеки з питання бронювання ліків використовуємо Bootstrap – один з
популярних безкоштовних фреймворків для простого і швидкого графічного
оформлення веб-сайтів. Фреймворк складається HTML- та CSS-шаблонів, які
надають інструментарій для побудови й оформлення графічних елементів
інтерфейсу користувача: кнопок, навігаційних панелей, форм, блоків, таблиць.
Bootstrap містить також деякі JS-скрипти, що використовуються для анімації
графічних елементів і взаємодії користувача з ними [24].
Простота та наявність великої кількості шаблонів визначили наш вибір
фреймворку Bootstrap для реалізації графічних елементів інтерфейсу користувача
при розробці веб-сервісу для бронювання ліків.
Для забезпечення взаємодії користувача з інтерфейсом розроблюваного веб-
додатку використовуємо JavaScript, що є найпопулярнішою скриптовою мовою
програмування, призначеною для побудови інтерактивних веб-сторінок. На стороні
веб-браузера розширення JavaScript дозволяють скриптам здійснювати управління
елементами веб-сторінок на основі моделі DOM (Document Object Model) та
реагувати на дії користувача: клацання мишею, заповнення форми, навігація
сторінкою [25].
Таким чином, для розробки веб-додатку разом з JavaScript будемо
використовувати бібліотеку jQuery. jQuery є легкою та швидкою JS-бібліотекою,
яка надає інструменти для спрощеної розробки скриптів з написанням меншої
кількості коду. До основних можливостей, які надає jQuery, належать [26]:
• управління елементами веб-сторінки за моделлю DOM через селектори
CSS і XPath та зручна реалізація обробки подій від користувача;

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 33
Змн. Арк. № Документа_ Підпис__ Дата
_

• вбудовані візуальні ефекти й анімації;
• підтримка взаємодії веб-браузера з сервером на основі AJAX;
• крос-браузерна підтримка JS-скриптів.
Зважаючи на популярність, широкий набір інструментів і простоту, для
реалізації взаємодії користувача з інтерфейсом розроблюваного веб-додатку
вибрали скриптову мову JavaScript та її бібліотеку jQuery.
При розробці веб-додатку підтримки клієнтів аптеки з моливостями
бронювання ліків у якості середовища для зберігання даних і здійснення доступу
до них ми використовуємо систему керування реляційними базами даних (СКРБД)
MySQL, яка розробляється й підтримується компанією Oracle та є однією з
найпопулярніших СКБД. Таким чином, система MySQL стала одним з невід’ємних
компонентів для зберігання даних для веб-розробки [27].
До переваг MySQL належать: висока продуктивність і великий набір
функціональних можливостей, використання стандартної мови SQL для роботи з
БД, підтримка багатопотоковості, висока масштабованість та можливість
використання великих БД.
Крім цього, до сильних сторін системи MySQL є підтримка великої
кількості платформ й операційних систем. Так, сервери MySQL можуть
запускатися в середовищах macOS, Linux, Windows, Solaris, FreeBSD тощо. Ще
однією сильною стороною MySQL є широкий вибір мов програмування, у яких
наявний інтерфейс для доступу до баз даних MySQL. До таких мов належать C,
C++, C#, PHP, Java, Perl, Python, Ruby [27, 28].
Таким чином, для вибору MySQL у якості СКБД при розробці веб-додатку
для бронювання ліків значно вплинули популярність у веб-розробці й підтримка
інтерфейсів у багатьох мовах програмування.

4.2 Розробка моделі даних веб-додатку

При виборі СКБД MySQL для функціонування на рівні даних в архітектурі
розроблюваного веб-сервісу ми визначили реляційну БД для зберігання даних.
Таким чином, для концептуального опису та розробки бази даних на основі
Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 34
Змн. Арк. № Документа_ Підпис__ Дата
_

предметної області найкращим варіантом є використання моделі «сутність-
зв’язок» (англ. entity-relationship). Модель «сутність-зв’язок» призначена для опису
структури БД. Основними складовими ER-моделі є типи сутності, їхні атрибути та
зв’язки між ними [29].
На рисунку 4.1 зображена діаграма, яка використовується для візуального
подання ER-моделі бази даних розроблюваного веб-додатку. Під час опису цієї
діаграми й розглянемо основні складові ER-моделі.

Рисунок 4.1 – ER-діаграма бази даних веб-додатку

Тип сутності (англ. entity type) – набір однорідних об’єктів предметної
області, для якої розробляється база даних [30]. На діаграмі з рисунку 4.1 типи
сутності відображаються у вигляді прямокутників. У цій ER-моделі виділили шість
наступних типів сутності: medicine, category, medicine_form, booking, booking_list і
administrator.
Кожен з цих типів сутності має свій перелік атрибутів (англ. attribute).
Атрибути використовуються для опису властивостей типу сутності. Вони
характеризують конкретний тип сутності. На ER-діаграмі (рисунок 2.1) атрибути
зображуються списками у прямокутниках типів сутності. Виділяють також два
особливі види атрибутів: первинні й зовнішні ключі.

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 35
Змн. Арк. № Документа_ Підпис__ Дата
_

Первинний ключ (англ. primary key, PK) може однозначно ідентифікувати
конкретний екземпляр типу сутності. Зовнішній ключ (англ. foreign key, FK)
використовується для реалізації зв’язку між двома типами сутності. Він позначає
конкретний екземпляр типу сутності, який має зв’язок з екземпляром іншого типу
сутності [30, 31].
Зв’язок (англ. relationship) визначає взаємодію між двома типами сутності.
На діаграмі на рисунку 2.1 зв’язки позначаються у вигляді ліній, що з’єднують типи
сутності. Для позначення зв’язків на цій діаграмі використовується нотація
«вороняча лапка» (англ. crow’s foot).
Залежно від виду зв’язку виділяють слабкий тип сутності, екземпляри якого
через зовнішні ключі залежать від інших типів сутності. Сильні типи сутності,
натомість, не залежать від інших типів сутності та їх екземпляри можуть
однозначно визначатися без використання зв’язків [29, 30].
Види зв’язку між типами сутності в ER-моделі визначаються його
кардинальністю. Кардинальність вказує можливу кількість екземплярів одного
типу сутності, що відповідають екземпляру іншого типу сутності, який перебуває
у зв’язку [31]. Кардинальності зв’язків розберемо під час опису типів сутностей ER-
моделі бази даних розроблюваного веб-сервісу для бронювання ліків.
Розглянемо тип сутності medicine. Цей тип сутності представляє ліки в нашій
базі даних. Відповідно до діаграми на рисунку 4.1 він містить наступні атрибути:
- id – ідентифікатор (первинний ключ);
- name – назва ліків;
- producter_name – назва виробника;
- category_id – ідентифікатор категорії (зовнішній ключ);
- medicine_form_id – ідентифікатор форми пакування (зовнішній ключ);
- price – ціна;
- picture_file – посилання, за яким зберігається файл з зображенням.
Тип сутності medicine має два зовнішні ключі. Таким чином, він є слабким.
Ці ключі визначають залежність medicine від типів сутності category та
medicine_form.
Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 36
Змн. Арк. № Документа_ Підпис__ Дата
_

Типи сутності category і medicine_form використовуються для реалізації
механізму категоріальних атрибутів medicine категорії ліків і форми пакування.
Так, category відображає категорію ліків, а medicine_form – відображає форму
пакування ліків. Обоє типи сутності мають однакові атрибути:
- id – ідентифікатор (первинний ключ);
- name – назва (категорії або форми пакування).
Оскільки серед перелічених атрибутів немає зовнішніх ключів, то типи
сутності category та medicine_form є сильними. Відносно типу сутності medicine він
перебуває у зв’язку "Належить до" або "Має" з типами сутності category та
medicine_form.
Кардинальність зв’язку – «нуль або багато до нуля або одного». Це означає,
що нулю або кільком екземплярам medicine відповідає нуль або один екземпляр
типів сутностей category і medicine_form. Таким чином один екземпляр ліків може
належати до однієї категорії або не належати до жодної категорії, яка існує, а також
він може мати одну форму пакування або не мати жодної форми пакування з тих,
які існують у базі даних [30, 31].
Розберемо тепер тип сутності booking. Він використовується для
представлення одного бронювання ліків. За ER-діаграмою до переліку його
атрибутів входять:
- id – ідентифікатор (первинний ключ);
- booking_list_id – ідентифікатор списку бронювань (зовнішній ключ);
- medicine_id – ідентифікатор ліків (зовнішній ключ);
- count – кількість одиниць ліків.
Тип сутності booking має два зовнішні ключі і, таким чином, залежить від
двох інших типів сутності. Через це booking є слабким типом сутності. За
допомогою зовнішнього ключа medicine_id тип сутності booking перебуває у
зв’язку "Містить" з типом сутності medicine з кардинальністю «нуль або багато до
одного й тільки одного». Так, екземпляр бронювання містить лише один екземпляр
ліків, а екземпляр ліків може міститися в кількох бронюваннях або не міститися в
жодному бронюванні, що зберігається в БД.
Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 37
Змн. Арк. № Документа_ Підпис__ Дата
_

Зовнішній ключ booking_list_id використовується для зв’язку "Входить до"
між типами сутності booking і booking_list. Кардинальністю. цього зв’язкує «один
або багато до одного й тільки одного». Тобто, один екземпляр бронювання може
входити до складу тільки одного списку бронювань (booking_list), а кожен список
бронювань може складатися з одного або кількох екземплярів бронювання [31].
Як вже вказали, тип сутності booking_list використовується для
представлення списку бронювань. Нижче подано список його атрибутів:
- id – ідентифікатор (первинний ключ);
- customer_phone – номер мобільного телефону користувача;
- customer_email – E-Mail адреса користувача;
- booking_time – час і дата створення списку бронювань.
Звідси ми бачимо, що серед атрибутів booking_list немає зовнішніх ключів.
Це вказує на те, що, booking_list є сильним типом сутності. Тип сутності
administrator призначений для зберігання записів про адміністраторів під час їх
авторизації до адмін-панелі. Тому цей тип сутності немає зв’язків з іншими типами
сутностей і, таким чином, є сильним. До атрибутів administrator належать дані,
необхідні для реєстрації й авторизації адміністратора:
- id – ідентифікатор (первинний ключ);
- login – логін адміністратора;
- email – E-Mail адреса адміністратора;
- password – хеш-значення паролю адміністратора.
На основі описаної ER-моделі в СКБД MySQL ми за допомогою SQL-
запитів створюємо відповідну реляційну базу даних pharm_booking. У рамках
створеної реляційної бази даних усі розглянуті типи сутності подаються у вигляді
таблиць з відповідними назвами, а їх атрибути – у вигляді стовпців відповідних
таблиць. Зв’язки між таблицями реалізовуються за допомогою обмежень на
первинні й зовнішні ключі для деяких стовпців [30, 31]. Назви створеної бази даних
обумовлена початковою назвою розроблюваного веб-додатку підтримки клієнтів
аптеки з питання бронювання ліків – «PharmBooking».

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 38
Змн. Арк. № Документа_ Підпис__ Дата
_

4.3 Розробка компонентів веб-додатку

У ході розробки веб-додатку підтримки клієнтів аптеки з питання
бронювання ліків його компоненти можна умовно поділити на дві частини. Одна
частина відповідає за функціональні можливості, пов’язані із взаємодією веб-
додатку з користувачем відповідно до розробленої діаграми варіантів використання
на рисунку 3.1. Друга частина відповідає за функціонал веб-сервісу при взаємодії з
адміністратором за допомогою адмін-панелі. Цей функціонал було описано в
діаграмі варіантів використання на рисунку 3.2.
Далі дослідимо поведінку компонентів та їх взаємодію між собою під час
роботи розроблюваного веб-сервісу для бронювання ліків. Спершу розглянемо
частину компонентів, які працюють при взаємодії з користувачем. У файловій
структурі розроблюваного веб-додатку (додаток А) до цих компонентів входять
майже всі файли кореневого каталогу. До компонентів, пов’язаних із взаємодією з
адміністратором, належать файли до каталогу «admin».
Функціонування компонентів, що відповідають за взаємодію з
користувачем, зручно аналізувати в контексті описаної трирівневої архітектури
веб-додатку. На рисунку 4.2 зображено схему розміщення файлів, які
використовуються при взаємодії з користувачем, на різних рівнях архітектури.

Рисунок 4.2 – Схема файлів, які пов’язані із взаємодією веб-додатку з
користувачем
Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 39
Змн. Арк. № Документа_ Підпис__ Дата
_

Як вже розглядали раніше, архітектура розроблюваного веб-додатку
складається з трьох рівнів: рівня представлення, прикладного рівня та рівня даних.
Раніше зазначали, що рівень даних зберігає й управляє даними. На цьому
рівні працює СКБД MySQL, яка містить базу даних веб-додатку.
Рівень представлення використовується для відображення інтерфейсу
користувача та отримання даних від нього. Розберемо, які файли, що пов’язані із
взаємодією з користувачем, містяться на цьому рівні. До них належать PHP-файли,
які відображають окремі сторінки розроблюваного веб-сервісу для бронювання
ліків. Код цих файлів подано в додатку В.
Першим таким файлом є «index.php» (лістинг В.1) – індексний файл, що
відображає головну сторінку веб-сервісу. Код цього файлу виводить на головну
сторінку кнопки, що дають можливість вибрати ліки за категорією. До цього файлу,
як і до інших, підключаються файли «navigation.php» і «footer.php» з каталогу
«templates», які відображають навігаційну панель і футер усіх сторінок веб-сервісу.
У навігаційній панелі розміщується поле для пошуку ліків за назвою, а також
посилання на головну сторінку (файл «index.php») та сторінку зі списком
бронювань (файл «booking.php»).
Перегляд ліків за категорією або через їх пошук за назвою реалізується
файлом «list.php» (лістинг В.2). Для отримання записів про ліки він використовує
файл «getmedicine.php» з каталогу «database». Для відображення ліків у вигляді
блоків використовується файл «display.php».
До «list.php» підключається файл «medicinelist.js» з каталогу «scripts»,
скрипт містить функціонал, що реагує на вибір способу сортування ліків і надсилає
AJAX-запити до файлу «sort.php» для отримання відсортованих записів про ліки. У
«medicinelist.js» також наявний функціонал для додавання вибраних ліків до списку
бронювань шляхом створення cookie у поточній сесії веб-браузеру. Крім цього до
«list.php» підключається файл «main.css» з каталогу «styles». Цей CSS-файл задає
загальні стилі для всіх сторінок веб-сервісу.
Як зазначалося, файл «booking.php» (лістинг В.3) призначений для
відображення списку бронювань та реалізації надсилання цього списку. Для
Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 40
Змн. Арк. № Документа_ Підпис__ Дата
_

виведення списку бронювань використовується механізм cookie, файли
«getmedicine.php» і «display.php».
До «booking.php» також підключається файл «bookinglist.js» з каталогу
«scripts», код якого використовується для відображення загальної суми бронювань,
видалення ліків зі списку бронювань та перевірки правильності введення
користувачем номеру телефону, E-Mail адреси у формі для надсилання списку
бронювань. Файли «successbooking.php» та «errorbooking.php», розміщені в
каталозі «templates» відображають сторінки з повідомленням про успішність або
помилку надсилання списку бронювань. Перейдемо до розгляду файлів,
розміщених на прикладному рівні. На цьому рівні виконується бізнес-логіка веб-
додатку, обробка даних, отриманих від користувача, взаємодія з СКБД.
До таких файлів належить «display.php», який, як вже було вказано,
використовується для відображення записів про ліки на сторінках перегляду ліків
(файл «list.php») і списку бронювань (файл «booking.php»). Файл «sort.php»
використовується для отримання AJAX-запиту від «medicinelist.js» та виведе ння
на сторінці «list.php» відсортованих записів про ліки у вигляді блоків. Для
отримання записів з БД «sort.php» використовує файл «getmedicine.php» з каталогу
«database». У файлі «mapping.php» зберігаються асоціативні масиви, які необхідні
для роботи багатьох файлів веб-додатку.
У каталозі «database» (додаток А) зберігаються файли, які можуть
взаємодіяти з базою даних в MySQL. Файл «connection.php» (лістинг В.4) містить
код для підключення до БД. У файлі «getmedicine.php» (лістинг В.5) зберігається
код, призначений для отримання з БД записів про ліки для їх відображення на
сторінках перегляду ліків і списку бронювань. Для підключення до БД
«getmedicine.php» використовує файл «connection.php».
Файл «savebooking.php» (лістинг В.6) використовується для збереження
списку бронювань. Для кращого опису процесу надсилання списку бронювань
скористаємося діаграмою діяльності (англ. activity diagram), призначеною для
візуалізації послідовності дій, які виконуються у процесах системи [32].

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 41
Змн. Арк. № Документа_ Підпис__ Дата
_

Діаграма діяльності процесу надсилання списку бронювань подана на
рисунку Б.1 (додаток Б). Основні елементи цієї діаграми ми розглянемо в ході її
розбору.
Діаграма діяльності на рисунку Б.1 складається з чотирьох доріжок. Доріжка
(англ. swimlane) відображає область, що обмежує дії, які виконуються одним
елементом системи. Так, надсилання та збереження списку бронювань
здійснюється за допомогою наступних чотирьох файлів: «booking.php», «save-
booking.php», «successbooking.php», «errorbooking.php».
Виконання процесу надсилання списку бронювань починається у
початковому стані (англ. initial state), що позначається зафарбованим кружком. Від
початкового стану стрілка веде до заокругленого прямокутника.
Стрілками зображуються потоки управління (англ. control flow), які
вказують на перехід між діяльностями. У заокруглених прямокутниках
записуються діяльності (англ. activity), що виконуються в процесі. Тоді, першою
діяльністю є надсилання списку бронювань, яке виконується у файлі «booking.php».
Далі стрілка потоку управління веде до ромба, з якого йдуть два
розгалуження. Ромбом на діаграмі позначається рішення (англ. decision) – точка
розгалуження потоку управління відповідно до умов. Умови, за яких виконується
перехід тим чи іншим шляхом, позначаються біля розгалужень у квадратних
дужках. Для процесу надсилання списку бронювань це означає перевірку
коректності надісланих даних.
Якщо дані були коректними, то потік управління веде до їх збереження у БД
файлом «savebooking.php». Далі здійснюється перехід до файлу «success-
booking.php», що відображає повідомлення про успіх надсилання. Виконання
процесу надсилання списку бронювань після цього завершується в кінцевому стані
(final state), що позначається кружком, зафарбованим у колі. В іншому випадку,
якщо дані є некоректними, здійснюється перехід до файлу «errorbooking.php», що
відображає сторінку з повідомленням про помилку. Після цього в кінцевому стані
й закінчується саме виконання процесу надсилання списку бронювань [32, 33].

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 42
Змн. Арк. № Документа_ Підпис__ Дата
_

Розглянемо тепер компоненти, що відповідають за взаємодію веб-додатку з
адміністратором, тобто, які відповідають за роботу адмін-панелі. Для цього також
використовуємо описану трирівневу архітектуру. Усі файли, пов’язані з адмін-
панеллю, містяться в каталозі «admin» (додаток А). Схема розміщення цих файлів
на рівнях архітектури розроблюваного веб-сервісу подана на рисунку 2.3. Код
файлів адмін-панелі міститься в лістингах додатку Г. Спочатку розберемо файли,
розміщені на рівні представлення. До них належать файли, які відображають окремі
сторінки адмін-панелі, файли з CSS-стилями й JS-скриптами.
Робота адмін-панелі починається з файлу «index.php» (лістинг Г.1),
розміщеного у каталозі «admin». Цей файл виводить форму для авторизації
користувача до адмін-панелі. У цій формі також відображається кнопка для
переходу до реєстрації адміністратора. До файлу «index.php», як і до інших файлів,
підключаються файли «navigation.php» і «footer.php» з каталогу «templates», що
відображають на сторінках навігаційне меню й футер.

Рисунок 4.3 – Схема файлів, які пов’язані із взаємодієювеб-сервісу з
адміністратором (адмін-панель)

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 43
Змн. Арк. № Документа_ Підпис__ Дата
_

У «registration.php» відображається сторінка з формою для реєстрації
користувача до адмін-панелі. Файл «panel.php» (лістинг Г.2) відображає робочу
сторінку адмін-панелі, у якій здійснюється перегляд записів про ліки і про
бронювання.
До цього файлу підключається також файл «adminpanel.js» у каталозі
«scripts» каталогу «admin» (додаток А). «adminpanel.js» містить JS-скрипт, що
обробляє дію вибору користувачем таблиці для перегляду: з записами про ліки або
з записами про бронювання. Для виведення потрібної таблиці «adminpanel.js»
здійснює надсилання AJAX-запиту до файлу «gettable.php». Крім цього,
«adminpanel.js» реалізує також виконання інших CRUD-операцій з записами про
ліки: створення, редагування й видалення.
Тоді, файли «addform.php» та «editform.php» у каталозі «medicine»
використовуються для відображення форм додавання й редагування запису про
ліки відповідно. До обох цих файлів підключається файл «medicine.js» з каталогу
«scripts». Скрипт цього файлу використовується для перевірки значень, які
вводяться у полях форм на сторінках файлів «addform.php» і «editform.php».
Розглянемо файли, що працюють на прикладному рівні. Одним з таких
файлів є «auth.php». Він відповідає за авторизацію користувача до адмін-панелі.
Авторизація користувача реалізовується шляхом створення відповідного cookie
після перевірки наявності запису в базі даних. Для перевірки даних
використовується хеш-значення введеного користувачем паролю.
Схожим чином працює файл «reg.php», призначений для реєстрації
користувача до адмін-панелі. Він здійснює зберігання нового запису про
адміністратора в БД і зберігає відповідний cookie, тим самим авторизуючи щойно
зареєстрованого адміністратора до адмін-панелі. Механізм cookie забезпечує
авторизовану сесію користувача в адмін-панелі. При встановленні авторизованої
сесії будь-який перехід на головну сторінку адмін-панелі перенаправляється до
сторінки файлу «panel.php», де виконується робота в адмін-панелі.

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 44
Змн. Арк. № Документа_ Підпис__ Дата
_

За реалізацію закриття авторизованої сесії відповідає файл «exit.php», що
запускається після натискання кнопки виходу з адмін-панелі у навігаційному меню.
Під час свого виконання файл «exit.php» просто видаляє cookie авторизованого
користувача й виконує перехід до головної сторінки адмін-панелі, на якій
виводиться форма авторизації.
Файл «gettable.php» (лістинг Г.3) призначений для відображення відповідної
таблиці з записами на сторінці файлу «panel.php». Для своєї роботи файл
використовує функціонал файлу «display.php» (лістинг Г.4), який розміщений у
каталозі «admin».
Для детальнішого розгляду роботи файлу «gettable.php» і виконання
процесу вибору таблиці для перегляду використаємо діаграму діяльності, подану
на рисунку Б.2 (додаток Б).
Ця діаграма складається з трьох доріжок, які відповідають файлам
«panel.php», «adminpanel.js» і «gettable.php». Самий процес вибору таблиці
починається з початкового стану у файлі «panel.php», що веде до вибору
користувачем таблиці, яку він хоче переглянути. Далі потоки управління ведуть до
файлу «adminpanel.js», що виконує надсилання AJAX-запиту до «gettable.php» для
отримання вибраних записів з БД.
У файлі «gettable.php» йде розгалуження потоків управління, за яким з БД
отримуються записи вибраної таблиці: або записи про ліки, або записи про
бронювання. Після цього стрілки ведуть до одного ромба, який відображає злиття
(англ. merge) потоків управління [32]. Так, після виконання файлу «gettable.php»
таблиця з записами назад повертається до «adminpanel.js».
Далі «adminpanel.js» виконує відображення отриманої таблиці на сторінці
файлу «panel.php», після чого йде кінцевий стан, у якому процес вибору таблиці
для перегляду закінчує своє виконання.
У каталозі «medicine» містяться файли, відповідальні за виконання
основних операцій з записами про ліки: додавання, створення та видалення.

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 45
Змн. Арк. № Документа_ Підпис__ Дата
_

Файл «database.php» (лістинг Г.5) реалізує виконання перелічених операцій
із записами про ліки в БД. Файли «add.php» і «edit.php» використовуються для
обробки форм у файлах «addform.php» і «editform.php» та для додавання й
редагування записів про ліки в БД. Файл «delete.php» призначений для видалення
вибраного запису про ліки з БД.
На цьому закінчується розробка компонентів веб-додатку для бронювання
ліків. Далі ми переходимо до розгортання розробленого веб-додатку й розміщення
його веб-хостингу для подальшого використання.

4.4 Розгортання веб-додатку

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

4.4.1 Перенесення зображень на CDN-хостинг

Для зберігання файлів з фотографіями ліків використовуємо розподілену
мережу CDN, яка дозволяє швидко доставляти до веб-сторінок статичні ресурси,
такі, як CSS-, JavaScript-файли, зображення. У якості CDN-хостингу вибираємо Sirv
[34], що спеціально призначений для зберігання, обробки й оптимізації
відображення зображень на веб-сайтах. Для використання послуг CDN-хостингу
Sirv створюємо в ньому обліковий запис з безкоштовним тарифом.
Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 46
Змн. Арк. № Документа_ Підпис__ Дата
_

Для надсилання файлів зображень на CDN-хостинг будемо використовувати
протокол передачі файлів FTP шляхом надсилання файлів на FTP-сервер CDN-
хостингу за допомогою FTP-клієнта. Для цього в налаштуваннях Sirv знаходимо
параметри підключення до FTP-сервера. Це подано на рисунку 4.4.

Рисунок 4.4 – Параметри підключення до FTP-сервера Sirv

Для пересилання файлів зображень на FTP-сервер CDN-хостингу Sirv
використовуємо FTP-клієнт з відкритим вихідним кодом FileZilla. У графічному
інтерфейсі FileZilla вводимо отримані параметри і відкриваємо з’єднання з FTP-
сервером CDN-хостингу Sirv. У файловій системі FTP-сервера створюємо каталог
«pharmbooking» та пересилаємо до цього всі файлі з зображеннями ліків. Після
цього закриваємо з’єднання з FTP-сервером. Далі переходимо у веб-інтерфейс
CDN-хостингу Sirv і переглядаємо переслані файли з зображеннями ліків. При
перегляді файлів з зображеннями можна отримати URL-посилання, за якими можна
отримати доступ до цих зображень. Це можна побачити на рисунку 4.5.

Рисунок 4.5 – Отримання URL-посилань на файли з зображеннями

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

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 47
Змн. Арк. № Документа_ Підпис__ Дата
_

4.4.2 Пересилання файлів веб-додатку на веб-хостинг

Для розміщення та запуску розробленого веб-сервісу на сервері у всесвітній
мережі використовуватимемо веб-хостинг 000webhost [35]. Вагомою перевагою
веб-хостингу 000webhost, яка посприяла його вибору, є наявність безкоштовного
тарифу та таких особливостей платних веб-хостингів, як підтримка PHP, MySQL і
cPanel.
Таким чином, у веб-хостингу 000webhost ми створюємо обліковий запис і
реєструємо веб-сайт за безкоштовним тарифом. Зареєстрований веб-сайт на
000webhost є доступним за адресою https://pharm-booking.000webhostapp.com.
Перенесення файлів веб-сервісу на веб-хостинг ми також будемо
здійснювати за допомогою протоколу FTP. Тоді у налаштуваннях веб-сайту на веб-
хостингу 000webhost знаходимо параметри FTP-підключення. Це зображено на
рисунку 4.6.
Для перенесення файлів веб-сервісу знову використовуємо FTP-клієнт
FileZilla. У вікні цієї програми вводимо параметри підключення та встановлюємо
з’єднання з FTP-сервером 000webhost. Далі у файловій системі FTP-сервера у
каталог «public_html» пересилаємо файли веб-сервісу.

Рисунок 4.6 – Параметри підключення до FTP-сервера 000webhost

На цьому ми й закінчуємо перенесення файлів розробленого веб-сервісу на
веб-хостинг 000webhost та закриваємо встановлене FTP-з’єднання.

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 48
Змн. Арк. № Документа_ Підпис__ Дата
_

4.4.3 Перенесення бази даних веб-додатку на веб-хостинг

Як вже раніше вказували, веб-хостинг 000webhost підтримує СКБД MySQL.
Для створення бази даних MySQL у 000webhost переходимо до менеджера баз
даних і натискаємо кнопку створення бази даних. У вікні, яке з’явилося, вводимо
назву БД, яку хочемо створити, ім’я користувача та пароль (рисунок 4.7). Далі
натискаємо кнопку для створення бази даних.

Рисунок 4.7 – Створення бази даних на веб-хостингу 000webhost

Після закінчення процесу створення БД у менеджері баз даних
відображається основна інформація про БД – параметри для підключення до неї. Ці
параметри потрібно прописати всередині розробленого веб-додатку для того, щоб
він міг підключатися саме до тієї БД, яка міститься на веб-хостингу.
Таким чином, отримані параметри підключення додаємо до коду файлу
«connection.php» з каталогу «database» (лістинг В.4, додаток В), що й відповідає за
підключення до БД. Після зміни файлу «connection.php» у локальному середовищі
за допомогою FileZilla знову з’єднуємося з FTP-сервером веб-хостингу й
надсилаємо оновлену версію файлу «connection.php».
Залишається лише перенести весь вміст локальної БД до БД на веб-
хостингу. Оскільки в локальному середовищі та на веб-хостингу для
адміністрування СКБД MySQL використовується веб-застосунок phpMyAdmin, то
можемо скористатися його функціоналом імпорту-експорту баз даних для
перенесення вмісту нашої БД.
Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 49
Змн. Арк. № Документа_ Підпис__ Дата
_

Для цього спочатку ми відкриваємо phpMyAdmin в локальному середовищі,
вибираємо БД pharm_booking. Далі у вкладці «Експорт» зберігаємо файл
«pharm_booking.sql» в локальному середовищі. У цьому файлі містяться SQL-
запити для створення всіх таблиць БД і заповнення їх певними значеннями.
Після цього запускаємо phpMyAdmin на веб-сервері, вибираємо БД, у яку
хочемо перенести дані, і відкриваємо вкладку «Імпорт». Це показано на
рисунку 4.8.

Рисунок 4.8 – Перенесення вмісту бази даних на веб-хостинг

У цій вкладці ми завантажуємо файл з нашою БД «pharm_booking.sql». Тоді
на веб-хостингу phpMyAdmin запускає виконання запитів, що містяться в цьому
файлі, і, таким чином, додає необхідний вміст до своєї БД.

4.5 Демонстрація роботи веб-додатку

Після завершення розгортання веб-додатку підтримки клієнтів аптеки для
бронювання ліків можемо перейти до демонстрації його роботи. Знімки екрана, які
демонструють роботу розробленого веб-сервісу «PharmBooking», подані в
додатку Д.
Спочатку опишемо демонстрацію роботи веб-додатку для бронювання ліків
зі звичайним користувачем. Робота з веб-додатком починаємо з головної сторінки
(рисунок Д.1).
На ній відображається список кнопок, призначених для перегляду ліків за
певною категорією. Зверху, у навігаційній панелі, розміщене поле для пошуку ліків
Арк.
ЧДТУ 22WEBC-2077.003.ПЗ
50
Змн. Арк. № Документа_ Підпис__ Дата
_

за назвою. Для перегляду ліків, що належать до категорії протизастудних,
натискаємо кнопку «Протизастудні».
Після цього з’являється нове вікно, у якому відображаються ліки у вигляді
блоків (рисунок Д.2). У кожному блоці міститься назва ліків, їх форма пакування,
виробник, ціна та фото, а також кнопка для бронювання ліків. Натискаємо цю
кнопку для двох ліків.
Після цього з’являються повідомлення, які вказують, що вибрані ліки було
додано до списку бронювань (рисунок Д.3). Далі в навігаційній панелі натискаємо
кнопку для переходу до списку бронювань.
На сторінці списку бронювань відображаються ліки, які були додані до
нього раніше (рисунок Д.4). Для кожних ліків у списку бронювань вибираємо
кількість одиниць для бронювання. Зауважимо, що при цьому внизу змінюється
відображення загальної вартості бронювань.
Для надсилання списку записуємо у відповідних полях номер телефону й E-
Mail (рисунок Д.5). Далі натискаємо кнопку «Надіслати». Після цього
завантажується сторінка, яка містить повідомлення про успішне надсилання списку
бронювань (рисунок Д.6).
Розглянемо демонстрацію роботи веб-додатку з адміністратором, тобто
демонстрацію роботи в адмін-панелі. Для переходу до адмін-панелі натискаємо
кнопку «Адмін-панель» на футері будь-якої сторінки веб-сервісу.
На головній сторінці адмін-панелі відображається форма авторизації
(рисунок Д.7). Внизу, під формою авторизації, відображається кнопка для
реєстрації користувача. Записуємо в полях форми авторизації логін і пароль
адміністратора.
Оскільки логін та пароль були правильними, то завантажується робоча
сторінка адмін-панелі (рисунок Д.8). На цій сторінці відображається лише
випадний список, у якому можна вибрати таблицю для перегляду.
Вибираємо в цьому списку таблицю з записами про ліки. Відразу після
цього вибору на сторінці з’являється таблиця, що містить записи про ліки
(рисунок Д.9).
Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 51
Змн. Арк. № Документа_ Підпис__ Дата
_

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

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 52
Змн. Арк. № Документа_ Підпис__ Дата
_

ВИСНОВКИ

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

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ
53
Змн. Арк. № Документа_ Підпис__ Дата
_

ДОДАТОК А
СХЕМА ФАЙЛОВОЇ СТРУКТУРИ ВЕБ-ДОДАТКУ

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 54
Змн. Арк. № Документа_ Підпис__ Дата
_

ДОДАТОК Б
ДІАГРАМИ ДІЯЛЬНОСТІ ДЕЯКИХ ПРОЦЕСІВ У ВЕБ-ДОДАТКУ

Рисунок Б.1 – Діаграма діяльності процесу надсилання списку бронювань

Рисунок Б.2 – Діаграма діяльності процесу вибору таблиці для перегляду
Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 55
Змн. Арк. № Документа_ Підпис__ Дата
_

ДОДАТОК В
ЛІСТИНГИ ФАЙЛІВ КОМПОНЕНТІВ, ЩО ВІДПОВІДАЮТЬ ЗА
ВЗАЄМОДІЮ З КОРИСТУВАЧЕМ

Лістинг В.1 – Код файлу «index.php»
<?php
// Визначення файлу сторінки
define('PAGE_FILE', "index.php");
require_once "mapping.php";
?>
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title><?=$title_map[PAGE_FILE] . " - PharmBooking"?></title>
<link rel="stylesheet" type="text/css"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootst
rap.min.css">
<link rel="stylesheet" type="text/css" href="styles/main.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.m
in.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstra
p.min.js"></script>
</head>
<body>

<?php require "templates/navigation.php"; // Навігаційна панель ?>

<main class="bg-light pt-sm-3 pb-sm-3" id="page">
<div class="container">
<form action="list.php" method="get" class="mx-auto w-75
pt-3 pb-5">
<h3 class="pb-3">Категорії ліків</h3>
<?php foreach (array_keys($category_map) as $key): ?>
<button type="submit" class="col mb-2 btn btn-info
btn-lg" name="category" value="<?=$key?>">
<?=$category_map[$key]?>
</button>
<?php endforeach; ?>
</form>
</div>
</main>

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 56
Змн. Арк. № Документа_ Підпис__ Дата
_

<?php require "templates/footer.php"; // Футер ?>

</body>
</html>

Лістинг В.2 – Код файлу «list.php»
<?php
// Визначення файлу сторінки
define('PAGE_FILE', "list.php");
require_once "mapping.php";
?>
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title><?=$title_map[PAGE_FILE] . " - PharmBooking"?></title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootst
rap.min.css">
<link rel="stylesheet" href="styles/main.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.m
in.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstra
p.min.js"></script>
<script src="scripts/medicinelist.js"></script>
</head>
<body>

<?php
require "templates/navigation.php"; // Навігаційна панель
require_once "display.php";
?>


<main class="bg-light pt-sm-3 pb-sm-3" id="page">
<div class="container">
<div class="clearfix mb-sm-3">
<?php if (isset($_GET['category'])): // Вибрано певну
категорію ?>
<div class="float-sm-left">
<h3><?=$category_map[$_GET['category']]?></h3>
</div>
<?php endif; ?>
<div class="form-inline float-sm-right">

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 57
Змн. Арк. № Документа_ Підпис__ Дата
_

<label for="#sort-by" class="mr-sm-2">Спосіб
сортування</label>
<select name="sort-by" id="sort-by" class="form-
control">
<option value="price-asc">Спочатку
найдешевші</option>
<option value="price-desc">Спочатку
найдорожчі</option>
<option value="name-asc">За алфавітом</option>
</select>
<input type="hidden" id="query"
value="<?=$_GET['query'] . " "?>">
<input type="hidden" id="category"
value="<?=$_GET['category']?>">
</div>
</div>
<?php
require_once "database/getmedicine.php";
// Якщо здійснено пошук за назвою
if (isset($_GET['query'])) {
$name = filter_var(trim($_GET['query']),
FILTER_SANITIZE_STRING);
// Пошук ліків за назвою
$medicines = search($name);
}
// Якщо вибрано певну категорію
elseif (isset($_GET['category'])) {
$category = filter_var(trim($_GET['category']),
FILTER_SANITIZE_STRING);
// Отримання ліків за категорією
$medicines = get_by_category($category);
}
// Якщо отримано якісь ліки за запитом
if (!empty($medicines)) {
display_list($medicines);
}
// Якщо ліків за запитом не було отримано
else {
echo '<div class="centered-text pt-sm-5">';
echo '<h4>Ліків не знайдено</h4></div>';
}
?>
</div>
</main>


<?php require "templates/footer.php"; // Футер ?>

</body>
</html>

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ
58
Змн. Арк. № Документа_ Підпис__ Дата
_

Лістинг В.4 – Код файлу «connection.php»

<?php
// Параметри підключення до БД
$db_params = array(
'hostname' => "localhost",
'username' => "id15815584_booking_user",
'password' => "XXXXXXXXXXXXXXXX",
'dbname' => "id15815584_pharm_booking"
);
// Встановлює з'єднання з БД
function connect()
{
global $db_params;
$mysqli_conn = new mysqli($db_params['hostname'],
$db_params['username'], $db_params['password'],
$db_params['dbname']);
if ($mysqli_conn->connect_error) {
echo 'Помилка підключення: ' . $mysqli_conn->connect_error;
exit();
}
return $mysqli_conn;
}
// Повертає асоціативний масив від об'єкта mysqli_result
function result_array($query_result)
{
$entries = array();
for ($i = 0; $entry = $query_result->fetch_assoc(); $i++) {
$entries[$i] = $entry;
}
return $entries;
}

Лістинг В.5 – Код файлу «getmedicine.php»

<?php
require_once "connection.php";
require_once "./mapping.php";
// Здійснює отримання ліків з БД через пошук за назвою
function search($name, $sortby = "price-asc")
{
global $sortby_map;
$conn = connect(); // Підключення до БД
// SQL-запит до БД
$query = "SELECT * FROM view_medicine
WHERE view_medicine.name LIKE CONCAT(?, '%')
ORDER BY " . $sortby_map[$sortby];
if ($stmt = $conn->prepare($query)) { // Підготовка виразу
// Встановлення змінних до параметрів
$stmt->bind_param('s', $name);
$stmt->execute(); // Виконання
$result = $stmt->get_result(); // Результати виконання

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 59
Змн. Арк. № Документа_ Підпис__ Дата
_

// Отримання асоціативного масиву ліків
$medicines = result_array($result);
// Закриття підготовленого виразу
$stmt->close();
}
else {
echo 'Помилка виконання запиту: ' . $conn->connect_error;
exit();
}
$conn->close(); // Закриття підключення до БД
return $medicines; // Повернення масиву ліків
}
// Здійснює отримання ліків з БД за певною категорією
function get_by_category($category, $sortby = "price-asc")
{
global $category_map, $sortby_map;
$conn = connect(); // Підключення до БД
// Назва категорії
$category_name = $category_map[$category];
// SQL-запит до БД
$query = "SELECT * FROM view_medicine
WHERE view_medicine.category = '$category_name'
ORDER BY " . $sortby_map[$sortby];
// Отримання результатів виконання запиту
if ($result = $conn->query($query)) {
// Отримання асоціативного масиву ліків
$medicines = result_array($result);
$result->free(); // Звільнення пам'яті
}
else {
echo 'Помилка виконання запиту: ' . $conn->connect_error;
exit();
}
$conn->close(); // Закриття підключення до БД
return $medicines; // Повернення масиву ліків
}
// Здійснює отримання з БД ліків на бронювання
function get_booking_list($medicine_ids)
{
$conn = connect(); // Підключення до БД
$ids_list = ""; // Список з ID ліків на бронювання
foreach ($medicine_ids as $medicine_id) {
$ids_list .= "$medicine_id, ";
}
$ids_list = substr($ids_list, 0, -2);
// SQL-запит до БД
$query = "SELECT id, `name`, medicine_form, producter_name,
price
FROM view_medicine
WHERE view_medicine.id IN ($ids_list)";
// Отримання результатів виконання запиту
if ($result = $conn->query($query)) {

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 60
Змн. Арк. № Документа_ Підпис__ Дата
_

// Отримання асоціативного масиву ліків
$booking_medicines = result_array($result);
$result->free(); // Звільнення пам'яті
}
else {
echo 'Помилка виконання запиту: ' . $conn->connect_error;
exit();
}
$conn->close(); // Закриття підключення до БД
return $booking_medicines; // Повернення масиву ліків на
бронювання
}

Лістинг В.6 – Код файлу «savebooking.php»

<?php
require_once "connection.php";
if (isset($_POST['booking'], $_POST['count'], $_POST['phone'],
$_POST['email'])) {
$booking_ids = array_keys($_POST['booking']); // ID ліків на
бронювання
$booking_counts = $_POST['count']; // Кількості ліків на
бронювання
// Номер телефону
$phone_number = filter_var(trim($_POST['phone']),
FILTER_SANITIZE_STRING);
// E-Mail
$email = filter_var(trim($_POST['email']),
FILTER_SANITIZE_STRING);
// Якщо E-Mail введено
if ($email != "") {
// Збереження списку бронювань в БД з номером телефону й E-Mail
$booking_list_id = save_booking_list($phone_number, $email);
}
else {
// Збереження списку бронювань в БД тільки з номером телефону
$booking_list_id = save_booking_list($phone_number);
}
// Якщо масиви ID ліків на бронювання і їх
// кількостей не порожні та їхні розміри однакові
if (!empty($booking_ids) && !empty($booking_counts) &&
(count($booking_ids) == count($booking_counts))) {
// Збереження бронювань
save_bookings($booking_ids, $booking_counts,
$booking_list_id);
// Видалення відповідних cookie
erase_medicine_cookies($booking_ids);
// Перенаправлення на сторінку з повідомленням
// про успішність надсилання списку бронювань
header("Location: /templates/successbooking.php");
}

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 61
Змн. Арк. № Документа_ Підпис__ Дата
_

else {
// Перенаправлення на сторінку з повідомленням про помилку
header("Location: /templates/errorbooking.php");
}
}
else {
// Перенаправлення на сторінку з повідомленням про помилку
header("Location: /templates/errorbooking.php");
}
// Видаляє cookie для ліків за вказаним ID
function erase_medicine_cookies($medicine_ids)
{
foreach ($medicine_ids as $medicine_id) {
// Видалення cookie - встановлення його з часом існування на
1 годину назад
setcookie("medicine[$medicine_id]", 0, time() - 3600, "/");
}
}
// Здійснює cтворення нового списку
// бронювань у БД та повернення його ID
function save_booking_list($phone, $email = NULL)
{
$conn = connect(); // Підключення до БД
if ($email != NULL) {
// Якщо задано E-Mail, то SQL-запит призначений для
cтворення
// нового списку із вказанням номеру телефону й E-Mail
$query = "CALL set_booking_list(?, ?)";
}
else {
// Якщо E-Mail не задано, то SQL-запит призначений для
cтворення
// нового списку тільки із вказанням номеру телефону
$query = "CALL set_booking_list(?, NULL)";
}
if ($stmt = $conn->prepare($query)) { // Підготовка виразу
if ($email != NULL) {
// Якщо що задано E-Mail, то до параметрів підготовленого
// виразу встановлюється номер телефону й E-Mail
$stmt->bind_param('ss', $phone, $email);
}
else {
// Якщо E-Mail не задано, то до параметрів підготовленого
// виразу встановлюється тільки номер телефону
$stmt->bind_param('s', $phone);
}
$stmt->execute(); // Виконання підготовленого виразу
// Результати виконання
$result = $stmt->get_result();
// Отримання ID створеного списку
$id_array = result_array($result)[0];

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ
62
Змн. Арк. № Документа_ Підпис__ Дата
_

$stmt->close(); // Закриття підготовленого виразу
}
else {
echo 'Помилка виконання запиту: ' . $conn->connect_error;
exit();
}
$conn->close(); // Закриття підключення до БД
return $id_array['id']; // Повернення ID створеного списку
}
// Здійснює збереження бронювань у БД за вказаними масивами
// ID ліків, їхніми кількостями та ID списку бронювань
function save_bookings($ids, $counts, $list_id)
{
$conn = connect(); // Підключення до БД
// Початок SQL-запиту до БД
$query = "INSERT INTO booking
(booking_list_id, medicine_id, `count`)
VALUES ";
// Додавання до SQL-запиту місця для
// додавання заданої кількості бронювань
for ($i = 0; $i < count($ids); $i++) {
$query .= "(?, ?, ?), ";
}
$query = substr($query, 0, -2);
if ($stmt = $conn->prepare($query)) { // Підготовка виразу
$types = array(""); // Рядок для типів значень змінних
$vars = array(); // Масив для значень змінних
foreach ($ids as $key => $id) {
$types[0] .= "iii";
array_push($vars, $list_id, $ids[$key], $counts[$id]);
}
$vars = array_merge($types, $vars);
// Параметрів методу bind_param()
$params = array();
foreach ($vars as $key => $var) {
$params[$key] = &$vars[$key];
}
// Виклик методу bind_param() з відповідними параметрами
// для встановлення змінних до підготовленого виразу
call_user_func_array(array($stmt, 'bind_param'), $params);
$stmt->execute(); // Виконання підготовленого виразу
$stmt->close(); // Закриття підготовленого виразу
}
else {
echo 'Помилка виконання запиту: ' . $conn->connect_error;
exit();
}
$conn->close(); // Закриття підключення до БД
}

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 63
Змн. Арк. № Документа_ Підпис__ Дата
_

ДОДАТОК Г
ЛІСТИНГИ ФАЙЛІВ КОМПОНЕНТІВ, ЩО ВІДПОВІДАЮТЬ ЗА
ВЗАЄМОДІЮ З АДМІНІСТРАТОРОМ

Лістинг Г.1 – Код файлу «index.php» у каталозі «admin»

<?php
// Визначення файлу сторінки
define('PAGE_FILE', "admin/");
require_once "../mapping.php";
if (isset($_COOKIE['administrator'])) {
// Якщо встановлено cookie "administrator", тобто
адміністратор авторизований,
// то виконується перенаправлення на сторінку роботи в адмін-
панелі
header("Location: panel.php");
}
?>
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title><?=$title_map[PAGE_FILE] . " - PharmBooking"?></title>
<link rel="stylesheet" type="text/css"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootst
rap.min.css">
<link rel="stylesheet" type="text/css" href="/styles/main.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.m
in.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstra
p.min.js"></script>
</head>
<body>

<?php require "../templates/navigation.php"; // Навігаційна
панель ?>


<main class="bg-light pt-sm-3 pb-sm-3" id="page">
<div class="container">
<form action="auth.php" method="post">
<div class="mt-sm-5 mb-sm-4 centered-text">
<h3>PharmBooking</h3>
<h4>Адмін-панель</h4>
</div>

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 64
Змн. Арк. № Документа_ Підпис__ Дата
_

<div class="mx-auto" style="width: 30%;">
<div class="form-group mb-sm-3">
<input type="text" name="input-login" class="form-
control" placeholder="Введіть логін" required>
</div>
<div class="form-group mb-sm-3">
<input type="password" name="input-password"
class="form-control" placeholder="Введіть пароль" required>
</div>
<div class="form-group mb-sm-3">
<button type="submit" class="btn btn-info btn-
block">Авторизуватися</button>
</div>
<div class="form-group">
<a href="registration.php" class="btn btn-link btn-
block">Реєстрація</a>
</div>
</div>
</form>
</div>
</main>


<?php require "../templates/footer.php"; // Футер ?>

</body>
</html>

Лістинг Г.2 – Код файлу «panel.php»

<?php
// Визначення файлу сторінки
define('PAGE_FILE', "admin/panel.php");
require_once "../mapping.php";
if (!isset($_COOKIE['administrator'])) {
// Якщо не встановлено cookie "administrator", тобто
адміністратор не авторизований,
// то виконується перенаправлення на сторінку авторизації в
адміністративній панелі
header("Location: .");
}
?>
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 65
Змн. Арк. № Документа_ Підпис__ Дата
_

<title><?=$title_map[PAGE_FILE] . " - PharmBooking"?></title>
<link rel="stylesheet" type="text/css"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootst
rap.min.css">
<link rel="stylesheet" type="text/css" href="/styles/main.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.m
in.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstra
p.min.js"></script>
<script src="scripts/adminpanel.js"></script>
</head>
<body>

<?php require "../templates/navigation.php"; // Навігаційна
панель ?>


<main class="bg-light pt-sm-3 pb-sm-3" id="page">
<div class="container">
<div class="form-inline mb-sm-3" id="choose-table">
<select id="table-name" class="form-control">
<option value="">Виберіть таблицю для
перегляду</option>
<option value="medicine">Ліки</option>
<option value="booking">Бронювання</option>
</select>
</div>
<table class="table table-striped table-hover"></table>
</div>
</main>


<?php require "../templates/footer.php"; // Футер ?>

</body>
</html>

Лістинг Г.3 – Код файлу «gettable.php»

<?php
require_once "../database/connection.php";
require_once "display.php";
Г4
if (isset($_GET['tablename'])) {
// Назва таблиці
$tablename = filter_var(trim($_GET['tablename'],
FILTER_SANITIZE_STRING));

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 66
Змн. Арк. № Документа_ Підпис__ Дата
_

if ($tablename == "medicine") {
// Якщо задано таблицю з ліками, то виводиться таблиця з
ліками
get_medicines();
}
elseif ($tablename == "booking") {
// Якщо задано таблицю з бронюваннями, то виводиться таблиця
з бронюваннями
get_bookings();
}
}
// Виводить таблицю з ліками, отриманими з БД
function get_medicines()
{
$conn = connect(); // Підключення до БД
// SQL-запит до БД на отримання ліків
$query = "SELECT * FROM view_medicine ORDER BY `name` ASC";
// Отримання результатів виконання запиту
if ($result = $conn->query($query)) {
$medicines = result_array($result); // Отримання
асоціативного масиву
$result->free(); // Звільнення пам'яті
}
else {
echo 'Помилка виконання запиту: ' . $conn->connect_error;
exit();
}
// Закриття підключення до БД
$conn->close();
// Відображення таблиці з бронюваннями
display_medicine_table($medicines);
}
// Виводить таблицю з бронюваннями, отриманими з БД
function get_bookings()
{
$conn = connect(); // Підключення до БД
// SQL-запит до БД на отримання бронювань
$query = "SELECT * FROM view_booking ORDER BY booking_time
DESC";
Г5
// Отримання результатів виконання запиту
if ($result = $conn->query($query)) {
$bookings = result_array($result); // Отримання
асоціативного масиву
$result->free(); // Звільнення пам'яті
}
else {
echo 'Помилка виконання запиту: ' . $conn->connect_error;
exit();
}
// Закриття підключення до БД
$conn->close();
// Відображення таблиці з бронюваннями
Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 67
Змн. Арк. № Документа_ Підпис__ Дата
_

display_booking_table($bookings);
}

Лістинг Г.4 – Код файлу «display.php» у каталозі «admin»

<?php
// Відображає таблицю з бронюваннями
function display_booking_table($bookings)
{
echo '<thead><tr>';
echo '<th>Час</th>';
echo '<th>Номер телефону</th>';
echo '<th>E-Mail</th>';
echo '<th>Назва ліків</th>';
echo '<th>Кількість одиниць</th>';
echo '</tr></thead>';
// Відображення окремих бронювань
echo '<tbody>';
foreach ($bookings as $booking) {
echo '<tr><td>' .
date_format(date_create($booking['booking_time']), "d.m.Y
H:i:s") . '</td>';
echo '<td>' . $booking['customer_phone'] . '</td>';
echo '<td>' . $booking['customer_email'] . '</td>';
echo '<td>' . $booking['medicine_name'] . '</td>';
echo '<td>' . $booking['medicine_count'] . '</td></tr>';
}
echo '</tbody>';
}
// Відображає таблицю з ліками
function display_medicine_table($medicines)
{
echo '<thead><tr>';
echo '<th>Назва</th>';
Г6
echo '<th>Виробник</th>';
echo '<th>Категорія</th>';
echo '<th>Ціна</th>';
echo '<th>URL зображення</th>';
echo '</tr></thead>';
// Відображення окремих ліків
echo '<tbody>';
foreach ($medicines as $medicine) {
display_medicine_row($medicine);
}
echo '</tbody>';
}
// Відображає окремий рядок з ліками в таблиці
function display_medicine_row($medicine)
{
echo '<tr id="' . $medicine['id'] . '">';

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 68
Змн. Арк. № Документа_ Підпис__ Дата
_

echo '<td>' . $medicine['name'] . ' (' .
$medicine['medicine_form'] . ')</td>';
echo '<td>' . $medicine['producter_name'] . '</td>';
echo '<td>' . $medicine['category'] . '</td>';
echo '<td>' . $medicine['price'] . ' грн</td>';
echo '<td><a href="' . $medicine['picture_file'] . '">' .
$medicine['picture_file'] . '</a></td>';
echo '<td><a href="medicine/editform.php?id=' .
$medicine['id'] . '">Редагувати</a><br>';
echo '<a href="#" class="del-btn" data-id="' . $medicine['id']
. '">Видалити</a></td></tr>';
}

Лістинг Г.5 – Код файлу «database.php»

<?php
require_once "../../database/connection.php";
// Повертає ID категорії з БД за вказаною назвою
function get_category_id($name)
{
$conn = connect(); // Підключення до БД
// SQL-запит
$query = "SELECT id FROM category WHERE `name` = ?";
if ($stmt = $conn->prepare($query)) { // Підготовка виразу
// Встановлення назви категорії до параметрів підготовленого
виразу
$stmt->bind_param('s', $name);
$stmt->execute(); // Виконання підготовленого виразу
$result = $stmt->get_result(); // Результати виконання
Г7
$id_array = result_array($result)[0]; // Отримання ID
категорії
$stmt->close(); // Закриття підготовленого виразу
}
else {
echo 'Помилка виконання запиту: ' . $conn->connect_error;
exit();
}
$conn->close(); // Закриття підключення до БД
return $id_array['id']; // Повернення ID категорії
}
// Повертає ID форми пакування з БД за вказаною назвою
function get_medicine_form_id($name)
{
$conn = connect(); // Підключення до БД
// SQL-запит
$query = "SELECT id FROM medicine_form WHERE `name` = ?";
if ($stmt =$conn->prepare($query)) { // Підготовка виразу
// Встановлення назви форми пакування до параметрів
підготовленого виразу
$stmt->bind_param('s', $name);
$stmt->execute(); // Виконання підготовленого виразу

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 69
Змн. Арк. № Документа_ Підпис__ Дата
_

$result = $stmt->get_result(); // Результати виконання
$id_array = result_array($result)[0]; // Отримання ID форми
пакування
$stmt->close(); // Закриття підготовленого виразу
}
else {
echo 'Помилка виконання запиту: ' . $conn->connect_error;
exit();
}
mysqli_close($conn); // Закриття підключення до БД
return $id_array['id']; // Повернення ID форми пакування
}
// Повертає запис ліків з БД за вказаним ID
function get_medicine_by_id($id)
{
$conn = connect(); // Підключення до БД
// SQL-запит до БД
$query = "SELECT * FROM view_medicine WHERE id = ?";
if ($stmt = $conn->prepare($query)) { // Підготовка запиту
// Встановлення ID запису до параметрів підготовленого
виразу
$stmt->bind_param('i', $id);
Г8
$stmt->execute(); // Виконання підготовленого виразу
$result = $stmt->get_result(); // Результати виконання
$medicine_array = result_array($result); // Отримання
асоціативного масиву
$stmt->close(); // Закриття підготовленого виразу
}
else {
echo 'Помилка виконання запиту: ' . $conn->connect_error;
exit();
}
$conn->close(); // Закриття підключення до БД
return $medicine_array[0]; // Повернення масиву із записом
}
// Додає запис ліків у БД із вказаними полями
function add_medicine($entry)
{
$conn = connect(); // Підключення до БД
// SQL-запит для додавання запису ліків у БД
$query = "INSERT INTO medicine (`name`, producter_name,
category_id,
medicine_form_id, price, picture_file) VALUES (?, ?, ?,
?, ?, ?)";
if ($stmt = mysqli_prepare($conn, $query)) { // Підготовка
виразу
// Поля для додавання нового запису
$name = $entry['name'];
$producter = $entry['producter'];
$category_id = $entry['category-id'];
$medicine_form_id = $entry['medicine-form-id'];

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ
70
Змн. Арк. № Документа_ Підпис__ Дата
_

$price = $entry['price'];
$picture = $entry['picture-file'];
// Встановлення параметрів підготовленого виразу
$stmt->bind_param('ssiids', $name, $producter, $category_id,
$medicine_form_id, $price, $picture);
$stmt->execute(); // Виконання виразу
$stmt->close(); // Закриття підготовленого виразу
}
else {
echo 'Помилка виконання запиту: ' . $conn->connect_error;
exit();
}
// Закриття підключення до БД
$conn->close();
}
// Редагує запис ліків у БД із вказаними полями
function edit_medicine($entry)
{
$conn = connect(); // Підключення до БД
// SQL-запит для додавання запису ліків у БД
$query = "UPDATE medicine SET `name` = ?, producter_name = ?,
category_id = ?,
medicine_form_id = ?, price = ?, picture_file = ? WHERE
id = ?";
if ($stmt = $conn->prepare($query)) { // Підготовка виразу
// Поля для додавання нового запису
$id = $entry['id'];
$name = $entry['name'];
$producter = $entry['producter'];
$category_id = $entry['category-id'];
$medicine_form_id = $entry['medicine-form-id'];
$price = $entry['price'];
$picture = $entry['picture-file'];
// Встановлення параметрів підготовленого виразу
$stmt->bind_param('ssiidsi', $name, $producter,
$category_id,
$medicine_form_id, $price, $picture, $id);
$stmt->execute(); // Виконання виразу
$stmt->close(); // Закриття підготовленого виразу
}
else {
echo 'Помилка виконання запиту: ' . $conn->connect_error;
exit();
}
// Закриття підключення до БД
$conn->close();
}
// Видаляє запис ліків з БД за вказаним ID
function delete_medicine($id)
{
$conn = connect(); // Підключення до БД

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ
71
Змн. Арк. № Документа_ Підпис__ Дата
_

// SQL-запит до БД для видалення запису ліків
$query = "DELETE FROM medicine WHERE id = ?";
if ($stmt = $conn->prepare($query)) { // Підготовка виразу
// Встановлення ID до параметрів виразу
$stmt->bind_param('i', $id);
$stmt->execute(); // Виконання виразу
$stmt->close(); // Закриття підготовленого виразу
}
else {
echo 'Помилка виконання запиту: ' . $conn->connect_error;
exit();
}
// Закриття підключення до БД
$conn->close();
}

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 72
Змн. Арк. № Документа_ Підпис__ Дата
_

ДОДАТОК Д
ЗНІМКИ ЕКРАНА ДЕМОНСТРАЦІЇ РОБОТИ ВЕБ-ДОДАТКУ

Рисунок Д.1 – Головна сторінка веб-додатку підтримки клієнтів аптеки

Рисунок Д.2 – Перегляд ліків, належать до категорії протизастудних

Рисунок Д.3 – Додавання ліків до списку бронювань
Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 73
Змн. Арк. № Документа_ Підпис__ Дата
_

Рисунок Д.4 – Перегляд списку бронювань

Рисунок Д.5 – Надсилання списку бронювань

Рисунок Д.6 – Повідомлення про успішне надсилання списку бронювань
Арк.
ЧДТУ 22WEBC-2077.003.ПЗ
74
Змн. Арк. № Документа_ Підпис__ Дата
_

Рисунок Д.7 – Сторінка авторизації до адмін-панелі

Рисунок Д.8 – Робоча сторінка адмін-панелі

Рисунок Д.9 – Перегляд таблиці з записами про ліки

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ
75
Змн. Арк. № Документа_ Підпис__ Дата
_

СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ

1. Аналіз використання цифрових технологій у медицині та фармації / А.С.
Немченко, Ю.Є. Куриленко, В.М. Назаркіна, Ю.О. Шеншина. // Від
експериментальної та клінічної патофізіології до досягнень сучасної медицини і
фармації: матеріали ІІ науково-практичної конференції студентів та молодих
вчених з міжнародною участю. – Харків: НФаУ, 2020. – С. 159–160.
2. Сахнацька Н.М. Проблеми дистанційної реалізації ліків у контексті надання
якісної та доступної фармацевтичної допомоги населенню / Н.М. Сахнацька. //
Сучасна фармація: історія, реалії та перспективи розвитку: Матеріали науково-
практичної конференції з міжнародною участю, присвяченої 20-й річниці
заснування Дня фармацевтичного працівника України. – Київ: НМУ імені О.О.
Богомольця, 2019. – С. 343–344.
3. Дмитрик К. Аптечний ринок: консолідація та розвиток бізнесу в епоху digital
[Електронний ресурс] / Катерина Дмитрик // Аптека.ua. – 2019. – Режим доступу до
ресурсу: https://www.apteka.ua/article/517257.
4. Будина Л. “Мы меняем фарм-рынок”. История основателей прайс-агрегатора
Tabletki.ua [Електронний ресурс] / Людмила Будина // Retailers. – 2018. – Режим
доступу до ресурсу: https://retailers.ua/news/tehnologii/8425-myi- nyaem-farm-ryinok-
istoriya-osnovateley-prays-agregatora-tabletkiua.
5. Tabletki.ua - пошук і бронювання ліків в аптеках, інструкції по застосуванню,
тисячі аптек по всій Україні [Електронний ресурс] – Режим доступу до ресурсу:
https://tabletki.ua/uk.
6. Tabletki.ua Traffic, Ranking & Marketing Analytics | SimilarWeb [Електронний
ресурс] – Режим доступу до ресурсу: https://www.similarweb.com/website/tabletki.ua.
7. Пошук ліків в аптеках Києва та всієї України | Аптека поруч [Електронний
ресурс] – Режим доступу до ресурсу: https://geoapteka.ua/ua.
8. GEO-Apteka! Сервис поиска лекарств в аптеках Украины!!! - Программный
комплекс "Аптека" [Електронний ресурс] – Режим доступу до ресурсу:
https://pharmbase.com.ua/ru/geo-apteka-servis-poiska-lekarstv-v-aptekax-ukrainy.
Арк.
ЧДТУ 22WEBC-2077.003.ПЗ
Змн. Арк. № Документа_ Підпис__ Дата 76
_

9. Аптека Доброго Дня - Інтернет аптека ліків і медикаментів [Електронний ресурс]
– Режим доступу до ресурсу: https://www.add.ua/ua.
10. «Аптека Доброго Дня» выпустила мобильное приложение [Електронний
ресурс] // Аптека.ua. – 2018. – Режим доступу до ресурсу:
https://www.apteka.ua/article/477096.
11. 1 Соціальна Аптека - офіційний сайт, ціни на ліки, адреси аптек [Електронний
ресурс] – Режим доступу до ресурсу: https://1sa.com.ua.
12. Дорош В. В этом году в сети «1 cоціальна аптека» открыли 84 аптеки
[Електронний ресурс] / Валерия Дорош // Retailers. – 2017. – Режим доступу до
ресурсу: https://retailers.ua/news/menedjment/6770-v-etom-godu-v-seti-persha-
sotsilna-apteka-otkryili-84-apteki.
13. Software Engineering | Classification of Software Requirements [Електронний
ресурс]. – 2018. – Режим доступу до ресурсу:
https://www.geeksforgeeks.org/software-engineering-classification-of-software-
requirements.
14. Software Requirements - Tutorialspoint [Електронний ресурс] – Режим доступу до
ресурсу:
https://www.tutorialspoint.com/software_engineering/software_requirements.htm.
15. What is Use Case Diagram? [Електронний ресурс] – Режим доступу до ресурсу:
https://www.visual-paradigm.com/guide/uml-unified-modeling-language/what-is-use-
case-diagram.
16. Дідловська М.В. Діаграма варіантів використання [Електронний ресурс] / М.В.
Дідловська – Режим доступу до ресурсу:
http://mmsa.kpi.ua/sites/default/files/disciplines/Розробка%20і%20тестування%2
0програм/didkovska_m_v_testing_lecture_3.pdf.
17. Змерзлий І. Клієнт-серверна архітектура та ролі серверів [Електронний ресурс]
/ Іван Змерзлий // Medium – Режим доступу до ресурсу:
https://medium.com/@IvanZmerzlyi/клієнт-серверна-архітектура-та-ролі-серверів-
9893d8048229.

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 77
Змн. Арк. № Документа_ Підпис__ Дата
_

18. What is Client-Server? Definition and FAQs [Електронний ресурс] – Режим
доступу до ресурсу: https://www.omnisci.com/technical-glossary/client-server.
19. Client-Server Architecture | Components, Types, Examples [Електронний ресурс] –
Режим доступу до ресурсу: https://teachcomputerscience.com/client-server-
architecture.
20. What is Three-Tier Architecture | IBM [Електронний ресурс] – Режим доступу до
ресурсу: https://www.ibm.com/cloud/learn/three-tier-architecture.
21. PHP: What is PHP? - Manual [Електронний ресурс] – Режим доступу до ресурсу:
https://www.php.net/manual/en/intro-whatis.php.
22. Kevin Tatroe. Programming PHP: Creating Dynamic Web Pages / Kevin Tatroe, Peter
MacIntyre. – O’Reilly Media, Inc. – 2020. – 544 с. ISBN 1492054089, 9781492054085.
23. Скриптова мова PHP - Web-технології та Web-дизайн [Електронний ресурс] –
Режим доступу до ресурсу: https://sites.google.com/site/da21svietlova/skriptova-
mova-php.
24. Bootstrap The most popular HTML, CSS, and JS library in the world. [Електронний
ресурс] – Режим доступу до ресурсу: https://getbootstrap.com.
25. Introduction - JavaScript | MDN [Електронний ресурс] – Режим доступу до
ресурсу: https://developer.mozilla.org/en/US/docs/Web/JavaScript/Guide/ Introduction?
retiredLocale=uk.
26. jQuery - Overview - Tutorialspoint [Електронний ресурс] – Режим доступу до
ресурсу: https://www.tutorialspoint.com/jquery/jquery-overview.htm.
27. MySQL - Introduction - Tutorialspoint [Електронний ресурс] – Режим доступу до
ресурсу: https://www.tutorialspoint.com/mysql/mysql-introduction.htm.
28. MySQL : MySQL Reference Manual : 1.2 Overview of the MySQL Database
Management System [Електронний ресурс] – Режим доступу до ресурсу:
https://dev.mysql.com/doc/refman/8.0/en/what-is.html.
29. Entity Relationship Diagram - ER Diagram in DBMS [Електронний ресурс] –
Режим доступу до ресурсу: https://beginnersbook.com/2015/04/e-r-model-in-dbms.
30. Бази даних. Теорія і практика | BestProg [Електронний ресурс] – Режим доступу
до ресурсу: https://www.bestprog.net/uk/sitemap_ua/бази-даних.
Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 78
Змн. Арк. № Документа_ Підпис__ Дата
_

31. What is Entity Relationship Diagram (ERD)? [Електронний ресурс] – Режим
доступу до ресурсу: https://www.visual-paradigm.com/guide/data-modeling/what-is-
entity-relationship-diagram.
32. Activity Diagram Tutorial | How to Draw an Activity Diagram [Електронний
ресурс] – Режим доступу до ресурсу: https://creately.com/blog/diagrams/activity-
diagram-tutorial.
33. Activity Diagram - Activity Diagram Symbols, Examples, and More [Електронний
ресурс] – Режим доступу до ресурсу: https://www.smartdraw.com/activity-diagram.
34. Image CDN: Image Optimization, Processing & Hosting • Sirv [Електронний
ресурс] – Режим доступу до ресурсу: https://sirv.com.
35. Free Web Hosting - Host a Website for Free with Cpanel, PHP [Електронний ресурс]
– Режим доступу до ресурсу: https://www.000webhost.com.

Арк.
ЧДТУ 22WEBC-2077.003.ПЗ 79
Змн. Арк. № Документа_ Підпис__ Дата
_

ChSTU repository

ChSTU repository preserves and enables easy and open access to all types of digital content including text, images, moving images, mpegs and data sets