How to show tree view in php?

Question

I am developing Tree View in php, how to connect my php array code in html UI designs.

My Php code is:

<?php
 //if order by parentid, id
$arr = array(
array('id'=>100, 'parentid'=>0, 'name'=>'first'),
array('id'=>101, 'parentid'=>100, 'name'=>'second'),
array('id'=>102, 'parentid'=>100, 'name'=>'third'),
array('id'=>103, 'parentid'=>100, 'name'=>'fourth'),
array('id'=>104, 'parentid'=>101, 'name'=>'five'),
array('id'=>105, 'parentid'=>102, 'name'=>'six'),
array('id'=>106, 'parentid'=>103, 'name'=>'seven'),
array('id'=>107, 'parentid'=>101, 'name'=>'eight'),
array('id'=>108, 'parentid'=>101, 'name'=>'nine'),
array('id'=>109, 'parentid'=>102, 'name'=>'ten'),
);
$arr_tree = array();
$arr_tmp = array();
foreach ($arr as $item) {
$parentid = $item['parentid'];
$id = $item['id'];

if ($parentid  == 0)
{
    $arr_tree[$id] = $item;
    $arr_tmp[$id] = &$arr_tree[$id];
}
else 
{
    if (!empty($arr_tmp[$parentid])) 
    {
        $arr_tmp[$parentid]['children'][$id] = $item;
        $arr_tmp[$id] = &$arr_tmp[$parentid]['children'][$id];
    }
   }
 }
unset($arr_tmp);
echo '<pre>'; print_r($arr_tree); echo "</pre>";
?>

and my html UI code

<div class="tree">  
  <ul>
    <li>
      <a href="#"></a>
      <ul>
        <li><a href="#"></a>
            <ul>
              <li><a href="#"></a></li>
              <li><a href="#"></a></li>
              <li><a href="#"></a></li>
            </ul>
        </li>
        <li><a href="#"></a>
            <ul>
              <li><a href="#"></a></li>
              <li><a href="#"></a></li>
              <li><a href="#"></a></li>
            </ul>
        </li>
        <li><a href="#"></a>
            <ul>
              <li><a href="#"></a></li>
              <li><a href="#"></a></li>
              <li><a href="#"></a></li>
            </ul>
        </li>
      </ul>
    </li>       

  </ul>
 </div>

and style sheet code

* {margin: 0; padding: 0;}
.tree ul {
 padding-top: 20px; position: relative;  
 transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.tree li {
 float: left; text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;  
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
 }
 .tree li::before, .tree li::after{
 content: '';
 position: absolute; top: 0; right: 50%;
 border-top: 1px solid #ccc;
 width: 50%; height: 20px;
 }
 .tree li::after{
   right: auto; left: 50%;
  border-left: 1px solid #ccc;
 }
.tree li:only-child::after, .tree li:only-child::before {
 display: none;
 }
.tree li:only-child{ padding-top: 0;}
.tree li:first-child::before, .tree li:last-child::after{
 border: 0 none;
 }
.tree li:last-child::before{
 border-right: 1px solid #ccc;
 border-radius: 0 5px 0 0;
 -webkit-border-radius: 0 5px 0 0;
 -moz-border-radius: 0 5px 0 0;
 }
.tree li:first-child::after{
 border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
}
.tree ul ul::before{
 content: '';
 position: absolute; top: 0; left: 50%;
 border-left: 1px solid #ccc;
 width: 0; height: 20px;
 }
 .tree li a{
  border: 1px solid #ccc;

 text-decoration: none;
 color: #666;
 font-family: arial, verdana, tahoma;
 font-size: 11px;
 display: inline-block;
 background: url('people.png');
 -webkit-border-radius: 50%;
  -moz-border-radius: 5px;
 transition: all 0.5s;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 width: 40px;
 height: 40px;
 }
 .tree li a:hover, .tree li a:hover+ul li a {
 background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
 }
 .tree li a:hover+ul li::after, 
 .tree li a:hover+ul li::before, 
 .tree li a:hover+ul::before, 
 .tree li a:hover+ul ul::before{
 border-color:  #94a0b4;
 }

How to integrate my php code in html UI

my desired result is like this image

Answer 1

We can use a "real" tree in php code and that makes the things much easier.

class Branch {
  public $branches = [];
  public $name;

  public function __construct($name) {
    $this->name = $name;
  }

  public function to_html() {
    $str = '<li><a href="#">' . $this->name . "</a>\n";
    if (!empty($this->branches)) {
      $str .= '<ul>';
      foreach ($this->branches as $branch) {
        $str .= $branch->to_html();
      }
      $str .= '</ul>';
    }
    $str .= "</li>\n";
    return $str;
  }
}

$tree = new Branch("first");
$tree->branches[] = new Branch("second");
$tree->branches[] = new Branch("third");
$tree->branches[] = new Branch("fourth");
$tree->branches[0]->branches[] = new Branch("five");
$tree->branches[0]->branches[] = new Branch("eight");
$tree->branches[0]->branches[] = new Branch("nine");
$tree->branches[1]->branches[] = new Branch("six");
$tree->branches[1]->branches[] = new Branch("ten");
$tree->branches[2]->branches[] = new Branch("seven");

$html = $tree->to_html();

The output html will be

first

• second
  • five
  • eight
  • nine
• third
  • six
  • ten
• fourth
  • seven

Answer 2

as php is html embedeble code you can use php any where in html like after head before head after body and so on.. just echo what you want user to see in html code for example