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

вираження якої є помітне зростання числа соціальних Інтернетмереж. Вони

виступають інструментом, за допомогою якого велика кількість користувачів
глобальної мережі отримують додаткові можливості у спілкуванні.
Соціальна мережа — соціальна структура, утворена індивідами або
організаціями. Вона відображає різноманітні зв’язки між ними через різні
соціальні взаємовідносини, починаючи з випадкових знайомств і закінчуючи
тісними родинними зв’язками.
Соціальними мережами називають також інтернет-програми, які
допомагають друзям, бізнес-партнерам або іншим особам спілкуватись та
встановлювати зв'язки між собою використовуючи набір інструментів.
Соціальні Інтернет-мережі можна віднести до нових соціальних медіа,
адже вони стають засобом масової комунікації, інструментом для зв’язків людей
між собою.
Метою дипломного проєктування є створення бази даних, та написання
вебсайту через який користувач зможе переглядати та додавати туристичні
місця і подорожі, а також створення дописів та організація суспільних
публічних заходів та активностей. Модератори мають можливості та права на
перевірку достовірності й уточнення надаваних послуг резидентом та
публікацій користувачів на відповідність правилам сервісу “Papillon”. Тим
часом адміністратори відповідають за коректну працездатність сервісу.
Завданням дипломного проектування є розробка вебдодатку, в якому
користувач має можливість для ознайомлення з послугами онлаййн сервісу та
бронювання і резервування обраних послуг, а також публікації своїх дописів,
крім того користувач може брати участь заходах та активностях організованих
іншими користувачами.
 1 ТЕОРЕТИЧНА ЧАСТИНА
Соціальні мережі стали чи не єдиним місцем для людей, де вони можуть
якомога швидше отримати необхідну інформацію. На різноманітних
платформах державні установи оперативно публікують актуальні новини, а
аудиторія вчасно отримує інформацію з першоджерел, висловлює своє
ставлення у коментарях та поширює цікаві пости [1].
Розроблене під час дипломного проектування програмне забезпечення,
що забезпечує перегляд і зміну інформації про туристичні місця, базується на
використанні таких технологій:
 мова програмування JS;
 мова розмітки HTML;
 каскадні таблиці стилів CSS;
 база даних InnoDB;
 front-end фреймворк Angular;
 для розробки використовується середовище розробки Visual Studio;
 для роботи з базою даних використовується PhpMyAdmin.

1.1 Загальні відомості про використані технології

1.1.1Мова розмітки HTML
HTML — стандартизована мова розмітки документів для перегляду
вебсторінок у браузері [2].
Веббраузери отримують HTML документ від сервера за протоколами
HTTP/HTTPS або відкривають із локального диска, далі інтерпретують код в
інтерфейс, який відображатиметься на екрані монітора. Елементи HTML є
будівельними блоками сторінок HTML. За допомогою конструкцій HTML,
зображення та інші об’єкти, такі як інтерактивні форми, можуть бути вбудовані
у візуалізовану сторінку. HTML надає засоби для створення структурованих
документів, позначаючи структурну семантику тексту, наприклад заголовки,
абзаци, списки, посилання, цитати та інші елементи.
Елементи HTML окреслені тегами, написаними з використанням
кутових дужок. Теги на кшталт «<img />» чи «<input />» безпосередньо
виводять вміст на сторінку. Інші теги, такі як «<p>», оточують текст і надають
інформацію про нього, а також можуть включати інші теги як піделементи.
Браузери не показують теги HTML, але використовують їх для
інтерпретації вмісту сторінки. В HTML можна вбудовувати програми, написані
на скриптових мовах, наприклад JavaScript, які впливають на поведінку та вміст
вебсторінок.
Включення CSS визначає вигляд і компонування вмісту. World Wide
Web Consortium (W3C), який супроводжує стандарти HTML та CSS, заохочує
використання CSS над явним презентаційним HTML з 1997 року. HTML
впроваджує засоби для: створення структурованого документа шляхом
позначення структурного складу тексту:
 заголовки, абзаци, списки, таблиці, цитати та інше;
 отримання інформації зі Всесвітньої мережі через гіперпосилання;
 включення зображень, звуку, відео, та інших об’єктів до тексту.

1.1.2 Мова каскадних стилів CSS

CSS — це спеціальна мова стилю сторінок, що використовується для
опису їхнього зовнішнього вигляду[3]. Самі ж сторінки написані мовами
розмітки даних. CSS є основною технологією всесвітньої павутини, поряд із
HTML та JavaScript. Найчастіше CSS використовують для візуальної
презентації сторінок, написаних HTML та XHTML, але формат CSS може
застосовуватися до інших видів XML-документів.
Специфікації CSS були створені та розвиваються World Wide Web
Consortium (W3C). CSS має різні рівні та профілі. Наступний рівень CSS
створюється на основі попередніх, додаючи нову функціональність або
розширюючи вже наявні функції.
Рівні позначаються як CSS1, CSS2 та CSS3. Профілі — сукупність
правил CSS одного або більше рівнів, створені для окремих типів пристроїв або
інтерфейсів. Наприклад, існують профілі CSS для принтерів, мобільних
пристроїв тощо. CSS (каскадна або блочна верстка) прийшла на заміну
табличній верстці вебсторінок.
 Головна перевага блочної верстки — розділення змісту сторінки (даних)
та їхньої візуальної презентації.
CSS використовується авторами та відвідувачами вебсторінок, щоб
визначити кольори, шрифти, верстку та інші аспекти вигляду сторінки.
Одна з головних переваг — можливість розділити зміст сторінки (або
контент, наповнення, зазвичай HTML, XML або подібна мова розмітки) від
вигляду документу (що описується в CSS). Таке розділення може покращити
сприйняття та доступність контенту, забезпечити більшу гнучкість та контроль
за відображенням контенту в різних умовах, зробити контент більш
структурованим та простим, прибрати повтори тощо. CSS також дозволяє
адаптувати контент до різних умов відображення (на екрані монітора,
мобільного пристрою (КПК), у роздрукованому вигляді, на екрані телевізора,
пристроях з підтримкою шрифту Брайля або голосових браузерах та ін.).

1.1.3 Мова програмування JavaScript

JavaScript — динамічна, прототипна мова програмування.
Найчастіше використовується для створення сценаріїв вебсторінок, що
надає можливість на боці клієнта (пристрої кінцевого користувача) взаємодіяти
з користувачем, керувати браузером, асинхронно обмінюватися даними з
сервером, змінювати структуру та зовнішній вигляд вебсторінки[4].
JavaScript класифікують як прототипну (підмножина
об’єктоорієнтованої), скриптову мову програмування з динамічною типізацією.
Окрім прототипної, JavaScript також частково підтримує інші парадигми
програмування (імперативну та частково функціональну) і деякі відповідні
архітектурні властивості, зокрема: динамічна та слабка типізація, автоматичне
керування пам’яттю, прототипне наслідування, функції як об’єкти першого
класу.
Мова JavaScript використовується для: написання сценаріїв вебсторінок
для надання їм інтерактивності створення односторінкових та прогресивних
вебзастосунків (React, AngularJS, Vue.js) програмування на боці сервера,
стаціонарних застосунків, мобільних застосунків сценаріїв в прикладних
програмах.

1.1.4 Загальні відомості про Angular

Angular — це вебфреймворк, розроблений компанією Google, який
дозволяє створювати потужні односторінкові додатки і багатосторінкові додатки
з використанням мови програмування TypeScript[5]. Ось загальні відомості про
Angular:
Архітектура: Angular базується на архітектурному шаблоні Model-View-
Controller (MVC), де модель представляє дані, представлення (вигляд)
відповідає за відображення даних на сторінці, а контролер керує взаємодією між
моделлю та представленням. Ця розділена архітектура дозволяє легко
управляти складними додатками та підтримувати їх.
TypeScript: Angular використовує мову програмування TypeScript для
розробки додатків. TypeScript є надмножиною JavaScript, яка додає статичну
типізацію, об’єкторієнтованість, можливості модульності та інші функції до
JavaScript. Це робить код Angular більш структурованим, легким для розуміння
та підтримки.
Компонентна модель: Angular побудований на основі компонентної
моделі, де додаток розбивається на окремі компоненти. Компонент — це
незалежна ізольована частина додатку, яка має свій власний вигляд, поведінку
та дані. Це спрощує розробку, тестування та підтримку додатків.
Директиви: Angular використовує директиви, які розширюють HTML та
додають до нього нові функціональні можливості. Директиви можуть бути
використані для контролю вигляду, маніпуляції DOM, додавання або видалення
елементів та багатьох інших операцій.
Сервіси: Angular використовує сервіси для реалізації загальних функцій,
які можуть бути використані в різних частинах додатку. Сервіси
використовуються для обробки даних, взаємодії з сервером, зберігання стану
додатку та інших завдань.
 Роутінг: Angular має вбудований модуль роутингу, який дозволяє
створювати маршрутизацію в додатку. Це дає можливість переходити між
різними сторінками або компонентами додатку, без перезавантаження сторінки.
Підтримка розширень: Angular має багато сторонніх бібліотек та
розширень, які доповнюють його функціональність. Наприклад, Angular
Material — набір готових компонентів, які використовуються для створення
красивого та респонсивного інтерфейсу користувача.
Angular є потужним інструментом для розробки веб-додатків, який надає
розширені можливості, структурованість коду та підтримку багатьох функцій
для створення сучасних та ефективних додатків.

1.1.5 Загальні відомості про InnoDB

InnoDB — це потужний механізм (рушій) зберігання даних, розроблений
фінською компанією Innobase, яка була придбана в жовтні 2005 року концерном
Oracle Corporation. Поширюється за ліцензією GNU General Public License[6].
Є у всіх нових версіях MySQL і, для MySQL починаючи з версії 5.5 є
механізмом за замовчуванням. Застосування InnoDB дозволяє використання
базою даних таких функцій, як транзакція, зовнішні ключі. Він також сумісний
з ACID.
У цьому рушії є два способи для зберігання даних: файл або група
файлів, загальних для всіх баз даних і таблиць, або один файл даних для кожної
таблиці. Інші важливі особливості InnoDB: блокування на рівні рядків,
можливість стиснення даних, і MVCC. MariaDB (включно до версії 10.1) та
Percona Server за замовчуванням використовують форк InnoDB що називається
XtraDB. XtraDB підтримується компанією Percona. Зміни Oracle з InnoDB
регулярно імпортуються в XtraDB, а також додаються деякі виправлення та
функціонал.

1.1.6 Середовище розробки Visual Studio

Microsoft Visual Studio — лінійка продуктів компанії Microsoft , що
включають інтегроване середовище розробки програмного забезпечення та ряд
інших інструментів[7]. Дані продукти дозволяють розробляти як консольні
програми , так і ігри та програми з графічним інтерфейсом , у тому числі з
підтримкою технології Windows Forms , UWP а також веб-сайти , веб-додатки ,
веб-служби як у рідному , так і в керованому кодах всіх платформ, що
підтримуються Windows , Windows Mobile, Windows CE , .NET
Framework , .NET Core , .NET , MAUI , Xbox , Windows Phone .NET Compact
Framework та Silverlight . Після покупки компанії Xamarin корпорацією
Microsoft з'явилася можливість розробки IOS та Android програм. Visual Studio
включає редактор вихідного коду з підтримкою технології IntelliSense і
можливістю найпростішого рефакторингу коду . Вбудований налагоджувач
може працювати як відладчик рівня вихідного коду, так і відладчик машинного
рівня. Інші вбудовані інструменти включають редактор форм для спрощення
створення графічного інтерфейсу програми, веб-редактор, дизайнер класів і
дизайнер схеми бази даних. Visual Studio дозволяє створювати та підключати
сторонні доповнення ( плагіни ) для розширення функціональності практично
на кожному рівні, включаючи додавання підтримки систем контролю версій
вихідного коду(як, наприклад, Subversion і Visual SourceSafe ), додавання нових
наборів інструментів (наприклад, для редагування та візуального проектування
коду об’єкторієнтованими мовами програмування ) або інструментів для інших
аспектів процесу розробки програмного забезпечення (наприклад, клієнт Team
Explorer для роботи з Team Foundation Server ) .

1.1.7 Загальні відомості про PhpMyAdmin

PhpMyAdmin — вебдодаток з відкритим кодом, написаний мовою PHP із
графічним вебінтерфейсом для адміністрування бази даних MySQL або
MariaDB[8].
PhpMyAdmin дозволяє через браузер здійснювати адміністрування
сервера MySQL, запускати запити SQL, переглядати та редагувати вміст
таблиць баз даних. Ця програма користується великою популярністю у
веброзробників, оскільки дозволяє керувати базу даних MySQL без вводу SQL
команд через дружній інтерфейс і з будь-якого комп’ютера під’єднаного до
інтернету без необхідності встановлення додаткового програмного
забезпечення.
На сьогоднішній день PhpMyAdmin широко застосовується на практиці.
Останнє пов’язано з тим, що розробники інтенсивно розвивають свій продукт, з
огляду на всі нововведення СКБД MySQL. Переважна більшість українських
провайдерів використовують цей застосунок як панель керування для того, щоб
надати своїм клієнтам можливість адміністрування виділених їм баз даних.
Програма розповсюджується під ліцензією GNU General Public License і тому
деякі інші розробники інтегрують його у свої розробки, наприклад XAMPP,
Denwer. Ініціатором є німецький розробник Тобіас Ратшіллер (Tobias Ratschiller)
і базується, так само як і phpPgAdmin, на аналогічному застосунку MySQL-
Webadmin, що виник у 1997 році.
1.2 Загальні відомості про предметну область
Соціальна мережа, суспільна мережа — соціальна структура, утворена
індивідами або організаціями. Вона відображає розмаїті зв’язки між ними через
різноманітні соціальні взаємовідносини, починаючи з випадкових знайомств і
закінчуючи тісними родинними зв’язками[9].
Інформаційні технології та зв’язок — це галузь, яка відповідає за збір,
зберігання і передачу інформації за допомогою технічних пристроїв і, в цілому,
за спілкування людей на відстані.
Соціальні мережі відіграють важливу роль у сфері масової комунікації,
адже люди отримують повідомлення, можуть його обговорити, висловити
зауваження, але джерело повідомлення їм не відповідає.
Соціальні мережі не вимагають значних затрат і може бути зручним
інструментом для популяризації організації. У соціальних мережах простіше
працювати із цільовою аудиторією, є можливості для ї аналізу. Соціальні мережі
виконують такі функції:
 узагальнення інформації, отриманої від активістів руху, організаційна і
мобілізаційна діяльність;
 поширення узагальненої інформації серед широких верств населення;
  створення індивідуального профілю, в яких буде міститись інформація
про користувача;
 взаємодія користувачів;
 обмін ресурсами.
Туристична соціальна мережа допомагає не просто переглядати
туристичні місця, а й ділитися своїми подорожами з іншими.

1.3 Огляд аналогів

Для прикладу можна взяти таку компанію як «Meta».

Рисунок 1.1 Логотип корпорації “Meta Platforms Inc”

Meta Platforms Inc — американська корпорація конгломерату
соціальних мереж, що базується в Менло-Парку, штат Каліфорнія[10]. Її
заснував Марк Цукерберг як разом зі своїми сусідами по кімнаті та студентами
Гарвардського коледжу, якими були Едуардо Саверін, Ендрю Макколлум, Дастін
Московіц та Кріс Г'юз, спочатку як TheFacebook.com — пізніше Facebook,
популярний глобальний вебсайт соціальних мереж.
Meta виступає в якості аналогу як команія, яка містить в собі комплекс
сервісів що надають можливість користувачам використовувати сервіси для
публікації дописів та поширення між корстувачами відповідних сервісів.
 Рисунок 1.2 Програма “Facebook”
Facebook — найбільша соцмережа, що почала працювати 4 лютого 2004
року як мережа для студентів деяких американських університетів[10].
Facebook належить корпорації Meta Platforms. Засновником та головою
сервісу є Марк Цукерберг. За даними рейтингу Alexa Rank, сайт «facebook.com»
посідає 7 місце за відвідуваністю у світі. Станом на грудень 2018 року Facebook
стверджував, що мав понад 2,3 млрд активних користувачів щомісяця. Станом
на вересень 2019 року кількість користувачів з України становила 13 млн.

“Facebook” являється частковим аналогом у зв’язку з подібністю деяких

запланованих функцій, а саме:

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

В даного аналога є такі недоліки:

˗ обов’язковість реєстрації;
˗ приватність даних.
Переваги:
˗ зручність;
˗ розвинене ком’юніті;
˗ адаптивність.
Також іншим частковим аналогом сервісу «Papillon» є сервіс інтернет
бронювання житла «Booking.com»[12]

Рисунок 1.3 Логотип корпорації “Booking.com”

Booking.com — система інтернет-бронювання житла (готелі, хостели),
заснована в Амстердамі 1996 року, придбана 2005 року за $133 млн компанією
Priceline. Штаб-квартира компанії знаходиться в Амстердамі, Нідерланди. Штат
працівників складає понад 15 000 осіб у 198 офісах та 70 країнах.
На вебсайті розміщено понад 28,616,893 об'єкта у 226 країнах і
територіях. За добу бронюється 1,550,000 кімнат. Сервіс доступний на 43 мовах.
Booking.com був утворений, коли bookings.nl, заснований у 1996 році
Геертом-Яном Бруінсма, об'єднався в 2000 році з Bookings Online, заснованим
Сікко і Алеком Беренсом, Маріном Мюзером і Басом Лемменсом, який
працював як bookings.org. Ім'я та URL-адресу було змінено на Booking.com, а
Стеф Норден був призначений його генеральним директором. У 1997 році
Геерт-Ян Бруінсма хотів розмістити оголошення в De Telegraaf, голландській
газеті з найвищим тиражем. Оголошення було відхилено, оскільки De Telegraaf
приймала оголошення лише з номером телефону, а не з вебсайтом. У 2002 році
Expedia відмовилася купувати bookings.nl.
 Рисунок 1.4 Вебдодаток “Booking.com”

“Booking.com” являється частковим аналогом у зв’язку з подібністю

деяких функцій, а саме:

 можливості пошуку житла;

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

В даного аналога є такі недоліки:

˗ висока комісія;
˗ обмежений вибір;
˗ часткові проблеми з бронюванням;
˗ відгуки та рейтинги.
Переваги:
˗ зручність;
˗ широкий вибір проживання;
˗ адаптивність;
˗ гнучкість бронювання;
˗ акції та знижки.

1.4 Опис предметної області та постановка задачі

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

1.5 Обґрунтування вибору методу розв’язку задачі

Для розробки фронтенду був обраний CSS. Перелік переваг наведений
нижче.
Гнучкість — CSS мають декілька особливостей які роблять код більш
гнучким, легким в користуванні, легким в керуванні, в змінах, частіше всього
код CSS може бути змінений в режимі реального часу.
Відділення форматованого вмісту — основана особливість CSS, це
відділення вмісту таким же способом який представлений вебсайт.
Час завантаження, трафік — CSS радикально покращує ці аспекти.
Тому, що інформація про форматування зберігається в окремому файлі
конфігурації CSS, завантаження відбувається один раз і не генерує не бажаний
трафік для кожного документа окремо, на відміну від вебсайту, створеного без
використання CSS.
«Редизайн» сторінки — можливість переформатувати документ HTML.
Якщо у вас є декілька сторінок HTML, які можна переформатувати з
допомогою CSS, достатньо просто поміняти код CSS і все.
InnoDB є одним з двох основних движків баз даних, що
використовуються в MySQL (разом з MyISAM). Ось кілька коротких переваг
InnoDB:
Транзакційна підтримка: InnoDB надає повну підтримку транзакцій,
дозволяючи виконувати згортання та відновлення змін у базі даних. Це робить
його ідеальним вибором для додатків, які вимагають цілісності даних,
наприклад, фінансових систем або систем управління замовленнями.
Блокування рівня рядка: InnoDB використовує блокування рівня рядка
для управління доступом до даних. Це дозволяє кільком користувачам
одночасно зчитувати рядки таблиці без блокування інших користувачів. Це
покращує швидкість і масштабованість додатків з багатою паралельною
роботою з базою даних.
Зовнішні ключі та цілісність даних: InnoDB підтримує зовнішні ключі,
що дозволяє створювати зв'язки між таблицями і забезпечує дотримання
цілісності даних. Це дає можливість використовувати операції об’єднання,
обмеження та видалення, щоб автоматично підтримувати залежності між
даними в таблицях.
Описаний вище інструментарій являється досить зручним та
продуктивним в плані розробки різного роду вебдодатків, хоча існують і більш
потужні набори інструментів. З деякими інструментами автор вже був
знайомий, а з іншими він майже не стикався в робочому процесі, проте був
дещо ознайомлений з ними теоретично, тому був впевнений у тому, що вони
будуть чудовим варіантом.
 ВИСНОВКИ
Туризм є однією з найпопулярніших галузей у сучасному світі, і це
відбивається на зростанні популярності туристичних соціальних мереж. Такі
платформи, як Instagram, Facebook, Twitter та інші, стали важливими
інструментами для подорожніх, які бажають ділитися своїми пригодами,
знайомитися з новими місцями та отримувати рекомендації від інших
мандрівників.
Також туристичні соцмережі надають змогу людям спілкуватися та
обмінюватися досвідом. Користувачі можуть коментувати та ставити лайки під
публікаціями, задавати питання авторам і отримувати відповіді, ділитися
порадами та рекомендаціями. Ця взаємодія створює спільноту мандрівників, яка
допомагає один одному з плануванням подорожей та знаходженням цікавих
місць.
Під час виконання дипломного проєкту було створено клієнтський
вебдодаток для туристичної соціальної мережі «Papillon» з використанням
фреймворка Angular.
Поставлене завдання було виконано. Результатом є вебсайт, який дає
користувачу змогу переглядати інформацію про туристичні місця та подорожі,
ділитися своїми подорожами. Адміністратор має можливість керувати
вебсайтом. Пророблено роботу в Visual Studio.
При розробці було опрацьовано багато матеріалу, вивчено нові функції
елементів Angular.
Створюючи проєкт виникало багато помилок, через синхронізацію
елементів.
Даний проєкт вийшов корисний, функціональний та інтуїтивно
зрозумілий. Ним може користуватися будь-хто.
Проєкт розроблено таким чином, щоб майбутні вдосконалення та
супровід не потребували багато зусиль від програміста, а інсталяція та
використання — від користувача.