Висновок багаторівневого меню з необмеженим рівнем вкладеності

17

Від автора: при створенні сайтів практично завжди необхідно виводити меню, тобто певний блок з навігацією або по сторінках, або за категоріями веб-додатки. І дуже часто це меню необхідно відобразити у вигляді багаторівневого дерева. І добре, якщо передбачається тільки другий рівень вкладеності. А якщо третій? Або, взагалі, необмежений рівень вкладеності? Як бути в цьому випадку? Тому в даному уроці ми з Вами навчимося виводити на екран багаторівневе меню з необмеженим рівнем вкладеності.

Висновок багаторівневого меню з необмеженим рівнем вкладеностіВисновок багаторівневого меню з необмеженим рівнем вкладеності

1. Створення бази даних.

Першим ділом, як завжди, необхідно визначитися зі структурою бази даних. Так як щоб виводити меню, необхідно десь зберігати його дані. Отже, давайте створимо базу даних, з назвою data_car. Ми з Вами будемо виводити категорії для автомобільного сайту, тому й ім’я бази даних я вибрав близьке до цієї тематики.

Отже, ось така структура таблиці (таблиці назвемо categories) нам знадобиться для виведення і зберігання даних багаторівневого меню:

Висновок багаторівневого меню з необмеженим рівнем вкладеності

Тепер опис полів таблиці:

id – ідентифікатор таблиці (як зазвичай ідентифікатори AUTO_INCREMENT і PRIMARY KEY)

title – заголовок категорій

parent_id – ідентифікатор батьківського категорії. За замовчуванням і якщо батьківська категорія, значить значення даного поля 0, для запису. Якщо ж категорія дочірня, то в даному полі вказуємо ідентифікатор категорії батька (тобто поля id).

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

Тепер, коли база даних створена, почнемо створювати скрипт.

2. Основні налаштування і підключення до бази даних.

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

functions
— functions.php
config.php
index.php

Дивіться папка functions, містить у собі один файл – functions.php, в якому будуть описані всі функції необхідні для нормальної роботи скрипта. Далі у файлі config.php ми опишемо всі основні налаштування і звичайно index.php – основна точка входу.

Хочу відразу сказати, що всі файли, які ми будемо створювати, необхідно зберігати в кодуванні UTF-8.

Отже, давайте подивимося, які основні параметри нам потрібні, ось код файлу config.php:

Як Ви бачите, нам потрібні лише налаштування для підключення до бази даних. Ви, звичайно ж, можете додати в файл додаткові дані, які необхідні для роботи Вашого веб-додатки.

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

Як Ви бачите, дуже проста функція, яка приймає чотири параметри: адреса сервера, бази даних, ім’я користувача, пароль і назву бази даних. Спочатку виконуємо з’єднання з сервером бази даних, використовуючи функцію mysql_connect($host,$user,$pass), потім вибираємо базу даних для роботи — mysql_select_db($database,$db) і в кінці визначаємо кодування для роботи з базою даних.

Тепер давайте створимо файл index.php і додамо в нього перші рядки коду:

Отже, першим ділом, відправляємо заголовок з кодуванням – функція header(«Content-Type:text/html;charset=utf8»). Потім підключаємо два раніше створених файлу: файл конфігурації config.php файл functions.php. І нарешті, викликаємо функцію db(), для підключення до сервера бази даних. Тепер давайте перевіримо в браузері, що у нас вийшло. Якщо на екрані, на даному етапі нічого не вывелось, тобто, немає повідомлень про помилки, значить ми на вірному шляху.

3. Отримання масиву категорій.

Для того щоб вивести багаторівневе меню, без обмеження за рівнем вкладеності необхідно використовувати рекурсію.

Рекурсія — це звернення функції до самої себе, іншими словами виклик функції всередині коду функції самої себе.

Тепер поговоримо про те, за яким принципом ми будемо виводити багаторівневе меню. Дана задача (як і будь-яка в програмуванні) має кілька рішень. Наприклад, одне з таких рішень полягає в тому, щоб створити функцію (приймаюча параметром ідентифікатор батьківського категорії), яка в своєму коді формувала SQL запит на вибірку даних меню, по полю parent_id. Тобто, при першому виклику функції, вибираються всі записи, в яких поле parent_id = 0, потім parent_id = 1, далі parent_id = 2 і т. д. Далі в циклі витягуємо дані з результату відпрацювання запиту SQL і в цьому ж циклі викликаємо дану функцію (рекурсивно саму на себе) і передаємо їй ідентифікатор батьківського категорії, отриманий у запису, витягнуті на даній ітерації циклу. Тобто на першій ітерації ми з Вами витягуємо в змінну асоціативний масив, в цьому масиві є комірка з ключем parent_id, ось її значення і передаємо при виклику функції.

Даний метод, здавалося б, дуже непоганий, по-перше, він відмінно працює, а по-друге, має дуже красиву і коротку реалізацію. Але є істотний недолік – відбувається багаторазове звернення до бази даних і виконання запитів на вибірку даних. А це не дуже добре.

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

Отже, давайте у файлі functions.php створимо функцію get_cat():

Отже, дивіться, спочатку формуємо і виконуємо SQL запит на вибірку даних з таблиці categories, далі перевіряємо, чи успішно виконався запит. Тепер, звичайно, можна було б просто за допомогою циклу пройтися по результату, отриманому з бази даних і створити асоціативний масив даних за категоріями. Але такий масив дуже незручно обробляти, тому його необхідно відсортувати у зручному порядку. Потрібно зробити так, щоб на виході даної функції, вийшов масив ключами якого, були б ідентифікатори батьківських категорій. І в кожній клітинці даного масиву, містився б ще масив – всіх категорій (дочірніх), у яких ідентифікатор батьківського категорії дорівнює ключа відповідного масиву. Іншими словами відсортуємо масив по дочірнім категорій. Що ми з Вами робимо. Описуємо цикл for, в якому будемо по черзі проходитися по кожному рядку результуючої таблиці, отриманої з бази даних. Потім в змінну $row, зберігаємо масив даних – одного рядка результуючої таблиці. А далі формуємо масив $arr_cat, у якого ключі відповідають ідентифікаторів батьківських категорій. І нарешті, повертаємо масив $arr_cat, як результат роботи функції в цілому.

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

Викликаємо функцію get_cat() і відразу ж роздрукуємо отриманий масив $result, щоб переконатися, що все працює коректно:

Висновок багаторівневого меню з необмеженим рівнем вкладеності

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

4. Висновок категорій у вигляді багаторівневого дерева.

Отже, давайте відкриємо файл functions.php і створимо функцію view_cat(), яка і буде виводити багаторівневе меню:

‘;
//перебираємо в циклі масив і виводимо на екран
for($i = 0; $i < count($arr[$parent_id]);$i++) {
echo ‘


  • .$arr[$parent_id][$i][‘title’].»;
    //рекурсія перевіряємо немає дочірніх категорій
    view_cat($arr,$arr[$parent_id][$i][‘id’]);
    echo ‘
  • ‘;
    }
    echo ‘

    ‘;
    }?>

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

    Так як дана функція буде рекурсивно викликати, то насамперед необхідно описати умова виходу з рекурсії, що ми з Вами робимо. А саме, перевіряємо, чи існує комірка масиву з ключем ($arr[$parent_id]) — ідентифікатором батьківського категорії – який передається параметром при виклику функції.

    Далі виводимо, відкриваючий тег ul — наше меню будемо виводити у вигляді нумерованого списку. І описуємо цикл for, за допомогою якого, будемо проходити по елементам масиву $arr. Потім між тегами li виводимо посилання на категорію.

    Шлях посилання сформуємо таким чином – за допомогою GET параметрів передамо дві змінні: перша це ідентифікатор категорії і друга – ідентифікатор її батьківської категорії. При цьому, щоб отримати ідентифікатор категорії — спочатку звертаємося до комірці масиву $arr, за ідентифікатором батьківського категорії, який був переданий як параметр функції — $parent_id, потім – у цій клітинці у нас міститься так само масив, тому доступ до клітинок, отримуємо, використовуючи лічильник циклу $i, і вказуємо безпосередньо ключ, асоціативного масиву тобто [‘id’] – отримуємо ідентифікатор категорії.
    Тобто, дивіться, коли ми будемо викликати цю функцію, звичайно ж, другий параметр їй передавати не будемо, значить, за замовчуванням він дорівнює нулю, тому що мається на увазі будемо виводити лише батьківські категорії. Далі на першій ітерації (кроці) циклу виводиться перша посилання на батьківську категорію, і потім рекурсивно викликаємо знову ж функцію view_cat(), передаємо їй масив, який необхідно опрацювати і ідентифікатор даної категорії (тієї яку ми тільки що вивели на екран) — $arr[$parent_id][$i][‘id’], тепер він вважається ідентифікатором батьківського категорії. Іншими словами – перевіряємо, чи є у даної категорії – дочірні категорії.

    І нарешті, після циклу виводимо, закриваючий тег

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

    ‘;
    view_cat($result);
    echo ‘

    ‘;
    ?>

    Тепер давайте перейдемо в браузер і подивимося, що у нас вийшло:

    Висновок багаторівневого меню з необмеженим рівнем вкладеності

    Як Ви бачите, все відмінно відпрацювало, тепер можете поекспериментувати, з категоріями в базі даних і перевірити, як виводяться категорії четвертого-п’ятого рівня вкладеності.

    Сподіваюся, цей урок буде Вам корисний. Вдалого кодування. І до нових зустрічей в наступних відео уроках.