Links

Zielsetzung

Die Webanwendung demowebserver soll programmtechnisch verbessert werden.

Auf jeder Seite (home, impressum) sind große Teile gleich.
Muß zum Beispiel ein Menüpunkt hinzugefügt werden, muss das in allen Seiten wiederholt werden.

Zerlegung der HTML-Seite in Bestandteile

Datei page.html

Neue Datei page.html anlegen:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="tutorial.css">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
 <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="/demo.php?home">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mynavbar">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" href="/demo.php?home">Start</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="demo.php?impressum">Impressum</a>
        </li>
      </ul>
      <form class="d-flex">
        
        <button class="btn btn-secondary" type="button">Settings</button>
        <button class="btn btn-primary" type="button">Logout</button>
      </form>
    </div>
  </div>
</nav> 
<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>#HEADER#</h1> 
</div>
<div class="container mt-5">
#CONTENT#
</div>
</body>
</html>

Das ist eine Kopie von home.html, nur dass im ersten Block statt der Überschrift eine Markierung #HEADER# steht und im 2.ten Block eine Markierung #CONTENT#.

Datei tutorial.css

Wir legen die CSS-Datei tutorial.css an:

.full-field {
    width: 100%;
}
.wide {
    width: 100%;
}
.panel {
    border: grey solid 0.07rem;
    padding: 2rem 3rem;
    background-color: rgb(240, 240, 240, 0.5);
    border-radius: 0.5rem;
    box-shadow: 0.5rem 0.5rem rgb(240, 240, 240, 0.3);
}

Datei home.html

Jetzt ändern wir die Datei home.html:

<html>
<body>
<p>Hier geht es zur <a href="demo.php?login">Anmeldung</a></p>
</body>
</html>

Datei impressum.html

Jetzt ändern wir die Datei impressum.html:

<html>
<body>
<p>Verantwortlich ist der Autor.</p>
</body>
</html>

Die beiden HTML-Dateien enthalten nur noch ein minimales HTML-Gerüst, damit der Editor das als HTML erkennt und das Edieren unterstützen kann.
Im Body steht der Teil der Seite, der spezifisch für "Home" oder "Impressum" ist.

Das verbesserte PHP-Programm

<?php
$server = new Server();
if ($_SERVER['REQUEST_URI'] == '/demo.php') {
    header('Location: http:/demo.php?home');
} elseif ($_SERVER['REQUEST_URI'] === '/demo.php?home') {
    $server->home();
} elseif ($_SERVER['REQUEST_URI'] === '/demo.php?impressum') {
    $server->impressum();
} else {
    header("HTTP/1.0 404 Not Found");
}
class Server {
    private function showPage(string $header, string $pageFile){
        $page = file_get_contents('page.html');
        $body = file_get_contents($pageFile);
        $page = str_replace('#HEADER#', $header, $page);
        $start = strpos($body, '<body>') + 6;
        $end = strrpos($body, '</body>');
        $body2 = substr($body, $start, $end - $start);
        $page = str_replace('#CONTENT#', $body2, $page);
        echo $page;
    }
    public function home(){
        $this->showPage('Meine erste  Bootstrapseite', 'home.html');
    }
    public function impressum(){
        $this->showPage('Impressum', 'impressum.html');
    }
}

Es gibt eine neue Methode showPage. Sie bekommt als Parameter die Überschrift und den Namen der Html-Datei mit dem Inhalt.
Wir lesen den Inhalt der Datei page.html in die Variable $page.
Wir lesen den Inhalt der Datei, die den eigentlichen Inhalt der Seite enthält: Also home.html oder impressum.html.
Wir ersetzen den Marker #HEADER# mit der Überschrift: $page = str_replace('#HEADER#', $header, $page);
Wir suchen den Index des Strings "<body>" mit der Funktion strpos(): $start = strpos($body, '<body>') + 6;
- Der eigentliche Inhalt fängt aber erste 6 Zeichen dahinter an, daher +6.
Wir suchen den Index des Strings "</body>" mit der Funktion strrpos(). strrpos() sucht vom Ende des Strings her (STRing Reverse POSition).
Dann schneiden wir den eigentlichen Inhalt aus (mit $body2 = substr($body, $start, $end - $start);).
- substr() hat die Parameter $source, $start und $length: $length erhalten wir, indem wir $end - $start berechnen.
Schließlich ersetzen wir den Marker #CONTENT# mit dem seitenspezifischen Inhalt.
Wir geben die zusammengesetzte Seite mittels echo aus.
In den Methoden home() und impressum() rufen wir die Methode showPage() mit den passenden Parametern auf.

HTTP-Server mit PHP-Verbesserung

Inhaltsverzeichnis