404-Error Seite


Eine eigene 404-Fehlerseite für deine Webseite

Jeder, der im Internet surft, hat sie schon einmal gesehen. Die berüchtigte 404-Fehler Seite:

404 Error: Not Found; the requested resource could not be found

Diese Fehlerseite wird standardmäßig vom Webspace-Provider, also deinem Host angezeigt, wenn jemand sich beim Eingeben einer bestimmten Seite vertippt hat oder eine Seite nicht mehr existiert. Die Gestaltung dieser Seite und aller anderen Fehlerseiten obliegt normalerweise deinem Webspace-Provider.

Das lässt sich aber ändern, wenn dein Webserver ein "Apache"-Server ist. Das sind übrigens die meisten Server. Falls dein Server jedoch ein anderer Server ist wie zum Beispiel ein Windows-basierender Server, dann ist die folgende Anleitung für dich nicht interessant und du musst woanders dein Glück versuchen. Für alle anderen folgt nun die Anleitung.


Ein einfacher PHP-Befehl gibt dir Auskunft auf welchem System dein Server basiert:

echo $_SERVER['SERVER_SOFTWARE'];

Als Antwort solltest du etwas wie:

Apache/2.4.37 (Unix) OpenSSL/1.0.2q PHP/7.3.1

bekommen. Diese Antwort sagt dir drei wichtige Dinge. Erstens: Dein Server basiert auf Apache; Zweitens: Der Server sitzt in einer Unix-Umgebung (vergleichbar mit Linux) und Drittens: Die auf dem Server installierte PHP-Version.

Damit deine eigene (404) Fehlerseite aufgerufen wird und nicht mehr die Standardseite des Provider angezeigt wird musst du zwei Dateien in das Root-Verzeichnis deines Servers kopieren bzw. erweitern.


Die ".htaccess" Datei

Die erste Datei ist die .htaccess Datei. Diese Datei ist genaugenommen eine Steuer-Datei für den Apache-Server. Mittels dieser Datei werden werde Dinge wie Passwort-Schutz und die Verarbeitung von Dateien geregelt. Aber auch wie der Server auf Fehler reagieren soll. Und genau diese Funktion brauchen wir.

Falls du ein Problem damit hast die .htaccess Datei zu erstellen, da sie mit einem Punkt beginnt, so erstelle zunächst eine normale Text-Datei, zum Beispiel: Text.htaccess und benenne sie um wenn du sie auf den Server hochgeladen hast.

Folgender Inhalt muß in die .htaccess Datei kopiert werden falls sie bereits existiert und falls nicht, so muß eine neue Datei erstellt werden.

# Error-Code-Umleitung
ErrorDocument 300 /error.php?error=300
ErrorDocument 400 /error.php?error=400
ErrorDocument 401 /error.php?error=401
ErrorDocument 402 /error.php?error=402
ErrorDocument 403 /error.php?error=403
ErrorDocument 404 /error.php?error=404
ErrorDocument 408 /error.php?error=401
ErrorDocument 410 /error.php?error=408
ErrorDocument 414 /error.php?error=414
ErrorDocument 429 /error.php?error=429
ErrorDocument 500 /error.php?error=500
ErrorDocument 501 /error.php?error=501
ErrorDocument 502 /error.php?error=502
ErrorDocument 503 /error.php?error=503

Die "error.php" Datei

Als nächstes musst du die eigentliche Fehlerseite erstellen. Ich habe folgendes Layout mit Standardmitteln erstellt. Und habe bewusst auf Bootstrap und JavaScript verzichtet. Die Seite reagiert auf Fehler, die in der obigen .htaccess Datei gelistet sind.

Beispiel für die Fehlerseite
<?php
/**
 * Created by GEMA-SOFT AP.
 * User: Gert Massheimer
 * Date: 03.Feb.2019
 * Time: 10:05
 * File: error.php
 */
 
// Rücksprungseite definieren
// Suche nach index.php. Falls existiert, nimm index.php sonst nimm index.html.
$mainPage  = is_file($_SERVER['DOCUMENT_ROOT'].'/index.php') ? '/index.php' : '/index.html';
 
$errorCode = $_GET['error'];
 
switch ($errorCode) {
// Client-Errors
  case 300: $errorMsg = 'The document name you requested could not be found on this server<br><br>(Nicht gefunden; Dokument entfernt, verschoben oder umbenannt)'; break;
  case 400: $errorMsg = 'Bad Request; the server cannot or will not process the request due to an apparent client error <br><br>(Fehlerhafte Anfrage, Ungültige Anforderung; fehlerhafte Syntax oder unbekannte Zeichen in der Anfrage)'; break;
  case 401: $errorMsg = 'Unauthorized; authentication is required and has failed or has not yet been provided<br><br>(Nicht autorisiert, Zugriff verweigert; meist passwortgeschützt, Login)'; break;
  case 402: $errorMsg = 'Payment Required<br><br>(Bezahlung erforderlich)'; break;
  case 403: $errorMsg = 'Forbidden; you do not have the necessary permissions for this resource<br><br>(Verboten, Unzulässig; Zugriff für den Rechner des Users gesperrt)'; break;
  case 404: $errorMsg = 'Not Found; the requested resource could not be found<br><br>(Nicht gefunden; Dokument entfernt, verschoben oder umbenannt)'; break;
  case 408: $errorMsg = 'Request Timeout; the server timed out waiting for the request<br><br>(Innerhalb der vom Server erlaubten Zeitspanne wurde keine vollständige Anfrage des Clients empfangen)'; break;
  case 410: $errorMsg = 'Gone; the resource requested is no longer available<br><br>(Unter dem angegebenen URI ist keine Ressource mehr erreichbar und es ist keine Weiterleitungsadresse bekannt)'; break;
  case 414: $errorMsg = 'URI Too Long; the URI provided was too long for the server to process<br><br>(Die URL der Anfrage war zu lang. Ursache ist oft eine Endlosschleife aus Redirects)'; break;
  case 429: $errorMsg = 'To Many Requests; there are too many requests sent in a given amount of time<br><br>(Zu viele Anfragen; der Client hat zu viele Anfragen in einem bestimmten Zeitraum gesendet)'; break;
// Server-Errors
  case 500: $errorMsg = 'Internal Server Error; unexpected condition was encountered<br><br>(Interner Fehler, Interner Server-Fehler; z. B. Fehlfunktion eines CGI-Skripts, Prozessabsturz, Ressourcenengpass)'; break;
  case 501: $errorMsg = 'Not Implemented; the server does not recognize the request method<br><br>(Nicht implementiert; erforderliche Funktionalität oder Voraussetzung beim Server nicht vorhanden)'; break;
  case 502: $errorMsg = 'Bad Gateway; the server was acting as a gateway or proxy and received an invalid response from the upstream server<br><br>(Gatewayfehler; ungültige Antwort eines anderen Servers bei Gateway- oder Proxybetrieb)'; break;
  case 503: $errorMsg = 'Service Unavailable; the server is currently unavailable (because it is overloaded or down for maintenance)<br><br>(Vorübergehend nicht verfügbar; Server überlastet, ausgefallen oder in Wartung)'; break;
  default:  $errorMsg = 'Unexpected Error; no description available<br><br>(Unerwarteter Fehler, keine Beschreibung verfügbar)';
}
?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Error <?php echo $errorCode; ?></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <style>
      body { background: #eee; color: #000; font-family: Arial,Helvetica,sans-serif; font-weight: 300; font-size: 1rem; line-height: 1.3rem; }
      button { display: block; background: #4169E1; color: #fff; margin: auto; padding: .5rem; font-size: .9rem; border-radius: .5rem; -moz-border-radius: .5rem; -webkit-border-radius: .5rem; }
      .content { background: #fff; max-width: 480px; width: 100%; margin: 5rem auto; padding: 1rem 1rem; border: 1px solid #aaa; border-radius: 1rem; -moz-border-radius: 1rem; -webkit-border-radius: 1rem; box-shadow: 0 0 15px 3px rgba(153,153,153,1); -moz-box-shadow: 0 0 15px 3px rgba(153,153,153,1); -webkit-box-shadow: 0 0 15px 3px rgba(153,153,153,1); }
    </style>
  </head>
  <body>
    <div class='content'>
      <h2>Error <span style="color: red;"><?php echo $errorCode; ?></span> occurred</h2>
      <hr style="max-width: 100%; border-top: 1px solid #444">
      <p>Error description:</p>
      <p><span style="color: #11aaaa"><em><?php echo $errorMsg; ?></em></span></p>
      <hr style="max-width: 100%; border-top: 1px solid #444">
      <p style="text-align: center">Please, return to the website by clicking on the button below.<br></p>
      <a href="<?php echo $mainPage; ?>" title="back to website"><button>Go Back</button></a>
    </div>
  </body>
</html>

Das Ziel für die "Go Back" Taste ist in der Variablen $mainPage definiert. Ist im Root-Verzeichnis eine Datei mit dem Namen index.php vorhanden, wird zu dieser Seite gesprungen. Ansonsten wird zu index.html gesprungen. - Falls der Dateiname deiner Startseite von diesem Schema abweicht, musst du die Variable entsprechend anpassen.


Zum Ausprobieren

Falls du deine Fehlerseite ausprobieren willst, ist hier noch eine test.php, die auch ins Root-Verzeichnis geladen werden muß.
(Vergiss nicht, sie später wieder zu löschen!)

<?php
/**
 * Created by GEMA-SOFT AP.
 * User: Gert Massheimer
 * Date: 03.Feb.2019
 * Time: 10:32
 * File: test.php
 */
 
$error = [300, 400, 401, 402, 403, 404, 408, 410, 414, 429, 500, 501, 502, 503];
 
if (isset($_POST['submit'])) {
  $error = $_POST['error'];
  header("Location: /error.php?error=$error");
}
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Error-Test-Seite</title>
  <style>
    body { background: rgba(0,0,0,.03); color: #000; font-family: Arial,Helvetica,sans-serif; font-weight: 300; font-size: 1rem; line-height: 1.5rem; padding: 1rem 5rem;}
    select { display: inline-block; background: #eee; color: #000; margin: 1rem; padding: 1rem; font-size: .9rem; border-radius: .5rem; -moz-border-radius: .5rem; -webkit-border-radius: .5rem; }
    .button { display: inline-block; background: rgba(235, 235, 235, 0.35); color: #000; margin: auto; padding: .1rem .7rem; font-size: .9rem; border: 1px solid #000; border-radius: .3rem; -moz-border-radius: .3rem; -webkit-border-radius: .3rem; }
    .button:hover,.button:focus { background: rgba(235, 235, 235, 1); }
    .red {color: red;}
  </style>
</head>
<body>
  <form action="?" method="post">
    <label for="error">Select an error:</label>
    <select id="error" name="error">
      <?php
      for ($i = 0; $i <count($error); ++$i)
        echo '<option value="'.$error[$i].'">'.$error[$i].'</option>';
      echo "\n";
      ?>
    </select>
    <input class="button" type="submit" name="submit" value="Show">
  </form>
 
  <h3>Client-Errors</h3>
  <p>
    <span class="red">300:</span> The document name you requested could not be found on this server
    <br><span class="red">400:</span> Bad Request; the server cannot or will not process the request due to an apparent client error
    <br><span class="red">401:</span> Unauthorized; authentication is required and has failed or has not yet been provided
    <br><span class="red">402:</span> Payment Required
    <br><span class="red">403:</span> Forbidden; you do not have the necessary permissions for this resource
    <br><span class="red">404:</span> Not Found; the requested resource could not be found
    <br><span class="red">408:</span> Request Timeout; the server timed out waiting for the request
    <br><span class="red">410:</span> Gone; the resource requested is no longer available
    <br><span class="red">414:</span> URI Too Long; the URI provided was too long for the server to process
    <br><span class="red">429:</span> To Many Requests; there are too many requests sent in a given amount of time
  </p>
 
  <h3>Server-Errors</h3>
  <p>
    <span class="red">500:</span> Internal Server Error; unexpected condition was encountered>
    <br><span class="red">501:</span> Not Implemented; the server does not recognize the request method
    <br><span class="red">502:</span> Bad Gateway; the server was acting as a gateway or proxy and received an invalid response from the upstream server
    <br><span class="red">503:</span> Service Unavailable; the server is currently unavailable (because it is overloaded or down for maintenance)
  </p>
</body>
</html>