How often do you get this feeling that nothing is impossible with PHP. Well, i thought this task is way beyond the power of PHP, and i am happy to announce (Again) that there is nothing you can’t achieve with simple coding of PHP and some investigating + testing.
Of course, there is a challenge, a big one when it comes to showing libraries (Folders) from server as file tree, but hey, this is why i am here for…
So, leaving the small talk, this is my solution to show your visitors folders with simple file tree viewer such as this (The smudging is my doing on Gimp for security,you know…) :
Behind this cool feature hide a simple OO script, with a little help from our dear friend called
DirectoryIterator, and it collect the folders and files and create a class called
FileTreeDir, but we are getting ahead of ourselves here. Lets start in the beginning.
We want to create an ordered list that with a little help of CSS will show the folders hierarchy in an windows explorer filetree like view, so the final code will look something like this :
<ol> <li class="file"><a href="file.ext">File 1</a></li> <li> <label for="subfolder1">Subfolder 1</label> <input type="checkbox" id="subfolder1" /> <ol> <li class="file"><a href="">File 2</a></li> <li class="file"><a href="">File 2</a></li> <li class="file"><a href="">File 2</a></li> </ol> </li> </ol>
As you can see, the tree is CSS designed, so, minimum HTML code with maximum advantages…
Lets get our washed hands a little dirty here.
First, lets take a look on the 3 classes we will use:
each file on the hierarchy will be introduced to the script as this class. It hold 4 variables:
- name – The name od the file as it declared on the filesystem.
- type – The file type (jpg,txt,etc…).
- path – The full path on the filesystem.
- size – The byte size of the file.
Each of these variables has a Getter and Setter, as we expect from Object Oriented class to have. We will NEVER call the parameters but its Getter or Setter (You can learn on Object Oriented in here).
Beside the Getters and Setters there is another method, called with the unique name
_buildHtml, which returns an HTML list item (“li”) to the caller. We will elaborate on this later.
This is the full hierarchy of the file tree viewer, where it begins with the root path the script get from the caller . This class holds all the directories as object, and in the next few minutes you will learn how we populate the main class with all the hierarchy.
This class holds 5 variables :
- name – The name of the directory as declared on the filesystem.
- path – The full path on the filesystem.
- subDirs – An array of
FileTreeDirs that are under the current directory in the filesystem hierarchy.
- files – An array of
FileTreeFiles that are under the current directory in the filesystem hierarchy.
- isChecked – A boolean variable indicating if the directory will be shown collapsed or open.
FileTreeFile above, this class has another method, called with the unique name
_buildHtml, which returns an HTML ordered list (“ol”) to the caller. Again, We will elaborate on this later.
The main class, which we will call in order to create the file tree view.
It looks like a little class, but frankly, this class is the “brains” of the operation.
The class has 4 variables :
- hideDirs – Directories names that we want to exclude from the tree. This is for security reasons, if we do not want to show a “top secret” folder’s content to the user. The type of this variable is an array, and it will contain the names of the directories, the specific names, not the path (Default – empty array).
- hideDirs – Like folders, but with files.If we wish to exclude specific files from the user. The type of this variable is an array, and it will contain the names of the directories, the specific names, not the path (Default – empty array).
- rootDirName – The name of the root directory. This can be what ever you wish, the default is “ROOT”.
- path – The full path to the root directory (Default – “../”).
The class has a constructor that will populate the variables with user’s definitions or default definitions.
The main method of all this operation is the recursive method
buildTree, that will recursively build the directories and files objects and return the main (root) directory object to the caller.
Ok, That was fun, but we have to get to work, people.