Benutzerhandbuch Abbrechen

Grundlegendes zu Webanwendungen

 

 

Hinweis:

Die Benutzeroberfläche wurde ab Dreamweaver CC vereinfacht. Daher kann es vorkommen, dass Sie einige der in diesem Artikel beschriebenen Optionen ab Dreamweaver CC nicht finden. Weitere Informationen finden Sie in diesem Artikel.

Webanwendungen

Eine Webanwendung ist eine Website, deren Seiteninhalt noch nicht oder nur zum Teil festgelegt ist. Der endgültige Inhalt einer Seite wird erst festgelegt, wenn der Besucher die Seite vom Webserver anfordert. Da sich der endgültige Inhalt der Seite je nach den Aktionen des Besuchers von Anforderung zu Anforderung ändern kann, wird eine solche Seite als dynamische Seite bezeichnet.

Webanwendungen werden gezielt zur Bewältigung verschiedener Herausforderungen und Problemstellungen erstellt. In diesem Abschnitt werden häufige Verwendungszwecke für Webanwendungen beschrieben. Sie finden hier auch ein einfaches Beispiel.

Häufige Verwendungszwecke für Webanwendungen

Webanwendungen bieten sowohl Besuchern als auch Entwicklern unter anderem die folgenden Vorteile:

  • Besucher können Informationen in inhaltsreichen Websites schnell und einfach finden.

    Solche Webanwendungen ermöglichen es den Besuchern, den Inhalt ganz nach Wunsch zu durchsuchen und zu organisieren sowie durch den Inhalt zu navigieren. Beispiele sind firmeneigene Intranets, Microsoft MSDN (www.msdn.microsoft.com) oder Amazon.com (www.amazon.com).

  • Die von Besuchern der Site eingegebenen Daten können erfasst, gespeichert und analysiert werden.

    Früher wurden Daten, die in HTML-Formulare eingegeben wurden, zur Verarbeitung per E-Mail an Mitarbeiter oder CGI-Anwendungen gesendet. Mit Webanwendungen können Formulardaten direkt in einer Datenbank gespeichert werden. Zudem können Daten extrahiert und webbasierte Berichte zu Analysezwecken erstellt werden. Beispiele sind Seiten für Online-Banking oder Online-Bestellungen, Umfragen und Formulare für Kunden-Feedback.

  • Websites, deren Inhalt sich häufig ändert, können schneller aktualisiert werden.

    Durch den Einsatz von Webanwendungen müssen Webdesigner den HTML-Code einer Site nicht ständig aktualisieren. Inhaltsanbieter wie z. B. Nachrichtenredaktionen liefern der Webanwendung Inhalte und die Webanwendung aktualisiert die Site automatisch. Beispiele sind The Economist (www.economist.com) und CNN (www.cnn.com).

Beispiel für eine Webanwendung

Julia ist professionelle Webdesignerin mit solider Erfahrung in Dreamweaver. Ihre Aufgabe ist die Verwaltung der Intranet- und Internet-Sites eines mittelständischen Unternehmens mit 1000 Mitarbeitern. Eines Tages spricht der Personalsachbearbeiter Chris sie an und bittet sie um Hilfe bei dem folgenden Problem: Die Personalabteilung verwaltet ein Fitnessprogramm, bei dem die Mitarbeiter für jeden Kilometer Punkte erhalten, den sie zu Fuß gehen, radeln oder joggen. Alle Mitarbeiter müssen Chris per E-Mail mitteilen, wie viele Kilometer sie jeweils pro Monat zurückgelegt haben. Am Monatsende bearbeitet Chris alle E-Mails und die Mitarbeiter erhalten als Preis kleinere Geldbeträge, deren Höhe sich nach der Gesamtzahl ihrer Punkte richtet.

Das Problem ist nun, dass das Fitnessprogramm sich als durchschlagender Erfolg erwiesen hat. Inzwischen nehmen so viele Mitarbeiter am Programm teil, dass Chris am Monatsende geradezu mit E-Mails überschüttet wird. Chris fragt Julia, ob eine webgestützte Lösung möglich ist.

Julia empfiehlt eine intranetbasierte Webanwendung, die folgende Aufgaben durchführt:

  • Die Mitarbeiter können ihre Kilometeranzahl auf einer Webseite in ein einfaches HTML-Formular eingeben.

  • Die Kilometeranzahl der Mitarbeiter wird in einer Datenbank gespeichert.

  • Die Fitnesspunkte werden auf Grundlage der Kilometeranzahl berechnet.

  • Die Mitarbeiter können ihre monatliche Leistung verfolgen.

  • Am Monatsende kann Chris dann mit einem einfachen Mausklick die Gesamtanzahl der Punkte anzeigen.

    Julia verwendet Dreamweaver, um die Webanwendung schnell und einfach zu erstellen. Noch vor der Mittagspause ist sie damit fertig.

Funktionsweise einer Webanwendung

Eine Webanwendung ist eine Sammlung statischer und dynamischer Webseiten. Statische Webseiten ändern sich nicht, wenn sie von den Besuchern der Site aufgerufen werden. Der Webserver sendet die Seite an den anfordernden Webbrowser, ohne sie zu ändern. Eine dynamische Webseite wird dagegen vom Server geändert, bevor sie an den Browser gesendet wird. Wegen dieser Änderungen wird eine solche Seite als dynamisch bezeichnet.

Sie können beispielsweise eine Seite erstellen, auf der Fitnessergebnisse angezeigt werden, wobei bestimmte Einzelheiten (wie der Name des Mitarbeiters und die Ergebnisse) aber erst festgelegt werden, wenn die Seite von einem bestimmten Mitarbeiter angefordert wird.

Im nächsten Abschnitt wird die Funktionsweise von Webanwendungen genauer erläutert.

Statische Webseiten verarbeiten

Eine statische Website besteht aus mehreren zusammengehörigen HTML-Seiten und -Dateien, die sich auf einem Computer befinden, auf dem wiederum ein Webserver ausgeführt wird.

Bei einem Webserver handelt es sich um Software, die von Webbrowsern angeforderte Webseiten bereitstellt. Eine Seitenanforderung wird generiert, wenn ein Besucher auf einen Hyperlink auf einer Webseite klickt, in einem Browser ein Lesezeichen wählt oder eine URL im Adresstextfeld des Browsers eingibt.

Der endgültige Inhalt einer statischen Webseite wird vom Designer festgelegt und ändert sich nicht, wenn die Seite angefordert wird. Beispiel:

<html>
<head>
<title>Trio Motors Information Page</title>
</head>
<body>
<h1>About Trio Motors</h1>
<p>Trio Motors is a leading automobile manufacturer.</p>
</body>
</html>
<html> <head> <title>Trio Motors Information Page</title> </head> <body> <h1>About Trio Motors</h1> <p>Trio Motors is a leading automobile manufacturer.</p> </body> </html>
<html> 
    <head> 
        <title>Trio Motors Information Page</title> 
    </head> 
    <body> 
        <h1>About Trio Motors</h1> 
        <p>Trio Motors is a leading automobile manufacturer.</p> 
    </body> 
</html>

Der gesamte HTML-Code der Seite wird vom Designer geschrieben, bevor die Seite auf dem Server abgelegt wird. Da der HTML-Code sich nicht mehr ändert, wenn die Seite einmal auf dem Server abgelegt wurde, bezeichnet man eine solche Seite als statisch.

Hinweis:

Genau genommen kann eine „statische“ Seite alles andere als statisch sein. Sie kann beispielsweise durch ein Rollover-Bild oder einen Flash-Inhalt (eine SWF-Datei) überaus lebendig wirken. In dieser Dokumentation wird eine Seite jedoch als statisch bezeichnet, wenn sie ohne Änderungen an den Browser gesendet wird.

Wenn eine statische Seite vom Webserver angefordert wird, liest der Server zunächst die Anforderung. Anschließend sucht er die Seite und sendet sie an den Browser. Dies wird im folgenden Beispiel veranschaulicht:

Verarbeitung einer statischen Webseite

A. Der Webbrowser fordert eine statische Seite an. B. Der Webserver sucht die Seite. C. Der Webserver sendet die Seite an den Browser. 

Bei Webanwendungen stehen bestimmte Codezeilen noch nicht fest, wenn die Seite vom Besucher angefordert wird. Diese Zeilen müssen durch einen bestimmten Mechanismus festgelegt werden, bevor die Seite an den Browser gesendet werden kann. Dieser Mechanismus wird im folgenden Abschnitt beschrieben.

Dynamische Seiten verarbeiten

Wenn eine statische Webseite angefordert wird, sendet der Webserver die Seite umgehend und ohne Änderungen an den Browser. Wenn eine dynamische Seite angefordert wird, ist die Reaktion jedoch anders: Die Seite wird an eine spezielle Software weitergeleitet, die für die Fertigstellung der Seite zuständig ist. Diese Software wird als Anwendungsserver bezeichnet.

Der Anwendungsserver liest den Code auf der Seite, stellt die Seite gemäß den Anweisungen im Code fertig und entfernt dann den Code aus der Seite. Daraus ergibt sich eine statische Seite, die der Anwendungsserver an den Webserver zurückgibt. Der Webserver sendet die Seite anschließend an den Browser. Die Seite, die beim Browser eingeht, besteht ausschließlich aus HTML. Im Folgenden wird dieser Vorgang veranschaulicht:

Dynamische Seiten verarbeiten

A. Der Webbrowser fordert eine dynamische Seite an. B. Der Webserver sucht die Seite und übergibt sie an den Anwendungsserver. C. Der Anwendungsserver analysiert die Anweisungen auf der Seite und stellt die Seite fertig. D. Der Anwendungsserver gibt die fertiggestellte Seite an den Webserver zurück. E. Der Webserver sendet die fertiggestellte Seite an den Browser. 

Auf Datenbanken zugreifen

Anwendungsserver ermöglichen die Arbeit mit serverseitigen Ressourcen, wie z. B. Datenbanken. So kann eine dynamische Seite den Anwendungsserver beispielsweise anweisen, Daten aus einer Datenbank zu extrahieren und in den HTML-Code der Seite einzufügen. Weitere Informationen finden Sie unter www.adobe.com/go/learn_dw_dbguide.

Wenn Sie Inhalte in einer Datenbank speichern, können Sie den Entwurf der Website von den Inhalten trennen, die den Benutzern der Site angezeigt werden sollen. Anstatt einzelne HTML-Dateien für jede Seite zu schreiben, müssen Sie für die verschiedenen Informationsarten, die präsentiert werden sollen, nur eine einzige Seite – auch Vorlage genannt – erstellen. Sie können dann Inhalte in eine Datenbank laden und diese anschließend auf der Website anzeigen lassen, wenn sie von Benutzern abgerufen werden. Sie können so auch Informationen in einer einzelnen Quelle aktualisieren und diese Änderung dann für die gesamte Website übernehmen, ohne jede Seite manuell bearbeiten zu müssen. Mit Adobe Dreamweaver können Sie Webformulare erstellen, um Daten in einer Datenbank einzufügen, zu aktualisieren oder zu löschen.

Die Anweisung, Daten aus einer Datenbank zu extrahieren, wird als Datenbankabfrage bezeichnet. Eine Abfrage besteht aus Suchkriterien, die in einer Datenbanksprache namens SQL (Structured Query Language) ausgedrückt werden. Die SQL-Abfrage wird in die serverseitigen Skripts oder Tags der Seite geschrieben.

Anwendungsserver können nicht direkt mit Datenbanken kommunizieren, da sie das spezielle Datenformat der Datenbanken nicht entziffern können, ähnlich wie auch ein Word-Dokument nicht immer korrekt in Notepad oder BBEdit angezeigt werden kann. Die Kommunikation zwischen Anwendungsserver und Datenbank ist nur über einen Datenbanktreiber möglich. Dabei handelt es sich um Software mit der Funktion eines Vermittlers zwischen dem Anwendungsserver und der Datenbank.

Nachdem der Treiber die Kommunikation aufgebaut hat, wird die Datenbankabfrage ausgeführt und eine Datensatzgruppe erstellt. Eine Datensatzgruppe ist eine Datenmenge, die aus einer Tabelle bzw. mehreren Tabellen einer Datenbank extrahiert wird. Die Datensatzgruppe wird wieder an den Anwendungsserver geleitet, der die Daten in die Seite einfügt.

Das folgende Beispiel zeigt eine einfache, in SQL geschriebene Datenbankabfrage:

SELECT lastname, firstname, fitpoints
FROM employees
SELECT lastname, firstname, fitpoints FROM employees
SELECT lastname, firstname, fitpoints 
FROM employees

Mit dieser Anweisung wird eine Datensatzgruppe mit drei Spalten erstellt, deren Zeilen den Nachnamen, den Vornamen und die Fitnesspunkte aller Mitarbeiter enthalten, die in der Datenbank gespeichert sind. Weitere Informationen finden Sie unter www.adobe.com/go/learn_dw_sqlprimer.

Das folgende Beispiel zeigt, wie eine Datenbankabfrage durchgeführt wird und Daten an den Browser zurückgegeben werden:

Auf Datenbanken zugreifen

A. Der Webbrowser fordert eine dynamische Seite an. B. Der Webserver sucht die Seite und übergibt sie an den Anwendungsserver. C. Der Anwendungsserver analysiert die Anweisungen auf der Seite. D. Der Anwendungsserver sendet die Abfrage an den Datenbanktreiber. E. Der Treiber führt die Datenbankabfrage aus. F. Die Datensatzgruppe wird an den Treiber zurückgegeben. G. Der Treiber übergibt die Datensatzgruppe an den Anwendungsserver. H. Der Anwendungsserver fügt Daten in die Seite ein und übergibt die Seite dann an den Webserver. I. Der Webserver sendet die fertiggestellte Seite an den Browser. 

Mit Ihrer Webanwendung können Sie praktisch jede Datenbank verwenden, sofern auf dem Server der entsprechende Datenbanktreiber installiert ist.

Wenn Sie kleine, kostengünstige Anwendungen erstellen möchten, können Sie eine Datenbank auf Dateibasis verwenden, die beispielsweise in Microsoft Access erstellt wurde. Wenn Sie robuste Anwendungen für kritische Geschäftsabläufe erstellen möchten, können Sie eine Datenbank auf Serverbasis verwenden, die beispielsweise in Microsoft SQL Server, Oracle 9i oder MySQL erstellt wurde.

Wenn sich Ihre Datenbank nicht auf demselben System wie der Webserver befindet, müssen Sie sicherstellen, dass zwischen den beiden Systemen eine schnelle Verbindung besteht, damit die Webanwendung zügig und rationell arbeiten kann.

Dynamische Seiten erstellen

Das Erstellen dynamischer Seiten geschieht in zwei Schritten: Zunächst muss der HTML-Code geschrieben werden und dann müssen dem HTML-Code die serverseitigen Skripts oder Tags hinzugefügt werden, um eine dynamische Seite zu erhalten. Im resultierenden Code ist die Programmiersprache im HTML-Code der Seite eingebettet. Daher werden diese Sprachen auch als HTML-eingebettete Programmiersprachen bezeichnet. Im folgenden Beispiel wird CFML (ColdFusion Markup Language) verwendet:

Hinweis: CFML wird seit Dreamweaver CC nicht mehr unterstützt.

<html>
<head>
<title>Trio Motors Information Page</title>
</head>
<body>
<h1>About Trio Motors</h1>
<p>Trio Motors is a leading automobile manufacturer.</p>
<!--- embedded instructions start here --->
<cfset department="Sales">
<cfoutput>
<p>Be sure to visit our #department# page.</p>
</cfoutput>
<!--- embedded instructions end here --->
</body>
</html>
<html> <head> <title>Trio Motors Information Page</title> </head> <body> <h1>About Trio Motors</h1> <p>Trio Motors is a leading automobile manufacturer.</p> <!--- embedded instructions start here ---> <cfset department="Sales"> <cfoutput> <p>Be sure to visit our #department# page.</p> </cfoutput> <!--- embedded instructions end here ---> </body> </html>
<html> 
    <head> 
        <title>Trio Motors Information Page</title> 
    </head> 
    <body> 
        <h1>About Trio Motors</h1> 
        <p>Trio Motors is a leading automobile manufacturer.</p> 
        <!--- embedded instructions start here ---> 
        <cfset department="Sales"> 
        <cfoutput> 
        <p>Be sure to visit our #department# page.</p> 
        </cfoutput> 
        <!--- embedded instructions end here ---> 
    </body> 
</html>

Die eingebetteten Anweisungen auf dieser Seite bewirken die folgenden Aktionen:

  1. Eine Variable namens department wird erstellt, der die Zeichenfolge "Sales" zugewiesen wird.

  2. Der Wert "Sales" der Variablen wird in den HTML-Code geschrieben.

Der Anwendungsserver gibt die folgende Seite an den Webserver zurück:

<html>
<head>
<title>Trio Motors Information Page</title>
</head>
<body>
<h1>About Trio Motors</h1>
<p>Trio Motors is a leading automobile manufacturer.</p>
<p>Be sure to visit our Sales page.</p>
</body>
</html>
<html> <head> <title>Trio Motors Information Page</title> </head> <body> <h1>About Trio Motors</h1> <p>Trio Motors is a leading automobile manufacturer.</p> <p>Be sure to visit our Sales page.</p> </body> </html>
<html> 
    <head> 
        <title>Trio Motors Information Page</title> 
    </head> 
    <body> 
        <h1>About Trio Motors</h1> 
        <p>Trio Motors is a leading automobile manufacturer.</p> 
        <p>Be sure to visit our Sales page.</p> 
    </body> 
</html>

Der Webserver sendet die Seite an den Browser zurück, in dem sie folgendermaßen angezeigt wird:

About Trio Motors

Trio Motors is a leading automobile manufacturer.

Be sure to visit our Sales page.

Sie wählen eine Skript- oder tagbasierte Sprache entsprechend der auf dem Server vorhandenen Servertechnologie. Im Folgenden sind die gebräuchlichsten Programmiersprachen für die von Dreamweaver unterstützten Servertechnologien aufgeführt:

Servertechnologie

Sprache

ColdFusion

ColdFusion Markup Language (CFML)

Active Server Pages (ASP)

VBScript

JavaScript

PHP

PHP

Dreamweaver kann die serverseitigen Skripts oder Tags schreiben, die für funktionsfähige Seiten erforderlich sind. Sie können sie jedoch auch manuell in der Dreamweaver-Codeumgebung schreiben.

Terminologie für Webanwendungen

In diesem Abschnitt werden häufig verwendete Begriffe in Bezug auf Webanwendungen erläutert.

Ein Anwendungsserver

ist Software, die einen Webserver bei der Verarbeitung von Webseiten unterstützt, die serverseitige Skripts oder Tags enthalten. Wenn eine solche Seite vom Server angefordert wird, übergibt der Webserver die Seite zur Verarbeitung an den Anwendungsserver, bevor sie an den Browser gesendet wird. Weitere Informationen finden Sie unter Funktionsweise einer Webanwendung.

Zu den häufig verwendeten Anwendungsservern gehören ColdFusion und PHP.

Eine Datenbank

ist eine in Tabellen gespeicherte Datensammlung. Jede Zeile der Tabelle bildet einen Datensatz und jede Spalte bildet ein Feld im Datensatz, wie im Folgenden gezeigt:

Eine Datenbank

Ein Datenbanktreiber

ist Software mit der Funktion eines Vermittlers zwischen dem Anwendungsserver und der Datenbank. Die Daten in einer Datenbank werden in einem speziellen Format gespeichert. Mithilfe eines Datenbanktreibers kann die Webanwendung Daten lesen und bearbeiten, die sonst nicht lesbar sind.

Ein Datenbankmanagementsystem

(DBMS oder Datenbanksystem) ist Software, die zur Erstellung und Bearbeitung von Datenbanken dient. Häufig verwendete Datenbanksysteme sind beispielsweise Microsoft Access, Oracle 9i und MySQL.

Eine Datenbankabfrage

ist ein Vorgang, bei dem eine Datensatzgruppe aus einer Datenbank extrahiert wird. Eine Abfrage besteht aus Suchkriterien, die in einer Datenbanksprache namens SQL ausgedrückt werden. In der Abfrage kann beispielsweise vorgegeben werden, dass nur bestimmte Spalten oder Datensätze in die Datensatzgruppe aufgenommen werden.

Eine dynamische Seite

ist eine Webseite, die zur Laufzeit von einem Anwendungsserver angepasst und erst dann an den Browser gesendet wird.

Eine Datensatzgruppe

ist eine Datenteilmenge, die aus Tabellen einer Datenbank extrahiert wird, wie im folgenden Beispiel gezeigt:

Eine Datensatzgruppe

Eine relationale Datenbank

ist eine Datenbank mit mehreren Tabellen, deren Daten von den Tabellen gemeinsam verwendet werden. Die folgende Datenbank ist relational, da die Spalte „DepartmentID“ von zwei Tabellen genutzt wird.

Relationale Datenbank

Eine Servertechnologie

wird von einem Anwendungsserver verwendet, um dynamische Seiten zur Laufzeit zu ändern.

Die Dreamweaver-Entwicklungsumgebung unterstützt die folgenden Servertechnologien:

  • Adobe® ColdFusion®

  • Microsoft Active Server Pages (ASP)

  • PHP: Hypertext Preprocessor (PHP)

    Mit der Code-Entwicklungsumgebung von Dreamweaver können Sie auch Seiten für beliebige andere Servertechnologien entwickeln, die nicht in der Liste aufgeführt sind.

Eine statische Seite

ist eine Webseite, die zur Laufzeit nicht von einem Anwendungsserver angepasst, sondern unmittelbar an den Browser gesendet wird. Weitere Informationen finden Sie unter Statische Webseiten verarbeiten.

Eine Webanwendung

ist eine Website, deren Seiteninhalt noch nicht oder nur zum Teil festgelegt ist. Der endgültige Inhalt dieser Seiten wird erst festgelegt, wenn der Besucher die Seite vom Webserver anfordert. Da sich der endgültige Inhalt der Seite je nach den Aktionen des Besuchers von Anforderung zu Anforderung ändern kann, wird eine solche Seite als dynamische Seite bezeichnet.

Ein Webserver

ist Software, die von Webbrowsern angeforderte Webseiten bereitstellt. Eine Seitenanforderung wird generiert, wenn der Besucher auf einen Hyperlink auf einer Webseite klickt, in einem Browser ein Lesezeichen wählt oder eine URL im Adresstextfeld des Browsers eingibt.

Gängige Webserver sind beispielsweise Microsoft Internet Information Server (IIS) und Apache HTTP Server.

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?