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

Community · Accepted Answer · 2017-05-23 11:56:45Z

2

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);

edited May 23, 2017 at 11:56

CommunityBot

11 silver badge

answered Dec 19, 2013 at 21:40

brandonscript

73.8k35 gold badges179 silver badges240 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Rien Over a year ago

Thank you very much. I will sure look into JsTree for the future. BUt for now, i am a 2nd year programming school student and just started learning php, i would like to create it myself. But thank you, sure will look into this.

brandonscript Over a year ago

Alright, gave you some code -- it's untested, but should get you started.

Rien Over a year ago

thank you helping me out, can't test right now. I need to sleep. Will check it tomorrow morning and will give you feedback, thank you very much.

Rien Over a year ago

It's working sort of, It shows every file and folder. But not in the correct order. ill show what there is being displayed inside my question

Rien Over a year ago

r3mus Thank you very much, you are fantastic. Thank you very much for keep helping me. And ofcourse big thanks to @Musa ! Again thanks you very much r3mus

Collectives™ on Stack Overflow

Dynamic PHP file array to list items

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related