To create a dynamic tree view in PHP where users placed on the "left" or "right" appear on the corresponding side of their parent node, you can extend the previous implementation by separating the left and right children in the tree structure and rendering them accordingly.
Here's how you can achieve this:
### 1. **Modified Tree Building Function:**
You need to split users into "left" and "right" positions when building the tree.
```php
<?php
// Function to build the tree with separate left and right children
function buildTree($users, $parentId = null) {
$branch = ['left' => [], 'right' => []];
foreach ($users as $user) {
if ($user['placement'] == $parentId) {
if ($user['position'] == 'left') {
$branch['left'][] = [
'userid' => $user['userid'],
'children' => buildTree($users, $user['userid'])
];
} else if ($user['position'] == 'right') {
$branch['right'][] = [
'userid' => $user['userid'],
'children' => buildTree($users, $user['userid'])
];
}
}
}
return $branch;
}
```
### 2. **Display Tree with Separate Left and Right Sections:**
Now, display the tree so that the left children are on the left and the right children are on the right.
```php
<?php
// Function to display the tree with left and right sections
function displayTree($tree) {
echo '<div class="tree-container">';
// Left side
if (!empty($tree['left'])) {
echo '<div class="left-branch">';
echo '<ul>';
foreach ($tree['left'] as $node) {
echo '<li>' . $node['userid'];
if (!empty($node['children'])) {
displayTree($node['children']);
}
echo '</li>';
}
echo '</ul>';
echo '</div>';
}
// Parent node placeholder (root)
echo '<div class="parent-node">Parent</div>';
// Right side
if (!empty($tree['right'])) {
echo '<div class="right-branch">';
echo '<ul>';
foreach ($tree['right'] as $node) {
echo '<li>' . $node['userid'];
if (!empty($node['children'])) {
displayTree($node['children']);
}
echo '</li>';
}
echo '</ul>';
echo '</div>';
}
echo '</div>';
}
?>
```
### 3. **Add Styling to Align Left and Right Branches:**
To visually separate the left and right branches, you can use CSS to style the layout accordingly.
```html
<style>
.tree-container {
display: flex;
justify-content: space-between;
align-items: center;
margin: 20px 0;
}
.left-branch, .right-branch {
width: 40%;
}
.parent-node {
width: 20%;
text-align: center;
font-weight: bold;
}
ul {
list-style-type: none;
}
ul ul {
margin-left: 20px;
}
li {
margin: 5px 0;
}
</style>
```
### 4. **Complete Example:**
```php
<?php
// Database connection
$conn = new mysqli('localhost', 'username', 'password', 'database');
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Fetch all users
$sql = "SELECT * FROM users";
$result = $conn->query($sql);
$users = [];
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$users[] = $row;
}
}
// Function to build the tree with separate left and right children
function buildTree($users, $parentId = null) {
$branch = ['left' => [], 'right' => []];
foreach ($users as $user) {
if ($user['placement'] == $parentId) {
if ($user['position'] == 'left') {
$branch['left'][] = [
'userid' => $user['userid'],
'children' => buildTree($users, $user['userid'])
];
} else if ($user['position'] == 'right') {
$branch['right'][] = [
'userid' => $user['userid'],
'children' => buildTree($users, $user['userid'])
];
}
}
}
return $branch;
}
// Function to display the tree with left and right sections
function displayTree($tree) {
echo '<div class="tree-container">';
// Left side
if (!empty($tree['left'])) {
echo '<div class="left-branch">';
echo '<ul>';
foreach ($tree['left'] as $node) {
echo '<li>' . $node['userid'];
if (!empty($node['children'])) {
displayTree($node['children']);
}
echo '</li>';
}
echo '</ul>';
echo '</div>';
}
// Parent node placeholder (root)
echo '<div class="parent-node">Parent</div>';
// Right side
if (!empty($tree['right'])) {
echo '<div class="right-branch">';
echo '<ul>';
foreach ($tree['right'] as $node) {
echo '<li>' . $node['userid'];
if (!empty($node['children'])) {
displayTree($node['children']);
}
echo '</li>';
}
echo '</ul>';
echo '</div>';
}
echo '</div>';
}
// Build the tree
$tree = buildTree($users);
// Display the tree
displayTree($tree);
?>
<style>
.tree-container {
display: flex;
justify-content: space-between;
align-items: center;
margin: 20px 0;
}
.left-branch, .right-branch {
width: 40%;
}
.parent-node {
width: 20%;
text-align: center;
font-weight: bold;
}
ul {
list-style-type: none;
}
ul ul {
margin-left: 20px;
}
li {
margin: 5px 0;
}
</style>
```
<?php
// Function to build the tree with separate left and right children using array()
function buildTree($users, $parentId = null) {
$branch = array('left' => array(), 'right' => array());
foreach ($users as $user) {
// If placement is NULL or empty string, this is the head of the tree
if ($user['placement'] == $parentId || ($parentId === null && $user['placement'] == '')) {
if ($user['position'] == 'left') {
$branch['left'][] = array(
'userid' => $user['userid'],
'children' => buildTree($users, $user['userid']) // Recursively call for children
);
} elseif ($user['position'] == 'right') {
$branch['right'][] = array(
'userid' => $user['userid'],
'children' => buildTree($users, $user['userid'])
);
}
}
}
return $branch;
}
?>
### Result:
- The parent node (root) will be displayed in the center.
- The "left" children will appear on the left side.
- The "right" children will appear on the right side.
- Any subsequent children will be recursively displayed under their respective parent.
This setup ensures that left and right nodes are clearly separated on the tree.
Here many types of latest technology news, many useful (tools, software, apps, website, technical problem solution )If you have any query regrading Site, Advertisement and any other issue, please feel free to contact me