WebMatrix – ein universelles Werkzeug für Webentwickler

WebMatrix ist insofern kein typisches Microsoftprodukt, da es auf keiner Client-Technik wie Silverlight oder Server-Technik wie ASP.NET aufsetzt. Es ist ein klassisches Allroundwerkzeug für allgemeine, auf HTML basierende Websites. Es richtet sich in erster Linie an Webentwickler, die zum Beispiel eine Website auf der Basis eines Open Source Frameworks wie Orchard (.NET) oder Joomla! (PHP) einrichten wollen, so dass diese danach in den Webspace eines Providers übertragen werden kann. WebMatrix basiert nicht auf Visual Studio, was bereits an dem etwas anderen Startbildschirm und einer im Vergleich zu Visual Studio einfacheren Benutzerführung deutlich wird. WebMatrix eignet sich auch als schlichter HTML-Editor, wenngleich der Eingabekomfort im Vergleich zu anderen HTML-Editoren etwas bescheiden ist (es gibt zum Beispiel keinen klassischen CSS-Editor). Das WebMatrix, um das es im Folgenden geht, hat außerdem nichts mit jenem WebMatrix zu tun, dass es vor vielen Jahren schon einmal von Microsoft gab. Das „neue“ WebMatrix ist ein erfrischend vielseitiges Werkzeug. Die aktuelle Version von WebMatrix ist 1.1, eine Version 2 steht seit einigen Wochen als Vorabversion zur Verfügung (allerdings nur in englischer Sprache) und wird am Ende dieser Übersicht vorgestellt.

WebMatrix ist ein universelles Werkzeug für Webentwickler

Einsatzszenarien für WebMatrix

Es gibt vier typische Szenarien für den Einsatz von WebMatrix:

• Jemand möchte eine Website auf der Grundlage eines Open Source-Frameworks einrichten, um diese danach auf den Webspace eines Providers zu übertragen. Über den Microsoft Web Platform Installer stehen Vorlagen für viele populäre Open Source Frameworks zur Auswahl. Für dieses Szenario benötigt der Anwender keine technischen Vorkenntnisse. Im einfachsten Fall arbeitet er oder sie eine Schritt-für-Schritt-Anleitung für eine Minimalanpassung ab, sofern diese überhaupt erforderlich ist.
• Jemand möchte eine reine HTML/CSS/JavaScript-Website erstellen, die anschließend von jedem Provider gehostet werden kann. WebMatrix stellt dazu eine Reihe von Vorlagen, einen Editor (der mit der Version 2 deutlich komfortabler wird) und einen Mechanismus für das Überspielen der Dateien zu einem Provider zur Verfügung. Für dieses Szenario benötigt der Anwender mehr oder weniger gute Kenntnisse in HTML, CSS und gegebenenfalls JavaScript.
• Jemand möchte eine serverbasierte Website anlegen, bei der vor dem Abrufen einer Seite auf dem Server Programmcode ausgeführt wird, der zum Beispiel eine Datenbankabfrage ausführt, deren Ergebnis in HTML umwandelt und an den Browser schickt. Für dieses Szenario stellt WebMatrix sowohl Vorlagen für C#, Visual Basic als auch PHP (!) zur Verfügung (mit der Version 2 wird es auch IntelliSense für PHP geben). Außerdem gibt es einen Datenbankeditor für die Verwaltung der Datenbank. Für dieses Szenario benötigt ein Anwender entsprechende Kenntnisse in einer Webserver-Technik wie ASP.NET oder PHP und mehr oder weniger gute Programmierkenntnisse. Auch für dieses Szenario bietet WebMatrix Mechanismen für die Veröffentlichung der Website in den Webspace eines Providers an.
• Im letzten Szenario möchte jemand eine Änderung an einer bestehenden Website vornehmen. Er lädt die Website in WebMatrix, nimmt die Änderung vor und überspielt das Ergebnis wieder zurück.

WebMatrix nach dem Start

Dass WebMatrix ein wenig anders ist als andere Microsoft-Werkzeuge, wird bereits beim Start deutlich, denn der Startbildschirm wurde absichtlich sehr übersichtlich gehalten. Unmittelbar nach dem Start wird entweder eine neue Website angelegt oder eine existierende Website geöffnet. Eine Website ist dabei eine Sammlung von HTML-Dateien und anderen Dateien, z.B. Bildern, die sich in einem Verzeichnis befinden.

WebMatrix bietet in seinem Startbildschirm die folgenden Einträge an:

Unter Meine Websites werden bereits angelegte Websites angeboten.

Über Website aus Web Gallery werden alle Websites angeboten, die Microsoft für WebMatrix zur Verfügung stellt. Die Liste der durch Vorlagen unterstützten Open Source Frameworks ist lang und enthält viele „prominente“ Mitglieder, sowohl aus dem PHP- als auch aus dem ASP.NET-Bereich. Hier sind nur einige der „VIPs“ aus dem Open Source-Bereich:

Da PHP-Frameworks auf MySQL basieren, wird die Datenbank eines dieser Frameworks zuerst heruntergeladen und installiert. Wenn Du daher schon immer einmal Moodle kennenlernen wolltest, mit dem sich Kurse im Internet durchführen lassen, kannst Du es in WebMatrix (sofern alles glatt durchläuft) in weniger als eine halben Stunde herunterladen, konfigurieren und im FTP-Verzeichnis ihres Web-Accounts veröffentlichen.

Im Rahmen der WebGallery stehen viele populäre Open Source Frameworks zur Auswahl

PHP und WebMatrix sind daher kein Widerspruch, sondern sie ergänzen sich sehr gut. Einen PHP-Editor gibt es allerdings erst mit der Version 2.0 von WebMatrix.

Über Website aus Vorlage werden Vorlagen für typische Webanwendungen wie eine Starter Site, eine Fotogalerie oder ein Kalender angeboten. Fotogalerie ist eine fertige (ASP.NET-) Webanwendung, die nur noch ein wenig angepasst werden muss und danach in den Webspaces eines Providers, der ASP.NET anbietet, übertragen werden kann. Sie ist zudem für Einsteiger in das Thema serverseitige Programmierung mit ASP.NET als Anschauungsbeispiel sehr gut geeignet. Sie macht vor allem deutlich, wie die neue Serversprache Razor das Kombinieren von HTML mit serverseitig ausgeführten Programmbefehlen vereinfacht. Die Webseiten der Fotogalerie tragen die Erweiterung .cshtml. Es sind Textdateien, die eine Mischung aus C#-Programmcode und HTML enthalten. Wer aber einen Code-Editor wie in Visual Studio erwartet, wird zunächst enttäuscht, denn der WebMatrix-Editor bietet in der Version 1.0 nur ein Minimum an Komfort. Es gibt weder Auswahllisten noch andere IntelliSense-Merkmale. Nach einer kurzen Eingewöhnungsphase stellt man jedoch fest, dass dieser Komfort nicht unbedingt erforderlich ist, um HTML-basierte Websites erstellen zu können (und mit der Version 2.0 wird es diesen Komfort auch bei WebMatrix geben).

Über Website aus Ordner wird der komplette Inhalt eines (Website-) Ordners geladen.

Umgang mit Datenbanken

Praktisch jede serverseitige Webanwendung basiert auf einer Datenbank, die von einem DBMS (Datenbankmagementsystem) wie SQL Server Express, SQL Server Compact Edition oder MySQL betrieben wird. WebMatrix bietet in der Version 1.0 einen einfachen, aber mehr als zweckmäßigen Datenbankeditor, mit dem sich die Tabellen einer Datenbank editieren und neue Datenbanken anlegen lassen. Neben Microsoft SQL Server- werden auch MySQL-Datenbanken unterstützt, die zuvor im Rahmen einer Websitevorlage heruntergeladen und installiert wurden. WebMatrix arbeitet von Haus aus mit SQL Server Compact-Datenbanken. Alternativ ist es möglich, eine Compact-Edition-Datenbank auf den "großen" Microsoft SQL Server zu konvertieren.

WebMatrix bietet einen komfortablen Designer für Datenbanken

Websites veröffentlichen

Ein wichtiger Aspekt im Lebenszyklus einer Website ist ihre Veröffentlichung. Neben der klassischen Veröffentlichung per FTP steht bei WebMatrix auch die Veröffentlichung per WebDeploy zur Auswahl. WebDeploy ist ein Mechanismus, der speziell für Microsofts IIS-Webserver gedacht ist und daher vom Provider unterstützt werden muss.

Berichte für besseren Traffic

Eine Website ist im Allgemeinen nicht viel wert, wenn sie im Internet nicht gefunden wird. Damit der Arbeitsaufwand, der in eine funktional reichhaltige Website gesteckt wird, nach ihrer Veröffentlichung im Web nicht wirkungslos verpufft, gilt es gewisse Regeln einzuhalten, die dazu führen sollen, dass die Webseite bei den großen Suchmaschinen möglichst weit oben in der Platzierung erscheint. Diese Techniken werden unter dem Oberbegriff Search Engine Optimization, kurz SEO, zusammengefasst und sind für den Betreiber einer Website praktisch Pflicht. WebMatrix unterstützt SEO, in dem sich von einer Website Berichte anfertigen lassen, die zum Beispiel auflisten, welche Seiten gegen bestimmte Regeln verstoßen oder ob ungültige Links enthalten sind. Das sind für den Betreiber einer Webseite enorm wichtige Informationen. Auch die Ladezeit einzelner Webseiten einer Website lässt sich dabei überprüfen.

Ein wichtiger Aspekt von WebMatrix ist die Möglichkeit, Berichte über eine Website anfertigen zu können

WebMatrix in der Praxis

Der Arbeitsbereich von WebMatrix besteht aus den vier Bereichen Site, Dateien, Datenbanken und Berichte. Zwischen diesen Funktionen schaltest Du auf der linken unteren Seite um. Sobald Du eine Seite erstellt hast, bearbeitest Du sie durch Umschalten zwischen den einzelnen Bereichen. Der Umstand, dass die Seite jederzeit im Browser betrachtet werden kann, macht das Problem wieder wett, dass es keinen Designer gibt. Bemerkenswert ist, dass für die Vorschau einer Seite ausgewählt werden kann, in welchem Browser sie angezeigt werden soll.

Beim Hindurchklicken durch die verschiedenen Arbeitsbereiche passt sich auch die Oberfläche von WebMatrix an und zeigt die zur Verfügung stehenden Funktionen an. Hier verhält sich WebMatrix wie Word 2010. Per Site schaltest Du zum aktuellen Projekt und den darin enthaltenen Seiten um. Hier lassen sich Einstellungen ändern und die Zugriffe der Seite anzeigen. Hier wird auch die Adresse der Seite angezeigt, so dass Du die Adresse in einen Browser eingeben kannst, um die Darstellung der Seite in diesem Browser so zu sehen wie später ein Besucher im Internet.

Mit der Auswahl von Dateien wird die Dateistruktur der verschiedenen Seiten angezeigt und Du kannst einzelne Dateien im Texteditor bearbeiten.

Über den Menüpunkt Berichte lässt sich der Aufbau der Site analysieren und die Site für Suchmaschinen optimieren. Hier werden auch eventuell enthaltene Fehler angezeigt. Du erhälst auf diese Weise einen Einblick in die Funktionsweise der Site.

Mit den integrierten Assistenten lassen sich Social-Media-Funktionen, Videos und Bilder einfach integrieren. Wer sich tiefer in diese Thematik einarbeiten möchte, findet im Blog der WebMatrix-Entwickler wertvolle Hinweise.

Die Entwicklung einer Site erfolgt offline. Um sie im Internet zu veröffentlichen, wählst Du in WebMatrix Site > Veröffentlichen.

Veröffentlichen von Webseiten

Für das Veröffentlichen einer Website bietet sich Web Deploy an

Für das Veröffentlichen einer Website bietet WebMatrix neben dem klassischen Kopieren der Dateien der Website via FTP die komfortablere Web Deploy-Technik von Microsoft an, die aber nicht von allen Providern unterstützt wird. Der Vorteil von Web Deploy besteht darin, dass nicht nur die Dateien der Website, sondern auch die Datenbankdateien sowie alle erforderlichen Einstellungen übertragen werden. Unterstützt ein Provider Web Deploy, muss beim Veröffentlichen lediglich die zuvor von WebMatrix generierte Konfigurationsdatei angegeben werden, aus der der Provider alle Angaben für das Veröffentlichen der Site, inklusive Benutzername und Kennwort, entnehmen kann. Einfacher kann das Veröffentlichen einer Web Site nicht mehr werden.

WebMatrix lernen

WebMatrix ist ein faszinierendes Werkzeug, das endlich alles, was zum Erstellen einer universellen Website erforderlich ist, unter einem Dach zusammenfasst. Trotz aller Einfachheit – ohne eine Übersicht, Anleitungen und Tutorials ist der Umgang mit WebMatrix nicht zu erlernen, denn das neue Werkzeug verdient nicht das Prädikat selbsterklärend. Das wäre auch nicht unbedingt im Sinne seiner Anwender, denn Einfachheit geht meistens auf Kosten der Möglichkeiten. Auf der Microsoft-Website findest Du eine Reihe von kurzen Videos, die unter anderem zeigen, auf welche Weise CMS-Frameworks wie Drupal, DotNetNuke oder Joomla! mit WebMatrix eingerichtet und veröffentlicht werden.

Die Razor Layout Engine

Die Notwendigkeit, Server-Code mit HTML kombinieren zu müssen, ist beinahe so alt wie das Web selbst. Im Unterschied zu Client-Code, der in JavaScript geschrieben ist und mit jedem Laden der Webseite im Browser ausgeführt wird, wird Server-Code vor dem Abrufen der Webseite auf dem Server ausgeführt. Das klassische Beispiel ist die Datenbankabfrage, die eine Webseite mit Inhalten füllt, was logischerweise vor dem Senden der Webseite an den Browser geschehen muss, damit das Ergebnis der Abfrage als HTML in die Seite eingebaut werden kann, die danach an den Browser geschickt wird.

In der Vergangenheit bot Microsoft mit ASP.NET ein Modell an, bei dem in C# oder Visual Basic geschriebener Servercode in einer separaten Datei untergebracht war. Die Verknüpfung zwischen den Inhalten der Webseite und dem Server-Code wurde über Server-Controls und deren Events und die Events der Webseite selbst hergestellt. WebMatrix verwendet ein Modell, das ebenfalls auf ASP.NET basiert, das aber für einen Web-Designer etwas praxisnaher ist. Der Servercode ist Teil der Seite, die Verbindung wird über Elemente einer Templating-Engine ("Template": engl. "Vorlage") mit dem Namen Razor hergestellt. Der Vorteil ist eine klare Trennung zwischen Programmcode und HTML-Elementen, die nicht auf Kosten der Übersichtlichkeit geht.

Die Razor-Engine ist eine tolle Erfindung, die die Integration von Server-Code in eine Webseite auf eine neue Grundlage stellt. Damit werden sich vor allem Web-Designer schnell anfreunden, die bereits Erfahrung mit den in der PHP-Welt verwendeten Templating-Engines besitzen.

Ein kleiner Auszug aus der Webseite Default.cshtml, die Teil der Beispielanwendung Fotogalerie ist, soll dies veranschaulichen. Die Seite beginnt mit einem Block mit Server-Code:

  @{
    Page.Title = "Fotogalerie";

    var db = Database.Open("PhotoGallery");
    var galleries = db.Query(@"SELECT Galleries.Id, Galleries.Name, COUNT(Photos.Id) AS PhotoCount
                    FROM Galleries LEFT OUTER JOIN Photos ON Galleries.Id = Photos.GalleryId
                    GROUP BY Galleries.Id, Galleries.Name").ToList();
  }

Razor-Elemente beginnen stets mit einem @-Zeichen. Dieser Server-Code legt als erstes den Seitentitel fest und führt danach eine Datenbankabfrage der SQL Server Compact-Datenbank durch, in der die Daten der Fotogalerie gespeichert sind. Der erste Befehl öffnet die Datenbank PhotoGallery.sdf, der zweite Befehl führt eine SQL-Abfrage aus, die die Variable galleries mit den Namen der Galerien und der Anzahl der in ihr enthaltenen Fotos füllt.

Damit ist der Server-Code an dieser Stelle beendet. Damit sich das Ergebnis der Datenbankabfrage auf den Aufbau der Webseite auswirken kann, wird noch etwas mehr Server-Code benötigt. Benötigt wird zum Beispiel Server-Code, der die Namen aller Galerien und ihre Anzahl an Bildern in die Seite eingefügt. Das erledigt der folgende Server-Code, der auf das H1-Element der Seite folgt:

    @if (galleries.Count == 1) {
        <p>Es ist eine Galerie vorhanden.</p>
    } else {
        <p>Es sind @galleries.Count Galerien vorhanden.</p>
    }

Dieser Server-Code ist insofern harmlos, da der lediglich in Abhängigkeit der Anzahl der vorhandenen Galerien entweder den Satz Es ist eine Gallerie vorhanden oder die Anzahl der Galerien in einen Satz einfügt.

Anschließend folgt ein UL-Element, das durch die CSS-Klasse „thumbnails gallery“ formatiert wird. Ab jetzt wird es richtig interessant, denn der folgende Server-Code fügt das Ergebnis der Datenbankabfrage in Gestalt der Variablen galleries in die UL-Liste ein:

    @foreach (var gallery in galleries) {
    <li class="gallery">
        <a href="@Href("~=""/Gallery/View", gallery.Id)">
            <img alt="Bilder aus @gallery.Name" src="@Href("~=""/Gallery/Thumbnail", gallery.Id)"
            class="thumbnail-no-border" />
            <span class="below-image">@gallery.Name</span>
            <span class="image-overlay">@gallery.PhotoCount Foto(s)</span>
        </a>
    </li>
    }

Der Razor-Befehl @foreach fügt den auf { folgenden HTML-Code sooft in die Seite wie die Variable galleries Einträge enthält. Bei jedem Durchlauf steht die Variable gallery für den Titel der nächsten Galerie und die Anzahl der in ihr enthaltenen Bilder. Das <a>-Element sorgt dafür, dass ein Link auf die View-Webseite eingefügt wird. Für das href-Attribut wird vom Razor-Element @HRef eine URL zusammengesetzt, die aus der Basisadresse der Galerie (z.B. http://localhost:44447/Gallery/View) und der ID der Galerie besteht (z.B. /1), so dass ein Anklicken des Links die View-Seite mit allen Bildern der Galerie öffnet.

Es sind Konstruktionen wie diese, die Razor als Templating-Engine für Web-Designer so attraktiv macht. Software-Entwickler, die bereits eine der beiden Programmiersprachen C# oder Visual Basic beherrschen, können ihr Know-how auch für die Programmierung von Server-Code verwenden und müssen sich nicht mit Sprachen wie JavaScript oder PHP beschäftigen.

Server-Code ist nicht nur dazu da, Daten aus einer Datenbankabfrage in eine abgerufene Webseite einzufügen, er muss auch dafür sorgen, dass eine Webseite Daten vom Browser empfangen und sie beispielsweise in die Datenbank einfügen kann. Bei der Fotogalerie wären dies vielleicht hochgeladene Bilder sowie die dazu gehörigen Beschreibungen, Kommentare und Tags.

HTML verwendet für das Rücksenden von in eine Webseite eingetragen Daten bekanntlich Formulare, die durch das Form-Element definiert werden. Das Attribut method besitzt dabei den Wert Post. Ferner gibt es ein Input-Element, dessen type-Attribut den Wert submit besitzt. Dies ergibt einen klassischen Button, nach dessen Anklicken „etwas passiert“. In der Webseite Edit.cshtml der Fotogalerie-Website ist das form-Element wie folgt definiert:

    <form method="post" action="">

Das Attribut action, welches im obigen Beispiel leer ist, legt fest, welche Seite durch den Klick auf den Button aufgerufen wird. Beim Klick werden dieser Seite die Daten des Formulars zur Verarbeitung übergeben.

Bemerkenswert ist, dass dank verschiedener HTML-Helper wie z.B. @Html.ValidationMessage die Resultate von Validierungsregeln auf sehr einfache Weise in die Webseite eingefügt werden können.

WebMatrix 2.0 steht vor der Tür

Ein kleiner Schwachpunkt von WebMatrix 1.0 ist natürlich das nahezu vollständige Fehlen von Auswahllisten bei der Eingabe von HTML- und Servercode. Dieses Fehlen von Hilfestellungen besitzt teilweise auch seinen Charme, denn ein Entwickler wird damit „gezwungen“ sich den HTML- und Servercode vorher zu überlegen und es sich nicht zu bequem einzurichten. Da dieser puristische Ansatz bei größeren Sites nicht mehr gerechtfertigt ist, vor allem dann, wenn die Produktivität eine Anforderung ist, werden die WebMatrix-Entwickler mit der kommenden Version 2.0 wichtige Verbesserungen einführen. Unter anderem wird es Auswahllisten nicht nur für serverseitigen Code, sondern auch für HTML und JavaScript geben.

Wem das immer noch nicht genügt, kann eine mit WebMatrix begonnene Website jederzeit in Visual Studio weiterbearbeiten, sofern Visual Studio 2010 Professional auf dem Rechner installiert ist. Wer das Ganze unverbindlich testen möchte, installiert dazu die kostenlose Test-Version von Visual Studio 2010 Professional, die Microsoft zur Nutzung für 90 Tage zur Verfügung stellt.

Zusammenfassung

WebMatrix ist ein enorm vielseitiges Werkzeug, das sowohl den klassischen Web-Designer, der auf pures Standard-HTML schwört, als auch den Webentwickler, der virtuos mit ASP.NET, C#, Visual Basic oder PHP umgehen kann, anspricht. Das Schöne an WebMatrix ist, dass es keine Präferenzen für eine bestimmte Servertechnik besitzt, sondern ASP.NET genauso unterstützt wie PHP. Die Razor Templating Engine bietet eine beinahe geniale Verknüpfung von HTML mit serverseitigem Code. Damit stehen Webentwicklern eine Fülle von Möglichkeiten zur Auswahl. Das Motto auf der WebMatrix Webseite bei Microsoft lautet nicht umsonst „Fall in love with the Web again“.