Webentwicklung 101 - Teil 5: Eine Datenbank nutzen

In dieser Folge der Tutorialreihe zeigen wir Ihnen, wie Sie aus der statischen Liste an Filmen auf Ihrer Webseite eine dynamische machen können. In anderen Worten: Anstatt die Liste mit Filmen direkt in HTML zu schreiben, werden wir sie in eine Datenbank auslagern. Anschließend können wir mit WebMatrix diese Datenbank auslesen und HTML daraus generieren lassen.

Eine Datenbank mit WebMatrix erstellen

Bevor eine Datenbank erstellt werden kann, müssen Sie in den Datenbank-Bereich von WebMatrix wechseln. Dort haben Sie dann die Möglichkeit eine neue Datenbank anzulegen.

webmatrix_101_p5_01

Fügen Sie eine Datenbank hinzu, WebMatrix benennt Sie automatisch nach dem Titel Ihrer Webseite, in unserem Fall Filme.sdf. Die Datenbank ist nun in Ihrem Datenbank-Explorer sichtbar.

webmatrix_101_p5_02

Inhalte zur Datenbank hinzufügen

In der Funktionsleiste von WebMatrix sehen Sie verschiedene Optionen, die Sie auf Ihre Datenbank anwenden können. Starten Sie mit dem Befehl „Neue Tabelle“. Sollte nichts passieren, wenn Sie auf „Neue Tabelle“ klicken, gehen Sie sicher, dass Ihre Datenbank auch ausgewählt ist.

webmatrix_101_p5_03

WebMatrix wird nun eine Tabelle für Sie erstellen und den so genannten Column Editor öffnen. Dort können Sie dann neue Spalten für Ihre Tabelle anlegen. In der Sprache der Datenbanken enthält ein Record alle Daten eines Datensatzes. Für eine Person könnte das zum Beispiel Name, Adresse, Alter und Telefonnummer sein. Columns (Spalten) sind die Werte innerhalb eines bestimmten Datenteils (z.B. die Adresse), unabhängig in welchem Record sie sind.

Als Erstes erstellen Sie eine ID. Die ID ist einfach ein Identifier für einen einzelnen Record. Für eine so einfache Datenbank, wie hier nun erstellt wird, wäre die ID zwar nicht nötig, aber bei komplexeren Datenbanken ist sie dringend nötig, um bestimmte Datensätze einfach tracken und suchen zu können. Füllen Sie den Column Editor folgend aus:

webmatrix_101_p5_04

Damit geben Sie der ersten Spalte den Namen “id” und bestimmen, dass diese mit einem Zahlenwert (bigint) gefüllt sein soll, welcher immer gefüllt sein muss („Nullwerte zulassen“ steht auf „false”). Außerdem wird festgelegt, dass es sich bei diesem Feld um eine Identität (Identity) handelt. Das bedeutet, dass der Datenbank mitgeteilt wird, dass dieses Feld als ID genutzt wird. Das Gute daran ist, dass immer wenn die Datenbank um einen neuen Datensatz erweitert wird, die ID automatisch aktualisiert wird.

Also nächstes legen wir fest, dass dieses Feld der “Primary Key” ist. „Keys“ sind Spalten in Ihrer Datenbank, die spezielle Inhalte haben. Sie helfen dabei, bestimmte Daten einfacher zu finden. Wenn Sie zum Beispiel bei einer Firma arbeiten, die Ihnen eine bestimmte Angestelltennummer zuordnet, können Sie durch diese Nummer leichter identifiziert werden, als zum Beispiel durch Ihren Namen (da Namen ja auch durchaus doppelt vorkommen könnten). Daher ist die Angestelltennummer der beste Schlüssel (Key), um Sie zu finden. Es mag diverse Schlüssel geben, um Sie zu finden, aber der Primary Key sollte der wichtigste sein. Aus diesem Grund werden wir jedem Film in unserer Datenbank eine ID als Primary Key zuordnen.

Nutzen Sie die Option “Neue Spalte”, um drei neue Spalten in Ihrer Tabelle anzulegen. Es erscheinen daraufhin drei leere Spalten in Ihrer Tabelle. Wählen Sie die erste aus und geben Sie ihr den Namen „Titel“ und den Datentyp „ntext“. „Ist Primärschlüssel“ und muss auf „false“ stehen. Der zweiten Spalte geben Sie den Namen „Erscheinungsjahr“ und den Datentyp stellen Sie auf „bigint“. Die dritte Spalte heißt schließlich „Genre“ und der Datentyp ist „ntext“. Wenn Sie die Tabelle speichern, werden Sie nach einem Namen für die Tabelle gefragt, nennen Sie sie zum Beispiel „Filme“. Dieser Name erscheint dann in der linken Spalte der Oberfläche.

webmatrix_101_p5_05

Daten zur Tabelle hinzufügen

Wenn Sie in der linken Leiste die Tabelle mit einem Doppelklick öffnen, öffnet sich diese, allerdings noch ohne Daten.

webmatrix_101_p5_06

Gehen Sie mit dem Cursor auf die einzelnen Felder und tragen Sie dort die gewünschten Daten ein. Mit der Tab-Taste gelangen Sie ins nächste Feld.

webmatrix_101_p5_07

Nach einem erneuten Drücken der Tab-Taste erscheint im Feld id automatisch eine Zahl. Sie sollten diese Spalte nicht selbst bearbeiten, sondern dies die Datenbank selber machen lassen. Auf die selbe Art und Weise können Sie nun auch die weiteren Filme eintragen.

webmatrix_101_p5_08

Eine Seite zur Nutzung der Daten erstellen

Für das Layout der Seite kann die _siteLayout.cshtml aus der letzten Folge des Tutorials verwendet werden. Für den eigentlichen Inhalt wird eine neue CSHTML-Seite benötigt: filmtabelle.cshtml. Folgender Quellcode hat auf der statischen HTML-Seite (aus den letzten Folgen des Tutorials) die Filmliste angezeigt:

<div id="filmliste">
    <ol>
     <li><a href="#">Waynes World</a></li>
     <li><a href="#">Sonnenallee</a></li>
     <li><a href="#">Last Boy Scout</a></li>
     <li><a href="#">Tron</a></li>
     <li><a href="#">Sissi die junge Kaiserin</a></li>
   </ol>
 </div>
 

Diese statische Liste hat fünf Listenelemente. Wenn Sie ein weiteres Element hinzufügen wollen würden, müssten Sie dies mit einem weiteren <li>-Tag tun. Wenn Sie nun die Daten aus einer Datenbank beziehen wollen, weiß die Seite im Vorfeld nicht, wieviele Elemente enthalten sein werden. Aus diesem Grund muss sie „n“ <li>-Elemente erzeugen, wobei „n“ dabei die Anzahl der Datenbankeinträge ist. Bevor das angegangen werden kann, müssen Sie die Seite erst einmal auf die Existenz der Datenbank hinweisen. Am Anfang unserer Seite benötigen wir daher folgenden Codeschnipsel:

 
     @{
       var db= Database.Open("Filme");
       var sqlQ = "SELECT * FROM Filme";
       var data = db.Query(sqlQ);
     }   
 

Wie Sie sich sicher erinnern, steht das @-Symbol im Quelltext immer vor Abschnitten mit Razor-Code. Da wir in diesem Fall mehrere Zeilen Code benötigen, wird dieser in geschweifte Klammern gesetzt. Schauen wir uns den Codeschnipsel Zeile für Zeile an:

var db= Database.Open("Filme");

var’ steht für Variable und ist ein Item, das Daten enthält. Diese Codezeile sagt dem Server, dass er die Datenbank mit dem Namen “Filme” öffnen soll und die Referenz in der Variable “db” speichern soll.

var sqlQ = "SELECT * FROM Filme";

Diese Zeile erstellt eine Variable mit dem Namen sqlQ und speichert das SQL-Kommando “SELECT * FROM Filme“ darin. [Wenn Sie mit Datenbanken arbeiten, wird meistens eine Sprache genutzt, die sich “Structured Query Language” (SQL) nennt. Die verschiedenen Möglichkeiten, die mit SQL einhergehen, werden Sie in den kommenden Folgen dieser Reihe kennen lernen.] Um Daten aus seiner Datenbank zu erhalten, wird üblicherweise der Befehl SELECT genutzt. Die Syntax hierfür lautet ‘SELECT <something> FROM <somewhere> WHERE <condition>’. <something> kann dabei eine Liste von Feldern oder eine sog. Wildcard (*) sein, was im Grunde “alles” aus dem gewählten Bereich bedeutet. Die Codezeile bewirkt daher, dass alle Spalten und alle Records der Datenbank abgerufen werden.

var data = db.Query(sqlQ);

WebMatrix hat von sich aus erkannt, dass das eine Datenbank ist, was Sie geöffnet haben, und für ein Datenbank-Objekt hält WebMatrix eine Menge von Funktionen bereit. Zum Beispiel die Query-Methode, die eine SQL-Funktion startet. Über diesen Befehl liefert die Datenbank eine Reihe von Daten zurück, die in der Variablen data gespeichert werden. Nun da wir die Daten haben, können wir verschiedene Dinge damit machen.

Im Moment sollte der Quellcode Ihrer Seite folgend aussehen:

  @{
       var db= Database.Open("Filme");
       var sqlQ = "SELECT * FROM Filme";
       var data = db.Query(sqlQ);
   }
   
 <div id="filmliste">
   <ol>
    <li><a href="#">Waynes World</a></li>
    <li><a href="#">Sonnenallee</a></li>
    <li><a href="#">Last Boy Scout</a></li>
    <li><a href="#">Tron</a></li>
    <li><a href="#">Sissi die junge Kaiserin</a></li>
  </ol>
</div>

Die Datenbank hat bereits Daten geliefert, allerdings sind derzeit noch die statischen Daten auf der Webseite – Zeit dieses zu ändern. Im ersten Schritt löschen Sie bitte alle Listenelemente bis auf eines.

  <ol>
    <li><a href="#">Waynes World</a></li>
  </ol>

Anstatt der statischen Einträge verwenden wir nun wieder Razor-Code:

     <ol>
     @foreach(var row in data)
       {
      		<li><a href="#">Waynes World</a></li>
       }
     </ol>     

Dieser Code teilt dem Server mit, dass er für jede Datenreihe in der Datenbank einen <li>-Tag schreiben soll. Das Ergebnis hier ist demnach, dass „Waynes World“ fünfmal geschrieben wird, da es insgesamt fünf Einträge in der Datenbank gibt.

webmatrix_101_p5_09

Im nächsten Schritt sollen nun die unterschiedlichen Filmtitel aus der Datenbank angezeigt werden. Als Sie die Datenbank angelegt haben, haben Sie eine Spalte mit dem Namen „Titel“ benannt. Ein einzelner Record wird als „row“ bezeichnet, fügt man dies zusammen, ergibt sich der Befehl row.Titel, der den Namen des Films enthält.

     <ol>
        @foreach(var row in data) 
       { 
         <li><a href="#">@row.Titel</a></li>
        } 
     </ol>
    

webmatrix_101_p5_10

Nun haben wir aus der statischen Seite eine dynamische Seite mit Datenbank gemacht. Fügen wir einen weiteren Film hinzu und schauen wir, was passiert. Wechseln Sie zur Datenbankansicht und fügen Sie einen weiteren Film hinzu, danach starten Sie die Webseite ohne weitere Veränderungen am Code.

webmatrix_101_p5_11

webmatrix_101_p5_12

Wie Sie vielleicht bemerkt haben, können Sie in WebMatrix dynamische Elemente bzw. Befehle innerhalb von statischem HTML-Code platzieren. So könnten Sie zum Beispiel auch ohne Probleme folgenden Code verwenden:

 <div id="filmliste">
   <ol>
    @foreach(var row in data){ 
    <li><a href="#">@row.Titel, @row.Genre, @row.Erscheinungsjahr</a></li>
    } 
   </ol>
  </div>
 
   

webmatrix_101_p5_13

Zusammenfassung

In diesem Artikel haben Sie au seiner statischen Seite eine dynamische gemacht, indem Sie eine SQL Server Compact-Datenbank mit Ihren Lieblingsfilmen angelegt haben und die Daten darin für Ihre Webseite ausgelesen haben. Kombiniert mit den Layout-Funktionen aus den vorausgegangen Artikeln haben Sie schnell und einfach eine Seite mit wenig Code erstellt, die alle Anforderungen erfüllt.

You can discuss this article using the adjacent Facebook talkback.

For technical questions please visit our discussion forums, where we have a vibrant community of developers like you, as well as Microsoft engineers who are ready to answer your questions!