Строим дерево категорий на 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.
Структура таблицы категорий
use webdevkin;
create table categories (
id int(10) unsigned not null auto_increment,
category varchar(255) not null,
parent_id int(10) unsigned not null,
number int(11) unsigned not null,
primary key (id)
)
engine = innodb
auto_increment = 18
avg_row_length = 963
character set utf8
collate utf8_general_ci;
Тестовые данные
use webdevkin;
SET NAMES 'utf8';
INSERT INTO categories(`id`, `category`, `parent_id`, `number`) VALUES
(1, 'Ноутбуки', 0, 1),
(2, 'Acer', 1, 1),
(3, 'Lenovo', 1, 2),
(4, 'Apple', 1, 3),
(5, 'Macbook Air', 4, 1),
(6, 'Macbook Pro', 4, 2),
(7, 'Sony Vaio', 1, 4),
(8, 'Смартфоны', 0, 2),
(9, 'iPhone', 8, 1),
(10, 'Samsung', 8, 2),
(11, 'LG', 8, 3),
(12, 'Vertu', 8, 4),
(13, 'Комплектующие', 0, 3),
(14, 'Процессоры', 13, 1),
(15, 'Память', 13, 2),
(16, 'Видеокарты', 13, 3),
(17, 'Жесткие диски', 13, 4);
Теперь можно посмотреть на таблицу 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. Отправить информацию в браузер
Список простой, и с реализацией возникнуть проблем не должно. В начале файла объявим нужные константы для подключения к базе.
// Объявляем нужные константы
define('DB_HOST', 'localhost');
define('DB_USER', 'user');
define('DB_PASSWORD', 'password');
define('DB_NAME', 'webdevkin');
Затем пишем функцию подключения к базе данных, используем mysqli.
// Подключаемся к базе данных
function connectDB() {
$errorMessage = 'Невозможно подключиться к серверу базы данных';
$conn = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
if (!$conn)
throw new Exception($errorMessage);
else {
$query = $conn->query('set names utf8');
if (!$query)
throw new Exception($errorMessage);
else
return $conn;
}
}
Дальше нам нужно вытащить список категорий из таблицы. Здесь нужно немного забежать вперед. Библиотека jstree принимает на вход json. Допустимые форматы описаны на сайте библиотеки jstree.com. Мы возьмем самый удобный для нас и будем отдавать с сервера сразу подготовленные данные. Этот формат выглядит так:
[
{ "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
{ "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
{ "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
{ "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
]
Пример взят из документации, мы же для удобства в качестве id будем использовать просто id из нашей базы - число без префикса ajson. Переходим к функции получения категорий из таблицы БД
// Вытаскиваем категории из БД
function getCategories($db) {
$query = "
SELECT
id AS `id`,
IF (parent_id = 0, '#', parent_id) AS `parent`,
category as `text`
FROM
categories
ORDER BY
`parent`, `number`
";
$data = $db->query($query);
$categories = array();
while ($row = $data->fetch_assoc()) {
array_push($categories, array(
'id' => $row['id'],
'parent' => $row['parent'],
'text' => $row['text']
));
}
return $categories;
}
Здесь мы выполняем обычный запрос select к таблице categories, вытаскиваем 3 нужных поля, попутно немного преобразовывая их к требуемому формату. id прокидываем без изменений, parent_id мы возвращаем как parent, причем для корневых категорий возвращаем #. А поле category будет проходить как text. Данные получены, осталось загнать их в массив, который мы будем конвертировать в json и отдавать браузеру. Это видно в основном потоке скрипта
try {
// Подключаемся к базе данных
$conn = connectDB();
// Получаем данные из массива GET
$action = $_GET['action'];
switch ($action) {
case 'get_categories':
$result = getCategories($conn);
break;
default:
$result = 'unknown action';
break;
}
// Возвращаем клиенту успешный ответ
echo json_encode(array(
'code' => 'success',
'result' => $result
));
}
catch (Exception $e) {
// Возвращаем клиенту ответ с ошибкой
echo json_encode(array(
'code' => 'error',
'message' => $e->getMessage()
));
}
На что нужно обратить внимание. В нашем конкретном случае передача get-параметра action выглядит лишней, но это до тех пор, пока файл index.php служит для одной-единственной задачи - вернуть список категорий. Вскоре будет опубликована статья с развитием функционала дерева, в частности, реализация drag-and-drop на клиенте и обновление соответствующих данных на сервере. В ней мы увидим, что передача get-параметра в качестве указания необходимого действия - это достаточно удобная тема.
И насчет ответа клиенту. Поле code всегда указывает на статус выполнения запроса - success или error. В случае успеха массив категорий возвращается в поле result, при каких-то неполадках в поле message приходит сообщение об ошибке.
С серверной частью нашего приложения все, переходим на клиента.
Разметка для страницы нашего каталога - index.html
Если Вы уже посмотрели демо приложения, то увидели, что разметка предельно проста. Есть 2 главных контейнера: слева - для дерева категорий, справа - заглушка для списка товаров. В секции head будет такой код:
Webdevkin. Дерево категорий
В секции body тоже нехитро.
Webdevkin. Дерево категорий на javascript, php и mysql
Список товаров
И добавим немного разметки в main.css
body {
font-family: Ubuntu;
font-size: 16px;
font-weight: 400;
}
.container {
position: relative;
width: 960px;
margin: 0 auto;
}
.column {
display: inline-block;
vertical-align: top;
}
.categories {
width: 30%;
}
С html/css закончили и теперь переходим к самому интересному - javasctipt-коду создания дерева. Здесь-то мы и соберем воедино весь задуманный функционал.
main.js - инициализация приложения
Если Вы читали предыдущие статьи, например, про создание корзины для интернет-магазина на фронте или про встраиваемые виджеты на нативном javascript, то можете вспомнить, что схема js-кода у меня приблизительно одинакова для всех случаев.
Применим ее и здесь: создадим js-модуль, основанный на замыкании, закэшируем нужные элементы dom, напишем несколько приватных методов и один публичный - метод инициализации приложения.
Каркас модуля
'use strict';
// Модуль приложения
var app = (function($) {
// Инициализируем нужные переменные
var ajaxUrl = '/php',
ui = {
$categories: $('#categories'),
$goods: $('#goods')
};
// Инициализация дерева категорий с помощью jstree
function _initTree(data) {
// ...
}
// Загрузка категорий с сервера
function _loadData() {
// ...
}
// Инициализация приложения
function init() {
_loadData();
}
// Экспортируем наружу
return {
init: init
}
})(jQuery);
jQuery(document).ready(app.init);
Как видим в последней строчке, после загрузки документа мы вывываем метод app.init(), который в свою очередь загружает данные с сервера и передает их в метод создания дерева. В ajaxUrl пишем адрес нашего серверного скрипта, в объекте ui будут закешированы два dom-элемента.
Получаем данные с сервера - метод _loadData()
// Загрузка категорий с сервера
function _loadData() {
var params = {
action: 'get_categories'
};
$.ajax({
url: ajaxUrl,
method: 'GET',
data: params,
dataType: 'json',
success: function(resp) {
// Инициализируем дерево категорий
if (resp.code === 'success') {
_initTree(resp.result);
} else {
console.error('Ошибка получения данных с сервера: ', resp.message);
}
},
error: function(error) {
console.error('Ошибка: ', error);
}
});
}
Здесь пишем самый обычный ajax-запрос к серверному скрипту, получаем данные с категориями и в случае успеха передаем их функции инициализации дерева _initTree(). Мы помним, что данные с сервера нам приходят в формате json, поэтому укажем сразу dataType: 'json'. А нужная инфа придет в поле result, поэтому в _initTree мы передаем именно resp.result. Обработать ошибки можно как угодно, для примера просто выкинем их в консоль.
И дальше то, ради чего все и затевалось - как нам построить красивое дерево на javascript?
Построение дерева в функции _initTree, используем jstree
// Инициализация дерева категорий с помощью jstree
function _initTree(data) {
ui.$categories.jstree({
core: {
check_callback: true,
multiple: false,
data: data
},
plugins: ['dnd']
}).bind('changed.jstree', function(e, data) {
var category = data.node.text;
ui.$goods.html('Товары из категории ' + category);
console.log('node data: ', data);
});
}
И это все, что нужно! Выглядит визуально самая сложная часть приложения до безобразия просто. Нужно к определенному элементу dom всего лишь применить метод jstree с некоторыми параметрами. В нашем случае передаем сами данные в поле data, multiple: false указывает, что нам не нужно множественное выделение, а check_callback: true говорит о том, что хотим после изменения дерева что-то еще и сделать.
В поле plugins перечисляем в массиве желаемые плюшки. Остановимся на dnd - drag-and-drop - прикрутим возможность изменять структуру дерева мышкой. Это очень удобная штука, но пока не функциональная. Можно сколько угодно играться с деревом в браузере, но после обновления страницы увидим старую структуру каталога. Это логично, потому что данные берутся с сервера, и мы не написали кода для обновления mysql при клиентских событиях. Этому будет посвящена одна из следующих статей, а пока будем баловаться, передвигая категории мышкой в браузере.
И напоследок методом bind связываем событие изменения в дереве с каким-то полезным действием. В нашем примере просто выведем надпись с названием категории, но в реальном приложении здесь стоит подтягивать список товаров с сервера. Откуда взялось category = data.node.text? Откройте консоль браузера и увидите, какие еще данные о выбранном узле нам доступны.
Итого
В этой статье полноценный каталог для работы интернет-магазина мы не построили - идея была не в том. Я хотел сосредоточиться на том, как от начала до конца максимально просто построить такую полезную структуру как дерево. Сознательно были пропущены некоторые моменты, а именно, более плотная работа с самим деревом и синхронизация действий клиента с сервером, а также построение списка товаров при клике категории. Для первого варианта выпущу отдельную статью.
UPDATED: Запилил статью, где показывается, как перемещать отдельные элементы дерева мышкой, методом drag-and-drop, и синхронизировать эти данные с сервером. Немного кода на клиенте и сервере - и вуаля! Ссылка чуть ниже под нумером 4.
Нужные ссылки
1. Демо-страница приложения
2. Скачать архив с исходниками
3. Библиотека jstree
4. Развиваем дерево категорий, реализуем перемещение на клиенте и сервере
5. Все статьи из серии интернет-магазины
Истории из жизни айти и обсуждение кода.