kramann.info

2 Dokumentation der Projekte

PROJEKT-BEARBEITUNG:	Guido Kramann
LETZTE ÄNDERUNG:	05.06.2007

Den Lesern wird gezeigt, wie sie HTML-Seiten für diesen Internet-Auftritt erzeugen können.
Eine XAMPP-Umgebung (Apache, MySQL, PHP, Perl) wird auf dem eigenen Notebook istalliert.
Dieser Weg wird gewählt, weil er schnell und einfach geht und die Notwendigkeit eine Menge Software einzeln zu installieren und zu konfigurieren umgeht.
Apache ist eine freie Server-Software, die auch in professionellen Systemen eingesetzt wird.
Damit hat jeder einen lokalen Server, d.h. nach Start von Apache arbeitet Ihr Computer als Internet-Server und kann Internetseiten anzeigen, die in dem htdocs-Verzeichnis abgelegt werden.
Hier können die Seiten entwickelt werden und im Internet-Browser unter http://localhost/.. angeschaut werden.
Die HTML-Seiten werden in das "htdocs"-Verzeichnis des XAMPP-Programm-Verzeichnisses gelegt, z.B. in (C:\Programme mpp\htdocs5_Workshop\).
Um nicht selber die Verlinkung der Seiten vornehmen zu müssen, wird statt einer echten HTML-Seite eine index.php-Seite in einen Ordner gelegt und der eigentliche HTML-Inhalt in ein Dokument mit dem Namen inhalt.inc geschrieben.
So können sich Autoren auf die Inhalte konzentrieren, ohne sich um Navigation und Layout kümmern zu müssen.
Ein solches System nennt man Content-Management-System.

Googlen Sie nach einem Download für eine aktuelle XAMPP Installation für Windows XP
Folgen Sie den Anweisungen des Installers bei der Installation.
Wählen Sie nicht die Option für den automatischen Start des Apache-Serverse und von MySQL, sondern die für die händische.

Bild 2-1: XAMPP-Control-Panel

Wenn Sie in Ihrem Internet-Browser die Seite http://localhost wählen, sehen Sie die vom Apache-Server erzeugte Startseite.
Testen Sie das indem Sie die Startseite durch eine eigene ersetzen.
Die Seite befindet sich im Ordner htdocs in folgendem, oder einem ähnlichen Verzeichnis: C:\Programme mpp
Benennen Sie dazu am besten den Ordner htdocs um in htdocs2 und erzeugen dort einen neuen leeren Ordner htdocs
Erzeugen Sie darin ein File mit dem Namen "index.html" mit folgendem Inhalt:

Bild 2-1: Eigene Startseite in HTML.

Bild 2-2: Eigene Startseite im Internet-Browser.

Das ist das Grundprinzip, wie man selber Internetseiten erzeugen kann und wie sie angezeigt werden.
Die Tags (Schlüsselwörter in spitzen Klammern) trennen verschiedene Blöcke in einer HTML-Seite ab.
Ein Tag mit Slash ( / ) schließt den Block mit dem gleichen Namen.
Jede HTML-Seite besitzt das HTML-Tag, einen Header-Bereich und einen Body-Bereich.
Im Body-Bereich wird beschrieben, was der Internet-Browser anzeigen soll, der die Seite anfordert.
Seiten in Unterverzeichnissen unterhalb htdocs werden mit hintanfügen des Ordnernamens angesprochen, also http://localhost/unterordner/index.html, statt http://localhost/index.html
Analoges gilt für noch tiefer liegende Verzeichnisse.

Machen Sie nun die Namensänderung des ursprünglichen htdocs-Ordners wieder rückgängig und fügen Sie in diesen Ordner, den Inhalt des htdocs-Ordners, der in folgendem ZIP-File enthlten ist ein.
Ersetzen Sie ggf.schon vorhandene Files und Ordner durch die in dem ZIP-File:

Wenn Sie nun die Basis-URL http://localhost anschauen sollte die Seite so erscheinen:

Bild 2-3: Startseite des CMS.

Bild 2-3: Startseite des CMS.

Nun können Sie diese Seite bearbeiten, indem Sie sich als Autor einloggen.
Tragen Sie dazu in die Formularfelder am oberen Buldrand als login-Name "autor" und als Passwort "R2D2" ein und klicken dann "go".
Durch Klicken der einzelnen Tag-Knöpfe werden Ihnen Standard-Tags zur Verfügung gestellt, die Sie dann in den Textbereich mit dem Quelltext der Seite hineinkopieren und anpassen können.
Mit "Speichern" wird die modifizierte Seite abgespeichert.

Bild 2-4: Ansicht nach dem login als Autor.

Wenn Sie einen Blick in die Ordnerstruktur von htdocs werfen, sehen Sie dass 01_Uebersicht ein Unterordner von 65_Workshop ist.
Ferner befindet sich in jedem Ordner eine inhalt.inc-Datei und eine index.php-Datei.
Durch Anlegen eines Ordners und Hineinkopieren einer Kopie der index.php-Datei und einer neuen inhalt.inc-Datei kann man selber neue Kapitel erzeugen, die automatisch in der Navigation angezeigt werden.
Voraussetzung ist, dass der Ordner mit einer zweistelligen Zahl und einem nachfolgenden Unterstrich beginnt. Hierdurch wird die Reihenfolge in der Navigation festgelegt.
Statt sich als Autor einzuloggen, können Sie auch direkt in die inhalt.inc-Datei Ihren Inhalt hineinschreiben.
Achtung: Hier kommen lediglich Ihre Inhalte hinein. das "drum-herum" wird automatisch hinzugefügt.
Vergleichen Sie einfach einmal eine inhalt.inc-Datei und den Quelltext, wie er der Internet-Browser liefert miteinander.

Bild 2-5: Ordnerübersicht zu dem Default-Webauftritt.

Nun sind Sie in der Lage unterhalb des Ordners 65_Workshop die Dokumentation Ihres Projekts in HTML zu verfassen.
Wenn Sie das lokal abgeschlossen haben, kann Ihre Ordnerstruktur auf den echten Server hochgeladen werden.