Workshop - dynamische Master- und Detailseiten
Workshop - dynamische Master- und Detailseiten |
||
|
||
 |
Worum geht es ? |
  |
| dynamische Seiten | Eine der häufigsten Aufgaben auf einer dynamischen Homepage ist das automatische Generieren von Master- und Detail-Seiten, auf denen die jeweils aktuellsten Beiträge angekündgt und präsentiert werden. |
| Masterseite | Auf einer Masterseite erscheint eine Übersicht der aktuell verfügbaren Artikel zu einem bestimmten Thema. Zu jedem Artikel gibt es ein Datum, einen kurzen Text zur Inhaltsübersicht, den sogenannten Teaser und oft ein kleines Bild als Blickfang. Jeder dieser Artikel kann per Link angewählt werden, um eine Detailseite mit dem vollständigen Inhalt anzeigen zu lassen. |
| Detailseite | Die Detailseite enthält den kompletten Artikel, hierzu gehören neben dem kompletten Text auch weitere (große) Bilder nebst Bildunterschriften, Angaben zu Autor und Quelle und evtl. externe Links zur Vertiefung der Thematik. Ein Link führt zurück zur Masterseite. |
| Realisierung | Zur Realisierung brauchen wir
|
|
Datenbank vorbereiten | |
| neue Liste | Rufe nach Starten deines Webservers (xampp_start) im Browser das Tool PHPmyAdmin auf. Du brauchst für unser Beispiel 14 Felder |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| neue Felder | Definiere in der Tabelle die folgenden Felder:
Felder mit null müssen nicht mit Inhalt gefüllt werden, hiermit vermeidest du Fehlermeldungen, falls ein Artikel kein Bild enthält oder der Inhaltstext nur als eingescanntes Bild vorliegt. |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Daten einfügen | Fülle nun mindestens drei Datensätze mit Testdaten, hierfür kannst du längere Inhaltstexte aus deiner Textverarbeitung in das entsprechende Eingabefeld kopieren; allerdings gehen dabei alle Textformatierungen verloren. Du kannst aber im Text beliebige HTML-Tags zur Gestaltung einfügen. Besonders einfach ist es, den Wordtext zunächst in ein leeres Dreamweaver-Dokument zu importieren und dann den entsprechenden Teil des Quellcodes zu kopieren und in die Datenbank einzufügen. |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Bilder hochladen
|
Die Bilder liegen nicht direkt in der Datenbank, sondern auf dem Server im gleichen Verzeichnis wie die beiden aufrufenden Seiten. Das Übertragen der Bilder zum Server geht folgendermaßen: |
|
Erstellen der Masterseite | |
| Zwei neue Seiten | Erstelle in Dreamweaver eine neue PHP-Seite (Datei - Neu - dynamische Seite - PHP), verbinde sie mit deiner Datenbank (Fenster - Datenbanken ; localhost / root / - / schule). Speichere sie einmal unter dem Namen aktuelldetail.php und danach gleich nochmal unter dem Namen aktuellmaster.php (Datei - Speichern unter...) in deinem ausgewählten Verzeichnis. |
| Datenbank-Anbindug |
(Hinweis: Datensätze in denen das Feld ok den Wert NULL enthält, sind noch nicht oder nicht mehr zur Veröffentlichung freigegeben.) |
| Seitengestaltung | Gestalte die Masterseite entsprechend deinen Vorstellungen, verwende aber am besten eine zweizeilige Tabelle, von der du die zweite Zeile als wiederholten Bereich planst. |
| Bild | Füge mit Einfügen - Grafikobjekte- Bildplatzhalter einen Platzhalter für das Bild in die Tabelle ein. Ziehe dann aus dem Fenster Bindungen das Feld bildklein, der den Dateinamen des Bildes enthält, mit der Maus auf den Bildplatzhalter. Auf der Masterseite ist es sinnvoll, bei den Bildern eine feste Größe zu erzwingen (Eingabe von B und H im Eigenschaftenfenster für den Platzhalter.). |
| Link zur Detailseite | Markiere deinen Link-Text (mehr...) und verlinke ihn unten im Eigenschaftenfenster mit der vorhin gespeicherten leeren Datei aktuelldetail.php. |
| wiederholter Bereich | Markiere nun die zweite Zeile deiner Tabelle und füge im Fenster Anwendung das Serververhalten Bereich wiederholen ein. |
| fertige Seite | Die fertige Seite könnte in Dreamweaver etwa so aussehen:
und im Browser mit dynamisch eingefügtem Inhalt dann so:
|
|
Erstellen der Detailseite | |
| Öffnen | Öffne die vorhin gespeicherte Seite aktuelldetail.php |
| Datenbank-Anbindung |
|
| Seitengestaltung | Gestalte nun die Seite nach deinen Vorstellungen und füge alle benötigten Datenbankfelder ein. Die fertige Seite könnte in Dreamweaver etwa so aussehen:
und im Browser mit dynamisch eingefügtem Inhalt dann so:
|
|
mögliche Erweiterungen | |
| Datum formatieren | Du kannst die Datumsfelder formatieren und den automatisch berechneten Wochentag mit ausgeben, wenn du vor dem Quelltext nicht zurückschreckst. Wie es geht, steht im zweiten Teil diese Kurses (Erweiterte dynamische Datenausgabe mit Dreamweaver). |
| Eingabeseite | Du kannst dir - wie im ersten Teil (Dynamische Webseiten mit Dreamweaver) beschrieben eine Eingabeseite basteln, solltest dann aber unbedingt die dort gemachten Sicherheitshinweise beachten. |
| alles auf einer Seite | Mit ein wenig PHP-Kenntnissen könntest du Masterseite und Detailseite zu einer einzigen Seite verschmelzen; überhaupt könntest du mit ganz wenig PHP auf deiner Seite ganz viel zaubern Aber das ist eine andere Geschichte - und die soll ein anderes Mal erzählt werden. ;-) |
|
Verwandte Themen | |
|
letzte Aktualisierung:
11.09.2005 13:29
zusammengestellt von Peter Lepke ; lepke@nils.nibis.de
Erstelle für de nun aktive Masterseite (aktuellmaster.php) eine Datensatzgruppe (
Klicke auf das Ordnersymbol neben dem Hyperlinkfeld und klicke dann im erscheinenden Dateifenster unten rechts auf 
Erstelle eine Datensatzgruppe (
