Dynamische Web-Seiten mit Dreamweaver
zur übergeordneten Seite
 

zum Seitenanfang
Was sind dynamische Webseiten ?
einen Abschnitt zurückeinen Abschnitt weiter
Definition Dynamische Webseiten liegen nicht in ihrer dargestellten Form auf dem Server, sie werden direkt beim Aufruf der Scripte aus Daten zusammengebastelt, die in einer angeschlossenen Datendank vorliegen. Jede Aktualisierung der Daten führt direkt zu einer aktualisierten Webseite.
Funktion

Ablauf einer Browser-Anfrage:

  • Der Webbrowser fordert eine Webseite an.
  • Der Webserver (z.B. Apache) erkennt, dass die angeforderte Seite ein PHP-Script ist und reicht das Script an das PHP-Modul des Servers weiter.
  • Hier werden die PHP-Befehle interpretiert und ausgeführt; es wird eine Verbindung zur angegebenen MySQL-Datenbank aufgebaut und Daten angefordert.
  • Das MySQL-Datenbankmodul sendet die angeforderten Daten an das PHP-Modul.
  • Das PHP-Modul speichert die Daten in mehreren Variablen und bastelt aus ihnen und den sonstigen Script-Angaben eine reine HTML-Seite zusammen.
  • Das PHP-Modul beendet seine Arbeit, indem es die generierte HTML-Seite an den Web-Server schickt.
  • Der Web-Server sendet die HTML-Seite an den anfordernden Web-Browser.

Im Webbrowser ist kein Unterschied zwischen statischen und dynamischen Webseiten feststellbar.

Vorteile Wenn die grundlegenden Scripte bestehen, ist es sehr einfach Seiten zu aktualisieren. Für neue Inhalte muss nicht die HTML-Seite erweitert werden, die neuen Daten werden direkt in die Datenbank eingepflegt und stehen sofort danach auf allen entsprechenden Webseiten zur Verfügung.
Nachteile

Dynamische Seiten sind im Aufbau meist langsamer als statische Seiten.


zum Seitenanfang
Installation eines Testsystems (XAMPPlight) + Konf. von Dreamweaver
einen Abschnitt zurückeinen Abschnitt weiter
Installation Für unsere Zwecke reicht die kleinere Light-Version völlig aus, lies evtl. auf der Site nach, ob du privat lieber die große XAMPP-Version nutzen willst. Besorge dir das Programm XAMPPlight-win32.exe aus dem Internet (http://www.apachefriends.org/de/xampp.html), verschiebe es nach D:/ (C: ist auf den Schulrechnern geschützt !) und starte es durch Doppelklick.
Starte dann in dem neu entstandenen Ordner D:/xampplight die Datei setup_xampp.bat
Webserver starten Starte im Ordner D:/xampplight die Datei xampp_start.exe, hierdurch werden Apache + PHP und die Datenbank mySQL gestartet. Das erscheinende DOS-Fenster darf nicht geschlossen sondern nur minimiert werden.
(Webserver und Datenbank lassen sich auch einzeln über apache_start und mysql_start starten und über apache_stop und mysql_stop wieder beenden.)
Webserver beenden

Mit xampp_stop.exe im Ordner D:/xampplight beendest du Webserver und Datenbank. Ein einfaches Schließen des DOS-Fensters (s.o.) kann zu Zerstörungen in der Datenbank führen.
Besonders einfach ist dies, wenn du dir die zwei Programme als Verknüpfungen in die Schnellstartleiste kopierst.
XAMPP deinstallieren Zur Deinstallation brauchst du nur den gesamten Ordner D:/xamplight löschen, da das Programmpaket keinerlei Veränderungen am Windowssystem vorgenommen hat.
Vor der Deinstallation sollten aber der Webserver beendet werden und du solltest deine Daten aus den Unterordnern htdocs/ (html + php) und mysql/data/ (Datenbanken) gesichert haben.
Test der XAMPP-Installation
Apache-Test Gib im Browser http://localhost oder http://127.0.0.1 ein - es sollte eine Begrüßungsseite erscheinen, dann ist alles OK. (ein evtl benutzter Proxyserver muss so eingestellt sein, dass 127.0.0.1 ausgespart ist)
Der Apache_Webserver liest standardmäßig Dateien aus dem Ordner D:/xampplight/htdocs.
PHP-Test Gib im Browser http://localhost/xampplight/phpinfo.php ein - wenn jetzt eine umfangreiche Infoseite erscheint, ist auch PHP erfolgreich auf deinem System eingerichtet.
mySQL-Test Gib im Browser http://localhost/phpmyadmin/ ein - falls mySQL nicht richtig läuft, bekommst du eine Fehlermeldung, ansonsten die Willkommen-Seite von phpMyAdmin.
(Bei Xampp kannst du phpinfo und phpmyadmin auch über das Menü links auf der Begrüßungsseite aufrufen; diese Seite wirst du übrigens los, wenn du eine neue Datei htdocs/index.html schreibst.
ein erstes
PHP-Programm
Gib mit einem beliebigen Texteditor die folgende Zeile ein:
<?php echo "hallo ", $ich ; ?>
Speicher die Datei als test1.php im Ordner D:\xampplight\htdocs und rufe sie anschließend im Browser mit http://localhost/test1.php auf. Das auf dem Bildschirm erscheinende hallo haut noch nicht vom Hocker, rufe die Datei nochmal durch Eingabe von http://localhost/test1.php?ich=Welt auf. Schau dir auch den Quelltext an (Ansicht - Quelltext ansehen) - du hast deine erste serverseitig bearbeitete Webseite erstellt !
Dreamweaver konfigurieren (Einrichten einer Site)
Dreamweaver Du kannst PHP-Seiten mit jedem beliebigen Editor erstellen - wir wollen hier anschauen, wie es innerhalb von Dreamweaver funktioniert.
In Dreamweaver läßt sich sehr leicht der HTML-Teil der Seite erstellen, der PHP-Teil kann dann entweder von Hand in der Code-Ansicht eingetippt werden oder mit den in Dreamweaver eingebauten Hilfsmitteln erstellt werden. Auf jeden Fall sollte aber als erstes eine Site eingerichtet werden.
Site-Einrichtung mit Dreamweaver Öffne Dreamweaver, wähle Site - Neue Site... und gib der Site einen Namen, z.B. MeineHomepage.
Beim nächsten Fenster wähle ja, Servertechnologie verwenden und zwar PHP MySQL.
Im nächsten Fenster wählst du lokal bearbeiten und testen (Testserver auf diesem Computer) und gibt dann als Verzeichnis D:\xampplight\htdocs\homepage (bzw. C:\apache\htdocs\homepage\ bei PHP-Triad) ein.
Gib im nächsten Fenster die URL http://localhost/homepage/ ein.
Bei der Frage nach der Verwendung eines entfernten Servers wähle nein.
Fertig ! - wenn alles in Ordnung ist, erscheint im Site-Fenster bei Auswahl von Testserver ein roter Dateiordner.
PHP mit Dreamweaver

Erstelle zunächst eine neue Datei mit Datei - neu - dynamische Seite - PHP - erstellen und speichere sie gleich unter D:\xampplight\htdocs\homepage (bzw. C:\apache\htdocs\homepage bei PHP-Triad) ab.

Öffne das Bindungen-Fenster (Fenster - Bindungen oder Strg + F10), klicke dort auf das Plus-Symbol und wähle dann URL-Variable. Gib den Namen ich ein und klicke auf OK. Markiere dann den Eintrag ich und klicke auf Einfügen.
Dreamweaver fügt einen blau hinterlegten Platzhalter ein, der später im Browser durch den Wert der Variablen ersetzt wird.

Der Quelltext sieht zwar anders als im ersten Beispiel aus, erfüllt aber denselben Zweck.


zum Seitenanfang
Datenbankerstellung mit PHPmyAdmin
einen Abschnitt zurückeinen Abschnitt weiter
phpmyadmin Nachdem PHP und MySQL bereits gestartet sind, rufe über den Browser die Datei http://localhost/phpmyadmin/ auf.
Mit diesem Tool, das in PHP geschrieben ist, kann man Datenbanken anlegen und löschen, Datentabellen anlegen, erweitern und löschen, Einträge in Tabellen vornehmen, SQL-Abfragen vornehmen - kurz alles, was man mit einer Datenbank anstellen kann.
neue Datenbank Erzeuge eine neue Datenbank, indem du den Namen schule eingibst und dann den Anlegen- Button klickst.
neue Tabelle Wähle links die Datenbank schule aus und erzeuge eine neue Tabelle, indem du rechts bei Neue Tabelle erstellen den Namen gastbuch und als Anzahl der Felder 5 eingibst. Klicke anschließend auf OK.
Felder definieren

In der erscheinenden Tabelle gib in der ersten Zeile folgende Werte ein:
Feld: id ; Typ: INT ; Länge: 4 ; Null: not null ; Extra: auto_increment ; Primärschlüssel: ja ; die restlichen Felder bleiben leer. Dieses Feld ist ein Zähler, der dafür sorgt, dass jeder eingegebene Datensatz automatisch eine unterschiedliche, ansteigende Nummer erhält und damit eindeutig ansprechbar ist.
Das zweite Feld enthält den Namen name , den Typ VARCHAR (Zeichenvariable) und die Länge 80, der Rest bleibt unverändert.
Das dritte Feld heißt email und sieht ansonsten genau wie das zweite Feld aus.
Das vierte Feld heißt text und ist vom Typ TEXT ohne Längenangabe.
Das fünfte Feld heißt stempel,ist vom Typ TIMESTAMP, der Wert für Null wird von not null auf null geändert und eine evtl.vorhandene Vorgabe (0000-00-00...) in Standard wird gelöscht.
Wenn du so weit fertig bist, klicke auf speichern. (Der Wert für Kollation wird jeweils automatisch gesetzt und kann so bleiben.)

Tabelle ändern

Links siehst du nun die Tabelle gastbuch unterhalb der Datenbank schule eingefügt. Klicke auf gastbuch, dann siehst du rechts eine Eingabemaske, mit der alle Eigenschaften dieser Tabelle geändert und angepasst werden können. Wir wollen hier für Testzwecke noch fünf weitere Felder einfügen, die mit dem Gastbuch eigentlich nichts zu tun haben. Die entsprechende Eingabemaske findest du direkt unter der ersten Tabelle:

 

Mache zu den Feldern die folgenden Angaben:
6 - Feld: datum, Typ: DATE, Null: not null
7 - Feld: uhrzeit, Typ: TIME, Null: not null
8 - Feld: bild, Typ: VARCHAR, Länge: 80, Null: null
9 - Feld: url, Typ: VARCHAR, Länge: 120, Null: null
10 - Feld: urltext, Typ: VARCHAR, Länge: 80, Null: null
Klicke dann auf Speichern, um die neuen Felder in die Datenbank zu übernehmen.
Ändere nun durch Klicken auf das Stift-Symbol die Felder datum und uhrzeit derart, dass du den Wert für Null auf null setzt, die formatierte Standard-Vorgabe aber unverändert läßt - das bringt nachher bei der Dateneingabe Vorteile.

Daten einfügen

Klicke bei ausgewählter Tabelle gastbuch rechts in der 2. Zeile auf Einfügen.
Gib einige Datensätze ein (die id solltest du frei lassen, die wird automatisch gesetzt) und lasse sie dir dann anzeigen.

Einige Besonderheiten gibt es nun bei der Eingabe von Daten in die letzten vier Felder:

  • Durch ein Häkchen im mittleren Kästchen kann ich wählen, ob der Wert NULL (=keine Eingabe) übernommen werden soll.
  • ist das Häkchen nicht gesetzt, kannst du in dem Auswahlfeld einige Standardeingaben vorwählen, z.B. NOW: aktueller Zeitstempel, CURDATE: aktuelles Datum, CURTIME: aktuelle Uhrzeit (des Servers).
  • Durch Klicken auf das Kalendersymbol ganz rechts kannst du sehr komfortabel Werte für einen Zeitstempel oder ein beliebiges Datum anklicken (für die Uhrzeit allein gibt es keine vereinfachte Eingabe).

fertige Tabelle

Deine Tabelle Gastbuch sollte nun so aussehen:

Sollten bei dir einige Felder anders aussehen, solltest du die Tabelle entsprechend korrigieren, weil für die weitere Arbeit mit Dreamweaver genau diese Tabelle vorausgesetzt wird.

Gib mindestens einen ausführlichen (Feld 2-10) und zwei kurze Datensätze (Feld 2-5) in die Tabelle ein, damit die nächsten Übungen funktionieren.


zum Seitenanfang
Datenausgabe mit Dreamweaver (mit Hinweisen zum Quelltext)
einen Abschnitt zurückeinen Abschnitt weiter
Quelltext Im Folgenden werden wir des öfteren in den von Dreamweaver erzeugten Quelltext schauen, klicke hierzu links oben auf die Buttons Code oder Teilen. Zur Seitendarstellung kommst du durch Klicken auf den Button Entwurf zurück.
neue php-Seite

Erstelle mit Datei - Neu - dynamische Seite - PHP eine neue Seite.
Gib ihr die Überschrift Gästebuch und schreibe darunter nach einer Leerzeile:

ID:
Name:
E-Mail:
Inhalt:
Zeitstempel:

Quelltext: Die Seite sieht im Quelltext genau wie eine normale HTML-Seite aus, hat aber die Dateiendung *.php und wird von Dreamweaver nun anders verwaltet.

mit Datenbank verbinden

Öffne rechts das Fenster Anwendung und wähle dort den Bereich Datenbanken (oder wähle im Menü Fenster - Datenbanken).
Klicke auf das Plus-Zeichen und wähle mySQL-Verbindung.

Gib im erscheinenden Fenster einen beliebigen Verbindungsnamen und deine Zugangsdaten ein.

Dreamweaver ist nun mit der Datenbank verbunden, hat aber noch keine Daten eingelesen.

Quelltext: noch immer keine Änderungen im Quelltext, Dreamweaver hat aber im Ordner Connections eine Datei schule.php angelegt, die die Verbindungsdaten enthält.

Datensatzgruppe erstellen

Wähle bei Anwendung jetzt den Bereich Bindungen (oder Fenster - Bindungen). Klicke auf das Plus-Zeichen und wähle Datensatzgruppe(Abfrage).

Dreamweaver hat nun alle Datensätze der ausgewählten Tabelle gelesen und intern zwischengespeichert.

Quelltext: Ganz oben im Quelltext ist mit require_once() die Datei schule.php (s.o.) mit den Verbindungsdaten eingebunden.
Darunter folgt ein ganzer Block mit PHP-Anweisungen:

  1. Öffnen der gewählten Datenbank (mysql_select_db() )
  2. Formulierung der Datenbankabfrage in SQL ( $query_gastbuch = "SELECT * ..."
  3. Einlesen aller empfangenen Datensätze in Array-Variable $gastbuch
  4. Definieren der Variablen $row_gastbuch, die die Daten des ersten übermittelten Datensatzes enthält.
  5. Definieren der Variablen $totalRows_gastbuch, die die Zahl der übermittelten Datensätze enthält.

Ganz am Ende des Quelltextes werden die übertragenen Daten wieder verworfen ( mysql_free_result() ).

Datensatz ausgeben

Klicke im Fenster Bindungen auf das kleine Pluszeichen vor Datensatzgruppe - es erscheinen alle Feldnamen der eingelesenen Datentabelle.

Du kannst jetzt jedes dieser Felder anklicken und mit der Maus auf deine Webseite ziehen. Die Seite sieht dann etwa so aus:

Quelltext: In den Quelltext sind nun einige Ausgabebefehle ( echo ) eingesetzt. echo $row_gastbuch['name'] gibt z.B. den im aktuellen Datensatz enhaltenen Namen aus.

Seite ansehen

Speichere deine Seite unter dem Namen versuch-1.php in deinem Homepage-Verzeichnis (z.B. C:\xampplight\htdocs\homepage) und betrachte sie dann in der Browser-Vorschau. Dynamische Seiten kannst du nur im Browser richig beurteilen, die Darstellung in Dreamweaver ist immer eingeschränkt, obwohl die Live-Data-Ansicht (rechts neben dem Button für die Entwurfsansicht) für den ersten Eindruck meist ganz brauchbare Ergebnisse liefert.
Zwischenspeicherung Speichere diese Seite unter einem neuen Namen ab, wir brauchen die reine Ausgabeseite später noch für weitere Übungen.
mehrere Datensätze ausgeben

Um mehrere Einträge gleichzeitig sehen zu können, muss der Seitenbereich mit der Ausgabe mehrfach untereinander erscheinen.
Markiere den zu wiederholenden Seitenbereich und gehe dann zum Fenster Serververhalten. Klicke hier auf das große Plus-Symbol und wähle dann Bereich wiederholen aus. Im erscheinenden Fenster wähle dann alle Datensätze aus und bestätige mit OK.
(Ein wiederholender Bereich kann selbstverständlich auch Bilder und Links enthalten.)

Quelltext: Die Ausgabezeilen ( echo ) sind nun von einer do { ... } while - Schleife umrahmt, die dafür sorgt, dass alle Datensätze nacheinander ausgegeben werden.


zum Seitenanfang
Dateneingabe über Formular
einen Abschnitt zurückeinen Abschnitt weiter
Einfüge-Formular

Wähle auf deiner Seite eine Stelle aus, wo das Eingabeformular erscheinen soll (hier direkt zwischen Überschrift und Ausgabedaten in einer Leerzeile) .
Wähle Einfügen - Anwendungsobjekte - Datensatz einfügen - Assistent "Einfügeformular für Datensätze". Im erscheinenden Fenster gibst du die gewünschte Datenbankverbindung und Tabelle ein. Als aufzurufende Seite gibst du deine aktuelle Seite (test-1.php) ein. Unten in der Feldauflistung löscht du die Felder id und stempel, da beide automatisch gesetzt werden; hierzu wählst du das entsprechende Feld aus und klickst dann auf den Minus-Button. Für jedes ausgewählte Formularfeld kannst du jetzt noch die Beschriftung, Anzeigeart und Sendeart festlegen. (In unserem Beispiel solltest du nur bei inhalt die Anzeigeart auf Textbereich ändern.)

Wenn du jetzt auf OK klickst, wird das fertige Formular auf deiner Seite eingefügt und alles ist fertig. Wenn du die Seite im Browser anschaust, werden neu eingegebene Daten direkt nach dem Abschicken unten im Ausgabeteil angezeigt !

 

aber Vorsicht !

Über die Eingabefelder kann auch Unsinn eingegeben werden, der klaglos in der Datenbank gespeichert wird. So wird jeder hier eingegebene HTML- oder JavaScript-Text bei der normalen Datenausgabe direkt ausgeführt.

Eingabedateien, mit denen der Administrator neue Daten in die Datenbank eingibt, müssen in speziellen Passwort-geschützten Ordnern liegen, damit niemand ohne Berechtigung auf sie zugreifen kann.

Anmerkung

Das Erstellen komfortabler und gegen Fehlbedienung gesicherter Eingabeseiten für die neuen Daten der Datenbank ist ziemlich aufwendig. Bei kleineren Projekten, die sich nicht täglich ändern und die ausschließlich von einer Person betreut werden, lohnt sich dieser Aufwand kaum.
Hier ist eine Eingabe neuer Daten über PHPmyAdmin (wie weiter oben beschrieben) die optimale Lösung.

Sollen mehrere Personengruppen Daten aktualisieren können und ändern sich Daten relativ häufig (z.B. täglich), sollte man sich besser nach einem ausgewachsenen Content-Managementsystem ( z.B. Mambo oder Typo3; beide umsonst) umschauen.

zum Seitenanfang
Veröffentlichen der dynamischen Homepage
einen Abschnitt zurückeinen Abschnitt weiter
Provider

Um deine dynamische Homepage veröffentlichen zu können, brauchst du einen Provider, der dir Zugang zu einer Datenbank und zu PHP ermöglicht - das geht nicht überall und ist oft mit Mehrkosten verbunden.

Von deinem Provider bekommst du dann die Adresse deiner Homepage und die Zugangsdaten für den FTP-Server und die SQL-Datenbank.

Zugangsdaten (local + extern mit DW verwalten)
Datei-Upload  
Datenbank-Upload Sinnvollerweise wirst du auf deinem Testserver (localhost) nur einige Testdatensätze eingeben. Wenn alles läuft, lädst du deine PHP-Dateien auf den Server und nutzt das PHPmyAdmin deines Providers um Daten direkt in die externe Datenbank zu schreiben.

zum Seitenanfang
Verwandte Themen
einen Abschnitt zurück
 

 


 
  letzte Aktualisierung:  11.09.2005 13:28


zusammengestellt von Peter Lepke ;    lepke@nils.nibis.de