Репозиторій ЧДТУ
Репозиторій ЧДТУ зберігає і дозволяє легкий і відкритий доступ до всіх видів цифрового контенту, включаючи текст, зображення, анімовані зображення, MPEG і набори даних
Дізнатися більше
Будь ласка, використовуйте цей ідентифікатор, щоб цитувати або посилатися на цей матеріал:
https://er.chdtu.edu.ua/handle/ChSTU/5445| Назва: | Web-орієнтоване віртуальне представництво взуттєвої фабрики |
| Автори: | Тарасенко, Ярослав Володимирович Капелюшний, Артем Леонідович |
| Ключові слова: | web-орієнтована система;FireBase;інтернетмагазин;адаптивність;дизайн;аналіз;HTML;CSS;REACT;API;JAVASCRIPT |
| Дата публікації: | 15-чер-2023 |
| Короткий огляд (реферат): | Актуальність дослідження обумовлена змінами, що відбуваються зараз у світі web-технологій. Технології не стоять на місці, кожна галузь знань вона постійно покращується, все більше на сьогодні стає поширеним віртуальне представлення нових товарів та купівля будь-яких товарів фабрик онлайн, багато різних компаній прагнуть перевести весь бізнес саме в онлайн. Можливість повідомляти про можливі майбутні акції, (sale) знижки та інші можливі заходи, проводити маркетингові дослідження ринку, розробляти і виводити, додавати на електронний ринок нові рішення продукції, унікальні торгові пропозиції та багато всього іншого – все це незаперечні якості інтернет представництва. Крім цього, створити web-орієнтоване віртуальне представництво – це ще й позначити джерело актуальної інформації про новий асортимент товару, його наявності на складі. Метою роботи є обґрунтування та визначення сучасних методів розробки web-орієнтованих віртуальних представництв з елементами комерції. Завдання кваліфікаційної роботи бакалавра: − Дослідити види та основні принципи створення web-орієнтованих систем; − Провести аналіз сучасних методів розробки web-орієнтованих ресурсів. − Провести основний аналіз вимог до створення web-орієнтованого віртуального представництва. − Визначити основні етапи створення інтернет-ресурсу. − дослідити фактори та способи оптимізації, що впливають на пошукову індексацію сторінок сайту; − Розробити нову концепцію, дизайн та також програмну реалізацію webорієнтованого віртуального підприємства взуттєвої фабрики. Об’єкт дослідження: методи та засоби розробки web-орієнтованого представництва.Предмет дослідження: web-орієнтоване віртуальне представництво взуттєвої фабрики. Методи дослідження: вивчення актуальних джерел, наукових статей, книг, журналів та інших матеріалів, що стосуються розробки інтернет-магазинів, дизайну та користувацького досвіду; аналіз функціональності, дизайну та адаптації інших інтернет-магазинів віртуального представництва взуттєвої фабрики для ідентифікації кращих практик та особливостей. |
| URI (Уніфікований ідентифікатор ресурсу): | https://er.chdtu.edu.ua/handle/ChSTU/5445 |
| Розташовується у зібраннях: | 126 Інформаційні системи та технології (Web-технології, web-дизайн) |
Файли цього матеріалу:
| Файл | Опис | Розмір | Формат | |
|---|---|---|---|---|
| РЕП_БАК_Капелюшний_WEB-1911.pdf Restricted Access | Web-орієнтоване віртуальне представництво взуттєвої фабрики | 4.96 MB | Adobe PDF | Переглянути/Відкрити Запит копії |
Усі матеріали в архіві електронних ресурсів захищено авторським правом, усі права збережено.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет інформаційних технологій і систем
Кафедра інформаційних технологій проектування
Пояснювальна записка
до кваліфікаційної роботи
бакалавра
(освітньо-кваліфікаційний рівень)
на тему: «Web-орієнтоване віртуальне представництво взуттєвої фабрики»
Виконав: здобувач першого (бакалаврського)
рівня вищої освіти
4 курсу, групи WEB-1911
Спеціальності 126 Інформаційні системи та
технології
ОП «Web-технології, Web-дизайн»
Капелюшний Артем Леонідович
Керівник: к.т.н., доцент кафедри ІТП
Тарасенко Ярослав Володимирович
Рецензент: директор ТОВ Андерсенлаб
Алесін Олег Вікторович
Черкаси 2023 року
АНОТАЦІЯ
Кваліфікаційна робота бакалавра містить: 107 с., 48 рис., 39
використаних джерел, 3 додатків.
Актуальність теми. Актуальність дослідження обумовлена змінами, що
відбуваються зараз у світі web-технологій. Технології не стоять на місці, кожна
галузь знань вона постійно покращується, все більше на сьогодні стає поширеним
віртуальне представлення нових товарів та купівля будь-яких товарів фабрик
онлайн, багато різних компаній прагнуть перевести весь бізнес саме в онлайн.
Можливість повідомляти про можливі майбутні акції, (sale) знижки та інші
можливі заходи, проводити маркетингові дослідження ринку, розробляти і
виводити, додавати на електронний ринок нові рішення продукції, унікальні
торгові пропозиції та багато всього іншого – все це незаперечні якості інтернет
представництва.
Крім цього, створити web-орієнтоване віртуальне представництво – це ще й
позначити джерело актуальної інформації про новий асортимент товару, його
наявності на складі.
Метою роботи є обґрунтування та визначення сучасних методів розробки
web-орієнтованих віртуальних представництв з елементами комерції.
Завдання кваліфікаційної роботи бакалавра:
− Дослідити види та основні принципи створення web-орієнтованих систем;
− Провести аналіз сучасних методів розробки web-орієнтованих ресурсів.
− Провести основний аналіз вимог до створення web-орієнтованого
віртуального представництва.
− Визначити основні етапи створення інтернет-ресурсу.
− дослідити фактори та способи оптимізації, що впливають на пошукову
індексацію сторінок сайту;
− Розробити нову концепцію, дизайн та також програмну реалізацію web-
орієнтованого віртуального підприємства взуттєвої фабрики.
Об’єкт дослідження: методи та засоби розробки web-орієнтованого
представництва.
Предмет дослідження: web-орієнтоване віртуальне представництво
взуттєвої фабрики.
Методи дослідження: вивчення актуальних джерел, наукових статей, книг,
журналів та інших матеріалів, що стосуються розробки інтернет-магазинів, дизайну
та користувацького досвіду; аналіз функціональності, дизайну та адаптації інших
інтернет-магазинів віртуального представництва взуттєвої фабрики для
ідентифікації кращих практик та особливостей.
Перелік ключових слів: WEB-ОРІЄНТОВАНА СИСТЕМА, ІНТЕРНЕТ-
МАГАЗИН, АДАПТИВНІСТЬ, ДИЗАЙН, АНАЛІЗ, HTML, CSS, REACT, API,
FIREBASE, JAVASCRIPT.
SUMMARY
The bachelor's qualification work contains: 107 pages, 48 figs., 39 sources
used, 3 appendices.
Relevance of the topic. The relevance of the study is due to the changes taking
place now in the world of web-technologies. Technology does not stand still, every branch
of knowledge it is constantly improving, more and more today it is becoming common to
virtually present new products and buy any goods from factories online, many different
companies seek to transfer the entire business online.
The ability to inform about possible future promotions, (sale) discounts and other
possible events, conduct market research, develop and display, add new product solutions
to the electronic market, unique trade offers and much more – all these are indisputable
qualities of Internet representation.
In addition, to create a web-oriented virtual representative office is also to designate
a source of relevant information about the new range of goods, its availability in stock.
The aim of the work is to substantiate and define modern methods for
developing web-oriented virtual representative offices with elements of commerce.
Tasks of the bachelor's qualification work:
− Dto investigate the types and basic principles of creating web-oriented systems;
− Analyze modern methods of developing web-oriented resources.
− Conduct a basic analysis of the requirements for creating a web-oriented virtual
representation.
− Determine the main stages of creating an Internet resource.
− explore the factors and methods of optimization affecting the search indexing of
site pages;
− Develop a new concept, design and software implementation of a web-oriented
virtual shoe factory enterprise.
Research object: methods and tools for developing web-oriented
representation.
Subject of research: web-oriented virtual representation of a shoe factory.
Research methods: study of current sources, scientific articles, books, magazines
and other materials related to the development of online stores, design and user
experience; analysis of functionality, design and adaptation of other online stores of the
virtual representative office of the shoe factory to identify best practices and features.
List of keywords: WEB-ORIENTED SYSTEM, ONLINE STORE,
ADAPTABILITY, DESIGN, ANALYSIS, HTML, CSS, REACT, API, FIREBASE,
JAVASCRIPT.
ЗМІСТ
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І
ТЕРМІНІВ……………………………………………………..……………… 4
ВСТУП………………………………………………………………………… 5
РОЗДІЛ 1 АНАЛІЗ СУЧАСНОГО СТАНУ СТВОРЕННЯ WEB-
ОРІЄНТОВАНИХ СИСТЕМ ………………………………. …………..…… 8
1.1 Аналіз ринку існуючих систем ………………………………………... 8
1.2 Огляд існуючих видів web-орієнтованих систем …………………..... 19
1.3 Системи керування вмістом CMS ………………….…………………. 27
1.4 Фактори для створення гіпертекстової розмітки на сервері 32
Висновки до розділу 1……………………………………………….…….. 41
РОЗДІЛ 2 РОЗРОБКА WEB-ОРІЄНТОВАНОЇ СИСТЕМИ
ВІРТУАЛЬНОГО ПРЕДСТАВНИЦТВА ВЗУТТЄВОЇ ФАБРИКИ....…….. 43
2.1 Вибір технологій розробки сайту…..……………………….………… 43
2.2 Проектування інформаційної технології моделювання web-
орієнтованої системи віртуального представництва ………………….…… 53
2.3 Розробка web-орієнтованої системи віртуального представництва … 56
Висновки до розділу 2……………………………………………………... 62
РОЗДІЛ 3 ПЕРЕВІРКА ОТРИМАНИХ РЕЗУЛЬТАТІВ СИСТЕМИ 64
3.1 Опис роботи системи…………………………………………………… 64
3.2 Перевірка системи на пошукову оптимізацію………………………… 66
Висновки до розділу 4……………………………………………………… 76
ВИСНОВКИ………………………………………………………………… 77
ЧДТУ 232101.001 ПЗ
Змн. Арк. № докум. Підпис Дата
Розроб. Капелюшний А. Web-орієнтоване віртуальне Літ. Арк. Акрушів
Перевір. Тарасенко Я.В. представництво взуттєвої 2 114
Реценз. фабрики
Н. Контр. Тарасенко Я.В. Пояснювальна записка Кафедра ІТП,група WEB-1911
Затверд. Прокопенко Т.О.
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ…………………………………….. 78
Додаток А Специфікація 482.ЧДТУ. 232101-01 12 01………………………. 81
Додаток Б Текст програми…………………………………………………… 83
Додаток В Інструкція користувача………………………………………….. 109
Арк.
ЧДТУ 232101.002 ПЗ
Змн. 3
Арк. № докум. Підпис Дата
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І
ТЕРМІНІВ
HTML – (Hyper Text Markup Language) – мова розмітки гіпертекстових
документів;
HTTP – Hypertext Transfer Protocol;
CSS – (Cascading Style Sheets) – каскадні таблиці стилів;
JS – JavaScript;
ПЗ – програмне забезпечення;
PWA – progressive web app;
PHP – (PHP: Hypertext Preprocessor) – PHP: гіпертекстовий препроцесор;
API – Application Programming Interface;
БД – база даних;
DOM – Document Object Model;
JSX – JavaScript XML;
CLI – Command Line Interface;
SPA – Single Page Applications;
RWD – Responsive Web Design;
NPM – Node Package Manager;
СКВ (CMS) – (англ. Content Management System) – система керування вмістом;
EAV – Entity-Аttribute-Value – значення атрибута сутності;
EDP – (Event-Driven Programming) – подійно-орієнтоване програмування;
URL – (Uniform Resource Locator) – єдиний вказівник на ресурс.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 4
ВСТУП
Кваліфікаційна робота бакалавра спрямована на розробку Web-
орієнтованого віртуального представництва взуттєвої фабрики. Основна мета
полягає в створенні зручного та ефективного інтерфейсу, який дозволить
користувачам з легкістю переглядати товари, робити покупки та здійснювати
оплату, використовуючи web-орієнтовані пристрої.
Актуальність дослідження обумовлена змінами, що відбуваються зараз у
світі web-технологій. Технології розвиваються, кожна галузь знань вона постійно
покращується, все більше на сьогодні стає поширеним представлення та купівля
будь-яких товарів онлайн, багато різних компаній прагнуть перевести весь бізнес
в онлайн.
Але серед досить великої кількості web-ресурсів знайти справді зручну
платформу стає все більш і більш важчим завданням.
На сьогоднішній день, окрім того дуже важко знайти хорошого спеціаліста,
який би дійсно зміг підтримувати створений web-ресурс компанії, якщо він
написаний на будь-якій з мов програмування.
Більшість сучасних засобів створення web-сайтів надають можливість
створювати інтернет-магазини за допомогою CMS – систем управління
контентом, що дозволяє додавати, змінювати, видаляти інформацію (контент) на
сайті без залучення самих розробників та без необхідності основних знань
програмування.
Тому стоїть гостра необхідність розробити web-ресурс за допомогою
методу, який би в подальшому дозволив би легко та швидко редагувати контент
на сайті без особливих, додаткових знань та професійних навичок розробника.
Створити інтернет представництво – означає вирішити декілька завдань
одночасно: це і вплинути на певну цільову аудиторію, залучити нових
постачальників, почати більш масову реалізацію своїх товарів та послуг вже по
всій країні. Структура сайту, спрямованість та тематика може бути
найрізноманітнішою за стилями.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. 5
Арк. № докум. Підпис Дата
Достатній високий рівень виконання і головне хороша функціональність
сайту – все це природні показники його основної ефективності.
Створити web-орієнтоване підприємство з привабливим дизайном вкрай
важливо. Та все ж значно важливіше розробити якісний та зручний інтерфейс і
комфортність роботи самого користувача з сайтом.
Можливість повідомляти про можливі майбутні акції, (sale) знижки та інші
можливі заходи, проводити маркетингові дослідження ринку, розробляти і
виводити, додавати на електронний ринок нові рішення продукції, унікальні
торгові пропозиції та багато всього іншого – все це незаперечні якості інтернет
представництва.
Крім цього, створити web-орієнтоване віртуальне представництво – це ще
й показати джерело актуальної продукції та інформації про новий асортимент
товару, його наявності на складі.
Перейти на сайт значно простіше, завжди ніж дзвонити, або їхати в сам
фізичний магазин (звісно якщо він взагалі є) чи відвідувати виробництво.
Основні діалоги покупців та представників підприємства реалізуються за
допомогою застосованої системи електронного маркетингу та комерції. Легкість
і швидкість оформлення замовлень з використанням доданого особистого
кабінету клієнта, можливість створення інформаційних порталів розширює різні
можливості бізнесу як ніколи раніше.
Web-сайт інтернет-представництва є досить сучасним торговим каналом.
За допомогою використання web-орієнтованого представництва, кожна людина
має можливість придбавати товари або послуги величезної компанії, що
використовує доступ в Інтернет.
Інтернет представництво для покупця це: економія грошей, сил і часу.
Тому, за статистикою, все більше і більше клієнтів не тільки в Україні, але й у
всьому світі проводять свої покупки саме через інтернет представництва.
Об’єктом випускної роботи є методи та засоби розробки web-сайту web-
орієнтованого представництва.
Предмет – web-орієнтоване віртуальне представництво взуттєвої фабрики.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 6
Метою роботи є обґрунтування та визначення сучасних методів розробки
web-орієнтованих віртуальних представництв з елементами комерції.
Задачами даного дослідження є:
− Визначити специфіку web-сайтів представництв.
− Дослідити основні принципи проектування web-орієнтованих систем;
− Здійснити аналіз термінологічного апарату даного дослідження.
− Провести аналіз сучасних методів розробки web-орієнтованих ресурсів.
− Провести основний аналіз вимог до створення web-орієнтованого
віртуального представництва.
− Визначити основні етапи створення інтернет-ресурсу.
− Здійснити аналіз можливого програмного забезпечення для подальшого
створення web-сайту інтернет-представництва.
− Дослідити способи оптимізації, що впливають на пошук та індексацію
сторінок сайту в інтернеті;
− Розробити нову концепцію, дизайн та також програмну реалізацію web-
орієнтованого віртуального підприємства взуттєвої фабрики.
Методи дослідження.
Обробка доступних літературних джерел, аналіз досліджуваного матеріалу
та синтез дослідження. Практичне значення.
Створений проект кваліфікаційної роботи, а саме web-орієнтоване
віртуальне представництво впроваджено у діяльність фабрики «Лавента».
Дослідження можна використовувати як теоретичну основу у навчальному
процесі закладів вищої освіти, під час підготовки та засвоєння різних аспектів
web-проектування.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. 7
Підпис Дата
РОЗДІЛ 1 АНАЛІЗ СУЧАСНОГО СТАНУ СТВОРЕННЯ WEB-
ОРІЄНТОВАНИХ СИСТЕМ.
1.1 Аналіз ринку існуючих систем
Використання web-орієнтованих систем в наш час вже досить важко
назвати новинкою, тож більшість людей зараз активно користується вже
декількома, або навіть десятком таких систем. Ринок WEB активно розвивається
та значно розширює свої горизонти. Кожен бізнес та виробництво для
нормального існування потребує все більше застосування інформаційних
систем. Такі web-орієнтовані системи можуть виконувати велику кількість
різноманітних додаткових функцій, від управління внутрішніми процесами
компанії чи фабрики до рекламування бренду чи продукції компанії серед маси
користувачів мережі інтернет. Все програмне забезпечення для керування
внутрішніми процесами виробництва взуття є досить унікальним і зазвичай
розробляється вже під конкретні завдання і для застосування в конкретній
компанії. Для рекламних цілей бізнес частіше за все користується декількома
відомими ресурсами одночасно, сайт є власне одним з них.
Так, сайти компаній можна умовно розділити на наступні три основні
категорії:
Сайти-візитки: Ці сайти призначені для представлення компанії, її
товарів або послуг. Вони зазвичай складаються з невеликої кількості сторінок і
мають простий дизайн. Сайти-візитки часто містять інформацію про компанію,
контактні дані, портфоліо або список послуг.
Корпоративні сайти: Ці сайти розробляються для великих компаній з
більшою функціональністю та більшою кількістю сторінок. Вони можуть
включати розділи про компанію, новини, кар'єру, продукти та послуги,
клієнтську підтримку, блоги та інші функції. Корпоративні сайти часто
використовують для внутрішнього спілкування, комунікації з клієнтами та
просування бренду компанії.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 8
Електронна комерція (інтернет-магазини): Ці сайти призначені для
продажу товарів або послуг онлайн. Вони мають розширену функціональність,
включаючи каталог товарів, кошик покупок, систему оплати, управління
замовленнями та інші інструменти для електронної торгівлі. Електронні
комерційні сайти можуть бути невеликими магазинами з обмеженою кількістю
товарів або великими платформами з тисячами продуктів.
Ця категорія є загальними орієнтирами і може перетинатися. Багато сайтів
компаній можуть мати елементи з усіх трьох категорій у залежності від їх
потреб та цілей.
Сайт-візитка зазвичай являє собою саме простий односторінковий сайт з
короткою інформацією про організацію та формою для зворотного зв’язку.
Такий варіант чудово підходить саме для малого бізнесу. Вже для середнього та
великого бізнесу все ж краще підходить розробка вже повноцінного сайту, який
буде складатись із багатьох сторінок таких як (головна, інформація про нас,
блог, новини фабрики, вакансії) також буде мати панель адміністратора для
керування всім контентом та іншими додатковими функціями. Третя група
сторінок поєднує в собі рекламні, та функціональні цілі. Тож цей програмний
засіб і є власне послугою яку пропонує взуттєвий бізнес. До такого програмного
забезпечення також можна віднести і соціальні мережі, сайти для висвітлення
оголошень, інтернет-магазини. Для розробки кожного з цих типів програмного
забезпечення також потрібно використовувати і різні підходи. Для розробки
сайту-візитки доцільно користуватись онлайн конструктором, або ж звернутись
до web-студії для розробки більш унікального дизайну. Для розробки
повноцінних активних сайтів можна скористатись також системою керування
вмістом, такі системи є на сьогодні досить поширеними, але ж не гарантують
належної якості виготовленого продукту, також можна також залучити команду
розробників, які створюють більш якісний продукт, але на це все піде більше
часу та значно більше коштів. Для третього типу програмного забезпечення
також потрібно в будь якому випадку залучити велику команду кваліфікованих
розробників та залучення великих фінансових ресурсів.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 9
Окрім сайтів що можуть часто використовуватись також є і інші типи
використовуваних web-орієнтованих систем. Тож, web-орієнтована система
(або веб-система) – це програмне забезпечення, яке розроблене для
використання через веб-браузер. Вона дає можливість користувачам
взаємодіяти з системою та підтримувати доступ до функціональності через
Інтернет.
Основні риси та характеристики веб-орієнтованих систем:
- Клієнт-серверна структура: Веб-системи базуються на клієнт-
серверній моделі, де веб-браузер виступає як клієнт, а веб-сервер - як сервер.
Клієнтська сторона відповідає за відображення інтерфейсу користувача, потім як
серверна сторона обробляє запити від клієнтів і забезпечує доступ до даних і
функціональності.
- Використання веб-технологій: веб-системи розробляються за
допомогою веб-технологій, таких як HTML (Hypertext Markup Language), CSS
(Cascading Style Sheets) та JavaScript. Ця технологія використана для створення
інтерфейсу користувача, оформлення сторінок та реалізації клієнтської логіки.
- Інтерактивність та взаємодія: веб-системи забезпечують можливість
взаємодії з користувачами через веб-браузери. Користувачі можуть заповнювати
форми, надсилати запити, взаємодіяти з елементами на сторінках та отримувати
відповіді з сервера.
Більшість web-орієнтованих систем[3] мають зазвичай приховану від
інших, звичайних користувачів частину, ту що називається панель
адміністратора.
Панель адміністратора зазвичай має такі характеристики:
Автентифікація та авторизація: адміністратор панелі вимагає від входу
користувача з використанням облікових даних, щоб перевірити його
ідентичність. Після успішної автентифікації система перевіряє привілеї
користувача та надає доступ до відповідних функцій та ресурсів.
Управління користувачами: Панель адміністратора забезпечує
можливість створення, редагування та видалення облікових записів
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 10
користувачів. Адміністратор може надавати різні ролі та привілеї для
користувачів, контролюючи їх доступ до різних частин системи або
функціональності.
Управління контентом: Панель адміністратора надає можливість
додавати, редагувати та видаляти контент на веб-сайті чи системі. Це можуть
бути статті, новини, зображення, відео, продукти або будь-який інший контент,
який відображається на сайті.
Налаштування та параметри системи: Панель адміністратора дозволяє
адміністратору змінювати налаштування та параметри системи або веб-сайту.
Це можуть бути налаштування безпеки, налаштування вигляду та оформлення,
параметри SEO (пошукової оптимізації).
Функціонал панелі адміністратора є досить унікальним для кожної web-
орієнтованої системи. Основною ж функцією панелі адміністратора є
прискорення часу на реагування власників створеної системи на дії користувачів,
або ж деякі зміни. Панель адміністратора переважно зазвичай складається із двох
основних її частин: розділів для роботи із самими сутностями бази даних та
проведення аналітики. Розділи для подальшої роботи із сутностями із бази даних
надають додатково функціонал для виконання чотирьох основних операцій над
отриманими даними: читання, створення, редагування, видалення. Прикладом
такого основного розділу може бути розділ із заявками на надання вакансії, що
розміщені на сайті фабрики. Після того як користувач відправляє вже заповнену
форму з інформацією про себе (профайл) та прикріплює резюме, у базі даних
створюється вже відповідна сутність. Вже після створення такої сутності,
адміністратор бачить її у заздалегідь створеному відповідному підрозділі та
приймає рішення відповідно до визначених вимог компанії. Аналітична ж
частина панелі адміністратора переважно носить інформативний характер та
надає додатково можливість адміністратору побачити всі дії що виконуються
користувачами в рамках цієї системи. Наявність такої доданої інформації дає
повне розуміння про те, що користується популярністю в системі фабрики та в
який бік слід цю систему далі розвивати.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис 11
Дата
Важливою складовою кожної створеної web-орієнтованої системи є власне
її оптимізованість. Тож, оптимізованість [5] – це кількість потрібного часу, за
який web-сторінка повністю завантажується в браузері. Швидкість завантаження
завжди розраховується з моменту, коли власне користувач натискає на саме
посилання, до моменту, коли вже система повністю завантажується, включаючи
всі зображення, аудіо, відео тощо. Швидкість завантаження системи є
показником ефективності та користувацького досвіду. Чим швидше система
завантажується, тим краще для користувачів. Ось кілька факторів, які можуть
вплинути на швидкість завантаження системи:
- Оптимізація коду: Ефективний код, який працює швидко і ефективно,
може сприяти швидкому завантаженню системи. Це може включати оптимізацію
запитів до баз даних, використання кешування, мінімізацію та стиснення файлів,
використання швидких алгоритмів та оптимізацію запитів до сервера.
- Інфраструктура хостингу: Вибір правильного хостинг-провайдера та
налаштування інфраструктури може вплинути на швидкість завантаження
системи. Швидкі сервери з надійними з'єднаннями з Інтернетом та високою
пропускною здатністю можуть покращити час відгуку системи.
- Кешування: використання механізмів кешування може допомогти
зберегти ресурси та прискорити завантаження сторінок. Це може включати
кешування статичних ресурсів, попереднє генерування сторінок і використання
CDN (Content Delivery Network) для швидкого розподілу контенту.
- Оптимізація зображення: Великі розміри зображення можуть
сповільнювати системи завантаження. Використання оптимізованих форматів
зображення та стиск зображення може допомогти зменшити їхній розмір і
підвищити швидкість завантаження.
- Мінімізація запитів: Зайві запити до сервера можуть вплинути на
швидкість завантаження системи. Комбінування файлів CSS та JavaScript,
використання
Крім цього швидкість завантаження є досить важливим фактором для
визначення рейтингу у пошукових систем Google. В компанії Google швидкість
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 12
власне та завантаження сторінки зробили одним із найважливіших на сьогодні
факторів рейтингу для пошуку з мобільних пристроїв. Збільшення власне
конверсій є кінцевою метою для кожного бізнесу. Конверсія [4] – пропорція, або
ж залежність числа проведених покупок від кількості відвідувачів сайту.
Швидкість завантаження сторінки є досить вирішальним фактором для
прийняття самого рішення про зроблену покупку. Рекомендований час
завантаження пошукової системи компанією Google становить менше 1 секунд.
Тож для визначення швидкості завантаження системи Існує декілька
інструментів, які допомагають вирішити проблему швидкості завантаження веб-
сторінок та окремі можливості, які впливають на продуктивність. Ось деякі з них:
Google PageSpeed Insights: це безкоштовний інструмент від Google, який
аналізує швидкість завантаження сторінок на різних сторінках і надає оцінку
швидкості та рекомендації щодо оптимізації. Він також вказує на проблемні
області та пропонує способи виправлення.
GTmetrix: цей інструмент надає детальний аналіз швидкості завантаження
сторінок і показує час завантаження, кількість запитів, розмір сторінки та інші
показники продуктивності. Він також дає рекомендації щодо оптимізації та
висвітлити деякі проблеми.
WebPageTest: це онлайн-інструмент, який дозволяє тестувати швидкість
завантаження сторінок з різних місць світу. Він надає звітну інформацію про час
завантаження, успішну здатність, розмір сторінки та інші показники. Ви можете
також на різні параметри тестування.
Інструменти Pingdom: цей інструмент дозволяє перевіряти швидкість
завантаження сторінок з різних місць світу та визначати час завантаження,
розмір сторінки, кількість запитів та інші показники. Він також дає рекомендації
щодо оптимізації та може виявити проблеми з продуктивністю.
Ці інструменти допомагають швидко завантажувати сторінку, виявляти
проблеми.
Швидкість завантаження сторінки є фактором користувацького досвіду та
ефективності веб-сайту. Вільна швидкість завантаження може призвести до
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 13
зниження задоволення користувачів, збільшення відсотка відмов та негативного
впливу на пошукову оптимізацію. До основних факторів, які впливають на
швидкість завантаження сторінки, відносяться: 1. Розмір сторінки: Більші
розміри сторінки потребують більше часу для завантаження. Важливо
оптимізувати розмір сторінок шляхом мінімізації файлів CSS, JavaScript і
зображень, видалення зайвих або непотрібних компонентів. Деякі приклади
включають типи вашого web-хостингу та сервера, код і бази даних, які
використовує ваш розроблений web-сайт, виконує вибір елементів дизайну,
враховує кількість і розмір зображень, доданих відео та файлів на кожній
сторінці, застосування версії браузера, поведінку всіх користувачів тощо.
Для вирішення важливої проблеми можна скористатися програмним
забезпеченням, яке допоможе зменшить обсяг пам’яті, що займають всі медіа-
файли без особливої втрати якості. Іншим способом для вирішення такої
проблеми є оптимізація таких файлів до та під час завантаження їх власне на
сервер. Для цього практично в кожній мові програмування вже існують готові
підготовлені модулі. Після оптимізації розмір кожного медіа файлу може
зменшитись навіть у декілька разів. Проте крім зменшення самого розміру
файлів слід також скористатися можливістю і асинхронного завантаження.
Асинхронне завантаження [7] — це призупинення такого завантаження медіа
контенту до того моменту, коли не буде вже завантажено всю гіпертекстову
розмітку основної сторінки. Для цього в гіпертекстовій розмітці існує також
спеціальний атрибут, під назвою loading. Ще одним способом хорошої
оптимізації всього медіа контенту є використання різних вбудованих
можливостей серверу застосувань.
Наступним за ним кроком оптимізації web-орієнтованої системи є також
зменшення обсягу коду, який передається, транспортується мережею. Зазвичай
для цього використовуються зменшення, мініфікація цього коду. Мініфікація [8]
— це власне процес з'єднання досить великої кількості файлів в один єдиний із
видаленням додаткового форматування.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис 14
Дата
Рисунок 1.1 – Приклад показу мініфікованого коду
Іншою також важливою складовою для кожної web-орієнтованої системи
є її пошукова оптимізація в пошукових системах. Пошукова оптимізація web-
орієнтованої системи [6] – це перелік деяких заходів та дій, що включають в себе
деяке редагування наповнення (контенту), структури, і метою якого є власне
підняття рейтингу системи в результатах пошуків за певними заданими запитами
користувачів. Чим вище позиція самого сайту в результатах проведеного
пошуку, тим більша ймовірність, що сам відвідувач перейде вже на нього з
використаних пошукових систем, оскільки люди зазвичай часто йдуть за
першими ж ліпшими посиланнями.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 15
Рисунок 1.2 – Приклад основної залежності рейтингу шуканої сторінки в
пошукових запитах за її користувацькою відвідуваністю.
З появою перших пошукових систем з’явилася і пошукова оптимізація ще
в середині 90-х років ХХ-го століття. Вже перші методи пошукової оптимізації в
деякій мірі передбачали редагування контенту та додавання мета-тегів. З
застосуванням таких заходів досить високі місця у пошуковиках стали
отримувати ті сайти, котрі зовсім не містили корисного змістового
навантаження, а містили лише досить популярні пошукові запити. Саме в той час
пошуковики надавали досить великого значення розміщеному тексту на самій
сторінці та іншим додатковим внутрішнім чинникам, якими самі власники сайтів
могли досить легко маніпулювати. Це і призвело до того, що у знаходженні
багатьох пошукових служб перші декілька сторінок займали так звані «сайти-
смітники», це різко знизило власне якість роботи пошукових служб і спричинило
деякий занепад багатьох з них. Та з появою нової технології Page Rank все
більшої уваги стали приділяти і зовнішнім чинникам, що допомогло самій
Google вийти у лідери пошуку сайтів у глобальному світовому масштабі, значно
ускладнивши оптимізацію лише за допомогою одного лише тексту на сторінках
сайтів.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 16
Основними факторами, що можуть впливати на видачу пошукового
результату в пошукових системах є:
− якісні зовнішні посилання на сайт;
− внутрішня оптимізація кожної сторінки;
− технічна оптимізація всього сайту (використана CMS, чистота самого коду,
швидкість завантаження всього сайту, мобільна версія сайту тощо);
− вік сайту;
− наявність ключових слів в самій адресі сайту;
− контент для зацікавлених людей (ключових слів може в самій статті не
бути, але вона все ж буде на першій позиції через її релевантність і цінність).
До факторів, що знижують рейтинг будь-якого сайту, належать:
− завелика кількість ключових слів використаних у контенті;
− технології, які пошукові машини можуть розглядати як спам.
В пошуковій оптимізації одними із основних термінів є релевантність та
ранжування. Релевантність[9] у власне інформаційній науці і інформаційному
пошуку може означати ступінь відповідності кожного знайденого документа,
або ж набору документів по інформаційним потребам користувача. Ранжування
[10] – це сам процес розміщення таких даних у певному порядку та за ступенем
важливості, чи то значущості. Власне у процесі ранжування всього сайту
пошуковими системами зачасту беруться до уваги більш ніж 250 факторів.
Для кожної пошукової оптимізації будь-якої web-орієнтованої системи
існує декілька самих основних типів, заходів (зовнішня пошукова оптимізація,
біла оптимізація, сіра оптимізація, чорна оптимізація[12]).
Для зовнішньої пошукової оптимізації веб-сайту і підвищення його
видимості у пошукових системах можна використовувати наступні методи:
Будування якісних зовнішніх посилань (backlinks): Створення посилань на
ваш веб-сайт з інших авторитетних та релевантних джерел допоможе покращити
рейтинг вашого сайту у пошукових системах. Це можна зробити шляхом
гостьового блогінгу, спільного розміщення контенту, участі в соціальних медіа
та інших веб-ресурсах.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 17
Соціальні медіа: Активна присутність у соціальних медіа (Facebook, Twitter,
Instagram та ін.) дозволяє привернути увагу аудиторії, підвищити впізнаваність
бренду та залучити більше відвідувачів на ваш веб-сайт. Публікація цікавого та
підбадьорливого контенту, активність у коментарях та діалозі зі спільнотою
можуть збільшити шанси на отримання посилань та веб-трафіку.
Оптимізація соціальних медіа: Важливо використовувати ключові слова та
фрази в вашому профілі, публікаціях та описах соціальних медіа.
Біла оптимізація – оптимізаторська робота над кожним ресурсом без
застосування будь-яких офіційно заборонених кожною пошуковою системою та
методів додаткового розкручування ресурсу – без особливого впливу на
пошукові алгоритми сайтів. Включає в себе роботу над власне самим сайтом,
тобто над його деякою внутрішньою навігацією і вмістом, а також роботу з
зовнішнім середовищем самого сайту, тобто просуванням саме цього сайту
шляхом додаткових оглядів, реєстрації в соціальних закладках, прес-релізів,
партнерських програм, тощо із зазначенням самих посилань на даний сайт. Слід
зазначити, що навіть якщо якийсь метод оптимізації не є офіційно забороненим,
то це не завжди означає, що його можна тут застосовувати.
Сіра оптимізація. Власне до сірої пошукової оптимізації сайтів можна
віднести додавання досить великої кількості ключових пошукових слів в сам
текст сторінки, що часто є з втратою прочитаності для кожної людини. Проте в
деяких особливих випадках при використанні такої сірої оптимізації
допускається також помилка під назвою – переоптимізація, це призводить до
переходу з власне сірої оптимізації в чорну. Завдання SEO-копірайтера при
цьому – написати досить оригінальний текст таким чином, щоб така подібна
оптимізація була все ж якомога менш помітна будь-якому «живому» читачеві.
Сіра ж оптимізація відрізняється від власне чорної саме тим, що вона є офіційно
не заборонена, але все ж її використання все одно тут може бути розцінене як
додаткове неприродне завищення популярності будь-якого сайту. Деякі
пошукові системи, такі як наприклад, Google, можуть все ж тимчасово або
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 18
навіть назавжди заблокувати такий сайт. Остаточне рішення приймає сам
фахівець – модератор такої пошукової системи, але не сама програма чи сайт.
Чорна оптимізація. До такої, чорної оптимізації відносяться також всі
можливі методи, які суворо суперечать правилам всіх пошукових систем. Серед
них також можна виділити наступні: застосування та використання дорвеїв
(сторінок і ресурсів що створені виключно і спеціально для роботів самих
пошукових систем, найчастіше також з великою кількістю застосованих
ключових слів на цій сторінці), прийом що називається клоакінг (тут
користувачеві віддається одна з сторінок, що досить легко читається, а самому
пошуковому роботу – інша сторінка, що оптимізована під які-небудь інші
запити), використання прихованого тексту на всіх сторінках сайту.
Тож можна зробити наступний висновок, що ступінь всієї пошукової
оптимізації сторінки все ж залежить від двох основних її критеріїв: якість самого
контенту що представлений на web сторінці, а також рівень технічної реалізації
цієї web-сторінки. До контенту, що найбільше впливає на пошукову оптимізацію
відноситься meta-інформація та сам текст, що відображається в тілі самої
сторінки. В панелі адміністратора пропонується повне керування контентом, як
самої ж сторінки, так і всієї її мета-інформації. Сама система буде надавати
повний контроль над meta-інформацією та самим контентом сайту, вона не може
повністю гарантувати всю його якість, ця відповідальність також лягає на плечі
контент-менеджера.
1.2 Огляд існуючих видів web-орієнтованих систем
Як вже було сказано, web-орієнтована система – це система для роботи якої
власне потрібне постійне з’єднання з стабільною мережею інтернет. Найбільш
розширені види системи керування вмістом (Content Management Systems - CMS)
включають: WordPress є найпопулярнішою CMS у світі. Вона проста у
використанні і має велику кількість розширень та тем, що дозволяє створювати
різноманітні типи веб-сайтів, включаючи блоги, підприємницькі сайти,
електронні магазини тощо, Joomla!
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис 19
Дата
Рисунок 1.3 – Загальна схема архітектури web-орієнтованої системи
Застосовані технології та використані засоби веб-орієнтованої системи
можуть варіюватись залежно від конкретного проекту та його вимог. Однак
основні типи технологій та засобів, які часто використовуються, включають
наступне:
- Мові програмування: мови програмування, такі як PHP, Python, Java
або JavaScript, можуть бути використані для розробки різних частин систем,
включаючи серверний бік, веб-додатки та фронтенд.
- Бази даних: Бази даних, такі як MySQL, PostgreSQL або MongoDB,
використовують для зберігання, управління та доступу до даних, які
використовують у системі.
- Фреймворки: Фреймворки, такі як Laravel, Django або Ruby on Rails,
надають зручний інструментарій для швидкої розробки веб-додатків,
забезпечуючи готові компоненти та структуру проекту.
- CMS (системи керування вмістом): CMS, такий як WordPress,
Joomla! або Drupal, можна використовувати для швидкої розробки та керування
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис 20
Дата
веб-сайтами, забезпечуючи готовий функціонал для керування контентом та
можливостями розширення.
- Інтерфейсні технології: HTML, CSS і JavaScript використовують для
створення використовуваного інтерфейсу веб-сторінок, забезпечуючи їх вигляд,
структуру та інтерактивність.
- Веб-сервери: Сервери, такі як Apache, NGINX або Microsoft IIS,
створені для розміщення та доставки веб-сторінок клієнтам через протокол
HTTP.
Операційна система (Linux, Windows, MacOS) – це все програмне
забезпечення для керування всіма ресурсами комп’ютера, що організовують
взаємодію з користувачем.
Веб-сервери, такі як Apache і Nginx, є основними компонентами веб-
інфраструктури і сайту для розміщення та доставки веб-сторінок клієнтам за
допомогою протоколу HTTP.
Apache HTTP Server: Apache є одним із найпопулярніших веб-серверів. Він
є вільним та відкритим програмним забезпеченням і доступний у багатьох
операційних системах. Apache підтримує широкий спектр функцій і
конфігураційних можливостей, що дозволяє використовувати його під потреби
конкретного проекту.
Nginx: Nginx є ще одним популярним веб-сервером, який відзначається
високою продуктивністю та ефективним використанням ресурсів. Він часто
використовується як проксі-сервер або балансувальник навантаження для
розподілу трафіку між багатьма серверами. Nginx також може виконувати
функції зовнішнього проксі, кешування, SSL-термінації та інших операцій.
Якщо використовувати Apache і Nginx як веб-сервери, то вони є основними
інструментами для обробки запитів клієнтів, виконання веб-додатків і доставки
веб-сторінок до користувачів браузерів. Обидва сервери мають свої переваги та
особливості, і конкретний вибір сервера залежить від потреби проекту, його
розміру, вимог до продуктивності та інших факторів.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 21
База даних (БД) є важливою складовою веб-орієнтованою системою та
використанням для зберігання, управління та доступу до даних, які використані
в системі. Найпоширенішими типами баз даних, які використовуються веб-
системами, є: 1. Реляційна база даних (RDBMS): Реляційні бази даних, такі як
MySQL, PostgreSQL, Oracle або Microsoft SQL Server, забезпечують табличну
структуру для зберігання даних у вигляді таблиці з рядками і стовпцями. Вони
підтримують мову SQL для запитів і мають можливість забезпечення цілісності
даних, індексації, транзакцій та інших функцій.
Система керування базами даних (СКБД) є програмним забезпеченням, яке
дозволяє створювати, керувати та оптимізувати бази даних. Вона надає
інтерфейси для зберігання, організації, пошуку, оновлення та аналізу даних у
базах даних.
Найпоширеніші системи керування базами даних (СКБД) включають:
MySQL: MySQL є однією з найпопулярніших відкритих реляційних СКБД.
Вона використовує мову запитів SQL і має велику спільноту розробників.
MySQL використовується в багатьох веб-додатках, особливо на початкових
етапах розвитку проектів.
PostgreSQL: PostgreSQL є потужною і розширеною відкритою реляційною
СКБД. Вона підтримує широкий спектр функціональних можливостей,
включаючи розширення, географічні типи даних, транзакції та реплікацію.
PostgreSQL використовується в багатьох проектах, які потребують розширеної
функціональності та надійності.
Oracle: База даних Oracle є однією з провідних комерційних реляційних
СКБД. Вона підтримує великі масштаби даних і надійність, а також має багато
функціональних можливостей, таких як аналітика, висока доступність і безпека.
Oracle використовується в багатьох великих підприємствах і критичних
системах.
MongoDB: MongoDB є однією з найпопулярніших нереляційних СКБД, яка
використовує документно-орієнтовану модель даних. Вона дозволяє гнучко
зберігати і опрацьовувати неструктуровані дані, такі як JSON-документи.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 22
Фреймворки – системи, які вже являють собою певний каркас, що визначає
всю структуру та базовий функціонал даного проекту. У фреймворку можуть
бути готові і набори різних модулів, бібліотек чи також віджетів.
Тож правильний вибір технологій самої розробки є вибір технології
щодуже сильно впливає на якість та швидкість розробки системи. А отже
неправильний вибір технології може також поставити хрест на цілому проекті.
Для вибору таких технологій необхідно також володіти неабияким досвідом в
самому програмуванні а також моделюванні будь-якого майбутнього продукту.
Незважаючи на те, що кожна проектована система є унікальна і вимагає
індивідуального підходу, і для спрощення початку розробки можна також
виділити найбільш універсальні та застосовувані технології та створити на їх
основі нові шаблон web-орієнтованої системи, а саме шаблон використання
панелі адміністратора. А іншою досить важливою складовою будь-якої успішної
web-орієнтованої системи є вірний підхід до наповнення самого контенту
розміщеного всередині всієї цієї системи. Правильність заповнення системи
такими даними впливає власне і на індексування системи в пошукових запитах.
Web-сайт[18] – це інтерактивна онлайн-платформа, що складається з
колекції веб-сторінок, пов'язаних між собою гіперпосиланнями та організованих
в одній доменній зоні. Веб-сайт може створити різноманітний контент, такий як
текст, зображення, відео, аудіо, графіки, форми введення даних та інші елементи.
Основні компоненти структури веб-сайту включають: 1. HTML (HyperText
Markup Language): HTML є основною мовою розмітки, яка використовується для
створення і зовнішнього вигляду веб-сторінок. 2. CSS (каскадні таблиці стилів):
CSS використовується для створення стилів і вигляду веб-сторінок, включаючи
кольори, шрифти, розташування елементів і багато іншого.
JavaScript: JavaScript є скриптовою мовою програмування, яка додає
інтерактивність і функціональність веб-сторінок. Вона дозволяє створювати
динамічні ефекти, взаємодіяти з користувачем, валідувати форми, виконувати
асинхронні запити до сервера та багато іншого.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 23
Рисунок 1.4 –Web-сайт компанії комп’ютерних компонентів Amazon
Веб-сайти працюють за наступною схемою: 1. Клієнтська сторона (Front-
End): якщо користувач відкриває веб-сайт у своєму браузері, клієнтська сторона
виконується на його пристрої. Це включає HTML, CSS і JavaScript, які
відповідають за структуру, вигляд і взаємодію з користувачем. Серверна сторона
(Back-End): При отриманні запиту веб-сайту серверна сторона обробляє цей
запит. Вона включає виконання скриптів на сервері, обробку даних, доступ до
баз даних та виконання інших операцій, крім того, для забезпечення
функціональності веб-сайту.
Комунікація: Клієнтська та серверна сторони спілкуються між собою через
мережу Інтернет. Користувач взаємодіє з веб-сайтом, вводячи, натискаючи
кнопки на дату тощо, а сервер обробляє ці дані та повертає відповідь, яка
клієнтська сторона відображає користувачеві.
Зберігання даних: Веб-сайти можуть використовувати базу даних для
зберігання, організації та управління даними. Це може бути використано для
зберігання інформації про користувачів, товаришів, замовлення та інші дані, які
веб-сайт повинен обробити.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 24
Системи керування вмістом (Content Management Systems, CMS): деякі
веб-сайти вибирають CMS, які можуть бути зручними для керування вмістом,
додавати, редагувати та видаляти сторінки, статті, зображення тощо без
необхідності знання програмного забезпечення.
Саме за такою схемою WEB працював протягом багатьох останніх років,
на ринку почали з’являтися вже нові технології, які досить кардинально
змінюють весь принцип роботи web-сайту. Такими технологіями саме є React,
Vue та Angular.
Дані технології вводять нове таке поняття, як односторінковий web-сайт,
де контент сторінки може динамічно змінюватися можливостями застосованої
технології. Саме такий програмний засіб складається із двох основних його
частин: клієнтський застосунок та серверний застосунок.
Кожен з описаних підходів до роботи системи має також свою назву. Всі
ці назви вони отримали у відповідність саме до типу поєднання даних з їх
відображенням, тобто власне розміткою. Перший такий тип носить назву SSR,
що означає рендеринг і знаходиться на стороні серверу, другий же тип
називається SPA, що означає односторінковий виконуваний застосунок.
Кожен з цих типів web-сайтів має також свої переваги та недоліки. Серед
основних переваг рендерингу що знаходиться на стороні серверу слід
відзначити досить хорошу індексацію у самих пошукових системах та
швидкість самої розробки, а до основних недоліків варто віднести саму
необхідність «пере-рендерингу» кожної сторінки при кожному їх переході,
важкість самої роботи з динамічними інтерфейсами. До переваг застосування
рендерингу на стороні клієнта слід віднести також швидкість роботи самої
системи, адже «перерендеринг» буде проходити тільки у тому місці де були
змінені дані, зручність роботи з самими динамічними інтерфейсами, наявність
власне серверного інтерфейсу, який може також використовуватись для роботи
з іншими клієнтами, а от до недоліків слід віднести досить погану індексацію
пошуковими системами, а також важкість розробки та швидкість першого
завантаження.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 25
Наступним видом web-орієнтованої системи є його мобільний
застосунок. Мобільний застосунок чи то додаток – це програмне забезпечення,
призначене для оптимізованої роботи на смартфонах, планшетах, ноутбуках та
інших мобільних пристроях. Багато ж мобільних застосунків встановлені на
самому пристрої, чи то можуть бути завантажені з онлайн магазинів мобільних
застосунків, таких як Google Play, App Store, Windows Phone Store та інших,
безкоштовно чи то за певну плату. Він працює за деяким схожим принципом із
односторінковим web-сайтом. Різниця полягає у самій зміні клієнта. Тепер
клієнтом виступає мобільний додаток, що робить запити до самого серверу та
відображає необхідні результати.
Рисунок 1.5 – Оптимізована система – мобільний застосунок «Дослідження
рівня знань».
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 26
1.3 Системи керування вмістом CMS
Система керування вмістом [18] [23] – це програмне забезпечення, яке
координує роботу та допомагає користувачам створювати, керувати та
змінювати вміст web-сайту без потреби в додаткових спеціальних технічних
знаннях. Простішою мовою, фактично система керування вмістом – це певний
інструмент, який допомагає вам створити web-сайт щоб не писати весь код з
нуля.
Нижче наведені деякі популярні системи керування вмістом (CMS):
WordPress є однією з найпопулярніших CMS у світі. Вона проста у
використанні і має велику кількість розширень та тем, що дозволяють
створювати різноманітні веб-сайти, від блогів до електронних комерційних
платформ.
Joomla також є потужною CMS, яка дозволяє створювати складні веб-
сайти та додатки. Вона має широкі можливості управління користувачами,
розширеннями та мультимовністю.
Drupal – це CMS з великою функціональністю та гнучкістю. Вона часто
використовується для складних та великих проектів, таких як урядові сайти або
корпоративні портали.
Magento – це спеціалізована CMS для розробки електронних комерційних
сайтів. Вона має багато функцій, які не можуть створювати потужні та
масштабовані інтернет-магазини.
Shopify – це хмарна платформа для створення та керування електронними
комерційними сайтами. Вона спрощує процес створення та управління
магазином і має вбудовані інструменти для маркетингу та продажів.
TYPO3 – це потужна CMS, яка часто використовується для веб-розробки
корпоративних веб-сайтів та інтернет-порталів.
Для розробки власної індивідуальної системи керування вмістом
наповнення сайтів контентом було досліджено найбільш популярні та
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 27
поширені системи що є аналогами. Такими системами є: WordPress, Joomla, та
інші.
WordPress є однією з найпопулярніших систем керування контентом
(CMS) у світі. Вона має широкий спектр програм і застосувань для створення
різноманітних типів веб-сайтів, від блогів та особистих сайтів до
корпоративних порталів та електронних магазинів. Основні особливості
WordPress включають:
Простота використання: WordPress пропонує інтуїтивний і легкий у
використанні інтерфейс, який дозволяє користувачам без технічних знань
створювати та редагувати контент.
Розширеність: за допомогою плагінів і тем WordPress може бути
розширеною функціональністю та зовнішнім виглядом. Тисячі безкоштовних
та платних розширень доступні для можливого розширення вашого сайту.
Багатомовність: WordPress підтримує створення багатомовних сайтів з
можливістю локалізації та перекладу контенту на різні мови.
SEO-оптимізація: WordPress має вбудовану підтримку для пошукової
оптимізації, яка дозволяє вирівнювати мета-теги, URL-структуру, генерацію
карт сайту та інші параметри, що покращують позицію вашого сайту в
пошукових системах.
Спільнота та підтримка: WordPress має велику кількість спільних
користувачів і розробників, які забезпечують доступ до безлічі ресурсів,
документації, форумів та підтримки.
Безпека: WordPress стежить за безпечною системою та регулярно
випускає оновлення, щоб виправити вразливість і забезпечити безпечну роботу
з платформою.
WordPress є відкритим програмним захистом
Переваги використання та застосування WordPress:
− WordPress – це практично повністю безкоштовна система для
управління контентом. Всі файли та база даних самого сайту знаходяться
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 28
повністю під необхідним контролем власника. Власник все ж може вибирати
хостинг для сайту за визначеним власним бажанням і потребам.
− Наявність додаткової підтримки з боку розробників. Ядро самої
системи часто оновлюється, щоразу додаються нові модулі, виджети, хуки,
посилюється безпеку та швидкість її роботи. У мережі є відповіді практично на
будь-які питання, що можуть стосуватися саме цієї CMS.
− Тисячі нових плагінів. Один тільки репозиторій CMS WordPress
містить вже більше ніж 1000000 безкоштовних і доступних плагінів для
вирішення різних типів поставлених завдань.
− Зручність і простота використання панелі адміністратора.
Адміністративна-панель WordPress достатньо проста у використанні. І навіть
люди без особливого досвіду зможуть додавати нові розділи, закладки,
сторінки, новини, зображення. Для більш складних сайтів – адміністративна
частина легко адаптується практично під будь-які нові завдання за допомогою
плагіна.
Висока швидкість роботи сайту при правильній побудові шаблону,
включеному кешуванні сторінок сайту та правильній оптимізації зображень та
контенту.
Хоча WordPress має багато переваг, він також має кілька недоліків,
зокрема:
− Безпека: Оскільки WordPress є однією з найпопулярніших CMS у
світі, він стає привабливою мішенню для зловмисників. Якщо не бережно
ставитися до безпеки та не оновлювати систему та плагіни, можуть виникнути
проблеми з невразливістю та можливістю злому сайту.
− Обмеження в настроюванні: хоча WordPress пропонує багато
можливостей для налаштувань за допомогою плагінів і тим, іноді це може бути
обмежено тим, як саме ви хочете налаштувати сайт. Деякі розширення можуть
мати обмежену функціональність або несумісність з іншими плагінами.
− Великі розміри файлів тем та плагінів.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 29
Рисунок 1.6 – Адміністративна панель сайту що створений Wordpress
Joomla! - це система керування вмістом (CMS), яка дозволяє створювати
та управляти різноманітними типами веб-сайтів. Ось деякі переваги та недоліки
Joomla!:
Переваги Joomla!:
− Розширюваність: Joomla! має широкий вибір розширень (розширень
та модулів), які дозволяють розширити функціональність вашого веб-сайту. Ви
можете додати галереї, форми зворотного зв'язку, магазини, форуми та багато
іншого за допомогою доступних розширень.
− Спільнота та підтримка: Joomla! має велику спільноту користувачів
та розробників, що забезпечує доступ до різних джерел інформації,
документації, форумів та підтримки. Ви можете швидко знайти відповіді на свої
запитання або рішення для проблем, з якими ви стикаєтесь.
− Гнучкість в дизайні: Joomla!
Недоліки використання Joomla:
− Немає технічної підтримки.
− Багато розширень та шаблонів для Joomla зачасту платні.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 30
− Слабке місце цієї CMS – розширення, що завантажені з досить
сумнівного джерела, тож вони найчастіше є причиною зламування.
Рисунок 1.7 – Адміністративна панель сайту що створений з Joomla!
Всі розглянуті системи моделювання використовуються на більшості
web-сайтах, проте саме сайт написаний з використанням всіх цих систем важко
оновлювати, відслідковувати за його рівнем безпеки та оптимізація його для
хорошої індексації в різних пошукових системах. Як альтернативу таким
використовуваним системам можна створити власну покращену систему
моделювання, яка вже буде позбавлена багатьох допущених раніше недоліків
існуючих систем та буде вже добре масштабуватись для кращого задоволення
потреб бізнесу.
Метою кваліфікаційної роботи бакалавра є Web-орієнтоване віртуальне
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис 31
Дата
представництво взуттєвої фабрики, яка б надала можливість представлення та
налаштування контенту, інформації необхідної для кращої пошукової індексації
сторінок та гарантувала достатню швидкість роботи системи.
Для досягнення поставленої мети створення веб-сайтів можна визначити
наступні задачі:
− Аналіз вимог: Розібратися з вимогами та цілями проекту, зрозуміти,
яким має бути веб-сайт, яку функціональність він повинен мати, і які вимоги
він повинен задовольняти.
− Планування: Розробити детальний план робіт, визначити кроки,
необхідні для створення веб-сайту, та визначити графік виконання проекту.
− Вибір технологій: Вибрати відповідні технології для створення веб-
сайту, такі як мови програмування, системи керування вмістом (CMS), бази
даних та інші інструменти.
− Розробка дизайну: Створити дизайн веб-сайту, включаючи графічні
елементи, колірну схему, макет сторінок та інші важливі аспекти.
− Розробка функціональності: Реалізувати необхідну
функціональність веб-сайту, таку як реєстрація користувачів, навігація,
додавання та відображення контенту, обробка форм та інші взаємодії з
користувачами.
− Тестування: Провести ретельне тест
1.4 Фактори для створення гіпертекстової розмітки на сервері
При створенні системи одним із найважливіших факторів що впливають
на ефективність web-орієнтованої системи є її оптимізованість. Для вирішення
кожної з них під час створення динамічної сторінки на сервері необхідно
розглянути загальну схему роботи власне самого серверу та визначити, яким
чином все ж можна застосувати загальновідомі методи їх вирішення. Основні
проблеми, що можуть впливати на показники оптимізованості що описані у
підрозділі 1.1.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. 32
№ докум. Підпис Дата
Рисунок 1.8 – Схема роботи web-системи «користувач-сервер»
Розглянувши зображення на рисунку 1.8, бачимо що web-система працює
за наступним алгоритмом:
− Користувач відкриває браузер та вводить необхідну адресу сайту в
полі для пошуку;
− Адреса введена користувачем трансформується в IP-адресу самого
сайту за допомогою можливостей системи доменних імен;
− Сервер отримує заданий запит від користувача та відразу відправляє
результат опрацювання даного запиту у вигляді гіпертекстової розмітки;
− Браузер користувача що за замовчанням отримавши відповідь від
серверу відображає отриманий результат вже на екрані.
Загальна схема роботи всіх web-сайтів не відображає процеси, які
відбуваються на сервері. Щоб зрозуміти як же саме правильно побудувати
систему контролю вмістом потрібно більш детально все ж їх розглянути.
Роботу серверу у таких випадках можна розділити на такі кроки:
− Прийняття запиту: Сервер отримує запит від клієнта через мережу.
Запит може бути HTTP-запитом, який містить інформацію про ресурс, який
клієнт хоче отримати.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 33
− Маршрутизація: Сервер визначає, який обробник або контролер
повинен бути викликаний для обробки запиту, на основі шляху (URL) або інших
параметрів запиту.
− Обробка запиту: Обробник або контролер обробляє запит, виконує
необхідні дії, доступ до бази даних або інших джерел даних, і формує відповідь.
− Генерація відповіді: Сервер генерує відповідь на запит, яка може
бути HTML-сторінкою, JSON-об'єктом або іншим форматом даних, залежно від
типу запиту та потреб клієнта.
− Відправка відповіді: Сервер відправляє згенеровану відповідь назад
до клієнта через мережу.
− Журналювання: Сервер може вести журнал подій, таких як запити,
помилки, використання ресурсів тощо, для моніторингу.
Ось така схема роботи є достатньо простою та чудово підходить і вже для
повністю сформованих гіпертекстових сторінок із деякими створеними блоками
та динамічним вмістом. Проте все ж така схема значно робиться складнішою у
випадку коли структура сторінки web-сайту заздалегідь не визначена, і
формується за певних наявних налаштувань.
Значною мірою на перший погляд все ж може здатись, що у даній ситуації
доцільно таки скористатись WYSIWYG-редактором, але це можливо й не так.
Такі редактори доцільно таки використовувати для публікацій у блозі, де
стилістика контенту переходить на другий план, та для побудови більш
повноцінних сторінок він зовсім може не підходить. З вибором та застосуванням
такого редактору саме створення нової сторінки може все ж перетворитися на
процес, який здалека нагадує повноцінну верстку, ще однією такою проблемою
є те, що наповнений контент буде практично повністю статичним. Контент
також можна буде редагувати, але його аж ніяк не можна буде поєднати з
отриманими даними із бази.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 34
Рисунок 1.9 –WYSIWUG-редактор з назвою Tiny_MCE
Отже саме для створення більш ефективної web-орієнтованої системи
потрібно знайти інший шлях для рендерингу всього динамічного контенту.
Основну ідею для вирішення даної проблеми було запозичено у FrontEnd
фреймворків програмування JavaScript. Ідея полягає в розбитті гіпертекстової
розмітки на деякі блоки, які називаються компонентами. Всі ці компоненти
постійно заповнюються динамічними даними, та поєднуються у повноцінну
web-сторінку.
Отже для реалізації такої поставленої задачі необхідно вдосконалити весь
процес побудови гіпертекстової розмітки web-сторінки на сервері та
використовуючи усі відомі підходи до необхідної оптимізації.
З початком побудови сторінки є власне отримання необхідної інформації
про блоки, що власне були використані під час моделювання всієї цієї сторінки.
Після отримання цієї інформації все ж необхідно взяти інформацію по кожному
з блоків із конфігураційних файлів системи. У цих файлах описано всі необхідні
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 35
запити до самої бази даних, що необхідні особливо при узгодженні конкретного
блоку, та інформацію про наявність створених власних стилів, та скриптів.
Далі після отримання всієї цієї інформації також необхідно паралельно
виконати запити і до бази даних для кожного блоку, та після чого треба
завантажити розмітку для всих блоків та підставити у правильні місця динамічні
дані. Всю отриману розмітку блоків необхідно поєднати в одне єдине ціле та
помістити у основний файл цієї розмітки всередину самого тегу “body”. Окрім
власне побудови розмітки для контенту нашої сторінки необхідно на основі
отриманої інформації з вбудованих конфігураційних файлів збудувати також
стилі, які повинні застосовуватися для кожної сторінки, яка буде побудована.
Так для цього потрібно завантажити в пам’ять самого серверу стилі для кожного
компоненту, який використаний на цій сторінці. Потім все ж необхідно поєднати
їх у єдиний документ. Під час поєднання слід перевіряти всі стилі на можливі
дублювання. Всі отримані результати необхідно помістити у тег “style”
основного файлу нашої розмітки. Такі дії необхідно виконати також у випадку
побудови клієнтського коду. Відмінністю є саме те, що його все ж слід
помістити не у тег “style”, а у інший тег під назвою “script”.
Опираючись на все що описане вище і було розроблено новий метод
рендерингу [22], тобто створення повністю динамічної та оптимізованої web-
сторінки (Рисунок 1.10), який може складатися з наступних основних кроків:
− отримання інформації про використані компоненти на web-сторінці;
− завантаження гіпертекстової розмітки кожного використаного
компоненту;
− розробка запитів доступу до бази даних для подальшого отримання
більш динамічного контенту;
− формування файлу стилів, у відповідності до застосованих компонентів;
− формування всього необхідного javaScript коду;
− надсилання сформованого результату браузерів користувача;
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис 36
Дата
Схема роботи web-системи
Рисунок 1.10 – Основний рендеринг оптимізації web-сторінки
Отже, реалізація такого підходу до створення сторінки на сервері буде
точно гарантувати швидкість роботи такої web-орієнтованої системи, так як
тільки необхідні дані будуть передаватися мережею Інтернет.
Оптимізація проектованої технології сайту
Раніше було визначено у розділі 1.1 що пошукова оптимізація є важливою
складовою для успішності кожної web-орієнтованої системи. Основними
складовими, що можуть впливати на пошукову оптимізацію є контент самої
системи та meta-інформація. Робота з пошуковою оптимізацією у нашому
віртуальному представництві пропонує повний контроль над всим контентом
сайту та головне його meta-інформацією.
Meta-інформація завжди заповнюється в спеціальних використаних тегах
гіпертекстової розмітки для web-сторінки. Основними meta-тегами [23] є Title,
Description, Keywords. Окрім всіх основних тегів також є допоміжні серед яких
можна виділити Og-теги. Такі теги використовують відкриту технологію
OpenGraph [24]. OpenGraph раніше був представлений у Facebook 2010 році. Він
розроблений для інтеграції самого Facebook з іншими web-сайтами. Все це
допомогло власне сайтам стати більш багатими об'єктами в соціальному графі;
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис 37
Дата
тобто це дозволило web-сторінкам мати таку саму функціональність, що й інші
застосовані об'єкти у Facebook. Така технологія надає можливість всім
соціальним мережам достатньо правильно відображати інформації про
запитувану сторінку. Це стає корисним, коли користувач поширює нові
посилання на сторінку в соціальних мережах, а всі інші користувачі можуть
побачити досить коротку інформацію про дану сторінку не переходячи за
посиланням на неї, все це зображено на рисунку 1.11.
Рисунок 1.11 – Застосування технології Open Graph
Існує чотири основні OpenGraph-теги, які є обов’язковими для заповнення:
Og-title, Og-type, Og-description. Ог-теги (Open Graph tags) використовуються для
передачі мета-інформації про веб-сторінку, яка може бути використана
соціальними мережами та іншими сервісами для відображення змісту сторінки.
Існує кілька основних Og-тегів, включаючи:
- og:title: Цей тег вказує заголовок сторінки, який буде відображатися при
його поширенні в соціальних мережах.
- og:description: Цей тег містить опис сторінки, який також буде
відображатися при поширенні в соціальних мережах. Він повинен бути
коротким, змістовним описом сторінки.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис 38
Дата
- og:image: Цей тег вказує URL зображення, яке буде відображатися при
поширенні сторінки. Зображення повинно мати рекомендований
розмір та якість
Наступним нашим кроком для отримання хороших показників,
використаний під час проектування технології є використання micro-даних [25].
Такі дані ніяк не змінюють саме відображення переглянутої сторінки для
користувача. Вони тільки вказують пошуковому боту на заданий тип інформації
у деякому місці гіпертекстової розмітки нашої сторінки. Чудовим таким
прикладом використання micro-розмітки є позначення блоку з правильними
відповідями.
Ще однією такою технологією, яка допомагає підняти рейтинги самого
сайту є AMP [26]. Технологія для оптимізації web-сторінок під мобільні
пристрої, яка була розроблена компанією Google ще в 2016 році.
AMP (Accelerated Mobile Pages) - це відкритий стандарт розробки швидких
та легких веб-сторінок, спрямований на підвищення швидкості завантаження та
використання мобільних пристроїв. Основна ідея для AMP виникає тому, щоб
створити спрощені версії веб-сторінок, які мають мінімальний розмір і швидше
завантажуються на мобільних пристроях.
Деякі основні характеристики AMP включають:
Обмежений набір HTML: AMP використовує спеціальну версію HTML з
обмеженим набором тегів і функцій. Це дозволяє скоротити розмір сторінок і
забезпечити швидке завантаження.
Передварний рендеринг: Сторінки AMP можуть бути попередньо
відтворені кешованими версіями, що дозволяє їм автоматично завантажуватися
під час переходу користувача.
Оптимізація зображення: AMP надає можливості для оптимізації
зображення, такого як визначення розміру, формату та розрізання зображення,
що зменшує розмір сторінки та покращує швидкість завантаження.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 39
Строги правил валідації: Сторінки AMP підлягають строгій валідації, яка
перевіряє дотримання правил та вимог стандарту AMP. Це забезпечує
постійність і надійність AMP-сторінок.
AMP часто використовується для сторінок новин, блогів, магазинів та
інших контентних веб-сайтів, швидкість завантаження та зручність
використання на мобільних пристроях є адресами сайту.
Така технологія як AMP робить перед самим розробником велику кількість
обмежень, але все ж гарантує, що коли всі умови було дотримано то сторінка
буде мати кращі рейтинги.
Про важливість даної технології говорить ще і те, що до літа 2021 року всі
сторінки, що були створені за допомогою та використанням технології AMP у
пошуку відображалися з спеціальною позначкою у вигляді блискавки, що можна
побачити на рисунку 1.12.
Рисунок 1.12 – Приклад застосування технології AMP
У проектованій системі моделювання віртуального представництва
пропонується вводити такі дані під час створення самої сутності сторінки, а
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис 40
Дата
також надається можливість для редагування всієї цієї інформації у будь який
момент часу.
Наповнення meta-інформації та робота з всім контентом системи що є
єдиними способами роботи через пошукову оптимізацію всередині системи,
проте інколи всього цього буває зовсім недостатньо для досягнення хороших
показників. Якщо враховувати все це в проектованій системі моделювання web-
орієнтованих систем віртуального представництва взуттєвої фабрики створений
спеціальний функціонал, який перевіряє кожного авторизованого користувача,
що входить у нашу систему. А у випадку, коли таким користувачем є пошуковий
бот, тоді сервер повертає для нього спеціальну версію сторінки у якій вже
повністю відсутній весь клієнтський код. Тож така перевірка є достатньо легкою
у реалізації так як у кожному запиті присутній заголовок де описана основна
інформація про систему авторизованого користувача. А заголовок, який
приходить від авторизованого користувача відрізняється від заголовку який
приходить від самого боту, і що дає можливість досить легкого розпізнавання та
приховування деякої певної інформації. Все це пришвидшує швидкість
завантаження самої сторінки, що також є досить важливим показником під час
ранжування самої сторінки.
Використання описаних вище відомих технологій а також засобів роботи
з пошуковою оптимізацією та у поєднанні з нелегальним підходом до
рендерингу і всіх його сторінок на сервері гарантує достатньо хороші показники,
а отже і хорошу конверсію користувачів.
Висновки до розділу 1.
В розділі розглянуто і визначено, що таке web-орієнтована система, а
також було розглянуто основні їх типи. Такі засобами називаються системами
контролю вмісту. Після проведеного аналізу обрано найбільш поширений тип
такої системи та розглянуто існуючі засоби для подальшого їх моделювання.
Такі системи є досить поширеними, але все ж мають ряд недоліків. Як
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 41
альтернативу було вирішено розробити власний унікальний засіб без
притаманних системам таких недоліків.
В даному розділі, удосконалено розглянутий метод рендерингу сторінки
на сервері, що значно пришвидшує швидкість роботи всієї системи. Також в
розділі було покращено і загальну схему роботи з пошуковою оптимізацією
сайту та сторінки за рахунок вже розробленої функції, що дещо приховує деякий
контент самої сторінки від різних пошукових ботів.
Удосконалення підходів рендерингу сторінок на сервері та пошукової
оптимізації сторінок має маленькі аспекти розробки веб-орієнтованих систем.
Ці підходи не дозволяють підвищити швидкість завантаження сторінок,
покращити індексацію контенту пошуковими системами та забезпечити кращий
вміст для користувачів.
Оптимізація рендеринга сторінок на сервері включає в себе використання
швидких і ефективних алгоритмів і технологій для генерації сторінок на боці
сервера. Це може включати кешування, стиснення ресурсів, використання CDN
(Content Delivery Network) для швидкого розподілу контенту, асинхронне
завантаження скриптів та інші методи для зменшення часу завантаження
сторінок.
Пошукова оптимізація сторінок забезпечує використання різноманітних
технік та методів, щоб забезпечити кращу видимість сторінок у пошукових
системах. Це може включати оптимізацію мета-тегів, ключових слів,
структурованих даних, URL-адрес, швидкості завантаження, внутрішнього
посилання, якості контенту та багато іншого. Методом пошукової оптимізації є
підвищення рейтингу сторінок у пошукових системах і залучення більшої
кількості органічного трафіку.
Покращена технологія моделювання веб-орієнтованих систем з
відчутними ідеальними підходами рендерингу та пошукової оптимізації
дозволяє створити більш ефективні та успішні веб-системи.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 42
РОЗДІЛ 2 РОЗРОБКА WEB-ОРІЄНТОВАНОЇ СИСТЕМИ
ВІРТУАЛЬНОГО ПРЕДСТАВНИЦТВА ВЗУТТЄВОЇ ФАБРИКИ
2.1 Вибір технологій розробки сайту.
Для розробки ефективної веб-орієнтованої системи був обраний
наступний перелік технологій:
- Операційна система (ОС): Вибір ОС залежить від конкретних
потреб проекту. Рекомендується звернути стабільну та популярну ОС, яка
підтримує належні компоненти та має велику спільноту розробників.
- База даних: Для системи було обрано PostgreSQL. Це потужна та
розширена реляційна база даних, яка забезпечує надійне зберігання та обробку
даних. PostgreSQL має велику функціональність, підтримку географічних даних,
реплікацію та інші корисні можливості.
- Сервер: Для обробки HTTP-запитів і доставки контенту вибрано
сервер nginx. Він знає свою високу швидкість та ефективність, здатність
обробляти велику кількість одночасних підключень та масштабуватися для
великих завантажень.
- Фреймворк серверної частини: Для розробки серверної частини
обрано adonisjs. Це потужний та ефективний фреймворк для розробки веб-
додатків з підтримкою Node.js. Він надає зручні інструменти для роботи з
маршрутизацією, базами даних, аутентифікацією та іншими складовими
серверними частинами.
Вибір цих технологій забезпечує потужний та ефективний стек для
розробки веб-орієнтованих систем, який має швидкість роботи, надійність та
гнучкість. Однак варто пам’ятати, що вибір технологій також повинен отримати
потреби проекту, знання розробників та здатність до масштабу
Nginx (вимовляється "engine x") - це веб-сервер та проксі-сервер з
відкритим вихідним кодом. Він знає свою високу швидкість, ефективність та
надійність. Основні особливості сервера Nginx включають:
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. 43
№ докум. Підпис Дата
Висока продуктивність: Nginx розроблений таким чином, щоб ефективно
обробляти багато одночасних з'єднань і великий обсяг трафіку. Він
використовує асинхронну та подієву модель обробки, що дозволяє йому
ефективно відмовитися від запитів та обробляти великі завантаження.
Проксі-сервер та балансувальник завантаження: Nginx може виступати в
ролі проксі-сервера, який пересилає запити до інших серверів, забезпечуючи
таким чином балансування завантаження. Це дозволяє розподілити трафік між
декількома серверами для покращення швидкості та надійності.
Розширені можливості конфігурації: Nginx надає багато налаштувань і
можливостей конфігурації, що дозволяє точно налаштувати його під конкретні
потреби проекту. Він підтримує розподілені конфігураційні файли, реверсний
проксінг, кешування, SSL-шифрування та багато іншого.
Легкість у використанні та сумісність: Nginx має простий та лаконічний
синтаксис конфігураційних файлів, що полегшує його використання та
налаштування. Він також сумісний з багатьма популярними технологіями та
фреймворками, що дозволяє легко інтегрувати його в існуючі проекти.
Сервер NGINX – один із небагатьох серверів, написаних для вирішення
нагальної проблеми C10K. На відміну від традиційних серверів, сервер NGINX
не покладається на потоки для обробки будь-яких запитів. Він використовує
значно більш асинхронну (масштабовану) архітектуру що керується подіями.
Вся ця архітектура використовує невеликі, але передбачувані обсяги пам'яті під
навантаженням. Тому якщо ви не очікуєте, що будете одночасно обробляти
тисячі одночасних запитів, ви всерівно отримаєте вигоду від
високопродуктивної та невеликої пам'яті NGINX. Сервер NGINX
масштабується практично у всіх його напрямках: від найменших VPS і до
великих кластерів серверів.
Мета власне сервера NGINX полягала в тому, щоб створити найшвидший
web-сервер, і підтримувати це все ще є центральною та основною метою
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис 44
Дата
проекту. Сервер NGINX практично постійно перевершує сервер Apache та інші
сервери в різних тестах для вимірювання продуктивності web-сервера . Однак
після нового випуску NGINX web-сайти значно розширилися від самих простих
HTML-сторінок до динамічного наповненого, багатогранного вмісту. Сервер
NGINX розвинувся і тепер підтримує всі компоненти сучасної мережі,
включаючи Web_Socket, HTTP/2, gRPC і потокове передавання кількох
відеоформатів (HLS, HDS, RTMP та інші).
Навіть після того як сервер NGINX став відомим, як найшвидший web-
сервер, а масштабована базова архітектура виявилася ідеальною для багатьох
web-завдань, крім власне обслуговування вмісту. Оскільки він може обробляти
досить великий обсяг з’єднань, сервер NGINX зазвичай використовується як
зворотний proxy-сервер і основний балансувальник всього навантаження для
керування вхідним трафіком а також розподілу його задач на повільніші сервери
вище по потоку – від більш застарілих серверів баз даних до мікросервісів,
мікрок’мпютерів.
Сервер NGINX також досить часто розміщується між самими клієнтами
та другим web-сервером, щоб служити термінатором SSL/TLS або web-
прискорювачем застосунків. Виступаючи як безпосередній посередник, NGINX
ефективно справляється із поставленими завданнями, які можуть значно
сповільнити роботу вашого web-сервера, наприклад, необхідне узгодження
SSL/TLS або стиснення та кешування всього вмісту для підвищення
продуктивності. Динамічні сайти, створені з використанням будь-чого, від
Node.js до PHP, зазвичай їх розгортають NGINX як додатковий кеш вмісту та
зворотний проксі, а також щоб зменшити навантаження на сервери додатків і
максимально ефективно використовувати базове обладнання.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 45
Рисунок 2.1 – Конфігурація підключення клієнт-серверу nginx
PostgreSQL – це об'єктно-реляційна система керування базами даних
(СКБД), яка надає потужні можливості зберігання, керування та операцій з
даними. Основні особливості PostgreSQL включають: 1. Розширена
функціональність: PostgreSQL підтримує багато розширень та додаткові модулі,
які можуть розширити його можливості. Він підтримує реляційну модель даних,
а також може працювати з географічними даними, текстовим пошуком, JSON,
XML та багатьма іншими типами даних. PostgreSQL використовується як
основне сховище даних або ж сховище даних для багатьох web, мобільних,
геопросторових та аналітичних додатків. Остання основна розглянута мною
версія – PostgreSQL (12).
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 46
Рисунок 2.2 – Приклад одного з багатьох запитів до бази даних
AdonisJS – це платформа Node.js, орієнтована на стабільність та швидкість
розробників, гарну ергономіку. AdonisJS написаний з нуля з чітким принципом
і цілями, та являється міцною інтегрованою системою. Він також наслідує той
же принцип MVC, що використовується у більшості популярних фреймворках,
таких як Rails, Laravel та Spring. Зосереджений він на користувацькому досвіді
самих розробників, стабільності задач та швидкості. Як повноцінна web-
платформа, AdonisJS має вбудований набір різноманітних функції та модулів,
які якісно вирізняють його серед інших фреймворків Node.js.
Також AdonisJs має хорошу вбудовану систему маршрутизації, що
дозволяє все описувати як статичні шляхи до деяких ресурсів, так і власне
динамічні шляхи з одним або декількома параметрами. Також ще однією з
переваг AdonisJs є можливість додаткового створення middleware, тобто деяких
функцій проміжного опрацювання, такі функції є достатньо важливою
частиною майже будь якої web-орієнтованої системи.
Так зараз є дуже популярним використання одно сторінкових застосунків
(SPA), де практично весь контент сторінки періодично змінюється за допомогою
можливостей скриптової мови JavaScript без перезавантаження, це є також дуже
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 47
гарним рішенням для складних користувацьких інтерфейсів, проте на стороні
серверу є сфери застосування, а саме на самих сторінках ресурсу, які власне
повинні добре індексуватися різними пошуковими системами. Adonisjs також
має хороший вбудований шаблонізатор HTML, що дозволяє йому виконувати
рендерінг на стороні застосування серверу.
Рисунок 2.3 – Код написаний на adonisjs
Вже після вибору кращих технологій розробки необхідно вже
організувати ефективну роботу з ними. Налаштування всіх цих засобів окремо
на комп'ютері для кожного розробника буде займати досить багато часу. Щоб
вирішити саме цю проблему необхідно запакувати всі ці технології в єдиний
контейнер, а вже потім можна буде його скачати і запустити практично на будь
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 48
якій системі. Вся ця проблема не є досить новою на сьогодні і в теперішній час
існують безліч інструментів які її вирішують.
Все ж найкращим інструментом для всього цього є Docker [30] (рис 2.4).
Рисунок 2.4 – Основний логотип docker
Docker – це власне платформа з контейнеризації що має відкритий код. Він
дозволяє нашим розробникам упаковувати свої програми в контейнери –
стандартизовані виконувані компоненти, які поєднують вихідний код самої
програми з використанням бібліотек операційної системи (ОС), все ще необхідні
для запуску цього коду в будь-якому використовуваному середовищі.
Контейнери спрощують доставку розподілених додатків і постійно стають все
більш популярними, при переході на хмарну розробку та багатохмарні гібридні
середовища. Тож Docker – це, фактично по суті, деякий набір різноманітних
інструментів, який фактично дозволяє розробникам створювати, розгортати,
запускати, оновлювати та також зупиняти роботу контейнерів за допомогою
простих команд з метою автоматизації процесів та значної додаткової економії
часу за допомогою API.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 49
Рисунок 2.5 – Схематична структура docker.
Сучасні контейнери стали можливими завдяки додатковим можливостям
ізоляції деяких процесів та віртуалізації, а також вбудованим у саме ядро Linux.
Всі ці можливості, такі як власне групи керування для розподілу ресурсів між
різноманітними процесами та розміщення імен для обмеження доступу або ж
видимості процесів до інших ресурсів, та областей самої системи, - дозволяють
декільком основним компонентам програми спільно використовувати необхідні
ресурси одного й того ж екземпляра хоста, як працює система приблизно так
само, так же як і гіпервізор дозволяє кільком віртуальним машинам ділитися
процесором та пам'яттю.
Тож, в результаті цього технологія контейнерів пропонує більшість
функціональних можливостей та переваги віртуальних машин, включаючи
додаткову ізоляцію всіх додатків, економічно масштабоване масштабування та
разове його використання, а також важливі ще додаткові переваги:
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис 50
Дата
− Більша ефективність використання затребуваних ресурсів. Ви
можете запустити в кілька раз більше різних копій програми на одному ж
обладнанні, ніж за допомогою застосування віртуальних машин. Це все може
зменшити ваші хмарні затрати.
− Менша вага: Розміри контейнерів переважно вимірюються в
мегабайтах (порівняно з гігабайтами для більшості віртуальних машин),
покращують використання місткості обладнання та мають значно швидший час
запуску. Тут на відміну від застосування віртуальних машин, контейнери не
несуть корисного навантаження екземпляра ОС та самого гіпервізора та
необхідні для виконання коду.
− Продуктивність розробників: Порівнюючи з віртуальними
машинами, контейнери все ж швидше і простіше можна розгортати, надавати
та перезапускати їх. Це робить їх ідеальними для застосування в системах
безперервної, постійної інтеграції та безперервної доставки пакетів(CI/CD), та
краще підходить для команд розробників, які впроваджують такі практики
DevOps та Agile.
Compose – це власне інструмент для визначення та запуску контейнерних
програм Docker. Вже за допомогою Compose можна використовувати файл
YAML для додаткового налаштування послуг вашої програми.
Рисунок 2.6 – Загальна схема роботи docker-compose
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 51
Рисунок 2.7 – Dockerfile для сервера nginx
Рисунок 2.8 – Dockerfile для БД PostgreSQL
Рисунок 2.9 – Docker_file для adonisjs
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 52
Рисунок 2.10 – Розробник docker-compose.uml
Після написання деяких даних інструкцій вже запуск програмного
продукту можна виконувати лише однією командою, яка автоматично запустить
всі необхідні сервіси всередині деякого ізольованого контейнера. Також docker
дозволяє не переживати про версії того чи іншого сервісу. Набір інструментів
Docker скачує останню поточну версію програмного засобу, яка описана в
Dockerfile, та гарантує правильний запуск даної системи на будь якому
комп’ютері і також дозволяє всім розробникам економити велику кількість часу.
Рисунок 2.11 – Приклад запуску системи контейнера
Далі ми маємо деякий тактичний проміжний результат – як базовий шаблон
для web-орієнтованої системи.
2.2 Створення web-орієнтованої системи віртуального
представництва взуттєвої фабрики.
Основою кожної системи навіть якщо це віртуальне представництво
взуттєвої фабрики є база даних. Тож для створення динамічної сторінки, що
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис 53
Дата
буде сформована в панелі адміністратора де було розроблено власне схему бази
даних, яка складається з двох найбільш основних загальних таблиць:
“components”та“pages”. Схему цієї основної частини бази даних зображено на
рисунку 3.12. Тож у нашій таблиці “pages” зберігається всі назви сторінок,
унікальний ідентифікатор даних для створення потрібного посилання, meta-
інформація а також булеве значення, що відповідає за те, чи дана сторінка
доступна чи ні.
У таблиці зберігається вся необхідна інформація про саму сторінку до якої
відноситься компонент, тип цього компоненту, порядок розміщення компонента
на сторінці, та json-поле в “data” в якому фактично і зберігаються динамічні дані.
Для створення таблиць були також створені міграції самої бази даних (рис 2.12).
Рисунок 2.12 – Схема бази даних основних web-сторінок сайту
Рисунок 2.13 – Опис міграції бази даних для таблиці компонентів
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 54
Окрім самих таблиць, що необхідні для створення сторінки, було також
створено таблицю в якій саме зберігається інформація про навігацію даної
системи, що моделюється.
Дана таблиця називається “navigation” її схему зображено і можна
побачити на рисунку 2.14.
Рисунок 2.14 – Схема таблиць та їх зв’язок “pages” “navigation”
Цікавим елементом цієї таблиці власне є зовнішній ключ, який вказує на
запис із цієї ж самої таблиці. Таке рішення власне дає можливість створювати
деяку вкладеність, що може бути важливо для самої навігації у web-системі.
Крім використаних таблиць, що були описані вже вище, було також
додано таблиці для зберігання переліку адміністраторів, їх ролей та прав.
Для більш зручної роботи із базою даних було також описано моделі
(Рисунок 2.15), тобто було застосовано та використано шаблон проектування під
назвою “Active Record”.
Створений шаблон «Active Record» – це шаблон що використовується для
проектування при реалізації прав доступу до необхідних реляційних баз даних.
Власне у моделях бази даних описуються також взаємозв’язки, методи
життєвого циклу.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 55
Рисунок 2.15 – Класи моделі роботи із таблицею “pages”
Схему взаємодії по кожній сутності з бази даних при створенні динамічної
сторінки зображено на рисунку 2.16.
Рисунок 2.16 – Структурна модель взаємодії сутностей бази даних при
створенні динамічної сторінки
2.3 Розробка web-орієнтованої системи віртуального представництва
Після створення структурної схеми бази даних віртуального
представництва взуттєвої фабрики прийнято доленосне рішення розробити
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. 56
№ докум. Підпис Дата
власну архітектуру відповідно до вже раніше реалізованої у фреймворку
Adonisjs.
Архітектура – це принцип організації самого коду системи. Вкажемо
також, що в кожному модулі будуть зберігатися і власні маршрутизатори,
конфігураційні файли, контроллери, проміжні обробники, розмітка та інше.
Було створено код, який автоматично реєструє всі модулі у сервері node.js для
подальшої зручності використання. Цей код складається з функцій для
реєстрації розмітки, маршрутизації, конфігурації, побудови меню
адміністративної панелі.
Рисунок 2.17 – Основний код для роботи із нашою конфігурацією
Рисунок 2.18 – Структура проекту розробленої архітектури організації коду
Вже наступним кроком нашої розробки є наповнення бази даних даними
та основними сутностями. Для організації цього прописується додатково
спеціальний код, який вже виконується при першому ж запуску програми. До
початкових даних також відносяться: доступи та перший адміністратор, базові
ролі панелі адміністратора. Код для заповнення бази даних:
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. 57
Підпис Дата
Даний код є прикладом сідера (seeder) для створення адміністратора в
системі.
У даному коді використовується фреймворк Adonis.js, імпортовані класи
Env і AdminUser, а також визначений клас AdminUsersSeeder.
В методі run() виконується створення нового запису адміністратора за
допомогою методу create() класу AdminUser. Значення для полів password та
email беруться з файлу оточення (environment file) за допомогою методу
Env.get(). Якщо значення не знайдено у файлі оточення, використовується
значення за замовчуванням ('123123' для ADMIN_PASSWORD та
'[email protected]' для ADMIN_EMAIL).
Наприкінці клас AdminUsersSeeder експортується для використання в
інших частинах системи.
Цей код може використовуватись для автоматичного створення
адміністратора під час ініціалізації системи або для заповнення початкових
даних.
Отже, для надання доступу адміністратору було додатково написано
спеціальну функцію. Ця функція збирає різноманітну інформацію про доступи,
яка фактично зберігається у основних модулях, також додає їх до бази та
приєднує їх до адміністративної частини. Розглянемо приклад використання
функції що зображено на рисунку 2.19.
Код функції:
Починаємо з отримання існуючих дозволів з моделі AdminPermission за
допомогою методу pair('slug', 'name').
З отриманих дозволів формуємо масив усіх дозволів із конфігураційного
файлу за допомогою Config.get('admin.permissions'). Результатом є масив
allConfigPermissions, який містить усі дозволи.
Проходимо по кожному дозволу з allConfigPermissions.
Якщо дозволено з указаним slug вже існує, оновлюємо його запис за
допомогою методу update().
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 58
Якщо з дозволеним наведеним slug не існує, створюємо новий запис за
допомогою методу create().
Перевіряємо, чи є дозволи, які були видалені (не присутні в
allConfigPermissions). Видаляємо їх з бази даних за допомогою методу delete().
Знову отримуємо оновлену колекцію дозволів з моделі AdminPermission за
допомогою методу pair('id', 'slug').
Ми продовжуємо ідентифікатор користувача (адміністратора) для своєї
електронної пошти.
Відкріплюємо всі дозволи користувача.
При цьому використовуємо ті дозволи, які мають ідентифікатори, зібрані в
existedPermissionsReloadIds.
Закриваємо підключення до бази даних.
Повертаємо значення true, щоб позначити успішне виконання.
Рисунок 2.19. Принцип використання команди для надання доступу для
адміністратора
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис 59
Дата
Також наступним етапом розробки даної системи є власне створення
додаткових модулів роботи із навігацією та сторінками. Саме в цих модулях і
повинні бути реалізовані функції для додавання, редагування та видалення
записів, та їх перегляду. Для виведення та відображення отриманих даних, що
знаходяться в таблиці було використано додаткову бібліотеку під назвою
DataTables. Саме використання даної бібліотеки вимагає написання додаткового
сервісу для опрацювання необхідних запитів. Саме в цьому сервісі і повинні
власне бути реалізовані також додаткові функції для сортування даних,
пагінації, пошуку. Для створення та подальшого редагування основних даних
було прийнято рішення використовувати вже модальні вікна.
Модуль роботи з динамічними web-сторінками ресурсу є досить складним
та складається із багатьох необхідних функцій та налаштувань. Для того щоб не
сильно навантажувати сам інтерфейс було прийнято рішення про розподіл
процесу створення нової сторінки на декілька важливих кроків:
− створення web-сторінки та заповнення мета-інформації;
− додавання нового елементу на сторінку;
− перехід до списку компонентів сторінки;
− редагування даних елементу.
Цей процес створення та поповнення сторінки дійсно простий у
використанні і дозволяє кожному компоненту мати власні файли стилів та
клієнтський код. Ідея створення окремої папки для кожного компонента є
добрим підходом, який допоможе організувати код проекту та полегшити його
розробку та обслуговування. У папці компонента (зображений на малюнку 2.20)
зазвичай складаються наступні файли: 1. Розмітка: Це основний файл, який
повертається користувачу і містить HTML-код для відображення компонента на
сторінці. Форма.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. 60
№ докум. Підпис Дата
Рисунок 2.20 – Структура спільної папки компонентів
Кожний з компонентів має свої особливі налаштування, які зберігаються
у локально розміщеному відповідному конфігураційному файлі. У цьому
конфігураційному файлі вказується додатково також на яких типах сторінок цей
компонент може додатково використовуватися, тип даного компоненту
(статичний чи все ж динамічний), і також чи потрібно буде завантажувати стилі,
запити до БД, які необхідно зробити, або під час рендерингу, або ж під час
редагування інформації.
Наступним нашим кроком розробки системи керування всім контентом є
валідація вхідних даних для кожного доданого компоненту. Для цього був
створений також ще один конфігураційний файл, саме в якому і описуються
правила для кожного із потрібних блоків.
general_top: {
/'data.title': 'required',
/'data.background_image': 'required',
/'data.description': 'required',
/'data.background_text': 'required',
/'data.download_file': 'required',
/'data.subtitle': 'required',
/'data.download_icon': 'required',
/data.button_link': 'required',
/'data.download_text': 'required'
Ці валідаційні перевіркові правила автоматично довантажуються перед у
головний валідатор перед збереженням нової інформації. Коли власне
адміністратор зберігає всю інформацію про кожен компонент спочатку дані
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 61
потрапляють у головний завантажувальний валідатор, де перевіряється
наявність такого компоненту в самій системі та підвантажуються різні
валідаційні правила спеціально саме для цього компонента.
Після того, як нами було реалізовано можливість для наповнення системи
компонентами та перевіряти отримані вхідні дані, та можна перейти до
створення контроллеру, який власне і буде всі ці дані зберігати. У контролері
описано декілька основних методів, серед яких можна і потрібно виділити
метод, для зміни всього порядку відображення всіх компонентів на сторінці
(reorder). Ще одним досить важливим основним методом є також метод для
редагування даних (edit_Data), оскільки саме в ньому виконуються запити, які
чітко описані в конфігураційному файлі з видимим ключем “form”.
Після створення функціоналу та для створення сторінок і їх наповнення
контентом залишилось тільки нам реалізувати рендеринг даної сторінки. Для
реалізації цього було використано нову технологію яка розроблена у підрозділі
2.1. У цій функції буде також формуватися весь необхідний для web-сторінки
код: гіпертекстова розмітка, стилі, клієнтський код, та власне запити до бази
даних.
Так в результаті описаних раніше кроків було створено вже повноцінну
систему моделювання web-орієнтованих віртуальних представництв, яка вже
може конкурувати із технологіями що являються аналогами. Завдяки власному
підходу власне до самого рендерингу сторінок на сервері і ця технологія
гарантує пристойну швидкість роботи системи навіть тоді коли використано
великій кількості компонентів та запитів до організованої бази даних.
Висновки до розділу 2
У другому розділі визначено оптимальні кращі технології для розробки
інформаційної технології для моделювання web-орієнтованих систем. Описаний
процес створення функціоналу для створення сторінок і керування контентом є
важливою частиною розробки інформаційної технології для моделювання веб-
орієнтованих систем. Нижче наведено загальну інформацію про цей процес: 1.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 62
Схема бази даних: Спроектовано схему бази даних, яка відображає структуру
даних вашої системи. У вашому випадку ви використали три таблиці: навігація,
сторінки та компоненти. Ці таблиці відповідають за навігацію, сторінки та
компоненти системи відповідно.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 63
РОЗДІЛ 3 ПЕРЕВІРКА ОТРИМАНИХ РЕЗУЛЬТАТІВ СИСТЕМИ.
3.1 Опис роботи системи.
Для попереднього входу у систему моделювання необхідно скористатися
web-браузером, в якому все ж слід ввести і домен на якому хоститься система а
також шлях “/admin”. Після і в результаті виконання таких дій користувач
потрапить на сторінку власне авторизації в системі, що зображена на рисунку
3.1. На цій основній сторінці розміщена форма, яка складається із двох
необхідних полів для заповнення. Такими полями є адреса поштової скриньки
користувача для входу та його пароль. А кожне із цих полів є також
обов'язковим для заповнення.
Рисунок 3.1 – Екран для входу в систему
Після введення всіх даних необхідних для самої авторизації, користувач
потрапляє до панелі адміністратора цієї системи. У меню панелі адміністратора
власне користувач бачить розділи що доступні відповідно до його прав у даній
системі, що відображено на наступних рисунках 3.2, 3.3.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис 64
Дата
Рисунок 3.2 – Меню з розділами, які доступні саме адміністратору системи
Рисунок 3.3 – Меню із розділами, які доступні для модератора системи
Дозволи користувачів формуються у відповідності до їхньої ролі. Ролі
можна налаштувати а також редагувати всередині системи, що й
продемонстровано на рисунку 3.4.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 65
Рисунок 3.4 – Форма налаштування ролі в системі
Для створення зовсім нової сторінки в системі потрібно буде перейти до
розділу сторінок “Pages”. При переході на дану сторінку цього розділу
користувач відразу побачить таблицю із списком всіх використаних сторінок,
що були створені в самій системі, кнопки для створення нової сторінки, та
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 66
кнопки, що відкривають додатково контекстне меню для кожної конкретної
сторінки (Рисунки 3.5, 3.6).
Рисунок 3.5 – Вигляд розділу для сторінок “Pages”
Рисунок 3.6 – Форма додавання та створення нової web-сторінки що буде
додано до системи
Після заповнення даної форми що зображено на рисунку 3.6 то
відбувається збереження даної сторінки у базі даних та також автоматичне
оновлення всього списку web-сторінок на заданому екрані. Наступним кроком є
заповнення всієї сторінки контентом, для цього треба кліком викликати меню
сторінки та спробувати перейти на пункт “components”. Натиснувши на дану
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 67
кнопку користувач потрапляє на потрібну йому сторінку із списком всіх
компонентів, що використовуються на даній сторінці. Також на цій сторінці є
всі необхідні кнопки для додавання нових компонентів, та попереднього
перегляду заданої сторінки та редагування інформації самої сторінки. Вигляд
розділу “components” ми бачимо зображено на рисунку 3.7.
Рисунок 3.7 – Список компонентів однієї з сторінки
На даному етапі весь список компонентів даної сторінки майже порожній.
Для додання нового компоненту, для цього потрібно натиснути кнопку “add
component” і, у вікні що з’явилося, вибрати новий тип компонента, ввести його
назву. Цей функціонал буде зображено на рисунку 3.8. та інші.
Рисунок 3.8 – Додавання нового потрібного компонента
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 68
Після додавання компоненту на дану сторінку потрібно наповнити його
контентом після натискання на кнопку “edit data”. Після натискання на дану
кнопку відкриється нова форма (Рисунок 3.9), що відповідає обраному типу
компонента (а кожен компонент має свою власну форму для заповнення даними
оскільки потребує більш конкретного набору інформації).
Рисунок 3.9 – Форма редагування даних для доданого компонента
Результатом проведених дій є web-сторінка яка зображена на наступному
рисунку 3.10.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. 69
Арк. № докум. Підпис Дата
Рисунок 3.10 – Створена тестова web-сторінка
Наступним важливим функціоналом є власне робота із навігацією на
самому сайті. Для цього необхідно зробити перехід у розділ “navigation”, після
чого з’явиться також сторінка що зображена на рисунку 3.11. На даній сторінці
зображено деревовидну структуру файлів, в основі якої можна побачити два
елементи, що відповідають за основну навігацію у хедері та футері. Так як і у
випадку з компонентами, порядок навігаційних маршрутів можна також
змінювати з допомогою відомої технології “drag’n’drop”, що продемонстровано
на наступному рисунку 3.12.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 70
Рисунок 3.11 – Вигляд навігаційного розділу “navigation”
Рисунок 3.12 – Зміна порядку навігаційних маршрутів
А результат створення навігації в самій системі теж можна побачити на
рисунку 3.13.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 71
Рисунок 3.13 – Створена тестова навігація regsoft
3.2 Перевірка всієї системи на пошукову оптимізацію.
Для такої перевірки рівня застосування пошукової оптимізації web-
сторінки існують додатково спеціальні програми. Однією із найпопулярніших з
таких програм є Light house.
Light_house – це автоматизований інструмент що має відкритий код, який
призначений для покращення якості роботи web-сторінок. Цей інструмент є
частиною web-браузера під назвою Chrome. Для того, щоб перевірити наші
сторінки цим інструментом необхідно відкрити панель розробника за кнопкою
F12, потім натиснути на розділ Light house. У вікні цього інструменту можна
вибрати з категорій для яких необхідно провести необхідний аналіз та вибрати
для який саме перерахованих типів пристроїв її проводити. Вже після вибору
всіх необхідних критеріїв перевірки варто і слід натиснути кнопку “Generate
report” зачекати від 30 секунд до приблизно 2 хвилин щоб отримати очікувані
результати перевірки.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. 72
Підпис Дата
Рисунок 3.14 – Розділ Light_house що є в браузері Google_Chrome.
Рисунок 3.15 – Приклад перевірки даного сайту технологією Light_house.
Після перевірки окрім цифр від 0 до 100 також цей інструмент надає
детальний звіт з кожного обраного критерію оцінки web-сторінки. Інструмент
також надає посилання на саму сторінку де описано всі основні способи
вирішення помилки, яка виникла в процесі перевірки самої web-сторінки.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 73
Перевірка системи на пошукову оптимізацію
Рисунок 3.16 – Детальний опис усіх виявлених помилок що допущені під час
створення web-орієнтованої системи.
Рисунок 3.17 – Інструкція з виправлення виявлених та допущених помилок.
Отримавши досить детальні результати на рахунок відповідності сайту до
поставлених вимог пошукових систем потрібно провести роботи на
виправлення кожної з допущених та виявлених помилок. Для перевірки
вирішення проблем можна також ще раз проаналізувати сторінку даним
інструментом. Оптимальними показниками для самого сайту є його рейтинг від
90 до 100 в кожній із представлених деяких категорій. Такі показники
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис 74
Дата
гарантують, що web-сторінка буде завжди займати високі місця в рейтингах та
пошукових запитах.
З результату перевірки видно (рисунок 3.18), створена сторінка має
хороші результати в порівнянні з системами що є аналогами (рисунок 3.19), що
можна вважати як підтвердження правильності такого підходу до створення
технологій моделювання web-орієнтованих систем.
Рисунок 3.18 – Результат перевірки кожної з створених тестових сторінок
Рисунок 3.19 – Показники сайту створено за допомогою системи що є
аналогом
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 75
Рисунок 3.20 – Перевірка системи на можливість використання мікро розмітки.
Рисунок 3.21 – Перевірка всієї системи на відповідність усім заданим вимогам
технології AMP.
Висновки до розділу 3
У третьому розділі був проведений достатньо детальний розгляд
розробленої системи. Було описано процес для створення web-сторінок за
допомогою розробленої нами технології. Цей опис роботи про те, що в
четвертому розділі вашої розробки було проведено детальний розгляд
розробленої системи. Основні аспекти, які були описані, включають: 1.
Створення веб-сторінок: Ви детально описали процес створення веб-сторінок за
допомогою розробленої технології. Це може включати вибір компонентів,
налаштування їх властивостей, структурування контенту та інші аспекти
створення сторінок. В розділі розглянуто можливості використання технології
для роботи із навігацією на сайті. А також проведено перевірку створеної нами
web-сторінки на пошукову оптимізацію та технологією “lighthouse”.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис 76
Дата
ВИСНОВКИ
З опису видно, що в першому розділі визначено поняття веб-орієнтованої
системи та склали основні типи таких систем. У результаті аналізу вибрано
найпоширеніший тип системи і виявлено засоби, які зазвичай використовуються
для їх моделювання, такі як WordPress та Joomla. Проте вирішено розробити
власний засіб з урахуванням недоліків, які притаманні цим системам, таких як
вразливість, надійність оновлення та пошукова оптимізація.
В розділі описано, як покращити метод рендеринга динамічних сторінок
на боці сервера, зокрема, застосовуючи технології AMP, OpenGraph та
Schema.org для покращення рейтингів у пошукових системах. Також була
введена функція, яка дозволяє приховувати деякі контентні сторінки від
пошукових ботів, що покращує пошукову оптимізацію сторінок.
У другому розділі визначено оптимальні технології для розробки системи,
зокрема, вибрано сервер Nginx, систему керування базами даних PostgreSQL та
бекенд-фреймворк AdonisJS. Також була розроблена схема бази даних з
використанням таблиці навігації, сторінок і компонентів, і був описаний процес
створення функціоналу для створення сторінок і керування контентом. У розділі
проведено детальний розгляд розробленої системи, включаючи доступ до панелі
адміністратора, процес створення веб-сторінок та роботу з навігацією на сайті.
Також була здійснена перевірка створених сторінок на пошукову оптимізацію
за допомогою онлайн засобів.
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 77
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Моделювання web-орієнтованих систем [Електронний ресурс]. – Режим
доступу: http://ena.lp.edu.ua:8080/bitstream/ntb/19246/1/3-Boyko-16-25.pdf
2. Admin Dashboard [Електронний ресурс]. – Режим доступу:
https://www.reviewboard.org/docs/manual/3.0/admin/admin-ui/dashboard/
3. Іванова О. А. Аналіз сучасних тенденцій розвитку інтернет-магазинів / О.
А. Іванова Електронне наукове фахове видання "Економічний вісник
Запорізької державної інженерної академії". - 2019. - № 4. (дата звернення:
05.03.23).
4. Семенов В. М. Мобільний електронний бізнес: сучасний стан та
перспективи розвитку / В. М. Семенов Економіка. Управління. Інновації. - 2018.
- № 3. - С. 31-37. (дата звернення: 05.03.23).
5. Шевченко, І. В. Огляд ринку мобільних пристроїв в [Електронний ресурс]
/ І. В. Шевченко // Електронне наукове фахове видання "Економічний простір".
- 2020. - № 19. (дата звернення: 05.03.23).
6. Морозов В. А. Розвиток мобільного електронного бізнесу [Текст] / В. А.
Морозов, І. І. Петренко Науковий вісник Миколаївського національного
університету імені В. О. Сухомлинського. - 2019. - № 1. - С. 72-76.
7. Король В. М. Аналіз сучасного стану ринку мобільних пристроїв [Текст] /
В. М. Король Проблеми та перспективи розвитку економіки. - 2018. - № 3. - С.
62-66. (дата звернення: 05.03.23).
8. Коваленко Ю. І. Особливості функціонування інтернет-магазинів [Текст] /
Ю. І. Коваленко Економічний часопис-ХХІ. - 2020. - № 5-6 (1). - С. 125-128.
(дата звернення: 10.04.23).
9. Лаврик І. В. Тенденції розвитку інтернет-магазинів в Україні [Текст] / І. В.
Лаврик Наукові записки Інституту законодавства Верховної Ради України. -
2018. - № 5. - С. 153-160. (дата звернення: 10.04.23).
10. Techniques of website speed optimization [Електронний ресурс]. – Режим
доступу: https://www.altexsoft.com/blog/engineering/12-techniques-ofwebsite-
speed-optimization-performance-testing-and-improvement-practices/
11. Website conversion rate [Електронний ресурс]. – Режим доступу:
https://www.geckoboard.com/best-practice/kpi-examples/website-conversion-rate/
12. Google pagespeed Insights [Електронний ресурс]. – Режим доступу:
13. https://kinsta.com/blog/google-pagespeed-insights/
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 78
14. Lighthouse [Електронний ресурс]. – Режим доступу:
https://developers.google.com/web/tools/lighthouse
15. Efficiently load javascript with defer and async [Електронний ресурс]. –
Режим доступу: https://flaviocopes.com/javascript-async-defer/
16. What is minification [Електронний ресурс]. – Режим доступу:
https://www.imperva.com/learn/performance/minification/
17. What is SEO? [Електронний ресурс].
https://searchengineland.com/guide/what-is-seo – Режим доступу:
18. Content relevance [Електронний ресурс].
https://www.searchmetrics.com/glossary/content-relevance/ – Режим доступу:
19. Rankings [Електронний ресурс]. –
https://www.searchmetrics.com/glossary/rankings/ Режим доступу:
20. White hat SEO [Електронний ресурс].
https://whatis.techtarget.com/definition/white-hat-SEO – Режим доступу:
21. What is black hat SEO? [Електронний ресурс]. – Режим доступу:
https://www.wordstream.com/black-hat-seo
22. What is an operating system? [Електронний ресурс]. – Режим доступу:
https://edu.gcfglobal.org/en/computerbasics/understanding-operating-systems/1/
23. Web server [Електронний ресурс]. – Режим доступу:
https://developer.mozilla.org/en-
US/docs/Learn/Common_questions/What_is_a_web_server
24. Database management system [Електронний ресурс]. – Режим доступу:
https://www.techopedia.com/definition/24361/database-management-systems-dbms
25. Server Side web frameworks [Електронний ресурс]. – Режим доступу:
https://developer.mozilla.org/en-
US/docs/Learn/Serverside/First_steps/Web_frameworks
26. Website [Електронний ресурс]. – Режим доступу:
https://www.searchmetrics.com/glossary/website/
27. How a website works [Електронний ресурс]. – Режим доступу:
https://www.superwebpros.com/blog/how-does-a-website-work/
28. What is a CMS [Електронний ресурс]. – Режим доступу: What is a CMS
[Електронний ресурс]. – Режим доступу:
https://kinsta.com/knowledgebase/contentmanagement-system/
29. The pros and cons of using a CMS [Електронний ресурс]. – Режим доступу:
https://flickerleap.com/pros-cons-using-cms-build-website/
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис 79
Дата
30. Server side rendering definition [Електронний ресурс]. – Режим доступу:
https://www.omnisci.com/technical-glossary/server-side-rendering
31. SEO meta tags [Електронний ресурс]. – Режим доступу:
https://www.wordstream.com/meta-tags
32. The OpenGraph protocol [Електронний ресурс]. – Режим доступу:
https://ogp.me/
33. Schema.org Documentation [Електронний ресурс]. – Режим доступу:
https://schema.org/docs/documents.html
34. The complete guide to accelerated mobile pages [Електронний ресурс]. –
Режим доступу: https://instapage.com/blog/amp
35. What is nginx [Електронний ресурс]. – Режим доступу:
https://kinsta.com/knowledgebase/what-is-nginx/
36. PostgreSQL [Електронний ресурс]. – Режим доступу:
https://www.postgresql.org/
37. Adonisjs [Електронний ресурс]. – Режим доступу: https://adonisjs.com/
38. Docker [Електронний ресурс]. – Режим доступу: https://www.docker.com/
Арк.
ЧДТУ 232101.002 ПЗ
Змн. Арк. № докум. Підпис Дата 80
81
ДОДАТОК А
Затверджую
Зав. кафедри ІТП,
______________ Тетяна ПРОКОПЕНКО
«____»____________2023 р.
WEB-ОРІЄНТОВАНЕ ВІРТУАЛЬНЕ ПРЕДСТАВНИЦТВО ВЗУТТЄВОЇ
ФАБРИКИ
Специфікація
482.ЧДТУ. 232101-02
Листів 2
Розробник ____________________ Артем КАПЕЛЮШНИЙ
Керівник ____________________ Ярослав ТАРАСЕНКО
Н.контроль ____________________ Ярослав ТАРАСЕНКО
Черкаси – 2023
82
482.ЧДТУ. 232101-01
Позначення Найменування Примітка
Документація
482.ЧДТУ. 232101-02 12 01 Текст програми
482.ЧДТУ. 232101-02 34 01 Інструкція користувача
83
ДОДАТОК Б
WEB-ОРІЄНТОВАНЕ ВІРТУАЛЬНЕ ПРЕДСТАВНИЦТВО ВЗУТТЄВОЇ
ФАБРИКИ
Текст програми
482.ЧДТУ. 232101-02 12 01
Листів 7
Розробник _____________ Артем КАПЕЛЮШНИЙ
Черкаси – 2023
84
ЧДТУ 232101.002. ПЗ
<!DOCTYPE html>
<!--[if IE 9 ]> <html lang="uk" class="ie9 loading-site no-js"> <![endif]-->
<!--[if IE 8 ]> <html lang="uk" class="ie8 loading-site no-js"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="uk" class="loading-site no-js"> <!--
<![endif]-->
<head>
<meta charset="UTF-8" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="https://laventashoes.com/xmlrpc.php" />
<script>(function(html){html.className = html.className.replace(/\bno-
js\b/,'js')})(document.documentElement);</script>
<title>Лавента – Шкіряне взуття від фабрики
"Лавента"</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-
scale=1" /><link rel='dns-prefetch' href='//s.w.org' />
<link rel="alternate" type="application/rss+xml" title="Лавента » стрічка"
href="https://laventashoes.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="Лавента » Канал
коментарів" href="https://laventashoes.com/comments/feed/" />
<script type="text/javascript">
window._wpemojiSettings =
{"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/13.0.0\/72x72\/","ext":".png","svg
Url":"https:\/\/s.w.org\/images\/core\/emoji\/13.0.0\/svg\/","svgExt":".svg","source":{
"concatemoji":"https:\/\/laventashoes.com\/wp-includes\/js\/wp-emoji-
release.min.js?ver=5.5.3"}};
!function(e,a,t){var
r,n,o,i,p=a.createElement("canvas"),s=p.getContext&&p.getContext("2d");function
c(e,t){var
a=String.fromCharCode;s.clearRect(0,0,p.width,p.height),s.fillText(a.apply(this,e),0,
0);var r=p.toDataURL();return
s.clearRect(0,0,p.width,p.height),s.fillText(a.apply(this,t),0,0),r===p.toDataURL()}fu
nction l(e){if(!s||!s.fillText)return!1;switch(s.textBaseline="top",s.font="600 32px
Arial",e){case"flag":return!c([127987,65039,8205,9895,65039],[127987,65039,8203,
9895,65039])&&(!c([55356,56826,55356,56819],[55356,56826,8203,55356,56819])
&&!c([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56
85
ЧДТУ 232101.002. ПЗ
423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,5
6421,8203,56128,56430,8203,56128,56423,8203,56128,56447]));case"emoji":return!
c([55357,56424,8205,55356,57212],[55357,56424,8203,55356,57212])}return!1}fun
ction d(e){var
t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByT
agName("head")[0].appendChild(t)}for(i=Array("flag","emoji"),t.supports={everythi
ng:!0,everythingExceptFlag:!0},o=0;o<i.length;o++)t.supports[i[o]]=l(i[o]),t.supports
.everything=t.supports.everything&&t.supports[i[o]],"flag"!==i[o]&&(t.supports.ever
ythingExceptFlag=t.supports.everythingExceptFlag&&t.supports[i[o]]);t.supports.eve
rythingExceptFlag=t.supports.everythingExceptFlag&&!t.supports.flag,t.DOMReady
=!1,t.readyCallback=function(){t.DOMReady=!0},t.supports.everything||(n=function
(){t.readyCallback()},a.addEventListener?(a.addEventListener("DOMContentLoaded
",n,!1),e.addEventListener("load",n,!1)):(e.attachEvent("onload",n),a.attachEvent("on
readystatechange",function(){"complete"===a.readyState&&t.readyCallback()})),(r=
t.source||{}).concatemoji?d(r.concatemoji):r.wpemoji&&r.twemoji&&(d(r.twemoji),
d(r.wpemoji)))}(window,document,window._wpemojiSettings);
</script>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
<link rel='stylesheet' id='wp-block-library-css'
href='https://laventashoes.com/wp-includes/css/dist/block-
library/style.min.css?ver=5.5.3' type='text/css' media='all' />
86
ЧДТУ 232101.002. ПЗ
<link rel='stylesheet' id='wc-block-vendors-style-css'
href='https://laventashoes.com/wp-
content/plugins/woocommerce/packages/woocommerce-blocks/build/vendors-
style.css?ver=3.8.1' type='text/css' media='all' />
<link rel='stylesheet' id='wc-block-style-css' href='https://laventashoes.com/wp-
content/plugins/woocommerce/packages/woocommerce-
blocks/build/style.css?ver=3.8.1' type='text/css' media='all' />
<link rel='stylesheet' id='contact-form-7-css' href='https://laventashoes.com/wp-
content/plugins/contact-form-7/includes/css/styles.css?ver=5.3.2' type='text/css'
media='all' />
<link rel='stylesheet' id='cookie-law-info-css' href='https://laventashoes.com/wp-
content/plugins/cookie-law-info/public/css/cookie-law-info-public.css?ver=1.9.5'
type='text/css' media='all' />
<link rel='stylesheet' id='cookie-law-info-gdpr-css'
href='https://laventashoes.com/wp-content/plugins/cookie-law-
info/public/css/cookie-law-info-gdpr.css?ver=1.9.5' type='text/css' media='all' />
<style id='woocommerce-inline-inline-css' type='text/css'>
.woocommerce form .form-row .required { visibility: hidden; }
</style>
<link rel='stylesheet' id='flatsome-icons-css' href='https://laventashoes.com/wp-
content/themes/flatsome/assets/css/fl-icons.css?ver=3.12' type='text/css' media='all'
/>
<link rel='stylesheet' id='woo-variation-swatches-css'
href='https://laventashoes.com/wp-content/plugins/woo-variation-
swatches/assets/css/frontend.min.css?ver=1.1.2' type='text/css' media='all' />
<style id='woo-variation-swatches-inline-css' type='text/css'>
.variable-item:not(.radio-variable-item) { width : 30px; height : 30px; } .wvs-style-
squared .button-variable-item { min-width : 30px; } .button-variable-item span {
font-size : 16px; }
</style>
<link rel='stylesheet' id='woo-variation-swatches-theme-override-css'
href='https://laventashoes.com/wp-content/plugins/woo-variation-
swatches/assets/css/wvs-theme-override.min.css?ver=1.1.2' type='text/css' media='all'
/>
87
ЧДТУ 232101.002. ПЗ
<link rel='stylesheet' id='flatsome-main-css' href='https://laventashoes.com/wp-
content/themes/flatsome/assets/css/flatsome.css?ver=3.12.2' type='text/css'
media='all' />
<link rel='stylesheet' id='flatsome-shop-css' href='https://laventashoes.com/wp-
content/themes/flatsome/assets/css/flatsome-shop.css?ver=3.12.2' type='text/css'
media='all' />
<link rel='stylesheet' id='flatsome-style-css' href='https://laventashoes.com/wp-
content/themes/flatsome-child/style.css?ver=3.0' type='text/css' media='all' />
<script type="text/javascript">(function(a,d){if(a._nsl===d){a._nsl=[];var
c=function(){if(a.jQuery===d)setTimeout(c,33);else{for(var
b=0;b<a._nsl.length;b++)a._nsl[b].call(a,a.jQuery);a._nsl={push:function(b){b.call(a,
a.jQuery)}}}};c()}})(window);</script><script type='text/javascript'
src='https://laventashoes.com/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp'
id='jquery-core-js'></script>
<script type='text/javascript' id='cookie-law-info-js-extra'>
/* <![CDATA[ */
var Cli_Data =
{"nn_cookie_ids":[],"cookielist":[],"ccpaEnabled":"","ccpaRegionBased":"","ccpaBa
rEnabled":"","ccpaType":"gdpr","js_blocking":"1","custom_integration":"","triggerD
omRefresh":""};
var cli_cookiebar_settings =
{"animate_speed_hide":"500","animate_speed_show":"500","background":"#FFF","
border":"#b1a6a6c2","border_on":"","button_1_button_colour":"#8d2828","button_1
_button_hover":"#712020","button_1_link_colour":"#fff","button_1_as_button":"1","
button_1_new_win":"","button_2_button_colour":"#333","button_2_button_hover":"
#292929","button_2_link_colour":"#444","button_2_as_button":"","button_2_hideba
r":"","button_3_button_colour":"#3566bb","button_3_button_hover":"#2a5296","butt
on_3_link_colour":"#fff","button_3_as_button":"1","button_3_new_win":"","button_
4_button_colour":"#000","button_4_button_hover":"#000000","button_4_link_colou
r":"#555555","button_4_as_button":"","font_family":"inherit","header_fix":"","notify
_animate_hide":"1","notify_animate_show":"","notify_div_id":"#cookie-law-info-
bar","notify_position_horizontal":"right","notify_position_vertical":"bottom","scroll_
close":"","scroll_close_reload":"","accept_close_reload":"","reject_close_reload":"","
showagain_tab":"1","showagain_background":"#fff","showagain_border":"#000","sh
owagain_div_id":"#cookie-law-info-
again","showagain_x_position":"100px","text":"#555555","show_once_yn":"","show
_once":"10000","logging_on":"","as_popup":"","popup_overlay":"1","bar_heading_t
88
ЧДТУ 232101.002. ПЗ
ext":"","cookie_bar_as":"banner","popup_showagain_position":"bottom-
right","widget_position":"left"};
var log_object = {"ajax_url":"https:\/\/laventashoes.com\/wp-admin\/admin-
ajax.php"};
/* ]]> */
</script>
<script type='text/javascript' src='https://laventashoes.com/wp-
content/plugins/cookie-law-info/public/js/cookie-law-info-public.js?ver=1.9.5'
id='cookie-law-info-js'></script>
<link rel="https://api.w.org/" href="https://laventashoes.com/wp-json/" /><link
rel="alternate" type="application/json" href="https://laventashoes.com/wp-
json/wp/v2/pages/104" /><link rel="EditURI" type="application/rsd+xml"
title="RSD" href="https://laventashoes.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml"
href="https://laventashoes.com/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 5.5.3" />
<meta name="generator" content="WooCommerce 4.8.0" />
<link rel="canonical" href="https://laventashoes.com/" />
<link rel='shortlink' href='https://laventashoes.com/' />
<link rel="alternate" type="application/json+oembed"
href="https://laventashoes.com/wp-
json/oembed/1.0/embed?url=https%3A%2F%2Flaventashoes.com%2F" />
<link rel="alternate" type="text/xml+oembed" href="https://laventashoes.com/wp-
json/oembed/1.0/embed?url=https%3A%2F%2Flaventashoes.com%2F&format
=xml" />
<style>.bg{opacity: 0; transition: opacity 1s; -webkit-transition: opacity 1s;} .bg-
loaded{opacity: 1;}</style><!--[if IE]><link rel="stylesheet" type="text/css"
href="https://laventashoes.com/wp-content/themes/flatsome/assets/css/ie-
fallback.css"><script
src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js"></script><script
>var head = document.getElementsByTagName('head')[0],style =
document.createElement('style');style.type = 'text/css';style.styleSheet.cssText =
':before,:after{content:none
!important';head.appendChild(style);setTimeout(function(){head.removeChild(style);
}, 0);</script><script src="https://laventashoes.com/wp-
content/themes/flatsome/assets/libs/ie-flexibility.js"></script><![endif]-->
89
ЧДТУ 232101.002. ПЗ
<noscript><style>.woocommerce-product-gallery{ opacity: 1 !important;
}</style></noscript>
<link rel="icon" href="https://laventashoes.com/wp-content/uploads/cropped-
logo_favicon-32x32.png" sizes="32x32" />
<link rel="icon" href="https://laventashoes.com/wp-content/uploads/cropped-
logo_favicon-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="https://laventashoes.com/wp-
content/uploads/cropped-logo_favicon-180x180.png" />
<meta name="msapplication-TileImage" content="https://laventashoes.com/wp-
content/uploads/cropped-logo_favicon-270x270.png" />
<style id="custom-css" type="text/css">:root {--primary-color: #8d2828;}.header-
main{height: 90px}#logo img{max-height: 90px}#logo{width:200px;}.header-
top{min-height: 30px}.has-transparent + .page-title:first-of-type,.has-transparent +
#main > .page-title,.has-transparent + #main > div > .page-title,.has-transparent +
#main .page-header-wrapper:first-of-type .page-title{padding-top:
170px;}.header.show-on-scroll,.stuck .header-main{height:70px!important}.stuck
#logo img{max-height: 70px!important}.header-bottom {background-color:
#f1f1f1}@media (max-width: 549px) {.header-main{height: 70px}#logo img{max-
height: 70px}}/* Color */.accordion-title.active, .has-icon-bg .icon .icon-inner,.logo
a, .primary.is-underline, .primary.is-link, .badge-outline .badge-inner, .nav-outline >
li.active> a,.nav-outline >li.active > a, .cart-icon strong,[data-color='primary'], .is-
outline.primary{color: #8d2828;}/* Color !important */[data-text-
color="primary"]{color: #8d2828!important;}/* Background Color */[data-text-
bg="primary"]{background-color: #8d2828;}/* Background */.scroll-to-bullets
a,.featured-title, .label-new.menu-item > a:after, .nav-pagination > li > .current,.nav-
pagination > li > span:hover,.nav-pagination > li > a:hover,.has-hover:hover .badge-
outline .badge-inner,button[type="submit"], .button.wc-
forward:not(.checkout):not(.checkout-button), .button.submit-button,
.button.primary:not(.is-outline),.featured-table .title,.is-outline:hover, .has-icon:hover
.icon-label,.nav-dropdown-bold .nav-column li > a:hover, .nav-dropdown.nav-
dropdown-bold > li > a:hover, .nav-dropdown-bold.dark .nav-column li > a:hover,
.nav-dropdown.nav-dropdown-bold.dark > li > a:hover, .is-outline:hover, .tagcloud
a:hover,.grid-tools a, input[type='submit']:not(.is-form), .box-badge:hover .box-text,
input.button.alt,.nav-box > li > a:hover,.nav-box > li.active > a,.nav-pills > li.active >
a ,.current-dropdown .cart-icon strong, .cart-icon:hover strong, .nav-line-bottom > li
> a:before, .nav-line-grow > li > a:before, .nav-line > li > a:before,.banner, .header-
top, .slider-nav-circle .flickity-prev-next-button:hover svg, .slider-nav-circle .flickity-
prev-next-button:hover .arrow, .primary.is-outline:hover, .button.primary:not(.is-
outline), input[type='submit'].primary, input[type='submit'].primary,
90
ЧДТУ 232101.002. ПЗ
input[type='reset'].button, input[type='button'].primary, .badge-inner{background-
color: #8d2828;}/* Border */.nav-vertical.nav-tabs > li.active > a,.scroll-to-bullets
a.active,.nav-pagination > li > .current,.nav-pagination > li > span:hover,.nav-
pagination > li > a:hover,.has-hover:hover .badge-outline .badge-inner,.accordion-
title.active,.featured-table,.is-outline:hover, .tagcloud a:hover,blockquote, .has-
border, .cart-icon strong:after,.cart-icon strong,.blockUI:before,
.processing:before,.loading-spin, .slider-nav-circle .flickity-prev-next-button:hover
svg, .slider-nav-circle .flickity-prev-next-button:hover .arrow, .primary.is-
outline:hover{border-color: #8d2828}.nav-tabs > li.active > a{border-top-color:
#8d2828}.widget_shopping_cart_content .blockUI.blockOverlay:before { border-
left-color: #8d2828 }.woocommerce-checkout-review-order
.blockUI.blockOverlay:before { border-left-color: #8d2828 }/* Fill */.slider .flickity-
prev-next-button:hover svg,.slider .flickity-prev-next-button:hover .arrow{fill:
#8d2828;}/* Background Color */[data-icon-label]:after, .secondary.is-
underline:hover,.secondary.is-outline:hover,.icon-label,.button.secondary:not(.is-
outline),.button.alt:not(.is-outline), .badge-inner.on-sale, .button.checkout,
.single_add_to_cart_button, .current .breadcrumb-step{ background-color:#8d2828;
}[data-text-bg="secondary"]{background-color: #8d2828;}/* Color */.secondary.is-
underline,.secondary.is-link, .secondary.is-outline,.stars a.active, .star-rating:before,
.woocommerce-page .star-rating:before,.star-rating span:before, .color-
secondary{color: #8d2828}/* Color !important */[data-text-
color="secondary"]{color: #8d2828!important;}/* Border */.secondary.is-
outline:hover{border-color:#8d2828}.success.is-underline:hover,.success.is-
outline:hover,.success{background-color: #51bbb3}.success-color, .success.is-link,
.success.is-outline{color: #51bbb3;}.success-border{border-color:
#51bbb3!important;}/* Color !important */[data-text-color="success"]{color:
#51bbb3!important;}/* Background Color */[data-text-bg="success"]{background-
color: #51bbb3;}.alert.is-underline:hover,.alert.is-outline:hover,.alert{background-
color: #b00600}.alert.is-link, .alert.is-outline, .color-alert{color: #b00600;}/* Color
!important */[data-text-color="alert"]{color: #b00600!important;}/* Background
Color */[data-text-bg="alert"]{background-color: #b00600;}body{font-size:
100%;}@media screen and (max-width: 549px){body{font-size: 100%;}}body{font-
family:"Lato", sans-serif}body{font-weight: 0}.nav > li > a {font-family:"Lato",
sans-serif;}.mobile-sidebar-levels-2 .nav > li > ul > li > a {font-family:"Lato", sans-
serif;}.nav > li > a {font-weight: 0;}.mobile-sidebar-levels-2 .nav > li > ul > li > a
{font-weight: 0;}h1,h2,h3,h4,h5,h6,.heading-font, .off-canvas-center .nav-
sidebar.nav-vertical > li > a{font-family: "Lato", sans-
serif;}h1,h2,h3,h4,h5,h6,.heading-font,.banner h1,.banner h2{font-weight: 0;}.alt-
font{font-family: "Lato", sans-serif;}.alt-font{font-weight: 0!important;}a{color:
#555555;}a:hover{color: #777777;}.tagcloud a:hover{border-color:
#777777;background-color: #777777;}@media screen and (min-width:
550px){.products .box-vertical .box-image{min-width: 300px!important;width:
91
ЧДТУ 232101.002. ПЗ
300px!important;}}button[name='update_cart'] { display: none; }.label-new.menu-
item > a:after{content:"New";}.label-hot.menu-item > a:after{content:"Hot";}.label-
sale.menu-item > a:after{content:"Sale";}.label-popular.menu-item >
a:after{content:"Popular";}</style> <style type="text/css" id="wp-custom-
css">
.badge {height: 2.1em !important;
margin-top: 2px !important;}
.badge-inner.on-sale
{text-transform: uppercase; letter-spacing: .03em; line-height: 1.0em;
padding-right: 0.9em !important; padding-left: 0.9em !important;
background-color: #B00600!important;
padding: 6px;
border-radius: 99px !important;
font-size: 0.85em;}
.badge-inner.new-bubble
{text-transform: uppercase; letter-spacing: .03em; line-height: 1.0em;
padding-right: 0.9em !important; padding-left: 0.9em !important;
background-color: #0f7102!important;
padding: 6px;
border-radius: 99px !important;
font-size: 0.85em;}
.body {color:#FFF}
.nav-dropdown {min-width: 175px;}
.nav-dropdown-default li.image-column:last-child > a {margin-right: 0px
!important;}
#cookie-law-info-again {
visibility: hidden;}
.success-color, .success.is-link, .success.is-outline {
color: #8d2828 !important;
}
92
ЧДТУ 232101.002. ПЗ
div.wpcf7-mail-sent-ok {border: 2px solid #8d2828;
}
#comments .comment-respond .comment-reply-title {
font-size: 1.2em;
display: none;
}
.comment-form .logged-in-as{display: none;}
label[for=comment] {display: none !important;}
span.user-name.inline-block {display: none !important;}
.dashboard-links li {
width: 25%;
}
.solid {
display: inline-block;
margin-bottom: 1px !important;
background-color: #8d2828; /* Change color */
border-radius: 2px;
color: #f1f1f1 !important;
padding: 0px;
margin: 0 10px 3px 0px !important;
position: relative;
}
.solid-green {
display: inline-block;
margin-bottom: 1px !important;
background-color: #0f7102; /* Change color */
border-radius: 2px;
color: #f1f1f1 !important;
padding: 0px;
93
ЧДТУ 232101.002. ПЗ
margin: 0 10px 3px 0px !important;
position: relative;
}
.solid-green a{
color: #f1f1f1 !important;
border-bottom: none !important;
}
.solid a{
color: #f1f1f1 !important;
border-bottom: none !important;
}
.separate {
visibility:hidden;
}
@media screen and (max-width: 782px) {
.badge {height: 1em !important;
margin-top: 0px !important;}
.badge-inner.on-sale
{text-transform: uppercase; letter-spacing: .03em; line-height: 0.7em;
padding-right: 0.5em !important; padding-left: 0.5em !important;
background-color: #B00600!important;
padding: 4px;
border-radius: 99px !important;
font-size: 0.6em;}
.badge-inner.new-bubble
{text-transform: uppercase; letter-spacing: .03em; line-height: 0.7em;
padding-right: 0.5em !important; padding-left: 0.5em !important;
background-color: #0f7102!important;
94
ЧДТУ 232101.002. ПЗ
padding: 4px;
border-radius: 99px !important;
font-size: 0.6em;}
}
.sku_wrapper {
display:none !important;
}
.review_container {
padding-bottom: 10px;
border-bottom: 1px solid #f1f1f1;
}
.white{
background-color:#f9f9f9 !important;
} </style>
</head>
<body class="home page-template page-template-page-blank page-template-page-
blank-php page page-id-104 theme-flatsome woocommerce-no-js woo-variation-
swatches wvs-theme-flatsome-child wvs-theme-child-flatsome wvs-style-squared
wvs-attr-behavior-blur wvs-no-tooltip wvs-css wvs-show-label lightbox nav-
dropdown-has-arrow">
<a class="skip-link screen-reader-text" href="#main">Skip to content</a>
<div id="wrapper">
<header id="header" class="header has-sticky sticky-jump">
<div class="header-wrapper">
<div id="top-bar" class="header-top hide-for-sticky nav-dark">
<div class="flex-row container">
<div class="flex-col hide-for-medium flex-left">
<ul class="nav nav-left medium-nav-center nav-small nav-divided">
<li class="html custom html_topbar_left"><strong
class="uppercase">+380679570956
95
ЧДТУ 232101.002. ПЗ
</strong></li><li class="header-divider"></li><li class="html header-button-1">
<div class="header-button">
<a href="https://laventashoes.com/contacts/" class="button primary"
style="border-radius:99px;">
<span>Контакти</span>
</a>
</div>
</li>
</ul>
</div>
<div class="flex-col hide-for-medium flex-center">
<ul class="nav nav-center nav-small nav-divided">
</ul>
</div>
<div class="flex-col hide-for-medium flex-right">
<ul class="nav top-bar-nav nav-right nav-small nav-divided">
<li id="menu-item-336" class="menu-item menu-item-type-post_type menu-
item-object-post menu-item-336"><a href="https://laventashoes.com/pay/"
class="nav-top-link">Оплата | Доставка</a></li>
<li id="menu-item-334" class="menu-item menu-item-type-post_type menu-item-
object-post menu-item-334"><a href="https://laventashoes.com/warranty/"
class="nav-top-link">Гарантія</a></li>
<li id="menu-item-7303" class="menu-item menu-item-type-post_type menu-item-
object-page menu-item-7303"><a href="https://laventashoes.com/all_reviews/"
class="nav-top-link">Відгуки</a></li>
<li id="menu-item-9920" class="menu-item menu-item-type-post_type menu-item-
object-post menu-item-9920"><a
href="https://laventashoes.com/%d1%80%d0%b5%d0%bc%d0%be%d0%bd%d1%8
2-%d0%b2%d0%b7%d1%83%d1%82%d1%82%d1%8f/" class="nav-top-
link">Ремонт взуття</a></li>
<li class="account-item has-icon">
<a href="https://laventashoes.com/my-account/"
96
ЧДТУ 232101.002. ПЗ
class="nav-top-link nav-top-not-logged-in "
data-open="#login-form-popup" >
<span>
Увійти </span>
</a>
</li>
<li class="header-newsletter-item has-icon">
<a href="#header-newsletter-signup" class="tooltip is-small"
title="Підпишіться на новини">
<i class="icon-envelop"></i>
<span class="header-newsletter-title hide-for-medium">
Підписатись </span>
</a>
<div id="header-newsletter-signup"
class="lightbox-by-id lightbox-content mfp-hide lightbox-white "
style="max-width:700px ;padding:0px">
<div class="banner has-hover" id="banner-1398692569">
<div class="banner-inner fill">
<div class="banner-bg fill" >
<div class="bg fill bg-fill "></div>
<div class="overlay"></div>
<div class="is-border is-dashed"
style="border-color:rgba(255,255,255,.3);border-width:2px 2px 2px
2px;margin:10px;">
</div>
</div>
<div class="banner-layers container">
<div class="fill banner-link"></div> <div id="text-box-1352786200"
class="text-box banner-layer x10 md-x10 lg-x10 y50 md-y50 lg-y50 res-text">
97
ЧДТУ 232101.002. ПЗ
<div data-animate="fadeInUp"> <div class="text dark">
<div class="text-inner text-left">
<h3 class="uppercase">Підпишіться на новини</h3><p
class="lead">отримуйте інформацію про новинки та спеціальні акції</p><div
role="form" class="wpcf7" id="wpcf7-f21-o1" lang="en-US" dir="ltr">
<div class="screen-reader-response"><p role="status" aria-live="polite" aria-
atomic="true"></p> <ul></ul></div>
<form action="/#wpcf7-f21-o1" method="post" class="wpcf7-form init"
novalidate="novalidate" data-status="init">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="21" />
<input type="hidden" name="_wpcf7_version" value="5.3.2" />
<input type="hidden" name="_wpcf7_locale" value="en_US" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f21-o1" />
<input type="hidden" name="_wpcf7_container_post" value="0" />
<input type="hidden" name="_wpcf7_posted_data_hash" value="" />
</div>
<div class="form-flat">
<span class="wpcf7-form-control-wrap your-email"><input type="email"
name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text
wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-
required="true" aria-invalid="false" placeholder="Ваш e-mail (обов'язково)"
/></span></p>
<p> <input type="submit" value="Підписатись" class="wpcf7-form-control
wpcf7-submit button" />
</p></div>
<div class="wpcf7-response-output" aria-hidden="true"></div></form></div>
</div>
</div>
</div>
<style>
#text-box-1352786200 {
98
ЧДТУ 232101.002. ПЗ
width: 60%; }
#text-box-1352786200 .text {
font-size: 100%; }
@media (min-width:550px) {
#text-box-1352786200 {
width: 50%; }
}
</style>
</div>
</div>
</div>
<style>
#banner-1398692569 {
padding-top: 500px;
}
#banner-1398692569 .bg.bg-loaded {
background-image: url(https://laventashoes.com/wp-content/uploads/footwear-
1838767_1920.jpg);
}
#banner-1398692569 .overlay {
background-color: rgba(0,0,0,.4);
}
</style>
</div>
</div>
</li>
<li class="html header-social-icons ml-0">
<div class="social-icons follow-icons" ><a
href="https://www.facebook.com/groups/shoes.ck.ua/" target="_blank" data-
label="Facebook" rel="noopener noreferrer nofollow" class="icon plain facebook
99
ЧДТУ 232101.002. ПЗ
tooltip" title="Follow on Facebook"><i class="icon-facebook" ></i></a><a
href="https://www.instagram.com/laventashoes" target="_blank" rel="noopener
noreferrer nofollow" data-label="Instagram" class="icon plain instagram tooltip"
title="Follow on Instagram"><i class="icon-instagram" ></i></a><a
href="mailto:[email protected]" data-label="E-mail" rel="nofollow"
class="icon plain email tooltip" title="Send us an email"><i class="icon-envelop"
></i></a><a
href="https://www.youtube.com/channel/UCNnsmDC1ReMlIsNGwSOCLrg"
target="_blank" rel="noopener noreferrer nofollow" data-label="YouTube"
class="icon plain youtube tooltip" title="Follow on YouTube"><i class="icon-
youtube" ></i></a></div></li> </ul>
</div>
<div class="flex-col show-for-medium flex-grow">
<ul class="nav nav-center nav-small mobile-nav nav-divided">
<li class="html custom html_topbar_left"><strong
class="uppercase">+380679570956
</strong></li> </ul>
</div>
</div>
</div>
<div id="masthead" class="header-main ">
<div class="header-inner flex-row container logo-left medium-logo-center"
role="navigation">
<!-- Logo -->
<div id="logo" class="flex-col logo">
<!-- Header logo -->
<a href="https://laventashoes.com/" title="Лавента - Шкіряне взуття від фабрики
"Лавента"" rel="home">
<img width="200" height="90" src="https://laventashoes.com/wp-
content/uploads/Logo.png" class="header_logo header-logo" alt="Лавента"/><img
width="200" height="90" src="https://laventashoes.com/wp-
content/uploads/Logo.png" class="header-logo-dark" alt="Лавента"/></a>
</div>
<!-- Mobile Left Elements -->
100
ЧДТУ 232101.002. ПЗ
<div class="flex-col show-for-medium flex-left">
<ul class="mobile-nav nav nav-left ">
<li class="nav-icon has-icon">
<a href="#" data-open="#main-menu" data-pos="left" data-bg="main-
menu-overlay" data-color="" class="is-small" aria-label="Menu" aria-
controls="main-menu" aria-expanded="false">
<i class="icon-menu" ></i>
</a>
</li> </ul>
</div>
<!-- Left Elements -->
<div class="flex-col hide-for-medium flex-left
flex-grow">
<ul class="header-nav header-nav-main nav nav-left nav-uppercase" >
<li class="header-search header-search-dropdown has-icon has-dropdown
menu-item-has-children">
<a href="#" aria-label="Пошук" class="is-small"><i class="icon-
search" ></i></a>
<ul class="nav-dropdown nav-dropdown-default">
<li class="header-search-form search-form html relative has-icon">
<div class="header-search-form-wrapper">
<div class="searchform-wrapper ux-search-box relative is-
normal"><form role="search" method="get" class="searchform"
action="https://laventashoes.com/">
<div class="flex-row relative">
<div class="flex-col flex-grow">
<label class="screen-reader-text" for="woocommerce-product-
search-field-0">Шукати:</label>
<input type="search" id="woocommerce-product-search-field-0"
class="search-field mb-0" placeholder="Пошук…" value="" name="s" />
<input type="hidden" name="post_type" value="product" />
101
ЧДТУ 232101.002. ПЗ
</div>
<div class="flex-col">
<button type="submit" value="Пошук" class="ux-search-submit
submit-button secondary button icon mb-0">
<i class="icon-search" ></i> </button>
</div>
</div>
<div class="live-search-results text-left z-top"></div>
</form>
</div> </div>
</li> </ul>
</li>
<li id="menu-item-6411" class="menu-item menu-item-type-custom menu-item-
object-custom menu-item-has-children menu-item-6411 has-dropdown"><a
href="https://laventashoes.com/product-category/zhinoche-vzuttya/" class="nav-top-
link">Жіноче взуття<i class="icon-angle-down" ></i></a>
<ul class="sub-menu nav-dropdown nav-dropdown-default">
<li id="menu-item-5161" class="menu-item menu-item-type-custom menu-
item-object-custom menu-item-has-children menu-item-5161 nav-dropdown-col"><a
href="#">Вид взуття</a>
<ul class="sub-menu nav-column nav-dropdown-default">
<li id="menu-item-6410" class="menu-item menu-item-type-custom
menu-item-object-custom menu-item-6410"><a
href="https://laventashoes.com/product-category/zhinoche-
vzuttya/?filter_women_type=botforty">Ботфорти</a></li>
<li id="menu-item-5283" class="menu-item menu-item-type-custom
menu-item-object-custom menu-item-5283"><a
href="https://laventashoes.com/product-category/zhinoche-
vzuttya/?filter_women_type=chobotu">Чоботи</a></li>
<li id="menu-item-5281" class="menu-item menu-item-type-custom
menu-item-object-custom menu-item-5281"><a
href="https://laventashoes.com/product-category/zhinoche-
vzuttya/?filter_women_type=napivchobotu">Напівчоботи</a></li>
102
ЧДТУ 232101.002. ПЗ
<li id="menu-item-5282" class="menu-item menu-item-type-custom
menu-item-object-custom menu-item-5282"><a
href="https://laventashoes.com/product-category/zhinoche-
vzuttya/?filter_women_type=cherevuku">Черевики</a></li>
<li id="menu-item-4944" class="menu-item menu-item-type-custom
menu-item-object-custom menu-item-4944"><a
href="https://laventashoes.com/product-category/zhinoche-
vzuttya/?filter_women_type=tufli">Туфлі</a></li>
<li id="menu-item-5416" class="menu-item menu-item-type-custom
menu-item-object-custom menu-item-5416"><a
href="https://laventashoes.com/product-category/zhinoche-
vzuttya/?filter_women_type=mokasunu">Мокасини</a></li>
<li id="menu-item-5279" class="menu-item menu-item-type-custom
menu-item-object-custom menu-item-5279"><a
href="https://laventashoes.com/product-category/zhinoche-
vzuttya/?filter_women_type=crosivku">Кросівки</a></li>
<li id="menu-item-9214" class="menu-item menu-item-type-custom
menu-item-object-custom menu-item-9214"><a
href="https://laventashoes.com/product-category/zhinoche-
vzuttya/?filter_women_type=kedu">Кеди</a></li>
<li id="menu-item-4943" class="menu-item menu-item-type-custom
menu-item-object-custom menu-item-4943"><a
href="https://laventashoes.com/product-category/zhinoche-
vzuttya/?filter_women_type=bosonijku">Босоніжки</a></li>
<li id="menu-item-5284" class="menu-item menu-item-type-custom
menu-item-object-custom menu-item-5284"><a
href="https://laventashoes.com/product-category/zhinoche-
vzuttya/?filter_women_type=shlopanci">Шльопанці</a></li>
</ul>
</li>
<li id="menu-item-5162" class="menu-item menu-item-type-custom menu-
item-object-custom menu-item-has-children menu-item-5162 nav-dropdown-col"><a
href="#">Стиль</a>
<ul class="sub-menu nav-column nav-dropdown-default">
<li id="menu-item-5184" class="menu-item menu-item-type-custom
menu-item-object-custom menu-item-5184"><a
103
ЧДТУ 232101.002. ПЗ
href="https://laventashoes.com/product-category/zhinoche-
vzuttya/?filter_stul_woman=clasuchne_w">Класичне</a></li>
<li id="menu-item-5183" class="menu-item menu-item-type-custom
menu-item-object-custom menu-item-5183"><a
href="https://laventashoes.com/product-category/zhinoche-
vzuttya/?filter_stul_woman=povsakdenne_w">Повсякденне</a></li>
<li id="menu-item-5182" class="menu-item menu-item-type-custom
menu-item-object-custom menu-item-5182"><a
href="https://laventashoes.com/product-category/zhinoche-
vzuttya/?filter_stul_woman=clasuchne_w">Спортивне</a></li>
</ul>
</li>
<li id="menu-item-5163" class="menu-item menu-item-type-custom menu-
item-object-custom menu-item-has-children menu-item-5163 nav-dropdown-col"><a
href="#">Сезон</a>
<ul class="sub-menu nav-column nav-dropdown-default">
<li id="menu-item-5175" class="menu-item menu-item-type-custom
menu-item-object-custom menu-item-5175"><a
href="https://laventashoes.com/product-category/zhinoche-
vzuttya/?filter_seasons_woman=winter_woman">Зима</a></li>
<li id="menu-item-5176" class="menu-item menu-item-type-custom
menu-item-object-custom menu-item-5176"><a
href="https://laventashoes.com/product-category/zhinoche-
vzuttya/?filter_seasons_woman=spring_woman">Весна</a></li>
<li id="menu-item-5177" class="menu-item menu-item-type-custom
menu-item-object-custom menu-item-5177"><a
href="https://laventashoes.com/product-category/zhinoche-
vzuttya/?filter_seasons_woman=summer_woman">Літо</a></li>
<li id="menu-item-5178" class="menu-item menu-item-type-custom
menu-item-object-custom menu-item-5178"><a
href="https://laventashoes.com/product-category/zhinoche-
vzuttya/?filter_seasons_woman=autumn_woman">Осінь</a></li>
<li id="menu-item-6939" class="solid menu-item menu-item-type-
taxonomy menu-item-object-product_cat menu-item-6939"><a
href="https://laventashoes.com/product-category/zhinoche-vzuttya/sale-
woman/">Розпродаж</a></li>
104
ЧДТУ 232101.002. ПЗ
<li id="menu-item-6964" class="solid-green menu-item menu-item-
type-taxonomy menu-item-object-product_cat menu-item-6964"><a
href="https://laventashoes.com/product-category/zhinoche-vzuttya/new-
woman/">Новинки</a></li>
<li id="menu-item-6942" class="separate menu-item menu-item-type-
custom menu-item-object-custom menu-item-6942"><a href="#">separate</a></li>
</ul>
</li>
<li id="menu-item-5187" class="image-column menu-item menu-item-type-
custom menu-item-object-custom menu-item-5187"><a href="#" class="dropdown-
image-column"><img width="180" height="480" src="https://laventashoes.com/wp-
content/uploads/podru4_4_4-scaled.jpg" title="Image" alt="Image"/></a></li>
</ul>
</li>
<li id="menu-item-6412" class="menu-item menu-item-type-custom menu-item-
object-custom menu-item-has-children menu-item-6412 has-dropdown"><a
href="https://laventashoes.com/product-category/choloviche-vzuttya/" class="nav-
top-link">Чоловіче взуття<i class="icon-angle-down" ></i></a>
<ul class="sub-menu nav-dropdown nav-dropdown-default">
<li id="menu-item-5166" class="menu-item menu-item-type-custom menu-
item-object-custom menu-item-has-children menu-item-5166 nav-dropdown-col"><a
href="#">Вид взуття</a>
<ul class="sub-menu nav-column nav-dropdown-default">
<li id="menu-item-5104" class="menu-item menu-item-type-custom
menu-item-object-custom menu-item-5104"><a
href="https://laventashoes.com/product-category/choloviche-
vzuttya/?filter_man_type=napichobotu">Напівчоботи</a></li>
<li id="menu-item-5105" class="menu-item menu-item-type-custom
menu-item-object-custom menu-item-5105"><a
href="https://laventashoes.com/product-category/choloviche-
vzuttya/?filter_man_type=cherevuku">Черевики</a></li>
<li id="menu-item-4947" class="menu-item menu-item-type-custom
menu-item-object-custom menu-item-4947"><a
href="https://laventashoes.com/product-category/choloviche-
vzuttya/?filter_man_type=napivcherevuku">Напівчеревики</a></li>
105
ЧДТУ 232101.002. ПЗ
<li id="menu-item-5167" class="menu-item menu-item-type-custom
menu-item-object-custom menu-item-5167"><a
href="https://laventashoes.com/product-category/choloviche-
vzuttya/?filter_man_type=krosivku">Кросівки</a></li>
<li id="menu-item-9215" class="menu-item menu-item-type-custom
menu-item-object-custom menu-item-9215"><a
href="https://laventashoes.com/product-category/choloviche-
vzuttya/?filter_man_type=keduman">Кеди</a></li>
<li id="menu-item-4948" class="menu-item menu-item-type-custom
menu-item-object-custom menu-item-4948"><a
href="https://laventashoes.com/product-category/choloviche-
vzuttya/?filter_man_type=sandali">Сандалі</a></li>
<li id="menu-item-9216" class="menu-item menu-item-type-custom
menu-item-object-custom menu-item-9216"><a
href="https://laventashoes.com/product-category/choloviche-
vzuttya/?filter_man_type=shlyopki">Шльопанці</a></li>
</ul>
</li>
<li id="menu-item-5164" class="menu-item menu-item-type-custom menu-
item-object-custom menu-item-has-children menu-item-5164 nav-dropdown-col"><a
href="#">Стиль</a>
<ul class="sub-menu nav-column nav-dropdown-default">
<li id="menu-item-5170" class="menu-item menu-item-type-custom
menu-item-object-custom menu-item-5170"><a
href="https://laventashoes.com/product-category/choloviche-
vzuttya/?filter_stul=clasuchne">Класичне</a></li>
<li id="menu-item-5169" class="menu-item menu-item-type-custom
menu-item-object-custom menu-item-5169"><a
href="https://laventashoes.com/product-category/choloviche-
vzuttya/?filter_stul=povsakdenne">Повсякденне</a></li>
<li id="menu-item-5168" class="menu-item menu-item-type-custom
menu-item-object-custom menu-item-5168"><a
href="https://laventashoes.com/product-category/choloviche-
vzuttya/?filter_stul=sportuvne">Спортивне</a></li>
</ul>
</li>
106
ЧДТУ 232101.002. ПЗ
<li id="menu-item-5165" class="menu-item menu-item-type-custom menu-
item-object-custom menu-item-has-children menu-item-5165 nav-dropdown-col"><a
href="#">Сезон</a>
<ul class="sub-menu nav-column nav-dropdown-default">
<li id="menu-item-5171" class="menu-item menu-item-type-custom
menu-item-object-custom menu-item-5171"><a
href="https://laventashoes.com/product-category/choloviche-
vzuttya/?filter_season=winter">Зима</a></li>
<li id="menu-item-5172" class="menu-item menu-item-type-custom
menu-item-object-custom menu-item-5172"><a
href="https://laventashoes.com/product-category/choloviche-
vzuttya/?filter_season=spring">Весна</a></li>
<li id="menu-item-5173" class="menu-item menu-item-type-custom
menu-item-object-custom menu-item-5173"><a
href="https://laventashoes.com/product-category/choloviche-
vzuttya/?filter_season=summer">Літо</a></li>
<li id="menu-item-5174" class="menu-item menu-item-type-custom
menu-item-object-custom menu-item-5174"><a
href="https://laventashoes.com/product-category/choloviche-
vzuttya/?filter_season=autumn">Осінь</a></li>
<li id="menu-item-6940" class="solid menu-item menu-item-type-
taxonomy menu-item-object-product_cat menu-item-6940"><a
href="https://laventashoes.com/product-category/choloviche-vzuttya/sale-
man/">Розпродаж</a></li>
<li id="menu-item-6965" class="solid-green menu-item menu-item-
type-taxonomy menu-item-object-product_cat menu-item-6965"><a
href="https://laventashoes.com/product-category/choloviche-vzuttya/sale-man-
newshoes/">Новинки</a></li>
<li id="menu-item-6978" class="separate menu-item menu-item-type-
custom menu-item-object-custom menu-item-6978"><a href="#">separate</a></li>
</ul>
</li>
<li id="menu-item-5179" class="image-column menu-item menu-item-type-
custom menu-item-object-custom menu-item-5179"><a href="#" class="dropdown-
image-column"><img width="180" height="480" src="https://laventashoes.com/wp-
content/uploads/podru4_4_3-scaled.jpg" title="Image" alt="Image"/></a></li>
107
ЧДТУ 232101.002. ПЗ
</ul>
</li>
<li id="menu-item-2783" class="menu-item menu-item-type-taxonomy menu-item-
object-product_cat menu-item-2783"><a href="https://laventashoes.com/product-
category/care/" class="nav-top-link">Догляд за взуттям</a></li>
<li id="menu-item-6970" class="menu-item menu-item-type-custom menu-item-
object-custom menu-item-6970"><a href="#" class="nav-top-
link">Розпродаж</a></li>
</ul>
</div>
<!-- Right Elements -->
<div class="flex-col hide-for-medium flex-right">
<ul class="header-nav header-nav-main nav nav-right nav-uppercase">
<li class="header-divider"></li><li class="cart-item has-icon has-
dropdown">
<a href="https://laventashoes.com/cart/" title="Кошик" class="header-cart-link is-
small">
<span class="header-cart-title">
Кошик / <span class="cart-price"><span class="woocommerce-Price-amount
amount"><bdi>1,750.00 <span class="woocommerce-Price-
currencySymbol">₴</span></bdi></span></span>
</span>
<span class="cart-icon image-icon">
<strong>1</strong>
</span>
</a>
<ul class="nav-dropdown nav-dropdown-default">
<li class="html widget_shopping_cart">
<div class="widget_shopping_cart_content">
<ul class="woocommerce-mini-cart cart_list product_list_widget ">
<li class="woocommerce-mini-cart-item mini_cart_item">
108
ЧДТУ 232101.002. ПЗ
<a href="https://laventashoes.com/cart/?remove_item=a73d18446f20a30be28c26ab
513da8d8&_wpnonce=589688a07f" class="remove remove_from_cart_button"
aria-label="Видалити цю позицію" data-product_id="11835" data-
cart_item_key="a73d18446f20a30be28c26ab513da8d8" data-
product_sku="">×</a><a
href="https://laventashoes.com/product/%d0%ba%d1%80%d0%be%d1%81%d1%96
%d0%b2%d0%ba%d0%b8-
%d1%87%d0%be%d0%bb%d0%be%d0%b2%d1%96%d1%87%d1%96-
%d1%82%d0%b0%d0%ba%d1%82%d0%b8%d1%87%d0%bd%d1%96-22224-
%d1%87%d0%be%d1%80%d0%bd%d1%96/">
img width="300" height="300" src="https://laventashoes.com/wp-
content/uploads/22224-300x300.jpg" class="attachment-woocommerce_thumbnail
size-woocommerce_thumbnail" alt="" loading="lazy"
srcset="https://laventashoes.com/wp-content/uploads/22224-300x300.jpg 300w,
https://laventashoes.com/wp-content/uploads/22224-400x400.jpg 400w,
https://laventashoes.com/wp-content/uploads/22224-280x280.jpg 280w,
https://laventashoes.com/wp-content/uploads/22224-600x600.jpg 600w,
https://laventashoes.com/wp-content/uploads/22224-100x100.jpg 100w,
https://laventashoes.com/wp-content/uploads/22224.jpg 750w" sizes="(max-width:
300px) 100vw, 300px" />Кросівки чоловічі тактичні 22224 чорні </a>
<span class="quantity">1 × <span class="woocommerce-Price-amount
amount"><bdi>1,750.00 <span class="woocommerce-Price-
currencySymbol">₴</span></bdi></span></span>
</li>
</ul>
<p class="woocommerce-mini-cart__total total">
<strong>Разом:</strong> <span class="woocommerce-Price-amount
amount"><bdi>1,750.00 <span class="woocommerce-Price-
currencySymbol">₴</span></bdi></span> </p>
<p class="woocommerce-mini-cart__buttons buttons"><a
href="https://laventashoes.com/cart/" class="button wc-forward">Переглянути
кошик</a><a href="https://laventashoes.com/checkout/" class="button checkout wc-
forward">Оформлення замовлення</a></p>
</div>
</li> </ul>
</li> </ul>
</div>
109
ДОДАТОК В
WEB-ОРІЄНТОВАНЕ ВІРТУАЛЬНЕ ПРЕДСТАВНИЦТВО ВЗУТТЄВОЇ
ФАБРИКИ
Інструкція користувача
482.ЧДТУ. 232101-01 34 01
Листів 4
Розробник _____________ Артем КАПЕЛЮШНИЙ
Черкаси – 2023
110
ЧДТУ 232101.002. ПЗ
Розроблено модуль замовлень та наповнення бази товаром. Проведено seo
аналітику сайту.
На головну сторінку сайту можна перейти за посиланням
https://laventashoes.com/ (Рисунок В.1)
Рисунок В.1 – Головна сторінка сайту
Для вибору по категоріям обираємо необхідну вкладку (Рисунок В.2)
111
ЧДТУ 232101.002. ПЗ
Рисунок В.2 – Меню категорій
Після вибору товару він відображається в окремому вікні (Рисунок В.3), і
його можна додавати до кошика замовлень (Рисунок В.4)
Рисунок В.3 – Перегляд обраного товару
112
ЧДТУ 232101.002. ПЗ
Рисунок В.4 – Товар у кошику
Рисунок В.5 – Оформлення замовлення та введення платіжних даних
А щоб дізнатися контактні дані на сайті необхідно зайти в розділ Контакти
(Рисунок В.6)
113
ЧДТУ 232101.002. ПЗ
Рисунок В.6 – Контактні дані
Отже, сайт є функціональним та зручним для проведення замовлень.
Досить простий для перегляду та замовлень необхідних товарів. А SEO аналітика
показала як розвивати сайт далі.