Erstellung von Web-Applikationen mit dem Visual Web Developer 2005

INHALTSVERZEICHNIS

ZUSAMMENFASSUNG

ABSTRACT

1 EINFÜHRUNG
1.1 Zielstellung
1.2 Abgrenzung
1.3 Methodik

2 WEBANWENDUNGEN
2.1 Definition
2.2 Aufbau

3 MICROSOFT VISUAL WEB DEVELOPER
3.1 Einordnung
3.2 Bestandteile
3.3 Einführung in die Benutzeroberfläche
3.4 Funktionalität anhand eines Beispielprogramms
3.4.1 Vorstellung des Beispielprogramms
3.4.2 Gestaltung der Benutzeroberfläche einer Webanwendung
3.4.3 Verwendung der .NET Klassenbibliothek
3.4.4 Erstellung eigener Klassen
3.4.5 Erstellen von Masterseiten
3.4.6 Einbindung von Datenbanken
3.4.7 Debugging
3.4.8 Veröffentlichen der Webanwendung
3.5 Sicherheit von ASP.NET
3.6 Webservices
3.7 Mobile Webanwendungen

4 BEURTEILUNG
4.1 Vorteile
4.2 Nachteile

5 AUSBLICK

6 FAZIT

ABKÜRZUNGSVERZEICHNIS

ABBILDUNGSVERZEICHNIS

LITERATURVERZEICHNIS/QUELLENVERZEICHNIS

ANLAGENVERZEICHNIS

ZUSAMMENFASSUNG

Erstellung von Web-Applikationen mit dem Visual Web Developer 2005

Erstellt von Lutz Kirmße

Die Arbeit zeigt die Möglichkeiten, die das Programm Visual Web Developer 2005 dem Programmierer bei der Erstellung von Webanwendungen oder Webapplikationen gibt. Der Arbeit vorangestellt sind einige allgemeine Erläuterungen zur Entwicklungsumgebung. Anhand einer mit dem Programm erstellten Lagerverwaltungsanwendung werden die einzelnen Elemente des Programms näher erläutert. In der Arbeit wird auf die Möglichkeiten zur Gestaltung der Anwenderoberfläche eingegangen, es erfolgt eine Erklärung zur Erstellung von Masterseiten und zur Möglichkeit der Einbindung von Klassen. Anschließend erfolgt eine Erläuterung wie Datenbanken in die Anwendung zu integrieren sind. Nach der Beschreibung der Fehlerbeseitigungsmöglichkeiten und Hinweisen zur Veröffentlichung der Webanwendung, wird noch kurz auf Webservices und mobile Webanwendungen eingegangen. Abschließend erfolgt eine kurze Bewertung.

ABSTRACT

Creation of Web-Applications with Visual Web Developer 2005

Created by Lutz Kirmße

The work demonstrates the possibilities that the program Visual Web Developer 2005 gives programmers in the creation of Web applications. With a warehouse management application, the individual elements of the program getting explained. The beginning of the work provides some general remarks on the development environment. The possibilities for designing the user interface are described, also an explanation for the creation of master pages and the possibility of the involvement of classes. Then, an explanation how to integrated databases. After describing the troubleshooting capabilities and references to publish the Web application there is a short describtion of Web services and mobile Web applications. Finally, there is a assessment.

1 EINFÜHRUNG

1.1 Zielstellung

Diese Arbeit befasst sich mit einer Vorstellung der Funktionsweise der frei verfügbaren Software Microsoft Visual Web Developer 2005 Express Edition. Die Software ermöglicht die Erstellung und Programmierung von Webseiten, Webanwendungen, Webdiensten und mobilen Webanwendungen. Anhand eines Programms zur Lagerverwaltung eines kleinen Unternehmens werden die einzelnen Funktionselemente und Instrumente, die das Programm zur Verfügung stellt, erläutert.

1.2 Abgrenzung

Das Programm nutzt für die Erstellung der Anwendungen die Programmiersprachen Visual Basic 2005 und C#. Dies setzt Kenntnisse in mindestens einer der Sprachen voraus. Das Programm verspricht eine umfassende Unterstützung des Nutzers beim Erstellen der Applikationen. Nachträglich betrachtet ist das Erstellen umfangreicher Anwendungen ohne vorherige Kenntnisse in einer der beiden Sprachen schwierig. Die Arbeit befasst sich hauptsächlich mit der Erstellung von Webanwendungen. Auf die zusätzlichen Möglichkeiten zur Erstellung von Webservices und mobilen Webanwendungen wird aus Platzgründen nur allgemein, jedoch ohne Hinzunahme eines Beispielprogramms eingegangen.

1.3 Methodik

Zuerst wird auf einige grundlegende Aspekte zu Webanwendungen eingegangen. Danach folgen allgemeine Erläuterungen zu Microsoft Visual Web Developer 2005 Express Edition (im folgenden VWD genannt), zu den einzelnen Elementen und der Oberflächengestaltung und anschließend zu den einzelnen Funktionen. Die Funktionen und Elemente werden zuerst allgemein erklärt und anschließend mit Hilfe des selbst erstellten Beispielprogramms zur Lagerverwaltung erläutert. Zum Schluss der Arbeit erfolgen noch eine Bewertung der Webanwendungen und von VWD.

2 WEBANWENDUNGEN

2.1 Definition

Eine Webanwendung ist ein Programm, das auf einem Webserver installiert und ausgeführt wird und von dem Anwender mittels eines Browsers per Internet oder Netzwerk genutzt und bedient werden kann.¹ Die räumliche Entfernung zwischen Anwender und Server ist dabei ohne Bedeutung. Beispiele für Webanwendungen sind web-basierte E-Mail Dienste wie z. B. GMX oder Gmail, Online Auktionsplattformen, wie z. B. Ebay und viele Online Banking- Systeme.²

2.2 Aufbau

Eine Webanwendung besteht, ähnlich wie eine Website, aus mehreren Seiten, hier allerdings aus ASP.NET Seiten, die mit gewöhnlichen Webseiten vergleichbar sind. Sie enden allerdings mit . aspx statt mit . html. Die Startseite heißt in diesen Fall default.aspx statt default.html. Zusätzlich zum veränderten Ablauf unterscheidet sich auch der Programmcode. So bestehen ASP.NET Seiten aus ASP.NET Elementen und ASP.NET Programmcode.³ ASP.NET ist ein speziell für die Erstellung von Web-Applikationen entwickelter Bestandteil des .NET Framework. Damit lassen sich Anwendungen auf Basis der aktuellen Microsoft-Windows-Betriebssysteme entwickeln und ausführen.⁴

Bei dem Start einer Webanwendung stellt der Browser eine Verbindung zum Webserver her, auf dem sich die Webanwendung befindet. Im Unterschied zu einer gewöhnlichen Website, bei der der Webserver die gestartete Seite einfach an den Browser zurückgibt, übergibt der Webserver die ASP.NET Seite dem auf dem Server installierten .NET Framework. Diese kompiliert sie, dass bedeutet es übersetzt die in der Seite vermerkten Befehle in eine für den Webserver verständliche Sprache und führt diese direkt aus. Das Ergebnis wird als reine HTML-Seite an den Browser zurückgegeben und auch als reine HTML-Seite angezeigt.⁵

3 MICROSOFT VISUAL WEB DEVELOPER 2005

3.1 Einordnung

Das von Microsoft entwickelte Programm gibt es in einer kostenlos verfügbaren Downloadversion Microsoft Visual Web Developer 2005 Express Edition.⁶ Es handelt sich dabei um ein Tool, welches Einsteigern und Hobbyanwendern eine leistungsfähige Entwicklungsumgebung zur Erstellung von ASP.NET Webanwendungen und Webseiten geben soll. Visual Web Developer 2005 Express Edition ist Teil der Visual Studio Produktfamilie. Im Unterschied zu Visual Studio 2005 handelt es sich allerdings um eine verschlankte

Oberfläche mit den spezifischen Tools, die zur Erstellung von Webanwendungen notwendig sind. Visual Web Developer ist somit kompakter und leichter zu bedienen als Visual Studio. Dabei sind die erstellten Websites vollständig kompatibel mit Visual Studio.⁷

Das Programm bietet eine übersichtliche Oberfläche für eine benutzerfreundliche Entwicklung der Web-Applikationen. Der Codeeditor bietet zahlreiche Funktionen. Das Programm unterstützt beispielsweise das so genannte Syntax-Highlighting des Quellcodes, der damit wesentlich übersichtlicher dargestellt wird. Durch IntelliSense, der automatischen Vervollständigung wird das Schreiben des Quellcodes beschleunigt und Syntaxfehler während der Programmierung markiert. Zur Programmierung der Seiten stehen dem Programmierer die Sprachen Visual Basic.NET und C#.NET zur Verfügung.⁸

3.2 Bestandteile

Bestandteile des Programms sind das .NET Framework 2.0, die Microsoft MSDN 2005 Express Edition und der Microsoft SQL Server 2005 Express Edition.

Das .NET Framework ist eine umfangreiche Klassenbibliothek, die für viele Bereiche der Programmierung Lösungen anbietet.⁹

Bei Microsoft MSDN 2005 Express Edition handelt es sich um die Produktdokumentation. Sie enthält nützliche Informationen und Anleitungen zur Erstellung von Webanwendungen.

Microsoft SQL Server ermöglicht eine Integration von Datenbanken in die Webanwendungen. Dieses Tool ist gerade im unternehmerischen Bereich von hoher Bedeutung, da fast alle kommerziell genutzten Anwendungen auf Datenbanken zugreifen.¹⁰

Weiterhin enthält VWD einen integrierten Webserver. Somit können die Applikationen schon während der Entwicklung unkompliziert getestet werden. Für die Übertragung der fertigen Webanwendung enthält das Programm ein Webseiten-Kopier-Tool, mit dem die Webseite direkt auf den Server gestellt werden kann.¹¹

3.3 Einführung in die Benutzeroberfläche

Beim Start von Visual Web Developer erscheint die sogenannte IDE (Integrated Development Environment), eine integrierte Entwicklungsumgebung.

Darunter versteht man die Ansammlung von mehreren Fensterbereichen. Die Aufteilung erfolgt standardmäßig in fünf Bereiche:¹²

1. Editorbereich: der Hauptbereich der Programmoberfläche. Er dient zur Bearbeitung von Projektdaten. Der Editorbereich besteht aus zwei Ansichten, die über Schaltflächen im unteren Bereich gewechselt werden können. Die erste Ansicht ist die „Entwurfsansicht“. Damit wird die Anwendung mit dem sogenannten „WYSIWYG“ (what you see is what you get) Prinzip bearbeitet, das heißt, dass die Darstellung der später im Browser angezeigten entspricht. In der zweiten Ansicht, der sogenannten „Quellansicht“, hat der Entwickler die Möglichkeit den generierten HTML-Code zu bearbeiten, sowie Programmcode für die Seite zu hinterlegen¹³
2. Toolbox: befindet sich am linken Rand der Programmoberfläche. In ihr befinden sich während der Bearbeitung der Projekte die Steuerelemente. Dies sind vorgefertigte Objekte, wie Eingabefelder oder Schaltflächen, die für die Anwendung benutzt werden können und zur Arbeitserleichterung beitragen.
3. Explorerbereich: ist unterteilt in den Projektmappen-Explorer und den Datenbank-Explorer. Der Projektmappen-Explorer dient zum Navigieren durch ein geöffnetes Projekt. Die einzelnen Projektdaten werden in einer Art Baumstruktur angezeigt. Der Datenbank-Explorer wird benötigt, wenn der Benutzer das Einbinden einer Datenbank in die Webanwendung wünscht. Er listet alle zur Verfügung stehenden Datenbankverbindungen auf und ermöglicht einen Einblick in die einzelnen Datenbanken. Auch dieser Explorer besitzt eine hierarchischen Aufbau.
4. Eigenschaftsfenster: befindet sich am rechten unteren Rand der Oberfläche. Hiermit können während der Entwicklung die Eigenschaften aller Elemente festgelegt werden
5. Buildund Debugbereich: befindet sich im unteren, mittleren Bereich der Benutzeroberfläche. Die angezeigten Fenster dienen zur Unterstützung der Seitenerstellung und der Fehlersuche. In der Regel wird das Fenster „Fehlerliste“ angezeigt. Es weist auf Fehler im Quellcode hin und bringt den Benutzer direkt auf die genaue Position des Problems. Auf Wunsch können neben der standardmäßig eingestellten Fehlerausgabe auch Warnungen und Meldungen angezeigt werden, über Probleme die nicht zu einem Abbruch der Anwendung, aber eventuell zu einem unerwarteten Verhalten während der Ausführung führen können.¹⁴

3.4 Funktionalität anhand eines Beispielprogramms

3.4.1 Vorstellung des Beispielprogramms

Das für die Arbeit erstellte Beispielprogramm ist eine Anwendung zur Abfrage von Produkten eines Lagers. Das Szenario gliedert sich wie folgt auf:

Eine Orthopädietechnikwerkstatt möchte über das Firmennetzwerk oder das Internet auf sein Lager zugreifen und Bauteile zur Herstellung von Beinprothesen entnehmen. Während der Entnahme wird der Bestand des Lagers überwacht. Die Webanwendung besteht aus drei Seiten: Home, Lagerabfrage und Kontakt. In der Unterseite Lagerabfrage kann der Nutzer die benötigten Bauteile und die gewünschte Menge auswählen und durch betätigen des Buttons „ 1. zur Liste hinzufügen “ in einen Bauteilekorb legen. Danach hat er die Möglichkeit einzelne Bauteile aus dem Korb zu entfernen oder noch hinzuzufügen oder den gesamten Bauteilkorb zu leeren. Ist die Auswahl abgeschlossen, werden die Bauteile durch betätigen des Buttons „ 2. Entnahme bestätigen “ aus der Lagerdatei entnommen. Dabei wird automatisch die Entnahmemenge mit der vorhandenen Menge der einzelnen Bauteile verglichen. Ist eine ausreichende Menge vorhanden, wird die Entnahme durchgeführt und der Bestand in der Lagerdatei aktualisiert. Ist keine ausreichende Menge vorhanden, öffnet sich ein Informationsfenster und es erfolgt ein Hinweis, dass nur eine bestimmte Menge entnommen werden kann. Der Bestand in der Lagerdatei reduziert sich dabei automatisch auf „0“.¹⁵

3.4.2 Gestaltung der Benutzeroberfläche einer Webanwendung

Für die Gestaltung einer ASP.NET Seite bietet VWD im Editorbereich den Unterpunkt „ Entwurf “. Dadurch kann der Benutzer mit Hilfe der Elemente der Toolbox und des Texteditors die Oberfläche bearbeiten.¹⁶ Der zu erscheinende Text lässt sich ähnlich eines Textverarbeitungsprogramms eingeben. Im oberen Fensterbereich stehen dem Benutzer verschiedene Elemente zur Verfügung, um den Text nach seinen Bedürfnissen anzupassen. So kann

beispielsweise die Farbe und Schriftart in einfacher Form geändert werden. Mit Hilfe der Toolbox lassen sich einzelne Elemente, wie z. B. Buttons oder Bilder einfügen, verschieben und in der Größe verändern. Durch den Einsatz dieser Elemente bietet VWD die Möglichkeit einer relativ einfachen Gestaltung der Programmoberfläche. Der zugehörige Quellcode wird dabei im Hintergrund automatisch erzeugt und muss nicht selbst geschrieben werden.

Einfache Anwendungen können mit der grafischen Oberfläche auch ohne Programmierkenntnisse erstellt werden.

Das Bild im Lagerverwaltungsprogramm wird beispielsweise wie folgt eingefügt: Man setzt den Cursor auf den Ort der Oberfläche wo das Bild platziert werden soll, sucht in der Toolbox den Unterpunkt Image und fügt diesen mit einem Doppelklick ein (1). Nun befindet sich allerdings nur ein Platzhalter für das zukünftige Bild auf der Oberfläche. Angepasst wird der Platzhalter indem man das Eigenschaftenfenster auswählt und unter ImageUrl die gewünschte Bilddatei einfügt (2). Durch ziehen an den Rändern des Bildes oder durch Einstellen des Layouts im Eigenschaftsfeld kann nun noch beispielsweise die Größe und die Position des Bildes geändert werden. Der zugehörige Quellcode wird im Hintergrund automatisch nach dem WYSIWYG Prinzip erzeugt (3).¹⁷

Das Einfügen von Texten, wie zum Beispiel der Überschrift des Lagerverwaltungsprogramms, wird durch den Klick auf die gewünschte Position der Seite und einer anschließenden Eingabe über die Tastatur erzeugt. VWD bietet anschließend mit Hilfe des „ Stil Generator “, der über einen Klick der rechten Maustaste geöffnet wird, die Möglichkeit den Text umfangreich zu formatieren, ohne den Quellcode bearbeiten zu müssen.¹⁸

3.4.3 Verwendung der .NET Klassenbibliothek

Eine Klasse ist eine allgemeine Objektbeschreibung. Sie beschreibt die grundlegende Struktur des Objektes. Ein Objekt besitzt Eigenschaften und Methoden. Eigenschaften dienen der genauen Spezifizierung des Objektes, wie z. B. der Höhe eines Buttons (die Eigenschaft Height). Methoden hingegen initiieren bestimmte Funktionen des Objektes, sie dienen daher nicht zur Spezifizierung. In einem Textfeld kann dies zum Beispiel die Methode Clear sein, die dazu dient, den durch die Eingabe des Nutzers geschriebenen Inhalt zu löschen. Durch Vererbung können Klassen voneinander abgeleitet werden. Die abgeleitete Klasse übernimmt so die Funktionalität der vorhandenen sogenannten Basisklasse. Das bedeutet, dass der oben genannte Button die Eigenschaften übernimmt, der Nutzer diesen aber beispielsweise mit einer anderen Schriftfarbe versehen möchte. Diese neue Eigenschaft wird zu den vorhandenen Eigenschaften hinzugefügt, so dass damit eine abgeleitete Klasse entsteht.¹⁹ VWD bietet mit der .NET Klassenbibliothek eine

Sammlung verschiedener Klassen, die für die .NET Anwendungen nützlich sind. Am Beispiel des Lagerverwaltungsprogramms kann man die Verwendung der .NET Klassenbibliothek erläutern:

Viele Objekte der Toolbox sind Klassen der Klassenbibliothek. Beispielsweise ist der Button „Entnahme bestätigen“ eine solche Klasse.²⁰ Die allgemeine Objektbeschreibung ist in dem Fall die Darstellung einer in einer festen Grö- ße, mit einer festgelegten Beschreibung versehenen Schaltfläche. Diese Schaltfläche kann vom Programmierer im Eigenschaftsfenster in seiner Form, Farbe oder Bezeichnung angepasst und verändert werden. So lässt sich die Hintergrundfarbe mit einem Klick auf das Feld BackColor im Menüpunkt Darstellung anpassen (4). Auch ist dem Button keine Funktion hinterlegt. Mit einem Doppelklick auf den Button kommt der Programmierer auf den hinterlegten Quellcode und kann die notwendige Funktionalität eingeben.²¹ Im Lagerverwaltungsprogramm erzeugt dieses Klick-Ereignis eine umfangreiche Funktionalität. Dadurch wird die Lagerentnahme gestartet. Die abgefragten Produkte des Bauteilkorbes werden mit der hinterlegten SQL- Lagerdatenbank verglichen und die Abfrage bei ausreichend vorhandener

Menge durchgeführt, bzw. der beschriebene Warnhinweis angezeigt. Der dem Button hinterlegte Code löst somit eine umfangreiche Methodik aus, die in der Klassenbibliothek so nicht hinterlegt sein kann.

3.4.4 Erstellung eigener Klassen

Neben der Verwendung der Klassenbibliothek bietet VWD auch die Möglichkeit zur Erstellung eigener Klassen. In der Beispielanwendung wurde die Datenzugriffsklasse erstellt. VWD bietet zur Erstellung einer Klasse Vorlagen.

Dadurch generiert VWD das Grundgerüst der Klasse, was nun nach den eigenen Bedürfnissen erweitert werden muss. Eine Klasse lässt sich über den Menüpunkt Neue Datei und mit der darin enthaltenen Vorlage Klasse erstellen. Dabei ist die Unterstützung durch VWD jedoch gering zu bewerten, da die hauptsächliche Erstellung der Klasse händisch im Quellcode erfolgen muss.

Die erstellte Klasse im Lagerverwaltungsprogramm enthält die Methode Get- Data. Diese Methode ist als Funktion deklariert und dient dazu, während der Verwendung der Anwendung die Daten der Bauteile.xml einzulesen und darzustellen. Die .xml Datei enthält die Produkte, die mit Hilfe des Lagerverwaltungsprogramms abgerufen werden können.²²

[...]

¹ vgl. Anhang, Abbildung 1 – Abgrenzung Browser, Server und Web-Applikation, S. VIII

² vgl. http://www.arkana.de/wissenswertes/webapplication.php, Zugriff: 04.03.2008, 11:35 Uhr

³ vgl. Thiemann, U.: Webseiten programmieren lernen mit Visual Web Developer, S.39

⁴ vgl. http://www.galileocomputing.de/openbook/asp/asp010000.htm#Rxxasp01282WieNETundASPNETfunktionieren, Zugriff : 04.03.2008, 12:35 Uhr

⁵ vgl. Thiemann, U.: a.a.O., S.38

⁶ erhältlich unter: http://www.microsoft.com/germany/msdn/vstudio/products/express/- archiv/vwd/default.mspx

⁷ vgl. http://www.microsoft.com/germany/msdn/vstudio/products/express/archiv/vwd/default.mspx, Zugriff 04.03.2008, 14:44 Uhr

⁸ vgl. Wussow, A.: Visual Web Developer 2005, S.10

⁹ vgl. Wussow, A.: a.a.O., S.24

¹⁰ vgl. Thiemann, U.: a.a.O., S.21

¹¹ vgl. Wussow, A.: a.a.O., S.12

¹² vgl. Anhang, Abbildung 2 – Benutzeroberfläche VWD, S. IX

¹³ vgl. Neumann, J. und Loje, N.: Microsoft Visual Web Developer 2005 Express Edition – Ein Einsteiger-Tutorial

¹⁴ vgl. Thiemann, U.: a.a.O., S.48-64

¹⁵ vgl. Anhang, Abbildung 3 – Oberfläche des Lagerverwaltungsprogramms, S. IX

¹⁶ vgl. Anhang, Abbildung 4 – Oberfläche in der Entwurfsansicht, S. X

¹⁷ vgl. Anhang, Abbildung 5 – Oberflächengestaltung des Lagerverwaltungsprogramms I, S.XI

¹⁸ vgl. Anhang, Abbildung 6 – Oberflächengestaltung des Lagerverwaltungsprogramms II, S.XII

¹⁹ vgl. Thiemann, U.: a.a.O., S.37-38, S.143-146

²⁰ vgl. Anhang, Abbildung 7 – Verwendung der .NET Klassenbibliothek, S. VIII

²¹ vgl. Anhang, Abbildung 8 – Verwendung der .NET Klassenbibliothek II, S. XIII

²² vgl. Anhang, Abbildung 9 – Erstellung eigener Klassen, S. XIV