This PHP script will assist if you wish to show an Amazon-like product class tree. It is going to be helpful for displaying the class menu in a hierarchical order, identical to a tree.
The specialty of this PHP code is that it builds a multi-level class tree with infinite depth. It makes use of the recursion technique to acquire this.
In a earlier tutorial, we have now to see a multi-level dropdown menu with a set depth.
Let’s look into the upcoming sections to see how the code is constructed to show the class tree in a web page.
Class Database
This script comprises the class database with information. The insert question creates class data that are mapped with its father or mother appropriately.
The class data containing father or mother=0 are often called the principle class. Every file has the type order to set the show precedence on the UI.
construction.sql
CREATE TABLE `class` (
`id` int(10) UNSIGNED NOT NULL,
`category_name` varchar(50) COLLATE utf8mb4_unicode_ci NOT NULL,
`father or mother` int(10) UNSIGNED NOT NULL DEFAULT 0,
`sort_order` int(11) NOT NULL DEFAULT 0
);
--
-- Dumping information for desk `class`
--
INSERT INTO `class` (`id`, `category_name`, `father or mother`, `sort_order`) VALUES
(1, 'Options', 0, 0),
(2, 'Area', 0, 1),
(3, 'Digital', 0, 2),
(4, 'Reward playing cards', 1, 0),
(5, 'Worldwide', 1, 1),
(6, 'Common', 1, 2),
(7, 'e-Reward playing cards', 4, 0),
(8, 'Enterprise present playing cards', 4, 1),
(9, 'In provide', 5, 0),
(10, 'Delivery', 5, 1),
(11, 'Superstar favourites', 6, 0),
(12, 'Present 12 months hits', 6, 1),
(13, 'Electronics', 2, 0),
(14, 'Arts', 2, 1),
(15, 'Devices', 2, 2),
(16, 'Digicam', 13, 0),
(17, 'Automobile digital equipment', 13, 1),
(18, 'GPS', 13, 2),
(19, 'Handcrafted', 14, 0),
(20, 'Gold enameled', 14, 1),
(21, 'Jewellery', 14, 2),
(22, 'Cloth', 19, 0),
(23, 'Needle work', 19, 1),
(24, 'PSP', 15, 0),
(25, 'Good telephones', 15, 1),
(26, 'Apps', 3, 0),
(27, 'Music', 3, 1),
(28, 'Films', 3, 2),
(29, 'Dev apps', 26, 0),
(30, 'App Hardwares', 26, 1),
(31, 'Podcasts', 27, 0),
(32, 'Dwell', 27, 1),
(33, 'Lately seen', 28, 0),
(34, 'Chances are you'll like', 28, 1),
(35, 'Blockbusters', 28, 2);
--
-- Indexes for dumped tables
--
--
-- Indexes for desk `class`
--
ALTER TABLE `class`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for desk `class`
--
ALTER TABLE `class`
MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=36;
Class menu rendering in HTML
That is an initiator that calls the PHP recursive parsing to get the Class Tree HTML. Within the PHP ZipArchive put up, we used the identical recursion idea to compress the contents of the enclosed directories.
Additionally, it has a UI holder to render the HTML hierarchical class menu.
A PHP class CategoryTree is created to learn and parse the class array from the database.
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta identify="viewport" content material="width=device-width, initial-scale=1.0">
</head>
<physique>
<?php
require_once __DIR__ . '/CategoryTree.php';
$categoryTree = new CategoryTree();
$categoryResult = $categoryTree->getCategoryResult();
?>
<h1>Select class</h1>
<div class="category-menu">
<?php
echo $categoryTree->getCategoryTreeHTML($categoryResult);
?>
</div>
</physique>
</html>
This kinds provides the class tree a delightful look. Because it shows an infinite stage of kid classes, this CSS will assist to rectify the default UI constraints.
physique {
font-family: Arial;
margin-left: 10px;
margin-right: 20px;
}
ul.category-container li {
list-style: none;
padding-left: 10px;
width: 100%;
}
.category-container a {
text-decoration: none;
colour: #000;
}
.parent-depth-0 {
font-size: 22px;
font-weight: daring;
border-bottom: #ccc 1px stable;
padding: 15px 0px 15px 0px;
}
.parent-depth-all {
font-size: 16px;
padding-top: 15px;
font-weight: regular;
}
.no-child {
font-size: 16px;
font-weight: regular;
padding: 15px 0px 0px 0px;
}
.category-menu {
width: 270px;
overflow-y: scroll;
max-height: 800px;
background: #fffcf2;
padding: 0px;
}
ul.category-container {
padding: 10px;
}
Learn class information and construct in tree format
That is the principle PHP class that reads the dynamic classes from the database.
The getCategoryTreeHTML the operate parses the class consequence array. It recursively calls and parses the degrees of class by its father or mother.
In WordPress, there’s a class walker to parse the phrases and taxonomies. We have now created a customized WordPress walker to parse classes effectively.
It units the argument father or mother=0 to construct parent-level class menu gadgets.
The resultant class tree HTML might be a nested UL-LI listing to point out the multi-level menu.
CategoryTree.php
<?php
class CategoryTree
{
non-public $connection;
operate __construct()
{
$this->connection = mysqli_connect('localhost', 'root', '', 'db_category_tree');
}
operate getCategoryTreeHTML($class, $father or mother = 0)
{
$html = "";
if (isset($class['parentId'][$parent])) {
$html .= "<ul class="category-container">n";
foreach ($class['parentId'][$parent] as $cat_id) {
if (! isset($class['parentId'][$cat_id])) {
$youngster = "";
if ($class['categoryResult'][$cat_id]['parent'] != 0) {
$youngster = "no-child";
}
$html .= "<li class="$youngster " . "parent-" . $class["categoryResult'][$cat_id]['parent'] . "' >n" . $class['categoryResult'][$cat_id]['category_name'] . "</li> n";
}
if (isset($class['parentId'][$cat_id])) {
$parentDepth0 = "parent-depth-all";
if ($class['categoryResult'][$cat_id]['parent'] == 0) {
$parentDepth0 = "parent-depth-0";
}
$html .= "<li class="$parentDepth0 " . "parent-' . $class['categoryResult'][$cat_id]['parent'] . "'>n " . $class['categoryResult'][$cat_id]['category_name'] . " n";
$html .= $this->getCategoryTreeHTML($class, $cat_id);
$html .= "</li> n";
}
}
$html .= "</ul> n";
}
return $html;
}
operate getCategoryResult()
{
$question = "SELECT * FROM class ORDER BY father or mother, sort_order";
$consequence = mysqli_query($this->connection, $question);
$class = array();
whereas ($row = mysqli_fetch_assoc($consequence)) {
$class['categoryResult'][$row['id']] = $row;
$class['parentId'][$row['parent']][] = $row['id'];
}
return $class;
}
}
?>
The place class tree code can be utilized?
The class tree is utilized in many locations. For instance, most purchasing cart web sites have a class filter or menu to categorise the showcase merchandise.
The Amazon store’s class menu adverts worth to the top consumer to slim down the huge space to seek out their space of curiosity.
Additionally, tutorial web sites show the desk of contents within the type of a tree order.
