File tree viewer on PHP pages – Part 1

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…) :

fileexplorer

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:

FileTreeFile

each file on the hierarchy will be introduced to the script as this class. It hold 4 variables:

  1. name – The name od the file as it declared on the filesystem.
  2. type – The file type (jpg,txt,etc…).
  3. path – The full path on the filesystem.
  4. 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.

FileTreeDir

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 :

  1. name – The name of the directory as declared on the filesystem.
  2. path – The full path on the filesystem.
  3. subDirs – An array of FileTreeDirs that are under the current directory in the filesystem hierarchy.
  4. files – An array of FileTreeFiles that are under the current directory in the filesystem hierarchy.
  5. isChecked – A boolean variable indicating if the directory will be shown collapsed or open.

Like the 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.

FileTree

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 :

  1. 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).
  2. 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).
  3. rootDirName – The name of the root directory. This can be what ever you wish, the default is “ROOT”.
  4. 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.

Go to Part 2 and get things done…

7 thoughts on “File tree viewer on PHP pages – Part 1

  1. Luigi Fulk

    I just want to say I’m all new to blogging and site-building and certainly liked you’re website. More than likely I’m want to bookmark your site . You certainly come with impressive well written articles. Kudos for sharing your blog site.

    Reply
  2. Pingback: doudoune moncler

  3. hermes sale

    You’ve made somе decent points theгe. I looked on the net to learn mοre abߋut the issue and foսnd mоst
    individuals ѡill go along with yоur vies οn this webb site.

    Reply
  4. DixieJFern

    I blog often and I seriously appreciate your content.

    The article has truly peaked my interest. I am going to
    book mark your site and keep checking for new
    information about once a week. I subscribed to your RSS feed as well.

    Reply

Leave a Reply

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


*