Ось готовий урок, створений у стилі CS50: енергійний, зрозумілий та орієнтований на практику.

🎓 Урок CS50: Приборкання хаосу — Фільтрація, Пагінація та Пошук

Привіт, друзі! 👋 Це CS50.

Сьогодні ми поговоримо про те, як не потонути в океан і даних. Ми розберемо три стовпи, на яких тримається будь-який зручний інтерфейс: Фільтрацію, Пагінацію та Пошук.

1. 🔥 Вступ: Уявіть, що Google зламався...

Уявіть собі ситуацію. Ви заходите на сайт Amazon або Rozetka, щоб купити нові кросівки. Ви натискаєте кнопку "Взуття", і...

Ваш браузер завмирає на 2 хвилини. ⏳ Потім на екрані з’являється список із 2 мільйонів пар взуття. Всі підряд: дитячі сандалі, зимові чоботи, ласти, кросівки... Все в одну купу. Вам потрібно проскролити 50 кілометрів вниз, щоб знайти свої "Nike Air".

Риторичне питання: Ви б користувалися таким сайтом? Звісно, ні. Ви б закрили вкладку через 5 секунд.

У чому проблема? Бази даних сучасних проєктів містять тисячі, мільйони, іноді мільярди записів. 1. Ми не можемо віддати користувачеві ВСЕ одразу (це вб’є і сервер, і браузер клієнта). 2. Користувачеві не потрібно ВСЕ. Йому потрібно те, що він шукає.

Ось тут на сцену виходять наші рятівники: * Фільтрація — щоб відсікти зайве. * Пошук — щоб знайти конкретне. * Пагінація — щоб подавати інформацію порціями.

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

Давайте розберемо це без складних формул, на прикладі величезної бібліотеки.

1. Фільтрація (Filtering) 🧹

Це процес відбору даних за чіткими критеріями. Це точне співпадіння або діапазон. * Аналогія: Ви кажете бібліотекарю: "Дайте мені тільки книги жанру 'Фантастика', видані після 2020 року". * Під капотом: Це ваша умова WHERE у базі даних. * category == 'shoes' * price < 100

2. Пошук (Searching) 🔍

Це складніше. Це спроба знайти "голку в копиці сіна" за текстом. * Аналогія: Ви не знаєте точної назви книги, але пам’ятаєте, що там було слово "Гаррі". * Під капотом: Комп'ютер сканує текст рядків, шукаючи збіги символів (часто ігноруючи регістр — великі чи малі літери). Це операції типу LIKE або CONTAINS.

3. Пагінація (Pagination) 📄

Це розбиття великого списку на сторінки. * Аналогія: Бібліотекар не вивалює перед вами 500 книг на стіл. Він каже: "Ось перші 10. Подивишся — приходь за наступними". * Ключові поняття: * Limit (Size): Скільки записів показати за один раз (наприклад, 10). * Offset: Скільки записів пропустити спочатку (щоб показати другу сторінку, треба пропустити перші 10).

❗️ Що треба запам'ятати залізно: Ніколи, чуєте, НІКОЛИ не повертайте клієнту весь список даних із бази без пагінації. Це "смертний гріх" бекенд-розробника.

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

Уявімо, що у нас є список товарів products. (Я буду використовувати псевдокод, схожий на Python/SQL, щоб ми фокусувалися на логіці, а не на дужках).

Приклад 1: Проста фільтрація

Клієнт хоче тільки червоні футболки.

# Вхідні дані: 1000 товарів
request = { "color": "red", "type": "t-shirt" }

# Логіка фільтрації
results = db.query("SELECT * FROM products WHERE color = 'red' AND type = 't-shirt'")

Результат: Ми отримали, скажімо, 50 футболок. Чистий, точний список.

Приклад 2: "Розумний" Пошук

Клієнт вводить у рядок пошуку: "iPhone". Але в базі записано: "Apple iPhone 13", "iphone case", "IPHONE charger".

Питання до вас: Якщо ми будемо шукати точне співпадіння (name == "iPhone"), що ми знайдемо? Правильно, нічого! Тому що "Apple iPhone 13" не дорівнює просто "iPhone".

search_term = "iPhone"

# Логіка пошуку (insensitive - нечутливо до регістру)
# ILIKE означає "шукай схоже, ігноруй великі/малі літери"
results = db.query(f"SELECT * FROM products WHERE name ILIKE '%{search_term}%'")

Результат: Знайдеться все, де є слово iphone, iPhone або IPHONE.

Приклад 3: Пагінація (Математика сторінок)

У нас є 100 товарів. Ми хочемо показати Сторінку 3, по 10 товарів на сторінці.

Як комп'ютер дізнається, які саме товари брати? Нам треба порахувати OFFSET (скільки пропустити).

Формула: OFFSET = (page_number - 1) * page_size

Давайте рахувати разом: * Сторінка 1: пропустити 0. (Показуємо 1-10) * Сторінка 2: пропустити 10. (Показуємо 11-20) * Сторінка 3: (3 - 1) * 10 = 20. Пропустити 20. (Показуємо 21-30)

SELECT * FROM products
LIMIT 10
OFFSET 20

Чому це круто? База даних навіть не читає решту 70 товарів. Вона економить сили!

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

Час розім'яти мізки! 🧠 У вас є масив даних users (користувачі).

Завдання 1: Фільтр-контроль 👮‍♂️

У вас є список користувачів з полями age (вік) та status (active/banned). Напишіть (словами або псевдокодом) умову, щоб отримати повнолітніх активних користувачів.

Завдання 2: "Дедлайн горить" 🔥

Користувач шукає задачу за словом "bug". У базі є задачі: 1. "Fix login bug" 2. "Buy burger" 3. "DEBUGGING session" Які з цих задач знайде звичайний пошук (substring match), а які — ні? Чому "burger" може потрапити у видачу?

Завдання 3: Калькулятор пагінації 🧮

Ви робите блог. На одній сторінці — 5 статей. Користувач хоче відкрити Сторінку 4. Який буде LIMIT? Який буде OFFSET?

Завдання 4: Міні-кейс (Реальна проблема) 🕵️

Ви зробили пагінацію. * Клієнт відкриває сторінку 1 і бачить користувача "Олег". * Клієнт відкриває сторінку 2 і... знову бачить "Олег"! Питання: Як таке могло статися? Чого ми не зробили перед пагінацією? (Підказка: в якому порядку лежать книги в бібліотеці?)

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

Як відрізнити новачка від профі в цій темі?

❌ Помилка новачка: "Фільтрація в пам'яті"

Новачок робить так: 1. Завантажує з бази ВСІ 100 000 товарів у пам'ять програми. 2. Циклом for перебирає їх, щоб знайти 5 червоних. Наслідок: Серверу не вистачає RAM, програма падає.

✅ Як думає профі: "Фільтрація в базі"

Профі змушує базу даних робити брудну роботу. 1. Надсилає запит "Дай тільки червоні". 2. Отримує 5 записів. Наслідок: Швидко, економно.

💡 Професійна порада: "Сортування — найкращий друг пагінації"

Пам'ятаєте Завдання 4 про Олега? База даних не гарантує порядок видачі, якщо ви її не попросите. Якщо ви робите LIMIT/OFFSET, ви ЗАВЖДИ повинні додавати ORDER BY (сортувати), наприклад, за датою реєстрації або ID. Інакше ваші сторінки будуть "скакати".

6. 🧩 Підсумок

Отже, що ми сьогодні поклали в нашу скарбничку знань?

Фільтрація — це сито. Вона прибирає непотрібне.
Пошук — це детектив. Він знаходить приховане в тексті.
Пагінація — це нарізка торта. Ніхто не їсть цілий торт за один укус (ну, майже ніхто 😉).
Ми навчилися рахувати OFFSET і зрозуміли, чому порядок (Sorting) важливий.

Тепер ви можете створювати інтерфейси, які не "гальмують" навіть з мільйонами даних!

🔜 Тизер наступного уроку: Але що робити, якщо пошук по мільйону записів все одно займає 3 секунди, а клієнт хоче за 0.1 секунди? На наступному уроці ми дізнаємося про магію Індексів (Indexes). Це як закладки в книзі, які прискорюють пошук у 1000 разів!

До зустрічі! 👨‍💻