Посторінкова навігація з використанням AJAX та jQuery. Частина 1

22

Від автора: при виведенні різної інформації на сайті практично завжди необхідно розбивати її на кілька сторінок, інакше довелося б виводити величезну кількість даних на одній сторінці, що помітно збільшило б час завантаження і, відповідно, навантаження на сервер. Тобто, іншими словами, на хорошому сайті завжди повинна бути посторінкова навігація. Думаю, Ви неодноразово зустрічалися з нею при відвідуванні різних сайтів. Тому в даному уроці ми з Вами почнемо створювати посторінкову навігацію для сайту, але реалізуємо її ми не просто звичайними засобами мови PHP, а з використанням бібліотеки jQuery і технології AJAX.

У цьому уроці ми створимо тільки основну логіку і механізм розбиття даних на окремі сторінки. А в наступному уроці, створимо зручну навігаційну панель для швидкого переміщення по сторінках, з використанням бібліотеки jQuery і технології AJAX.

Посторінкова навігація з використанням AJAX та jQuery. Частина 1Посторінкова навігація з використанням AJAX та jQuery. Частина 1

1. Постановка задачі

Отже, що нам знадобиться для даного уроку? Нам буде потрібно будь-сайт, на якому виводиться велика кількість записів на одній сторінці. Такий сайт я вже заготовив, ось так він виглядає:

Посторінкова навігація з використанням AJAX та jQuery. Частина 1

Як Ви бачите, він дуже простий, головне, що на його головній сторінці виводиться 76 різних статей. Погодьтеся – це не раціонально, оскільки такий висновок створює велике навантаження на сервер, особливо при великому відвідуванні, а також значно ускладнює пошук потрібної інформації. Тому наше завдання розбити дані статті на кілька додаткових сторінок і виводити, скажімо, за 5 статей на одній сторінці. Далі необхідно відобразити панель навігації, для зручного переміщення по цих станицях.

Тепер давайте розглянемо, як влаштований цей сайт, що б у Вас було розуміння, як він працює. Отже, файлова структура сайту:

сѕѕ
—style.css
file
config.php
functions.php
index.php

Дивіться, в папці сѕѕ міститься файл style.css, в якому описані всі сѕѕ правила даного сайту, далі в папці file — розташовуються деякі зображення статей. Файл з основними налаштуваннями сайту:

Як Ви бачите, нічого складного – просто оголошуємо чотири константи необхідні для підключення до бази даних і власне виконуємо це підключення, з вибором бази даних і визначенням кодування для запитів. Наступний файл – файл functions.php:

У базі даних не виявлено таблиці перевірте налаштування

«);
}
if(mysql_num_rows($result) == 0) {
exit(‘Статтей немає’);
}
$row = array();
for($i = 0; $i

Його основна роль – зберігати в себе всі функції, необхідні для роботи всього сайту, на даному етапі, описана лише одна функція — get_statti(), яка отримує всі статті з бази даних і формує багаторівневий масив, який згодом і повертає як результат своєї роботи. Далі, по ходу уроку, ми створимо ще кілька функцій в даному файлі.

І останній файл — index.php:

‘.$site_name.’

‘;?>

%s

Переглядів: %s

«,$row[‘id’], $row[‘title’], $row[‘author’], $row[‘author’], $row[‘date’], $row[‘img_src’], $row[‘discription’], $row[‘view’]);
}
?>

«.$site_name.»

«;?>

?>

Як Ви бачите, також все дуже просто: спочатку відправляємо запит з кодуванням сайту, потім підключаємо потрібні файли (config.php і functions.php), далі викликаємо функцію get_statti() і в змінну $result, зберігаємо масив зі статтями. Далі, використовуючи цикл foreach, проходимо по масиву і виводимо статті на екран.

Тепер, коли ми розуміємо, як працює тестовий сайт, можна приступати до реалізації посторінкової навігації.

2. Загальна кількість статей

Отже, щоб розбити загальна кількість статей на певну кількість сторінок, насамперед необхідно визначити, скільки всього статей міститься в базі даних. Для цього давайте у файлі functions.php створимо ще одну функцію:

Так як нам необхідно лише дізнатися загальна кількість статей в базі даних, то при формуванні запиту SQL скористаємося конструкцією COUNT(*). Далі виконуємо даний запит і отримуємо результат, використовуючи функцію mysql_result().

Тепер давайте перейдемо в файл index.php і викличемо, тільки що створену функцію:

Так само можна вивести значення змінної $count_statti на екран, що б переконатися, що функція працює правильно:

Посторінкова навігація з використанням AJAX та jQuery. Частина 1

Як Ви бачите, все відмінно відпрацював.

3. Одержання загальної кількості необхідних сторінок

Далі, нам необхідно дізнатися, скільки необхідно сторінок для відображення 76 статей нашого сайту (76 статей у нас всього в базі даних). Але перед цим необхідно визначитися, скільки ми хочемо виводити статей на одній сторінці. Для цього давайте додамо в конфігураційний файл – config.php ще один параметр, для збереження кількості статей, які виводяться на сторінці:

Тепер переходимо в файл functions.php і створимо таку функцію:

Для більшої універсальності і незалежності функції number_pages(), будемо передавати їй наступні параметри: $count_statti – загальна кількість статей в базі даних (у нашому прикладі – це кількість повертає функція get_count_statti()) і $count_per_page – загальна кількість статей, які виводяться на одній сторінці (це ні що інше як константа COUNT_PER_PAGE).

Отже, першим ділом перевіряємо, чи потрібно взагалі розбивати висновок статей на окремі сторінки, тобто якщо загальна кількість статей менше, ніж кількість статей, які виводяться на одній сторінці, то звичайно посторінкова навігація в такому випадку не потрібна, при цьому завершуємо роботу функції шляхом повернення помилкового значення. Якщо дана перевірка не виконалася – переходимо далі. Створюємо змінну $number_pages, в якій буде зберігатися кількість сторінок необхідних для виведення усіх статей. Потім ділимо загальна кількість статей, на кількість статей, які виводяться на одній сторінці і тим самим отримуємо шукане число необхідних сторінок. Лише приводимо до типу даних integer, що б прибрати дробову частину, якщо така є.

Далі перевіримо, якщо при діленні двох попередніх значень виходить залишок від ділення, значить, отримане кількість сторінок необхідно збільшити на одиницю. Залишок від ділення можна отримати, використовуючи оператор %.
Тепер давайте перейдемо в файл index.php і викличемо дану функцію:

Посторінкова навігація з використанням AJAX та jQuery. Частина 1

Тепер ми знаємо, скільки необхідно сторінок (16 сторінок), що б вивести 76 статей по 5 статей на сторінку. Дане значення нам знадобиться в наступному уроці при створенні навігаційної панелі з посторінкової навігації.

4. Висновок статей з урахуванням розбиття на сторінки

Тепер необхідно вивести статті з урахуванням посторінкової навігації, для цього у файлі functions.php створимо нову функцію:

У базі даних не виявлено таблиці перевірте налаштування

«);
}
if(mysql_num_rows($result) == 0) {
exit(‘Статтей немає’);
}
$row = array();
for($i = 0; $i

Робота даної функції повністю аналогічна функції get_statti(), за винятком переданих параметрів і деяких моментів, пов’язаних з формуванням SQL запиту.

Отже, першим ділом, давайте подумаємо, яким повинен бути SQL запит на вибірку статей з урахуванням розбиття на сторінки. Думаю, Ви вже здогадалися, що для цього нам потрібно обмежувати вибірку, використовуючи конструкцію LIMIT. Як Ви пам’ятаєте при використанні даної конструкції, можна передавати значення — з якого необхідно вибирати дані і наступне значення – скільки вибирати записів з бази даних. Даною конструкцією ми і скористаємося. Отже, спочатку необхідно визначити число – значення – з якою, записи необхідно починати вибірку (причому якщо необхідно вибирати з 1 записи, то ми отримаємо запису 2,3,4 і так далі). Для цього віднімемо від змінної $page ($page — номер сторінки, який, як параметр приймає функція get_posts()) одиницю і множимо на кількість статей, які виводяться на одній сторінці – змінна $count_per_page, яка як параметр передається функції get_posts(). І таким чином ми отримуємо змінну $start – це і є значення, з якого необхідно вибирати записи з бази даних. А кількість записів, яке необхідно вибрати – це ні що інше як змінна $count_per_page.

Тепер, використовуючи ці дані, формуємо і виконуємо запит до бази даних. Потім як звичайно, за допомогою циклу for, формуємо і повертаємо масив $row.

Тепер, давайте відкриємо файл index.php, видалимо рядок — $result = get_statti(), так як дана функція нам більше не потрібна, і додамо наступний код:

Отже, давайте умовимося, що номер сторінки ми будемо передавати, через адресний рядок, тобто, використовуючи суперглобальный масив GET і його клітинку page. Так само якщо дана клітинка порожня, або в ній збережено не числове значення, номер поточної сторінки, а значить і змінна $page буде дорівнює 1.
Далі просто викликаємо функцію get_posts() і передаємо їй першим параметром — номер поточної сторінки, а другим – скільки записів необхідно відображати на одній сторінці. Тепер можна перейти браузер і подивитися, що у нас вийшло.

Посторінкова навігація з використанням AJAX та jQuery. Частина 1

Як Ви бачите, тепер на головній сторінці сайту вже не виводяться всі 76 статей, а всього перші 5 і для того, що б побачити другу сторінку, необхідно передати через адресний рядок змінну $page, то є ось таким чином: ?page=2. При цьому ми побачимо наступні п’ять статей, і так далі.
Отже, ми з Вами створили основну логіку посторінкової навігації, але погодьтеся доступ до сторінок через адресний рядок – вкрай не зручний, тому нам необхідно створити зручну навігаційну панель, для швидкого переміщення по сторінкам.

Але про це ми поговоримо на наступному уроці (у другій частині даного уроку). А зараз давайте прощатися. Вдалого Вам кодування і побачимося в наступних уроках.