Модуль 6

URLs та маршрутизація запитів

Ось твій урок у стилі CS50! 🚀

🎓 Урок: URLs та Маршрутизація Запитів

(Або: Як інтернет знає, куди саме ви хочете потрапити?)

1. 🔥 Вступ: Проблема та мотивація

Уявіть, що ви заходите у величезний бізнес-центр. Це хмарочос на 100 поверхів, де сидять тисячі компаній: від кав’ярень до банків. Ви підходите до охоронця на вході і просто кажете:

"Я хочу поговорити."

Питання до вас: Що зробить охоронець? Швидше за все, він подивиться на вас як на божевільного і запитає: "З ким? У яку компанію? На яку тему?"

Без конкретної адреси та уточнень ваша вимога "поговорити" не має сенсу. Сервер — це той самий бізнес-центр. Він може видати вам картинку котика, переказати гроші або показати прогноз погоди. Але як він дізнається, що саме вам потрібно прямо зараз?

Ось тут на сцену виходять URLs (адреси) та Маршрутизація (Routing).

Без цього: 1. Ваш браузер не знав би, куди стукати. 2. Сервер не знав би, яку функцію коду запускати у відповідь.

Сьогодні ми розберемося, як перетворити хаотичний потік запитів на чітко організовану систему. Поїхали!

2. 🧠 Теоретична база (Що там "під капотом"?)

Давайте розберемо URL не як "посилання, яке я копіюю", а як інструкцію для кур'єра.

Візьмемо типовий URL: https://mysite.com/store/products?id=42

Анатомія URL (Що треба знати залізно):

  1. https:// (Схема/Протокол): Це мова спілкування. Як ми вітаємось? Рукостисканням чи поклоном? (Зазвичай це HTTP або HTTPS).
  2. mysite.com (Хост/Домен): Це адреса будівлі. "Бізнес-центр 'Гулівер'".
  3. /store/products (Шлях або Path): Це найважливіше для нас сьогодні. Це номер кабінету. Ми йдемо в відділ "Магазин", підвідділ "Продукти".
  4. ?id=42 (Query Parameters): Це записка в руці. Ми зайшли в кабінет "Продукти", але нам не потрібні всі продукти. Нам потрібен конкретно той, що під номером 42.

Що таке Маршрутизація (Routing)?

Це ресепшн. Коли запит прилітає на сервер, спеціальний механізм (Роутер) дивиться на Шлях (Path) і вирішує, яку частину коду запустити.

Інтуїтивне розуміння: Роутер — це величезна конструкція if / else або switch / case. * Якщо прийшли на /home -> покажи головну. * Якщо прийшли на /login -> запусти процедуру входу. * Якщо адреса невідома -> кричи "404 Not Found!".

3. 🧪 Приклади (Код у дії)

Уявімо, що ми пишемо веб-сервер на Python (схоже на Flask/Django) або JS (Express), логіка скрізь однакова.

Приклад 1: Найпростіший маршрут

Ви пишете код:

@app.route("/")
def index():
    return "Вітаю на головній сторінці!"

Питання: Що ви побачите, якщо перейдете просто на mysite.com? Відповідь: Текст "Вітаю на головній сторінці!".

Чому: Символ / означає "корінь" сайту. Роутер побачив порожній шлях і викликав функцію index().

Приклад 2: Різні "кімнати"

@app.route("/about")
def about():
    return "Ми — крута компанія."

@app.route("/contact")
def contact():
    return "Пишіть нам на email."

Тут все просто. Ввели /about — спрацювала функція about. Ввели /contact — спрацювала contact. Це як різні двері в коридорі.

Приклад 3: Динамічні маршрути (Це цікавіше!)

Уявіть, що у вас інтернет-магазин з 1 000 000 товарів. Чи будете ви писати 1 000 000 маршрутів вручну? @app.route("/product/1"), @app.route("/product/2")... ?

Звісно, ні! Ви (як розумний програміст) створите шаблон.

@app.route("/user/<username>")
def show_profile(username):
    return f"Привіт, {username}! Це твій профіль."

Питання на засипку: Що буде, якщо я перейду за адресою /user/david? А що, якщо /user/admin?

Пояснення: Роутер розуміє, що <username> — це змінна. Він "вирізає" слово з URL і передає його у вашу функцію як аргумент. Одна функція обслуговує мільярди користувачів! Це магія абстракції.

4. 🛠 Практична частина

Час забруднити руки кодом (або псевдокодом). Уявіть, що ви будуєте бекенд для доставки піци.

Завдання 1: База Напишіть маршрут /menu, який повертає список піц (текстом "Маргарита, Пепероні").

Завдання 2: Конкретика Напишіть динамічний маршрут /pizza/<name>, який вітає користувача фразою: "О, ви обрали піцу [назва]! Чудовий вибір."

Завдання 3: Арифметика в URL Створіть маршрут /order/<quantity>, де quantity — це число. Функція має повернути повідомлення: "Замовлено піц: [число]. До оплати: [число * 100] грн". (Підказка: не забудьте, що з URL дані часто приходять як рядки, їх треба перетворити в число!)

Завдання 4: Пошук (Query Parameters) У вас є маршрут /search. Користувач заходить на /search?q=cheese. Як отримати доступ до слова cheese? (Подумайте логічно: це частина шляху чи параметр запиту?)

Завдання 5: "А що, якщо..." Що має статися, якщо користувач введе /pizza/banana? (Технічно маршрут спрацює, але чи існує така піца? Як би ви обробили цю ситуацію в коді?)

Міні-кейс: Ви пишете блог. Як краще назвати маршрут для конкретної статті? а) /getArticle?id=55 б) /blog/how-to-code в) /55 Обґрунтуйте свій вибір.

5. 💡 Мислення як у розробника

Як відрізнити новачка від профі, дивлячись на їхні URL?

1. "Чисті" URL (Clean URLs)

  • Новачок: mysite.com/index.php?page=about&lang=ua
  • Профі: mysite.com/ua/about
  • Чому: Профі думає про людей і про пошуковики (SEO). URL має читатися як речення.

2. Принцип REST (поки інтуїтивно)

Розробники домовилися використовувати іменники, а не дієслова в шляхах. * Погано: /getAllUsers, /createNewUser, /deleteUser * Добре: /users (а дія визначається методом запиту — GET, POST, DELETE, про які ми поговоримо пізніше).

3. Порядок має значення

У багатьох системах (наприклад, Express.js або React Router) порядок написання маршрутів важливий. Якщо ви напишете: 1. @app.route("/<slug>") (ловити все) 2. @app.route("/about") (конкретна сторінка)

То запит на /about може потрапити в перший маршрут і система подумає, що "about" — це просто ім'я користувача або статті. Специфічні маршрути завжди ставте вище загальних!

6. 🧩 Підсумок

Сьогодні ви навчилися бути диспетчером трафіку.

  1. Ви зрозуміли, що URL — це не просто набір літер, а чітка ієрархія (Дім -> Поверх -> Кімната -> Записка).
  2. Ви дізналися, що Роутер — це охоронець, який направляє відвідувачів до потрібних функцій.
  3. Ви побачили, як динамічні параметри дозволяють одній функції обробляти нескінченну кількість варіантів.

Що ви тепер вмієте? Ви можете спроєктувати структуру посилань для будь-якого веб-сайту. Ви більше не дивитесь на адресний рядок браузера як на магію — ви бачите там змінні та параметри.

🔜 У наступній серії: Гаразд, ми потрапили в потрібну функцію (кімнату). Але що, якщо клієнт хоче не просто отримати дані, а надіслати їх (наприклад, пароль)? Готуйтеся, наступна тема: HTTP Методи (GET vs POST) — як правильно просити та віддавати.

А поки — спробуйте переписати URL вашого улюбленого сайту на папері і розібрати його на частини! Успіхів! 💻

← До списку уроків Наступний урок →