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 27 Datenbanken abfragen
  gp 27.1 Das Bedienfeld Bindungen
  gp 27.2 Datensätze in Dreamweaver abfragen
    gp 27.2.1 Einfache Abfragen erstellen
    gp 27.2.2 Anzeigen von Datensätzen
    gp 27.2.3 Formatieren in der Live Data-Ansicht
    gp 27.2.4 Erweiterte Abfragen erstellen
    gp 27.2.5 Mehrere Datensätze abfragen
    gp 27.2.6 Bestimmte Datensätze abfragen
    gp 27.2.7 Datensatz-ID mit URL übergeben
    gp 27.2.8 Einstellbare Variablentypen
    gp 27.2.9 Testen der Abfragen
  gp 27.3 Dynamische Tabellen
    gp 27.3.1 Erstellen einer dynamischen Tabelle
    gp 27.3.2 Dynamische Tabelle mit Serververhalten
  gp 27.4 Bilder dynamisch einfügen
    gp 27.4.1 Bilder aus Datenbanken verlinken
    gp 27.4.2 Vorbereitungen für dynamisch eingefügte Bilder
  gp 27.5 In Datensätzen navigieren
    gp 27.5.1 Datensatznavigation erstellen
    gp 27.5.2 Bereiche in Abhängigkeit von Daten anzeigen
    gp 27.5.3 Datensatzanzahl anzeigen
    gp 27.5.4 Individuelle Datensatznavigationen erstellen
  gp 27.6 HTML-Attribute dynamisch generieren
    gp 27.6.1 Eigenschaften aus Datenquellen einfügen
    gp 27.6.2 Daten in der URL mit Hyperlinks übergeben
  gp 27.7 Automatische Master- und Detailseiten
  gp 27.8 Ausgabe formatieren
  gp 27.9 Aufbau der dynamischen Inhalte der Buchwebsite
    gp 27.9.1 Das Funktionsschema
    gp 27.9.2 Die Masterseite
    gp 27.9.3 Die Detailseiten


Rheinwerk Computing

27.6 HTML-Attribute dynamisch generieren  downtop


Rheinwerk Computing

27.6.1 Eigenschaften aus Datenquellen einfügen  downtop

Wir haben in einem der vorherigen Abschnitte ein Bild aus einer Datenquelle eingefügt, indem wir die Bildquelle innerhalb eines Tags durch ein PHP-Skript einsetzen ließen.

Mit Dreamweaver 8 können Sie auf einfache Weise auch jedes HTML-Attribut durch dynamisches Einfügen manipulieren. Wir erklären dies noch einmal am Beispiel eines Bildes, wählen jedoch diesmal eine andere Vorgehensweise.

Zunächst muss wieder ein Datensatz im Bedienfeld Bindungen angelegt werden. In unserem Beispiel wurde die Tabelle »bilder« abgefragt und ein Bild-Platzhalter eingefügt (wie auch im vorherigen Abschnitt). Wenn Sie jetzt eine Bildquelle über den Eigenschafteninspektor auswählen möchten, stehen Ihnen bei dynamischen Seiten in der folgenden Dialogbox zwei Möglichkeiten zur Auswahl: Sie können eine Bildquelle aus dem Dateisystem auswählen, was bei statischen Seiten die gebräuchliche Methode ist. Zusätzlich besteht jedoch die Möglichkeit, eine Datenquelle als Bildquelle anzugeben.

Abbildung 27.58 Bild aus Datenquelle erstellen

Wenn Sie in der Dialogbox Bildquelle auswählen auf Datenquellen umschalten, werden Ihnen die Inhalte der vorher angelegten Bindungen angezeigt und Sie können den Datensatz mit den Bildinhalten anwählen und einfügen.

Jetzt bekommen Sie im Eigenschafteninspektor im Feld Quelle den kompletten PHP-Befehl als Referenz angezeigt.

Abbildung 27.59 Datenquellen als Bildquelle angeben und Datensatz auswählen

Abbildung 27.60 Bild aus Datenquelle wird eingefügt und PHP-Befehl im Eigenschafteninspektor unter Quelle angezeigt.

Dynamische Attribute | Dynamische Daten als Attribute von HTML-Tags können Sie auch über das Bedienfeld Tag zuweisen. Wenn Sie eine dynamische Seite erstellen, erscheint rechts neben den HTML-Attributen, die Sie mit dynamischen Daten hinterlegen können, ein kleines Icon mit einem Blitz. Klicken Sie auf dieses, um die Auswahl aus einer zuvor angelegten Datenquelle zu treffen.

Abbildung 27.61 Dynamische Daten über das Bedienfeld Tag hinzufügen

Durch das dynamische Anbinden von HTML-Attributen stehen Ihnen viele neue Möglichkeiten offen. Um die Vorgehensweise zu verdeutlichen, hier nun ein kleines Anwendungsbeispiel.

Schritt für Schritt: Grafische Auswertung einer Datentabelle mit PHP

Abbildung

Im Folgenden wollen wir an einem Beispiel den Einsatz dynamischer Attribute in der Praxis verdeutlichen. Das SQL-File zur Übung finden Sie auf der CD-ROM.

1 Analyse der Datenbanktabelle

In einer Datenbank wird monatlich die Serverauslastung in Prozentwerten hinterlegt. Ein Kunde möchte diese Auslastung als Balkendiagramm angezeigt bekommen.

Die Datenbank in unserem Beispiel hat folgende einfache Struktur: In der Tabelle »diagramm« der Datenbank »diagramme« finden sich drei Datenreihen: eine ID als Primärschlüssel, ein Feld für die Angaben in Prozent und ein weiteres Feld mit der Angabe für den Zeitraum.

2 Erstellen einer HTML-Tabelle für das Balkendiagramm

Tabellenbreiten können in Pixel oder in Prozent angegeben werden. Prozentwerte der Tabellenbreiten können Sie auch dynamisch generieren. In unserem Beispiel werden mit Hilfe der Prozentwerte aus der Datenbank die Breiten einer Tabelle bestimmt.

Dazu benötigen Sie zunächst zwei HTML-Tabellen, wie in der folgenden Abbildung gezeigt. Die einzelne orangefarbene Tabellenzeile hat die Breite von 100 %.

3 Einfügen der dynamischen Daten für die Bestimmung der Tabellenbreite

Markieren Sie die gesamte innen liegende Tabelle und wählen Sie im Bedienfeld Tag für die Tabellenbreite anstelle des Prozentwertes 100 den vorher abgefragten Datensatz »Prozent« aus. Wie immer müssen Sie vor diesem Schritt eine Datenbankverbindung und eine Datensatzabfrage erstellen. Klicken Sie dazu auf das kleine Blitzsymbol am rechten Rand des Attributfeldes.

4 Prozentzeichen im Bedienfeld einfügen

Ganz wichtig ist nun, dass Sie hinter dem im Bedienfeld Tag erscheinenden PHP-Skript von Hand ein %-Zeichen einfügen. Ansonsten werden die Diagrammbalken nicht in Prozent, sondern in Pixelwerten angezeigt.

5 Wiederholten Bereich erstellen

Fügen Sie nun der unteren Tabellenzeile noch den Datensatz mit der Bezeichnung für den Zeitraum hinzu und erstellen Sie aus der gesamten unteren Tabellenreihe einen wiederholten Bereich mit allen Datensätzen. Eventuell müssen Sie hierbei etwas im Quelltext nachhelfen. Der Quelltext des wiederholten Bereichs sieht wie folgt aus:

   <?php do { ?><tr>
      <td><table width="<?php echo
          $row_diagramm['Prozent']; ?>%" border="0"
          cellpadding="0" cellspacing="0" 
          bgcolor="#FFCC00">
          <tr>
            <td>&nbsp;</td>
          </tr>
              </table></td>
      <td class="date"><?php echo
     $row_diagramm['Zeitraum']; ?></td></tr>
      <?php } while ($row_diagramm =
      mysql_fetch_assoc($diagramm)); ?>

6 Abfrage prüfen in Live Data-Ansicht

Vorausgesetzt, dass alles korrekt angelegt wurde, können Sie jetzt in der Live Data-Ansicht Ihr aus den Werten der Serverauslastung dynamisch generiertes Diagramm bestaunen.

7 Darstellung des Diagramms im Browser prüfen

Auch im Browser werden die orangen Balken korrekt dargestellt. Viel schwerer als das Anlegen eines Diagramms mit Excel ist das Erzeugen dieser dynamischen Anwendung auch nicht, und Sie können die Ergebnisse direkt online publizieren. Viele Statistikskripte für Websites funktionieren nach diesem Prinzip.

Mit PHP können auch Grafiken erstellt werden. Sie müssen sich jedoch für diese einfachen Diagramme nicht mit der Programmierung von Grafiken in PHP herumschlagen.


Rheinwerk Computing

27.6.2 Daten in der URL mit Hyperlinks übergeben  toptop

In den meisten dynamischen Websites müssen Daten zwischen Dokumenten ausgetauscht werden, um zum Beispiel Detaildatensätze anzuzeigen. Wie bereits mehrfach erläutert, müssen in solchen Fällen die Parameter bzw. die Variablen mit den Datensatz-IDs an das aufzurufende Dokument übergeben werden. Diese werden dann als URL-Parameter an die URL angehängt.

Daten als URL-Parameter übergeben | Solche Parameter können von Hand im Eigenschafteninspektor eingetragen oder dynamisch aus einer Datenquelle generiert werden. In der Praxis ist die zweite Methode wesentlich gebräuchlicher und komfortabler. Sie müssen sich dann nicht mehr um die Zuweisung einzelner Datensätze kümmern. PHP und MySQL erledigen das für Sie.

Im nun folgenden Beispiel wurde die »testdatenbank« um das Feld »vita« erweitert. Im Feld »vita« befindet sich ein längerer Blindtext. Das Dokument auswahl.php zeigt eine Auswahlliste an. Ein Klicken auf den Namen ruft das Dokument detail.php auf und zeigt darin die Datendetails an.

Mit dem Hyperlink muss somit die ID als Parameter übergeben werden. Die Variable dafür benennen wir ebenfalls mit ID.

Hyperlink erstellen | Zuerst erstellen wir eine gewöhnliche Verlinkung zum Dokument unserer Wahl, indem wir den kleinen Kreis neben Hyperlink mit der Maus auf unser Zieldokument detail.php im Bedienfeld Dateien ziehen.

Abbildung 27.62 Erstellen der Verlinkung mit Dokument auswahl.php

URL-Parameter zuweisen | Öffnen Sie, nachdem der Hyperlink eingetragen wurde, die Dialogbox Datei auswählen, indem Sie auf das Ordnersymbol neben dem Hyperlink im Eigenschafteninspektor klicken.

Sie müssen jetzt nicht – wie im vorangegangenen Abschnitt – auf Datenquellen umschalten, sondern können direkt auf Parameter klicken. In der nun folgenden Dialogbox Parameter geben Sie unter Name den Namen der zu übermittelnden Variablen ID ein.

Klicken Sie rechts neben Name auf Wert und wählen Sie durch ein Klicken auf das kleine Blitz-Icon den gewünschten Datensatz aus. Wir müssen als Inhalt der Variablen ID die Datensatz-ID übergeben.

Abbildung 27.63 Einstellen der Parameter

Abbildung 27.64 Auswählen der dynamischen Parameter

Wurden alle Schritte korrekt erledigt, zeigt Dreamweaver 8 Ihnen im Feld URL jetzt den Hyperlink mit allen Parametern an.

Abbildung 27.65 Eingetragener Hyperlink mit Parametern wird im Feld URL angezeigt.



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