Модуль 32

Пагінація, фільтрація та сортування

Ось твій урок у стилі CS50. Вмикай уяву, ніби ми в лекційній залі Сандерс театру!


🎓 УРОК: ПАГІНАЦІЯ, ФІЛЬТРАЦІЯ ТА СОРТУВАННЯ

(Як приборкати хаос великих даних)


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

Уявіть, що ви заходите на Netflix. Ви хочете подивитися комедію на вечір. Але замість зручного списку, сервіс починає завантажувати вам на екран абсолютно всі фільми, які існують у їхній базі даних. Тисячі, десятки тисяч, мільйони назв...

Ваш браузер зависає. Телефон нагрівається, як праска. Інтернет "лягає". А ви просто хотіли посміятися над комедією.

Питання до вас: Чи користувалися б ви таким сервісом завтра? Звісно, ні.

У реальному світі розробки ми майже ніколи не віддаємо користувачеві всі дані відразу. Це — катастрофа для сервера і смерть для інтерфейсу. Нам потрібні інструменти, щоб перетворити хаос на порядок. Нам потрібні три кити, на яких тримається будь-який список: Фільтрація, Сортування та Пагінація.

Без них Amazon не зміг би продавати товари, а Google не зміг би показувати результати пошуку. Тож, як це працює?


2. 🧠 Теоретична база (без сухої академічності)

Давайте розберемо це "під капотом", але людською мовою. Уявіть, що база даних — це величезний склад із коробками.

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

Це процес "відсіювання". * Як це працює: Ви кажете складу: "Мене не цікавлять всі коробки. Дай мені тільки ті, де лежать червоні кросівки". * Ключове поняття: Критерій відбору (Condition). * Запам'ятати: Фільтрація зменшує кількість даних, прибираючи непотрібне.

⬇️ 2. Сортування (Sorting)

Це процес "впорядкування". * Як це працює: Ви отримали купу червоних кросівок. Але вони лежать як попало. Ви кажете: "Розклади їх від найдешевших до найдорожчих". * Ключове поняття: Порядок (Order) — зростання (ASC) або спадання (DESC). * Інтуїтивно: Без сортування комп'ютер повертає дані в хаотичному порядку (зазвичай так, як йому зручніше їх дістати з диска). Ніколи не покладайтеся на "випадковий" порядок!

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

Це процес "порційної видачі". * Як це працює: Навіть відфільтрованих і відсортованих кросівок може бути 10,000. Ви не можете нести їх усі в руках. Ви кажете: "Дай мені тільки перші 10 штук". Коли подивитесь — попросите наступні 10. * Під капотом: Тут працюють два параметри: 1. Limit (Ліміт): Скільки взяти за один раз (наприклад, 10). 2. Offset (Зсув): Скільки пропустити спочатку (наприклад, щоб побачити 2-гу сторінку, треба пропустити перші 10).


3. 🧪 Приклади (від простого до реального)

Уявімо, що ми працюємо з таблицею Products (Товари).

Приклад 1: Простий запит (Хаос)

Ви: "Дай мені товари". Система: Кидає в вас 1 мільйон товарів у випадковому порядку. Результат: 💥 (Сервер впав).

Приклад 2: Фільтрація + Сортування

Ви: "Дай мені товари, де категорія 'Ноутбуки', і відсортуй від найдорожчих". Очікування: Що ми побачимо нагорі списку? (Пауза для роздумів) Реальність: Ми побачимо топові MacBook Pro або ігрові монстри за $5000. Дешеві будуть в кінці.

Приклад 3: Повна комбінація (Реальний проєкт)

Завдання: Показати користувачеві 2-гу сторінку дешевих смартфонів. На сторінці має бути 20 штук.

Логіка запиту виглядає так: 1. Фільтр: Category = 'Smartphone' 2. Сортування: Price ASC (Ascending - зростання) 3. Пагінація: * Limit: 20 (розмір сторінки) * Offset: 20 (ми пропускаємо перші 20 штук, які були на 1-й сторінці).

Чому результат саме такий? Комп'ютер спочатку відбирає всі смартфони, шикує їх у ряд за ціною, відраховує перші 20, викидає їх (бо це 1-ша сторінка), бере наступні 20 і віддає вам.


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

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

Дано: База даних користувачів (Users). Всього 100 користувачів. Поля: id, name, age, city.

🔹 Завдання 1: Фейс-контроль

Напишіть логіку (своїми словами або псевдокодом), щоб отримати всіх користувачів із Києва, яким більше 18 років.

🔹 Завдання 2: Знайди помилку

Розробник-початківець написав код для отримання 3-ї сторінки (по 10 записів на сторінку), але користувачі скаржаться, що бачать ті самі дані, що й на 2-й. Його код: LIMIT 10, OFFSET 10. Питання: Яким має бути OFFSET для 3-ї сторінки?

🔹 Завдання 3: Кейс інтернет-магазину

Користувач хоче купити "червону футболку", але спочатку хоче бачити "найпопулярніші". Як ви налаштуєте: * Фільтрацію? * Сортування?

🔹 Завдання 4: А що, якщо...

У вас 10 мільйонів записів. Користувач просить 100-тисячну сторінку. OFFSET 1,000,000. Як думаєте, це спрацює швидко чи повільно? (Це питання з зірочкою ⭐).


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

Ось де ми переходимо від новачків до профі.

⚠️ Типова помилка новачка: "Фільтрація в коді"

Новачок робить так: 1. Завантажує з бази ВСІ товари в пам'ять програми (Python/Java/JS). 2. Запускає цикл for, щоб знайти потрібні.

Чому це погано: База даних оптимізована для пошуку. Ваша програма — ні. Переганяти гігабайти даних мережею, щоб вибрати 5 рядків — це злочин проти продуктивності. Як думає профі: "Я змушу базу даних зробити всю брудну роботу і віддати мені тільки готовий результат".

⚠️ Проблема UX (User Experience)

Ніколи не сортуйте дані за тим, що не є унікальним, без додаткового критерію. Приклад: Якщо ви сортуєте за Ім'ям, і у вас є 50 "Олегів", в якому порядку вони будуть? Випадковому! Порада: Завжди додавайте унікальний ідентифікатор в кінці сортування (наприклад, ORDER BY Name, ID). Це гарантує стабільність списку.


6. 🧩 Підсумок

Отже, що ми сьогодні зробили? 1. Ми навчилися не "вбивати" сервери, намагаючись завантажити все й одразу. 2. Ми зрозуміли тріаду: Filter (відсій) -> Sort (впорядкуй) -> Paginate (поріж на порції). 3. Ми навчилися рахувати OFFSET (сторінка мінус 1, помножити на ліміт).

Тепер ви вмієте будувати бекенд, який зручний для користувача і безпечний для сервера.

🚀 Тизер наступного уроку: Пам'ятаєте питання про OFFSET 1,000,000 і чи буде це повільно? Спойлер: буде дуже повільно. Базі даних доведеться перебрати мільйон записів, щоб знайти потрібні. Як це виправити? Наступного разу ми поговоримо про магію Індексів — як змусити базу шукати дані зі швидкістю світла!

А поки що — це був CS50. Побачимось!