There comes a time in every web developers life when he or she needs to make a directory listing. There are many ways to do this, and some of the most common are to either just use apache for a barebones one, or use php for a styled one. I prefer Apache, because it has untapped possibilities, and almost EVERY webserver has it. You can see what a well designed apache index looks like
The idea that apache indexes are ugly and bare is a misconception. There seems to be no historic root for this idea, but it prevails none the less. Many developers will write out a php script, just to do what apache can do out of the box. Asked why they did php, they almost always respond
I needed style,
Apache always looks ugly, or
I need to be able to omit folders and files. None of these are valid reasons, for apache can do all this, out of the box. All you need is a little bit of .htacces knowledge.
Enable Directory Listings
Lets say you have a junk folder. This is where you might dump funny images for use on other forums, or just put works in progress. Most decent webhosts have indexes turned off by default, so if you just try to navigate to the raw folder, you get a 404 or a 403. Enabling indexes is quite easy.
In the .htaccess file of the directory (server side) you want to have an index, add the following:
I know that looks like a fairly large block of code, believe me, its worth it. Here is a breakdown of what it does:
- Options +Indexs
- This enables indexing. That is, whenever someone goes to the directory without specifying a file, they get an index of all the files in the directory
- IndexOptions +FancyIndexing
- This enables fancy indexing. In other terms, it puts the file listing into a more common view, showing filenames, descriptions, icons, modified dates, and sizes
- IndexOptions +FoldersFirst
- This makes it so all sub directories appear ahead of the file listing. You don't have to have this, but it provides useful and helps organization
- IndexOptions +XHTML
- This makes apache output XHTML instead of HTML. You should have this. XHTML>HTML. Don't ask why, it just is.
- IndexOptions +HTMLTable
- This causes the listing to output in table tags, instead of being organised with line breaks and whatnot. You should really do this, as it opens more style options later
- IndexOptions +SuppressRules
- Rules suck. Or at least horizontal rules do. They are ugly relics of the past. They are also very difficult to clean up with css. This removes them
Headers, Footers, and CSS oh my!
Now, you have a complete directory listing, but it still is ugly as sin, and not personalized to your liking or site style. You can change all this too. While you cant directly go in and edit any file generated, as apache makes the index on the fly, you can change elements of this file, through a few handy apache properties. Create a directory, in this case, its called
resource. You probably don't want this appearing in your index, as it detracts from the
magic-ness. To block it out, add the following to your .htaccess file:
IndexIgnore .htaccess /resource
That will filter out the entire /resource directory. You probably don't want the resource directory to have an index either, so add this to a .htaccess file in /resource:
Now, create a file in resource, call it header.html. Put whatever you want to appear in your header, i used a few h1 tags. Do not insert all the html stuff (body tags, html tags, etc), as they are not required, and could do wierd things later. Do the same for a footer, create a file called footer.html, and put whatever you want. If you want to encase the whole index in a div, open a div in the header file, and close it in the footer. When you have your headers and footers done, add this to your main .htaccess file (the first one we edited):
Refresh the index, and if you did everything right, presto, custom headers and footers. I will tell you how to set the page up for styling, but i wont show you how to do that. To set the page up for styling, create a style.css in the /resource directory. In the main .htaccess file, add this line:
Edit the stylesheet to your whim, and there you go, a styled index.
But wait, there's more!
You can do much more with indexes. You can add icons, ignore files, and even disable headers or sorting. To find out all you can do, read the offical apache manual on mod_autoindex here