WordPress ist als reines Blogsystem gestartet, eignet sich aber längst auch als CMS für normale Webseiten. Wer mit einem Design von der Stange zufrieden ist und alles weitere über Plugins löst, kommt damit auch gut zurecht. Doch manchmal benötigt man einfach viele Dinge nicht die ein so großes System wie WordPress mitbringt. Ist die Seite klein und überschaubar, lohnt es sich ein eigenes kleines System mit HTML, PHP und MySQL zu erstellen. Mit der richtigen Vorarbeit ist auch so eine Lösung leicht zu pflegen, zu erweitern und eignet sich gut für kleine Nischenseiten.
Gerade in Sachen Ladegeschwindigkeit kann sich eine schlanke Webseite positiv für das Ranking in Suchmaschinen auswirken – und da kann ein CMS mit vielen Funktionen und Erweiterungen, die häufig nicht mal benötigt werden, schon ausbremsen.
In diesem ersten Teil wird das HTML-Layout für die Webseite erstellt, welches später mit PHP und MySQL wieder zerpflückt und mit Inhalt wie Text, Bilder und Videos gefüllt werden kann. Dies soll aber auch kein kompletter HTML- oder Programmierkurs sein, es ist sicherlich auch nicht immer alles zu 100 Prozent richtig – aber Einsteiger können bestimmt einiges lernen.
Der HTML-Quelltext wird also in verschiedene Teile gesplittet. Warum?
Herkömmliche, statische Webseiten haben ein Problem: Wenn das Projekt viele Unterseiten hat und zum Beispiel etwas im Navigationsmenü geändert werden soll, müssen diese Änderungen in jeder Datei vorgenommen werden. Wäre es nicht hilfreich wenn alle Unterseiten auf die gleiche Navigation zugreifen könnten und nur diese einfach einmal geändert werden muss? Genau.
Was wird benötigt?
Um HTML, JavaScript oder PHP-Code zu erstellen, wird nicht unbedingt ein spezielles Programm benötigt. Dafür würde auch der einfache Texteditor von Windows genügen. Dieser ist allerdings extrem rudimentär und erleichtert die Arbeit keineswegs. Sinnvoller sind also auf diese Arbeit spezialisierte Programme, wie zum Beispiel Notepad++ oder WebArchitect.
Neben vielen speziellen Funktionen bieten diese vor allem Syntax-Highlighting (Befehle und Strukturen werden farblich hervorgehoben), das erleichtert den Überblick und die Lesbarkeit.
Für die späteren Arbeitsschritte mit PHP und MySQL wird zudem ein Webserver auf dem eigenen Computer benötigt. Das klingt komplizierter als es ist. Die Apachefriends.org bieten dafür den XAMPP-Server an. XAMPP (X steht für Windows, Linux oder Mac, A für Apache, M für MySQL, P für PHP und P für Perl) ist ein Komplettpaket für einen Apache-Webserver, der auf dem eigenen Rechner installiert und bei Bedarf gestartet werden kann. Apache ist sehr weit verbreitet und läuft bei so ziemlich jedem Webhoster. Mit dem XAMPP hat man also ein quasi ein komplettes Entwicklungssystem unter Realbedingungen. PHP und MySQL sollten 2015 bei keinem Webhoster mehr ein großes Problem darstellen.
XAMPP ist aber nicht geeignet für den Einsatz auf einem echten Webserver. Theroetisch könnte, wenn XAMPP installiert und aktiv ist, der eigene Rechner auch die eigene Webseite hosten.
Um den installierten Webserver zu testen, muss dieser über das Control-Center gestartet werden. Dazu einfach neben dem Eintrag “Apache” auf “Start” klicken. Das Feld daneben sollte sich nun grün färben und dort das Wort “running” erscheinen.
Das XAMPP Control-Center
Um zu testen ob der Webserver auch funktioniert, genügt die Eingabe von http://localhost im Browser. Dann sollte eine ähnliche Seite wie diese angezeigt werden:
Apache… läuft!
Der Apache arbeitet im Unterordner /htdocs. Dieser befindet sich Installationsverzeichnis unter [Laufwerk]/xampp/htdocs. Für dieses Beispielprojekt sollte im Ordner /htdocs der Unterordner /beispielprojekt erstellt werden.
Das Layout der Webseite
Das Layout dieser Beispielseite basiert auf einem Layout, das auch bei einem echten Projekt im Einsatz ist. Die Beispielseite ist nicht sehr umfangreich und verfügt darum auch nur über wenige Menüpunkte. Wer mehr benötigt, kommt also nicht um ein Aufbohren des Menüs herum. Das Layout ist responsive und passt sich der jeweiligen Bildschirmauflösung an.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
<!DOCTYPE html>
<html lang=„de“>
<head>
<title>Beispielprojekt</title>
<meta http-equiv=„content-type“ content=„text/html; charset=utf-8“ />
<link href=‚http://fonts.googleapis.com/css?family=Roboto‘ rel=’stylesheet‘ type=‚text/css‘>
<link rel=„stylesheet“ href=„css/style.css“ />
</head>
<body>
<header>
Beispielprojekt
</header>
<div id=„wrapper“> <!– Wrapper auf –>
<nav>
<ul>
<li><a href=„#“>Startseite</a></li>
<li><a href=„#“>Infos dazu</a></li>
<li><a href=„#“>Tipps dafür</a></li>
<li><a href=„#“>Jetzt kaufen</a></li>
</ul>
</nav>
<div class=„clear“></div>
<main>
<h1>Dieses Produkt ändert Ihr Leben</h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.<br />
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br />
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<div class=„fifty_l“>
<ul class=„liste“>
<li class=„liste“>Feature 1</li>
<li class=„liste“>Feature 2</li>
<li class=„liste“>Feature 3</li>
<li class=„liste“>Feature 4</li>
<li class=„liste“>Feature 5</li>
<li class=„liste“>Feature 6</li>
</ul>
</div>
<div class=„fifty_r“>
<figure>
<img src=„img/beispielbild.jpg“ class=„img_res“>
<figcaption>
Auf der Flucht
</figcaption>
</figure>
</div>
<div class=„clear“></div>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<h2>Unterschied von A zu B</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</main>
<footer>
<ul>
<li><a href=„#“>Startseite</a></li>
<li><a href=„#“>Infos dazu</a></li>
<li><a href=„#“>Tipps dafür</a></li>
<li><a href=„#“>Jetzt kaufen</a></li>
<li><a href=„#“>Datenschutzerklärung</a></li>
<li><a href=„#“>Impressum</a></li>
<li>© 2015 beispielprojekt
</ul>
</footer>
</div> <!– Wrapper zu –>
</body>
</html>
|
Also alles recht überschaubar. Das Stylesheet ist im Moment nicht wichtig. Denn wir kümmern uns jetzt darum, den HTML-Quelltext sinnvoll in einzelne Dateien aufzuteilen. Dazu kommt nun PHP ins Spiel. Je nach Konfiguration des Servers muss der PHP-Code in Dateien mit der Endung .php ausgeführt werden. Da dies in der Konfiguration des Apache häufig so voreingestellt ist, wird das auch in diesem Beispiel so sein. Als ersten Schritt speichern wir also die Datei index.html im Hauptverzeichnis des Beispielprojekts als index.php ab. Danach sollte die index.html in irgendetwas anderes umbenannt werden wie indexalt.html – denn Webserver sind meist so konfiguriert das die index.html vor der index.php aufgerufen wird und so unsere Änderungen keine Wirkung zeigen.
Struktur mit Ordnern
Ordnung ist das halbe Leben. Und gerade wenn viele Dateien im Spiel sind, ist es wichtig diese in passenden Ordnern unterzubringen. Wir werden die index.php nun in 6 einzelne Dateien aufsplitten, die während des Aufrufens der Seite wieder zu einem Gesamtkunstwerk zusammengesetzt werden. (Wer sich die folgenden Arbeitsschritte sparen möchte, für den stehen die Dateien unten auch zum Download zur Verfügung).
Dazu sind zunächst die passenden Ordner erforderlich. Darum sollte nun im Hauptverzeichnis des Beispielprojektes folgende Unterordner angelegt werden:
- /meta – beinhaltet den HEAD der Webseite
- /header – beinhaltet den Seitenkopf (Logo)
- /navi – beinhaltet die Navigation
- /content – beinhaltet die Dateien mit dem eigentlich Seiteninhalt
- /footer – beinhaltet den Fußbereich der Webseite
- /inc – beinhaltet verschiedene Dateien die eingebunden werden können/müssen/sollen
Jetzt geht’s los. Die Ordnerstruktur ist vorhanden und nun kann die index.php in Ihre verschiedenen Teile aufgesplittet werden.
Wie im Screenshot zu sehen, wird der Bereich zwischen <doctype html> und </head> markiert und in eine neue, leere Datei kopiert. Diese neue Datei einfach im Ordner /meta als head.php abspeichern.
Quelltext kopieren und als .php speichern
Danach muss in der index.php (aus der gerade der Code kopiert wurde) der markierte Quelltext durch folgendes ersetzt werden:
|
1
2
3
|
<?php
include („meta/head.php“);
?>
|
Hier kommt zum ersten Mal PHP ins Spiel. PHP-Code muss immer zwischen <?php und ?> stehen. Der Befehl include bindet dann die Datei, die in Klammern und Anführungszeichen steht, in die aktuelle Datei ein. Also die Datei head.php im Unterverzeichnis /meta.
Als nächstes muss der Bereich <header> und </header> in eine neue Datei kopiert und diese im Ordner /header als header.php abgespeichert werden.
Der kopierte Quelltext wird einfach ersetzt durch ein:
|
1
2
3
|
<?php
include („header/header.php“);
?>
|
Die weiteren Schritte in Kurzform:
Der Bereich <nav> … </nav> in die Datei navi.php im Ordner /navi
Der Bereich <main> … </main> in die Datei startseite.php in den Ordner /content
Der Bereich <footer> … </footer> in die Datei footer.php in den Ordner /footer
Die index.php sollte nun so aussehen:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<?php
include („meta/head.php“);
?>
<body>
<?php
include („header/header.php“);
?>
<div id=„wrapper“> <!— Wrapper auf —>
<?php
include („navi/navi.php“);
?>
<div class=„clear“></div>
<?php
include („content/startseite.php“);
include („footer/footer.php“);
?>
</div> <!— Wrapper zu —>
</body>
</html>
|
Ziemlich geschrumpft, oder? Das soll auch so sein. Läuft XAMPP? Dann einfach mal den Browser öffnen und die Adresse http://localhost/beispielprojekt aufrufen. Diese URL ruft im Verzeichnis/htdocs/beispielprojekt die Datei index.php auf, führt die include-Befehle aus und setzt die ursprüngliche HTML-Seite wieder zusammen, wie ein Blick in den Quelltext zeigt.
Im nächsten Teil kommt dann auch die Datenbank zum Einsatz. Mit Unterstützung der Datenbank bekommt die Webseite einen Hauch von Dynamik, dafür ist aber auch etwas Vorarbeit nötig.