Веб-сервер і база даних

Опрацювати теоретичний матеріал:

Веб-сервер — це комп’ютер або програмне забезпечення, яке приймає запити від користувачів і повертає веб-сторінки у відповідь.
Коли ви вводите адресу сайту в браузер, саме веб-сервер знаходить потрібний файл (HTML, CSS, JavaScript) і надсилає вам.

Основні функції веб-сервера:

• зберігання веб-файлів;

• обробка HTTP-запитів і надсилання HTTP-відповідей;

• запуск серверних програм (наприклад, PHP-скриптів);

• забезпечення безпеки (HTTPS).

Приклади веб-серверів:
Apache, Nginx, Microsoft IIS.

Як працює веб-сервер?

1. Користувач у браузері вводить адресу (URL).

2. Браузер надсилає HTTP-запит на сервер.

3. Сервер отримує запит і перевіряє, які дані потрібно повернути.

4. Якщо треба просто повернути файл — повертає його.

5. Якщо потрібні дані з бази даних — запускає серверний код.

6. Сервер формує HTML-сторінку або JSON і відправляє назад користувачу.

База даних — це організоване сховище інформації, з яким працює веб-сайт.

Приклади даних:

• акаунти користувачів;

• товари інтернет-магазину;

• пости в соцмережах;

• коментарі, повідомлення, налаштування.

Популярні системи керування базами даних (СКБД):

• MySQL — найпоширеніша в веб-розробці;

• PostgreSQL — потужна, підтримує складні запити;

• SQLite — легка, для мобільних і невеликих проєктів.

SQL (Structured Query Language) — мова, за допомогою якої web-додатки працюють з базою даних.

Основні команди SQL:

• SELECT — отримати дані;

• INSERT — додати нові дані;

• UPDATE — змінити дані;

• DELETE — видалити дані;

• CREATE — створити таблицю.

Сервер і база даних працюють разом:

1. Користувач робить дію (наприклад, входить у свій аккаунт).

2. Сервер отримує запит і звертається до бази:
   – “Знайди користувача з таким логіном”.

3. База даних повертає результат.

4. Сервер аналізує дані й формує відповідь.

5. Користувач бачить результат у браузері.

Щоб сервер міг звертатися до бази даних, використовують спеціальні мови:

• PHP

• Python (Django/Flask)

• JavaScript (Node.js)

• Java (Spring)

Ці мови дозволяють писати бекенд веб-сайту — ту частину, яка працює “за лаштунками”.

У веб-розробці сайт або веб-застосунок умовно поділяють на дві головні частини:

1. Фронтенд (Frontend)

Фронтенд — це видима частина сайту, з якою взаємодіє користувач.
Усе, що ви бачите в браузері — текст, кнопки, меню, картинки, анімації — це фронтенд.

Чим займається фронтенд?

• Створює зовнішній вигляд сторінки.

• Реалізує поведінку елементів (натискання кнопок, відкриття меню тощо).

• Забезпечує зручність і швидкість роботи інтерфейсу.

Мови та технології фронтенду:

• HTML — структура сторінки.

• CSS — оформлення та дизайн.

• JavaScript — логіка та взаємодія користувача зі сторінкою.

Фреймворки та бібліотеки:

• React, Vue, Angular — допомагають створювати складні інтерфейси.

Приклади того, що робить фронтенд:

• Кнопка “Вхід” змінює колір при наведенні.

• Відкривається меню при натисканні.

• Динамічно підвантажується список товарів.

2. Бекенд (Backend)

Бекенд — це невидима частина сайту, яка працює “за лаштунками”.
Він відповідає за логіку роботи сайту, обробку даних та взаємодію з базою даних.

Чим займається бекенд?

• Обробляє дані від користувача (наприклад, логін і пароль).

• Звертається до бази даних та зберігає інформацію.

• Виконує розрахунки, перевірки, обробляє запити.

• Формує відповіді для фронтенду.

Мови бекенду:

• PHP

• Python (Django, Flask)

• JavaScript (Node.js)

• Java (Spring)

• C# (.NET)

Приклади того, що робить бекенд:

• Перевіряє логін і пароль користувача.

• Зберігає новий коментар у базу даних.

• Відправляє фронтенду список товарів.

• Обчислює підсумкову вартість у кошику.

3. Як фронтенд і бекенд працюють разом?

1. Користувач натискає кнопку “Увійти”.

2. Фронтенд надсилає дані (логін і пароль) на сервер.

3. Бекенд приймає дані, перевіряє їх у базі даних.

4. Бекенд повертає результат:

   • “Успішний вхід”, або

   • “Неправильний пароль”.

5. Фронтенд відображає відповідне повідомлення.

Це наче ресторан:

• фронтенд — офіціант, який взаємодіє з клієнтом;

• бекенд — кухня, де відбувається вся “магія”;

• база даних — холодильник/склад із продуктами.

Опрацювати відео-урок:

Виконайте інтерактивну вправу.

Скрін виконаної вправи прикріпіть до цього завдання.

Поясніть, хто такий Full-stack розробник, у чому полягає його роль у веб-розробці?

Відповідь надрукуйте у поле нижче.