1 - Websites mach ich dir mit links

Ein Click auf das Bild führt zur WebMatrix Hauptsite von Microsoft

Inhaltsverzeichnis

alle Folgen zeigen
1 - Websites mach ich dir mit links
2 - Bist Du bereit für die Matrix?
3 - WebMatrix installieren
4 - Microsofts Webcamp
5 - Templates
6 - Administration
7 - Razor seift alle ein
8 - Die kleinen Helferlein
9 - Login, Mail und Captchas
10 - Layouts
11 - SOAP Service mit XML und LINQ parsen

Anmerkung: Die Beiträge sind in umgekehrter Reihenfolge angeordnet, so dass Folge 1 immer zuoberst ist. Auf den neusten Beitrag kommt man auf einfache Weise über das Archiv. Ebenfalls wird das obige Inhaltsverzeichnis nachgetragen.
Ein Click auf den grossen Titel führt übrigens immer auf diesen Beitrag und damit zum Titel.

Dies ist ein inoffizieller Blog und ich habe weder etwas direkt mit Microsoft zu tun, noch bin ich der grosse .net Crack.
Die Zielgruppe von Microsoft für WebMatrix sind Einsteiger und Hobbyprogrammierer und aus dieser Perspektive ist dieser Blog aufgebaut. Für mich ist er so eine Art Lerntagebuch.

Lob, Tadel, Ergänzungen und konstruktive Kritik könnt ihr gerne in die Kommentare schreiben.

Es ist (noch) nicht ganz einfach, Literatur und Sites über WebMatrix zu finden. Auf englisch ist jetzt einiges im Anrollen. Aber Achtung: Microsoft hat anfangs 2000 einen Vorgänger namens Web Matrix herausgebracht (man beachte den Leerschlag!!). Solche Beiträge haben haben höchstens im Bereich .net und asp mit der neuen WebMatrix zu tun.

In einer Artikelfolge werde ich auf verschiedene Aspekte von WebMatrix eingehen und einen möglichen Weg aufzeigen, wie der Einstieg auch einfach sein kann. In der Spalte rechts findet ihr Links auf die zahlreichen Themen, welche durch WebMatrix abgedeckt werden.

Wie bereits erwähnt, richtet sich WebMatrix an Ersteller von einfacheren Projekten oder an Hobbydesigner, die fertige Tools für eigene Bedürfnisse anpassen wollen. Ein Aufstieg in höhere Ligen ist aber durch die direkte Verbindung zu Visual Studio und die Migration vom integrierten SQL CE auf MS SQL bzw. MySQL jederzeit möglich.

Einen guten, ersten Einblick was WebMatrix bietet findet ihr als Webcast oder als Tutorial in 9 Lektionen.

2 - Bist Du bereit für die Matrix?

Quelle: MSDN Magazin

Direkt hier gelandet? Alle Beiträge über Webmatrix zeigen

WebMatrix ist ein neuer All-in-one Website-Editor für ASP.NET-Webseiten. Es ist kein Konkurrent zu Visual Studio, es ist eher eine Ergänzung, mit einigen Überschneidungen zwischen den beiden.

Das Paket enthält einen kontextsensitiven Text-Editor, einen Web-Server, eine Datenbank-Engine und das zugrunde liegende Framework-Prinzip. Also alles, was benötigt wird, um eine Website zu erstellen und bereitzustellen. WebMatrix unterstützt ausser C# (Hauptfokus!) auch Visual Basic, PHP, MySQL und vieles anderes.

Für die serverseitige Programmierung kommt die Programmmiersprache Razor zum Einsatz, die recht clever integriert ist. Eingeleitet wird Razor immer mit dem '@'. Man muss sich nicht mehr fast die Finger brechen mit kryptischen Skript Klauseln. Dazu aber später mehr.

Ausserdem steht eine grosse Anzahl von Templates und 'Helpern' zur Verfügung. Eine Anbindung an Twitter zum Beispiel, wird mit wenigen Zeilen Code zum Kinderspiel. Funktionalitäten wie Authentifizierung, Captcha usw. sind problemlos möglich. Auch dazu später mehr.

Ein grafischer Editor wie z.B. Dreamweaver ist im Paket nicht dabei. Es steht aber eine schnell wachsende Anzahl von Gallerien und Templates zur Verfügung. Die Datenbankanbindung ist einfach wie nie. Verwendet man das integrierte SQL CE so besteht die gesamte Datenbank aus einer .sdf Datei, wie man sich das analog von Access gewohnt ist.

Somit eignet sich das Tool sowohl für einfachere Webauftritte, wo Datenbankfunktionalitäten zur Verfügung gestellt werden müssen, wie auch für 'grafisch' aufwändigere Designs.

Mit WebMatrix ist es aber auch möglich, etablierte Systeme wie z.B. Wordpress auf Knopfdruck zu installieren und auf einfache Weise anzupassen. Viele entsprechende Vorlagen kommen mit und können gleich aus dem Tool installiert werden.

Insgesamt scheint mir die Einstiegshürde so klein wie noch nie. Gundkenntnisse über Webdesign (HTML), Programmierung (C# oder VB oder php) und Datenbankdesign (SQL) werden allerdings vorausgesetzt.

Einen empfehlenswerten Webcast über die gesamte Microsoft Webplatform befindet sich hier. Die Abgrenzungen Web Pages, Web Forms und MVC werden darin gut erklärt.

3 - WebMatrix installieren

Direkt hier gelandet? Alle Beiträge über Webmatrix zeigen

Wie taucht man nun ab in die Matrix?

Ganz unten auf der Website gibt es einen Übersichtsvideo. Will man jetzt die Matrix endlich haben, so empfehle ich folgendes Vorgehen:

1) Auf der Website werden zwei Varianten zum Download angeboten:
- Nur WebMatrix
- WebMatrix inklusive Visual Studio Express
Aus meiner Sicht spricht nichts gegen die zweite Variante, ist doch weder Speicherplatz noch Rechenleistung ein Problem. Somit lässt sich jederzeit in Visualstudio umschalten und Seiten können zum Beispiel im Einzelschritt durchlaufen werden.

2) Es wird bereits eine Betaversion für WebMatrix angeboten. Ich habe den Download riskiert und kann ihn nur empfehlen. Die Oberfläche ist zwar nun englisch (es sein denn, ich habe etwas übersehen), aber das sollte kein Problem sein. Dafür wird man zum Beispiel mit einer vollständig kontextsensitiven Eingabehilfe belohnt. In der ersten Version gibt es nur Hilfe für HTML Seiten.

3) Nachdem man sich auf der Seite ganz unten die Übersicht zu Gemüte geführt hat, gibt es hier 9 Videos von Christian Wenz, die einen guten Überblick über WebMatrix geben.

Die Installation läuft nun über den Plattform Installer, der so intelligent ist, dass er nur fehlende Pakete installiert. Nach der Installation ist man stolzer Besitzer von
- Webserver IIS Express
- SQL CE
- Webmatrix mit Razor
- Visual Studio Express

Zum Schluss noch ein Tipp:
Die Installation läuft in der Regel problemlos durch. Kommt man aber zum Beispiel aus dem Schweizerländle wie ich, so muss die Spracheinstellung in der Systemsteuerung auf 'Deutschland' lauten und nicht auf 'Schweiz'. Sonst wird man mit tonnenweisen Fehlermeldungen und einem Systemabbruch beglückt. Nach der 'Bereinigung' funktionierte aber alles bestens.

Goog luck!

4 - Microsofts Webcamp

click auf das Bild

Direkt hier gelandet? Alle Beiträge über Webmatrix zeigen

Wenn der Einstieg erfolgreich gelungen ist, so braucht es Anfangs doch noch einige Hilfe um sich zurechtzufinden. Es gibt schon einiges im Netz, aber leider etwas verstreut.

Ein guter Einstiegs-Punkt (in Englisch) sind die Microsoft Webcamps. Aber keine Angst, man muss sich nicht in die Wildnis begeben. Die Webcamps bestehen aus Videotutorials, eBooks und Beispielen. Es gibt eine eigene Sektion für Webmatrix. Besonders wertvoll dürfte dabei das über 270-seitige Lehrbuch sein, dass auch viele direkte Links auf weitere Ressourcen beinhaltet.

Es gibt auch Camps für ... Aber lassen wir doch Microsoft zu Wort kommen, die können das besser:
The Web Camps Training Kit includes all the content presented around the world at the Web Camps events; presentations, demos, labs and more. Inside you'll find content that covers the following technologies ASP.NET MVC 3, jQuery, IE 9 and HTML5, OData, Web Apps, WebMatrix and more!


Diese Webcamps für professionelle und nicht professionelle Entwickler sind gratis und finden auf der ganzen Welt statt.

5 - Templates

Direkt hier gelandet? Alle Beiträge über Webmatrix zeigen

Von der Startseite können verschiedene Templates ausgewählt werden, die schon einiges hergeben. Schauen wir uns doch einmal die Bäckerei an. Dazu wird das geünschte Template einmal angeclickt und unten gleich der gewünschte Filename vergeben. nach dem Bestätigen mit ok wird das Teplate automatisch mit allem drum und dran installiert.

Die Auswahl 'Files' zeigt die nun vorhandenen Dateien. Ein Click auf 'run' startet die Seite 'Default.cshtml', was dann so aussieht:

Ist doch schon mal ganz manierlich, oder? Wir haben nun bereits ein funktionierendes Bestellsystem:

Es wäre doch schade, wenn man bei der Bestellung nicht sieht, ob die leckeren Zitronentörtchen noch an Lager sind. Das wird jetzt geändert. Dazu rufen wir die Datenbank auf und tragen eine neue Variable 'Stock' ein:

Jetzt tragen wir in der Datenansicht die Lagermengen ein:

Eine kleine Codeänderung ist jetzt noch erforderlich. Dazu rufen wir die Seite 'Order.cshtml' auf und ergänzen die gelb markierten Zeilen:

und erhalten nun bei der Bestellung des Zitronentörtchens das folgende Ergebnis:

während die übrigen Produkte auf Grund der Vorräte bestellt werden können:

It's magic - it's Webmatrix!

Wehr mehr wissen will, der folge diesem Link

6 - Administration

Direkt hier gelandet? Alle Beiträge über Webmatrix zeigen

Jetzt ist noch Zeit umzukehren. Wir tauchen nämlich in die Administration der Matrix. Nachher gibt es kein zurück mehr, ihr kennt ja den Film ;-)

Die Administration der Site ist aus Sicherheitsgründen etwas speziell. Deshalb auch hier eine kurze Anleitung. Nach dem Aufruf der Administration wird man wie gewohnt zur Vergabe eines Passwortes inkl. Bestätigung aufgefordert:

Aus Sicherheitsgründen wird man nun aufgefordert, in der erzeugten Passwortdatei den '_' zu entfernen:

Das geschieht wie unten dargestellt:

Sobald das geschehen ist, erscheint der normale Login Bildschirm. Anscheinend ist das ein Schutz gegen Hijacking, wenn man vergisst ein Passwort zu vergeben.

Zu guter letzt sei noch erwähnt, dass sich unter dem markierten Pfeil noch einige Einstellungen wie Optionen, Neue Seite usw. verbergen:

Jetzt geht die Post erst richtig ab!

Natürlich darf auch heute ein Linktipp nicht fehlen. Hier werden nochmals die Grundlagen beleuchtet.

Webmatrix (5)

7 - Razor seift alle ein

Direkt hier gelandet? Alle Beiträge über WebMatrix zeigen

Wenn WebMatrix verwendet wird, will man dynamische Inhalte ausgeben. Andernfalls bräuchte man keine serverseitige Programmiersprache und auch keine Datenbank. Aber wie bringt man nun dem Server bei, was man ausgeben will? In php geschieht das wie im Bild dargestellt und dem $-Zeichen. Razor kennt nur ein einziges allgegenwärtiges Zeichen und zwar den @. Somit stellt Razor alles je dagewesene in den Schatten und kann auch nicht mehr übertroffen werden. Aber Achtung: Der Anwender muss wissen wie 'Razor' denkt, sonst gibt es unerwartete Ergebenisse. Auf der andern Seite ist Razor verblüffend fehlertolerant und kann manchmal fast gedankenlesen.
Razor unsterstützt schwerpunktmässig C# (Sharp? Razor? vielleicht deshalb Razor?). Erfreulicherweise wird aber auch Visualbasic unterstützt. Während es zu C# jede Menge Literatur gibt, ist das aber bei VB im Zusammenhang mit WebMatrix noch etwas rarer.
Betrachten wir zum Schluss dieses Teils noch kurz die obige Abbildung (unten nochmals wiedergegeben ohne HTML Code). Während php auch recht kurz gehalten ist, schlägt Razor dem Fass den Boden hinaus:

...
    @for (int i=0; i<10; i++)  {         

         @i
    }
....

Der erste @ teilt dem Server mit, dass jetzt Code kommt. Der zweite @ markiert, dass i eine dynamische Variable ist und deshalb der Inhalt auszugeben ist. Punktum, das wars. Aber woher weiss Razor wo der Code aufhört. Was geschieht mit HTML innerhalb dem Code und ausserdem haben doch Mailadressen auch einen @ intus. Fragen über Fragen, die nach und nach beantwortet werden.

Hier noch wie gewohnt ein Linktipp. Auserdem bitte Linktipp aus Teil 4 beachten.