Rheinwerk Design < openbook > Rheinwerk Design - Know-how für Kreative.
Know-how für Kreative

Inhaltsverzeichnis
1 Einleitung
2 Projektablauf für die Buchwebsite
3 Programmgrundlagen
4 Dreamweaver erweitern
5 Eine Site erstellen
6 Grundlegende Dokumenteinstellungen
7 Tabellen in Dreamweaver
8 Bilder im Web
9 Framesets
10 Aktionen
11 Die Zeitleiste
12 CSS in Dreamweaver
13 Ebenen
14 Hyperlinks
15 Vorlagen und Bibliotheken
16 Formulare
17 Quelltext de Luxe
18 Dreamweaver und Flash
19 Office-Daten einfügen
20 Dynamische Websites – eine Einführung
21 Einführung in PHP
22 Lokalen Webserver installieren
23 Dynamische Sites in Dreamweaver einrichten
24 MySQL-Grundlagen
25 Datenbanken mit Dreamweaver anbinden
26 PHP und Dreamweaver
27 Datenbanken abfragen
28 Daten einfügen und dynamische Formulare
29 Datensätze bearbeiten
30 Benutzer authentifizieren und Zugriffsrechte festlegen
31 Fortgeschrittene Techniken
32 Dreamweaver 8 und XML
33 Menüs für dynamische Verhalten
Stichwort
Ihre Meinung?

Spacer
 <<   zurück
Dreamweaver 8 von Richard Beer, Susann Gailus
Webseiten entwickeln mit HTML, CSS, XML, PHP und MySQL
Buch: Dreamweaver 8

Dreamweaver 8
mit CD
639 S., 39,90 Euro
Rheinwerk Design
ISBN 978-3-89842-739-5
gp 29 Datensätze bearbeiten
  gp 29.1 Datensätze verändern
    gp 29.1.1 Ein Änderungsformular erstellen
    gp 29.1.2 Datensatznavigation für Datensatzänderungen
    gp 29.1.3 Datensatznavigation mit zwei Dokumenten und Auswahlseiten
  gp 29.2 Datensätze löschen
  gp 29.3 Daten aus mehreren Tabellen verbinden
  gp 29.4 Administrationsebene für die Buchwebsite anlegen
    gp 29.4.1 Frameset anlegen
    gp 29.4.2 Auswahlseiten
    gp 29.4.3 CSS für Administrationsebene anlegen


Rheinwerk Computing

29.4 Administrationsebene für die Buchwebsite anlegen  downtop

Abbildung

Nun wollen wir eine Administrationsoberfläche für die Website zum Buch anlegen. Wir bauen die Administrationsseiten mit einem Frameset auf. Auf der Buch-CD finden Sie den Navigationsplan der Administrationsoberfläche als PDF-Datei.

Es wird noch ein Login vorgeschaltet, um die Zugriffsrechte festzulegen. Nach jeder erfolgreichen Aktion wird das Dokument »okay. php« aufgerufen und angezeigt. Alternativ können Sie auch auf die Übersichtsseiten der einzelnen Bereiche weiterleiten. Im letzteren Fall sind dann gleich die Änderungen an der Datenstruktur sichtbar. Die Verwaltung der Zugriffrechte legen wie in Kapitel 30 an. Zunächst jedoch die reine Administrationsebene.

Abbildung

Wir sparen uns in den folgenden Abschnitten das genaue Erläutern aller Details und gehen davon aus, dass Sie mittlerweile genug Übung haben, die Schritte nachzuvollziehen. Alle Dateien finden Sie ebenfalls auf der CD-ROM.


Rheinwerk Computing

29.4.1 Frameset anlegen  downtop

Das Frameset unterteilt das Browserfenster in eine Navigation (Topframe) oben und die eigentliche, anzuzeigende Seite im Haupt-Frame . Jeder Formularseite zum Ändern der Datensätze ist eine Auswahlseite mit der Liste aller Datensätze vorgeschaltet.

Abbildung 29.18 Frameset der Administrationsebene


Rheinwerk Computing

29.4.2 Auswahlseiten  downtop

Die Auswahlseiten werden mit einer Tabelle und einem wiederholten Bereich aufgebaut. Neben der Auswahl, mit der auf das Formulardokument verlinkten Überschrift, wird ein Link zum Löschdokument eingefügt.

Abbildung 29.19 Aufbau der Auswahlseite

Die Headline und der Link zum Löschdokument übergeben die Datensatz-ID an die Folgedokumente. Das Funktionsprinzip ist das gleiche wie bei der eigentlichen Website.

Abbildung 29.20 Ansicht der Auswahllisten im Browser

Abbildung 29.21 Ansicht des Änderungsformulars im Browser

Wir legen zunächst die komplette Administrationsseite mit den Abfragen und Formularen an, um später die Detailarbeiten vorzunehmen.


Rheinwerk Computing

29.4.3 CSS für Administrationsebene anlegen  toptop

Der Aufbau aller Seiten ist vom Prinzip her ähnlich. Daher können aus einer einmal erstellten Seite alle weiteren kopiert werden. Doch dazu gleich mehr.

Wir haben für die Administrationsebene eine etwas modifizierte CSS-Datei angelegt. Diese CSS-Datei haben wir admin.css benannt und binden sie als externe CSS-Stile in die Dokumente ein. Die CSS-Datei hat folgenden Inhalt:

Listing 29.1 CSS-Datei für die Administrationsebene

.headline {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #75796F;
 line-height: 18px;
 font-weight: bold;
}
.content {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #75796F;
 line-height: 18px;
}

#CONTENT A:link, #CONTENT A:hover,#CONTENT A:active,
#CONTENT A:visited {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #75796F;
 line-height: 18px;
 font-weight: bold;
 text-decoration: none;
}
#EINGABE INPUT {
 font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size : 10px;
 border : 1px solid #ACBC3C;
 width: 200px;
}
#EINGABE TEXTAREA {
 font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size : 10px;
 border : 1px solid #ACBC3C;
 width: 370px;
}
Schritt für Schritt: Aufbau der Administrationsebene

Abbildung

1 Verzeichnisse anlegen

Legen Sie sich am besten zuerst eine Verzeichnisstruktur für die neuen Teile der Website, wie in der folgenden Abbildung zu sehen, an, und erstellen Sie einen Satz Dokumente ohne Abfragen etc., aber mit den kompletten Verlinkungen.

2 Dokumente anlegen

Wir haben zunächst die Dokumente 1_xxx layoutet und diese dann außerhalb von Dreamweaver 8 in jedes Verzeichnis kopiert. Dreamweaver 8 unterstützt mehrfache Kopien leider nicht. Benennen Sie anschließend die Dateien im Dateifenster von Dreamweaver 8 um, und lassen Sie die Verlinkungen von Dreamweaver 8 aktualisieren.

3 Abfragen anlegen

Im nächsten Schritt werden für alle Dokumente X_change.php die Abfragen und die wiederholten Bereiche angelegt. Die Headline bei News, Name und Vorname bei den anderen Dokumenten werden mit den X_change_form.php-Dokumenten verlinkt. Der Schriftzug »Datensatz löschen« erhält eine Verlinkung auf die Dokumente X_delete.php.

4 URL-Parameter übergeben

Übergeben Sie als URL-Parameter an die Formulardokumente die ID der Datensätze in der URL-Variablen CONT_ID, wie wir es auch bei der eigentlichen Website gemacht haben.

5 Formulare anlegen

Legen Sie anschließend für jeden der Bereiche die Formulardokumente an. Die Datensätze müssen anhand des URL-Parameters CONT_ID selektiert werden.

6 ID per URL übergeben

Die ID aus den Datensätzen wird als verstecktes Feld ausgegeben, die Beschreibungen als Textfeld. Nach einer Aktualisierung der Daten werden die User auf das Dokument okay.php geleitet oder, wenn Sie es möchten, auch zurück zur Übersichtsseite.

Modifizieren Sie das Layout des Formulars wie Sie es wünschen, oder verwenden Sie die angegebene CSS-Datei, und weisen Sie der Tabelle für das Formular die ID EINGABE zu. Anschließend muss die Tabelle noch zentriert werden, und der Textbereich wird auf 15 Zeilen vergrößert.

7 Newsbereich anlegen

Bei dem Bereich »News« kümmern wir uns zunächst nicht um die Formatierung des Datums.

Wenn ein User einen Datensatz angewählt hat, kommt er bislang nur über die Browserleiste zur Auswahlseite zurück. Da dies jedoch bei dynamischen Websites immer zu Problemen führt, wird noch eine weitere Schaltfläche als Zurück-Button eingefügt.

8 »Zurück«-Button anlegen

Ändern Sie die Beschriftung der Schaltfläche im Eigenschafteninspektor wie gewünscht, und wählen Sie als Aktion Keine. Im Tag des Buttons fügen Sie dann folgendes kurze Skript aus Listing 29.2 ein.

onClick="history.back()"

Listing 29.2 Skript für Back-Button

9 Angabe des Bildpfades

Die anderen Änderungsformulare sind ähnlich aufgebaut, beinhalten nur mehr Formularfelder. Ein tatsächlicher Bild-Upload ist mit diesem Formular nicht möglich. Bilder müssen mit FTP auf den Server geladen werden, und der Pfad zum Bild wird direkt in das Textfeld eingetragen. Anonyme Datei-Uploads sind auf Webservern selten erlaubt. Informationen über Skripts zum Datei-Upload finden Sie im Internet auf der PHP-Website oder auf anderen einschlägigen Websites.

Für unser Projekt hat das direkte Eintragen der Bildpfade auch den Vorteil, dass Bilder auf anderen Servern als Ihren eigenen abgelegt werden können. Geben Sie in diesem Fall einen absoluten Pfad ein. Wenn Sie diese Technik auf einer Ihrer Websites verwenden möchten, stellen Sie sicher, das einzubindende Bilder das vorgegebene Maß einhalten, damit Ihr Layout nicht gesprengt wird.

Verfahren Sie bei den noch fehlenden Dokumenten wie eben und in den entsprechenden Kapiteln beschrieben.

10 Löschdokument anlegen

Die Dokumente zum Löschen sind über die vorhin angelegte Auswahl erreichbar und beinhalten außer dem Serverhalten Datensatz löschen keine weiteren Aktionen.

Es ist etwas Fließbandarbeit, aber wenn Sie diese erfolgreich abgeschlossen haben, haben Sie eine komplette und durchaus brauchbare Administrationsebene für die Website angelegt.



Ihre Meinung

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.

 <<   zurück
  
  Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: Adobe Dreamweaver CS3
Die Neuauflage:
Adobe Dreamweaver CS3
Jetzt bestellen


 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchtipps
Zum Rheinwerk-Shop: Adobe Dreamweaver CC






 Adobe
 Dreamweaver CC


Zum Rheinwerk-Shop: Adobe Dreamweaver CC Einstieg






 Adobe Dreamweaver
 CC Einstieg


Zum Rheinwerk-Shop: Responsive Webdesign






 Responsive Webdesign


Zum Rheinwerk-Shop: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


Zum Rheinwerk-Shop: Schrödinger lernt HTML5, CSS3 und JavaScript






 Schrödinger lernt
 HTML5, CSS3
 und JavaScript


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo




Copyright © Rheinwerk Verlag GmbH 2006
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das Openbook denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern