Tutorial Webseitenerstellung

Dieses Tutorial besteht aus drei Teilen:

I) Basiswissen: Wie erstelle ich ein Design für meine Webseite

II) Automatisierung und Vereinfachung der Handhabung einer Website mit PHP

III) Nutzung als Template für Content Management Systeme (CMS)

Dieser Teil des Tutorials baut auf den Teil I auf. Wer bereits Webseiten mit HTML und CSS gestalten kann, wird diesen Part aber auch direkt nacharbeiten können.

II) Automatisierung und Vereinfachung der Handhabung einer Website mit PHP

1. Einführung

Im ersten Teil des Tutorials habe ich einen Weg gezeigt, eine Webseite mit HTML und CSS zu gestalten. Das ist aber nicht immer ausreichend oder zufriedenstellend.
   
Nehmen wir als Beispiel unsere bereits gestaltete Site mit ihren 4 Menüpunkten für Unterseiten. Für jede Seite müßte die index.html kopiert, umbenannt und verändert werden. Kommt jetzt noch eine fünfte Seite hinzu, müssen die Dateien aller anderen Seiten erneut bearbeitet werden, um den neuen Menüpunkt einzufügen. Auch Änderungen in der Sidebar und im Kopf- oder Fußbereich müßten identisch in allen Dateien wiederholt werden.

Das ist aufwändig, lästig und fehleranfällig. HTML läßt uns wenig Alternativen.

Wer etwas Größeres plant, wird vermutlich jetzt über ein Redaktionssystem/CMS nachdenken. Dafür ist aber häufig eine Datenbank nötig und Verwaltung oder Bedienung sind auch nicht immer einfach.
Wir verzichten auf ein CMS und gestalten eine einfache dynamische Seite mittels PHP. (Wie wir die Beispielseite aus Teil 1 für ein CMS nutzbar machen, erkläre ich im ditten Teil des Tutorials.)

Da HTML für unsere Zwecke nicht mehr aussreicht, wenden wir uns einer anderen Programmiersprache zu, die unsere HTML-Seite ergänzt. PHP als Programmiersprache ermöglicht es, wie bei einem Baukasten, vorgefertigte Teile immer wieder oder an verschiedenen Stellen zu verwenden.

Wie das, auch für einen Laien, der sich nicht mit PHP auskennt, machbar ist, soll dir dieses Tutorial zeigen.

2. Voraussetzungen:

2.1 Webspace

Während sich HTML-Dateien problemlos auf dem eigenen Rechner ausführen und betrachten lassen, benötigen wir für die Nutzung von php eine besondere Umgebung.
Eine Möglichkeit ist es, einen lokalen Webserver zu installieren (dafür gibt es z.B. XAMPP). Das wäre für unser kleines Projekt aber überflüssige Arbeit.
Da die Webseite eh bei einem Webhoster hinterlegt werden muß, damit die Welt sie sehen kann, können wir auch dessen Webserver nutzen um unsere Seite zu bauen und zu testen. Dort ist mittlerweile auch fast immer der Einsatz von PHP möglich.

Noch keinen Hoster gewählt? Für kleine Projekte und Experimente reicht ein Freehoster wie z.B. Lima-City. Für unsere Zwecke sofort  kostenlos nutzbar, außerdem frei von Zwangswerbung.

2.2 Werkzeuge

Wie bereits in Teil I benötigen wir für dieses Tutorial einen vernünftigen Texteditor.
Ich empfehle auch hier wieder notepad++. Dieser Editor hat für unser Vorhaben einige Vorteile. Er kann mehrere Dateien gleichzeitig bearbeiten, PHP- und HTML-Code farblich hervorheben, so daß wir uns in unseren Dokumenten besser orientieren können und es gibt außerdem eine kleine Erweitrung für den Editor, die es uns ermöglicht, direkt per FTP auf dem Webserver zu arbeiten. (Zu notepad++ wird es demnächst ein eigenes Tutorial geben.)

Wer mit einem anderen Editor arbeitet, der diese Möglichkeit nicht hat, muß sich einen FTP-Client, wie z.B. Filezilla beschaffen.

Für Linuxnutzer gibt es vergleichbare Tools. Google hilft bei der Auswahl.

3. Das Seitenkonzept

Aber nun zur Sache

Betrachten wir das Beispiel aus dem 1. Tutorialteil:

Die Webseite besteht aus 5 Elementen

• Header
• Menü
• Contentbereich
• Sidebar
• Footer

.......

Darum legen wir als erstes die folgenden, leeren Dateien an:

• index.php
• header.php
• menu.php
• footer.php
• sidebar.php
• daten.php

ebenso vorerst 3 Dateien, die Inhalte aufnehmen können:

• startseite.php
• seite1.php
• seite2.php

Header, Footer und Sidebar werden vermutlich seltenst geändert.

In die index.php schreiben wir folgenden Inhalt:

<?php 
$seiten = array();
$seitendaten= array();
include("daten.php");

$anzeigen=strip_tags($_GET['show']);
if (is_array($seiten["$anzeigen"])){ /* gibt es einen Datensatz für eine Seite mit dem gewünschten Namen?*/
	$seitendaten = $seiten[$anzeigen];
	$aktuelleSeite = $anzeigen .".php";
}
else {  /* Wenn jemand eine Seite aufruft, die es nicht gibt, laden wir die Startseite*/
	$seitendaten = $seiten["startseite"]; 
	$aktuelleSeite = "startseite.php";
}

include("header.php");
include("$aktuelleSeite"); //hier wird der angeforderte Inhalt geladen
include("sidebar.php");
include("footer.php");
?>

$zeigedas['Seitentitel'];

daten.php:

<?php 
/***** Muster für einen Datensatz einer Contentseite ******/
$inhalt['Seitenname']=array(
	'Seitentitel' 		=> 'Titel der Seite',
	'MetaBeschreibung'	=> 'Hier die Beschreibung der Seite hin',
	'MetaKeywords'		=> 'wichtiges Keyword, noch eins',
	'Robots'		=> 'index/follow',
	'Schalter1'		=> '',
	'Schalter2'		=> ''
);
/****** Muster Ende ******/

$inhalt['startseite']=array(
	'Seitentitel' 		=> 'Dies ist der Titel der Startseite',
	'MetaBeschreibung'	=> 'Hier die Beschreibung der Startseite',
	'MetaKeywords'		=> 'Keyword eins, Keyword zwei',
	'Robots'		=> 'index,follow',
	'Schalter1'		=> '',
	'Schalter2'		=> ''
);

$inhalt['seite1']=array(
	'Seitentitel' 		=> 'Dies ist der Titel der Seite1',
	'MetaBeschreibung'	=> 'Hier die Beschreibung der Startseite',
	'MetaKeywords'		=> 'Keyword eins, Keyword zwei',
	'Robots'		=> 'index,follow',
	'Schalter1'		=> '',
	'Schalter2'		=> ''
);

?>