1.1 Client - Seitendarstellung im Browser der Seite aus der Sicht des Clients

Transkript

1 1. Dokumentation der Struktur/Syntax des Redaktionssystems für Webseiten von Gregor Meyenberg Im folgenden Abschnitt werden wir das Redaktionssystem für Webseiten von Gregor Meyenberg aus verschiedenen Blickwinkeln erläutern. Wir gehen von drei Betrachtungsebenen aus, von denen man mit dem Sytem interagiert. Die oberste Ebene soll hierbei der Client sein, der die entsprechende Internetpräsenz über den Browser aufruft. Anhand der Beispielseite wird diese Ebene sichtbar. Die zweite Ebene ist der User, der als Verwalter der angebotenen Informationen seiner eigenen Internetpräsenz auftritt. Dies geschieht über eine Bedienoberfläche die über den Link erreichbar ist. Auf dritter Ebene erscheint nun der klassische Entwickler. Sein Aufgabenfeld ist es mit dem User abgesprochene Designvorlagen in das System einzubinden. Modell: 3 Ebenen Client User Entwickler 1.1 Client - Seitendarstellung im Browser der Seite aus der Sicht des Clients Nachdem der Client die o.g. Internetseite im Browser aufgerufen hat wird er auf die Startseite geleitet. Auf dieser Startseite findet er auf der rechten Seite ein Navigationsmenü um sich alle auf der Internetpräsenz befindlichen Inhalte und Informationen anzeigen zu lassen. Dem Client werden nur statische Webseiten angezeigt. Er hat das Gefühl sich auf einer normalen Internetseite zu bewegen. Die eigentliche Besonderheit bleibt für ihn verborgen. Er hat nicht die Möglichkeit die Inhalte der Webseite zu verändern. Man spricht hier von dem Begriff Frontend. Der Client bekommt nur Zugriff auf die vorderste Seite des Systems.

2 1.2 User Bedienoberfläche und Anwendung des Redaktionssystems für Webseiten am Beispiel Der User hat die Möglichkeit über einen Passwort geschützten Link die Bedienoberfläche zur Pflege und Aktualisierung seines Internetauftritts zu erreichen. Er bekommt durch die Eingabe seiner Kennung Zugang zu der sogenannten Middleware. Hier ist es ihm möglich Änderungen vorzunehmen. Nach dem einloggen besteht die Wahl zwischen 3 Menüpunkten, die im folgenden erklärt werden sollen. Hilfe: In der Hilfe werden die einzelnen Buttons und ihre Funktionen erläutert: Dieser Button fügt im Navigationsmodus einen Haupt- bzw. Sub-Navigationspunkte hinzu. Es wird so ein neuer Eintrag erstellt, der dann mit beliebigen Unterpunkten und entsprechenden Templates gefüllt werden kann. Im Seitenmodus wird mit diesem Button eine Seite erzeugt. Bei der Neuerstellung muss man den Namen und die Templateart wählen. Submit speichert Änderungen und wird dann grün um die Änderung zu bestätigen. Dieser Button dupliziert die entsprechende Seite. Das Stiftsymbol dient zur Bearbeitung der ausgewählten Seite. Nach dem Klicken auf diesen Button öffnet sich ein Fenster in das man einen Text tippen kann. Der Text wird wiederum mit dem Submit Button gespeichert. Der Lupe Button leitet den User auf den Vorschaumodus der ausgewählten Seite. Auf der linken Seite kann direkt zwischen Editieren und Vorschau gewechselt werden. Desweiteren hat der User im Navigationsmodus die Möglichkeit bestimmt Seiten zu löschen oder die Startseite festzulegen. Hierfür gibt es jeweils ein Kästchen das ausgewählt werden kann. Mit einem Klick auf den Submit Button wird die entsprechende Funktion (Löschen der Seite oder Seite als Startseite festlegen) durchgeführt. Ein Papierkorb für gelöschte Inhalte befindet sich im unteren Teil des Seitenmenüs. Der Filter ermöglicht es entweder alle Navigationspunkte oder nur die eines Haupt- Navigationspunktes anzuzeigen.

3 Wenn das Kästchen "nur intern" für einige Navigationspunkte aktiviert ist werden diese nur im Administrations-Modus angezeigt. Im Livebetrieb bleiben sie inklusive der Unternavigationspunkte unsichtbar. Navigation: Unter dem Menüpunkt Navigation kann der User bzw. Administrator der Seite den generellen Aufbau seiner Seite festlegen und bearbeiten. Die Navigationsseite ist sehr logisch und denkbar einfach aufgebaut. Oben auf der Seite befinden sich 2 Buttons zur Editierung der Hauptnavigation ( Hinzufügen-Button ), bzw. zur Speicherung ( Submit-Button ) veränderter Parameter. Die Navigation an sich ist wie eine Tabelle angelegt. Unter den Überschriften Hauptnavigation, Sub-Navigation, Sort, Seite, Löschen und Startseite kann man entsprechende Einstellungen vornehmen, die im Folgenden erklärt werden sollen. Unter der Überschrift Hauptnavigation sind die Namen sämtlicher Seiten zu sehen, die von der Startseite aus aufrufbar sind. Wenn man nun auf den eben erwähnten Button zur Editierung der Hauptnavigation klickt, wird an das untere Ende der Tabelle eine weitere Zeile mit dem Namen Neuer Eintrag angefügt. Der Name Neuer Eintrag kann einfach in dem entsprechenden Feld mit der Tastatur umbenannt werden. Diese neue Spalte bedeutet, dass der Hauptnavigation auf der Startseite ein weiterer Unterpunkt angefügt wurde, der nun mit Inhalt gefüllt werden kann. Man bestätigt und speichert diese, wie jede weitere Veränderung die in der Navigation getätigt wird, durch einfaches anklicken des Submit Buttons, der sich nach Betätigung grün färbt. Wie die Überschrift schon sagt, wird in der Sub-Navigation die Verästelung der Hauptnavigation festgelegt. In dieser Spalte gibt es einen weiteren Hinzufügen-Button. Hier können mehrere Subnavigationen hinzugefügt werden. Pro Subnavigation wird eine Spalte unter der entsprechenden Hauptnavigations-Spalte mit frei editierbarem Namen eingefügt. Hinzu kommt noch ein weiteres Kästchen mit der Bezeichnung intern. Wenn dieses Kästchen mit einem Haken versehen wird bedeutet dies, dass dieser Navigationspunkt samt Subnavigationen nur auf der Edit-Seite für den User und nicht auf der homepage zu sehen ist. In der nächsten Spalte ist die Reihenfolge der Haupt- und Subnavigationspunkte festgelegt. Unter der Überschrift Sort wird durch Eintragen der entsprechenden Zahl in jeder Reihe festgelegt, welcher Navigationspunkt vor bzw. hinter einem anderen kommt. Die neu angelegte Reihenfolge wird wiederum mit Submit gespeichert, sodass bei einem erneuten Aufruf der Navigationsseite sich alle Navigationspunkte in der neuen Reihenfolge befinden. In der Nächsten Spalte, die mit der Überschrift Seite versehen ist, hat man nun pro Haupt- bzw. Subnavigationspunkt die Möglichkeit zwischen verschiedenen Layouts des Navigationspunktes bzw. der entsprechenden Seite zu wählen. Es gibt nur eine festgelegte Auswahl an Layouts, die vom Programmierer unter Absprache mit dem User erstellt worden sind und nun an dieser Stelle zur Verfügung gestellt werden. An dieser Stelle ist der User auf die Vorgaben des Programmierers angewiesen. Er kann jedoch zu jeder Zeit neue Layouts bzw. Veränderungen der Layouts vom Programmierer anfordern. Die nächste Spalte ist dazu da, um ungewollte Navigationspunkte zu löschen. Hier muss nur das Kästchen in der entsprechenden Reihe angekreuzt bzw. angeklickt werden und danach zur Bestätigung der Submit Button betätigt werden, um den Navigationspunkt zu löschen. Die Seite wird erneut geladen, jedoch ohne die Spalte die soeben gelöscht wurde. In der letzten Spalte legt man durch dasselbe Prinzip die Startseite fest. Pro Reihe gibt es ein Kästchen. Logischerweise kann nur eine Seite bzw. ein Navigationspunkt als Startseite festgelegt werden. Hierbei ist es jedoch egal, ob es sich um eine Haupt- oder Subnavigation handelt.

4 Auf der Navigations-Seite gibt es außerdem noch eine Filterfunktion, die es ermöglicht, entweder alle oder nur eine ausgewählte Hauptnavigationszeile anzuzeigen. Seiten Die editierbare page Seiten, die über die Adresse in unserem Beispiel aufgerufen werden kann ist vom Aufbau her der page Navigation sehr ähnlich. Die Filterfunktion und die beiden Buttons zum Verändern sind identisch. Es sind auch wieder hier die Spalten Haupt- und Subnavigation zu sehen, allerdings sind die Inhalte dieser Spalten nicht editierbar. Hier sind nur noch einmal die Überschriften für die einzelnen Navigationspunkte aufgeführt. Eine weitere Spalte ist vor der Hauptnavigation eingefügt mit dem Namen Nr.. Die Nummer, die vor der jeweiligen Reihe steht gibt die page-id an.. Die Startseite hat zum Beispiel die page-id 91, dementsprechend ist die Adresse Die vierte Spalte ist editierbar. Hier kann der Name der Seite in einem Textfenster hineingeschrieben werden. Die Veränderung wirkt sich auch auf die Spalte Name in der Seite Navigation aus. In der nächsten Spalte ist der Name des in der Seite Navigation ausgewählten Templates zu sehen. Das Template kann hier nicht verändert werden. Die letzten beiden Spalten tragen die Überschrift Löschen und Bearbeiten. In der Spalte Löschen kann durch anklicken einer Box und einem Klick auf den Bestätigungs-Button die jeweilige Seite gelöscht werden. Im unteren Teil der Seite befindet sich der Papierkorb. Hier wird der Name der gelöschten Seite und das Löschdatum angezeigt. In der nächsten Spalte befindet sich ein weiterer Button, der ein Duplikat des Navigationspunktes an das Ende der Tabelle anfügt. Dieses Duplikat ist allerdings nicht einem Navigationspunkt zugeordnet und kann von der normalen Internetseite aus nicht erreicht werden. In der Spalte mit der Überschrift bearbeiten gibt es nun 2 verschiedene Buttons. Der erste Button beinhaltet die eigentliche Editierfunktion. Sobald dieser Button gedrückt wird gelangt man auf die der Reihe entsprechenden Seite. Die Seite die geöffnet wird sieht der Seite die der normale Betrachter sieht ganz ähnlich. Man hat nur jetzt die Möglichkeit in einem Textfenster die entsprechenden Texte und auch Bilder auf der Seite zu bearbeiten und abzuspeichern. Da man sich immer noch in einem Setting-Menü befindet ist auf der linken Seite eine Leiste, die zum Einen die direkte Anwahl der Setting-Seiten Navigation, Seiten und Hilfe bereitstellt und zum Anderen die beiden Buttons aus der Bearbeitungsseite anzeigt. Der eine Button dient dazu Texte und Bilder zu bearbeiten und der andere Button beinhaltet eine Vorschaufunktion des veränderten Textes bzw. Bildes. 1.3 Entwickler Das Backend Der Seitenaufruf und das Html-Template

5 Wie aus dem Unterpunkt 1.2 Seiten bekannt, bekommt beim erstellen einer neuen Seite jede Seite eine Id. Eine Nummer in der Tabelle unter der sie zu erreichen ist. Ruft nun der User oder Client eine Seite der Webpage auf geschieht die Weiterleitung über eine in der Url übergebene variable page. Sie ist addressiert mit index.php?page=xx. Dies ist für jeden sichtbar ob user oder client. Nach Aufruf der Seite und durch auslesen der variable page ermittelt das System das passende Template. Nun wird es in den Speicher des Browsers geladen. Nach und nach beginnt das System alle Platzhalter zu ermitteln, die benötigt werden um die Seite im Browser richtig darzustellen. Platzhalter werden im Html-Template als <#...#> dargestellt. Für alle darzustellende Inhalte gibt es nun Platzhaltertypen. Nun wird anhand der Seiten Id page, dem Platzhalter (<#...#>) und dessen Typs der entsprechende Inhalt in diese Platzhalter eingesetzt. Ob man eine Seite nun editieren möchte oder nur aufruft wird durch eine Variable bestimmt, die auf der aufgerufenen Seite gesetzt wird (Dies geschieht innerhalb der PHP-Syntax). Die Inhalte dieser Platzhalter sind in der Datenbank gespeichert. Texte direkt und Bilder durch einen Pfad. Dieser Pfad zeigt auf einen Ordner auf dem Server, auf den der User seine Bilder hochgeladen hat. Links oder andere besondere Texte werden über den BB- Code in die Textfelder im /settings-bereich eingegeben. Mit [b]...[/b] wird der Text Fett dargestellt. Dies entspricht dem Html-Befehl <b>...</b>. So gibt es für links die Möglichkeit [link= Link [/link]. Nun wird in das entsprechende Template der Befehl <ahref=" target="_blank" >Link</a> geparst. In der Hilfe wird dieser BB-Code für erklärt. Damit wird dem User

6 geboten jede Art von Link (auch interne und links zu mailaddressen) in die Webseite einzubinden. Hat das system alle Platzhalter gefüllt, wird die Seite im Browser ausgegeben. Ablaufdiagramm des Seitenaufrufs