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
create a header.php into custom_dir, we will write our own code to generate the list
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 -->
# DIRECTORY CUSTOMIZATION
<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
</IfModule>
create a header.php into custom_dir, we will write our own code to generate the list
<!-- header.php -->
<?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
?>
<html>
<head>
<title>Directory Title</title>
<!-- make our directory responsive -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
<?php include_once($cssPath); //hide our system path?>
</style>
</head>
<body>
<header>
<h1>Directory Title</h1>
</header>
<div>
<table class='dirTable'>
<tr>
<th>Name</th>
<th>Last modified</th>
</tr>
<?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>
</tr>
<?php endforeach; ?>
</table>
</div>
then create the footer.php and do whatever you like
<!-- footer.php -->
<footer class='yourFooterClass'>
YOUR OWN FOOTER HTML CODE
</footer>
</body>
</html>
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*/
