File tree viewer on PHP pages – Part 2

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>
	<link rel="stylesheet" href="filetree.css" type="text/css" />

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 :

		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…
include "FileTree.class.php";
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.

echo $treeDir->_buildHtml();
Ok, this is where i want to stop for a moment before we continue.

As i said in part 1, The 2 classes FileTreeDir and FileTreeFile have a util method called _buildHtml.
If you look closely, the FileTreeDir class has another utility function, called _generateSubDirOutput.
So, our buildTree function returned a fileTreeDir object, filled with sub directories and files declared under its path.

For example ,If our root folder is this :


The 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 subDirs and files that declared under it in the buildTree function.

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…



3 thoughts on “File tree viewer on PHP pages – Part 2

  1. Terese Carolan

    I simply want to say I am just very new to weblog and honestly savored this web page. Most likely I’m want to bookmark your blog . You actually come with tremendous well written articles. Many thanks for revealing your website page.

  2. Pingback: Yahoo is a nice Search Engine

Leave a Reply

Your email address will not be published. Required fields are marked *