Dynamic PHP file array to list items

Question

I am currently working on a my own project. A part of this is, give a file path and it searches that path/folder for all files and sub-folders and add those to an array.

This code send the file path "../" to the function wps_files and from this a whole multi-dimensional array is created.

The HTML.php

<?php               
    echo '<pre>';
    print_r( wps_files('../') );
    echo '</pre>';
?>

And here is the function inside the php script.

<?php

function wps_files($path) {
    $wpsdir = Array(
        'Root' => $path,
        'Structure' =>  wps_glob($path)
    );
    return $wpsdir;
}

function wps_glob($dir) {
    foreach (glob($dir . '/*') as $f) {
        if(is_dir($f)) 
        {
            $r[] = array(basename($f) => wps_glob($f));
        } 
        else 
        {
            $r[] = basename($f);
        }
    }
    return $r;
}

Now I want to create a fancy css file-tree. So here comes my question, how do i make from this array a proper written list? As in,

Every dimensional array is tagged inside a <ul></ul> and every item inside that array is also surrounded with <li></li> hard to explain, see this code. This is want i would like to achieve.

<ul>
    <li>ROOT[the file where the search for folders/files starts in]
        <ul>
            <li>Index.php[file inside root]</li>
            <li>Website[folder inside root]
            <li>
                <ul>
                    <li>HTML[folder inside Website]
                        <ul>
                            <li>Index.html</li>
                            <li>Contact.html</li>
                            <li>Info.html</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

I have been struggling to get this achieved but got nowhere so far. Help would be much appreciated, and explanation of course. Since i am here to learn. not to copy paste.

Thank you very much!

EDIT:

This is what currently is being displayed. It shows every file from the array, but not in the correct order.

0: Index.php
0: Javascript.js
1: Jquery.js
0: Get_Server_files.Script.php
0: General.css
1: Menu.css
2: Style.css
0: WelcomeImage0.png
1: WelcomeImage1.png
2: WelcomeImage2.png
3: WelcomeImage3.png
4: WelcomeImage4.png
5: WelcomeImage5.png
6: WelcomeImage6.png
WelcomeImages: 
0
1: bg.jpg
HTML: 
Javascript: 
Scripts: 
Style: 
images: 
0
1
2: New Text Document.txt
3
4
5

Answer 1

Opinion: I'd recommend taking the output multidimensional array, converting it to JSON using json_encode() , and then implement something like jsTree on the front end to handle the collapsible nodes.

While coding something like this from scratch is possible, it's a heck of a lot of work when it's already been done before you.

That said, if you do decide to do it on your own, you'll find outputting the array as JSON will be much easier to style on the front end, as it natively transcribes into Javascript objects.

Also a #protip: if you do output the result as JSON in a separate PHP file, say your code is structured like so...

/index.php
/data/json.php

...ensure that json.php has the correct header set .

---

New Solution, so good:

PHP has the built in RecursiveDirectoryIterator and DomDocument classes. You can use these together to accomplish the entire recursive folder dump in one go. HUGE BIG THANKS to @Musa for the original solution .

$dir = "/path/to/your/folder";
$iterator = new RecursiveIteratorIterator(new RecursiveDirectoryIterator($dir));

$dom = new DomDocument("1.0");
$list = $dom->createElement("ul");
$dom->appendChild($list);
$node = $list;
$depth = 0;
foreach($iterator as $name => $item)
{  
    if ($iterator->getDepth() == $depth)
    {
        $li = $dom->createElement('li', $item->getFilename());
        $node->appendChild($li);
    }
    elseif ($iterator->getDepth() > $depth)
    {
        $li = $node->lastChild;
        $ul = $dom->createElement('ul');
        $li->appendChild($ul);
        $ul->appendChild($dom->createElement('li', $item->getFilename()));
        $node = $ul;
    }
    else
    {
        $difference = $depth - $iterator->getDepth();
        for ($i = 0; $i < $difference; $difference--)
            $node = $node->parentNode->parentNode;
        $li = $dom->createElement('li', $item->getFilename());
        $node->appendChild($li);
    }
    $depth = $iterator->getDepth();
}
echo $dom->saveHtml();

Old Solution, not so good:

Since we're not doing this, however, the solution looks something like:

function arrayToList($array) {
    $output = "<ul>";
    foreach($array as $key => $value)
        {
        if(!is_array($value))
        {
            $output = $output."<li>$key: $value</li>";
        }
        else 
            $output = $output."<li>$key".arrayToList($value)."</li>";
    }
    $output = $output."</ul>";
    return $output; 
}

Use it like so:

echo arrayToList($yourMultiDimensionalArray);