2017年2月3日 星期五

XAMPP Apache Custom Directory list

To modify the default ugly directory list, normaly we need to modify mod_autoindex and recompile blar blar.

For me, i have no any knowledge of C, such actions will drive me nuts.

We are going to re write the directory using PHP, CSS & HTML. no C knowledge required

Here are the summary of what we'll doing:

1. Config .htaccess file

2. Prepare html assets

3. Hide original Directory output

4. Inject our php code

For easier to explain, i will create everything in root folder (rootFolder)

the default root folder of xampp should be c:/xampp/htdocs/
create a folder (custom_dir) in rootFolder which contains your custom html code
create a .htaccess file in rootFolder and copy the following code

<!-- .htaccess -->

<IfModule mod_autoindex.c> 
 # SET INDEX OPTIONS - this enable using FancyIndexing and tell apache we will use our own html to generate the directory list
 IndexOptions IgnoreCase FancyIndexing FoldersFirst NameWidth=* DescriptionWidth=* SuppressHTMLPreamble

 # SPECIFY HEADER FILE - tell Apache where our header file stores
 HeaderName /custom_dir/header.php 

 # SPECIFY FOOTER FILE - tell Apache where our footer file stores (yes, we use ReadmeName as our footer, since ReadmeName will keep generated at the bottom)
 ReadmeName /custom_dir/footer.html 

 # IGNORE THESE FILES - hide our html asset file in directory list
 IndexIgnore /custom_dir 

create a header.php into custom_dir, we will write our own code to generate the list
<!-- header.php -->   

$serverRoot = $_SERVER['DOCUMENT_ROOT'];
$cssPath = $serverRoot.'/custom_dir/css.php';

$currentPath = $_SERVER['DOCUMENT_ROOT'].$_SERVER['REQUEST_URI']; //always get the 'current' folder
$dirList = new DirectoryIterator(str_replace('/', '\\', $currentPath)); //just replace front-slash in case there're
  <title>Directory Title</title>
  <!-- make our directory responsive -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
   <?php include_once($cssPath); //hide our system path?> 

   <h1>Directory Title</h1>

   <table class='dirTable'> 
     <th>Last modified</th>

    <?php foreach($dirList as $fileInfo): ?>
    <tr class='dirItem'>
     <td> <a href='<?=$fileInfo->getFilename() ?>'><?=$fileInfo->getFilename() ?></a> </td>
     <td> <?=date( "Y-m-d H:i", $fileInfo->getMTime()) ?> </td>
    <?php endforeach; ?>

then create the footer.php and do whatever you like
<!-- footer.php -->
   <footer class='yourFooterClass'>
next, create css.php, by doing this instead of <link> is to hide the source path
/*the default list is generated by pre, we simply hide this by applying this css rule*/
pre { display:none; !important};

/*then do whatever you like*/