Php как вывести дерево

Строим дерево категорий на javascript, php и mysql

При разработке веб-приложений мы часто сталкиваемся с необходимостью представлять данные в виде дерева. При создании того же интернет-магазина линейная структура категорий товаров подойдет только небольшим проектам. Чаще всего хочется, чтобы была возможность вкладывать категории друг в друга. В других случаях, например, если создаете файловый менеджер, без категорий обойтись еще сложнее.
В этой статье я расскажу, как можно легко сообразить симпатичное дерево данных у себя на сайте, начиная от создания таблицы в mysql, и заканчивая выводом дерева в браузере. На клиенте будем использовать библиотеку jstree, несложный серверный код напишем сами.

Что мы собираемся делать и что получим в итоге?

Для примера рассмотрим неоднократно упоминавшийся интернет-магазин и создадим для него дерево категорий товаров. Торговать будем традиционно компьютерной техникой. Сначала создадим таблицу категорий в mysql, потом нарисуем разметку для страницы каталога, напишем js-код и, наконец, php-скрипт, который лезет в базу и отдает категории клиенту в нужном формате. И сразу ссылка на демо приложения

Создаем таблицу категорий

Для создания сколь угодно разветвленной структуры категорий нам понадобится всего одна таблица. Назовем ее categories и создадим в ней 4 поля: id, category, parent_id и number. id будет первичным ключом и автоинкрементом, category — название категории, parent_id — это id категории-родителя, number — порядковый номер категории в родительской.

Поясню: например, имеем 3 категории товаров, родительская — ноутбуки, в ней лежат еще 2 — Acer и Lenovo. В таблице это будет выглядеть так:
id, category, parent_id, number
1, Ноутбуки, 0, 1
2, Acer, 1, 1
3, Lenovo, 1, 2
Условимся, что корневые категории будут иметь parent_id = 0. Поле number нужно, чтобы организовать вывод категорий в нужном порядке, мы же не гарантируем, что на первом месте всегда будет Acer, поэтому нужно иметь возможность поменять порядок вывода. В каждой подкатегории создается своя нумерация, начиная с 1.

Чтобы было лучше видно, как строится иерархия, создайте таблицу в mysql и забейте в нее тестовые данные. Ниже sql-код для того и другого. Базу данных по привычке назовем webdevkin.

Структура таблицы категорий

Тестовые данные

Теперь можно посмотреть на таблицу categories в привычном phpMyAdmin-e или dbForgeStudio и переходить к созданию нашего мини-приложения.

Структура проекта

В корне проекта у нас будет лежать index.html и 4 незатейливых папки: img, css, js и php. В img находится одна картинка loading.gif. Она будет показываться посетителям сайта, пока дерево категорий грузится с сервера. В папке css лежит файл main.css со стилями для нашей страницы и папка jstree, в которой находится стили и картинки для библиотеки jstree.

Папку js разделим по старой памяти на vendor и modules. В первой папке будут библиотеки jquery и jstree. Уточню — jquery требуется не только нам, но и как зависимость для jstree. В папке modules единственный файл main.js — главный js-скрипт приложения. В папку php отправим index.php, который выполнит всю серверную работу.

В этот раз удобнее рассказать сначала о серверной стороне дела, а потом перейти на клиентскую часть. Поэтому смотрим, как вытащить данные из таблицы категорий в нужном формате — файл php/index.php

Серверный код — index.php

Что нам нужно сделать?

• 1. Подлючиться к базе данных
• 2. Вытащить список категорий
• 3. Отправить информацию в браузер

Список простой, и с реализацией возникнуть проблем не должно. В начале файла объявим нужные константы для подключения к базе.

Затем пишем функцию подключения к базе данных, используем mysqli.

Дальше нам нужно вытащить список категорий из таблицы. Здесь нужно немного забежать вперед. Библиотека jstree принимает на вход json. Допустимые форматы описаны на сайте библиотеки jstree.com. Мы возьмем самый удобный для нас и будем отдавать с сервера сразу подготовленные данные. Этот формат выглядит так:

Пример взят из документации, мы же для удобства в качестве id будем использовать просто id из нашей базы — число без префикса ajson. Переходим к функции получения категорий из таблицы БД

Здесь мы выполняем обычный запрос select к таблице categories, вытаскиваем 3 нужных поля, попутно немного преобразовывая их к требуемому формату. id прокидываем без изменений, parent_id мы возвращаем как parent, причем для корневых категорий возвращаем #. А поле category будет проходить как text. Данные получены, осталось загнать их в массив, который мы будем конвертировать в json и отдавать браузеру. Это видно в основном потоке скрипта

На что нужно обратить внимание. В нашем конкретном случае передача get-параметра action выглядит лишней, но это до тех пор, пока файл index.php служит для одной-единственной задачи — вернуть список категорий. Вскоре будет опубликована статья с развитием функционала дерева, в частности, реализация drag-and-drop на клиенте и обновление соответствующих данных на сервере. В ней мы увидим, что передача get-параметра в качестве указания необходимого действия — это достаточно удобная тема.

И насчет ответа клиенту. Поле code всегда указывает на статус выполнения запроса — success или error. В случае успеха массив категорий возвращается в поле result, при каких-то неполадках в поле message приходит сообщение об ошибке.

С серверной частью нашего приложения все, переходим на клиента.

Разметка для страницы нашего каталога — index.html

Если Вы уже посмотрели демо приложения, то увидели, что разметка предельно проста. Есть 2 главных контейнера: слева — для дерева категорий, справа — заглушка для списка товаров. В секции head будет такой код:

В секции body тоже нехитро.

И добавим немного разметки в main.css

С html/css закончили и теперь переходим к самому интересному — javasctipt-коду создания дерева. Здесь-то мы и соберем воедино весь задуманный функционал.

main.js — инициализация приложения

Если Вы читали предыдущие статьи, например, про создание корзины для интернет-магазина на фронте или про встраиваемые виджеты на нативном javascript, то можете вспомнить, что схема js-кода у меня приблизительно одинакова для всех случаев.

Применим ее и здесь: создадим js-модуль, основанный на замыкании, закэшируем нужные элементы dom, напишем несколько приватных методов и один публичный — метод инициализации приложения.

Каркас модуля

Как видим в последней строчке, после загрузки документа мы вывываем метод app.init(), который в свою очередь загружает данные с сервера и передает их в метод создания дерева. В ajaxUrl пишем адрес нашего серверного скрипта, в объекте ui будут закешированы два dom-элемента.

Получаем данные с сервера — метод _loadData()

Здесь пишем самый обычный ajax-запрос к серверному скрипту, получаем данные с категориями и в случае успеха передаем их функции инициализации дерева _initTree(). Мы помним, что данные с сервера нам приходят в формате json, поэтому укажем сразу dataType: ‘json’. А нужная инфа придет в поле result, поэтому в _initTree мы передаем именно resp.result. Обработать ошибки можно как угодно, для примера просто выкинем их в консоль.

И дальше то, ради чего все и затевалось — как нам построить красивое дерево на javascript?

Построение дерева в функции _initTree, используем jstree

И это все, что нужно! Выглядит визуально самая сложная часть приложения до безобразия просто. Нужно к определенному элементу dom всего лишь применить метод jstree с некоторыми параметрами. В нашем случае передаем сами данные в поле data, multiple: false указывает, что нам не нужно множественное выделение, а check_callback: true говорит о том, что хотим после изменения дерева что-то еще и сделать.

В поле plugins перечисляем в массиве желаемые плюшки. Остановимся на dnd — drag-and-drop — прикрутим возможность изменять структуру дерева мышкой. Это очень удобная штука, но пока не функциональная. Можно сколько угодно играться с деревом в браузере, но после обновления страницы увидим старую структуру каталога. Это логично, потому что данные берутся с сервера, и мы не написали кода для обновления mysql при клиентских событиях. Этому будет посвящена одна из следующих статей, а пока будем баловаться, передвигая категории мышкой в браузере.

И напоследок методом bind связываем событие изменения в дереве с каким-то полезным действием. В нашем примере просто выведем надпись с названием категории, но в реальном приложении здесь стоит подтягивать список товаров с сервера. Откуда взялось category = data.node.text? Откройте консоль браузера и увидите, какие еще данные о выбранном узле нам доступны.

Итого

В этой статье полноценный каталог для работы интернет-магазина мы не построили — идея была не в том. Я хотел сосредоточиться на том, как от начала до конца максимально просто построить такую полезную структуру как дерево. Сознательно были пропущены некоторые моменты, а именно, более плотная работа с самим деревом и синхронизация действий клиента с сервером, а также построение списка товаров при клике категории. Для первого варианта выпущу отдельную статью.

UPDATED: Запилил статью, где показывается, как перемещать отдельные элементы дерева мышкой, методом drag-and-drop, и синхронизировать эти данные с сервером. Немного кода на клиенте и сервере — и вуаля! Ссылка чуть ниже под нумером 4.

Источник

Дерево директории на PHP

Недавно меня попросили написать скрипт, который выводит дерево директории на PHP. Я решил, что это будет интересно многим, поэтому написал подобный скрипт, который сейчас продемонстрирую.

Вот весь код скрипта:

Код тщательно прокомментирован, поэтому вопросов возникнуть не должно. Как видите, всё построено вокруг рекурсии, и каждый каталог рекурсивно обследуется. А когда полностью обследован (а также все его подкаталоги), то возвращаемся в цикл и двигаемся дальше. Такой процесс происходит абсолютно с каждым каталогом, который попадается на пути.

Я Вам предлагаю найти у себя на компьютере сайт, где много директорий, поддиректорий и файлов и испытать данный PHP-скрипт, построив дерево корневой директории.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 18 ):

Классный скрипт, вот только почему-то скан доходит только до первой глубины вложенности каталогов, а подкаталаги уже не сканирует(

Поменяйте строку if (is_dir($file)) на if (is_dir($f0)) и будет Вам счастье!

Спасибо большое! Подправил.

А может вы всё-таки напишите скрипт древовидных комментариев ? Или вы не хотите писать потому что есть статья?

Нет, пока писать скрипт времени нет.

Ясно, а в будушем напишите?

Мне тоже интересно узнать, как выводить древовидные комментарии, т.е. как у вас, при использовании кнопки/ссылки «Ответить» рядом с комментарием. С добавлением комментария — проблем никаких, как и с выводом; вот что я действительно не могу понять, как заставить комментарий «сместиться» в сторону, при помощи PHP.

Это не при помощи PHP, а при помощи CSS. А PHP лишь генерирует соответствующий HTML-код, который ничего не смещает сам по себе.

То есть, нужно заранее написать стиль для смещения, и шаблон, в который PHP будет загружать комментарий, и присваивать соответствующий стиль? Или же нужен всего один стиль, а при помощи PHP мы должны вставить шаблон комментария перед закрывающим тегом, чтобы получились древовидные комментарии? Я правильно вас понимаю? Если нет, тогда я в отчаянии. 🙂

• Комментарий
  • Ответ
    • Ещё ответ

— вот древовидные комментарии, и у каждого ul должен быть margin-left. Вот такую структуру надо генерировать на PHP, задача непростая, требуется рекурсия. Без хороших знаний точно не обойтись.

Источник

Рекурсия на PHP — алгоритм, применение

К написанию статьи сподвигли часы раздумий и экспериментов в области построения иерархических списков. Изначально логика обкатывалась на SQL запросах, но в последствии решил реализовать на PHP, дабы снять зависимость от СУБД. На простом примере я покажу как можно пройти от корня иерархии до каждого конечного элемента и обратно, информация скорее для новичков.

Итак, тестовая иерархия, с которой нам предстоит работать:

В базе данных имеется самая простая таблица на самом простом MSSQL сервере, тонкости подключения опустим, наша цель — разобраться с иерархией и рекурсией.

Описание полей есть в комментариях, чуть подробнее о поле access:

По умолчанию в моей системе для каждого нового документа проставляется inherit, то есть наследование от родителя. Для нашего эксперимента для некоторых эелементов пропишем доменные группы. В группе Domain Users моя учётная запись имеется, а вот в AD Group Secret меня нет.

Что ещё мы имеем. Массив, содержащий список моих доменных групп. Достаётся он достаточно просто, на IIS включена аутентификация Windows, всё работает прозрачно, в PHP логин зашедшего находится в переменной $_SERVER[«AUTH_USER»], далее LDAP запросом получаем список групп.

Теперь предлагаю получить необходимые данные и перейти непосредственно к делу:

Задача №1

Необходимо научиться работать с иерархией как с деревом а не списком. Уровень вложенности заранее не известен и может быть любым, следовательно должно быть универсальное средство, позволяющее выполнять проход по дереву как сверху вниз, так и в обратном направлении.

Задача №2

Необходимо гибко управлять доступами, то есть, давать права на группы, отдельные документы и т.д., по аналогии с файловой системой NTFS, можно закрыть права на всю папку, но для одного документа в этой папке доступ нарезать — тоже самое должно получиться и у нас.

Задача №3

Необходимо скрыть от пользователей ресурсы, к которым у них нет доступа, но самое главное, при наличии прав хотя бы на один документ где то в глубине закрытой для него ветки, делать видимыми элементы ведущие к этому документу (иначе как пользователь до него доберётся?)

Вот собственно базовая функция:

Описание по большей части привёл в комментариях, но если говорить просто — после того как цикл foreach проходит строку и делает что то с данными(в нашем случае просто копирует данные в другой массив, добавляя поле level и точки к имени), он запускает эту же функцию, передав ей uid строки, и поскольку в условии if мы сравниваем его с pid, то следующий запуск однозначно захватит дочерние элементы. Цикл foreach перебирает все строки у которых uid родителя совпадает с переданным значением, поэтому перезапуская саму себя, функция отработает на каждом элементе каждого уровня. Для наглядности, мы так же передаём level увеличивая его на единицу. В итоге мы увидим какой документ какой уровень вложенности имеет.

Выводим массив $array в браузер:

Уже не плохо, не так ли?

А теперь немного усложним нашу функцию:

Разбираем по порядку:

1. Добавлено поле path — для формирования пути, добавляем к значению «/» и имя строки, затем полученное значение передаём в функцию, где история повторяется и на выходе получается путь от корня до элемента.

2. Результирующий массив теперь формируется не по порядку, начиная с нуля а с привязкой к uid — $array[$row[‘uid’]] = $_row;. В данном случае это ни как не влияет на работу скрипта, но возможность обращаться к строке по индексу, а не перебором в цикле потребуется нам в дальнейшем, когда будем разбирать проход по дереву в обратную сторону.

3. Добавлен индекс $array_idx_lvl = array();. Этот индекс нам так же потребуется позже, смысл таков — результирующий набор складывается не в одну кучу, а с разбивкой на массивы индексируемые по level.

4. Поле Access. Когда функция запускает саму себя, вместе с остальными параметрами она передаёт свою настройку прав $_row[‘access’] дочерям, а далее происходит следующее, проверяются права — если выставлено наследование (inherit), то применяются права родителя, если нет — через in_array проверяем, есть ли указанная в access доменная группа среди групп зашедшего пользователя. Если есть — добавляем в строку allow (разрешить), иначе deny (запрет).

Итоговый результат:

Ну что же, со спуском разобрались, теперь осталось разобраться с подъёмом и заполнением последнего поля view, определяющего видимость элементов. В начале статьи, я говорил для чего это нужно, но можно предположить иную ситуацию. Допустим вы решили привязать древовидный список к навигационному меню сайта, сделанному в виде многоуровневого выпадающего списка с кучей пунктов, и вы просто не хотите, чтобы пользователь, имеющий доступ всего лишь к одному документу ворочал весь этот массив и в объёмном меню искал свой пункт, ведь по сути ему нужно показать всего лишь одну ветку ведущую к нужной кнопке.

Почему здесь нужен проход в обратную сторону? Предположим у пользователя закрыт доступ для всего контента за исключением одного, самого дальнего(на последнем уровне) документа, если подумать, логично было бы брать начало от доступного, и вести его к корню дерева, показывая только нужные элементы.

Что делает эта функция — принимает в качестве параметра uid строки, с которой нужно начать действовать, обращается к этой строке и проверяет видимость. Если в поле view не show(т.е. показывать), а что то другое, проверяет что находится в безопасности, и если там стоит allow(доступ открыт), делает элемент видимым, в противном случае скрытым(hide), затем запускает себя же, передавая свой pid и настройку видимости, а так же переменную $ident увеличенную на 1, тем самым блокируя последующие самозапуски. При втором проходе, по переданному pid находится родительский элемент, выполняется та же проверка, за исключением одного, если от дочернего в переменной $view передано ‘show‘, то не смотря ни на что, текущему элементу так же присвоится show, то есть видимый.

На мой взгляд, работа с ограничителем — самый оптимальный вариант, ибо представьте ситуацию, на 10 уровне у нас 100 документов, для полного обхода всего дерева, нам нужно запускать эту функцию на каждом элементе, т.к. если на последнем уровне мы запустим функцию 100 раз, то выполняя самозапуски, перебор 100 раз дойдёт до корня. Если умножить на 10 уровней — уже получится 1000 циклов, что не есть хорошо, поэтому подъём нужно осуществлять равномерно, уровень за уровнем.

Запускает эту функцию следующий код:

Вот тут как раз и потребовался индекс по уровню. Здесь мы движемся от самого дальнего уровня, заходя в каждый, обрабатывая в нём каждый элемент.

А вот и картинка:

Перед запуском, я намеренно прописал разрешающую группу для пункта «Отчет для налоговой», чтобы наглядно показать что код отрабатывает корректно. Несмотря на то, что доступ к разделу «Бухгалтерская отчетность» закрыт, он видимый.

Вот и собственно всё, думаю с задачей мы справились, основа получена, алгоритм работает, можно применить в реальной системе.

Источник