Menus with mysql in php

How to Create Dynamic Tree View Menu in PHP

Recently I was working on a PHP project which require a dynamic treeview structure to display items at multilevel. I have tried to search and find some useful solutions but these were not fully dynamic as it only had options for few levels. As I was looking for solution to create infinite dynamic treeview structure from MySQL database, but not find complete solution to implement as per requirement. So at last I have started to create my own and finally create it using PHP and MySQL.

The concept of this script is very simple and you can use it to create menus, categories or anything else that has unknown number of subs items. I have created a database table “menus” that have columns like id, label and parent to create tree structure. I have got all records using MySQL SELECT query and then create dynamic treeview structure at nth level. I have also design it to make it collapsible.

So go through the simple steps to create dynamic treeview structure.

1- First Create MySQL Table with Data:

The SQL table “menus” has 5 columns id(This is a unique identifier), label(This is title of item), link(Link of an item)p, parent(id of parent for the child) and sort(display order of items).

CREATE TABLE IF NOT EXISTS `menus` ( `id` int(11) NOT NULL AUTO_INCREMENT, `label` varchar(50) NOT NULL, `link` varchar(100) NOT NULL, `parent` int(11) NOT NULL DEFAULT '0', `sort` int(11) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=17 ;

2- Insert Data into MySQL Table:

Now you need to insert some data into “menus” table to create tree view structure. Use below inserts statement to insert data.

INSERT INTO `menus` (`id`, `label`, `link`, `parent`, `sort`) VALUES (1, 'PHP', '#', 0, 0), (2, 'Tutorials', '#', 1, NULL), (3, 'Scripts', '#', 1, NULL), (4, 'Arrays', '#', 2, NULL), (5, 'Operators', '#', 2, NULL), (6, 'Arithmetic operators', '#', 5, NULL), (7, 'Assignment operators', '$', 5, NULL), (8, 'Java', '#', 0, NULL), (9, 'Tutorials', '', 8, NULL), (10, 'Programs', '', 8, NULL), (11, 'JavaScript', '#', 0, NULL), (12, 'MySQL', '#', 0, NULL), (13, 'CSS', '', 0, NULL), (14, 'Tutorials', '', 13, NULL), (15, 'Servlet', '', 9, NULL), (16, 'JSP', '', 9, NULL);

3- Get Data From MySQL Table:

Now we will get data from “menus” table and store in an array to pass in function createTreeView() to create treeview structure.

 array(), 'parents' => array() ); // Builds the array lists with data from the SQL result while ($items = mysqli_fetch_assoc($result)) < // Create current menus item id into array $menus['items'][$items['id']] = $items; // Creates list of all items with children $menus['parents'][$items['parent']][] = $items['id']; >// Print all tree view menus echo createTreeView(0, $menus); ?>

4- Create Dynamic Treeview Structure:

This is a function createTreeView() that works recursively to create dynamic treeview menus at nth level.

 if(isset($menu['parents'][$itemId])) < $html .= " &amp;lt;li&amp;gt;&amp;lt;label for='subfolder2'&amp;gt;&amp; lt;a href='".$menu['items'][$itemId]['link']."'&amp;gt;".$menu['items'][$itemId]['label'] ."&amp;lt;/a&amp;gt;&amp;lt;/label&amp;gt; &amp;lt;input type='checkbox' name='subfolder2'/ &amp; gt;"; $html .= createTreeView($itemId, $menu); $html .= "&amp;lt;/li&amp;gt;"; >> $html .= "&amp;lt;/ol&amp;gt;"; > return $html; > ?>

5- Design Treeview Collapsible:

Now time to design treeview as collapsible tree structure.

/* CSS to style Treeview menu */ ol.tree < padding: 0 0 0 30px; width: 300px; >li < position: relative; margin-left: -15px; list-style: none; >li input < position: absolute; left: 0; margin-left: 0; opacity: 0; z-index: 2; cursor: pointer; height: 1em; width: 1em; top: 0; >li input + ol < background: url(images/toggle-small-expand.png) 40px 0 no-repeat; margin: -1.600em 0px 8px -44px; height: 1em; >li input + ol > li < display: none; margin-left: -14px !important; padding-left: 1px; >li label < background: url(images/folder.png) 15px 1px no-repeat; cursor: pointer; display: block; padding-left: 37px; >li input:checked + ol < background: url(images/toggle-small.png) 40px 5px no-repeat; margin: -1.96em 0 0 -44px; padding: 1.563em 0 0 80px; height: auto; >li input:checked + ol > li < display: block; margin: 8px 0px 0px 0.125em; >li input:checked + ol > li:last-child

• Build Live Chat System with Ajax, PHP & MySQL
• Create Event Calendar with jQuery, PHP and MySQL
• Build Invoice System with PHP & MySQL
• Push Notification System with PHP & MySQL
• Create Bootstrap Cards with PHP and MySQL
• Build Content Management System with PHP & MySQL
• Convert Unix Timestamp To Readable Date Time in PHP
• Ajax Drop Down Selection Data Load with PHP & MySQL
• Inventory Management System with Ajax, PHP & MySQL
• Drag and Drop File Upload using jQuery and PHP
• Load Dynamic Content in Bootstrap Popover with Ajax, PHP & MySQL

You can view the demo link and also download complete demo script from below links.

Источник

Многоуровневое меню на PHP и MySQL

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

Для начала создадим таблицу в базе данных со следующими полями:

• id — уникальный идентификатор.
• title — анкор ссылки в меню.
• link — адрес, на который будет вести пункт меню.
• parent_id — родительский ID. Если родительского пункта нет, то здесь будет NULL (либо можно ещё 0 поставить).

С таблицей разобрались, теперь пришло время PHP-кода. Полный PHP-код приведён ниже:

«; // Начинаем внутренний список, если дочерних элементов ещё не было
$ul = true; // Устанавливаем флаг
>
echo printItem($items[$key], $items, $childrens); // Рекурсивно выводим все дочерние элементы
>
echo «»;
>
?>

Меню


foreach ($items as $item) if (!$item[«parent_id»]) echo printItem($item, $items, $childrens); // Выводим все элементы верхнего уровня
>
?>


Этот код полностью рабочий, однако, Вы должны понимать, что так никто не пишет (в частности, вывод через echo HTML-тегов). И Ваша задача взять алгоритм из этого кода, но не сам код. А дальше этот алгоритм подключить к своему движку. Я постарался тщательно прокомментировать код вывода многоуровневого меню на PHP и MySQL, но, безусловно, он не самый прозрачный и требует уже неплохих начальных знаний. Если Вы ещё плохо знаете PHP и MySQL, то сначала настоятельно рекомендую пройти этот курс. После прохождения данного курса Вы сможете самостоятельно писать подобные скрипты и даже намного сложнее.





Создано 03.02.2014 13:15:22

• Михаил Русаков

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

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

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

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

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

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

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

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

Спасибо за статью. Сейчас делаю новый сайт и там буду использовать этот вид меню.

Присоединяюсь к благодарностям. Миша, а как бы лучше управлять очередностью пунктов меню? Например, в Друпале у каждого элемента меню есть «вес», чем он меньше – тем ссылка выше (раньше). А в панели управления они просто перетягиваются. Ну и «Сохранить» – запись в базу данных – вот здесь я что-то не соображу никак. Если решишься сделать такой урок, будет просто здорово!

Здравствуйте Михаил! Не смогли бы Вы помочь разобраться с методом Tommy Lacroix tree? Если сможете, объясните по-подробнее пожалуйста, как метод перебирает массив? Описания в интернете вообще нет, кроме того, что так можно выводить дерево меню. Такое ощущение, что никто не знает, как она работает. Прочитал, и не один раз, как работают жёсткие ссылки — тоже минимум информации с парой примеров, скопированной с другого такого же сайта.

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Источник

Многоуровневое меню на PHP + MySQL

Ни один сайт не обходится без навигации или как еще называют «меню сайта». Так вот меню сайта бывает одноуровневым и многоуровневым в виде дерева. Если с одноуровневым меню особых сложностей в плане реализации не возникает, то при создании многоуровневого меню нужно хорошо подумать.

Самое главное в этой задаче это спроектировать базу данных для нашего многоуровневого меню. Создадим таблицу Categories с тремя полями id , title , parent где:

• ID – идентификатор
• Title – Название меню
• Parent – Родитель категории по умолчанию 0

За ветвление меню отвечает поле Parent если Parent = 0 , то эта категория является родительской. Для того чтобы добавить потомков к родительской категории нужно в поле parent указать ID нужного родителя. Например:

Таблицы с категориями

ID	TITLE	PARENT
1	Автомобили	0
2	Мотоциклы	0
3	Мазда	1
4	Хонда	1
5	Кавасаки	2
6	Харлей	2
7	Лодки	0

Как видно из таблицы, у родительской категории Автомобили есть два потомка – это Мазда и Хонда связанных по полю Parent . А у категории Мотоциклы два потомка – это Кавасаки и Харлей . При этом у категории Лодки нет потомков. Надеюсь, что Вы поняли,как связать категории.

Далее переходим от слов к практике. Создадим таблицу Categories.

 CREATE TABLE IF NOT EXISTS `categories` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT, `title` varchar(255) NOT NULL, `parent` int(10) unsigned NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=20 ; -- -- Дамп данных таблицы `categories` -- INSERT INTO `categories` (`id`, `title`, `parent`) VALUES (1, 'Автомобили', 0), (2, 'Мотоциклы', 0), (3, 'Мазда', 1), (4, 'Хонда', 1), (5, 'Кавасаки', 2), (6, 'Харлей', 2), (7, 'Мазда 3', 3), (8, 'Мазда 6', 3), (9, 'Седан', 7), (10, 'Хечбэк', 7), (11, 'Лодки', 0), (12, 'Лифтбэк', 8), (13, 'Кроссовер', 8), (14, 'Белый', 13), (15, 'Красный', 13), (16, 'Черный', 13), (17, 'Зеленый', 13), (18, 'Мазда CX', 3), (19, 'Мазда MX', 3); 

Алгоритм работы состоит из следующего:

• Создаем соединение с базой данных
• Получаем все данные из таблицы Categories
• Обрабатываем полученные данные изменив ключ массива на номер ID
• Из обработанного массива строим дерево зависимостей неограниченной вложенности используя метод рекурсии для построения
• Выводим наше многоуровневое меню на экран

Создаем соединение с базой данных

 query("SET NAMES 'utf8'"); /* * Это "официальный" объектно-ориентированный способ сделать это * однако $connect_error не работал вплоть до версий PHP 5.2.9 и 5.3.0. */ if ($mysqli->connect_error) < die('Ошибка подключения (' . $mysqli->connect_errno . ') ' . $mysqli->connect_error); > /* * Если нужно быть уверенным в совместимости с версиями до 5.2.9, * лучше использовать такой код */ if (mysqli_connect_error())

Пишем функцию получения данных из таблицы Categories

 //Получаем массив нашего меню из БД в виде массива function getCat($mysqli)< $sql = 'SELECT * FROM `categories`'; $res = $mysqli->query($sql); //Создаем масив где ключ массива является ID меню $cat = array(); while($row = $res->fetch_assoc()) < $cat[$row['id']] = $row; >return $cat; > 

Получаем массив вот такого вида, где ключ массива это ID категории.

Далее нам нужно из этого массива построить дерево зависимости дочерних элементов от родительских проходя рекурсивно по всему массиву.

Функция построения дерева из массива от Tommy Lacroix

 //Функция построения дерева из массива от Tommy Lacroix function getTree($dataset) < $tree = array(); foreach ($dataset as $id =>&$node) < //Если нет вложений if (!$node['parent'])< $tree[$id] = &$node; >else < //Если есть потомки то перебераем массив $dataset[$node['parent']]['childs'][$id] = &$node; >> return $tree; > 

Получаем массив в виде дерева

Скрипт целиком

Результат работы

Многоуровневое меню на PHP + MySQL для админки

Если Вы хотите использовать данное меню в админке своего сайта, то нужно переписать пару функций tplMenu() , showCat() .

 '.$category['title'].''; >else< $menu = ''.$str.' '.$category['title'].''; > if(isset($category['childs'])) < $i = 1; for($j = 0; $j < $i; $j++)< $str .= '→'; >$i++; $menu .= showCat($category['childs'], $str); > return $menu; > /** * Рекурсивно считываем наш шаблон **/ function showCat($data, $str) < $string = ''; $str = $str; foreach($data as $item)< $string .= tplMenu($item, $str); >return $string; > //Получаем HTML разметку $cat_menu = showCat($tree, ''); //Выводим на экран echo 'Выбери '. $cat_menu .''; ?> 

Источник