E-Book Startseite Karteikarten-Programm
0

Bauanleitung

Dieses Projekt ist sehr einfach gebaut und bietet zurzeit auch keine speziellen Funktionen (wie z.B. ein Moderations-Panel zum Freigeben von Beiträgen). Das Projekt besteht aus 2 HTML- / PHP-Skripten, einem Banner und einer Text-Datei, indem die Daten gespeichert werden. Wer sich mit PHP ein wenig besser auskennt bzw. unseren PHP-Kurs gut verstanden hat, kann dieses Gästebuch auch noch erweitern (wie z. B. mit einem Moderations-Panel zum Freigeben von Beiträgen).
Nun wollen wir beginnen mit der Programmierung der Start-Datei (index.php). Wir erstellen dazu das HTML-Grundgerüst und machen gleich ein paar einfache Head-Angaben. Des Weiteren benötigen wir noch ein wenig CSS für die Gestalltung von Hyperlinks.

<!DOCTYPE html>
<html>
 
<head>
  <title>G&auml;stebuch</title>
 
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
 
  <meta name="author" content="Benjamin Jung" />
  <meta name="description" content="Ein kleines einfaches G&auml;stebuch" />
  <meta name="keywords" content="G&auml;stebuch" />
 
  <style type="text/css">
  <!--
  .link a:link {
      color: #000000;
      text-decoration: underline;
  }
  .link a:active {
      color: #000000;
      text-decoration: underline;
  }
  .link a:focus {
      color: #000000;
      text-decoration: underline;
  }
  .link a:hover {
      color: #000000;
      text-decoration: none;
  }
  .link a:visited {
      color: #000000;
      text-decoration: underline;
  }
  -->
  </style>
</head>
 
<body style="text-align:center;background-color:#E2E2E2;" >
 
</body>
</html>

Im Body-Bereich wollen wir nun als erstes ein DIV-Element erstellen. Das DIV-Element im Zusammenhang mit den STYLE-Angaben im Body-Tag sorgt dafür, dass der Inhalt mittig ausgerichtet wird. Mit den margin-Angaben und text-align-Angaben können wir so dieses schöne Design umsetzen. Innerhalb des DIV-Elements wird nun das Bild, eine Überschrift und der Link zum Erstellen eines neuen Beitrages eingesetzt:

<div style="margin:0 auto;width:800px;text-align:left;" >
  <img src="banner.jpg" border="0" height="197.5" width="790" alt="G&auml;stebuch" style="margin-left:5px; margin-right:5px;" />
  <h1 style="margin-left:5px; margin-right:5px; width:790px; font-family:Times; font-size:33px; text-align:center;">G&auml;stebuch</h1>
  <div style="margin-left:5px; margin-right:5px; margin-bottom:20px; width:790px; font-family:Times; font-size:16px; text-align:right;" class="link" ><a href="neu.php">Jetzt Beitrag erstellen...</a></div>
 
</div>

Als nächstes benötigen wir innerhalb des DIV-Elements noch das PHP-Skript welches die Daten-Datei (TXT-Datei) Zeile für Zeile (also Beitrag für Beitrag) ausließt und diese entsprechend darstellt. Als erstes wird die Datei mit file() eingelesen. Als nächstes wird das Array umgekehrt, sodass der neuste Beitrag oben ist. Nun wir überprüft, ob das Array und somit die Datei leer ist. Diese Überprüfung wird deshalb gemacht, dass ein individueller Text angezeigt werden kann. Andernfalls würde gar nichts erscheinen. In jeder Zeile der Daten-Datei befindet sich ein Datensatz. In einem Datensatz befinden sich 3 Daten: Benutzername, Datum und Zeit und der Text. Diese 3 Daten werden in der Daten-Datei mit dem String |||(((|)))||| getrennt. Mit der Funktion explode werden die Daten gesplittet und in einem Array abelegt. Nun können wir einen Block für jeden Beitrag erstellen und die Daten an der richtigen Stelle platzieren.

<?php 
$array = file("textdata.txt");
 
$arrayr = array_reverse($array);
 
if (empty($arrayr)) {
    echo "<div style=\"background-color:#FFFFFF; padding:5px; font-family:Times; font-size:17px; font-style:italic;\">Leider sind bis jetzt noch keine Beiträge vorhanden.</div>";
} else  {
    foreach ($arrayr AS $daten) {
        $datenteil = explode("|||(((|)))|||", $daten);
        echo "<div style=\"width:790px; margin-left:5px; margin-bottom:25px; border:solid 1px #000000;\">";
        echo "<div style=\"background-color:#C0C0C0; font-family:Times;\">
                <h1 style=\"font-size:16px; margin:0; padding-left:5px; padding-top:5px; padding-bottom:2px; font-weight:bold;\">
                  <span style=\"font-size:14px;\">von</span> $datenteil[0]
                </h1>
                <h2 style=\"font-size:12px; margin:0; padding-left:5px; padding-bottom:2px;\">am $datenteil[1]</h2>
              </div>";
        echo "<div style=\"background-color:#FFFFFF; padding:5px; font-family:Times; font-size:15px;\">$datenteil[2]</div>"; 
        echo "</div>";
    }
}
 ?>

Nachdem nun die index.php-Datei fertig ist, machen wir weiter mit der Datei neu.php. Dazu brauchen wir in dieser Datei als erstes ein PHP-Skript. Dieses Skript wird jedoch nur aktiv, wenn bereits der submit-Buttons des Formulars gedrückt wurde. Im PHP-Skript wird überprüft ob etwas im Benutzername-Feld eingegeben worden ist. Wurde nichts eingegeben oder ist der Name kleiner als 3, so wird als Benutzername das Wort "Gast" gesetzt. Wurde im Text-Feld nichts oder weniger als 5 Zeichen eingegeben, so wird der Beitrag nicht erstellt und man gelangt automatisch wieder auf die Seite zum Erstellen eines Beitrages. Zudem, werden die Zeilenumbrüche im Text-Feld durch <br />´s ersetzt und HTML-Sonderzeichen umgewandelt. Durch diese Funktion ist es nicht möglich HTML-Quellcode einzubinden. Als nächstes öffnen wir die Daten-Datei im Modus a (Schreiben an das Ende) und ermitteln das Datum und die Zeit. Nachdem dies Geschehen ist, können wir nun die Daten in einen String packen und diesen Schreiben. Wurde alles ordnungsgemäß erledigt, gelangt man wieder auf die Übersichts-Seite.

<?php 
if (isset($_POST['submit']) OR ($_SERVER['REQUEST_METHOD'] === "POST")) {
    if (isset($_POST['user'])) {
        $user = $_POST['user']);
    } else {
        $user = "Gast";
    }
 
    if (isset($_POST['text'])) {
        $text = $_POST['text']);
    } else {
        header("Location: neu.php");
        exit;
    }
 
    if (strlen($user) < 3) {
        $user = "Gast";
    }
    if (strlen($text) < 5) {
        header("Location: neu.php");
        exit;
    }
 
    $text = str_replace("|||(((|)))|||", "", $text);
    $text = str_replace("\r\n", "<br />", $text);
    $text = htmlspecialchars($text, ENT_QUOTES | ENT_HTML5, "ISO-8859-1")
 
    $datei = fopen("textdata.txt", "a");
    $time = date("d.m.Y");
    $time .= " um ";
    $time .= date("H:i");
    $daten = "$user|||(((|)))|||$time|||(((|)))|||$text\r\n";
    fwrite($datei, $daten);
    fclose($datei);
    header("Location: index.php");
}
 ?>

Unterhalb des PHP-Skriptes folgt nun der HTML-Code mit dem Formular. Der Head-Bereich und der Grundaufbau ist gleich wie bei der index.php-Datei (abgesehen von den zusätzlichen CSS-Angaben im Head-Bereich).

<!DOCTYPE html>
<html>
 
<head>
  <title>Neuene Eintrag erstellen - G&auml;stebuch</title>
 
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
 
  <meta name="author" content="Benjamin Jung" />
  <meta name="description" content="Ein kleines einfaches G&auml;stebuch" />
  <meta name="keywords" content="G&auml;stebuch" />
</head>
 
<body style="text-align:center;background-color:#E2E2E2;" >
  <div style="margin:0 auto;width:800px;text-align:left;" >
    <img src="banner.jpg" border="0" height="197.5" width="790" alt="G&auml;stebuch" style="margin-left:5px; margin-right:5px;" />
    <h1 style="margin-left:5px; margin-right:5px; width:790px; font-family:Times; font-size:33px; text-align:center;">Neuen Eintrag erstellen - G&auml;stebuch</h1> 
 
</body>
</html>

In dieser Datei benötigen wir nun noch das Formular. Dabei handelt es sich um ein einfaches Formular mit Benutzername-Feld, Text-Feld und natürlich einem submit-Button.

<form action="neu.php" method="post">
<table>
  <tr>
    <td style="width:290px;"><b>Benutzernanme:</b></td>
    <td style="width:500px;"><input type="text" name="user" size="35" /></td>
  </tr>
  <tr>
    <td style="width:290px;"><b>Text:</b></td>
    <td style="width:500px;"><textarea style="resize:none;" name="text" rows="8" cols="55"></textarea></td>
  </tr>
  <tr>
    <td style="width:290px;">&nbsp;</td>
    <td style="width:500px;"><input type="submit" name="post" value="Eintrag erstellen" /></td>
  </tr>
</table>
</form>

Nun haben wir beide Dateien erstellt, das fertige Skript der beiden Dateien sieht nun so aus:

<!DOCTYPE html>
<html>
 
<head>
  <title>G&auml;stebuch</title>
 
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
 
  <meta name="author" content="Benjamin Jung" />
  <meta name="description" content="Ein kleines einfaches G&auml;stebuch" />
  <meta name="keywords" content="G&auml;stebuch" />
 
  <style type="text/css">
  <!--
  .link a:link {
      color: #000000;
      text-decoration: underline;
  }
  .link a:active {
      color: #000000;
      text-decoration: underline;
  }
  .link a:focus {
      color: #000000;
      text-decoration: underline;
  }
  .link a:hover {
      color: #000000;
      text-decoration: none;
  }
  .link a:visited {
      color: #000000;
      text-decoration: underline;
  }
  -->
  </style>
</head>
 
<body style="text-align:center;background-color:#E2E2E2;">
  <div style="margin:0 auto;width:800px;text-align:left;">
  <img src="banner.jpg" border="0" height="197.5" width="790" alt="G&auml;stebuch" style="margin-left:5px; margin-right:5px;" />
  <h1 style="margin-left:5px; margin-right:5px; width:790px; font-family:Times; font-size:33px; text-align:center;">G&auml;stebuch</h1>
  <div style="margin-left:5px; margin-right:5px; margin-bottom:20px; width:790px; font-family:Times; font-size:16px; text-align:right;" class="link" ><a href="neu.php">Jetzt Beitrag erstellen...</a></div>
 
  <?php 
  $array = file("textdata.txt");
 
  $arrayr = array_reverse($array);
 
  if (empty($arrayr)) {
      echo "<div style=\"background-color:#FFFFFF; padding:5px; font-family:Times; font-size:17px; font-style:italic;\">Leider sind bis jetzt noch keine Beiträge vorhanden.</div>";
  } else  {
      foreach ($arrayr AS $daten) {
          $datenteil = explode("|||(((|)))|||", $daten);
          echo "<div style=\"width:790px; margin-left:5px; margin-bottom:25px; border:solid 1px #000000;\">";
          echo "<div style=\"background-color:#C0C0C0; font-family:Times;\">
                  <h1 style=\"font-size:16px; margin:0; padding-left:5px; padding-top:5px; padding-bottom:2px; font-weight:bold;\">
                    <span style=\"font-size:14px;\">von</span> $datenteil[0]
                  </h1>
                  <h2 style=\"font-size:12px; margin:0; padding-left:5px; padding-bottom:2px;\">am $datenteil[1]</h2>
                </div>";
          echo "<div style=\"background-color:#FFFFFF; padding:5px; font-family:Times; font-size:15px;\">$datenteil[2]</div>"; 
          echo "</div>";
      }
  }
   ?>
  </div>
</body>
</html>
<?php 
if (isset($_POST['submit']) OR ($_SERVER['REQUEST_METHOD'] === "POST")) {
    if (isset($_POST['user'])) {
        $user = $_POST['user'];
    } else {
        $user = "Gast";
    }
 
    if (isset($_POST['text'])) {
        $text = $_POST['text'];
    } else {
        header("Location: neu.php");
        exit;
    }
 
    if (strlen($user) < 3) {
        $user = "Gast";
    }
    if (strlen($text) < 5) {
        header("Location: neu.php");
        exit;
    }
 
    $text = str_replace("|||(((|)))|||", "", $text);
    $text = str_replace("\r\n", "<br />", $text);
    $text = htmlspecialchars($text, ENT_QUOTES | ENT_HTML5, "ISO-8859-1");
 
    $datei = fopen("textdata.txt", "a");
    $time = date("d.m.Y");
    $time .= " um ";
    $time .= date("H:i");
    $daten = "$user|||(((|)))|||$time|||(((|)))|||$text\r\n";
    fwrite($datei, $daten);
    fclose($datei);
    header("Location:index.php");
}
 ?>
<!DOCTYPE html>
<html>
 
<head>
  <title>Neuen Eintrag erstellen - G&auml;stebuch</title>
 
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
 
  <meta name="author" content="Benjamin Jung" />
  <meta name="description" content="Ein kleines einfaches G&auml;stebuch" />
  <meta name="keywords" content="G&auml;stebuch" />
</head>
 
<body style="text-align:center;background-color:#E2E2E2;">
  <div style="margin:0 auto;width:800px;text-align:left;">
    <img src="banner.jpg" border="0" height="197.5" width="790" alt="G&auml;stebuch" style="margin-left:5px; margin-right:5px;" />
    <h1 style="margin-left:5px; margin-right:5px; width:790px; font-family:Times; font-size:33px; text-align:center;">Neuen Eintrag erstellen - G&auml;stebuch</h1>
    <form action="neu.php" method="post">
      <table>
        <tr>
          <td style="width:290px;"><b>Benutzernanme:</b></td>
          <td style="width:500px;"><input type="text" name="user" size="35" /></td>
        </tr>
       <tr>
          <td style="width:290px;"><b>Text:</b></td>
          <td style="width:500px;"><textarea style="resize:none;" name="text" rows="8" cols="55"></textarea></td>
        </tr>
        <tr>
          <td style="width:290px;">&nbsp;</td>
          <td style="width:500px;"><input type="submit" name="post" value="Eintrag erstellen" /></td>
        </tr>
      </table>
    </form>
</body>
</html>
Design:
 


Logo
Benjamin Jung
Krummstr. 9/3
73054 Eislingen

E-Mail: info@homepage-webhilfe.de
Webseite: www.homepage-webhilfe.de