Directory Trees With PHP And jQuery

Knowing where your files are is an important task. Every person who uses a computer usually likes to store their files in an organized manner.

A simple way to keep track of many files is to use a directory tree. A directory tree lists out files and directories so that it’s easy to find what you’re looking for.

In this tutorial, we will create a directory tree using PHP and jQuery. This tree will use the code found in my previous article: jQuery drop down menus.

If you haven’t yet read the previous article, please do so. Everything used in that tutorial will be used here.

As a quick refresher, take a look at the HTML code for the jQuery drop down menu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Drop Down Menu</title> 

<!-- CSS For The Menu -->
<link rel="stylesheet" href="style.css" /> 

</head>
<body> 

<!-- Menu Start -->
<div id="jQ-menu"> 

	<!-- Unordered List With Menu Goes Here -->

</div>
<!-- End Menu --> 

<!-- Add jQuery From the Google AJAX Libraries -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 

<!-- jQuery Color Plugin -->
<script type="text/javascript" src="jquery.color.js"></script> 

<!-- Import The jQuery Script -->
<script type="text/javascript" src="jMenu.js"></script> 

</body>
</html>

We will use all three files – index.html, jMenu.js, and style.css – for our directory tree. Remember to rename index.html to index.php. The PHP that we create will go inside the #jQ-menu divider.

In order to create a directory tree, we can use recursion. To begin, let’s layout our code:

function createDir($path = './')
{

}

function printFile($file, $path)
{

}

function printSubDir($dir, $path)
{

}

createDir();

We will have three functions:

  • createDir($path) takes in a path (or defaults to the directory which the file is in) to the directory that it is making a list of. It uses both printFile($file, $path) and printSubDir($dir, $path).
  • printFile($file, $path) prints out a link in a <li> element using a given filename and path.
  • printSubDir($dir, $path) takes in a directory and creates a sub-directory by calling createDir($path). This is where the recursion of createDir($path) takes place.

We can start off with printFile($file, $path).

function printFile($file, $path)
{
	echo "<li><a href=\"".$path.$file."\">$file</a></li>";
}

This method is straightforward. It creates a list element with a link to the given file.

Let’s move on to the printSubDir($dir, $path) function.

function printSubDir($dir, $path)
{
	echo "<li><span class=\"toggle\">$dir</span>";
	createDir($path.$dir."/");
	echo "</li>";
}

This code is the most important part. It uses recursion so that our directory tree prints out all sub-directories.

  • Line one prints a .toggle span element that shows/hides the sub-directory on click. The format used here is what the jQuery drop down menu uses to create its effects.
  • This second statement is where the recursion takes place. A new call to createDir($path) will take care of the elements in this sub-directory.
  • The last line prints an ending list element to finish off the sub-directory.

Now we can code the createDir($path) function.

We must first open up the directory to read out of.

function createDir($path = './')
{
	if ($handle = opendir($path))
	{

	}
}

The above code also makes sure the directory is valid.

Now we can print out the start and end of an unordered list that will represent this directory:

function createDir($path = './')
{
	if ($handle = opendir($path))
	{
		echo "<ul>";

		echo "</ul>";
	}
}

At this point, we can read in the filenames:

function createDir($path = './')
{
	if ($handle = opendir($path))
	{
		echo "<ul>";

		while (false !== ($file = readdir($handle)))
		{

		}

		echo "</ul>";
	}
}

Our $file variable holds the filename of the current file. If this filename is actually a directory, we must call the printSubDir($dir, $path) function. On the other hand, if it is just a file, we should call the printFile($file, $path) function:

function createDir($path = './')
{
	if ($handle = opendir($path))
	{
		echo "<ul>";

		while (false !== ($file = readdir($handle)))
		{
			if ( is_dir($path.$file) && $file != '.' && $file != '..' )
				printSubDir($file, $path);
			else if ($file != '.' && $file != '..')
				printFile($file, $path);
		}

		echo "</ul>";
	}
}

Our directory tree is now functional! Unfortunately, it looks a bit odd when sub-directories are placed after files in the list. We can fix this by creating an array which stores the files. Once we have printed out all the directories, we can move on to printing the files:

function createDir($path = './')
{
	if ($handle = opendir($path))
	{
		echo "<ul>";

                $queue = array();
		while (false !== ($file = readdir($handle)))
		{
			if (is_dir($path.$file) && $file != '.' && $file !='..')
				printSubDir($file, $path, $queue);
			else if ($file != '.' && $file !='..')
				$queue[] = $file;
		}

		printQueue($queue, $path);
		echo "</ul>";
	}
}

function printQueue($queue, $path)
{
	foreach ($queue as $file)
	{
		printFile($file, $path);
	}
}

function printFile($file, $path)
{
	echo "<li><a href=\"".$path.$file."\">$file</a></li>";
}

function printSubDir($dir, $path)
{
	echo "<li><span class=\"toggle\">$dir</span>";
	createDir($path.$dir."/");
	echo "</li>";
}

createDir();

And that’s it! If you would like to access a different directory that the one your file is in, specify the $path parameter for the createDir($path) function.

Leave a Reply

Directory Trees With PHP And jQuery