Visual Tools und Sprachen > Visual Studio 2005

Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial
Veröffentlicht: 09. Januar 2006
Von Jörg Neumann und Neno Loje

Downloads:
Eine Zusammenstellung der im Tutorial erwähnten Demo-Files und Beispieldatenbanken finden Sie als Download bei "www.codezone.de"; dort ist auch das komplette Tutorial als Word-Dokument verfügbar.

Einsteiger-Tutorial: Word-Datei und Demos


 

Auf dieser Seite

 

Die Oberfläche kennen lernen. 3

Der Arbeitsbereich. 5

Die Toolbox. 5

Anpassen der Design-Oberfläche. 6

Formatieren von Text 9

Erstellen von Tabellen. 11

Der Projektmappen-Explorer 12

Das Eigenschaftenfenster 12

Erstellen einer Beispielanwendung. 15

Erstellen der Startseite. 15

Anlegen eines neuen Projektes. 16

Formatieren der Seite. 17

Einfügen der Elemente. 18

Testen der Seite. 22

Erstellung einfacher Listen. 25

Erstellen einer Masterseite. 25

Erstellen der Seite. 28

Erstellen des Kopfbereichs. 30

Erstellen der Film-Tabelle. 31

Einsatz einer Datenbank. 34

Verbinden mit der Datenbank. 34

Bearbeiten der Daten. 37

Erstellen der Seite. 39

Einfügen der Tabelle auf der Seite. 39

Erstellung einer Download-Liste. 48

Daten eingeben. 48

Dateien hinzufügen. 49

Seite erstellen. 49

Tabelle einfügen. 49

Zusammenfassung. 56

Erstellung eines Gästebuchs. 57

Seiten erstellen. 57

Verbindung zur Datenbank herstellen. 58

Ansicht anpassen. 60

Felder ausschließen. 64

Weiterleitung definieren. 70

Erstellung der Gästebuchseite. 72

Tabelle konfigurieren. 72

Vorlagen entwerfen. 74

Datenbindungen zuweisen. 76

Kopfbereich anpassen. 78

Sortierung einstellen. 79

Zusammenfassung. 80

E-Mails versenden. 81

Clientseitig vs. Serverseitig. 81

Erstellen der Beispielseite. 82

Versenden der E-Mail 84

Zusammenfassung. 87

Übertragen der Seite auf einen Server 88

Übertragen der Dateien. 88

Zusammenfassung. 90


Die Oberfläche kennen lernen

Bevor es um die Erstellung eines konkreten Projektes geht, werden im folgenden Kapitel zunächst die wichtigsten Bestandteile von Visual Web Developer 2005 Express Edition beschrieben.

Starten Sie zunächst Visual Web Developer und wählen Sie aus dem Menü Datei den Eintrag Neue Website aus. Daraufhin erscheint der folgende Dialog:

 

 

Im oberen Bereich können Sie den Typ der Anwendung, die Sie erstellen wollen auswählen. Hierbei finden Sie unter "Visual Studio installierte Vorlagen" Projektvorlagen, während "Meine Vorlagen" auf benutzerdefinierte Vorlagen verweist. Darüber hinaus haben Sie über den Eintrag "Onlinevorlagen suchen…" die Möglichkeit, nach Vorlagen im Internet zu suchen.

Im unteren Bereich können Sie angeben, wo Ihre Seiten gespeichert werden kann. Hierbei haben stehen Ihnen die Optionen "Dateisystem", "HTTP" (Internet per HTTP-Upload) und "FTP" (Internet per FTP-Upload) zu Verfügung.

Zusätzlich können Sie unter "Sprache" zwischen den Programmiersprachen "Visual Basic" und "Visual C#" wählen.

Fürs erste wählen Sie die Vorlage "ASP.NET Website", "Dateisystem" und "Visual Basic" aus. Nachdem Sie auf "OK" geklickt haben, wird die Seite zunächst in der Code-Ansicht geöffnet.

 

 

Wechseln Sie über die Schaltflächen im unteren Bereich des Fensters in die Entwurfsansicht.

 

 

Jetzt erscheint der Designer, über den Sie die Seite grafisch bearbeiten können. Die Oberfläche sollte nun in etwa wie folgt aussehen:

 

Der Arbeitsbereich

In der Mitte der Oberfläche befindet sich das Arbeitsfenster, auf dem die Seite entworfen und kodiert wird. Es besteht aus mehreren Sichten, die über Karteireiter am unteren Fensterrand gewechselt werden können.

Der Reiter "Entwurf" bietet einen sog. "WYSIWYG"-Editor (what you see is what you get), mit dem die Seite entworfen wird. Dabei entspricht die Darstellung fast vollständig der, die später im Browser angezeigt wird.

Im Reiter "Quelle" haben Sie die Möglichkeit den generierten HTML-Code einzusehen und zu verändern, sowie Programmcode für die Seite zu hinterlegen.

Daneben werden, je nach Auswahl, dynamisch Schaltflächen eingeblendet, mit denen Sie während des Entwurfs zwischen den verschiedenen HTML-Tags der Seite navigieren können.

Die Toolbox

Auf der linken Seite befindet sich die Toolbox, die alle Elemente beinhaltet, die für den Entwurf einer Seite benötigt werden. Sie ist in die folgenden Bereiche aufgeteilt:

 

Bereich

Beschreibung

Standard

Enthält .NET-Steuerelemente, die auf dem Server ausgeführt werden.

Daten

Enthält Steuerelemente, die für datengebundene Seiten benötigt werden.

Validierung

Enthält Steuerelemente für die Validierung von Benutzereingaben.

Navigation

Enthält Steuerelemente für die Navigation auf und zwischen Seiten.

Anmelden

Enthält Steuerelemente für das Anmelden an geschützte Seiten.

WebParts

Enthält WebPart-Elemente, die auf Sharepoint-Portalen zum Einsatz kommen.

HTML

Enthält statische HTML-Elemente, die auf dem Client verarbeitet werden.

Allgemein

Enthält den lediglich den "Zeiger", der angewählt werden kann, um den Mauszeiger wieder in seinen Standardzustand zu bringen.

Zum Wechseln der Bereiche klicken Sie einfach auf das entsprechende Wort.

Um ein Element aus der einzufügen, klicken Sie das entsprechende Element an und ziehen es aus der Toolbox in den Arbeitsbereich.

Anpassen der Design-Oberfläche

Die Darstellung des Arbeitsbereiches kann über das "Ansicht"-Menü verändert werden. Neben dem Wechseln der Sichten, können auch zusätzliche Elemente für den Designer angezeigt werden.

So kann es unter Umständen sinnvoll sein, die dargestellten Elemente mit kleinen Bildzeichen versehen zu lassen, die Informationen über den generierten HTML-Code anzeigen. Im folgenden Beispiel wird dies sichtbar.

Expandieren Sie den "HTML"-Bereich in der Toolbox und ziehen Sie das Element "Input (Text)" mit der Maus auf den Arbeitsbereich.  Das Design-Fenster sieht nun in etwa so aus:

 

 

Nun aktivieren Sie im Menü "Ansicht" den Eintrag "Details".

 

 

Um die eingefügten Elemente werden nun kleine Textmarken gesetzt, die den umschließenden HTML-Tag beinhalten. So wissen Sie auch in der Design-Ansicht, ob sich ein Element innerhalb eines bestimmten Tags befindet, ohne in die HTML-Ansicht wechseln zu müssen.

Über den Menüpunkt "Sichtbare Rahmen" können Sie bestimmen, das Tabellen in der Design-Ansicht immer mit einem Rahmen versehen werden sollen ­ auch wenn der Tabelle kein Rahmen zugewiesen wurde. Dies sorgt für eine bessere Übersicht beim Entwurf und erleichtert das Einfügen neuer Elemente.

Wenn der Menüpunkt "Nicht visuelle Steuerelemente" aktiviert ist, so sehen Sie auch Elemente, die nur zur Entwurfszeit ein Erscheinungsbild haben und zur Laufzeit unsichtbar sind, wie die z.B. bei Steuerelementen für den Datenzugriff der Fall ist.

Über das "Ansicht"-Menü können darüber hinaus eine Reihe von Hilfsfenstern ein- und ausgeblendet werden. Die folgende Tabelle gibt eine kurze Beschreibung.

 

Menüpunkt

Beschreibung

Datenbank-Explorer

Dient zur Verwaltung von Datenbankverbindungen.

Projektmappen-Explorer

Dient zur Navigation der verschiedenen Dateien eines Projektes.

Lesezeichenfenster

Zeigt Lesenzeichen an, die in der Code-Ansicht erstellt wurden.

Klassenansicht

Zeigt das Projekt in der Klassenansicht an.

Dokumentengliederung

Zeigt eine hierarchische Ansicht der aktiven Seite an.

Objektbrowser

Katalog der eingebundenen Assemblys, sowie dessen Klassen.

Fehlerliste

Zeigt eine Liste aufgetretener Fehler der aktiven Seite an.

Ausgabe

Zeigt Informationen an, die von der Seite zur Laufzeit ausgegeben werden.

Eigenschaftenfenster

Zeigt die Eigenschaften des selektieren Elements an.

Aufgabenliste

Dient zur Verwaltung von Aufgaben.

Toolbox

Enthält Steuerelemente zur Web-Seite-Erstellung.

Suchergebnisse

Zeigt die Ergebnisse einer Suche an.

Weitere Fenster

Zeigt zusätzliche Fenster für Suchergebnisse und anderes an.

Symbolleisten

Zeigt zusätzliche Toolbars an.

Ganzer Bildschirm

Zeigt das aktive Dokument im Vollbildmodus an.

Eigenschaftenseiten

Zeigt Eigenschaftenseiten für das gewählte Element an (sofern vorhanden).

Aktualisieren

Aktualisiert die Anzeige des aktiven Dokuments.

Formatieren von Text

Über das Menü "Format" kann der jeweils markierte Text bzw. das markierte Element formatiert werden. Zur Auswahl stehen die folgenden Menüpunkte:

 

Hauptmenü

Untermenü

Beschreibung

Stil

 

Öffnet einen Dialog in dem Stile definiert werden können.

Vordergrundfarbe

 

Öffnen eine Dialog mit dem die Vordergrundfarbe festgelegt werden kann.

Hintergrundfarbe

 

Öffnen eine Dialog mit dem die Hintergrundfarbe festgelegt werden kann.

Schriftart

Fett

Stellt den Text fett dar.

Kursiv

Stellt den Text kursiv dar.

Unterstrichen

Stellt den Text unterstrichen dar.

Hochgestellt

Stellt den Text hochgestellt dar.

Tiefgestellt

Stellt den Text tiefgestellt dar.

Blocksatz

Links

Richtet den Text links aus.

Zentriert

Richtet den Text mittig aus.

Rechts

Richtet den Text rechts aus.

Blocksatz

Formatiert den Text als Blocksatz.

In Hyperlink konvertieren

 

Wandelt das markierte Element in einen Hyperlink um.

Lesezeichen einfügen

 

Fügt ein Lesezeichen ein.

Ausrichtung

Links

Richtet die markierten Elemente linksbündig aus.

Zentriert

Richtet die markierten Elemente zentriert aus.

Rechts

Richtet die markierten Elemente rechtsbündig aus.

Open

Richtet die markierten Elemente oberhalb aus.

Mitte

Richtet die markierten Elemente mittig aus.

Unten

Richtet die markierten Elemente unterhalb aus.

Am Raster

Richtet die markierten Elemente am Gitternetz aus.

Größe angleichen

Breite

Setzt bei den markierten Elementen die gleiche Breite.

Höhe

Setzt bei den markierten Elementen die gleiche Höhe.

Beides

Setzt bei den markierten Elementen die gleiche Breite und Höhe.

Größe an Raster anpassen

Passt die Größe der markierten Elemente dem Gitternetz an.

Horizontaler Abstand

Angleichen

Gleicht den horizontalen Abstand der markierten Elemente an.

Vergrößern

Vergrößert den horizontalen Abstand der markierten Elemente.

Verkleinern

Vermindert den horizontalen Abstand der markierten Elemente.

Entfernen

Entfernt den horizontalen Abstand der markierten Elemente.

Vertikaler Abstand

Angleichen

Gleicht den vertikalen Abstand der markierten Elemente an.

Vergrößern

Vergrößert den vertikalen Abstand der markierten Elemente.

Verkleinern

Vermindert den vertikalen Abstand der markierten Elemente.

Entfernen

Entfernt den vertikalen Abstand der markierten Elemente.

Reihenfolge

In den Vordergrund

Bring das markierte Element in den Vordergrund.

In den Hintergrund

Bring das markierte Element in den Hintergrund.

Bei Anwahl des "Stil"-Menüpunktes öffnet sich der "Stil-Generator"-Dialog.

Über diesen können Sie die verschiedensten Stileigenschaften für das selektierte Element festlegen. Hierzu wählen Sie aus dem linken Bereich des Fensters die gewünschte Kategorie und passen auf der rechten Seite die entsprechenden Attribute an.

Zur Auswahl stehen die folgenden Kategorien:

 

Kategorie

Beschreibung

Schriftart

Enthält Attribute der Schrift.

Hintergrund

Hier können Hintergrundbild und Farbe definiert werden.

Text

Bestimmt Textfluss und Ausrichtung.

Position

Dient zur Definition von Positionsangaben.

Layout

Enthält allgemeine Layout-Eigenschaften.

Konturen

Dient zur Definition von Tabellenrahmen.

Listen

Dient zur Definition von Listenstilen.

Andere

Enthält sonstige Attribute.

Erstellen von Tabellen

Über das "Layout"-Menü können Tabellen eingefügt und bearbeitet werden hierfür werden die folgenden Funktionen angeboten:

 

Menüpunkt

Beschreibung

Tabelle einfügen

Fügt eine Tabelle ein.

Ebene einfügen

Fügt einen Layer ein, der als Container für andere Elemente dienen kann.

Einfügen

 

Spalte nach links

Fügt in der selektierten Tabelle eine neue Spalte auf der rechten Seiten ein.

Spalte nach rechts

Fügt in der selektierten Tabelle eine neue Spalte auf der linke Seiten ein.

Zeile oberhalb

Fügt eine neue Zeile oberhalb der selektierten Zeile ein.

Zeile unterhalb

Fügt eine neue Zeile unterhalb der selektierten Zeile ein.

Zelle links

Fügt eine neue Zelle links neben der selektierten Zelle ein.

Zelle rechts

Fügt eine neue Zelle rechts neben der selektierten Zelle ein.

Beschriftung

Fügt eine Kopfzeile in der selektierten Tabelle ein.

Löschen

 

Tabelle

Löscht die markierte Tabelle.

Spalten

Löscht die markierte Spalte.

Zeilen

Löscht die markierte Zeile.

Zellen

Löscht die markierte Zelle.

Auswählen

 

Tabelle

Selektiert die markierte Tabelle.

Spalte

Selektiert die markierte Spalte.

Zeile

Selektiert die markierte Zeile.

Zelle

Selektiert die markierte Zelle.

Größe ändern

 

Zeilengröße ändern

Ändert die Größe der markierten Zeile.

Spaltengröße ändern

Ändert die Größe der markierten Spalte.

Zellen zusammenführen

Verbindet die markierten Zellen.

Positionierung

 

Absolut

Positioniert das markierte Element absolut.

Relativ

Positioniert das markierte Element relativ.

Statisch

Positioniert das markierte Element statisch.

Nicht festgelegt

Positioniert das markierte Element automatisch.

Optionen für automatische Positionierung

Blendet einen Dialog zur Konfiguration der automatischen Positionierung ein.

 

Die Erstellung von Tabellen wird im Kapitel "Anlegen eines Projekts" näher erklärt.

Der Projektmappen-Explorer

Auf der rechten Seite der Oberfläche befindet sich im oberen Bereich der "Projektmappen-Explorer". Er enthält alle Dateien des Projektes. Durch einen Doppelklick auf ein Element, öffnet sich die entsprechende Datei im Arbeitsbereich.

 

 

Der Projektmappen-Explorer bietet über seine Toolbar einige nützliche Befehle an (von rechts nach links):

  • Eigenschaften der gewählten Datei anzeigen.
  • Liste aktualisieren
  • Dateien hierarchisch oder als flache Liste anzeigen.
  • Gewählte Datei in der Code-Ansicht öffnen.
  • Gewählte Datei in der Design-Ansicht öffnen.
  • Gewählte Datei auf einen Web-Server übertragen.
  • ASP.NET-Konfiguration

 

Das Eigenschaftenfenster

Im unteren, rechten Teil der Oberfläche befindet sich das Eigenschaftenfenster. Es zeigt die Eigenschaften des aktuell markierten Elements an und bietet die Möglichkeit, diese zu verändern.

Im unteren Bild werden z.B. die Eigenschaften einer HTML-Seite angezeigt:

 

 

Im oberen Teil des Fensters kann aus einer Auswahlbox der entsprechende Bereich ausgewählt werden, für den die Eigenschaften angezeigt werden sollen. Da in diesem Beispiel im oberen Teil der Eintrag DOCUMENT gewählt wurde, werden im unteren Teil alle Eigenschaften der HTML-Seite angezeigt. Hier kann nun z.B. die Hintergrundfarbe über "BgColor" verändert werden oder der Titel der Seite über "Title" festgelegt werden.

Wird hingegen eine Textbox im Arbeitsbereich markiert, so erscheinen die folgenden Eigenschaften:

 

 

Hier könnte nun z.B. die Breite über "Size" oder die Anzahl der Zeichen, die maximal eingegeben werden dürfen über "MaxLength", zugewiesen werden. Die Änderungen werden daraufhin automatisch im HTML-Text der Seite angepasst.


Top of pageZum Seitenanfang



Erstellen einer Beispielanwendung

Nachdem Sie nun mit Microsoft Visual Web Developer 2005 Express Edition  und dem Aufbau einer ASP.NET-Seiten vertraut sind, kommen wir nun zum praktischen Teil: Der Erstellung einer Beispielanwendung.

Die Beispielanwendung besteht aus den folgenden Bereichen:

  • Einer Liste mit Lieblings-CD’s
  • Einer Liste mit Lieblingsfilmen
  • Einer Download-Liste für Handy-Klingeltöne
  • Einem Gästebuch, in dem die Besucher der Seite etwas schreiben können.
  • Einem E-Mail-Link, über den der Besucher dem Autor der Seite eine Mail schicken kann.

Erstellen der Startseite

In diesem Kapitel erstellen Sie zunächst eine einfache Startseite, von der aus der Benutzer auf die verschiedenen Bereiche der Site navigieren kann. Die Erstellung der einzelnen Bereiche wird dann in den nächsten Kapiteln beschrieben.

Die fertige Startseite soll später wie folgt aussehen:

 

 

Anlegen eines neuen Projektes

Erstellen Sie zunächst auf der Festplatte einen neuen Ordner mit dem Namen "Demo".

Kopieren Sie im Anschluss die folgenden Grafiken in diesen Ordner:

  • Backround.jpg
  • Back.gif
  • CD.gif
  • Guestbook.gif
  • Handy.gif
  • Mail.gif
  • Movies.gif

 

Zum Anlegen der Startseite gehen Sie nun wie folgt vor:

  • Öffnen Sie Microsoft Visual Web Developer 2005 Express Edition und erstellen Sie eine neue Web-Anwendung, wie im vorherigen Kapitel beschrieben.
  • Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Hauptelement und wählen Sie aus dem erscheinenden Kontextmenü den Eintrag "Neues Element hinzufügen" aus.
  • Nun erscheint ein Dialog zum Hinzufügen von Dateien (siehe unten).
  • Wählen Sie das Symbol "Web Form" aus.
  • Im Feld "Name" geben Sie Default.aspx ein
  • Unter "Sprache" wählen Sie "Visual Basic" aus

 

 

Nachdem Sie auf "Hinzufügen" geklickt haben, sieht der Arbeitsbereich in etwa so aus:

 

 

Formatieren der Seite

Zuerst weisen Sie der Seite einen Titel zu, der später in der Titelleiste des Browsers angezeigt werden soll. Dazu wählen Sie im Eigenschaftenfenster in der Auswahlbox den Eintrag "DOCUMENT" aus und geben nun unter "Title" einen beliebigen Titel ein.

 

 

Nun weisen Sie der Seite ein Hintergrundbild zu, um das Aussehen etwas aufzupeppen. Geben Sie dazu im Eigenschaftenfenster im Eintrag "Background" den Dateinamen des Hintergrundbilds ("Background.jpg") ein.

Einfügen der Elemente

Kommen wir nun zum eigentlichen Aufbau der Seite.

  • Schreiben Sie in den oberen Bereich der Seite den Text "Willkommen auf meiner Homepage!".
  • Markieren Sie den Text und wählen Sie aus der Schriftauswahlbox die Schriftart "Verdana".



  • Wählen Sie aus der   die Schaltfläche "Fett" um die Schrift fett darzustellen.
  • Nun gehen Sie mit dem Cursor an das Ende des Textes und drücken die "Enter"-Taste.
  • Jetzt fügen Sie eine Tabelle ein. Hierzu wählen Sie aus dem Menü "Layout" den Punkt "Tabelle einfügen". Im nun erscheinenden Fenster geben Sie die abgebildeten Werte ein:



  • Der Arbeitsbereich sollte nun in etwa so aussehen:



  • Markieren Sie die Tabelle und ändern Sie im Eigenschaftenfenster die Eigenschaft "Border" auf 0. Dies bewirkt, dass der Tabellenrahmen später im Browser nicht angezeigt wird.
  • Jetzt werden die Zellen jeder Tabellenzeile mit jeweils einem HyperLink gefüllt. In der linken Spalte soll hierbei ein Symbol und in der rechten der entsprechende Text dargestellt werden. Dazu wählen Sie aus dem "Standard"-Bereich der Toolbox zuerst ein HyperLink-Element aus und ziehen es in die erste Zelle der Tabelle. Suchen Sie nun im Eigenschaftenfenster nach der Eigenschaft ImageUrl und weisen ihr das Bild CD.gif zu. Das Resultat sollte nun so aussehen:



  • Nun ziehen sie ein weiteres HyperLink-Control aus der Toolbox in die rechte Spalte, ändern die Schriftart auf "Verdana" und formatieren es fett. Ändern Sie außerdem die Schriftgröße auf den 10 (in der Auswahlbox neben der Schriftauswahl). Der anzuzeigende Text kann über die "Text"-Eigenschaft im Eigenschaftenfenster geändert werden. Diesen Text sollten Sie bei beiden Hyperlink-Elementen ebenfalls auch der ToolTip-Eigenschaft zuweisen. Dadurch erscheint zur Laufzeit ein kleines Tipp-Fenster, wenn der Benutzer mit der Maus über die Links fährt.



  • Anschließend weisen Sie den beiden HyperLink-Elementen die URL zu, zu der navigiert werden soll, wenn der Benutzer auf den Link klickt. Dazu tragen Sie im Eigenschaftenfenster unter NavigateUrl den Text CDs.aspx ein. Dies ist die Datei, die Sie später für die Anzeige der CD-Liste erstellen.

Fügen Sie nun ­ nach dem beschriebenen Muster ­ alle weiteren Elemente in die Tabelle ein. Die Dateinamen der Bilder, Link-Texte und URL’s entnehmen Sie der folgenden Tabelle:

 

Bild

Text

URL

Movies.gif

Meine Lieblingsfilme

Movies.aspx

Handy.gif

Handy-Klingeltöne

Handy.aspx

Guestbook.gif

Gästebuch

Guestbook.aspx

Mail.gif

E-Mail schreiben

Mail.aspx

 

Bevor Sie jedoch noch nicht die beschriebenen Seiten angelegt haben, sollten Sie die URLs zunächst mit Default.aspx füllen, damit es beim Testen der Seite zu keinem Fehler kommt. Wenn Sie dann in den späteren Kapiteln die Seiten erstellt haben, ändern Sie die Startseite entsprechend.

 

Die fertige Seite sollte am Ende so aussehen wie in der Abbildung am Anfang des Kapitels dargestellt.

Testen der Seite

Nachdem nun alle notwendigen Schritte zur Erstellung der Startseite abgearbeitet wurden, können Sie das Ergebnis im Browser testen. Hierzu klicken Sie mit der rechten Maustaste in den Hintergrund der Seite und wählen aus dem erscheinenden Menü den Punkt "In Browser anzeigen". Alternativ können Sie auch die gesamte Anwendung in Debug-Modus starten. Hierzu wählen Sie aus dem "Debug"-Menü den Eintrag "Debuggen starten".

 

 

Daraufhin startet Microsoft Visual Web Developer 2005 Express Edition  seinen lokalen Web Server, der die Seite verarbeitet und im Browser anzeigt. Signalisiert wird dies durch eine Sprechblase im rechten Bereich der Startleiste.

 

 

Wenn Sie mit der rechten Maustaste auf das Symbol klicken, erscheint ein Menü, aus dem Sie die folgenden Punkte auswählen können:

 

·         Im Web Browser öffnen
Zeigt die aktuelle Seite im Browser an.

·         Beenden
Beendet den Web Server.

·         Details anzeigen
Öffnet einen Dialog, in dem die aktuellen Einstellungen begutachtet werden können, wie hier zu sehen:

 

Nun öffnet sich der Internet Explorer und zeigt die fertige Seite an:

 


Top of pageZum Seitenanfang



Erstellung einfacher Listen

In diesem Kapitel erstellen Sie die Seite mit Ihren Lieblingsfilmen. Die Filme werden dabei in einem GridView-Web-Control angezeigt. Die fertige Seite soll später in etwa so aussehen:

 

Erstellen einer Masterseite

Alle Seiten der Web-Anwendung haben im unteren Bereich einen Link, über den der Benutzer auf die Startseite zurückkehren kann. Um nun zu vermeiden diesen auf jeder Seite erneut erstellen zu müssen, kann eine sogenannte Masterseite erstellt werden, die jede Elemente enthält, die auf mehreren Seiten dargestellt werden. Außerdem ermöglichen Masterseiten das einfache Ändern von allgemeinen Elementen im Nachhinein.

Zum Anlegen der Masterseite gehen Sie wie folgt vor:

  • Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Hauptelement und wählen Sie aus dem erscheinenden Kontextmenü den Eintrag "Neues Element hinzufügen" aus.
  • Nun erscheint ein Dialog zum Hinzufügen von Dateien (siehe unten).
  • Wählen Sie das Symbol "Masterseite" aus.
  • Übernehmen Sie den vorgeschlagenen Namen "MasterPage.master" und die Sprache "Visual Basic".
  • Klicken Sie die Option "Code in eigener Datei platzieren" an, der bewirkt, dass die Seite in einer separaten Datei gespeichert wird.

 

 

Nachdem Sie auf "Hinzufügen" geklickt haben, sieht der Arbeitsbereich in etwa so aus:

 

 

Im oberen Bereich wurde ein sogenannter "Content Place Holder" eingefügt, ein Platzhalter, in den später der Inhalt der Seite kommt. Nun können Sie ober- oder unterhalb des Platzhalters Elemente einfügen, die auf jeder Seite angezeigt werden, die mit dieser Masterseite verknüpft sind.

 

Zum Konfigurieren der Masterseite gehen Sie wie folgt vor:

  • Wechseln Sie im Eigenschaftenfenster in den "DOCUMENT"-Bereich aus.
  • Geben Sie in der Eigenschaft "Background" die Datei Background.jpg an.
  • Ziehen Sie ein Horizontal Rule-Element aus dem HTML-Bereich der Toolbox auf den Arbeitsbereich und positionieren es unterhalb des Platzhalters.
  • Darunter fügen Sie über das "Layout/Tabelle einfügen"-Menü eine Tabelle mit zwei Spalten und einer Zeile ein (Weite 217, Höhe 41).
  • Klicken Sie nun in die erste Spalte und fügen Sie aus dem "Standard"-Bereich der Toolbox ein HyperLink-Element ein.
  • Weisen Sie dem Element über die "ImageUrl"-Eigenschaft den Namen der Grafik (Back.gif) zu.
  • Fügen Sie in die zweite Spalte ein weiteres HyperLink-Element ein und weisen ihm über die Text-Eigenschaft die Beschriftung "Zurück zur Startseiten" zu.
  • Formatieren Sie den Text wie folgt: Schriftart "Verdana", Größe 10, fett.

 

Die fertige Seite sollte nun wie folgt aussehen:

 

Erstellen der Seite

Nachdem sie die Masterseite angelegt haben, können Sie nun die eigentliche Seite erstellen und mit der Masterseite verknüpfen. Hierzu gehen Sie wie folgt vor:

  • Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Hauptelement und wählen Sie aus dem Kontextmenü den Eintrag "Neues Element hinzufügen"
  • Wählen Sie im nun erscheinenden Dialog den Eintrag "Web Form" aus.
  • Geben Sie der Seite den Namen Movies.aspx.
  • Aktivieren Sie die Option "Code in eigener Datei platzieren".
  • Durch Aktivieren der Option "Masterseite auswählen", bestimmen Sie, dass die Seite mit einer Masterseite verknüpft werden soll.

 

 

Nachdem Sie auf die "Hinzufügen"-Schaltfläche geklickt haben, öffnet sich ein Dialog, in dem Sie die gewünschte Masterseite auswählen können.

 

 

Wenn Sie mit "OK" bestätigt haben, öffnet sich die Seite. Wenn Sie in den Entwurfsmodus wechseln, sehen Sie, wie der Inhalt der Masterseite eingefügt wurde. Alles, was Sie nun auf der Seiten erstellen wollen, müssen Sie in das "Content Place Holder"-Element einfügen.

 

 

Wechseln Sie nun im Eigenschaftenfenster in den Bereich "DOCUMENT" und weisen der Seite über die "Title"-Eigenschaft der Seite den Titel "Meine Lieblingsfilme" zu.

Erstellen des Kopfbereichs

Für die Erstellung des Kopfbereichs der Seite, die den Titel und das Symbol enthält, gehen Sie wie folgt vor:

  • Klicken Sie in den Arbeitsbereich und fügen Sie über das "Layout/Tabelle einfügen"-Menü eine Tabelle mit zwei Spalten und einer Zeile ein (Weite 168, Höhe 68).
  • Fügen Sie in die erste Spalte ein Image-Element aus dem HTML-Bereich der Toolbox ein.
  • Weisen Sie dem Bild über die "Scr"-Eigenschaft den Namen der Grafik ("Movies.gif") zu.
  • Fügen Sie in die zweite Spalte ein Label-Element aus dem Standard-Bereich der Toolbox ein.
  • Ändern Sie den Text in "Meine Lieblingsfilme".
  • Formatieren Sie den Text wie folgt: Schriftart "Verdana", Größe 3, fett.
  • Vergrößern Sie ggf. die Tabelle, so dass der Titel nicht in eine neue Zeile umgebrochen wird.
  • Ziehen Sie ein Horizontal Rule-Element aus dem HTML-Bereich der Toolbox auf den Arbeitsbereich und positionieren ihn unterhalb der Tabelle.
  • Fügen Sie eine Leerzeile durch Drücken der "Enter"-Taste ein.

 

Die Seite sollte nun in etwas so aussehen:

 

Erstellen der Film-Tabelle

Nachdem der Aufbau der Seite steht, können Sie nun mit dem Erstellen der Film-Tabelle beginnen. Dazu gehen Sie wie folgt vor:

  • Ziehen Sie das "Table"-Steuerelement aus dem "Standard"-Bereich der Toolbox auf den Arbeitsbereich und positionieren es zwischen den beiden Linien.
  • Weisen Sie der Tabelle über die "BackColor"-Eigenschaft die "Web"-Farbe "LightCyan" zu.
  • Den Tabellenrahmen formatieren Sie wie folgt:

Eigenschaft

Wert

BorderColor

blue

BorderStyle

Solid

BorderWidth

1

 

  • Setzen Sie die Eigenschaften "CellPadding" und "CellSpacing" auf 0, um den Abstand zwischen den Tabellenzellen zu entfernen. Dies ist später für die Darstellung der Rahmen um die Zellen wichtig.
  • Wählen Sie im Eigenschaftenfenster den Eintrag "Rows" aus und klicken dort auf die Schaltfläche mit den drei Punkten.

 

Nun öffnet sich ein Dialog mit dem Sie die Zeilen der Tabelle bearbeiten können.

  • Klicken Sie auf die Schaltfläche "Hinzufügen", um eine neue Zeile zu erstellen. Auf der linken Seite können Sie nun die Eigenschaften der Zeile bearbeiten.
  • Die erste Zeile ist die Titelzeile in der Tabelle und wird wie folgt formatiert:

 

Eigenschaft

Wert

BackColor

blue

BorderColor

blue

BorderStyle

Solid

BorderWidth

1

Font

Verdana

Bold

true

ForeColor

White

Width

300

 

Nun werden die einzelnen Spalten der Zeile erstellt. Dazu wählen Sie die Eigenschaft "Cells" an und klicken auf die Schaltfläche mit den drei Punkten. Es erscheint ein Dialog, ähnlich dem der Zeilen, in dem Sie die einzelnen Spalten erstellen und formatieren können.

Führen Sie dazu die folgenden Schritte aus:

  • Klicken Sie auf die Schaltfläche "Hinzufügen" um eine neue Spalte anzulegen.
  • Tragen Sie in der Eigenschaft "Text" den Spaltentitel "Film" ein.
  • Formatieren Sie den Rahmen wie folgt:

Eigenschaft

Wert

BorderColor

blue

BorderStyle

Solid

BorderWidth

1

     

  • Erstellen Sie eine weitere Spalte, weisen Sie ihr den Text "Darsteller" zu und formatieren den Rahmen wie in der ersten Spalte.
  • Schließen Sie den Dialog durch Klicken auf "OK".

 

Nun befinden Sie sich wieder im Zeilen-Dialog, in dem Sie nun die Zeilen für die einzelnen Filme anlegen. Hierbei müssen Sie die Zeilen nur mit "Hinzufügen" anlegen und brauchen keine weiteren Formatierungen vorzunehmen.

Für jede Zeile müssen wieder zwei Spalten angelegt werden, die nun jeweils mit dem Titel des Films und deren Darsteller gefüllt werden. Die Formatierung der Spalten sieht dabei wie folgt aus:

 

Eigenschaft

Wert

BorderColor

blue

BorderStyle

Dotted

BorderWidth

1

In der "Titel"-Spalte wird die Schrift zusätzlich in fett dargestellt ("Bold"-Eigenschaft unter "Font").

Wenn Sie nun die Dialoge mit "OK" schließen, können Sie sich das Ergebnis Ihrer Arbeit ansehen. Das Resultat sollte in etwa so aussehen:

 

 

Öffnen Sie die Seite im Browser, indem Sie mit der rechten Maustaste in den Hintergrund klicken und aus dem Menü den Punkte "In Browser anzeigen" auswählen. Prüfen Sie, ob alles korrekt formatiert ist und ob die Navigation zur Startseite funktioniert.


 

Top of pageZum Seitenanfang



Einsatz einer Datenbank

Wenn sich der Inhalt einer Web-Seite häufig ändert, bietet sich der Einsatz einer Datenbank an. In ihr werden alle benötigten Daten gespeichert und gepflegt. Dies hat nicht nur den Vorteil der einfachen Pflege, sondern auch der klaren Trennung von Web-Seite und Daten. Auch können verschiedene Seiten auf den gleichen Datenbestand zugreifen, ohne dass die Daten mehrfach eingegeben werden müssen. Bei Änderungen sind auf diese Weise alle Seiten automatisch auf dem neusten Stand.

Für die Filmseite finden Sie auf der CD die Microsoft Access-Datenbank "DemoDb.mdb", die Sie mit Ihren Filmen füllen können. Das Ergebnis dieses Kapitels sollte in etwa wie folgt aussehen:

 

 

Verbinden mit der Datenbank

Um die Daten auf der Web-Seite anzeigen zu können, müssen Sie in Microsoft Visual Web Developer 2005 Express Edition  zunächst eine Verbindung zur Datenbank herstellen. Hierfür wählen im Fenster "Projektmappen-Explorer" den Bereich "Datenbank-Explorer" an.

 

 

Klicken Sie auf das Symbol  um eine neue Verbindung zu erstellen. Daraufhin erscheint der folgende Dialog:

 

 

Wählen Sie den Punkt "Microsoft Access-Datenbankdatei" und klicken Sie auf "Weiter". Nun erscheint ein weiterer Dialog, in dem Sie den Dateinamen der Datenbank angeben.

 

 

Geben Sie hier den Pfad zur "DemoDb.mdb" an. Um zu überprüfen, ob alle Werte korrekt angegeben wurden, klicken Sie zuletzt auf die Schaltfläche "Testverbindung", um eine Verbindung zur Datenbank herzustellen. War der Test erfolgreich, gibt Microsoft Visual Web Developer 2005 Express Edition  die Meldung "Die Testverbindung war erfolgreich" aus.

Nachdem Sie das Fenster mit "OK" geschlossen haben, sieht der Datenbereich nun wie folgt aus:

 

 

Bearbeiten der Daten

Nun können Sie Ihre Filme in der Datenbank erfassen. Hierfür klicken Sie mit der rechten Maustaste auf den Eintrag "Tabellen" und wählen aus dem Menü den Punkt "Neue Abfrage" aus. Hierdurch erstellen Sie eine neue Datenbankabfrage.

 

 

Im nun erscheinenden Fenster wählen Sie die Tabelle "tbCD" aus und klicken auf "Hinzufügen". Da Sie keine weiteren Tabellen in der Abfrage verwenden wollen, schließen Sie den Dialog über "Schließen". Der Arbeitsbereich sieht nun wie folgt aus:

 

 

In der oberen Hälfte des Bildschirms sehen Sie die ausgewählte Tabelle. Hier klicken Sie auf den Eintrag "* (Alle Spalten)", um alle Felder auszuwählen. Um die Abfrage auszuführen klicken Sie in der Toolbar die Schaltfläche "SQL ausführen" aus.

 

 

Das Ergebnis der Abfrage wird daraufhin im unteren Bereich des Fensters angezeigt. Hier können Sie nun die vorhandenen Daten ändern, löschen oder neue hinzufügen.

 

Erstellen der Seite

Nachdem alle Vorbereitungen getroffen sind, können Sie sich jetzt dem Entwurf der Seite zuwenden. Dazu erstellen Sie eine neue ASP.NET-Datei mit dem Namen CDs.aspx. Weisen Sie ihr, wieder die Masterseite zu und geben der Seite den Titel "Meine CD’s". Fügen Sie den Kopfbereich ein, wie dies im letzten Kapitel bereits beschrieben wurde. Als Grafik für den Kopfbereich verwenden Sie die Datei CD.gif.

Einfügen der Tabelle auf der Seite

Für die Darstellung der Daten ziehen Sie das GridView-Steuerelement aus dem Bereich "Daten" der Toolbox auf den Arbeitsbereich. Daraufhin wird neben der Tabelle auch ein Konfigurationsfenster angezeigt, über das Sie die Datenbindung und Darstellung anpassen können. Wählen Sie hierin unter "Datenquelle auswählen" den Punkt "<Neue Datenquelle>" aus.

Daraufhin erscheint ein Konfigurationsdialog, in dem Sie die Datenbankverbindung angeben. Wählen Sie aus der Liste den Punkt "Access-Datenbank" und geben Sie als Namen "DemoDb" an.

Nachdem Sie den Dialog bestätigt haben, öffnet sich ein Assistent, der bei der Konfiguration der Tabelle behilflich ist. Zunächst werden Sie nach dem Pfad der Datenbankdatei gefragt. Hier geben Sie "~/App_Data/DemoDb.mdb" an.

 

 

Im nächsten Schritt definieren Sie die Datenbankabfrage, die die darzustellenden Felder enthält. Hier wählen Sie die Felder "Interpret" und "Titel" aus.

 

 

Über die "ORDER BY"-Schaltfläche haben Sie außerdem die Möglichkeit eine Sortierreihenfolge festzulegen. Bei Anwahl öffnet sich ein Dialog, indem Sie angeben können, nach welchen Feldern und in welcher Reihenfolge die Sortierung erfolgen soll. Wählen Sie hier das Feld "Interpret" aus und übernehmen Sie die Vorgabe "Aufsteigend", die für eine aufsteigende Sortierung steht.

 

 

Im nächsten Schritt haben Sie die Möglichkeit sich das Ergebnis der Abfrage anzuschauen. Hierzu wählen Sie die Schaltfläche "Test Query" aus.

 

 

Nachdem Sie den Assistenten über die "Fertig stellen"-Schaltfläche beendet haben, sieht Ihr Arbeitsbereich nun wie folgt aus:

 

 

Um das Konfigurationsmenü zu öffnen, klicken Sie mit der Maus auf den Pfeil der in der linken, oberen Ecke der Tabelle angezeigt wird:

 

 

Was nun noch fehlt, ist der Tabelle eine ansprechende Darstellung zu geben. Hierfür wählen Sie aus dem Konfigurationsfenster den Punkt "Autom. Formatierung" an, der den folgenden Dialog öffnet:

 

 

Hier können Sie nun aus verschiedenen vorgefertigten Darstellungstypen auswählen. Wenn Sie die Schaltfläche "Übernehmen" wählen, können Sie den jeweiligen Stil im Arbeitsbereich begutachten, bevor Sie ihn zuweisen.

Darüber hinaus bietet das Konfigurationsfenster die Option "Sortieren aktivieren". Hierüber können Sie festlegen, dass die Einträge der Tabellentitelzeile als Links dargestellt werden. Klickt der Benutzer auf diese, wird die Tabelle nach dem entsprechenden Feld sortiert.

Außerdem kann über "Paging aktivieren" festgelegt werden, dass die Einträge der Tabelle auf mehrere Seiten verteilt werden soll. Hierbei werden – je nach Anzahl – mehrere Seitenzahlen im Fußbereich angezeigt, über die der Benutzer zwischen den Seiten navigieren kann. Bei Umfangreichen Listen macht dies die Seite nicht nur übersichtlicher, sondern beschleunigt auch den Seitenaufbau, da Initial nicht alle Daten aus der Datenbank ermittelt und dargestellt werden müssen, sondern nur ein Teilbereich. Die Anzahl der Datensätze, die pro Seite angezeigt werden sollen, können Sie im Eigenschaftenfenster über den Punkt "PageSize" festlegen.

Die Option "Auswahl aktivieren" bewirkt, dass die Einträge der Tabelle als Links angezeigt werden und somit vom Benutzer angewählt werden können. Dies ist sinnvoll, wenn Sie beispielsweise eine Extraseite je CD erstellen wollen, um zusätzliche Informationen anzuzeigen.

Die fertige Seite könnte nun beispielsweise wie folgt aussehen:

 


Top of pageZum Seitenanfang



Erstellung einer Download-Liste

Ziel dieses Kapitels ist es am Beispiel einer Download-Liste für Handyklingeltöne die Techniken des vorangegangenen Kapitels mit Neuem zu verbinden.

 

 

Daten eingeben

Da die Tabelle tbKlingeltoene bereits in der Datenbank DemoDb.mdb erstellt ist, können Sie sich daran machen diese mit Daten zu füllen. Dazu wählen Sie einfach Ihre Tabelle und klicken im Kontextmenü (rechte Maustaste) auf den Eintrag "Tabellendaten anzeigen".

 

 

 

Wie immer sollten Sie in das Feld "ID" nichts eingegeben, da dieses Feld automatisch von der Datenbank gefüllt wird. Sobald Sie damit beginnen eine Zeile zu füllen wird automatisch eine neue, leere unten angefügt. Im Feld "Dateiname" tragen Sie nur den relativen Dateinamen (ohne Pfad) ein.

 

Wenn Sie fertig sind, klicken Sie auf  um die Änderungen zu speichern und die Ansicht zu beenden.

Dateien hinzufügen

Legen Sie einen Unterordner mit dem Namen "Midi" an und kopieren Sie die Dateien, die sie in die Datenbank eingetragen haben hinein. Wir verwenden in unserem Beispiel MIDI (Musical Instruments Digital Interface)-Dateien, die von neueren Handys als Klingeltöne akzeptiert werden. Trotzdem bietet es die Möglichkeit praktisch beliebige Dateien (Bilder, Texte etc.) zum Download anzubieten.

 

Denken Sie auch daran diesen Ordner mit auf den Internetserver zu kopieren.

Seite erstellen

Bisher haben wir festgelegt, welche Daten angezeigt werden sollen. Nun müssen wir uns darum kümmern, wie die Daten anzuzeigen sind.

 

Erstellen Sie eine neue ASP.NET-Seite (Datei » Neu » Datei… » Web Form) mit dem Namen Handy.aspx und ordnen diese der Masterseite zu.

 

Als Grafik für den Kopfbereich können Sie die Handy.gif verwenden, als Titel beispielsweise "Handy Klingeltöne".

Tabelle einfügen

Um die Daten der Tabelle aus der Datenbank tabellarisch auf der Seite darzustellen, markieren Sie die Tabelle im Datenbank-Exlorer und ziehen diese mit gedrückter, linker Maustaste auf den Arbeitsbereich (Drag & Drop). Es erscheint eine automatisch erstellte Tabelle ("GridView") sowie ein grauer Kasten mit der Aufschrift "AccessDataSource", der für die Verbindung mit der Datenbank verantwortlich ist.

 

Die Seite sollte nun im Entwurf etwa so aussehen:

 

 

Die Tabelle hat dabei das Design der aktuellen Seite übernommen. Um andere vordefinierte Farbschemas zu verwenden wählen Sie im Smart Tag "GridView-Aufgaben" (siehe rote Markierung auf der Abbildung) den Eintrag "Autom. Formatierung…" und entscheiden sich im nachfolgenden Dialog für einen Sie optisch ansprechenden Look. Für dieses Beispiel verwenden wir "Schneebedeckte Kiefer".

 

 

Es empfiehlt sich im Smart Tag die Optionen "Paging aktivieren" und "Sortieren aktivieren" einzuschalten. Durch "Sortieren aktivieren" kann der Benutzer später selber die Tabelle nach einer bestimmten Spalte neu sortieren, indem er die Überschrift anklickt. "Paging aktivieren" zeigt nur maximal die ersten 10 Einträge aus der Datenbank an und fügt am Ende der Tabelle eine Zeile mit den vorhandenen Seiten ein, sodass der Benutzer selber zwischen den "Seiten" blättern kann.

 

 

 

Jetzt stören noch zwei Dinge. Zum einen ist die "ID"-Spalte für den Besucher unserer Seite uninteressant und dient nur für die interne Verwaltung in der Datenbank und zum anderen sollen in der Spalte "Datei" nicht die Dateinamen der Klingeltöne angezeigt werden, sondern ein Link auf die entsprechende Datei erscheinen.

 

 

Um diese Änderungen vorzunehmen, öffnen Sie das Smart Tag der Tabelle und klicken auf "Spalten bearbeiten…". Daraufhin erscheint ein Dialog, in dem die einzelnen Spalten der Tabelle links unten aufgelistet sind.

 

Zuerst wählen Sie die erste Spalte und ändern rechts in der Liste die Eigenschaft "Visible" auf den Wert "False". Die Spalte wird damit dem Betrachter nicht mehr mit angezeigt.

 

 

Als nächstes wollen wir in der Spalte "Dateiname" nicht den Inhalt des Feldes ausgeben, der ja ein Dateiname ist, sondern dem Betrachter einen Link bieten, der auf diese Datei verweist. Dazu wählen wir die dritte Spalte aus und tragen unter "DataFormatString" folgendes ein:

 

<a href="midi/{0}">Download</a>

 

Dies ist normales HTML, welches in jeder Zeile eingefügt wird, wobei {0} für den Datenbankinhalt der Spalte (in unserem Fall: der Dateiname) steht. Der Text "Download" erscheint für den Besucher sichtbar in jeder Zeile.

 

 

Ändern Sie als letzten Schritt noch die Eigenschaft "HeaderText" von "Dateiname" in "Datei", da für den Besucher der Dateiname jetzt nicht mehr erkennbar ist.

 

Die fertige Seite sieht dann etwa so aus:

 

Zusammenfassung

Wie Sie sehen konnten wir mit wenigen Mausklicks eine voll funktionsfähige Seite mit einer datenbankgebundene Tabelle erstellen und dabei diverse Optionen und Formatierungen (Sichtbarkeit/Formatierung der Spalten, Sortier- und Paging-Funktionen) ganz ohne zu Programmieren nach unseren Wünschen anzupassen.


Top of pageZum Seitenanfang



Erstellung eines Gästebuchs

In diesem Kapitel wird die Erstellung eines Gästebuchs vorgestellt, wie man es aus dem Internet kennt. Dieses besteht aus zwei Teilen: der Anzeige der Einträge und einer Eingabemaske um eine neue Eintragung vorzunehmen. Dazu werden wir uns einiger fortgeschrittener Techniken bedienen und die in den vorangegangenen Kapiteln vorgestellten Verfahren voraussetzen.

 

Eine Datenbank für das Gästebuch mit dem Namen tbGaestebuch finden Sie in der DemoDb.mdb. Diesmal brauchen Sie keine Daten in die Tabelle eingeben. Das sollen ja die hoffentlich zahlreichen Besucher Ihres Webauftritts in einer Eingabemaske tun. Diese gilt es als Nächstes zu Erstellen.

Seiten erstellen

Erstellen Sie eine neue ASP.NET Seite mit dem Namen Guestbook.aspx, weisen Sie die Masterseite (MasterPage.master) zu und geben Sie der Seite den Titel "Mein Gästebuch".

 

Als Grafik für den Kopfbereich aus den vorangegangenen Kapiteln, können Sie die Guestbook.gif verwenden.

 

Damit Sie für die Eingabeseite das Design nicht nochmals erstellen müssen, speichern Sie die Seite am besten gleich unter dem Namen GuestbookAdd.aspx ab (Datei » Guestbook.aspx speichern unter…).

 

 

Verbindung zur Datenbank herstellen

Wie im vorangehenden Kapitel ziehen wir die Datenbanktabelle (hier: tbKlingeltoene) aus dem Datenbaank-Explorer mit gedrückter, linker Maustaste auf den Arbeitsbereich. Dies tun wir, damit wir ein fertig konfiguriertes "AccessDataSource"-Objekt erhalten. Allerdings benötigen wir die automatisch angelegte Tabellenansicht nicht, welche Sie bitte mit der rechten Maustaste und dem Menüpunkt "Löschen" wieder entfernen.

 

 

Stattdessen wollen wir eine Reihe von Textfeldern anzeigen in welche der Benutzer die Informationen für seinen Gästebucheintrag eingeben kann. Dabei bedienen wir uns der Komponente "DetailsView", die Sie ebenfalls mit der linken Maustaste aus der Toolbox am linken Rand auf die Seite ziehen können.

 

 

Als ersten Schritt müssen wir der Komponente mitteilen, woher die Daten kommen (bzw. in unserem Fall die Daten geschrieben werden sollen). Dazu wählen Sie im erschienenen Smart Tag "DetailsView-Aufgaben" unter dem ersten Eintrag "Datenquelle auswählen" unsere automatisch konfigurierte "AccessDataSource1" aus. Mehr braucht die Komponente nicht zu wissen um die Daten in unsere Datenbanktabelle zu schreiben.

 

 

Ansicht anpassen

Mit Hilfe von "Autom Formatierung" (im Smart Tag oder rechte Maustaste auf die DetailsView) lässt sich das Farbschema anpassen. Wir verwenden den Stil "Brauner Zucker" in diesem Beispiel.

 

 

Damit die DetailsView, die deutlich mehr kann, als nur Daten in Datenbanktabellen zu schreiben, weiß, was wir von ihr wollen, sind zwei Schritte zu tun. Zum einen muss im Smart Tag die Option "Einfügen aktivieren" angehakt sein, damit das Einfügen neuer Zeilen in die Datenbanktabelle erlaubt wird.

 

 

Zum anderen muss im Eigenschaftenfenster (rechts unten) die Eigenschaft "DefaultMode" auf "Insert" gestellt werden, damit die Komponente direkt im Eingabemodus angezeigt wird.

 

Wenn Sie möchten, können Sie der Komponente mit der Eigenschaft "HeaderText" noch eine Überschrift wie zum Beispiel "Neuer Eintrag" verpassen.

 

 

Felder ausschließen

Ihnen wird aufgefallen sein, dass nun für alle Felder in der Datenbanktabelle automatisch Textfelder angezeigt werden. Dies macht für die meisten Fälle auch Sinn, jedoch werden die Felder "ID" und "Datum" automatisch vom Datenbanksystem gefüllt und nicht vom Benutzer, weshalb wir diese per Hand wieder entfernen müssen. Um die Felder zu bearbeiten wählen Sie "Felder bearbeiten…" im Smart Tag.

 

 

Unten links sehen Sie die angezeigten Felder. Wählen Sie das Feld "ID" aus und löschen Sie es durch einen Klick auf . Verfahren Sie genauso mit dem Feld "Datum".

 

Nun können die letzte Zeile, die derzeit die zwei Links "Einfügen" und "Abbrechen" enthält an unsere Bedürfnisse anpassen. Diese Zeile findet sich in der Liste der Felder an letzter Stelle unter der Bezeichnung "Neu, Einfügen, Abbrechen". Wählen Sie diese aus und ändern Sie rechts die Eigenschaft "ShowCancelButton" auf "False" sowie "InsertText" in eine passende Bezeichnung wie beispielsweise "Eintragen".

 

 

 

Noch weiß unsere AccessDataSource nichts davon, dass wir die Felder "ID" und "Datum" nicht durch den Benutzer, sondern durch die Datenbank füllen lassen wollen. Dazu klicken Sie die AccessDataSource mit der rechten Maustaste an uns wählen "Eigenschaften". Neben der Eigenschaft "InsertQuery" und dem Text "(Abfrage)" befindet sich der Button "…", der einen kleinen Editor für die Datenbankbefehle öffnet.

 

 

Der in dem oberen Textfeld eingetragene Befehl wird ausgeführt, wenn der Benutzer auf dem "Eintragen"-Link klickt und ein neuer Datensatz in die Datenbanktabelle geschrieben werden soll. Hier genügt es in unserem Fall nach dem tbGaestebuch die beiden Felder "ID" und "Datum" herauszunehmen und aus dem VALUES-Teil entsprechend zwei Fragezeichen (diese stehen jeweils für ein Textfeld) zu entfernen. Der modifizierte Befehl sieht dann so aus:

 

INSERT INTO tbGaestebuch(Name, Email, Homepage, Ort, Kommentar) VALUES (?,?,?,?,?)

 

 

Die Seite sollte nun ungefähr so aussehen:

 

 

Sie können die Seite nun ausprobieren und Daten eingeben. Nach einem Klick auf Eintragen landen die Daten in der DemoDb.mdb.

 

Weiterleitung definieren

Schön wäre jetzt noch, wenn nach einem Eintrag das Gästebuch angezeigt werden würde, da üblicherweise ein Besucher nicht mehr als einen Eintrag (pro Besuch) schreiben möchte. Wie wir wissen ist die AccessDataSource-Komponente für alle Zugriffe auf die Datenbank zuständig. Von dieser können wir uns benachrichtigen lassen, wenn das Schreiben abgeschlossen ist, damit wir auf die Gästebuchseite wechseln können.

 

  • Wählen Sie die Komponente "AccessDataSource" durch einen Mausklick aus.

 

  • Ändern Sie die Ansicht im Eigenschaftsfenster (rechts unten) durch Klick auf das Symbol , sodass nur Ereignisse angezeigt werden.

 

  • Machen Sie einen Doppelklick auf den Text "Inserted". Das Ereignis "Inserted" tritt ein, nachdem ein neuer Datensatz in der Datenbank angelegt wurde.

 

 

  • Es öffnet sich der Texteditor. Geben Sie folgenden Code ein:
    Response.Redirect("Guestbook.aspx")

 

Diese Zeile sorgt dort dafür, dass eine Weiterleitung (engl. "Redirect") auf die Gästebuchseite Guestbook.aspx erfolgt.


Erstellung der Gästebuchseite

 

Öffnen Sie die Guestbook.aspx, die sie im ersten Teil erstellt haben und platzieren Sie einen "HyperLink". Ändern Sie die Eigenschaft "Text" in "Neuer Eintrag" und "NavigateUrl" in den Namen der Zielseite (in diesem Fall die Eingabeseite "GuestbookAdd.aspx"). Sie können auch auf die Schaltfläche "…" klicken und die Seite im darauf erscheinenden Fenster durch Klicken auswählen.

 

Damit sorgen Sie dafür, dass wenn der HyperLink angeklickt wird, die Eingabeseite angezeigt wird.

 

Tabelle konfigurieren

Nun können Sie ganz normal die Tabelle tbGaestebuch aus dem Datenbank-Explorer auf die Seite unter den eben eingefügten HyperLink ziehen. Wie gewöhnlich werden dadurch eine "GridView" sowie ein "AccessDataSource" erzeugt.

 

Das GridView sieht standardmäßig etwas trist aus, sodass Sie diesem etwas Leben einhauchen sollten. Glücklicherweise ist dies mit vorgegebenen Formatierungen möglich, die Sie lediglich auswählen brauchen. Diese Funktionalität verbirgt sich hinter dem Namen "Autom. Formatierung" und erscheint im Smart Tag oder sobald Sie das GridView selektieren und mit der rechten Maustaste anklicken. Sie können das ausgewählte Schema zu einem späteren Zeitpunkt wieder ändern. Für unser Beispiel wurde das Farbschema "Schiefer" verwendet. Wenn Sie sich mit einem Schema anfreunden konnten bestätigen Sie Ihre Auswahl mit "OK".

 

 

Für ein Gästebuch ist die reguläre tabellarische Ansicht der Daten eher ungeeignet, sodass wir hier manuell nachbessern müssen. Sie finden bei ausgewähltem GridView im Smart Tag den Punkt "Spalten bearbeiten…" mit welchem wir die angezeigten Daten beeinflussen können.

 

 

Im neuen Fenster stehen links unten die derzeit angezeigten Felder. Hierbei handelt es sich um datengebundene Felder welche durch Werte aus einer Datenbanktabelle ersetzt werden und in Form von Spalten dargestellt werden.

 

 

Da wir unsere Kreativität voll entfalten wollen löschen Sie alle bereits vorhandenen Felder, wählen in der Liste "Verfügbare Felder" direkt darüber ein "TemplateField" (befindet sich an letzter Stelle) und klicken auf "Hinzufügen" um es in die Tabelle einzufügen. Ein "TemplateField" – also ein Vorlagenfeld – gibt Ihnen die Möglichkeit frei zu entscheiden was angezeigt wird anhand von so genannten Vorlagen ("Templates").

 

 

Vorlagen entwerfen

Diese Vorlagen gilt es im nächsten Schritt nach unseren Wünschen anzupassen. Dazu wählen Sie im Smart Tag des GridViews den Eintrag "Vorlagen bearbeiten".

 

 

Die Ansicht wechselt nun in den Vorlagenbearbeitungsmodus. Was Sie hier jetzt entwerfen wird später für die Anzeige jedes Datensatzes einmal erscheinen. Um die verschiedenen Elemente besser anordnen zu können empfiehlt es sich eine (unsichtbare) Tabelle zu verwenden. Fügen Sie diese über Layout » Tabelle einfügen ein. Geben Sie dabei an, dass die Tabelle zwei Zeilen und drei Spalten haben soll.

 

 

Nun steht der eigenen Entfaltung nichts mehr im Wege. Die Tabelle kann beispielsweise wie in der folgenden Abbildung aussehen. Dort wo "Label" steht sind Label-Steuerelemente aus der Toolbox zu nehmen und auf die Seite zu ziehen. Die Label werden wir später mit den Daten aus der Datenbanktabelle verbinden. Das blaue "Homepage" soll ein "HyperLink" sein, welches ebenfalls in der Toolbox zu finden ist. Nach dem Platzieren ändern Sie am besten gleich die Eigenschaft "Text" in "Homepage". In diesem soll später der Link auf die Homepage des Besuchers erscheinen.

 

 

Datenbindungen zuweisen

Da wir die "Label"-Objekte selber erzeugt haben müssen wir dem AccessDataSource mitteilen mit welchen Daten aus der Datenbank wir diese verknüpfen möchten, sodass diese automatisch gefüllt werden können.

 

§       Bewegen Sie hierzu die Maus auf das erste Label und öffnen das Smart Tag mit einem Klick auf den kleinen Pfeil auf dem Label.

 

§       In dem aufklappenden Smart Tag klicken Sie auf "DataBindings bearbeiten…".

 

 

§       Es erscheint ein Fenster in dem Sie in der Auswahlliste "Gebunden an" rechts das Feld in der Datenbank zuweisen können welches später anstelle des Labels dargestellt wird. In diesem Fall wählen Sie "Name".

 

 

§       Verfahren Sie analog mit den weiteren Labels wie in der folgenden Abbildung dargestellt.

 

 

§       Ein Sonderfall ist der "Homepage"-HyperLink: Hier soll nicht der Text aus der Datenbank kommen, sondern die Internetadresse (URL) zu der navigiert werden soll. Öffnen Sie auch hier über "DataBindungs bearbeiten…" das nun schon bekannte Fenster zur Datenbindung und wählen Sie zuerst auf der linken Seite NavigateUrl als die Eigenschaft, die aus der Datenbank kommen soll und rechts bei "Bound To" das Feld "Homepage". Damit wird der Wert in der Datenbanktabellenspalte "Homepage" nicht als Text, sondern als Ziel des Hyperlinks verwendet.

 

 

Kopfbereich anpassen

Unsere Vorlage für die Darstellung der einzelnen Gästebucheinträge ist nun fertig. Es ist auch möglich weitere Vorlagen zu definieren, zum Beispiel für die Darstellung eines Kopfbereichs über allen Einträgen. Solange Sie sich im Vorlagenbearbeitungsmodus finden wechseln Sie über das Smart Tag zu anderen Vorlagen. Für die Anpassung des Kopfbereichs wählen Sie "HeaderTemplate".

 

 

Für unser einfaches Beispiel belassen wir es bei dem Text "Gästebuch".

 

 

Sortierung einstellen

Vom Design stimmt das Gästebuch soweit. Schön wäre nun noch, dass die neusten Einträge immer ganz oben erscheinen würden. Dazu muss wie die Tabelle nach dem Datum sortieren. Klicken Sie hierzu auf "AccessDataSource1" und dann im Eigenschaftenfenster bei "SelectQuery" auf .

 

 

Fügen Sie ans Ende des bereits vorhandenen SELECT-Befehls ORDER BY Datum DESC ein.

 

Der vollständige Text SELECT-Befehls lautet nun: SELECT 'ID', 'Datum', 'Email', 'Homepage', 'Ort', 'Kommentar' FROM 'tbGaestebuch' ORDER BY Datum DESC.

 

Zusammenfassung

Bei den speziellen Anforderungen des Gästebuchs haben Sie gesehen, dass die automatischen Funktionen von Visual Web Developer 2005 Express Edition, die in den vorigen Kapiteln zum Ergebnis führten, einfach durch individuelle Vorgaben erweitert werden können, sodass Ihrer Kreativität durch ASP.NET keine Grenzen gesetzt werden. Und das Beste: Selbst komplexe Vorlagen lassen sich mit Hilfe von Smart Tags, Eigenschaften und Dialogen realisieren ohne selber Code schreiben zu müssen.

 


Top of pageZum Seitenanfang



E-Mails versenden

In diesem Kapitel wird Ihnen anhand einer Seite zum Weiterempfehlen Ihrer Homepage per E-Mail gezeigt wie sie mit einfachen Mitteln eine E-Mail aus ihrer Internetseite heraus verschicken.

 

Clientseitig vs. Serverseitig

Generell gibt es zwei Möglichkeiten, wie eine E-Mail aus dem Internet versandt werden kann.

 

Die E-Mailadresse kann als gewöhnlicher HyperLink direkt im HTML eingebaut werden. Hierbei muss der Link statt auf eine andere Internetseite auf mailto: gefolgt von der E-Mailadresse des Empfängers gesetzt werden.

 

Beispiel:            mailto:irgendwer@dotnet-online.de

 

 

Zusätzlich kann der Betreff sowie ein vordefinierter Inhalt wie folgt mit übergeben werden:

mailto:irgendwer@dotnet-online.de?subject=Betreff&body=Der%20Inhalt

(Dabei steht "%20" für ein Leerzeichen.)

 

Dieser Methode funktioniert auch auf Seiten ohne ASP.NET hat jedoch zum Nachteil, dass die E-Mail clientseitig, d.h. mit dem E-Mailprogramm auf dem Computer des Besuchers, verschickt wird. Ist dieser in einem Internetcafé, wird dies häufig nicht funktionieren.

 

Außerdem wird die E-Mail nicht sofort automatisch verschickt, sondern es öffnet sich ein Fenster, in dem die E-Mail angezeigt wird, und der Benutzer die Möglichkeit hat zu entscheiden, ob diese verschickt werden soll oder nicht.

 

 

 

 

Bei der zweiten Möglichkeit wird die E-Mail serverseitig, also vom Internetserver auf dem die Homepage liegt, verschickt. Dies ist die gängige Vorgehensweise bei ASP.NET Anwendungen und wird von den Autoren empfohlen. Für diese Methode benötigen Sie die Adresse Ihres E-Mailservers für ausgehende Nachrichten (SMTP-Server) über den die E-Mails verschickt werden sollen (z.B. smtp.1und1.com bei 1&1 oder mailto.t-online.de bei T-Online). Bei einigen Hostern reicht die Angabe von localhost als SMTP-Server. Damit wird der Server verwendet auf dem sich die Homepage befindet.

Erstellen der Beispielseite

Anhand der folgenden Beispielseite werden Ihnen die näheren Details zum Versenden von serverseitigen E-Mails schrittweise erläutert und mit bekannten Konzepten aus den vorangegangenen Kapiteln ergänzt.

 

  • Als Erstes erstellen Sie eine neue ASP.NET-Seite mit dem Namen Mail.aspx (Menü: Datei » Neu » Datei…) und wesen Sie dieser die bekannte Masterseite zu.

    Um allen Seiten ein durchgehendes Aussehen zu verleihen, erstellen Sie den Kopf- bereich wie in vorigen Kapiteln. Verwenden Sie dabei den Titel "Seite weiterempfehlen" und als Bild
    Mail.gif.

  • Ziehen Sie ein Textfeld (engl. "Textbox") aus der Toolbox am linken Rand auf Ihre Seite und fügen Sie wie in folgender Abbildung Text hinzu.

 

 

 

  • Benennen Sie das Textfeld unter "E-Mail" um, indem Sie es anklicken und anschließend im Eigenschaftenfenster ("Eigenschaften") auf der rechten Seite unter "(ID)" den neuen Namen eintragen. Für unser Beispiel soll der Name Email lauten.

  • Nun benötigt die Seite noch eine Schaltfläche ("Button"), die Sie wie das Textfeld auf die Seite ziehen können. Ändern Sie in den Eigenschaften der Schaltfläche "(ID)" und "Text" in "Senden". Jetzt sollte die Seite wie Folgt aussehen.

 

 

Versenden der E-Mail

 

  • Um die E-Mail zu versenden müssen wir darauf reagieren, wenn ein Besucher der Seite auf die Schalfläche Senden klickt. Dazu doppelklicken Sie auf die Schaltfläche und es die Ansicht wechselt automatisch auf "Quelle".

  • Begeben Sie sich in die freie Zeile zwischen dem Sub Senden_Click […] und End Sub. Eigentlich wäre dies die erste Stelle wo Programmierung notwendig wird, allerdings werden eine Reihe von Standardaufgaben wie auch das Senden einer E-Mail als Textschnipsel mitgeliefert. Um diese abzurufen gehen Sie im Menü Bearbeiten » IntelliSense » Abschnitt einfügen oder Drücken zuerst die Tastenkombination Strg+K und danach Strg+X. Es erscheint ein Menü mit Kategorien zu denen fertige Codeabschnitte existieren. Wählen Sie mit Hilfe der Pfeiltasten und der Tabulatortaste oder der Maus aus der Kategorie "Konvektivität und Netzwerk" den Eintrag "E-Mail-Nachricht erstellen".

 

 

  • Nun erscheint der Beispielcode zum Versenden von E-Mails samt grün hervorgehobenen Platzhaltern wie Absender, Empfänger, Betreff, Format etc., die von Ihnen ausgefüllt werden müssen. Mithilfe der Tabulator-Taste können Sie zwischen den einzelnen Feldern springen. w vorgeben können. Beachten Sie, dass Sie alle Texte in Anführungszeichen setzen müssen. Tragen Sie folgende Daten ein:

Feld

Inhalt

sender@address

Tragen Sie hier den Namen Ihrer Homepage, gefolgt von Ihrer E-Mailadresse in spitzen Klammern ein.
Beispiel: "VisualWebDeveloperDemo <nobody@dotnet-online.de>"

from@address

Hier wird der Name des Empfängers eingetragen. In unserem Fall ist soll dies der aktuelle Text des Textfeldes "Email" sein:

Email.Text

Subject

Der Betreff der Nachricht, z.B.: "Ein Freund empfiehlt Ihnen eine Internetseite".

Message Text

Der eigentliche Inhalt der Nachricht. Beispielsweise: "Hallo! Ein Freund empfiehlt Ihnen die Internetseite: http://www.dotnet-online.de"

Email Server Name

Hier müssen Sie die Internetadresse Ihres SMTP-Servers zum versenden von E-Mails eintragen (z.B. "localhost").

 

 

  • Nun sollte der Code ungefähr so aussehen:

 

    Sub Senden_Click(ByVal sender As Object, ByVal e As System.EventArgs)

       Dim message As New MailMessage(Email.Text, "Demo <nobody@dotnet-online.de", "Ein Freund empfiehlt Ihnen eine Internetseite", "Hallo! Ein Freund empfiehlt Ihnen die Internetseite http://www.dotnet-online.de.")

       Dim emailClient As New SmtpClient("localhost")

       emailClient.Send(message)      

    End Sub

 

  • Als letzten Schritt sollten wir eine Seite festlegen, die angezeigt wird, nachdem die E-Mail erfolgreich verschickt wurde. Fügen Sie dafür vor der Zeile End Sub Folgendes ein:

Response.Redirect("EmailOK.aspx")

 

  • Als letzten Schritt sollten Sie eine neue ASP.NET-Seite mit einem Hinweis auf den erfolgreichen Versand der Nachricht. Wenn Sie das selbe Design verwenden, sieht das dann in etwa so aus:

 

Zusammenfassung

In diesem Kapitel haben Sie die Möglichkeiten zum E-Mailversand sowie die grundlegenden Befehle um das Versenden unter ASP.NET zu programmieren kennen gelernt. Analog zu diesem Beispiel könnten Sie mit diesem Wissen beispielsweise ein Kontaktformular bauen.


Top of pageZum Seitenanfang



Übertragen der Seite auf einen Server

Um die erstelle Seite ins Internet zu bekommen, benötigen Sie zunächst einen sog. "Hosting-Anbieter" ­einen Anbieter von Speicherplatz, der über das Internet erreichbar ist (auch Web Space genannt).

 

Microsoft hat eine Seite mit Hosting-Anbietern veröffentlicht die für 10 Euro oder weniger ASP.NET Hosting anbieten. Sie finden diese unter http://www.microsoft.com/germany/msdn/aspnet/.

Übertragen der Dateien

Das Übertragen der ASP.NET-Dateien und Grafiken auf den Server findet bei Hosting-Anbietern meistens über FTP (File Transfer Protokoll) statt. Hierbei kommt die "Website kopieren"-Funktion zum Einsatz, welche sich hinter dem Menüpunkt Website » Website kopieren… oder im Projektmappen-Explorer hinter dem Symbol  verbirgt.

 

Um eine Verknüpfung zu einem FTP-Server herzustellen gehen Sie wie folgt vor:

  • Öffnen Sie die "Website kopieren"-Ansicht wie beschrieben über das Menü oder den Projektmappen-Explorer.
  • Klicken Sie auf die Schaltfläche "Verbinden" rechts neben dem "Verbinden mit"-Auswahlfeld.



  • Im nun erscheinenden Dialog wählen Sie links das Symbol "FTP-Site" und geben unter "Server" die FTP-Adresse an, die Sie von Ihrem Hosting-Anbieter bekommen haben.
    Im Feld "Port" sollten Sie die Vorgabe "21" beibehalten.
  • Die Felder "Benutzername" und "Kennwort" füllen Sie mit Ihrem Benutzernamen und Passwort, welches Ihnen ebenfalls von Ihrem Hosting-Anbieter zur Verfügung gestellt wurde.

 

 

Nun können Sie den Kopiervorgang starten in dem Sie in der linken Liste mit der rechten Maustaste klicken und den Eintrag "Website synchronisieren" starten. Dabei werden nur geänderte Dateien übertragen. Sobald die Fortschrittsanzeige vollständig ausgefüllt ist, sind die Dateien auf dem Server aktualisiert.

 

 

Beachten Sie, dass ggf. eine Warnung von Ihrer Firewall (zum Beispiel bei installiertem Windows XP Service Pack 2) erscheint. In dem Fall wählen Sie unbedingt "Nicht mehr blockieren" um Microsoft Visual Web Developer 2005 Express Edition die Verbindung zum Internet zu ermöglichen.

 

Zusammenfassung

Sie haben gesehen wie einfach das Übertragen aller Dateien zu einem Hosting-Anbieter mit Hilfe der "Website kopieren"-Funktion ist. Allerdings kann die Kopierfunktion noch viel mehr. Zum Beispiel synchronisiert sie die geänderten Dateien zwischen Ihrem Computer und den Server in beide Richtungen, sodass Änderungen die von jemand anderem vorgenommen und auf den Server gespielt wurden nicht blind überschrieben werden. Auch werden nur Dateien übertragen die sich geändert haben um Zeit und Bandbreite zu sparen.

 

Top of pageZum Seitenanfang