Dynamische Webseiten mit SSI Templates

Vorwort

Wenn Sie eine Webseite planen, deren Inhalt sich auf mehrere Unterseiten verteilt, kann es sehr aufwendig werden konsistente Elemente, wie Navigation, Footer oder Teaser zu ergänzen. Schon bereits bei einer Seite mit 10 Unterseiten kann der Aufwand enorm sein wiederkehrende Passagen im Quelltext zu verändern.

Mit einem Template System, dass die verschiedenen Elemente flexibel einbindet, bekommen Sie ein Werkzeug in die Hand welches Ihnen viel Arbeit und Zeit ersparen kann.
Sie müssen nun nur einmal den Kopfbereich, die Navigation oder den Fußbereich ihrer Webseite erstellen.
Mit solch einem System sind Sie auch für zukünftige Veränderungen Ihrer Website bestens gerüstet.

Es gibt verschiedene Möglichkeiten Webseiten dynamisch zu erstellen. Neben SSI oder PHP gibt es verschiedene Preprozessoren die es erlauben mit einem Template System zu Arbeiten. Vor dem Gebrauch von Frames möchte ich abraten. Da sie dem Benutzer die Navigation erschweren und das Setzen von Bookmarks (Lesezeichen) unmöglich machen.

In diesem Artikel möchte ich Ihnen ein Beispiel vorstellen, mit dem Sie ein Template Systeme via Server Side Includes realisieren können.
Geeignet ist diese Lösung für Sie:

Wenn Sie bereits ein HTML/CSS Template erstellt haben.
Wenn Sie Ihre Webseite dynamisch erstellen möchten.
Wenn Sie kein PHP nutzen können oder benutzen möchten.
Wenn Ihr Webspace Anbieter SSI unterstützt.
Und wenn Sie schon Erfahrung mit dem statischen erstellen von Webseiten besitzen.

Ich gehe davon aus, dass die Webseite auf einer Apache httpd gehosted wird.

Begriffserläuterung

Statische Webseiten:: Webseiten deren Inhalte unverändert als Datei vom Webserver an den Besucher ausgeliefert werden.
Dynamische Webseiten:: Webseiten deren Inhalte im Moment der Auslieferung vom Webserver generiert werden.
Konsistente Elemente:: Elemente im Layout der Homepage die unverändert auf jeder Unterseite wiederkehren. Beispiele sind die Navigation oder Kopfbereiche.
Inkonsistente Elemente:: Elemente im Layout einer Homepage die sich auf jeder Unterseite verändern. Ein Beispiel sind die Inhalte und Informationen die in den verschiedenen Kategorien oder Unterseiten angeboten werden.

Funktionsweise

Teilt man die verschiedenen Layout Elemente einer Webseite in konsistente und inkonsistente Elemente ein, könnte folgendes Raster entstehen:

Orange/Rot :: Layout Elemente
Orange :: Konsistente Elemente
Rot :: Inkonsistente Elemente

Was im Bild mit Farben beschrieben ist, kann man auch auf den Quelltext anwenden:


...

<div id="header">
	Konsistentes Element - Kopfbereich der Webseite
</div>

<div id="navigation">
	Konsistentes Element - Navigationsbereich der Webseite
</div>

<div id="content">
	Inkonsistentes Element - Austauschbare Informationen und Inhalte der Webseite
</div>

...

Der Vorteil für Sie ist, dass Sie nur einmal alle Elemente in Ihre index.shtml einbinden müssen und keine Unterseiten mehr nötig sind in denen konsistente Elemente wiederholt werden müssen. Inkonsistente Elemente wie den Content lassen sich in der index.shtml via QUERY_STRING verändern.
Ruft einer Ihrer Besucher nun index.shtml?Galerie auf anstatt index.shtml wird der Inhalt der Startseite mit dem der Galerie ausgetauscht.

<http://en.wikipedia.org/wiki/Query_string>

SSI aktivieren und testen

Um in Erfahrung zu bringen ob Ihr Anbieter SSI erlaubt und welche Umgebungsvariablen Ihnen zu Verfügung stehen. Lohnt es sich ein Blick in Ihren Vertrag zu werfen und eine Datei zu erstellen, welche mit Hilfe von Server Side Includes die angesprochenen Umgebungsvariablen ausgibt.

Sie erstellen einen Ordner Test auf Ihrem Webspace.
Sie erstellen eine .htaccess die Apache anweist die im Ordner liegenden Dateien mit SSI zu parsen.
Sie erstellen im Ordner Test die Datei printenv.shtml.
Sie rufen printenv.shtml im Browser auf.

Im folgenden die Inhalte von .htaccess und printenv.shtml:

.htaccess

# Wenn Sie Server Side Includes (mod_include), oder CGI
# außerhalb ScriptAliased directories, benutzen möchten.

# Sie können hier jede Dateiendung verwenden.
# Auch .html um SSI zu "verstecken".
# Ich nutze hier die Dateiendung .shtml um 
# SSI geparsete Dateien klar von HTML
# Dateien zu unterscheiden.

# Apache 1
# AddType text/html .shtml
# AddHandler server-parsed .shtml

# Apache 2
AddType text/html .shtml
AddOutputFilter INCLUDES .shtml

# Wenn Sie Server Side Inlcudes ohne CGI nutzen möchten.
Options +IncludesNoExec

# Wenn Sie Server Side Includes mit CGI nutzen möchten.
# Zum Beispiel um einen CGI/Perl basierten Formmailer
# einzubinden
# Options +Includes

Auf das Nutzen von SSI mit CGI gehe ich hier nicht weiter ein. Sie finden aber in der Apache Dokumentation mehr Informationen zu diesem Thema.

Quelltext printenv.shtml

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
		"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Dynamische Webseiten mit SSI Templates - Server Site Includes &#8211; Umgebungsvariablen</title>
</head>
<body>
<h1>Server Site Includes</h1>
<h2>Umgebungsvariablen</h2>
<hr>
<pre><!--#printenv --><pre>
</body>
</html>

Nachdem Sie erfolgreich beide Dateien auf Ihrem Webspace angelegt haben. Rufen sie printenv.shtml im Browser auf mit domain.tld/test/printenv.shtml oder domain.tld/test/printenv.shtml?foo.

Bei einem Aufruf von domain.tld/test/printenv.shtml?foo sieht die Bildschirmausgaben folgendermaßen aus:

Bildschirmausgabe printenv.shtml

UNIQUE_ID=SQ2hDwoAAAIAADUeNUQAAADA
HTTP_USER_AGENT=Opera/9.62 (Windows NT 5.1; U; en) Presto/2.1.1
HTTP_HOST=gedit.net
HTTP_ACCEPT=text/html, application/xml;q=0.9, application/xhtml+xml, image/png, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1
HTTP_ACCEPT_LANGUAGE=de-DE,de;q=0.9,en;q=0.8
HTTP_ACCEPT_CHARSET=iso-8859-1, utf-8, utf-16, *;q=0.1
HTTP_ACCEPT_ENCODING=deflate, gzip, x-gzip, identity, *;q=0
HTTP_CONNECTION=Keep-Alive, TE
HTTP_TE=deflate, gzip, chunked, identity, trailers
PATH=/lib64/rc/sbin:/lib64/rc/bin:/bin:/sbin:/usr/bin:/usr/sbin:/usr/local/bin:/usr/local/sbin
SERVER_SIGNATURE=<address>Apache/2.2.10 (Gentoo) DAV/2 mod_ssl/2.2.10 OpenSSL/0.9.8i SVN/1.5.4 PHP/5.2.6-pl7-gentoo</address>
SERVER_SOFTWARE=Apache/2.2.10 (Gentoo) DAV/2 mod_ssl/2.2.10 OpenSSL/0.9.8i SVN/1.5.4 PHP/5.2.6-pl7-gentoo
SERVER_NAME=gedit.net
SERVER_ADDR=80.95.39.132
SERVER_PORT=80
REMOTE_ADDR=217.52.192.127
DOCUMENT_ROOT=/var/www/gedit.net/
SERVER_ADMIN=adminEMAIL@NOSPAMgedit.net
SCRIPT_FILENAME=/var/www/gedit.net/test/printenv.shtml
REMOTE_PORT=62568
GATEWAY_INTERFACE=CGI/1.1
SERVER_PROTOCOL=HTTP/1.1
REQUEST_METHOD=GET
QUERY_STRING=foo
REQUEST_URI=/test/
SCRIPT_NAME=/test/printenv.shtml
DATE_LOCAL=Sunday, 02-Nov-2008 13:46:07 CET
DATE_GMT=Sunday, 02-Nov-2008 12:46:07 GMT
LAST_MODIFIED=Sunday, 02-Nov-2008 13:46:04 CET
DOCUMENT_URI=/test/printenv.shtml
USER_NAME=<unknown>
DOCUMENT_NAME=printenv.shtml

Die Struktur auf das Dateisystem abbilden

Das Sie möglichst effektiv mit Ihrer Webseite arbeiten können, halte ich es für notwendig ein passendes Datei und Ordner System anzulegen. Ein Beispiel wäre wie folgt:

Dateisystem

/webroot
	/includes
		config.inc.shtml
		content.startseite.inc.html
		content.foo.inc.html
		...
	/css
		style.css
		...
	/img
		foo.png
		bar.png
		...
.htaccess
index.shtml
...

In der .htaccess im webroot werden die gleichen Direktive notiert wie im SSI aktivieren und testen Abschnitt.
Beachten Sie bitte das .htaccess Direktive sich auf alle Dateien und Unterordner die sich innerhalb des Ordners befinden, indem die .htaccess angelegt wurde, auswirken.

Von statischen zur dynamischen Webseite

Das HTML/CSS Template welches uns als Arbeitsgrundlage dient und im moment noch statisch vom Webserver ausgeliefert wird.

Quelltext static.tpl.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
		"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<meta http-equiv="Content-Style-Type" content="text/css">
	<link rel="stylesheet" type="text/css" href="./css/style.css" media="all">
	<title>Statisches HTML/CSS Template </title>
</head>
<body>
<!-- start header - Kopfbereich -->
<div id="header">
	<h1> Statisches HTML/CSS Template</h1>
	<p>Artikel: <a href="http://gedit.net/Artikel;Dynamische_Webseiten_erstellen_mit_SSI_Templates" title="//gedit.NET - Artikel - Dynamische Webseiten mit SSI Templates">Dynamische Webseiten mit SSI Templates</a></p>
</div>
<!-- end header - Kopfbereich -->
<div id="wrapper">
<!-- start navigation - Navigation -->
<div id="navigation">
	<h3>Navigation</h3>
	<ul>
		<li><a href="#" title="">Link</a></li>
		<li><a href="#" title="">Link</a></li>
		<li><a href="#" title="">Link</a></li>
		<li><a href="#" title="">Link</a></li>
	</ul>
</div>
<!-- end navigation - Navigation -->
<!-- start content - Inhalte -->
<div id="content">
	<h2>Content</h2>
	<p>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque iaculis, nulla sit amet gravida accumsan, nulla dolor ullamcorper orci, non congue turpis metus laoreet est. Vestibulum lectus purus, bibendum nec, ultricies quis, adipiscing ac, turpis. Nulla facilisi. Mauris gravida tempus est. Vestibulum interdum lectus eget risus. Proin leo quam, luctus tempus, fringilla eget, imperdiet eget, nulla. Phasellus molestie. Nam magna. Etiam tincidunt rutrum est. Aliquam sit amet magna. Proin scelerisque dapibus purus. Nullam ultricies, odio vel consectetuer ultrices, mauris ligula consectetuer mi, quis mollis dolor orci quis justo. Quisque euismod tincidunt est. Duis nunc diam, malesuada nec, dignissim eu, elementum egestas, sapien. Nunc risus. Etiam tristique, eros nec elementum mollis, neque lectus porta orci, sed bibendum tortor ipsum non erat. Vivamus consequat tristique leo.
	</p>
</div>
<!-- end content - Inhalte -->
</div>
<!-- start footer - Fussbereich -->
<div id="footer">
	<p>&copy; 2008 gedit.NET - Artikel - <a href="http://gedit.net/Artikel;Dynamische_Webseiten_erstellen_mit_SSI_Templates" title="//gedit.NET - Artikel - Dynamische Webseiten mit SSI Templates">Dynamische Webseiten mit SSI Templates</a></p>
</div>
<!-- end footer - Fussbereich -->
</body>
</html>

Siehe auch </archiv/dev/artikel/Dynamische_Webseiten_mit_SSI_Templates/static.tpl.html>

Das SSI/HTML/CSS Template welches inkonsistente Elemente dynamisch via SSI includes ausliefert.

Quelltext simple.tpl.shtml

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
		"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<meta http-equiv="Content-Style-Type" content="text/css">
	<link rel="stylesheet" type="text/css" href="./css/style.css" media="all">
	<title>Simple SSI/HTML/CSS Template</title>
</head>
<body>
<!-- start header - Kopfbereich -->
<div id="header">
	<h1> Simple SSI/HTML/CSS Template</h1>
	<p>Artikel: <a href="http://gedit.net/Artikel;Dynamische_Webseiten_erstellen_mit_SSI_Templates" title="//gedit.NET - Artikel - Dynamische Webseiten mit SSI Templates">Dynamische Webseiten mit SSI Templates</a></p>
</div>
<!-- end header - Kopfbereich -->
<div id="wrapper">
<!-- start navigation - Navigation -->
<div id="navigation">
	<h3>Navigation</h3>
	<ul>
		<li><a href="?foo" title="">foo</a></li>
		<li><a href="?bar" title="">bar</a></li>
		<li><a href="?baz" title="">baz</a></li>
	</ul>
</div>
<!-- end navigation - Navigation -->
<!-- start content - Inhalte -->
<div id="content">
	<!--#if expr="$QUERY_STRING=foo" -->
	<!--#include virtual="./include/content.foo.inc.html" -->
	<!--#elif expr="$QUERY_STRING=bar" -->
	<!--#include virtual="./include/content.bar.inc.html" -->
	<!--#elif expr="$QUERY_STRING=baz" -->
	<!--#include virtual="./include/content.baz.inc.html" -->
	<!--#else -->
	<!--#include virtual="./include/content.Startseite.inc.html" -->
	<!--#endif -->
</div>
<!-- end content - Inhalte -->
</div>
<!-- start footer - Fussbereich -->
<div id="footer">
	<p>&copy; 2008 gedit.NET - Artikel - <a href="http://gedit.net/Artikel;Dynamische_Webseiten_erstellen_mit_SSI_Templates" title="//gedit.NET - Artikel - Dynamische Webseiten mit SSI Templates">Dynamische Webseiten mit SSI Templates</a></p>
</div>
<!-- end footer - Fussbereich -->
</body>
</html>

Siehe auch </archiv/dev/artikel/Dynamische_Webseiten_mit_SSI_Templates/simple.tpl.shtml>

Beispiel eines inkonsistenten Elements das via SSI include im Template eingebunden wird.

Quelltext content.foo.inc.html

	<h2>foo</h2>
	<p>
		<b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</b>Pellentesque iaculis, nulla sit amet gravida accumsan, nulla dolor ullamcorper orci, non congue turpis metus laoreet est. Vestibulum lectus purus, bibendum nec, ultricies quis, adipiscing ac, turpis. Nulla facilisi. Mauris gravida tempus est. Vestibulum interdum lectus eget risus. Proin leo quam, luctus tempus, fringilla eget, imperdiet eget, nulla. Phasellus molestie. Nam magna. Etiam tincidunt rutrum est. Aliquam sit amet magna. Proin scelerisque dapibus purus. Nullam ultricies, odio vel consectetuer ultrices, mauris ligula consectetuer mi, quis mollis dolor orci quis justo. Quisque euismod tincidunt est. Duis nunc diam, malesuada nec, dignissim eu, elementum egestas, sapien. Nunc risus. Etiam tristique, eros nec elementum mollis, neque lectus porta orci, sed bibendum tortor ipsum non erat. Vivamus consequat tristique leo.
	</p>
	<p>
		Proin vitae risus eu ligula laoreet sollicitudin. Suspendisse potenti. Praesent posuere cursus ligula. Etiam mi. Aenean cursus blandit mauris. Suspendisse lacinia volutpat enim. Etiam vulputate augue a arcu. Donec malesuada, nisi at cursus venenatis, eros nibh congue libero, tincidunt euismod risus ipsum ut arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse viverra, odio et pretium pulvinar, sapien lectus eleifend urna, eget accumsan urna arcu in elit. Nam egestas lectus ut odio. Phasellus orci. Morbi porta risus non tellus. Donec cursus arcu. Nunc quis velit at nulla tincidunt ornare. Etiam nec mauris vitae dolor interdum accumsan. Nunc sit amet nisl. Vivamus cursus lorem ultricies elit. Morbi ultricies ullamcorper tellus. Etiam viverra feugiat dolor.
	</p>

Siehe auch </archiv/dev/artikel/Dynamische_Webseiten_mit_SSI_Templates/include/content.foo.inc.html>

Das SSI/HTML/CSS Template welches variable Inhalte bei konsistenten Elemente ermöglicht.

Quelltext advance.tpl.shtml

<!--#include virtual="./include/config.inc.shtml" -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
		"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<meta name="description" content="//gedit.NET - Artikel - Advance SSI/HTML/CSS Template - <!--#echo var="TITLE" -->">
	<meta name="keywords" content="<!--#echo var="KEYWORDS" -->">
	<meta http-equiv="Content-Style-Type" content="text/css">
	<link rel="stylesheet" type="text/css" href="./css/style.css" media="all">
	<title>Advance SSI/HTML/CSS Template - <!--#echo var="TITLE" --></title>
</head>
<body>
<!-- start header - Kopfbereich -->
<div id="header">
	<h1> Advance SSI/HTML/CSS Template</h1>
	<p><i><!--#echo var="TITLE" --></i></p>
	<p>Artikel: <a href="http://gedit.net/Artikel;Dynamische_Webseiten_erstellen_mit_SSI_Templates" title="//gedit.NET - Artikel - Dynamische Webseiten mit SSI Templates">Dynamische Webseiten mit SSI Templates</a></p>
</div>
<!-- end header - Kopfbereich -->
<div id="wrapper">
<!-- start navigation - Navigation -->
<div id="navigation">
	<h3>Navigation</h3>
	<ul>
		<li><a href="<!--#echo var="SCRIPT_NAME" -->" title="">Startseite</a></li>
		<li><a href="?foo" title="">foo</a></li>
		<li><a href="?bar" title="">bar</a></li>
		<li><a href="?baz" title="">baz</a></li>
	</ul>
</div>
<!-- end navigation - Navigation -->
<!-- start content - Inhalte -->
<div id="content">
	<!--#include virtual="./include/content.$SITENAME.inc.html" -->
</div>
<!-- end content - Inhalte -->
</div>
<!-- start footer - Fussbereich -->
<div id="footer">
	<p>
		<!--#echo var="SITENAME" -->
		- <!--#echo var="TITLE" -->
		- &copy; 2008 gedit.NET
		- Artikel - <a href="http://gedit.net/Artikel;Dynamische_Webseiten_erstellen_mit_SSI_Templates" title="//gedit.NET - Artikel - Dynamische Webseiten mit SSI Templates">Dynamische Webseiten mit SSI Templates</a>
		<br>
		Zuletzt ge&auml;ndert am <!--#config timefmt="%d.%m.%Y  um %T" --><!--#flastmod file="advance.tpl.shtml" -->
	</p>
</div>
<!-- end footer - Fussbereich -->
</body>
</html>

Siehe auch </archiv/dev/artikel/Dynamische_Webseiten_mit_SSI_Templates/advance.tpl.shtml>

Beispiel einer config.inc.shtml die in der advance.tpl.shtml included wird.

Quelltext config.inc.shtml

<!--#set var="KEYWORDS" value="dynamische Webseiten, SSI includes, SSI Template, Server Side Includes" -->
<!--#if expr="$QUERY_STRING=foo" -->
<!--#set var="SITENAME" value="foo" -->
<!--#set var="TITLE" value="Ein Titel zum Thema foo." -->
<!--#elif expr="$QUERY_STRING=bar" -->
<!--#set var="SITENAME" value="bar" -->
<!--#set var="TITLE" value="bar ist ebenfalls eine metasyntaktische Variable." -->
<!--#elif expr="$QUERY_STRING=baz" -->
<!--#set var="SITENAME" value="baz" -->
<!--#set var="TITLE" value="Dieser Titel geh&ouml;rt zu baz." -->
<!--#set var="KEYWORDS" value="baz, SSI Template, Server Side Includes" -->
<!--#else -->
<!--#set var="SITENAME" value="Startseite" -->
<!--#set var="TITLE" value="Willkommen auf der Startseite" -->
<!--#endif -->