Ok, so, we got to know all our actors on part 1 of this tutorial, and now this is the time to get our act together and show our users the tree…
First, we need to include the CSS file in our HTML head, and it will look like that :
<!DOCTYPE html> <head> <link rel="stylesheet" href="filetree.css" type="text/css" /> </head>
This will include our CSS and add it style to the page, so the page will show our file tree as designed in the CSS file…
In your body, put the following PHP section code :
<?php include "../FileTree.class.php"; $tree = new FileTree("../"); $treeDir = $tree->buildTree(); echo $treeDir->_buildHtml(); ?>
This is it for the hands dirty part… Now, was that difficult?
I would like to explain what is going on “Behind the Scenes“, so, stay a while, at the end i will give you the download link for the sources and example…
This is a standard include statement, where we tell PHP to include the source file and its logic in the page, giving us the ability to use all functions and classes on the included page as its own (In this case, use the class declared on the included file).
$tree = new FileTree();
We instantiate the
FileTree class, as you can see, we give nothing to the constructor in this example, we simply want the class to load with the default values in the constructor. The class is loaded with defaults (You can give what ever values you wish, but remember to check the path first).
$treeDir = $tree->buildTree();
This is the actual call to the recursive action that creates a FileTreeDir object that contains all the needed information and hierarchy of the inner files and folders.
Ok, this is where i want to stop for a moment before we continue.
As i said in part 1, The 2 classes
FileTreeFile have a util method called
If you look closely, the
FileTreeDir class has another utility function, called
buildTree function returned a
fileTreeDir object, filled with sub directories and files declared under its path.
For example ,If our root folder is this :
ROOT --file1 --file2 --subdir1 --innerFile1 --innerFile2
buildTree() function will return a
FileTreeDir that its
subDirs variable is an array holding a
FileTreeDir named “subdir1” that holds 2
FileTreeFile in its files array variable (In the above example “innerFile1” and “innerFile2”). In the root class in the files array variables will be 2
FileTreeFile declared directly under it (In the above example “file1” and “file2”).
In order to make an HTML element from this class, we have to run over all its sub directories and create an ordered list from it to paste to the HTML part of the page.
Another thing to remember from part 1 is that a file will be an item on the list (“li”), and a sub directory will be an inner ordered list (“ol”), so the tree will be collapsible and organized as much as possible.
So, once we get the response from the
buildTree method, we call the
_buildHtml for the root directory, the main object that returned.
The root directory object will create an ordered list and start run over the inner
files that declared under it in the
First, it will get all subDirs and add them to the list as an inner list. Although
_generateSubDirOutput looks like a recursive function, it is not. It always call the
_buildHtml of the inner directory and because each inner directory holds all its own inner directories, it creates the ability to go as deep as it gets in the hierarchy.
So now the
_buildHtml will return an ordered list for the root directory and its children directories and files, and you end up with a strong, CSS driven, file tree viewer, just like you dream…
Go ahead, download the code and see for yourself how easy, fast and reliable is this fine script.
Hey, don’t forget to like this and share with the world…