Welcome to WebmasterWorld Guest from 100.26.182.28

Forum Moderators: Ocean10000 & phranque

Message Too Old, No Replies

Tutorial: Custom Apache Directory Listing with linked CSS, and PHP

With the clarifications neccesary that just aren't mentioned elsewhere.

     
4:28 am on Mar 3, 2008 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member jab_creations is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 26, 2004
posts: 3178
votes: 22


I've always wanted to clean up directory listings automatically generated by Apache. Sure some of my directories are private but I also have several reasons that I like having the rest of my directories open.

I have had difficulty getting getting this to work with PHP and linking stylesheets. There are still some stipulations which are very important to keep in mind that I'll clarify that I have not seen clarified else where on the internet when searching to try this out myself.

Tested Apache Version: Apache 2.2.8

Big Fat Warning: Do not under any circumstances merely copy and paste the code below. Doing so could single handedly disable your website!

The Reason: While you can use PHP for open directories on Apache servers you should keep your main website's PHP and the directory listing PHP completely separate! This is because you will need to use a second .htaccess file which will render your main website's PHP completely useless and any pages that require those PHP files will break. In the circumstance that any one following this tutorial does make this mistake I found it necessary to completely delete the folder in which the secondary .htaccess file was uploaded too; simply deleting the secondary .htaccess (even when the browser's cache was disabled) did not seem to remedy this issue. With that being said if you follow the directions correctly you should have no problems! :)

Executing PHP with Apache Open Directory
This is the clarification that no one made any where else on the internet when I went searching: you'll need this secondary .htaccess file for the directory your Apache open directory files will be stored in otherwise your PHP header/footer files will be ignored by Apache.

Since my site supports multiple CSS themes I thought it would be most appropriate to create another theme folder specifically for Apache. Your open directory header, footer, stylesheet, and any Apache/CSS related images will all be placed in this directory. Remember: do not put these files in an already existing folder!

File: example.com/themes/apache/.htaccess

AddType text/html .php
AddHandler application/x-httpd-php .php
Options -Indexes

I am posting my own header and footer files that may freely be used as an example to help ease implementation. Remember: you can use your own custom header, footer, and CSS files these are merely examples to help get people started.

File: example.com/themes/apache/header.php

<?php ob_start("ob_gzhandler"); echo '<?xml version="1.0" encoding="UTF-8"?>' . "\n";?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Index of <?php echo $_SERVER['REQUEST_URI'];?></title>
<link href="/themes/apache/style.css.php" media="screen" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="body">
<h1>Index of <?php echo $_SERVER['REQUEST_URI'];?></h1>
<div class="border">

File: example.com/themes/apache/footer.php

</div><!-- /.border -->
</div><!-- /#body -->
<div id="head">
<div id="location">
<a href="http://www.example.com/">Example</a>
<span class="color4"> - </span>
<a href="http://www.example.com<?php echo $_SERVER['REQUEST_URI'];?>"><?php echo $_SERVER['REQUEST_URI'];?></a>
</div><!-- /#location -->
<div class="robots-nocontent" id="menu">
<div id="menua1"><a class="menuaa" id="menua1k" href="http://www.example.com/">Menu Item</a></div>
<div id="menua2"><a class="menuaa" href="http://www.example.com/" id="menua2k">Menu Item</a></div>
<div id="menua3"><a class="menuaa" href="http://www.example.com/" id="menua3k">Menu Item</a></div>
<div id="menua4"><a class="menuaa" href="http://www.example.com/" id="menua4k">Menu Item</a></div>
<div id="menua5"><a class="menuaa" href="http://www.example.com/" id="menua5k">Menu Item</a></div>
<div id="menua6"><a class="menuaa" href="http://www.example.com/" id="menua6k">Menu Item</a></div>
<div id="menua7"><a class="menuaa" href="http://www.example.com/" id="menua7k">Menu Item</a></div>
<div id="menua8"><a class="menuaa" href="http://www.example.com/" id="menua8k">Menu Item</a></div>
<div id="menua9"><a class="menuaa" href="http://www.example.com/" id="menua9k">Menu Item</a></div>
</div><!-- /#menu -->
</div><!-- /#head -->
<div id="top"></div>
<div class="robots-nocontent" id="bottom">
<div class="text">
<span class="color1">My Website Name Here</span><span class="color4"> - </span><span class="color2">Website Version 1.0</span>
</div>
<div class="text">
<span class="color3">Copyright <?php echo date('Y') == 1998? date('Y').'' : '2002<span class="color4"> - </span>'.date('Y');?>. All rights reserved.</span>
</div>
</div>
</body>
</html><?php ob_end_flush();?>

If you want to include a background image via your CSS place the image in the same directory: example.com/themes/apache/example.gif.

File: example.com/themes/apache/style.css.php

<?php header("Content-type: text/css"); ob_start("ob_gzhandler");?>
#body {
background-color: #000;
border: #fff solid;
border-width: 40px 1px 1px 1px;
bottom: 36px;
left: 4px;
overflow: auto;
padding: 0px;
position: absolute;
right: 4px;
top: 9px;
z-index: 1;
}
#bottom {
/* background-image: url(interface-background.gif); */
background-color: #006;
border: #f00 solid;
border-width: 1px 0px 0px 0px;
bottom: 0px;
font-size: 14px;
height: 31px;
left: 0px;
line-height: 14px;
position: absolute;
width: 100%;
z-index: 2;
}
#bottom span {
padding-left: 4px;
}
#head {
background-color: #222;
height: 39px;
left: 5px;
position: absolute;
right: 5px;
top: 10px;
z-index: 2;
}
#head #location {
padding: 1px 0px 0px 1px;
}
#head #location a:link {
background-color: transparent;
color: #9cac53;
font-size: 22px;
letter-spacing: 2px;
line-height: 16px;
text-decoration: none;
vertical-align: top;
}
#head #location a:visited {
background-color: transparent;
color: #9cac53;
font-size: 22px;
letter-spacing: 2px;
line-height: 16px;
text-decoration: none;
vertical-align: top;
}
#head #location a:hover, #head #location a:focus {
background-color: transparent;
color: #fff;
font-size: 22px;
letter-spacing: 2px;
line-height: 16px;
text-decoration: none;
vertical-align: top;
}
#head #menu a.menuaa {
border: 0px;
display: block;
}
#head #menua1 {
left: 1px;
}
#head #menua2 {
left: 82px;
}
#head #menua3 {
left: 163px;
}
#head #menua4 {
left: 244px;
}
#head #menua5 {
left: 325px;
}
#head #menua6 {
left: 406px;
}
#head #menua7 {
left: 487px;
}
#head #menua8 {
left: 568px;
}
#head #menua9 {
left: 649px;
}
#head #menua1, #head #menua2, #head #menua3, #head #menua4, #head #menua5, #head #menua6, #head #menua7, #head #menua8, #head #menua9, #head #menuathemes {
background-color: #222;
border: #666 solid;
border-width: 1px 1px 0px 1px;
color: #000;
height: 19px;
margin: 0px 0px 0px 1px;
position: absolute;
text-align: center;
top: 19px;
width: 78px;
z-index: 4;
}
#head #menua1:hover, #head #menua2:hover, #head #menua3:hover, #head #menua4:hover, #head #menua5:hover, #head #menua6:hover, #head #menua7:hover, #head #menua8:hover, #head #menua9:hover {
background-color: #666;
border: #fff solid;
border-width: 1px 1px 0px 1px;
color: #000;
float: left;
height: 19px;
margin: 1px 1px 1px 1px;
text-align: center;
top: 19px;
width: 78px;
}
#head #menu a:link {
display: block;
text-align: center;
}
#head #menu a:visited {
display: block;
text-align: center;
}
#head #menu a:hover {
}
#head #menu a:active {
}
#head #menu a:focus {
background-color: #333;
}
#head #menu a.menuaa:link, #head #menu a.menuaa:visited, #head #menu a.menuaa:hover {
line-height: 18px;
}
#top {
/* background-image: url(interface-background.gif); */
background-color: #006;
border: #f00 solid;
border-width: 0px 0px 1px 0px;
height: 4px;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
z-index: 2;
}
* {
border: 0px;
font-size: 17px;
margin: 0px;
padding: 0px;
}
a:link {
color: #0f0;
text-decoration: none;
}
a:visited {
color: #0f0;
text-decoration: none;
}
a:focus {
background-color: #333;
color: #fff;
text-decoration: underline;
}
a:hover {
color: #fff;
text-decoration: underline;
}
a:active {
background-color: #333;
color: #fff;
}
body, html {
background-color: #000;
color: #a7a68f;
padding: 16px;
overflow: hidden;
}
div.border {
border: #a7a68f solid 1px;
margin: 0px 4px 4px 12px;
padding: 0px;
}
h1 {
/* background-image: url(interface-background.gif); */
background-color: #006;
border: #fff solid 1px;
color: #9cac53;
font-size: 21px;
margin: 4px 0px 0px 4px;
padding-left: 2px;
width: 64%;
}
span.color1 {
color: #9cac53;
}
span.color2 {
color: #ebef92;
}
span.color3 {
color: #a7a68f;
}
span.color4 {
color: #fff;
}
span.color5 {
color: #099;
}
table {
border-collapse: collapse;
margin: 0px;
width: 100%;
}
table td {
padding: 0px 0px 0px 1px;
}
table th {
background-color: #222;
}
table th:hover {
background-color: #666;
}
<?php ob_end_flush();?>

I have not yet been able to get includes or gzip compression (via header/footer files) to work with PHP (except for the CSS file for some reason using the exact same code). I am not aware at the time of posting this how to remedy these issues so if anyone is able to get these issues to work please let me know. I'd prefer to mention this here so that people know it's a known issue.

Main .htaccess Configuration
Before using the following code it's a good idea to create a copy of your existing .htaccess file first. If it's already working then it'd be a good idea to have a working file to fall back to quickly. If the syntax is broken your entire domain (and addon domains) will all receive an Apache error page.

Adding the following code will make most of the customization work. However missing files or not having the secondary .htaccess file (as described above) will result in Apache's bland default directory. There are icons suggestions below though you can remove those and use the server's defaults if you prefer. I thought I would include the code so folks reading the tutorial will know how especially since the code is repetitive which always helps.

Keep in mind that / is your public root folder. That means /themes/ would be example.com/themes/ for example.

File: example.com/.htaccess

Options +Indexes
IndexOptions FancyIndexing
IndexOptions FoldersFirst IgnoreCase XHTML NameWidth=*
IndexOptions SuppressHTMLPreamble SuppressRules HTMLTable
IndexOptions IconHeight=16 IconWidth=16
IndexIgnore readme.html
HeaderName /themes/apache/header.php
ReadmeName /themes/apache/footer.php
AddIcon /themes/apache/apache-back.gif ..
AddIcon /themes/apache/apache-dir.gif ^^DIRECTORY^^
AddIcon /themes/apache/apache-bmp.gif .bmp .BMP
AddIcon /themes/apache/apache-bak.gif .bak .BAK
AddIcon /themes/apache/apache-css.gif .css .CSS
AddIcon /themes/apache/apache-cur.gif .cur .CUR
AddIcon /themes/apache/apache-db.gif .db .DB
AddIcon /themes/apache/apache-ess.gif .ess .ESS
AddIcon /themes/apache/apache-fla.gif .fla .FLA
AddIcon /themes/apache/apache-gif.gif .gif .GIF
AddIcon /themes/apache/apache-h3m.gif .h3m .H3M
AddIcon /themes/apache/apache-html.gif .htm .HTM .html .HTML
AddIcon /themes/apache/apache-jpg.gif .jpg .JPG .png .PNG
AddIcon /themes/apache/apache-log.gif .log .LOG
AddIcon /themes/apache/apache-mp3.gif .mp3 .MP3 .mp4 .MP4 .mid .MID .m3u .M3U .pls .PLS .wav .WAV
AddIcon /themes/apache/apache-msi.gif .msi .MSI
AddIcon /themes/apache/apache-pdf.gif .pdf .PDF
AddIcon /themes/apache/apache-psd.gif .psd .PSD
AddIcon /themes/apache/apache-php.gif .php .PHP .phtml .PHTML .php3 .PHP3
AddIcon /themes/apache/apache-rar.gif .rar .RAR .zip .ZIP .gz .GZ
AddIcon /themes/apache/apache-swf.gif .swf .SWF
AddIcon /themes/apache/apache-txt.gif .txt .TXT
AddIcon /themes/apache/apache-xpi.gif .xpi .XPI
AddIcon /themes/apache/apache-xml.gif .xml .XML
AddIcon /themes/apache/apache-wmv.gif .wmv .WMV

Last Thoughts
That should be it! I am not however aware if this will work on version 1.3x of Apache. The Apache code is mostly based on Apache's mod_autoindex [httpd.apache.org] module. If you are not sure what version of Apache your server is running save the following file and run it in your browser...

example.php

<?php echo $_SERVER['SERVER_SOFTWARE']; ?>

Have fun! :)

- John

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members