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.

8 - Die kleinen Helferlein

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

WebMatrix ist sehr stark darauf ausgerichtet, dass fertige Quellen einfach eingebunden werden können. Ein wichtiges Instrument sind dabei die 'Helper'. Helper sind vom Prinzip her Klassen, deren Methoden und Eigenschaften äusserst einfach angesprochen werden können.

Auf eine Vielzahl von Helpern kann über die Admin Seite zugegriffen werden.Es gibt aber auch noch andere Quellen wie die Snippet Plattform Gist. Snippets sind kleine wiederverwendbare Codeschnipsel.

Im folgenden wollen wir einmal ein Gästebuch in die Bäckerei einbauen. Die Bäckerei wie in Folge 5 beschrieben, kann schon mal gestartet werden. Die dort gemachten Codeanpassungen werden für das Gästebuch nicht benötigt. Es kann also auch das Standardtemplate verwendet werden. Als Vorbereitung benötigen wir nun noch eine neue Seite (rechts-Click auf den Root Eintrag - New File - CSHTML) mit dem Namen '_AppStart.cshtml'. Ausserdem wird noch ein Folder 'App_Code' und eine Seite GuestbookHelper.cshtml benötigt. Die defaultmässigen Inhalte der neuen Seiten können gelöscht werden. Das Ganze sieht dann so aus:

Nun holen wir uns ein Helperscript von Gist:

Ein Click auf den Gästebuch Helper zeigt das Script. Um das Script kopieren zu können muss oben rechts 'raw' angewählt werden, sonst gibt es einen Buchstabensalat:

Das Script wird in den Kopierpuffer genommen und in die vorhin neu erstellte Seite 'GuestbookHelper.cshtml' kopiert. Anschliessend muss der Name der Datenbank in der ersten Codezeile eingetragen werden. Bei uns heisst die Datenbank 'bakery':

Nun initialisieren wir die Datenbank ....

.... und tragen auf der Seite 'Default.cshtml' folgenden Code ein:

Obiger Code bewirkt eine Anzeige des Gästebuchs. Man kann jetzt ruhig einmal die Seite mit Run ausführen. Auf 'Home' sihet man aber erst den Titel 'Gästebuch'. Noch nicht sehr sexy. Klar, wir brauchen noch Einträge. Somit ergänzen wir die Seite 'About' wie folgt:

Drückt man jetzt auf Run und wechselt auf About, sieht man ein Eingabeformular:

Nicht schlecht für eine Codezeile, oder? Leider hat das ganze nun noch einen Haken. 'Show Form' zeigt zwar das Eingabeformular, einen Befehl, den Eintrag zu speichern ist aber nirgens ersichtlich. In der konventionellen Programmierung würde nun der Befehl an die Datenbank folgen, nicht aber im Web. Hier wird das Formular mit 'Submit' abgeschickt und ruft sich selbst wieder auf. Im Kopf des Formulars wird dann geprüft, ob Einträge vorhanden sind. Wem das nicht geläufig ist, muss sich unbedingt in die Thematik einarbeiten.

Also brauchen wir im Kopf des Formulars noch folgenden Code:

Damit veranlassen wir den Eintrag in die Datenbank und springen nach dem Eintrag gleich auf die Seite Home. Der Helper verfügt über einen eigenen Test, ob ein Post Eintrag vorhanden ist. Auf die gezeigte Weise spart man sich aber einige CPU Takte, da der Helper nur bei einem Eintrag aufgerufen wird. Wenn nun alles richtig ist, müssten die Einträge jetzt vorgenommen werden und das sieht dann so aus:

Cool, nicht! Aber wo werden jetzt eigerntlich die Einträge gespeichert? Schauen wir unds doch mal die Datenbank an:

Wie man sieht, wurde eine Tabelle 'Guestbook' in der Datenbank 'bakery.sdf' angelegt. Hier werden die Daten verwaltet.

Zum Schluss wie üblich noch ein Linktipp. Im Webcast von Dariusz Paris werden die Helper und vieles mehr anschaulich erklärt.

9 - Login, Mail und Captchas

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

Ich bin auf die Webmatrix gestossen, weil ich schon lange eine Pendenzenverwaltung der spezielleren Art mit einfacher 'Grafik'  aber ausgefeilten Datenbankfunktionen bauen wollte. Aus diesen Grund verlassen wir jetzt die Bäckerei und wenden uns dem Starter Template zu. In der letzten Folge haben wir mit wenigen Befehlen ein Gästebuch konstruiert. In dieser Folge bauen wir uns mit nicht viel mehr Befehlen eine komplette Webauthentifikation mit Captcha Sicherung und Mailversand, um sicherzustellen, dass sich die richtige Person auf der Seite registriert hat.

Mit 'new Site - Template' laden wir die englische Starterseite. Mit der neusten Betaversion von Webmatrix funktioniert das Template einwandfrei. Von älteren Versionen habe ich gehört, dass Bugs vorhanden sind.Ich habe die Seite mal 'Pendenzenliste' genannt. Wie weit ich das Projekt hier im Blog beschreibe, lasse ich vorderhand mal offen. Interessenten können aber gerne einen Kommentar hinterlassen.

Als ersten Schritt schalten wir die Administration frei, wie das in Folge 6 beschrieben wurde. Sinnvollerweise installiert man jetzt die neuste Webhelper Library, die unter 'Pakete - Anzeigen online' zu finden ist. Diese Library arbeitet im Hintergrund und wird z.B. bereits für die Funktion der Captchas benötigt.

Als zweiten Schritt richten wir das Mail ein. Dazu werden in der Seite _AppStart.cshtml die Kommentare entfernt und die Zugangsdaten des Mails eingetragen. Und o Wunder, o Wunder dem Mail Helper sei Dank, funktioniert das Mail bereits.

Mit 'Run - Registration' gelangt man auf die Anmeldeseite, die eigentlich bereits funktioniert. Es befindet sich eine Anleitung auf der Seite, wie man einen Captcha Code einbauen kann. Das machen wir übungshalber im dritten Schritt. Die 'Arbeit' besteht darin, sich auf der Seite reCaptcha zu registrieren, den Public und den Privat Key zu besorgen und am richtigen Ort einzutragen und einige Kommentare zu entfernen. Das war's dann bereits.

Jetzt kann man sich registrieren, bekommt einen Aktivierungslink per Mail und kann einen Account aktivieren.

Ging das zu schnell? Nochmals langsam zum mitschreiben findet sich hier eine Anleitung.

10 - Layouts

Auch ein einfacher Webauftritt besteht aus vielen einzelnen Seiten. Es wäre mühsam, jedesmal den gesamten Rahmen in jede Seite einzubauen. Aus diesem Grund gibt es in WebMatrix die Layouts. Der Aufruf erfolgt natürlich via Razor und ist wie üblich sehr einfach gehalten:

Die erste Zeile spezifiziert die Layout Seite, auf der zweiten Zeile kann der Seitentitel angegben werden.

Die Seite '_SiteLayout.cshtml' enthält die allen Seiten gemeinsamen Spezifikationen. Der '_' bedeutet in WebMatrix dass die Seite von aussen nicht zugänglich ist. Gerade bei Privat Keys wie sie z.B. für die Captchas benötigt werden ist das natürlich essentiell. Beim Seitenlayout wäre ein direkter Zugriff zwar nicht schlimm aber sinnlos.

Nun bearbeiten wir noch die oben erwähnte Seite _SiteLayout.cshtml. Wir wollen hier nämlich noch die Menueinträge ergänzen:

Der Aufruf wird aber noch nicht funktionieren, weil wir die Seite 'Adress_Input' erst in der nächsten Folge erstellen.

Eine gute Übersicht über Layouts findet ihr hier und hier.

11 - SOAP Service mit XML und LINQ parsen

In vorangehenden Beiträgen wurde schon ein paarmal aufgezeigt, was mit einigen wenigen Codezeilen alles erreicht werden kann.

Jetzt wollen wir uns einmal anschauen, wie die Mächtigkeit des .net Frameworks genutzt werden kann. Dazu gibt es das folgende Tutorial. Darin wird gezeigt, wie von einem amerikanischen Wetterdienst XML Daten geparst und in eine SQL Datenbank geschrieben werden können.


So sehen die Rohdaten aus. Uns interessieren die Minimum- und die Maximum Temperatur.





Leider enthält das Tutorial zwei kleine Fehler:

• In der ersten Zeile der Seite 'Weather.cshtml' muss unbedingt die folgende Deklaration eingefügt werden: @using System.Xml.Linq;
• Der Aufruf der Hauptfunktion muss natürlich 'public' deklariert sein und lautet dann wie folgt: public static Temperature GetWeather(string zipcode){

Man begegnet zunehmend dieser Art von Services, indem Daten in einem vorgegebenen Format (meistens XML) zur Verfügung gestellt und automatisch abgerufen werden können. In der Regel geschieht das mittels SOAP (Simple Object Access Protocol). Leider ist das Protokoll aber nicht wirklich simpel. Die Thematik ist recht komplex und sprengt den Rahmen dieses Blogs bei weitem. Es lohnt sich, jeweils nach entsprechenden Templates zu suchen. Ein prominente Seite ist. z.B. Amazon. So ist das Format auch im oben gezeigten Fall eigentlich nicht XML sondern DWML (Digital Weather Markup Language). DWML ist aber XML kompatibel.