Struktur-Seiten-Dateien
2008-11-05Über das Menü werden die jeweilig Struktur-Seiten aufgerufen. Hier in diesem Beispiel gibt es im Menü folgenden Punkte: 'cms4ds', 'files', 'stylesheet', 'javascript', 'database', 'rss', 'search' und 'tools'. Dazu korrespondieren in der Content-Datenbank die Rubriken. Für jeden Menüpunkt gibt es eine eigene HTML-File: cms4ds.html, files.html usw. Zudem wird die index.html als symbolischer Link auf die Seite cms4ds.html gelegt, damit auch der URL-Aufruf ohne spezielle Seite gelingt.
Die HTML-Dateien werden entweder ausschließlich dynamisch mit Inhalten aus der Datenbank gefüllt oder enthalten statische Inhalte oder ein Mixture aus beidem. Wenn statische Inhalte eingetragen werden, dann muss dieser folgender Struktur entsprechen
<div class="content" style="display:block" >
// damit auch ein Bookmark-Integration erfolgen kann, wird der Titel hierfür vorbereitet
// bookmark()-Funktion wird unter javascript erläutert
<h3 onclick="bookmark('Titel')">Titel</h3>
<i>Titel_datum - Autor</i>
<p>Content</p>
</div>
Der Aufbau der HTML-Files ist recht schlicht und wird mit SSI-Direktiven gestaltet:
<!--#include virtual="header.html" -->
<!--#include virtual="cms4ds.php?where=cms4ds" -->
<!--#include virtual="footer.html" -->
<script>LoadRSS2("http://www.synology-forum.de/external.html?count=12");</script>
<!--#include virtual="bottom.html" -->
In der Zeile 1 wird die Datei header.html inkludiert; hier wird der Grundaufbau der Seite angelegt, sowie die Menüzeile eingerichtet.
In der zweiten Zeile wird der dynamische Content geholt. Die Selektion der Rubrik wird per URL-Klausel erledigt. Die Diskussion der Datei cms4ds.php findet hier statt.
In der Zeile 3 wird die Datei footer.html inkludiert, die die Fußzeilen-Inhalte enthält.
In der vierten Zeile werden Inhalte für die Auswahl-Rand-Spalte besorgt bzw. beschrieben; hier in diesem Fall wird ein RSS-Feed inkludiert.
In der letzten Zeile wir die Datei bottom.html inkludiert, welche die javascript-Skripte aufruft, die den Themen-Auswahlrand aufbauen und die Beiträge bis auf den ersten ausblenden (make_index()). Außerdem wird die Suchfunktionaliät per Skript angeworfen.
header.html
2008-11-05Die Datei header.html gibt den Seiten die Struktur und enthält die Menü-Zeile.
<!--#set var="t" value="" -->
<html><head><title>cms4ds</title>
<link rel="stylesheet" type="text/css" href="cms4ds.css" />
<link rel="alternate" type="application/rss+xml"
title="cms4ds-News-Feed" href="cms4ds_rss.php"/>
<link rel="shortcut icon" href="cms4ds.ico" />
<link rel="search" type="application/opensearchdescription+xml"
href="http://syno/cms4ds/search.xml" title="cms4ds" />
<script type="text/javascript" src="cms4ds.js"></script>
<script>var d0,d1,d2,d3;d0=new Date().getTime();</script>
</head><body onload="history()">
<iframe src="blank.html?0" name="histFrame" id="histFrame"></iframe>
<div id="basecontainer">
<div id="top">cms4ds<br/><span>a CMS for Synology Disk Stations</span></div>
<div id="menu">
<a href="cms4ds.html">cms4ds</a>
<a href="files.html">files</a>
<a href="stylesheet.html">stylesheet</a>
<a href="javascript.html">javascript</a>
<a href="database.html">database</a>
<a href="rss.html">rss</a>
<a href="search.html">search</a>
<a href="tools.html">tools</a>
</div> <!-- menu -->
<div id="container">
<div id="container_col">
<input id="search" ondblclick="searchAll(this.value)"
title="Doppelklick zum Starten des Suchvorgangs"
value="(Suchbegriff)"/>
<div id="counter"># Besucher</div>
<div id="feed"></div>
<div id="index"></div>
</div> <!-- container_col -->
<div id="content">
Im Kopfbereich werden per <link>-Tag Stylesheet, Feed, Icon und Suchintegration einbaut. Dazu kommt noch der Verweis auf die JavaScript-Datei cms4ds.js.
Im <body>-Tag wird die Funktion für die AJAX-History-Mechnik angelegt. Hierfür benötigt man ein iframe. Die Datei bank.html muss zwar vorhanden sein (sonst melden manche Browser Fehler), kann aber leer sein.
Die nachfolgenden <div>-Tags geben der Seite die Struktur und füllen den Kopfbereich sowie das Menü. Danach wird das Suchfeld für die Datenbank-Inhalts-Recherche definiert. mit einem Doppel-Klick wird der Suchvorgang gestartet. Die in der Themen-Spalte vorkommenden Bereichen werden noch definiert: counter, feed und index. Im Counter wird das #-Zeichen später per JavaScript gegen die Besucherzahl substituiert.
Alle Größenangaben der <div>-Bereiche werden ausschießlich über die CSS-Datei gesteuert; also ganz klar Trennung von Inhalt und Layout.
footer.html
2008-11-05Die Datei footer.html enthält die Fußzeilen-Inhalte:
</div> <!-- content --> </div> <!-- container --> <div id="footer">(c) 2008 by 至 itari based on cms4ds</div> <div id="timer"><!--#echo var="t" --> # </div> </div> <!-- basecontainer -->
Im Wesentlichen wird hier der Inhalt der Fußzeile(n) festgelegt. In diesem Beispiel wird die Timer-Ausgabe per SSI (Server-Side-Include) ausgegeben
bottom.html
2008-11-05Die Datei bottom.html enthält die JavaScript-Aufrufe:
<script> make_index(); s=window.location.search; if (s.substr(1,1)=='s') searchAll(s.substr(3)); if (s) showme(s); </script> </body></html>
Die JavaScript-Funktion make_index() sucht alles im Content-Bereich vorkommenden h3-Tags heraus und baut damit das Themen-Auswahl-Menü auf. Zudem schaltet sie alle Blöcke hinsichtlich des Attibutes display auf 'none', so dass der Content bis auf den ersten Beitrag zwar geladen ist, aber nicht sichtbar ist. Diese Sichtbarkeit wird später über das Themen-Auswahl-Menü hergestellt.
.htaccess
2008-11-06Die .htaccess-Datei schaltet die SSI (Server Side Includes) des Apache-Web-Servers ein und zwar so, dass es für alle PHP-Dateien und alle ausführbaren (chmod 777) HTML-Dateien gilt.
Options +Includes AddOutputFilter INCLUDES .php XBitHack on
Daran denken, dass die Zugriffsrechte der .htaccess-Datei so gesetzt sind, dass andere die Datei nur lesen können, weil sonst Mißbrauch getrieben werden kann (und manchmal der Apache die Datei auch nicht interpretieren mag).