User Online
Online:	3
Max. Online:	75
Besucherzahlen
Stunde:	2
Heute:	96
Woche:	453
Monat:	1852
Gesamt:	49275
Hits (30 Tage):	6390
Inhalte
Seiten:	79
Absätze:	600

Apaches Directory Listing mit eigenem Design

Erstellt am 24.11.2009 um 10:25 Uhr von sim4000

Mit dem Apache ist es möglich, den Inhalt eines Verzeichnisses aufzulisten. Diese Funktion kann man nach eigenen Wünschen zu gestalten.

vHost Konfiguration

In den Einstellungen des vHosts müssen drei Optionen aktiviert werden.

Und zwar in der AllowOverride Direktive die Optionen Options, Indexes und FileInfo. Die Optionen werden in der .htaccess Datei später verändert. Ist dies im vHost nicht erlaubt, kommt es zu einem Server Error.

Unter Debian findet sich die vHost Konfiguration standardmäßig unter /etc/apache2/sites-available/default.

1
2
3
4
5

    <Directory "/path/to/dirlisting/">
        AllowOverride Options Indexes FileInfo
        Order allow,deny
        Allow from all
    </Directory>

.htaccess im Hauptverzeichnis

Die folgende .htaccess Datei muss in das Hauptverzeichnis des Directory Listings gelegt werden.

Außerdem wird ein Ordner mit dem Namen .themes angelegt. Dort liegen dann die Icons, sowie die Dateien für den Header und den Footer drin.

In der .htaccess müssen dann noch die Pfade zu den Dateien und den Icons angepasst werden. Der Pfad muss absolut vom Document Root der Domain ausgehen. Wenn sich der Ordner also unter http://www.example.com/dir/ gefindet, muss die Header Datei /dir/.themes/header.php angegeben werden.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

# Indexing aktivieren und konfigurieren
Options +Indexes
IndexOptions FancyIndexing
IndexOptions FoldersFirst IgnoreCase XHTML NameWidth=*
IndexOptions SuppressHTMLPreamble SuppressRules HTMLTable
IndexOptions IconHeight=16 IconWidth=16
 
# Folgende Dateien im Listing nicht anzeigen
IndexIgnore robots.txt
 
# Header und Footer Datei
HeaderName /domain/absolute/path/to/.themes/header.php
ReadmeName /domain/absolute/path/to/.themes/footer.php
 
# Datei Icons falls kein anderes gesetzt
DefaultIcon /domain/absolute/path/to/.themes/icons/page_white.png
# Eine Ebene hoeher
AddIcon /domain/absolute/path/to/.themes/icons/arrow_undo.png ..
# Ordner Icon
AddIcon /domain/absolute/path/to/.themes/icons/folder.png ^^DIRECTORY^^
 
# Icons fuer diverse Dateitypen
AddIcon /domain/absolute/path/to/.themes/icons/page_white_picture.png .bmp .BMP
AddIcon /domain/absolute/path/to/.themes/icons/arrow_refresh.png .bak .BAK .*~
AddIcon /domain/absolute/path/to/.themes/icons/page_white_code.png .css .CSS
AddIcon /domain/absolute/path/to/.themes/icons/database.png .db .DB .sql .SQL
AddIcon /domain/absolute/path/to/.themes/icons/music.png .fla .FLA
AddIcon /domain/absolute/path/to/.themes/icons/page_white_picture.png .gif .GIF
AddIcon /domain/absolute/path/to/.themes/icons/page_white_code.png .htm .HTM .html .HTML
AddIcon /domain/absolute/path/to/.themes/icons/page_white_picture.png .jpg .JPG .png .PNG
AddIcon /domain/absolute/path/to/.themes/icons/page_white_text.png .log .LOG
AddIcon /domain/absolute/path/to/.themes/icons/music.png .mp3 .MP3 .mp4 .MP4 .mid .MID .m3u .M3U .pls .PLS .wav .WAV
AddIcon /domain/absolute/path/to/.themes/icons/page_white_gear.png .msi .MSI
AddIcon /domain/absolute/path/to/.themes/icons/page_white_acrobat.png .pdf .PDF
AddIcon /domain/absolute/path/to/.themes/icons/page_white_php.png .php .PHP .phtml .PHTML .php3 .PHP3
AddIcon /domain/absolute/path/to/.themes/icons/page_white_zip.png .rar .RAR .zip .ZIP .gz .GZ .jar .JAR .tar .TAR
AddIcon /domain/absolute/path/to/.themes/icons/page_white_text.png .txt .TXT
AddIcon /domain/absolute/path/to/.themes/icons/page_white_picture.png .xpi .XPI
AddIcon /domain/absolute/path/to/.themes/icons/page_white_code.png .xml .XML
AddIcon /domain/absolute/path/to/.themes/icons/film.png .wmv .WMV
AddIcon /domain/absolute/path/to/.themes/icons/page_white_c.png .c .C
AddIcon /domain/absolute/path/to/.themes/icons/page_white_cplusplus.png .cpp .CPP
AddIcon /domain/absolute/path/to/.themes/icons/page_white_cup.png .java .JAVA
AddIcon /domain/absolute/path/to/.themes/icons/page_white_gear.png .exe .EXE .bin .BIN
AddIcon /domain/absolute/path/to/.themes/icons/page_white_tux.png .sh .SH
AddIcon /domain/absolute/path/to/.themes/icons/page_white_flash.png .swf .SWF
AddIcon /domain/absolute/path/to/.themes/icons/cd.png .iso .ISO .nrg .NRG .img .IMG

.htacces in /domain/absolute/path/to/.themes

Damit Header und Footer PHP beherrschen, muss man dies mit der AddType bzw AddHandler Direktive aktivieren. Außerdem wird für den Ordner .themes noch Directory Listing deaktiviert, sodass dort nicht jeder reingucken kann.

1
2
3

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

header.php in /domain/absolute/path/to/.themes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<?php
   function getURI() {
      if(strpos($_SERVER['REQUEST_URI'], "?")>0) {
         return substr($_SERVER['REQUEST_URI'], 0, strpos($_SERVER['REQUEST_URI'], "?"));
      } else {
         return $_SERVER['REQUEST_URI'];
      }
   }
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
   <head>
      <title><?php echo getURI(); ?> - sim4000.de Dirlisting Demo</title>
      <link rel="StyleSheet" type="text/css" href="/domain/absolute/path/to/.themes/style.css">
      <link rel='shortcut icon' href='/domain/absolute/path/to/.themes/favicon.ico'>
   </head>
 
   <body>
      <div id="outline">
         <div id="header">
            <div><?php echo getURI(); ?></div>
         </div>
        <div id="content">

Der Header wird vor der Dateiliste angezeigt. Hier müssen alle Basis Tags wie <html> oder <body> gesetzt werden. Man kann hier zum Beispiel auch eine Stylesheet Datei angeben.

footer.php in /domain/absolute/path/to/.themes

1
2
3
4
5
6
7
8
9
10

         </div>
         &nbsp;<br>
         <div id="footer">
            <div>
               Powered by <a href="http://www.sim4000.de/apaches_directory_listing_mit_eigenem_design,143.html" target="_blank">sim4000.de</a>
            </div>
         </div>
      </div>
   </body>
</html>

Der Footer wird unter der Dateiliste angezeigt. Er kann nach belieben gestaltet werden. Im Footer werden zum Beispiel Tags wieder geschlossen, die im Header geöffnet wurden.

style.css in /domain/absolute/path/to/.themes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

body {
   text-align:center;
   margin:0px;
   padding:0px;
   background-color:#225B7D;
}
 
body, div, table, td, th, a {
   font-size:12px;
   font-family:Arial;
}
 
div#outline {
   margin:1% auto 0px auto;
   width:900px;
   padding:3px;
   background-color:white;
   text-align:left;
}
 
div#header {
   background-image:url('header.png');
   width:900px;
   height:131px;
}
 
   div#header div {
      text-align:right;
      font-size:16px;
      color:white;
      padding:10px;
   }
 
div#content {
   background-color:white;
   min-height:400px;
}
 
   div#content table {
      width:90%;
      margin:auto;
   }
 
      div#content table th a, div#content table th a:active, div#content table th a:visited {
         font-size:12px;
         color:#225B7D;
      }
 
div#footer {
   width:900px;
   background-color:#e0e0e0;
}
 
   div#footer div {
      padding:5px;
      font-size:10px;
   }
 
   div#footer a {
      font-size:10px;
   }

Die Stylesheet Datei ist in der Header Datei angegeben und gestaltet die komplette Seite.

robots.txt

In den meisten Fällen macht es sinn Directory Listing Ordner von Google und Co. auszuschließen.

In dem Beispiel ist deswegen auch eine robots.txt angegeben, welche mit der .htaccess Direktive IndexIgnore aus dem Directory Listing ausgeblendet wird. Die robots.txt verweigert allen Bots den Zugriff.