Dynamische Web-Seiten mit Dreamweaver |
||
Was sind dynamische Webseiten ? |
| 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:
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. |
| Installation eines Testsystems (XAMPPlight) + Konf. von Dreamweaver |
| 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.
Der Quelltext sieht zwar anders als im ersten Beispiel aus, erfüllt aber denselben Zweck.
|
| Datenbankerstellung mit PHPmyAdmin |
| 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:
|
| Tabelle ändern |
Mache zu den Feldern die folgenden Angaben: |
| Daten einfügen | Klicke bei ausgewählter Tabelle gastbuch rechts in der 2. Zeile auf Einfügen. Einige Besonderheiten gibt es nun bei der Eingabe von Daten in die letzten vier Felder:
|
| 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. |
| Datenausgabe mit Dreamweaver (mit Hinweisen zum Quelltext) |
| Quelltext | Im Folgenden werden wir des öfteren in den von Dreamweaver erzeugten Quelltext schauen, klicke |
| neue php-Seite | Erstelle mit Datei - Neu - dynamische Seite - PHP eine neue Seite. ID:
|
| mit Datenbank verbinden | Öffne rechts das Fenster Anwendung und wähle dort den Bereich Datenbanken (oder wähle im Menü Fenster - Datenbanken). Gib im erscheinenden Fenster einen beliebigen Verbindungsnamen und deine Zugangsdaten ein.
Dreamweaver ist nun mit der Datenbank verbunden, hat aber noch keine Daten eingelesen.
|
| 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.
|
| Datensatz ausgeben |
Du kannst jetzt jedes dieser Felder anklicken und mit der Maus auf deine Webseite ziehen. Die Seite sieht dann etwa so 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.
|
| Dateneingabe über Formular |
| 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) .
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. 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. |
| Veröffentlichen der dynamischen Homepage |
| 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. |
| Verwandte Themen | ||
|
letzte Aktualisierung:
11.09.2005 13:28
zusammengestellt von Peter Lepke ; lepke@nils.nibis.de