ChSTU repository
ChSTU repository preserves and enables easy and open access to all types of digital content including text, images, moving images, mpegs and data sets
Learn More
Please use this identifier to cite or link to this item:
https://er.chdtu.edu.ua/handle/ChSTU/6031| Title: | Сайт-візитівка магазину текстилю |
| Authors: | Оксамитна, Любов Павлівна Гузьман, Дмитро Володимирович |
| Keywords: | САЙТ-ВІЗИТІВКА,;ВЕБ-РОЗРОБКА,;CMS WORDPRESS,;МАГАЗИН ТЕКСТИЛЮ,;АДАПТИВНИЙ ІНТЕРФЕЙС,;ІНТЕРНЕТ-ПРЕДСТАВНИЦТВО. |
| Issue Date: | 12-Jun-2025 |
| Abstract: | У сучасних умовах цифровізації бізнесу важливо мати ефективний канал комунікації з клієнтами. Сайт-візитівка є одним із найпоширеніших інструментів представлення компанії в Інтернеті. Для малого бізнесу, зокрема для магазинів текстилю, створення власного веб-ресурсу сприяє підвищенню пізнаванності, розширенню цільової аудиторії та формуванню позитивного іміджу. Впровадження сайту-візитівки забезпечує зручне інформування клієнтів про асортимент продукції, акції, розташування магазину та контактні дані, що є актуальним і затребуваним у сучасному конкурентному середовищі. Мета кваліфікаційної роботи бакалавра – створення сучасного, адаптивного сайту-візитівки для магазину текстилю з використанням системи керування контентом WordPress, що дозволить забезпечити ефективну онлайн-присутність магазину. Об’єкт дослідження: процес розробки сайтів-візитівок для малих комерційних структур. Предмет дослідження: структура, функціонал та засоби реалізації сайту-візитівки магазину текстилю. У роботі використано теоретичні методи (аналіз літератури та джерел з веб-розробки), емпіричні – створення й налаштування сайту, а також порівняльний аналіз сучасних інструментів розробки сайтів. Результати кваліфікаційної роботи були представлені на Днях студентської науки ЧДТУ – 2024, де проєкт отримав 2 місце у секції «Комп’ютерні науки та системний аналіз». |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/6031 |
| Appears in Collections: | 122 Комп’ютерні науки (Комп’ютерні науки та прикладне програмування) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| Пояснювальна записка_Гузьман Дмитро_КНС-2101_2024-2025.pdf Restricted Access | 1.13 MB | Adobe PDF | View/Open Request a copy |
Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет інформаційних технологій і систем
Кафедра комп’ютерних наук та системного аналізу
Пояснювальна записка
до кваліфікаційної роботи
бакалавра
(освітньо-кваліфікаційний рівень)
на тему: «Сайт-візитівка магазину текстилю»
Виконав: студент 4 курсу, групи КНС-2101
спеціальності 122 «Комп’ютерні науки»
(шифр і назва спеціальності)
Освітня програма «Комп’ютерні науки та
(назва освітньої програми)
прикладне програмування»
Гузьман Дмитро Володимирович
Керівник _________ Оксамитна Л.П.
(прізвище та ініціали)
Рецензент __________ Стась С.В.
(прізвище та ініціали)
Черкаси 2025 року
2
Бланк завдання на кваліфікаційну роботу бакалавра студенту
Черкаський державний технологічний університет
Факультет Інформаційних технологій і систем
Кафедра Комп’ютерних наук та системного аналізу
Освітньо-кваліфікаційний рівень Бакалавр
Спеціальність 122 – комп’ютерні науки
Освітня програма Комп’ютерні науки та прикладне програмування
ЗАТВЕРДЖУЮ
Завідувач кафедри КНСА
_______________ Юрій ТРИУС
«____» _____________ 2025 р.
ЗАВДАННЯ
на кваліфікаційну роботу бакалавра студенту
Гузьману Дмитрові Володимировичу
(прізвище, ім‘я, по батькові)
1. Тема роботи Сайт-візитівка магазину текстилю
Керівник роботи Оксамитна Любов Павлівна, к.т.н., доцент
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
затверджені наказом університету від «25» лютого 2025 р. № 53/03-03.
2. Строк подання студентом роботи до 11 червня 2025 року
3. Вихідні дані до роботи:
Звіт з виробничої практики. Звіт з переддипломної практики.
Практичні навички роботи з інформаційними ресурсами. Робота з базами даних.
4. Зміст пояснювальної записки (перелік питань, що їх належить розробити):
Вступ
4.1. Аналітичний огляд існуючих аналогів.
4.2. Проєктна частина.
Висновки.
5. Перелік додатків (з точним зазначенням назв додатків):
5.1. Додаток А. Специфікація 482.ЧДТУ. 52347-01.
5.2. Додаток Б. Інструкція користувача.
5.3. Додаток В. Текст програми.
5.4 Презентація у вигляді 28 слайдів.
3
6. Консультанти розділів роботи
Прізвище, ініціали та Підпис, дата
Розділ посада
завдання видав завдання прийняв
консультанта
7. Дата видачі завдання 17.12.2024
КАЛЕНДАРНИЙ ПЛАН
Строк
№ з/п Назва етапів кваліфікаційної роботи бакалавра виконання Примітка
етапів роботи
1 Видача завдання на кваліфікаційну роботу Виконано
17.12.2024
бакалавра.
2 Аналіз літературних джерел, об’єкту та предмету Виконано
до 12.02.2025
дослідження.
3 Написання теоретичного розділу кваліфікаційної Виконано
до 18.03.2025
роботи бакалавра.
4 Написання аналітичного розділу (аналіз об’єкту Виконано
до 01.04.2025
й предмету дослідження).
5 Написання практичних розділів й висновків по Виконано
до 01.05.2025
роботі.
6 Передзахист кваліфікаційної роботи бакалавра Виконано
до 03.06.2025
на засіданні кафедри КНСА.
7 Подання роботи завідувачу кафедри КНСА. до 10.06. 2025 Виконано
8 Захист кваліфікаційної роботи бакалавра. 12.06.2025 Виконано
Студент _____________________________ / Дмитро ГУЗЬМАН /
(підпис) ПІБ
Керівник роботи ____________________________ / Любов ОКСАМИТНА /
(підпис) ПІБ
4
РЕФЕРАТ
Кваліфікаційна робота бакалавра містить: 81 с., 23 рис., 1 таблицю, 23
використаних джерела, 3 додатки.
Актуальність теми. У сучасних умовах цифровізації бізнесу важливо мати
ефективний канал комунікації з клієнтами. Сайт-візитівка є одним із
найпоширеніших інструментів представлення компанії в Інтернеті. Для малого
бізнесу, зокрема для магазинів текстилю, створення власного веб-ресурсу сприяє
підвищенню пізнаванності, розширенню цільової аудиторії та формуванню
позитивного іміджу. Впровадження сайту-візитівки забезпечує зручне
інформування клієнтів про асортимент продукції, акції, розташування магазину
та контактні дані, що є актуальним і затребуваним у сучасному конкурентному
середовищі.
Мета роботи і задачі дослідження. Мета кваліфікаційної роботи бакалавра
– створення сучасного, адаптивного сайту-візитівки для магазину текстилю з
використанням системи керування контентом WordPress, що дозволить
забезпечити ефективну онлайн-присутність магазину.
Для досягнення поставленої мети були сформульовані такі завдання:
− визначити вимоги до функціоналу сайту-візитівки;
− здійснити аналіз існуючих аналогічних рішень;
− спроєктувати структуру сайту та бази даних;
− обґрунтувати вибір інструментів для розробки;
− реалізувати сайт-візитівку на платформі WordPress;
− протестувати роботу сайту та оцінити його ефективність.
Об’єкт дослідження: процес розробки сайтів-візитівок для малих
комерційних структур.
Предмет дослідження: структура, функціонал та засоби реалізації сайту-
візитівки магазину текстилю.
5
Методи дослідження. У роботі використано теоретичні методи (аналіз
літератури та джерел з веб-розробки), емпіричні – створення й налаштування
сайту, а також порівняльний аналіз сучасних інструментів розробки сайтів.
Апробація результатів роботи. Результати кваліфікаційної роботи були
представлені на Днях студентської науки ЧДТУ – 2024, де проєкт отримав 2 місце
у секції «Комп’ютерні науки та системний аналіз».
Ключові слова: САЙТ-ВІЗИТІВКА, ВЕБ-РОЗРОБКА, CMS
WORDPRESS, МАГАЗИН ТЕКСТИЛЮ, БАЗА ДАНИХ, АДАПТИВНИЙ
ІНТЕРФЕЙС, API-ІНТЕГРАЦІЯ, ІНТЕРНЕТ-ПРЕДСТАВНИЦТВО.
ABSTRACT
The bachelor’s qualification thesis consists of: 81 pages, 23 figures, 1 table,
23 references, and 3 appendices.
Relevance of the topic. In today’s digitalized business environment, it is crucial
to have an effective communication channel with customers. A business card website
is one of the most common tools for representing a company online. For small
businesses, especially textile stores, developing a personal web resource contributes to
increased brand recognition, expanded target audience reach, and the formation of a
positive image. The implementation of such a website ensures convenient customer
access to product information, promotions, store location, and contact details, which is
highly relevant and in demand in the current competitive landscape.
Purpose and objectives of the study. The aim of the bachelor’s qualification
work is to develop a modern, adaptive business card website for a textile store using
the WordPress content management system, which will ensure the store's effective
online presence.
To achieve this goal, the following tasks were defined:
− define the functional requirements of the business card website;
6
− analyze existing similar solutions;
− design the structure of the website and its database;
− justify the choice of development tools;
− implement the business card website using the WordPress platform;
− test the website and evaluate its effectiveness.
Object of the study: the process of developing business card websites for small
commercial enterprises.
Subject of the study: the structure, functionality, and means of implementing a
business card website for a textile store.
Research methods. The study applies theoretical methods (literature and web
development source analysis), empirical methods (development and configuration of
the website), and comparative analysis of modern web development tools.
Approval of results. The results of the qualification work were presented at the
ChSTU Student Science Days – 2024, where the project received 2nd place in the
"Computer Science and Systems Analysis" section.
Keywords: BUSINESS CARD WEBSITE, WEB DEVELOPMENT, CMS
WORDPRESS, TEXTILE STORE, DATABASE, ADAPTIVE INTERFACE, API
INTEGRATION, ONLINE PRESENCE.
7
ЗМІСТ
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ 8
ВСТУП 9
1. АНАЛІТИЧНИЙ ОГЛЯД ІСНУЮЧИХ АНАЛОГІВ 11
1.1 Аналіз предметної області 11
1.2 Постановка задачі 36
1.3 Аналіз і вибір засобів розробки сайту-візитівки магазину текстилю 38
Висновки до розділу 1 55
2. ПРОЄКТНА ЧАСТИНА 56
2.1 Розробка програмного рішення 56
2.2 Тестування сайту-візитівки магазину текстилю 63
Висновки до розділу 2 66
ВИСНОВКИ 67
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ 69
ДОДАТОК А. СПЕЦИФІКАЦІЯ 482.ЧДТУ. 52347-01 72
ДОДАТОК Б. ІНСТРУКЦІЯ КОРИСТУВАЧА 72
ДОДАТОК В. ЛІСТИНГ КОДУ ПРОГРАМИ 79
8
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І
ТЕРМІНІВ
CMS - Content Management System (Система керування вмістом)
HTML - HyperText Markup Language (Мова розмітки гіпертексту)
CSS - Cascading Style Sheets (Каскадні таблиці стилів)
JS - JavaScript (Мова програмування JavaScript)
SEO - Search Engine Optimization (Пошукова оптимізація)
UI - User Interface (Інтерфейс користувача)
UX - User Experience (Досвід користувача)
SQL - Structured Query Language (Мова структурованих запитів)
DBMS - Database Management System (Система керування базами даних)
HTTP - HyperText Transfer Protocol (Протокол передачі гіпертексту)
HTTPS - HyperText Transfer Protocol Secure (Захищений протокол передачі
гіпертексту)
API - Application Programming Interface (Інтерфейс прикладного програмування)
MVC - Model-View-Controller (Модель-Представлення-Контролер)
PWA - Progressive Web Application (Прогресивний веб-додаток)
CRUD - Create, Read, Update, Delete (Створення, Читання, Оновлення, Видалення)
URL - Uniform Resource Locator (Уніфікований локатор ресурсів)
PHP - Hypertext Preprocessor (Препроцесор гіпертексту)
SSL - Secure Sockets Layer (Рівень захищених сокетів)
FTP - File Transfer Protocol (Протокол передачі файлів)
DNS - Domain Name System (Система доменних імен)
9
ВСТУП
Актуальність теми кваліфікаційної роботи бакалавра. Важко переоцінити
в сучасному світі, де Інтернет відіграє вирішальну роль у бізнесі. Веб-сайт візитка
є важливим інструментом для представлення компанії в мережі, і його розробка
є особливо важливою для малого бізнесу, такого як магазин текстилю. У цифрову
епоху наявність професійного, функціонального та привабливого веб-сайту є
ключовою для успіху будь-якого підприємства. Це дозволяє компаніям досягати
ширшої аудиторії, підвищувати пізнаванність бренду та збільшувати обсяги
продажів.
Магазини текстилю, як і будь-які інші бізнеси, стикаються з високою
конкуренцією. Веб-сайт візитка надає можливість виділитися серед конкурентів,
демонструючи унікальні продукти та пропозиції. Крім того, такий сайт може
слугувати платформою для взаємодії з клієнтами, надаючи інформацію про нові
надходження, акції та розпродажі. Для багатьох потенційних клієнтів веб-сайт є
першою точкою контакту з магазином, і добре розроблений сайт може значно
підвищити довіру та лояльність до бренду.
Розробка веб-сайтів для малого бізнесу є важливою темою, оскільки малі
підприємства часто не мають значних ресурсів для традиційної реклами та
маркетингу. Веб-сайт є економічно ефективним способом просування бізнесу,
який може забезпечити високу віддачу на інвестиції. Крім того, сучасні
технології дозволяють створювати веб-сайти з високим рівнем функціональності,
такими як інтеграція з соціальними мережами, онлайн-замовлення, зворотний
зв'язок та інші корисні функції, що сприяють залученню та утриманню клієнтів.
Сьогодні споживачі все більше покладаються на Інтернет для пошуку та
купівлі товарів і послуг. Маючи веб-сайт, магазин текстилю може бути
доступним 24/7, що значно розширює можливості для бізнесу. Навіть коли
фізичний магазин зачинений, клієнти можуть переглядати товари, дізнаватися
10
про компанію та залишати запити. Це створює постійний потік потенційних
покупців, що є критично важливим для зростання та розвитку бізнесу.
Мета роботи і задачі дослідження. Мета кваліфікаційної роботи бакалавра
– створення сучасного, адаптивного сайту-візитівки для магазину текстилю з
використанням системи керування контентом WordPress, що дозволить
забезпечити ефективну онлайн-присутність магазину.
Для досягнення поставленої мети були сформульовані такі завдання:
− визначити вимоги до функціоналу сайту-візитівки;
− здійснити аналіз існуючих аналогічних рішень;
− спроєктувати структуру сайту та бази даних;
− обґрунтувати вибір інструментів для розробки;
− реалізувати сайт-візитівку на платформі WordPress;
− протестувати роботу сайту та оцінити його ефективність.
Об’єкт дослідження: процес розробки сайтів-візитівок для малих
комерційних структур.
Предмет дослідження: структура, функціонал та засоби реалізації сайту-
візитівки магазину текстилю.
Методи дослідження. У роботі використано теоретичні методи (аналіз
літератури та джерел з веб-розробки), емпіричні – створення й налаштування
сайту, а також порівняльний аналіз сучасних інструментів розробки сайтів.
Апробація результатів роботи. Результати кваліфікаційної роботи були
представлені на Днях студентської науки ЧДТУ – 2024, де проєкт отримав 2 місце
у секції «Комп’ютерні науки та системний аналіз».
11
1 АНАЛІТИЧНИЙ ОГЛЯД ІСНУЮЧИХ АНАЛОГІВ
1.1 Аналіз предметної області
Веб – це розподілена інформаційна система на базі Інтернету. Кожен, хто
має комп’ютер, підключений до Інтернету, може легко отримати інформацію,
вказавши веб-адресу або просто натиснувши кнопку миші. Інтернет — чудовий
спосіб поширювати інформацію та робити її доступною 24/7. Інформацію також
можна збирати від веб-користувачів і клієнтів за допомогою онлайн-форм.
Менеджери та адміністратори можуть контролювати та оновлювати веб-вміст з
будь-якої точки Інтернету. Усе це робить Інтернет потужним інструментом
масової комунікації, електронного бізнесу та електронної комерції.
Порівняно з телебаченням, радіо, газетами та журналами, розповсюдження
інформації в Інтернеті є відносно простим і недорогим. Але веб-сайт — це
набагато більше, ніж такі засоби одностороннього спілкування. Це може бути
віртуальний офіс або магазин, який завжди відкритий і підтримується
працівниками з будь-якого місця [1].
Компанії, що надають веб-послуги, пропонують безкоштовний веб-простір
та інструменти для створення простих особистих чи навіть бізнес-сторінок. Але
добре розроблені та професійно реалізовані веб-сайти набагато важливіші. Навіть
тоді веб-сайти, створені фахівцями, все ще є набагато економічнішими, ніж інші
засоби масової комунікації. Для бізнесу та комерції вартість веб-сайту незначна
порівняно зі створенням і роботою звичайного офісу чи магазину. На місці веб-
сайт стає магазином, який ніколи не закривається, і це дуже привабливо. Люди
докладають великих зусиль, будуючи офіс чи магазин, щоб створювати
правильний імідж і відповідати потребам клієнтів. Крім того, добре
поінформовані компанії будуть наполягати на професійно розроблених,
розроблених і реалізованих веб-сайтах. Нічого іншого не буде.
12
Як засіб комунікації Інтернет складається з цих основних компонентів
Мережі – локальні та глобальні мережі, що з’єднують комп’ютери по
всьому світу, утворюючи Інтернет.
Клієнти – веб-браузери, які дозволяють кінцевим користувачам отримувати
доступ до Інтернету.
Сервери – постійно запущені програми, які передають інформацію в
Інтернет.
Документи – веб-сторінки, здебільшого закодовані в HTML, які надають
інформацію в Інтернеті.
Протоколи – HTTP-протокол передачі гіпертексту, який обслуговує веб-
клієнти та сервери використовувати для спілкування один з одним і TCP/IP
(протокол керування передачею), від якого залежить HTTP.
Базове розуміння цих компонентів і того, як вони працюють разом,
закладає хорошу основу для веб-дизайну та програмування. Почнемо з вивчення
мережі.
Комп’ютерна мережа – це високошвидкісне середовище зв’язку, що
з’єднує багато, можливо, несхожих між собою комп’ютерів або хостів.
Мережа – це поєднання комп’ютерного та телекомунікаційного
обладнання та програмного забезпечення. Мета полягає в тому, щоб забезпечити
швидкий і надійний обмін інформацією між хостами та між процесами або
програмами, що виконуються, на різних хостах. Інтернет є одним із
найпоширеніших сервісів Інтернету. Інші включають: електронну пошту,
передачу файлів, потокове передавання аудіо/відео та вхід на віддалені хости, і
це лише деякі з них. Мережа також надає зручні способи підключення до цих
інших Інтернет-служб [2].
Мережа значно розширює можливості підключених хостів. Сучасні
комп’ютери та мережі настільки інтегровані, що важко сказати, де закінчується
комп’ютер, а де мережа починається. Подання «Мережа — це комп’ютер». є
13
більш дійсним, ніж будь-коли раніше. Компанії, які повільно приймають цю
точку зору, намагаються впровадити мережецентричні рішення для своїх
корпоративних потреб. Веб-сайт може творити чудеса для компаній, організацій,
урядів і навіть окремих людей.
Для того, щоб програми та комп’ютери від різних виробників під різними
операційними системами могли спілкуватися в мережі, необхідно встановити
детальний набір правил і умов, яким повинні слідувати всі сторони. Такі правила
відомі як мережеві протоколи. Протоколи регулюють такі деталі, як:
− формат адреси хостів і процесів;
− формат даних;
− спосіб передачі даних;
− послідовність і адресація повідомлень;
− ініціювання та завершення з'єднань;
− встановлення дистанційних сервісів;
− доступ до віддалених сервісів;
− мережі безпеки.
Таким чином, для того, щоб процес на одному хості спілкувався з іншим
процесом на іншому хості, обидва процеси повинні слідувати одному протоколу.
Зазвичай, протокол розглядається як такий, що має логічні рівні, які знаходяться
між процесом і мережевим обладнанням. Відповідні рівні на різних хостах
виконують додаткові завдання, щоб встановити зв’язок між взаємодіючими
процесами.
Серед поширених мережевих протоколів набір протоколів Інтернету (IP)1
є найпоширенішим використовується. IP є основним протоколом для Інтернету
(Розділ 1.2), який, безумовно, є найпоширенішою мережею у всьому світі. Веб –
це служба, яка використовує HTTP (протокол передачі гіпертексту), який
базується на протоколах Інтернету.
14
Мережеві протоколи не є загадкою. Подумайте про протокол здійснення
телефонних дзвінків. Ви (клієнтський процес) повинні підняти трубку,
прослухати гудок, набрати дійсний номер телефону, дочекатися, поки інша
сторона (серверний процесор) підніме трубку. Потім ви повинні привітатися та
назвати себе тощо. Це протокол, від якого ви не можете відхилятися, якщо
хочете, щоб виклик був успішно здійснений через телефонну мережу. І
зрозуміло, навіщо потрібен такий протокол. Те саме стосується комп’ютерної
програми, яка спілкується з іншою через комп’ютерну мережу. Розробка
ефективних і активних мережевих протоколів для різних мережевих служб є
важливою областю в інформатиці.
Якщо ваша комп’ютерна система підключена до мережі, швидше за все, ви
вже підключені до Інтернету. Це означає, що ви маєте можливість майже миттєво
досягати великих відстаней, щоб отримати інформацію, обмінюватися
повідомленнями, отримувати дані, взаємодіяти з іншими, здійснювати пошук
літератури та багато іншого, не залишаючи місця перед робочою станцією. Якщо
ваш комп’ютер не під’єднано безпосередньо до мережі, але має телефон або
кабельний модем, ви можете отримати доступ до Інтернету через постачальників
доступу до Інтернету (IAP).
Інтернет – це глобальна мережа, яка об'єднує IP-мережі. Об’єднання
комп’ютерних мереж називається мережевим зв’язком, звідси й назва Інтернет.
Інтернет з’єднує різноманітні організації по всьому світу – університети,
державні установи, корпорації, бібліотеки, суперкомп'ютерні центри,
дослідницькі лабораторії та навіть окремі будинки. Кількість підключень до
Інтернету велика і швидко зростає.
Інтернет розвинувся з ARPANET 2, передових дослідницьких проєктів
оборони США:
− Включаючи TCP, UDP та ін.
− ARPANET було запущено наприкінці 1960-х років як експериментальний
15
засіб для надійної військової мережі.
Агентство (DARPA) спонсорує мережу, яка розробила IP, а також мережеві
протоколи вищого рівня TCP (протокол керування передачею) та UDP (протокол
дейтаграм користувача). Архітектура та протокол були розроблені для підтримки
надійної та гнучкої мережі, здатної витримувати атаки під час війни.
Перехід ARPANET в Інтернет відбувся наприкінці 1980-х років, коли
NSFNET, мережа університетів і суперкомп’ютерних центрів Національного
наукового фонду США, допомогла створити вибухову кількість локальних і
регіональних мереж і з’єднань на основі IP. NSFNET залишається важливим
компонентом Інтернету. Зараз Інтернет настільки домінуючий, що він практично
усунув усіх історичних конкурентів, таких як Bitnet і Decnet.
Корпорація Інтернет для присвоєних імен і номерів (ICANN,
www.icann.org) є некомерційною організацією, яка відповідає за розподіл
простору IP-адрес, призначення параметрів протоколу, керування системою
доменних імен і функціями керування системою кореневого сервера.
Мережеві адреси.
Адреса для головного комп’ютера схожа на номер телефону для телефону.
Кожен хост в Інтернеті має унікальну мережеву адресу, яка ідентифікує хост для
зв’язку. Схема адресації є важливою частиною мережі та її протоколу. Для
Інтернету кожен хост має унікальну IP-адресу, представлену 4 байтами в 32-
бітній кількості. Наприклад, monkey, хост у штаті Кент, має IP-адресу
131.123.35.92 (рис. 1.1). Ця нотація крапкою (або квадроформат) дає десяткове
значення (від 0 до 255) кожного байта 3. IP-адреса схожа на номер телефону в
інший спосіб: перші цифри схожі на коди регіонів, а кінцеві цифри – на місцеві
номери.
Через їх числову природу позначення крапкою легко для машин, але важко
для користувачів. Таким чином, кожен хост також має унікальне доменне ім’я,
що складається зі слів, схоже на поштову адресу. Наприклад, ім’я домену для
16
monkey – monkey.cs.kent.edu (на факультеті комп'ютерних наук, Кентський
державний університет). За допомогою доменних імен весь простір імен хостів
Інтернету рекурсивно ділиться на непересічні домени. Адреса monkey поміщає
його в субдомен kent в edu, домен верхнього рівня (TLD) для навчальних закладів.
Інші домени верхнього рівня включають org (некомерційні організації), gov
(урядові установи), mil (військові об’єкти), com (комерційні організації), net
(постачальники мережевих послуг), uk, (Сполучене Королівство), cn (Китай)
тощо. У межах локального домену (наприклад, cs.kent.edu) ви можете посилатися
на машини лише за їхнім іменем хоста (наприклад, мавпа, дракон, тигр), але
повна адреса має використовуватися для машин поза межами. Додаткову
інформацію про доменні імена в Інтернеті можна знайти в розділі 1.10.
ICANN акредитує реєстраторів доменних імен, які реєструють доменні
імена для клієнтів, щоб вони залишалися унікальними. Усі мережеві програми
приймають адресу хоста, надану як доменне ім’я або IP-адресу. Насправді
доменне ім’я спочатку перетворюється на цифрову IP-адресу перед
використанням.
Комутація пакетів.
Дані в Інтернеті надсилаються та приймаються пакетами. Пакет огортає
передані дані інформацією про адресу, щоб дані могли бути маршрутизовані
через проміжні комп’ютери в мережі. Оскільки існує кілька маршрутів від
джерела до вузла призначення, Інтернет дуже надійний і може працювати, навіть
якщо частини мережі не працюють.
Клієнт і сервер.
Найчастіше мережева програма включає сервер і клієнт: Серверний
процесор надає певну послугу на хост-машині, яка пропонує таку послугу.
Прикладами послуг є віддалений доступ до хосту (TELNET), передача
файлів (FTP) і Всесвітня павутина (HTTP). Кожна стандартна служба Інтернету
має власний унікальний номер порту, який є однаковим на всіх хостах. Номер
17
порту разом з Інтернет-адресою хоста ідентифікує конкретний сервер (рис. 1.2) у
будь-якому місці мережі. Наприклад, FTP має номер порту 21, Telnet 23 і HTTP
80.
− Клієнтський процес на хості підключається до сервера на іншому хості,
щоб отримати його послугу. Таким чином, клієнтська програма є агентом, через
який можна отримати певну мережеву послугу. Зазвичай для різних послуг
потрібні різні агенти.
Веб-браузер, наприклад Netscape, є клієнтом HTTP. Він працює на вашому
комп’ютері для доступу до веб-серверів на будь-яких хостах Інтернету.
Система доменних імен.
Як зазначено вище, кожен хост в Інтернеті має унікальну IP-адресу та
доменне ім’я. Простір імен мережі — це набір усіх імен хостів і динамічно
змінюється з часом через додавання/видалення хостів, перегрупування локальних
робочих груп, конфігурацію підрозділів мережі, обслуговування систем і мереж
тощо. Таким чином, нові доменні імена, нові IP-адреси та нові асоціації домен-IP
можна ввести в простір імен у будь-який час без центрального контролю.
Система доменних імен (DNS) забезпечує служба розподіленої бази даних, яка
підтримує динамічне оновлення та пошук інформації, що міститься в просторі
імен (рис. 1.3). Програма-клієнт мережі (наприклад, браузер Netscape Navigator)
зазвичай використовує DNS для отримання інформації про адресу цільового
хоста перед встановленням зв'язку з сервером. Динамічний DNS також
забезпечує загальний механізм для отримання різноманітної інформації про
хости та навіть окремих користувачів [5].
Ось моменти, на які варто звернути увагу щодо простору імен DNS:
− DNS організовує весь простір імен Інтернету у велику структуру дерева.
Кожен вузол дерева має мітку та список ресурсів.
18
− Мітки – це рядки символів (наразі не враховуються регістр), а мітки-сестри
мають бути різними. Корінь позначається порожнім рядком. Відразу під коренем
знаходяться домени верхнього рівня: edu, com, gov, net, org тощо. До доменів
верхнього рівня також входять назви країн, наприклад at (Австрія), ca (Канада),
cn (Китай). У edu, наприклад, є субдомени berkeley, kent, mit, uiuc тощо.
− Повне доменне ім’я вузла – це розділений крапками список міток, що веде
від вузла до кореня (наприклад, cs.kent.edu.).
− Відносне доменне ім’я – це префікс повного доменного імені, що вказує на
вузол відносно домену походження. Таким чином, звичне cs.kent.edu насправді є
назвою відносно кореня.
− Мітка – це офіційне або канонічне ім’я домену. Також допускаються
альтернативні імена, які називаються псевдонімами. Наприклад, інформація про
хост головного веб-сервера має псевдонім www, тому він також відомий як
www.cs.kent.edu. Щоб перемістити веб-сервер на інший хост, менеджер
локальної системи просто перепризначає псевдонім іншому хосту.
Для Інтернету немає централізованого контролю чи адміністрування. Будь-
хто потенційно може розміщувати матеріал в Інтернеті та отримувати з нього
інформацію. Мережа складається з великої колекції документів, які розміщені на
комп’ютерах по всьому світу. Ці документи створюються академічними,
професійними, урядовими та комерційними організаціями, а також окремими
особами. Документи подаються в спеціальних форматах і витягуються через
серверні програми на кожному комп’ютері, який надає веб-сервіс. Кожен веб-
документ може містити (потенційно багато) посилання на інші документи, які
обслуговуються різними серверами в інших місцях, і тому стати частиною
мережі, яка охоплює всю земну кулю. Нові матеріали постійно розміщуються в
Інтернеті, і миттєвий доступ до цієї колекції інформації може бути надзвичайно
вигідним. Оскільки Інтернет стрімко розвивається, Массачусетський
19
технологічний інститут США та INRIA (Французький національний інститут
досліджень комп’ютерних наук і управління) погодилися стати спільними
господарями Консорціуму W3, який підтримується галуззю, і далі розроблятиме
пов’язані з Інтернетом стандарти, протоколи, і послуги.
Веб-браузер – це програма, яка допомагає користувачам отримувати
інформацію з Інтернету. Враховуючи розташування цільового документа,
браузер підключається до правильного веб-сервера, отримує та відображає
потрібний документ. Ви можете натиснути на посилання в документі, щоб
отримати інші документи. За допомогою браузера ви можете отримати
інформацію, надану веб-серверами будь-де в Інтернеті.
Доступно багато різних веб-браузерів. Мозаїка, розроблена при
Національному центрі суперкомп'ютерних застосувань США (NCSA), є
оригінальним браузером зі зручною графікою користувацький інтерфейс.
Сьогодні широко використовуваними веб-браузерами є Netscape Navigator (NN)
і Microsoft Internet Explorer (IE). RealOne – це аудіо/відео медіаплеєр і веб-браузер
від RealNetworks. Інші браузери включають WebExplorer від IBM, HotJava від
JavaSoft, Amaya від W3C, Mozilla, Opera тощо. Веб-браузери конкурують за
швидкість і зручність для користувача, і з часом розвиваються.
Як правило, браузер підтримує відображення HTML-файлів і зображень у
стандартних форматах. Допоміжні програми або плагіни можуть розширити
браузер для обробки сторінок із мультимедійним вмістом, таким як аудіо, відео,
анімація та математичні формули.
Гіпертекст.
Веб-браузер спілкується з веб-сервером через ефективний протокол
передачі гіпертексту (HTTP), призначений для роботи з гіпертекстовими та
гіпермедійними документами, які можутьмістять звичайний текст, зображення,
аудіо та відео. Рідні веб-сторінки написані на мові гіпертекстової розмітки
(HTML) і зазвичай зберігаються у файлах із суфіксом назви .html (або .htm).
20
HTML упорядковує вміст веб-сторінки (текст, графіку та інші мультимедійні
дані) і дозволяє створювати гіперпосилання на інші сторінки в будь-якому місці
Інтернету. Якщо натиснути на таке посилання, веб-браузер перейде за ним і
відкриває іншу сторінку. У Мережі використовується відкрита схема адресації,
яка дозволяє посилатися на об’єкти та служби, що надаються Вебом, сервери
електронної пошти, передачі файлів, аудіо/відео та сервери груп новин. Таким
чином, веб-простір є підмножиною багатьох популярних інтернет-сервісів.
Отже, веб-браузер забезпечує можливість доступу до широкого спектру
інформації та послуг в Інтернеті.
URL.
Мережа використовує уніфіковані покажчики ресурсів (URL) для
ідентифікації (розташування) ресурсів (файлів і служб), доступних в Інтернеті.
URL-адреса може ідентифікувати хост, порт сервера та цільовий файл, що
зберігається на цьому хості. URL-адреси використовуються, наприклад,
браузерами для отримання інформації та HTML для посилань на інші ресурси
[7].
Повна URL-адреса зазвичай має вигляд схема://server:port/pathname.
Частина схеми вказує на тип інформаційної послуги і, отже, на протокол
для використання. Загальні схеми включають наступне:
- http – сервіс Інтернет. Знайдений файл отримується за допомогою
визначеного в Інтернеті протоколу передачі гіпертексту (HTTP).
- ftp – служба FTP. URL-адреса визначає місцезнаходження файлу, каталогу
або FTP сервер. Для наприклад, ftp://ftp1.mcom.com/netscape/.
Протокол – це протокол передачі файлів.
- файл – служба є локальною файловою системою. URL-адреса містить
файл на тому самому хості.
- mailto – послуга електронної пошти. URL-адреса спрощена та визначає
адресу електронної пошти для надсилання електронних листів через Інтернет.
21
- telnet – служба TELNET. URL-адреса називає цільовий хост для
віддаленого входу.
- новини – URL-адреса містить групу новин USENET.
Багато інших схем можна знайти наwww.w3.org/addressing/schemes.
Сервер ідентифікує хост і серверну програму. Додатковий номер порту
потрібен, лише якщо сервер не використовує стандартний порт (наприклад, 21
для FTP і 80 для HTTP). The залишок URL-адреси, якщо вказано, є шляхом до
файлу. Якщо цей шлях містить кінцевий символ /, він представляє каталог, а не
файл даних. Суфікс (.html, .txt, .jpg тощо) файлу даних вказує на тип файлу. Шлях
також може вести до виконуваної програми, яка динамічно створює HTML або
інший дійсний файл для повернення.
У документі HTML ви можете посилатися на інший документ, який
обслуговується тим самим веб-сервером, вказавши лише частину URL-адреси,
яка містить шлях. Такі URL-адреси вказано частково. Часткова URL-адреса з
префіксом / (наприклад, /file_xyz.html) посилається на файл у корені сервера,
каталогу верхнього рівня, який контролюється веб-сервером. Часткова URL-
адреса без початку / вказує на файл відносно розташування документа, який
містить відповідну URL-адресу. Таким чином, простий file_abc.html посилається
на цей файл у тому ж каталозі, що й поточний документ. Під час створення веб-
сайту бажано використовувати URL-адресу відносно поточної сторінки,
наскільки це можливо.
Доступ до інформації в Інтернеті може отримати прямий доступ до будь-
якого веб-документа, каталогу чи служби, вказавши його URL-адресу в полі
Розташування браузера. Якщо URL-адреса вказує на каталог, веб-сервер зазвичай
повертає файл індексу (зазвичай index.html) для цього каталогу. В іншому
випадку він може повернути список імен файлів у цьому каталозі.
Інтернет містить величезну кількість корисної інформації у вільно
організованому вигляді. Однак знайти сайти, пов’язані з тим, що ви шукаєте,
22
може бути непросто. На щастя, є пошукові системи, які збирають доступну в
Інтернеті інформацію та створюють бази даних, які легко шукати. Ці пошукові
системи постійно оновлюють свої бази даних і можуть бути надзвичайно
корисними у пошуку інформації. Новостворені веб-сайти зазвичай надсилають
свої URL-адреси популярним пошуковим системам, тому нові сайти будуть
включені до баз даних пошуку.
Yahoo!(www.yahoo.com) є одним з перших таких двигунів. Ось деякі інші:
www.google.com, www.lycos.com www.excite.com, www.askjeeves.com.
Типи вмісту.
В Інтернеті можна розміщувати та отримувати багато різних типів файлів.
Веб-сервер і веб-браузер використовують набір стандартних позначень для
позначення типів вмісту файлів, щоб правильно обробляти різні файли.
Мережа запозичила позначення типів вмісту з системи електронної пошти
Internet і використовувати ті самі типи вмісту, визначені MIME (багатоцільові
розширення Інтернет-пошти). Сьогодні використовуються сотні типів вмісту.
Багато популярних типів пов'язані зі стандартними розширеннями файлів.
Коли веб-сервер повертає документ у браузер, вказується тип вмісту.
Інформація про тип вмісту дозволяє браузерам вирішувати, як обробляти вхідний
вміст. Зазвичай HTML, текст, GIF, JPEG, PNG тощо обробляються безпосередньо
браузером. Інші типи, такі як quicktime, PDF, аудіо та відео, обробляються
плагінами або допоміжними програмами.
Розміщення інформації в Інтернеті
Тепер давайте звернемо увагу на те, як інформація подається в Інтернеті.
Це розуміння проливає більше світла на те, як працює Інтернет і що потрібно для
надання інформації в Інтернеті.
Інтернет дає можливості публікації в руки будь-кому, хто має підключений
комп’ютер до Інтернету. Все, що потрібно, це запустити веб-сервер на цій машині
та встановити файли для його обслуговування. Основні постачальники
23
комп’ютерів пропонують комерційні веб-сервери зі своїми комп’ютерними
системами. Прикладами є Windows 2000 (Microsoft), Solaris/iPlanet (Sun
Microsystems) і NetWare (Novell). Apache – це дуже популярний веб-сервер на базі
Unix, доступний у вільному доступі www.apache.org(Apache Software Foundation).
Після того, як веб-сервер запущений і працює на машині, усі типи файлів
можуть обслуговуватися (Рисунок 1.5), включаючи гіпертекст (.html), простий
текст (.txt), графічне зображення (наприклад, .gif), звук (наприклад, .wav). ), відео
(наприклад, .mov) тощо.
У типовій системі UNIX виконайте ці прості кроки, щоб створити особисту
веб-сторінку:
1. Створіть загальнодоступний каталог файлів у вашому домашньому
каталозі (~userid/public html), щоб містити ваші файли для Інтернету. Це буде
персональний веб-каталог. Зробіть цей каталог доступним.
chmod o+x ~ідентифікатор користувача/публічний html.
2. У веб-каталозі створіть домашню сторінку, як правило, index.html, у
HTML. Домашня сторінка зазвичай функціонує як анотований зміст. Зробіть цей
файл читабельним.
chmoda+r~ ідентифікатор користувача/public html/index.html.
3. Розмістіть файли та каталоги, що містять потрібну інформацію, у
вашому веб-каталозі. Зробіть кожен каталог і кожен файл доступними, як і
раніше. Зверніться до цих файлів за посиланнями на головній та інших сторінках.
4. Повідомте людям URL-адресу домашньої сторінки, яка зазвичай є
http://your-sever/~your-userid/.
На веб-сторінці варто посилатися на інший файл у тому ж каталозі за
допомогою простого посилання, що містить часткову URL-адресу (<a
href="filename">), де ім’я файлу може бути або простим ім’ям файлу, або шляхом
до поточного документа [10].
24
Серед форматів веб-файлів гіпертекст має вирішальне значення, оскільки
він надає засоби для посилання документа на інші документи.
Документ, написаний у HTML, містить звичайний текст із вкрапленням
тегів розмітки та використовує розширення імені файлу .html. Теги позначають
частини тексту як заголовок, заголовок розділу, абзац, посилання на інші
документи тощо.
Таким чином, файл HTML складається з двох типів інформації: вмісту та
тегів HTML. Браузер дотримується тегів HTML, щоб розмістити вміст сторінки
для відображення. Через це розриви рядків і додаткові пробіли між словами у
вмісті здебільшого ігноруються.
Окрім структурування та форматування вмісту, теги HTML також можуть
посилатися на графічні зображення, посилатися на інші документи, позначати
контрольні точки, генерувати форми чи анкети та викликати певні програми.
Доступні різні візуальні редактори або виробники сторінок, які забезпечують
середовище графічного інтерфейсу користувача для створення та розробки
документів HTML.
Для значних проєктів створення веб-сайтів буде корисно використовувати
інтегровані середовища зупинки, такі як Macromedia Dreamweaver. Якщо немає
готового доступу до таких інструментів, для створення або редагування веб-
сторінок можна використовувати звичайний текстовий редактор. Тег HTML має
форму <tag>. Початковий тег, наприклад <h1> (заголовок розділу першого рівня).
Нижче наведено зразок HTML-сторінки (наприклад, Фрукти):
<html>
<head> <title>Базова веб-сторінка</title> </head>
<тіло>
<h1>Великий смак фруктів</h1>
<p>Фрукти приємні на смак і корисні...</p>
<p> Існує багато різновидів, ... і ось короткий список: </p>
<ol>
<li> Яблука </li>
<li> Банани </li>
<li> Вишні </li>
</ol>
25
</body></html>
Лістинг 1.1 – Приклад HTML-розмітки
На рис. 1.6 показано сторінку Big on Fruits, яку відображає Netscape. Ми
починаємо поглиблений висвітлення HTML у розділі 2.
Веб хостинг.
Веб хостинг – це служба для зберігання та обслуговування готових файлів
і програм, щоб вони були доступні в Інтернеті. Отже, публікація в Інтернеті
передбачає: проєктування та створення сторінок і написання програм для веб-
сайту та розміщення готового сайту з послугою хостингу.
Рисунок 1.1 – Відображення сторінки
Коледжі та університети безкоштовно розміщують персональні та освітні
сайти для студентів і викладачів. Веб-хостингові компанії надають послуги за
плату.
Комерційний веб-хостинг може забезпечити безпечні центри обробки
даних (будівлі), швидке та надійне підключення до Інтернету, спеціально
26
налаштовані комп’ютери для веб-хостингу, серверні програми та утиліти,
безпеку мережі та системи, щоденне резервне копіювання та технічну підтримку.
З кожним обліковим записом хостингу надається певний обсяг дискового
простору, щомісячна норма мережевого трафіку, облікові записи електронної
пошти, веб-інструменти керування та обслуговування сайтів, а також інший
доступ, наприклад FTP і SSH (захищений вхід).
Щоб розмістити сайт під певним доменним іменем, служба хостингу
пов’язує це доменне ім’я з IP-номером, призначеним розміщеному сайту.
Асоціація домену з IP здійснюється через сервери доменних імен (DNS), якими
керує служба хостингу.
Для справді глобальних веб-сайтів послуги хостингу, такі як ті, що надає
AKAMAI, можуть розповсюдити сайт у кількох країнах для набагато швидкого
доступу з будь-якої точки світу.
Реєстрація домену.
Для отримання доменного імені вам потрібна послуга реєстратора
доменних імен. Більшість із них із задоволенням зареєструють ваше нове
доменне ім’я за дуже скромну річну плату. Після реєстрації доменне ім’я є
власністю реєстранта. Ніхто інший не може зареєструватися для цього
конкретного доменного імені, якщо поточний реєстрант підтримує реєстрацію в
належному стані. ICANN акредитує комерційних реєстраторів для поширених
доменів верхнього рівня, включаючи .com, .net, .org.
Нові домени верхнього рівня, які додаються, включають .biz, .info, .pro,
.aero, .name і .museum. Деякі реєстратори, наприклад VeriSign (раніше Network
Solutions), також реєструють домени .edu. Інші обмежені домени (наприклад, .gov
і .us) обслуговуються спеціальними реєстрами (наприклад, nic.gov і nic.us). ДВУ
з кодом країни зазвичай обробляються реєстрами у відповідних країнах.
Доступ до реєстраційних даних домену.
27
Реєстраційний запис доменного імені є загальнодоступним. Стандартний
інтернет-сервіс WHOIS дозволяє легко отримати доступ до цієї інформації. У
системах UNIX простий доступ до WHOIS забезпечує команда whois:
who is доменне ім'я;
містить список записів про реєстрацію домену, які зберігаються у
головному інформаційному центрі мережі (nic). Наприклад (наприклад: Whois),
хто є kent.edu;
видає наступну інформацію:
Доменне ім'я: KENT.EDU
Реєстратор: NETWORK SOLUTIONS, INC.
Сервер Whois: whois.networksolutions.com Реферальна URL-
адреса:http://www.networksolutions.com Сервер імен: NS1.OAR.NET
Сервер імен: NS.MCS.KENT.EDU Сервер імен: DHCP.NET.KENT.EDU
Сервер імен: NS.NET.KENT.EDU Дата оновлення: 13 червня 2003 р.
Лістинг 1.2 – Виведення інформації про домен
Цей запис складається у зведеному вигляді. Звернувшись до сервера whois
конкретного реєстратора, можна отримати більш детальний запис реєстрації
доменного імені. Наприклад, залежно від використовуваної комп’ютерної
системи, одна з команд:
whois -h whois.networksolutions.com kent.edu;
хто є[email protected];
створить детальний запис домену для kent.edu:
[whois.networksolutions.com].
Реєстрант:
Університет штату Кент (KENT-DOM)
125 Library Kent, OH 44242 США
Доменне ім'я: KENT.EDU
Контактна особа з адміністративних питань, контактна особа з
технічних питань, контактна особа з питань платежів: Yoho,Ransel
(RY678) [email protected]
Кентський державний університет
120 Library Kent, Ohio 44242
28
330-672-9576 (ФАКС) 330-672-9593
Останнє оновлення запису: 21 липня 2002 р. Запис створено 19 лютого
1987 р.
Останнє оновлення бази даних: 9 жовтня 2003 р. 10:48:00 EDT. Сервери
домену в порядку:
NS.NET.KENT.EDU 131.123.1.1
NS.MCS.KENT.EDU 131.123.2.130
DHCP.NET.KENT.EDU 131.123.252.2
NS1.OAR.NET 192.88.193.144
Лістинг 1.3 – Виведення інфорамації про домен
У системах Linux команду WHOIS іноді називають fwhois.
У Mac OS X деякі чудові мережеві інструменти можна знайти в пакеті
NetProbe, зокрема: Ping, DNS-пошук, трасування IP-маршруту, WhoIs і Finger.
У системах Windows немає вбудованої програми WHOIS. Але ви можете
легко знайти безкоштовну програму whois в Інтернеті (просто знайдіть «whois
для Windows»), як і для інших поширених інструментів Інтернету.
У мережі також доступний пошук whois (наприклад, www.crsnic.netу
VeriSign).
Сервери імен – це фактичні програми, які надають інформацію про
відображення домену в IP-адресу в Інтернеті. Ми згадували, що DNS надає
службу розподіленої бази даних, яка підтримує динамічний пошук інформації,
що міститься в просторі імен. Веб-браузери та інші інтернет-клієнтські програми
зазвичай використовують DNS для отримання IP-адреси цільового хоста перед
встановленням зв’язку з сервером.
Існує три елементи DNS: простір імен (розділ 1.2), сервери імен і резолвери.
Сервери імен: Інформація в розподіленій DNS розділена на зони, і кожна
зона підтримується одним або кількома серверами імен, що працюють на різних
хостах. Зона пов’язана з вузлом дерева домену та охоплює все або частину
піддерева цього вузла. Сервер імен, який має повну інформацію для певної зони,
називається авторитетом для цієї зони. Достовірна інформація автоматично
розповсюджується на інші сервери імен, які надають резервне обслуговування
29
для тієї самої зони. Сервер покладається на сервери нижчого рівня для іншої
інформації в межах свого піддомену та на зовнішні сервери для інших зон у
дереві домену. Сервер, пов’язаний із кореневим вузлом дерева домену, є
кореневим сервером і може вести до інформації будь-де в DNS. Авторитетний
сервер використовує локальні файли для зберігання інформації, визначення
місцезнаходження ключових серверів у своєму домені та поза ним, а також для
кешування результатів запитів з інших серверів. Файл завантаження, зазвичай
/etc/named.boot, налаштовує сервер імен і його файли даних.
Керівництво кожної зони також може вільно призначати хости, які
запускають сервери імен, і вносити зміни в свою авторитетну базу даних.
Наприклад, хост ns.nic.ddn.mil може запускати кореневий сервер імен. Хост
condor.mcs.kent.edu може запускати сервер імен для домену mcs.kent.edu.
Сервер відповідає на запити від резолверів і надає або остаточні відповіді,
або перенаправляє інші сервери імен. База даних DNS налаштована на обробку
мережевих адрес, обміну поштою, конфігурації хоста та інших типів запитів,
деякі з яких ще не реалізовано [15].
Резолвери: резолвер DNS – це програма, яка надсилає запити на сервери
імен і отримує від них відповіді. У системах UNIX резольвер зазвичай має форму
функції бібліотеки C. Резолвер може отримати доступ принаймні до одного
сервера імен і використовувати його інформацію, щоб відповісти на запит
напряму або виконати запит, використовуючи посилання на інші сервери імен.
Резолвери у формі процедур мережевої бібліотеки використовуються для
перекладу доменних імен у фактичні IP-адреси. Ці процедури бібліотеки, у свою
чергу, просять встановлені сервери імен розпізнати доменні імена. Сервери імен,
які слід використовувати для будь-якого конкретного хоста, зазвичай вказуються
у файлі /etc/resolv.conf або /usr/etc/resolv.conf.
ICANN підтримує кореневі сервери імен, пов’язані з кореневим вузлом
дерева DNS. Реєстратори доменних імен, корпорації, організації, компанії веб-
30
хостингу та інші Інтернет-провайдери (ISP) запускають сервери імен для своїх
зон, щоб пов’язати IP-адреси з доменними іменами в їхніх конкретних зонах. Усі
сервери імен в Інтернеті співпрацюють, щоб виконувати зіставлення домену з IP-
адресою на льоту.
У системах UNIX і MS/Windows команди host, dig і nslookup забезпечують
прямий доступ користувача до DNS. Ці команди схожі, але dig призначена для
заміни nslooup. Ви можете виявити, що один або всі три працюють у вашій
системі. Ми побачимо, як працює nslookup, оскільки він забезпечує простіший
вихід. Форма хост nslookup надсилає запит до сервера імен і отримує інформацію
про доменне ім’я, IP-адресу та псевдонім для вказаного хоста. Використаний
сервер імен вказано у файлі resolv.conf. Наприклад, щоб перевірити сервер (хост)
gopher в UICU, потрібно ввести команду nslookupwww.kent.edu який дає сервер:
clmboh1-dns3.columbus.rr.comАдреса:65.24.0.166.
Неавторитетна відповідь:
Ім'я: info.cs.kent.eduАдреса: 131.123.32.129.
Псевдоніми: www.cs.kent.edu.
Відображається потрібна інформація разом із ідентифікатором сервера
імен (від RoadRunner у Колумбусі, Огайо), який надав дані. Як показує цей
приклад, зазвичай ім’я www є псевдонімом DNS для хоста, справжнє доменне
ім’я якого інше.
Nslookup дуже зручний для перевірки існування хостів і пошуку IP-адрес
або псевдонімів доменних імен для хостів. Коли ім’я хоста стане відомим, ви
також можете перевірити, чи хост запущений і працює, що стосується мережі, за
допомогою команди ping.
Це надсилає повідомлення даному віддаленому хосту з проханням
відповісти луною, якщо він живий і здоровий. Якщо цієї команди немає на
вашому шляху пошуку команд, спробуйте команду /etc/ping або /usr/etc/ping
замість цього.
31
Отримавши достатню довідкову інформацію, ми переходимо до основного
предмету веб-дизайну та програмування (WDP). WDP передбачає
концептуалізацію, архітектуру, проектування, організацію, впровадження,
підтримка та вдосконалення веб-сайтів для функціонально ефективної та
естетично привабливої доставки та обміну інформацією.
Мережа є новим засобом масової комунікації. Створити добре розроблений
і ефективний веб-сайт нелегко. Це потребує досвіду в інформаційній архітектурі,
дизайні візуальної комунікації, масовій комунікації, комп’ютерному
програмуванні, бізнес-адмініструванні та споживчій психології, щоб назвати
лише деякі сфери. Зазвичай для цього потрібна командна робота.
Серцем підприємства є поєднання художнього дизайну та комп’ютерного
програмування.
Щоб створити веб-сайт, потрібно виконати багато завдань. Загальний
процес розробки веб-сайту можна підсумувати тут. Подальші розділи містять
поглиблене висвітлення цих завдань.
Аналіз вимог і план розвитку:
Які вимоги до готового сайту?
Що саме готовий веб-сайт досягне для клієнта?
Які проблеми клієнт хоче, щоб ви вирішили?
Хто цільова аудиторія сайту?
Чи можна реально допомогти клієнту?
Який обсяг і характер роботи?
Які завдання проєктування та програмування включені?
Які ресурси та інформація будуть потрібні та які проблеми передбачити?
Хто надасть інформацію про вміст для сайту, в яких форматах?
Які ресурси потрібні або доступні: текстовий вміст, фотографії,
зображення, аудіо, відео, логотипи, стандарти корпоративного стилю, авторські
права, титри, нижні колонтитули та знаки розрізнення?
32
Дайте відповіді на попередні запитання та складіть план, створіть і
згрупуйте вміст, функціональні вимоги та вимоги до зовнішнього вигляду та
встановіть чіткі цілі та етапи створення та розвитку сайту.
Архітектура сайту — визначтеся з відповідною архітектурою сайту. На
архітектуру сайту впливає характер інформації, що подається, і засоби доставки.
Звичайні сайти містять статичні сторінки з текстом і зображеннями, а також
онлайн-форми. Спеціалізовані сайти можуть включати аудіо, відео, мультимедіа,
динамічно генеровану інформацію або доступ до баз даних.
Інформаційна архітектура веб-сайту (IA) має справу зі структуруванням,
взаємозв’язком, зв’язком, логічною організацією та динамічною взаємодією між
складовими частинами веб-сайту.
На кожній веб-сторінці враховуйте розміщення, макет, візуальний ефект,
шрифт і стиль тексту тощо. Це також важливо, але може бути більше «прикрасою
інтер’єру», а не архітектурою. Однак, архітектура та внутрішнє/зовнішнє
оздоблення тісно пов’язані.
На етапі архітектури сайту створюється схема створення веб-сайту.
План — це специфікація компонентів та їх вмісту, функціональних
можливостей, зв’язків, зв’язків і взаємодій. Реалізація веб-сайту буде точно
відповідати архітектурі.
Важливим аспектом архітектури сайту є система навігації, за допомогою
якої відвідувачі можуть подорожувати вашим сайтом. Мета полягає в тому, щоб
створити прості й зрозумілі схеми навігації для всього сайту (основні),
внутрішньо розділові (вторинні) і внутрішньо сторінкові (третинні).
Текстовий каркас сайту – виконайте ці кроки, щоб підготувати скелетне
місце як основу для внесення коригувань і подальшої роботи для завершення
сайту.
- Вміст: створити список вмісту або інвентар; підготувати файли
вмісту для включення на веб-сторінки.
33
- Карта сайту: намалюйте діаграму зв’язків всіх сторінок, які потрібно
створити для сайту, дайте кожній сторінці відповідні заголовки, покажіть
групування сторінок, посилання на сайті та поза ним, розрізніть статичні та
динамічні сторінки, визначте форми та підтримку на стороні сервера. Основні
підрозділи сайту можуть мати власні підкарти.
- Скелетний сайт: вхідна сторінка, домашня сторінка, типові
підсторінки та підсторінки, текстовий вміст (може бути у короткому вигляді),
HTML-форми з текстовим макетом та описом підтримки на стороні сервера,
структура файлової ієрархії для сайту, добре визначені стандарти кодування
HTML для сторінок.
- Навігація: дотримуйтеся архітектури сайту та карти сайту, щоб
зв’язати сторінки, використовуйте текстові навігаційні посилання з грубим
розташуванням (угорі, ліворуч, праворуч або внизу), уникайте тупикових
сторінок і не вплутуйте кінцевого користувача.
Візуальна комунікація та художній дизайн:
- Концепції дизайну: особливості, характеристики та зовнішній вигляд
сайту. Дизайн повинен відображати ідентичність клієнта та призначення сайту.
- Історичні дошки: прості ескізи макетів на основі лише текстового
сайту для типових сторінок, форм HTML і сторінок відповідей у формі HTML;
верхній колонтитул, нижній колонтитул, поля, навігація-панель, логотип та інші
графічні елементи для підтримки доставки вмісту; відгуки клієнтів і схвалення
розкадровок.
- Макет сторінки: (для сторінок усіх рівнів) ієрархія та групування
вмісту; сітки, вирівнювання, константи та змінні на сторінці; розміщення та
розмір діаграм, графіків, ілюстрації, фотографії; творче використання простору
та варіацій шрифту, сітки та кольору; стильові варіанти та варіації.
34
- Домашня сторінка/сторінка входу: Візуальні елементи для підтримки
унікальної функції та мети входу на сайт і домашню сторінку відповідно до вимог
архітектури сайту.
- Шаблони сторінок: створюйте шаблони для типових сторінок на всіх
рівнях. Шаблони – це файли-скелети, які використовуються для створення
готових сторінок шляхом вставки тексту, графіки та іншого вмісту в позначені
місця в шаблонах. Іншими словами, шаблон — це рамка сторінки з бажаним
дизайном, макетом і графікою, готова для прийому тексту, посилань, фотографій
та іншого вмісту. Сторінка шаблону може містити HTML, таблиці стилів,
Javascript, теги head, body, meta, link і script, а також позначені місця для вмісту
сторінки. Шаблони дозволяють кожному члену команди проекту створювати
сторінки для сайту. Розширені шаблони можуть включати динамічні функції на
стороні сервера.
- Сторінки-прототипи: використовуйте шаблони для заповнення
типових сторінок у формі прототипів, тестування та перевірки прототипів
сторінок, представлення сторінок-прототипів клієнту та отримання відгуків і
схвалення. Переконайтеся, що система макета розроблена достатньо
універсальною та гнучкою, щоб врахувати можливі зміни вмісту.
- Програмування на стороні клієнта: Напишіть сценарії для браузерів
і, можливо, інших веб-клієнтів, які будуть доставлені разом із веб-сторінками на
стороні клієнта. Такі сценарії можуть включати таблиці стилів і Javascript.
Клієнтські програми можуть зробити веб-сторінки більш інтерактивними та
оперативними.
- Програмування на стороні сервера: напишіть програми для обробки
форм, створення динамічних сторінок, доступу до бази даних, електронного
бізнесу та функцій електронної комерції. Переконайтесь вони відповідають
архітектурі сайту, орієнтації на користувача та візуальному дизайну.
35
- Готові сторінки: після прототипів сторінок додайте текст, графіку,
фотографії, анімацію, аудіо та відео до шаблонів, щоб створити всі необхідні
сторінки; виконати остаточні коригування та тонке налаштування.
Перевірка помилок і перевірка – застосуйте інструменти або служби
перевірки сторінок на готових сторінках, щоб усунути орфографічні помилки,
непрацюючі посилання та проблеми з кодуванням HTML. Перевірте час
завантаження сторінки.
Тестування – перевірте сайт, спробуйте різні браузери з різних місць
доступу, налагодьте, налаштуйте та перевірте відповідність архітектурі та
вимогам.
Розгортання – опублікувати сайт у мережі, оприлюднити його URL-адресу
та зареєструвати сайт у пошукових системах.
Документація – запишіть опис веб-сайту, його дизайн і функціональні
можливості, структуру файлів, розташування вихідних файлів мистецтва та
програмування, інструкцію з обслуговування сайту.
Технічне обслуговування – постійна робота та розвиток сайту.
Документи, доступні в Інтернеті, зазвичай готуються та налаштовуються
заздалегідь, щоб забезпечити певний фіксований вміст у форматі HTML або в
іншому форматі, наприклад звичайному тексті, GIF або JPEG. Ці фіксовані
документи є статичними. Веб-сервер також може генерувати документи на льоту,
що забезпечує ці та інші переваги:
- налаштування документа залежно від того, коли, де, хто та яка
програма його отримує
- збір користувацьких даних (за допомогою HTML-форм) і надання
відповідей на вхідну інформацію.
36
1.2 Постановка задачі
Опис функцій програми:
- Ініціалізація бази даних: функція для створення необхідних таблиць у
базі даних.
- Заповнення бази даних: функція для початкового заповнення таблиці
продуктів.
- Головна сторінка: відображення всіх продуктів.
- Сторінка продуктів: відображення детальної інформації про всі
продукти.
- Сторінка контактів: форма для зв'язку з магазином, обробка GET і POST
запитів.
Вхідна та вихідна інформація:
- Вхідна інформація: введення клієнта, зворотній зв’язок.
- Вихідна інформація: відображення продуктів та інформації, отриманої
через форму зворотного зв'язку.
Логічна структура реляційної бази даних:
- Таблиця PRODUCTS:
- id (PK),
- name,
- description,
- price.
Визначення зв'язків інформаційних об'єктів:
Один об'єкт продукту матиме такі атрибути: id, name, description, price.
37
Рисунок 1.2 – Модель використання
Технічні вимоги.
Функціональні вимоги:
Головна сторінка: відображення списку продуктів з назвами, описами та
цінами.
Навігаційна панель з посиланнями на сторінки "Home", "Products", та
"Contact".
Сторінка продуктів: відображення детальної інформації про всі продукти.
Інтерфейс у форматі карток з зображеннями продуктів, назвами, описами
та цінами.
Сторінка контактів: форма для зворотного зв'язку з полями для імені,
електронної пошти та повідомлення.
Обробка GET і POST запитів.
Нефункціональні вимоги:
Продуктивність: швидке завантаження сторінок (<2 секунд).
Обробка запитів до бази даних з мінімальною затримкою.
Використання HTTPS для захищених з'єднань.
Юзабіліті: інтуїтивно зрозумілий інтерфейс.
38
Адаптивний дизайн для роботи на різних пристроях (десктоп, планшет,
мобільний).
Масштабованість: підтримка збільшення кількості продуктів без втрати
продуктивності. Можливість легкої інтеграції з іншими системами (наприклад,
системами оплати).
1.3 Аналіз і вибір засобів розробки сайту-візитівки магазину текстилю
Python – це інтерпретована, високорівнева мова програмування загального
призначення з елементами об'єктно-орієнтованого, функціонального та
процедурного програмування. Була розроблена Гвідо ван Россумом у кінці 1980-
х років та перші версії були випущені у 1991 році. Python має простий та
лаконічний синтаксис, що робить його дуже читабельним та легким для вивчення
та розуміння, навіть для початківців у програмуванні.
Його популярність зростає з кожним роком завдяки великій кількості
бібліотек та фреймворків, які спрощують розробку програмних продуктів у
різних галузях, включаючи веб-розробку, наукові обчислення, обробку даних,
штучний інтелект та багато іншого.
Однією з ключових особливостей Python є його динамічна типізація, що
дозволяє розробникам не вказувати типи змінних при оголошенні. Це робить код
більш гнучким та легким для розуміння, проте може призводити до помилок під
час виконання програми. Велика кількість фреймворків та бібліотек дозволяють
вирішувати різноманітні завдання та прискорюють розробку програмних
продуктів.
Крім того, Python є платформонезалежною мовою, що означає, що
програми, написані на Python, можуть працювати на різних операційних
системах, таких як Windows, macOS та різних дистрибутивах Linux. Це робить
39
його відмінним вибором для розробки крос-платформних додатків та забезпечує
широку сумісність з різними середовищами виконання.
Узагальнюючи, Python – це потужна та універсальна мова програмування,
яка використовується у багатьох галузях індустрії та досліджень. Його простий
синтаксис, велика кількість бібліотек та фреймворків роблять його привабливим
вибором для розробників будь-якого рівня досвіду.
JavaScript (JS) – це високорівнева, інтерпретована мова програмування, яка
використовується для розробки веб-додатків та створення інтерактивного
контенту на веб-сторінках. Вона була створена Бренданом Ейхом у 1995 році і
спочатку використовувалася виключно для веб-розробки, проте з часом
розширюється на багато інших платформ, включаючи серверну розробку та
розробку мобільних додатків.
JavaScript має динамічну типізацію, що означає, що типи змінних можуть
змінюватися під час виконання програми. Це робить мову дуже гнучкою та
дозволяє розробникам швидко реагувати на зміни в даних або взаємодіяти з
користувачем [17].
JavaScript має широкі можливості, включаючи роботу з DOM (Document
Object Model) для зміни структури та зовнішнього вигляду веб-сторінок, обробку
подій, валідацію даних на клієнтському боці, анімацію, а також взаємодію з
сервером за допомогою AJAX (Asynchronous JavaScript and XML) для
асинхронного обміну даними з веб-сервером без перезавантаження сторінки.
Однією з ключових особливостей JavaScript є його асинхронний характер,
що дозволяє виконувати операції в фоновому режимі без блокування інтерфейсу
користувача. Це дозволяє створювати веб-додатки з більшим рівнем реактивності
та відповідати на дії користувачів миттєво.
Завдяки широкому спектру бібліотек та фреймворків, таких як React,
Angular, та Vue.js, JavaScript став основною мовою для розробки сучасних веб-
додатків. Ці інструменти дозволяють розробникам ефективно керувати
40
складністю веб-додатків, використовуючи компонентний підхід та реюзабельний
код.
В заключення, JavaScript є важливим інструментом для веб-розробників
усіх рівнів, завдяки своїм широким можливостям та великому екосистемі
бібліотек і фреймворків. Він продовжує розвиватися і залишається одним з
найпопулярніших інструментів для створення сучасних веб-додатків.
Java – це високорівнева, об'єктно-орієнтована мова програмування,
розроблена компанією Sun Microsystems (згодом придбана Oracle Corporation) у
1995 році. Це одна з найпопулярніших та найвикористовуваніших мов
програмування у світі, що використовується для розробки широкого спектру
програмних продуктів, від десктопних та веб-додатків до мобільних додатків та
корпоративних систем.
Java прославилася своєю платформою незалежністю, що означає, що
програми, написані на Java, можуть запускатися на будь-якій платформі, яка має
відповідний віртуальний Java-машину (JVM). Це забезпечує велику
переносимість коду та дозволяє розробникам писати програми один раз і
виконувати їх на різних пристроях без будь-яких змін.
Однією з ключових особливостей Java є її безпека. Java використовує
механізми безпеки, такі як обмеження доступу до ресурсів та контроль виконання
коду, що робить її особливо популярною для розробки програм, які вимагають
високого рівня безпеки, наприклад, банківські додатки та корпоративні системи.
Java також має велику екосистему бібліотек та фреймворків, які
допомагають розробникам створювати програми більш ефективно та швидко.
Наприклад, Spring Framework є одним з найпопулярніших фреймворків для
розробки корпоративних Java-додатків, а Android SDK дозволяє розробникам
створювати мобільні додатки для платформи Android.
41
Одним з головних недоліків Java є її швидкодія на порівняння з іншими
мовами програмування, такими як C++ чи C#. Проте, з випуском нових версій та
оптимізацією JVM, цей недолік стає менш помітним.
Узагальнюючи, Java є потужною та універсальною мовою програмування,
яка використовується у багатьох галузях, від розробки веб-додатків до
корпоративних систем та мобільних додатків. Її переносимість, безпека та велика
екосистема інструментів роблять її однією з найпопулярніших мов
програмування у світі.
Ruby – це динамічна, об'єктно-орієнтована мова програмування, яка була
розроблена Якиро Мацумото в Японії у 1995 році. Вона має простий та
елегантний синтаксис, що робить код на Ruby дуже читабельним та легким для
розуміння. Ruby відомий своєю філософією "Зручності для програміста", що
підкреслює зручність та задоволення від розробки програм на цій мові.
Однією з ключових особливостей Ruby є його повна підтримка об'єктно-
орієнтованого програмування. У Ruby все є об'єктом, включаючи числа, рядки та
навіть класи, що дозволяє розробникам створювати чистий та структурований
код. Також Ruby підтримує механізми, такі як наслідування, поліморфізм та
інкапсуляція, що дозволяє розробникам писати більш зрозумілі та гнучкі
програми.
Ще однією сильною стороною Ruby є його розширюваність та спільнота.
Існує велика кількість готових бібліотек та фреймворків, таких як Ruby on Rails,
Sinatra, та Hanami, які допомагають розробникам швидко розробляти веб-додатки
та сервіси. Також Ruby має велику та активну спільноту розробників, яка
постійно розвиває мову та створює нові інструменти для роботи з нею.
Однак, хоча Ruby має багато переваг, він не є найшвидшою мовою
програмування, особливо у порівнянні з мовами, які компілюються, такими як
C++ чи Java. Це може бути проблемою у випадку додатків з великою кількістю
обчислень або високими вимогами до продуктивності.
42
Узагальнюючи, Ruby – це потужна та гнучка мова програмування, яка
надає зручний та приємний досвід розробки програм. Її простий синтаксис, повна
підтримка об'єктно-орієнтованого програмування та велика екосистема роблять
її популярним вибором для розробників усіх рівнів досвіду.
PHP (Hypertext Preprocessor) – це мова програмування загального
призначення, яка використовується для створення динамічних веб-сайтів та веб-
додатків. Вона була розроблена Расмусом Лердорфом у 1994 році і швидко стала
однією з найпопулярніших мов програмування для серверної розробки веб-
додатків.
Однією з ключових особливостей PHP є його вбудована підтримка веб-
розробки. PHP включає в себе велику кількість вбудованих функцій та бібліотек,
які дозволяють розробникам легко створювати різноманітні функції та веб-
додатки, такі як обробка форм, робота з базами даних, створення сесій, робота з
файлами та багато іншого.
Ще однією важливою особливістю PHP є його вбудована підтримка баз
даних. PHP може легко взаємодіяти з різними системами управління базами
даних (СУБД), такими як MySQL, PostgreSQL, SQLite та іншими, що робить його
ідеальним вибором для створення веб-додатків, які потребують роботи з даними.
PHP також має широкий вибір фреймворків, таких як Laravel, Symfony,
CodeIgniter, які допомагають розробникам будувати великі та складні веб-
додатки швидше та ефективніше. Фреймворки забезпечують розробникам зручні
структури проектів, готові рішення для типових задач, такі як маршрутизація,
автентифікація та валідація даних, а також забезпечують високий рівень безпеки.
Незважаючи на свою популярність, PHP також має свої недоліки, такі як
менш елегантний синтаксис порівняно з деякими іншими мовами програмування
та менша швидкодія порівняно з деякими мовами. Однак, з випуском нових
версій та оптимізаціями, PHP постійно покращується і залишається однією з
найпопулярніших мов програмування для веб-розробки.
43
Узагальнюючи, PHP – це потужна та розширювана мова програмування,
яка використовується для створення різноманітних веб-додатків та сервісів. Вона
має велику кількість інструментів, бібліотек та фреймворків, які допомагають
розробникам швидко та ефективно створювати веб-продукти різного рівня
складності.
Flask – це легкий та гнучкий мікрофреймворк для розробки веб-додатків на
мові програмування Python. Розроблений Арміном Ронхейзером у 2010 році,
Flask став популярним інструментом для створення веб-додатків через свою
простоту, гнучкість та широкий функціонал.
Однією з головних переваг Flask є його легкість використання. Він має
мінімальний набір залежностей та вбудовані можливості, що дозволяє
розробникам швидко розгортати веб-додатки без зайвого навантаження або
складності.
Flask також володіє простим та інтуїтивним синтаксисом, що робить його
дуже легким для вивчення та використання. Це особливо корисно для початківців
у веб-розробці, а також для проектів, які вимагають швидкого прототипування
або розробки MVP.
Незважаючи на свою простоту, Flask має великий функціонал і можливості
для розширення. Він підтримує роботу з шаблонами Jinja2 для відображення
сторінок, вбудовану обробку запитів та маршрутизацію, роботу з формами,
керування сесіями та багато іншого.
Однією з ключових особливостей Flask є його модульність та
розширюваність. Він має велику кількість розширень, які додають до нього
додатковий функціонал, такий як автентифікація користувачів, робота з базами
даних, взаємодія з API, інтеграція з іншими сервісами та багато іншого.
Загалом, Flask є потужним та гнучким інструментом для розробки веб-
додатків на мові Python. Він володіє простотою та гнучкістю, що робить його
44
відмінним вибором для широкого спектру проектів, від простих лендінгів до
складних веб-сервісів.
Node.js – це вільна, відкрита платформа, яка використовується для
виконання коду JavaScript на серверному боці. Розроблена Райаном Далем та
представлена у 2009 році, Node.js стала одним з найпопулярніших інструментів
у сфері серверної розробки завдяки своїм унікальним характеристикам та
перевагам.
Однією з ключових особливостей Node.js є його асинхронний та подійно-
орієнтований характер. Виконання операцій у Node.js зазвичай здійснюється
асинхронно, що дозволяє ефективно обробляти велику кількість одночасних
запитів без блокування потоків. Це робить його ідеальним вибором для розробки
високопродуктивних та масштабованих додатків, таких як веб-сервери, чат-
додатки та API.
Node.js базується на движку JavaScript V8, розробленому Google для
браузера Chrome. Це означає, що Node.js володіє високою швидкодією та
ефективністю виконання коду. Велика спільнота розробників та активна
підтримка забезпечують постійний розвиток та вдосконалення платформи.
Node.js має широкий вибір модулів та пакетів, доступних через пакетний
менеджер npm. Це дозволяє розробникам швидко розширювати функціонал своїх
додатків та використовувати готові рішення для різноманітних завдань, від
роботи з базами даних до роботи з мережевими запитами.
Крім того, Node.js підтримує розробку за допомогою сучасних підходів,
таких як серверні рендерери React або Vue, що дозволяє створювати універсальні
(isomorphic) додатки, які можуть виконуватися як на клієнтському, так і на
серверному боці.
Узагальнюючи, Node.js – це потужна та ефективна платформа для розробки
серверних додатків на мові JavaScript. Вона надає розробникам зручний та
ефективний інструмент для створення високопродуктивних та масштабованих
45
додатків з використанням асинхронного програмування та широкого вибору
модулів і бібліотек.
React.js - це бібліотека JavaScript для створення інтерфейсів користувача.
Вона була розроблена Facebook і випущена в 2013 році. React відомий своєю
декларативною та компонентною природою, що робить розробку веб-додатків
ефективною та зручною [18].
Однією з ключових особливостей React є використання віртуального DOM
(Document Object Model). React використовує віртуальний DOM для ефективного
оновлення сторінок без перезавантаження веб-сторінки. Він відстежує зміни у
стані додатку та автоматично оновлює відповідні елементи інтерфейсу
користувача, забезпечуючи швидку та плавну відповідь на дії користувача.
Ще однією важливою особливістю React є його компонентна модель. Веб-
додатки, розроблені з використанням React, складаються з невеликих та
незалежних компонентів, які можуть бути легко перевикористані та
модифіковані. Це робить код більш структурованим, легшим для розуміння та
підтримки.
React також використовує концепцію властивостей (props) та стану (state).
Властивості передаються компонентам ззовні та не змінюються, тоді як стан
визначається внутрішньо і може змінюватися залежно від дій користувача або
інших факторів. Ця роздільність дозволяє створювати динамічні та інтерактивні
компоненти.
Однією з сильних сторін React є його активна та велика спільнота. Існують
тисячі додаткових бібліотек, компонентів та інструментів, які розроблені
спільнотою для полегшення розробки на React. Також існують популярні
фреймворки, такі як Next.js та Gatsby.js, які розширюють можливості React та
додають новий функціонал.
Узагальнюючи, React – це потужна та популярна бібліотека для створення
інтерфейсів користувача. Вона надає зручні та ефективні засоби для розробки
46
веб-додатків з використанням декларативного підходу, компонентної моделі та
віртуального DOM. Реакт відомий своєю швидкістю, продуктивністю та великою
спільнотою, що забезпечує постійний розвиток та підтримку.
Laravel – це високорівневий фреймворк для розробки веб-додатків на мові
програмування PHP. Він був розроблений Тейлором Отвеллом і вперше
випущений у 2011 році. Laravel використовує сучасні технології та практики
розробки для спрощення процесу створення веб-додатків та забезпечення
швидкого розгортання проєктів.
Однією з ключових особливостей Laravel є його елегантний та зручний
синтаксис. Він надає широкий набір зручних інструментів та функціоналу для
роботи з базами даних, маршрутизації, сесіями, аутентифікацією, кешуванням та
багато іншого, що робить розробку додатків швидкою та простою.
Ще однією важливою особливістю Laravel є його модульність та
розширюваність. Він має велику кількість готових компонентів та розширень, які
дозволяють розробникам швидко додавати новий функціонал до своїх додатків.
Крім того, Laravel надає зручний механізм для створення та використання
власних пакетів.
Фреймворк також надає широкий набір інструментів для тестування коду,
що дозволяє розробникам забезпечувати якість своїх додатків та впевненість в
їхній роботі. Laravel підтримує автоматизовані тести одиниць, інтеграційні тести
та інші види тестування, що дозволяє розробникам швидко виявляти та
виправляти помилки в коді.
Однією з найбільш популярних особливостей Laravel є його фреймворк для
створення веб-додатків – Laravel Eloquent ORM. Eloquent забезпечує зручний та
ефективний спосіб взаємодії з базами даних, використовуючи сучасний
синтаксис та підтримуючи багато різних видів відносин.
Узагальнюючи, Laravel – це потужний та прогресивний фреймворк для
розробки веб-додатків на мові PHP. Він надає зручний та елегантний спосіб для
47
створення високоякісних та швидких додатків, забезпечуючи розробникам
широкий набір інструментів та функціоналу. Laravel заслужено вважається
одним з найкращих фреймворків для розробки веб-додатків у світі PHP.
Angular – це популярний фреймворк для розробки веб-додатків,
розроблений командою Google. Angular надає потужний набір інструментів та
функціоналу для створення високоякісних та складних клієнтських додатків з
використанням мови програмування TypeScript.
Однією з ключових особливостей Angular є його компонентна архітектура.
Додатки, розроблені на Angular, будуються з використанням компонентів, які є
незалежними, пере використовуваними та легко розширюваними. Компоненти
дозволяють розбити додаток на малий, легко керований блоки коду, що спрощує
розробку та підтримку проектів.
Angular також володіє потужним модульним системою. Він дозволяє
розробникам організовувати свої додатки у вигляді модулів, що містять
компоненти, сервіси та інші ресурси. Це дозволяє створювати масштабовані та
добре організовані додатки, які легко розширювати та модифікувати.
Однією з основних особливостей Angular є його двостороннє зв'язування
даних. Це означає, що зміни в моделі даних автоматично відображаються у
користувацькому інтерфейсі та навпаки, що робить розробку інтерактивних
додатків більш простою та ефективною.
Angular також надає широкий набір інструментів для роботи з HTTP
запитами, роутінгом, формами, аутентифікацією та іншими аспектами веб-
розробки. Вбудовані модулі та компоненти дозволяють швидко розгортати
різноманітні функції та фічі у додатках.
Крім того, Angular має велику спільноту розробників та активну підтримку
з боку Google. Існують тисячі додаткових бібліотек, модулів та інструментів,
розроблених спільнотою, які допомагають розширювати можливості фреймворку
та вдосконалювати розробку додатків.
48
Узагальнюючи, Angular – це потужний та ефективний фреймворк для
розробки веб-додатків на мові TypeScript. Він надає зручний та сучасний підхід
до розробки, широкий набір інструментів та функціоналу, що дозволяє
розробникам швидко створювати високоякісні та масштабовані додатки.
Express.js – це легкий та гнучкий веб-фреймворк для розробки веб-додатків
на платформі Node.js. Він є одним з найпопулярніших інструментів для
створення серверних додатків з використанням JavaScript, завдяки своїй простоті,
швидкості та розширюваності.
Однією з ключових особливостей Express є його мінімалістичний підхід.
Фреймворк надає лише базовий набір функцій для створення веб-сервера, такий
як маршрутизація, обробка запитів та відправка відповідей. Це дозволяє
розробникам більш вільно контролювати та налаштовувати свої додатки, не
перевантажуючи їх зайвим функціоналом.
Express використовує простий та інтуїтивно зрозумілий синтаксис, що
робить його легким для вивчення та використання. Це особливо корисно для
початківців у розробці веб-додатків, а також для швидкого прототипування та
розробки MVP.
Однією з сильних сторін Express є його розширюваність. Він має велику
кількість модулів та розширень, які дозволяють розробникам додавати новий
функціонал до своїх додатків. Наприклад, для роботи з шаблонами можна
використовувати модуль "ejs" або "pug", для автентифікації – модуль "passport",
для роботи з базами даних – модуль "mongoose" або "sequelize", тощо.
Express також підтримує роботу з middleware - це функції, які мають доступ
до об'єктів запиту та відповіді, і можуть виконувати певні дії, обробляти дані або
модифікувати запит перед тим, як він досягне маршруту. Це дозволяє
розробникам створювати легко змінювані та пере використовувані компоненти,
що спрощує розробку складних додатків.
49
Узагальнюючи, Express.js – це легкий та гнучкий веб-фреймворк для
розробки серверних додатків на платформі Node.js. Він надає простий та
ефективний спосіб створення веб-додатків з використанням JavaScript,
забезпечуючи розробникам зручний інструмент для створення швидких та
масштабованих додатків.
Ruby on Rails (зазвичай скорочено як Rails) - це високорівневий фреймворк
для швидкої та ефективної розробки веб-додатків на мові програмування Ruby.
Розроблений Девідом Генем Генсом та випущений у 2004 році, Rails швидко став
одним з найпопулярніших фреймворків для веб-розробки завдяки своїй простоті,
продуктивності та конвенції над конфігурацією.
Однією з ключових особливостей Rails є його принцип "Конвенція над
конфігурацією" (Convention over Configuration, або CoC). Цей підхід дозволяє
розробникам швидко розгортати проекти, забезпечуючи стандартизацію та
автоматизацію багатьох аспектів розробки, таких як маршрутизація, ORM
(Object-Relational Mapping), тестування тощо.
Rails також використовує паттерн проектування Model-View-Controller
(MVC), що дозволяє розділити логіку додатка на три складові: моделі (Models),
представлення (Views) та контролери (Controllers). Це спрощує структуру
додатка, робить код більш організованим та підтримуваним.
Rails має велику кількість вбудованих модулів та бібліотек, які дозволяють
розробникам швидко додавати різноманітний функціонал до своїх додатків.
Наприклад, ActiveRecord – це ORM, який дозволяє взаємодіяти з базою даних за
допомогою звичайних методів Ruby, а ActionView – це модуль для створення
HTML та інших форматів виводу.
Rails також надає потужні інструменти для тестування коду. Вбудований
фреймворк для тестування дозволяє розробникам створювати та виконувати різні
види тестів, такі як юніт-тести, інтеграційні тести, функціональні тести тощо, що
забезпечує високу якість та стабільність додатків.
50
Загалом, Ruby on Rails – це потужний та продуктивний фреймворк для
розробки веб-додатків, який надає розробникам зручні та ефективні інструменти
для створення швидких та масштабованих додатків. Він є популярним вибором
для стартапів, компаній різних розмірів та проектів різної складності.
MySQL – це відкрита система керування базами даних (СКБД), яка
використовує мову запитів SQL (Structured Query Language) для збереження та
управління структурованою інформацією. Вона є однією з найпопулярніших та
широко використовуваних реляційних СКБД у світі, використовується для
різноманітних завдань, від простих веб-сайтів до великих корпоративних систем.
Однією з ключових переваг MySQL є його відкритий та безкоштовний
характер. Він доступний для завантаження та використання безкоштовно, що
робить його доступним для широкого кола користувачів та розробників. Крім
того, MySQL має велику та активну спільноту розробників, яка надає підтримку
та розвиток системи [19].
MySQL володіє широким набором функцій та можливостей, що робить
його досить універсальним для використання у різних сценаріях. Він підтримує
багато типів даних, включаючи числа, рядки, дати, часи, географічні дані, BLOB
(binary large object) тощо. Також він підтримує різні види індексів для оптимізації
швидкості пошуку та вибірки даних.
MySQL також має розширені можливості забезпечення безпеки та
контролю доступу до даних. Він підтримує різні методи автентифікації
користувачів, шифрування даних, обмеження доступу до бази даних та таблиць,
аудит доступу та багато іншого.
Ще однією перевагою MySQL є його висока продуктивність та
масштабованість. Він може обробляти великі обсяги даних та високі
навантаження запитів, що робить його ідеальним вибором для великих та високо
витратних проєктів.
51
Узагальнюючи, MySQL – це потужна та надійна система керування базами
даних, яка володіє широким набором функцій, високою продуктивністю та
масштабованістю. Вона є популярним вибором для різних видів проектів та
додатків та забезпечує користувачам зручний та ефективний спосіб збереження
та управління даними.
SQLite – це вбудована, серверна база даних, яка використовується в
широкому спектрі програмних додатків, від мобільних додатків до великих веб-
проектів. Однією з головних особливостей SQLite є те, що вона є нульовою
налаштуванням та самостійною, що означає, що немає необхідності
встановлювати або конфігурувати окремий сервер баз даних.
Однією з головних переваг SQLite є його легкість використання та
налаштування. Вона проста у встановленні, вимагає мінімальних системних
ресурсів та не потребує окремого сервера баз даних для роботи. Це робить її
ідеальним вибором для невеликих проектів або додатків, які не потребують
масштабування.
SQLite також має велику кількість функцій, які роблять її потужною та
гнучкою. Вона підтримує різні типи даних, включаючи числа, рядки, дати, часи,
BLOB (binary large object) та інші. Також SQLite має вбудовану підтримку для
транзакцій, яка дозволяє забезпечити цілісність та безпеку даних.
Ще однією перевагою SQLite є її висока швидкість та ефективність. Вона
може обробляти великий обсяг даних та виконувати складні запити швидко та
ефективно. Це робить її відмінним вибором для використання в додатках з
великою кількістю читань та записів даних.
Однак, варто враховувати, що SQLite має свої обмеження. Вона не
підтримує багатокористувацьку роботу, тобто одночасні записи в базу даних
можуть призвести до блокування. Також вона не підтримує окремий сервер баз
даних, що робить її менш підходящою для великих та високонавантажених
проектів.
52
Узагальнюючи, SQLite – це легка, потужна та гнучка база даних, яка
підходить для широкого спектру програмних додатків. Вона надає швидкий
доступ до даних, просту настройку та використання, що робить її популярним
вибором для розробників усіх рівнів досвіду.
PostgreSQL – це потужна об'єктно-реляційна система керування базами
даних (СКБД), яка використовує мову запитів SQL (Structured Query Language)
для збереження та управління структурованою інформацією. Вона є однією з
найпопулярніших відкритих СКБД і відома своєю надійністю, стабільністю та
розширюваністю.
PostgreSQL має розширену функціональність та підтримує багато
передових можливостей, які роблять його популярним серед розробників та
адміністраторів баз даних. Однією з ключових особливостей PostgreSQL є
підтримка складних типів даних, таких як JSON, XML, географічні дані, а також
можливість визначення власних користувацьких типів.
PostgreSQL також має розширену підтримку для транзакцій та управління
багатокористувацькістю. Вона підтримує ACID (atomicity, consistency, isolation,
durability) властивості транзакцій, що гарантує цілісність даних під час їх
обробки. Крім того, PostgreSQL може працювати з різними методами
аутентифікації та авторизації користувачів, включаючи ролі та дозволи.
Ще однією важливою особливістю PostgreSQL є його розширюваність та
масштабованість. Він має велику кількість розширень та модулів, які дозволяють
розробникам розширювати його функціонал за потреби. Також PostgreSQL
підтримує реплікацію та шардування, що дозволяє розподіляти дані на різних
серверах та забезпечувати високу доступність та масштабованість системи.
Крім того, PostgreSQL має відкритий вихідний код та широку спільноту
розробників, яка надає підтримку та розвиток системи. Це робить його ідеальним
вибором для великих та критичних за даними проектів, які вимагають надійності,
стабільності та високої продуктивності.
53
Узагальнюючи, PostgreSQL – це потужна та розширювана об'єктно-
реляційна система керування базами даних, яка володіє розширеними
можливостями, високою надійністю та масштабованістю. Вона є популярним
вибором серед розробників та адміністраторів баз даних і забезпечує високу
якість та продуктивність для різноманітних проектів.
MongoDB – це документно-орієнтована система керування базами даних
(NoSQL), яка використовує JSON-подібні документи для зберігання даних. Вона
набула великої популярності завдяки своїй гнучкості, масштабованості та
простоті використання.
Однією з ключових особливостей MongoDB є модель даних на основі
документів. Вона дозволяє зберігати структуровані дані у вигляді JSON-подібних
документів, що робить її дуже зручною для розробки веб-додатків, де структура
даних може змінюватися з часом. Кожен документ може містити будь-яку
кількість полів та вкладених об'єктів, що дозволяє зберігати складні дані в
одному місці.
MongoDB також відома своєю гнучкістю в роботі з даними. Вона підтримує
динамічні схеми, що означає, що ви можете легко додавати нові поля до
документів без необхідності міграції бази даних. Це робить MongoDB ідеальним
вибором для розробки додатків, де структура даних може змінюватися в ході
розвитку проєкту.
Крім того, MongoDB має вбудовану підтримку для реплікації та
шардування, що дозволяє розподіляти дані на різних серверах та забезпечувати
високу доступність та масштабованість системи. Вона також має потужний
механізм запитів, який дозволяє виконувати різноманітні запити до бази даних,
включаючи запити за критеріями, агрегації, текстовий пошук тощо.
MongoDB є відкритою та безкоштовною системою керування базами
даних, яка має велику спільноту розробників та активно розвивається. Вона
підтримується широким колом інструментів та бібліотек для різних мов
54
програмування, що робить її доступною та зручною для використання у багатьох
проектах.
Узагальнюючи, MongoDB – це потужна та гнучка система керування
базами даних, яка надає розробникам зручний та ефективний спосіб збереження
та управління даними. Вона є популярним вибором для веб-додатків, де потрібно
працювати зі складними та змінюваними структурами даних.
Redis – це ключ-значення база даних (Key-Value Database), яка відома
своєю швидкістю та простотою використання. Вона призначена для швидкого
зберігання та отримання даних у вигляді ключів та значень і зазвичай
використовується для кешування, сесійних даних, черг повідомлень, геолокації
та інших варіантів додатків, які вимагають швидкого доступу до даних.
Однією з ключових особливостей Redis є його швидкість. Вона працює у
пам'яті, що дозволяє швидко зберігати та отримувати дані, оскільки доступ до
них здійснюється безпосередньо у пам'яті комп'ютера. Це робить Redis ідеальним
для додатків, які потребують максимальної продуктивності та низької затримки.
Redis також відомий своєю простотою використання. Він має простий API
з декількома командами, які дозволяють здійснювати різноманітні операції з
даними, такі як додавання, оновлення, вилучення, отримання значень ключів
тощо. Це робить його легким у вивченні та використанні навіть для початківців.
Ще однією важливою особливістю Redis є його розширюваність та
гнучкість. Він підтримує різні типи даних, включаючи рядки, хеші, списки,
набори та множини, що дозволяє зберігати різноманітні дані у вигляді ключів та
значень. Крім того, Redis має вбудовану підтримку для розподіленого кешування,
реплікації та публікації-підписки, що робить його підходящим для використання
у великих та розподілених системах.
Узагальнюючи, Redis – це швидка, проста та гнучка ключ-значення база
даних, яка надає розробникам зручний та ефективний спосіб збереження та
55
отримання даних. Вона є популярним вибором для різноманітних додатків, які
вимагають швидкого доступу до даних та максимальної продуктивності.
Для розробки сайту-візитівки було вирішено використовувати Python, Flask
та SQLite, що обгрунтовано їхньою простотою використання, швидкістю
розробки та ефективністю. Python є дуже популярною мовою програмування з
чистим синтаксисом, що сприяє швидкому створенню коду. Flask, який є легким
та гнучким веб-фреймворком для Python, надає зручні інструменти для створення
веб-додатків без зайвого навантаження. SQLite, яка є легкою та вбудовуваною
базою даних, ідеально підходить для малих та середніх проектів, забезпечуючи
швидку розгортку та простоту управління даними. Такий стек технологій
дозволить швидко створити та розгорнути веб-ресурс, забезпечуючи при цьому
ефективну роботу та надійність.
Висновки до розділу 1
У цьому розділі:
Проведено аналіз предметної області.
Визначено постановку задачі дослідження.
Аналіз і вибір засобів розробки сайту-візитівки магазину текстилю.
Для розробки сайту-візитівки було вирішено використовувати Python, Flask
та SQLite.
56
2 ПРОЄКТНА ЧАСТИНА
2.1 Розробка програмного рішення
У ході написання кваліфікаційної роботи бакалавра розроблено діаграми
використання (рис. 2.1-2.4).
Рисунок 2.1 – Діаграма послідовності
57
Рисунок 2.2 – Діаграма діяльності
58
Рисунок 2.3 – Діаграма компонентів
Рисунок 2.4 – Схема бази даних (1 сутність)
from flask import Flask, render_template, request, redirect, url_for
import sqlite3
Лістинг 2.1 - Імпорт модулів
Розглянемо створення веб-сайту за допомогою Flask, і в цьому фрагменті
коду імпортуємо необхідні бібліотеки для реалізації основних функцій власного
додатку.
Зразу імпортуємо модулі з Flask:
Flask для створення екземпляру сайту.
59
render_template для рендерингу HTML-шаблонів, що дозволяє відображати
сторінки веб-сайту.
request для обробки даних, які надходять від користувача через HTTP-
запити (наприклад, форми).
redirect та url_for для перенаправлення користувача на інші сторінки
додатку.
Також імпортуємо sqlite3 для роботи з базою даних SQLite, що забезпечує
зберігання та управління даними сайту. За допомогою цих інструментів ми
зможемо створювати, читати, оновлювати та видаляти записи у базі даних, а
також взаємодіяти з ними через веб-інтерфейс.
def init_db():
conn = sqlite3.connect('textile_shop.db')
cursor = conn.cursor()
cursor.execute('''
CREATE TABLE IF NOT EXISTS products (
id INTEGER PRIMARY KEY AUTOINCREMENT,
name TEXT NOT NULL,
description TEXT NOT NULL,
price REAL NOT NULL
)
''')
conn.commit()
conn.close()
Лістинг 2.2 – Ініціалізація БД
Наразі створюємо функцію init_db(), яка ініціалізує базу даних для веб-
сайту, що обслуговує текстильний магазин. Ось що виконує цей код:
Відкриваємо з'єднання з базою даних під назвою textile_shop.db за
допомогою sqlite3.connect.
Створюємо курсор за допомогою conn.cursor(). Курсор використовується
для виконання SQL-запитів до бази даних.
Виконуємо SQL-запит CREATE TABLE IF NOT EXISTS products (...), який
створює таблицю products, якщо вона ще не існує. Таблиця містить наступні поля:
60
id: ціле число, первинний ключ, автоматично збільшується.
name: текстове поле для назви продукту, обов'язкове для заповнення.
description: текстове поле для опису продукту, обов'язкове для заповнення.
price: поле з плаваючою комою для зберігання ціни продукту, обов'язкове
для заповнення.
За допомогою conn.commit() зберігаємо зміни в базі даних.
Закриваємо з'єднання з базою даних, використовуючи conn.close().
Ця функція гарантує, що таблиця products існує в базі даних і готова до
використання для зберігання інформації про продукти текстильного магазину.
def seed_db():
conn = sqlite3.connect('textile_shop.db')
cursor = conn.cursor()
cursor.execute("INSERT INTO products (name, description, price)
VALUES ('Бавовняна тканина', 'Тканина високої якості з бавовни',
10.99)")
cursor.execute("INSERT INTO products (name, description, price)
VALUES ('Шовкова тканина', 'Преміум тканина з шовку', 29.99)")
cursor.execute("INSERT INTO products (name, description, price)
VALUES ('Вовняна тканина', 'Тепла тканина з вовни', 15.99)")
conn.commit()
conn.close()
Лістинг 2.3 – Наповнення БД
Потім додаємо функцію seed_db(), яка заповнює нашу базу даних
textile_shop.db початковими даними. Це важливо для тестування та демонстрації
роботи додатку з реальними даними. Ось що виконує цей код:
Відкриваємо з'єднання з базою даних textile_shop.db за допомогою
sqlite3.connect.
Створюємо курсор за допомогою conn.cursor(). Курсор використовується
для виконання SQL-запитів до бази даних.
Виконуємо три SQL-запити INSERT INTO products (name, description, price)
VALUES (...), щоб додати три продукти до таблиці products:
'Бавовняна тканина': високоякісна тканина з бавовни, ціна 10.99.
61
'Шовкова тканина': преміум тканина з шовку, ціна 29.99.
'Вовняна тканина': тепла тканина з вовни, ціна 15.99.
За допомогою conn.commit() зберігаємо зміни в базі даних.
Закриваємо з'єднання з базою даних, використовуючи conn.close().
Ця функція забезпечує наявність початкових записів у таблиці products, що
дозволяє працювати з цими даними при тестуванні або демонстрації роботи
нашого веб-сайту.
@app.route('/')
def index():
conn = sqlite3.connect('textile_shop.db')
cursor = conn.cursor()
cursor.execute("SELECT * FROM products")
products = cursor.fetchall()
conn.close()
return render_template('index.html', products=products)
Лістинг 2.4 – Головна сторінка
Тепер створюємо маршрут для головної сторінки веб-сайту. Функція
index() виконує наступне: відкриває з'єднання з базою даних textile_shop.db за
допомогою sqlite3.connect, створює курсор для виконання SQL-запитів, виконує
SQL-запит SELECT * FROM products для отримання всіх продуктів з таблиці
products, зберігає результати запиту у змінну products за допомогою
cursor.fetchall(), закриває з'єднання з базою даних за допомогою conn.close(),
повертає згенерований HTML-шаблон index.html, передаючи йому список
продуктів через параметр products.
@app.route('/products')
def products():
conn = sqlite3.connect('textile_shop.db')
cursor = conn.cursor()
cursor.execute("SELECT * FROM products")
products = cursor.fetchall()
conn.close()
return render_template('products.html', products=products)
Лістинг 2.5 – Сторінка «Продукти»
62
Створюємо маршрут для сторінки продуктів нашого веб-додатку. Функція
products() виконує наступне: відкриває з'єднання з базою даних textile_shop.db за
допомогою sqlite3.connect, створює курсор для виконання SQL-запитів, виконує
SQL-запит SELECT * FROM products для отримання всіх продуктів з таблиці
products, зберігає результати запиту у змінну products за допомогою
cursor.fetchall(), закриває з'єднання з базою даних за допомогою conn.close(),
повертає згенерований HTML-шаблон products.html, передаючи йому список
продуктів через параметр products.
@app.route('/contact', methods=['GET', 'POST'])
def contact():
if request.method == 'POST':
# Handle form submission (this is a placeholder)
return redirect(url_for('index'))
return render_template('contact.html')
Лістинг 2.6 – Сторінка «Контакти»
Створюємо маршрут для сторінки "Contact" веб-сайту з обробкою як GET,
так і POST запитів. Функція contact() виконує наступне: перевіряє, чи метод
запиту є POST, і якщо так, то обробляє відправлення форми (це місце призначене
для обробки форми, поки що як заглушка) і перенаправляє користувача на
головну сторінку за допомогою redirect(url_for('index')); якщо метод запиту є
GET, повертає HTML-шаблон contact.html для відображення форми зв'язку.
if __name__ == '__main__':
init_db()
#seed_db() # Comment this out after the first run to avoid
duplicating data
app.run(debug=True)
Лістинг 2.7 – Логіка запуску сайту
63
Додаємо основний блок для запуску веб-сайту. Цей блок виконує наступне:
перевіряє, чи запускається скрипт напряму, викликає функцію init_db() для
ініціалізації бази даних, закоментовано виклик функції seed_db(), щоб уникнути
дублювання даних після першого запуску (можна розкоментувати при першому
запуску для додавання початкових даних), запускає додаток у режимі
відлагодження за допомогою app.run(debug=True), що дозволяє автоматично
перезапускати додаток при внесенні змін у код та відображати детальну
інформацію про помилки.
2.2 Тестування сайту-візитівки магазину текстилю
Розглянемо головну сторінку сайту-візитівки магазину текстилю (рис. 2.5).
Рисунок 2.5 – Головна сторінка сайту-візитівки магазину текстилю
Зверху можемо побачити головне навігаційне меню, яке відображає
існуючу структуру сайту, а саме сторінки «Головна», «Продукція» та
«Контакти», а також забезпечує користувачу можливість зручної навігації між
ними.
64
Нижче розташовано так зване hero-зображення, яке складається з фонового
зображення тканини, а також двох написів на ній. Далі розташована секція «Про
нас», і нижче можна побачити секцію «Рекомендовані товари».
Рекомендовані товари складаються з віджетів, які розташовані у формі
сітки та містять назву товара, опис, а також ціну.
Рисунок 2.6 – Головна сторінка
Перемотуючи сторінку нижче, можемо побачити також секцію із відгуками
клієнтів.
Далі, скориставшись головним меню, перейдемо до сторінки «Продукція».
65
Рисунок 2.7 – Сторінка «Продукти»
Тут можемо побачити, що перед головним меню розташовано перелік
продукції із зазначеними назвою, описом та ціною.
Рисунок 2.8 – Сторінка «Контакти»
На сторінці «Контакти» є форма для зворотного зв’язку, яка має наступні
поля: ім’я, електронна пошта та повідомлення, а також кнопку для відправлення.
Відправимо повідомлення, скориставшись формою:
66
Рисунок 2.9 – Форма зворотного зв’язку
Натиснувши «Відправити», повідомлення було відправлено та збережно у
базі даних, а користувач був знову перенаправлений на головну сторінку веб-
сайту.
Таким чином, було спроєктовано, розроблено і протестовано веб-сайт для
салону текстилю, який надає користувачу основну інформацію про підприємство,
інформацію про товари, а також можливість зворотного зв’язку.
Висновки до розділу 2
У цьому розділі розглянуто:
Розробку програмного рішення.
Тестування сайту-візитівки магазину текстилю.
67
ВИСНОВКИ
Тема розробки сайту візитки для магазину текстилю є вкрай важливою в
сучасних умовах, коли Інтернет став невід'ємною частиною бізнес-середовища.
У світі, де значна частина споживачів здійснює покупки та шукає інформацію про
продукти онлайн, наявність професійного та функціонального веб-сайту є
необхідністю для будь-якого підприємства, включаючи малий бізнес. Веб-сайт
візитка виступає в ролі віртуальної вітрини, де потенційні клієнти можуть знайти
всю необхідну інформацію про компанію, її товари та послуги.
Для магазину текстилю, веб-сайт є ключовим інструментом для залучення
нових клієнтів та підтримки постійних покупців. Завдяки добре структурованому
та привабливому сайту, магазин може ефективно демонструвати свої продукти,
інформувати про нові надходження та акції, а також створювати позитивний
імідж бренду. Це особливо важливо в умовах високої конкуренції на ринку
текстильних виробів, де якісний онлайн-присутність може стати вирішальним
фактором для успіху бізнесу.
Крім того, розробка веб-сайтів для малого бізнесу має велике значення
через обмеженість ресурсів, з якими стикаються такі підприємства. Традиційні
методи реклами можуть бути занадто дорогими, тоді як веб-сайт є відносно
дешевим та ефективним способом просування товарів і послуг. Сайт забезпечує
цілодобовий доступ до інформації про магазин, що значно розширює можливості
для взаємодії з клієнтами та підвищує рівень їхнього обслуговування.
Важливість теми також полягає у впровадженні сучасних технологій та
методів розробки, що дозволяють створювати не лише привабливі, але й
функціональні веб-сайти. Сучасні веб-технології надають можливість інтеграції
сайту з соціальними мережами, налаштування онлайн-замовлень та забезпечення
зворотного зв'язку, що сприяє залученню та утриманню клієнтів. Таким чином,
68
веб-сайт стає багатофункціональним інструментом, який допомагає малому
бізнесу розвиватися та адаптуватися до вимог ринку.
У ході виконання кваліфікаційної роботи бакалавра було досягнуто кілька
ключових наукових результатів.
По-перше, проведено аналіз сучасних методів та інструментів розробки
веб-сайтів для малого бізнесу, зокрема для магазину текстилю. На основі цього
аналізу були визначені оптимальні підходи до створення веб-сайту візитки, які
забезпечують максимальну ефективність та зручність для користувачів.
По-друге, розроблено та впроваджено практичний веб-сайт візитку для
магазину текстилю, який включає всі необхідні функції для успішної взаємодії з
клієнтами. Це дозволило значно покращити маркетингові можливості
підприємства, збільшити охоплення цільової аудиторії та підвищити рівень
продажів.
Техніко-економічні показники розробленого веб-сайту включають
зниження витрат на традиційні методи реклами та маркетингу, а також
підвищення ефективності комунікації з клієнтами. Веб-сайт забезпечує
цілодобовий доступ до інформації про товари та послуги магазину, що сприяє
збільшенню кількості замовлень та підвищенню рівня задоволеності клієнтів.
Крім того, впровадження онлайн-замовлень та інтеграція з соціальними
мережами дозволили значно розширити канали збуту та залучити нових клієнтів.
Отже, тема розробки сайту-візитівки для магазину текстилю є надзвичайно
актуальною та важливою, оскільки вона сприяє підвищенню
конкурентоспроможності бізнесу, розширенню ринків збуту, покращенню
обслуговування клієнтів та загальному розвитку підприємства. Вона має значний
практичний потенціал, який може бути використаний для успішної реалізації
бізнес-цілей в умовах сучасної цифрової економіки.
69
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Абельс, Е., М. Уайт і К. Хан. «Процес проектування веб-сайтів,
орієнтований на користувача». Інтернет-дослідження: Застосування та
політика електронних мереж. 8(1): 39-48.
2. Беллман, С., Г. Лозе та Дж. Джонсон. «Прогнози онлайн-
купівельної поведінки». Повідомлення ACM 42(12): 32-38.
3. Беван, Н. "Проблеми зручності використання в дизайні веб-
сайту". УПА '98, Вашингтон.
4. Брайман, А. і Д. Крамер. Кількісний аналіз даних для соціальних
вчених. Лондон, Рутледж.
5. Дюма, Ж. і Дж. Редіш. Практичний посібник з тестування
зручності використання. Norwood, Ablex Publishing Corporation.
6. Eighmey, J. and L. McCord. «Додавання цінності в епоху
інформації: користувачі та задоволення від сайтів у Всесвітній павутині».
Журнал бізнес-досліджень, том 41: 187-194.
7. Фішер, Дж. Л., А. Крейг і Дж. Бентлі. «Аналіз оцінок користувачів
веб-сайтів». 11-а Австралійська конференція з інформаційних систем,
Брісбен, Квінслендський технологічний університет. (опубліковано на CD
ROM)
8. Гефен, Д. і Д. Штрауб. «Відносна важливість сприйнятої простоти
використання для впровадження ІС: дослідження впровадження електронної
комерції». Журнал Асоціації інформаційних систем 1(8): 1-30.
9. Hackos, J. and J. Redish. Аналіз користувачів і завдань для
розробки інтерфейсу. Нью-Йорк, John Wiley and Sons Inc.
10. Кіраковскі, Дж., Н. Кларідж і Р. Вайтхенд. «Фактори та принципи,
що впливають на зручність використання чотирьох сайтів електронної
70
комерції». 4-та конференція з людських факторів і Інтернету, Баскінг-Рідж,
штат Нью-Джерсі, США, опубліковано в електронному вигляді.
11. Ледерер, А., Д. Мопін, М. Сена та Ю. Чжуан. «Модель сприйняття
технологій і Всесвітня мережа». Системи підтримки прийняття рішень 29:
269-282.
12. Мьоллер, Е. «Розробка виграшного (і корисного) веб-сайту».
Crossroads in Communication, IPCC 97, Солт-Лейк-Сіті, Юта, США, IEEE
Professional Communication Society.
13. Мерфі, Дж. «Користувачі веб-сайту та пошук: аналіз поведінки
відвідувачів веб-сайту при натисканні». Cornell Hotel and Restaurant
Administration 40(2): 84-97.
14. Нел, Д., Р. ван Нікерк, Б. Дж. і Т. Девіс. «Плити за течією: веб-
сайти та залучення клієнтів». Дослідження Інтернету: Застосування та
політика електронних мереж 9(2): 109-116.
15. Нільсен, Дж. «Вказівки щодо інтерфейсу користувача для
Інтернету». Повідомлення ACM 42(1): 65-73.
16. Рейнольдс, Дж. «Роздрібна торгівля в комп’ютерних
середовищах: електронна комерція в Європі». Міжнародний журнал
управління роздрібною торгівлею та дистрибуцією, 25(1): 29-37.
17. Салам, А., Х. Рао та К. Пегелс. «Вміст корпоративних веб-
сторінок як медіа реклами». Комунікації, АСМ 41(3): 76-77.
18. Shang, P. and G. Dran. «Задовільні та незадоволені: двофакторна
модель дизайну та оцінки веб-сайту». Журнал Американського товариства
інформаційних наук 51(14): 1253-1268.
19. Шнейдерман Б. «Універсальне використання». Повідомлення
ACM 43(5): 85-91.
71
20. Сілкер, К. і Л. Гурак. «Технічні комунікації в кіберпросторі: звіт
про якісне дослідження». Журнал Товариства технічного зв'язку, 43(3): 357-
368.
21. Симеон, Р. «Оцінка вітчизняних і міжнародних стратегій веб-
сайтів». Інтернет-дослідження: Застосування та політика електронних мереж
9(4): 297-308.
72
ДОДАТОК А
Затверджую
Зав. кафедри КНСА,
_________ Юрій ТРИУС
«____»____________2025 р.
САЙТ-ВІЗИТІВКА МАГАЗИНУ ТЕКСТИЛЮ
Специфікація
482.ЧДТУ. 52347-01
Листів 2
Розробник ____________________ Гузьман Д.В.
Керівник ____________________ Оксамитна Л.П.
Черкаси – 2025
73
482.ЧДТУ. 52347-01
Позначення Найменування Примітка
Документація
482.ЧДТУ. 52347-01 34 01 Інструкція користувача
482.ЧДТУ. 52347-01 12 01 Лістинг коду програми
74
ДОДАТОК Б
САЙТ-ВІЗИТІВКА МАГАЗИНУ ТЕКСТИЛЮ
ІНСТРУКЦІЯ КОРИСТУВАЧА
482.ЧДТУ. 52347-01 34 01
Листів 8
Розробник _____________ Гузьман Д.В.
Черкаси – 2025
75
При відкритті користувачем веб-сайту інформаційної системи в браузері
відображається головна сторінка з анімованими картинками і назвою компанії та
двома основними кнопками “Новини” і “Замовити” (рисунок Б.1). У верхній
частині сторінки користувач побачить головне меню, яке включає дві сторінки з
випадаючим списком категорій, кнопку зв’язку та кошик з відображенням суми
вартості вибраних пристроїв у гривнях. Також тут присутній логотип з фірмовою
назвою веб-сайту.
Б.1 Головна сторінка веб-сайту
Рисунок Б.1 – Головна сторінка
Відкриваємо головну сторінку веб-сайту.
Зверху можемо побачити головне навігаційне меню, яке відображає
існуючу структуру сайту, а саме сторінки «Головна», «Продукція» та
«Контакти», а також забезпечує користувачу можливість зручної навігації між
ними.
Нижче розташовано так зване hero-зображення, яке складається з фонового
зображення тканини, а також двох написів на ній. Далі розташована секція «Про
нас», і нижче можна побачити секцію «Рекомендовані товари».
76
Рекомендовані товари складаються з віджетів, які розташовані у формі
сітки та містять назву товара, опис, а також ціну.
Рисунок Б.2 – Головна сторінка
Перемотуючи сторінку нижче, можемо побачити також секцію із відгуками
клієнтів.
Далі, скориставшись головним меню, перейдемо до сторінки «Продукція».
Рисунок Б.3 – Сторінка «Продукти»
Тут можемо побачити, що перед головним меню розташовано перелік
продукції із зазначеними назвою, описом та ціною.
77
Рисунок Б.4 – Сторінка «Контакти»
На сторінці «Контакти» є форма для зворотнього зв’язку, яка має наступні
поля: ім’я, електронна пошта та повідомлення, а також кнопку для відправлення.
Відправимо повідомлення, скориставшись формою:
Рисунок Б.5 – Форма зворотного зв’язку
78
Натиснувши «Відправити», повідомлення було відправлено та збережно у
базі даних, а користувач був знову перенаправлений на головну сторінку веб-
сайту.
Таким чином, було спроєктовано, розроблено і протестовано веб-сайт для
салону текстилю, який надає користувачу основну інформацію про підприємство,
інформацію про товари, а також можливість зворотного зв’язку.
79
ДОДАТОК В
САЙТ-ВІЗИТІВКА МАГАЗИНУ ТЕКСТИЛЮ
Лістинг коду програми
482. ЧДТУ. 52347-01 12 01
Листів 3
Розробник _____________ Гузьман Д.В.
Черкаси – 2025
80
Фрагмент коду для сторінки “Пристрої”
from flask import Flask, render_template, request, redirect, url_for
import sqlite3
app = Flask(__name__)
# Initialize the database
def init_db():
conn = sqlite3.connect('textile_shop.db')
cursor = conn.cursor()
cursor.execute('''
CREATE TABLE IF NOT EXISTS products (
id INTEGER PRIMARY KEY AUTOINCREMENT,
name TEXT NOT NULL,
description TEXT NOT NULL,
price REAL NOT NULL
)
''')
conn.commit()
conn.close()
# Sample data for the database
def seed_db():
conn = sqlite3.connect('textile_shop.db')
cursor = conn.cursor()
cursor.execute("INSERT INTO products (name, description, price)
VALUES ('Бавовняна тканина', 'Тканина високої якості з бавовни',
10.99)")
cursor.execute("INSERT INTO products (name, description, price)
VALUES ('Шовкова тканина', 'Преміум тканина з шовку', 29.99)")
cursor.execute("INSERT INTO products (name, description, price)
VALUES ('Вовняна тканина', 'Тепла тканина з вовни', 15.99)")
conn.commit()
conn.close()
@app.route('/')
def index():
conn = sqlite3.connect('textile_shop.db')
cursor = conn.cursor()
cursor.execute("SELECT * FROM products")
products = cursor.fetchall()
conn.close()
return render_template('index.html', products=products)
@app.route('/products')
def products():
conn = sqlite3.connect('textile_shop.db')
cursor = conn.cursor()
cursor.execute("SELECT * FROM products")
products = cursor.fetchall()
conn.close()
81
return render_template('products.html', products=products)
@app.route('/contact', methods=['GET', 'POST'])
def contact():
if request.method == 'POST':
# Handle form submission (this is a placeholder)
return redirect(url_for('index'))
return render_template('contact.html')
if __name__ == '__main__':
init_db()
#seed_db() # Comment this out after the first run to avoid
duplicating data
app.run(debug=True)
Лістинг В.1 – Код програми