Webentwicklung 101 - Teil 6: Daten über eine Webseite hinzufügen

Nachdem Sie bisher schon einiges rund um das Erstellen von datengetriebenen Webseiten mit WebMatrix erfahren haben, demonstriert Ihnen diese Folge der Tutorialreihe, wie Sie eine Seite erstellen, über die Sie Daten zu Ihrer Datenbank hinzufügen können.

Eine Seite zum Hinzufügen von Daten erstellen

Als Erstes müssen wir hierfür eine weitere Seite in WebMatrix erstellen, diese bekommt den Namen NeuerFilm.cshtml. Als Erstes entfernen Sie den Inhalt der Seite und ersetzen ihn durch die folgende Überschrift:

<h1>Einen neuen Film hinzufügen</h1>
    

Wechseln Sie anschließend zu Ihrer Seite filmtabelle.cshtml, sie sollte ungefähr folgenden Inhalt enthalten:

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

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

Vor dem schließenden <div>-Tag fügen Sie folgenden HTML-Code ein, der einen Link zur eben erstellten NeuerFilm.cshtml hinzufügt:

<a href="NeuerFilm.cshtml">Einen neuen Film hinzufügen</a>
 
   

Im Browser sollte das dann ungefähr so aussehen (mit einem Klick auf den neu eingefügten Link, kommen Sie auf die zu Beginn des Tutorials angelegte Seite, die nun mit Inhalt gefüllt werden soll):

webmatrix_101_p6_01

Ein Formular “Film hinzufügen” erstellen

Bei der Nutzung von HTTP sendet der Browser üblicherweise eine Anfrage an den Server. Hierfür nutzt er den Befehl GET aus dem HTTP-Protokoll, welcher Informationen vom Server mitgeteilt bekommt. Neben GET unterstützt das HTTP-Protokoll außerdem den Aufruf POST, welcher es Ihnen ermöglicht, Informationen an den Server zu schicken. Hierfür verwendet man in den meisten Fällen ein HTML-Formular (form). Wenn Sie auf Absenden klicken, nutzt der Browser den POST-Befehl, um Informationen an den Sender zu schicken. Starten wir mit einem einfachen Formular:

<h1>Einen neuen Film hinzufügen</h1>
        <form action="" method="post">
          <p>Name:<input type="text" name="formName" /></p>
          <p>Genre:<input type="text" name="formGenre" /></p>
          <p>Erscheinungsjahr:<input type="text" name="formYear" /></p>
          <p><input type="submit" value="Hinzufügen" /></p>
        </form>
 

Und so sieht das Ganze dann im Browser aus:

webmatrix_101_p6_02

Die Überschrift können Sie zusätzlich noch mit folgenden Angaben in Ihrer CSS-Datei an das Layout anpassen:

h1 {  
font-size: xx-large; 
font-weight: normal; 
padding: 0px; 
margin: 0px;  
} 

Daraufhin ändert sich das Aussehen der Überschrift entsprechend:

webmatrix_101_p6_03

Werfen wir nun einen Blick auf den wirklich interessanten Teil des Quellcodes, das Formular:

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

Das erste Tag, das wir kennen lernen, ist das <form>-Tag, welches das Formular definiert. Es teilt dem Server weiterhin mit, dass wenn der Absenden-Button (welcher innerhalb des <form>-Tags erforderlich ist) gedrückt wird, eine HTTP POST-Aktion gestartet wird. Da der Parameter action leer bleibt, weiß der Server, dass dieselbe Seite (NeuerFilm.cshtml) auch für die Aktion zuständig ist.

<p>Name: <input type="text" name="formName" /></p>
<p>Genre: <input type="text" name="formGenre" /></p>
<p>Jahr: <input type="text" name="formYear" /></p> 

Innerhalb des <form>-Tags finden sich drei <input>-Controls – diese können verschiedene <type>-Einstellungen verwenden, in unserem Fall ist der type als text definiert. Dadurch werden drei einfache Texteingabefelder hinzugefügt. Über die Variable name wird den Textfeldern ein eindeutiger Name zugeordnet, den der Server nutzt, um die eingegeben Daten darunter abzulegen.

<p><input type="submit" value="Hinzufügen" /></p>

Schließlich gibt es noch das <input>-Control, mit dem typesubmit”, welches den Absenden-Button definiert. Wenn dieser vom User gedrückt wird, werden die eingegebenen Daten an den Server geschickt. Im Moment würde das noch zu keinem Ergebnis führen, da der Code zur Verarbeitung der Daten noch fehlt.

Die Formular-Daten verarbeiten

Bei der Erstellung des Formulars wurde der Parameter action leer gelassen, was zur Folge hat, dass dieselbe Seite für die Aktion des Formulars zuständig ist. Damit die Seite diese Aufgabe übernehmen kann, benötigt sie etwas Code, fügen Sie daher einen Codeblock am Anfang Ihrer Seite ein, der immer dann aufgerufen wird, wenn die Seite geladen wird:

     @{ 
       // Code to execute 
     } 

<h1>Einen neuen Film hinzufügen</h1>
        <form action="" method="post">
          <p>Name: <input type="text" name="formName" /></p>
          <p>Genre: <input type="text" name="formGenre" /></p>
          <p>Jahr: <input type="text" name="formYear" /></p>
    <p><input type="submit" value="Hinzufügen" /></p>
 </form>

Eine Aufgabe, die dieser Codeblock erledigen muss, ist herauszufinden, ob mit dem Formular ein GET- oder ein POST-Befehl ausgelöst wird. Dank des .NET Framework geht dies relativ einfach, nutzen Sie einfach die Abfrage If(IsPost), sollte diese mit true beantwortet werden, wissen Sie, dass ein Formular mit zu sendenden Daten vorliegt.

     @{ 
       If(IsPost) 
       { 
         // Do something on the POST 
       } 
     }   

Beim Aufsetzen des Formulars haben Sie drei „names“ (formName, formGenre, formYear) für die Eingaben des Users vergeben. Der Browser sendet diese dann nach Drücken des Absenden-Buttons in folgender Art und Weise an den Server: 'formName=something', 'formGenre=something','formYear=something' usw.

Nun müssen ein paar Server-Variablen festgelegt werden, um die Angaben dort speichern zu können. Außerdem muss HTTP Post ausgelesen werden:

     @{
       var MovieName="";
       var MovieGenre="";
       var MovieYear="";
       if(IsPost){
         MovieName=Request["formName"];
         MovieGenre=Request["formGenre"];
         MovieYear=Request["formYear"];
       }
     }

Mit diesem Codeschnipsel werden drei Variablen (MovieName, MovieGenre und MovieYear) angelegt und anschließend mit den Angaben des Users gefüllt. Im nächsten Schritt können die Angaben dann der Datenbank hinzugefügt werden.

Daten der Datenbank hinzufügen

In der letzten Folge der Tutorialreihe haben Sie anhand des SQL ‘SELECT’-Befehls Daten aus der Datenbank ausgelesen. Um Daten zur Datenbank hinzuzufügen, verwenden Sie den Insert-Befehl – der SQL INSERT-Befehl ist folgend aufgebaut:

INSERT INTO Table (Column1, Column2, ...ColumnN) VALUES (Value1, Value2, ... ValueN)

Im unserem Code würde das dann folgend aussehen:

     @{
     var MovieName="";
     var MovieGenre="";
     var MovieYear="";
       if(IsPost){
         MovieName=Request["formName"];
         MovieYear=Request["formYear"]; 
         MovieGenre=Request["formGenre"];
                  var SQLINSERT = "INSERT INTO Filme (Titel, Erscheinungsjahr, Genre) VALUES (@0, @1, @2)";
         var db = Database.Open("Filme");
         db.Execute(SQLINSERT, MovieName, MovieYear, MovieGenre);
       }
     }

Wie Sie sehen, wurde ein String mit dem Namen SQLINSERT eingefügt. Razor ermöglicht es, dem String parametrisierte Werte zuzuordnen. Das bedeutet, dass Sie anstatt 'MovieName', 'MovieGenre' und 'MovieYear' auch einfach @0, @1 und @2 verwenden können. Sie können diese Platzhalter auch vor der Verwendung leeren, um zu verhindern, dass Sie für eine so genannte „SQL Injection-Attacke“ genutzt werden.

Anschließend wird im Sourcecoode die Datenbank geöffnet und die Execute-Methode genutzt, um der Datenbank mitzuteilen, den SQLINSERT-Befehl zu starten.

Jetzt fehlt nur noch ein kleiner Codeschnipsel, fügen Sie diesen nach dem db.Execute()-Aufruf ein:

Response.Redirect("filmtabelle.cshtml");

Der Befehl führt den User auf die Seite zurück, auf der er die Filmliste, inklusive des neu eingegeben Films sehen kann. Starten Sie nun die Seite und geben Sie einen neuen Film ein, folgendes Ergebnis sollte Sie erwarten:

webmatrix_101_p6_04

Wichtig: In diesem Artikel haben Sie gelernt, wie ein User einen Eintrag direkt zur Datenbank hinzufügen kann. Für das Grundverständnis ist dies auch in Ordnung, wenn Sie eine Seite wirklich live stellen wollen, sollten Sie allerdings folgendes beachten:

  • Überprüfen Sie die Eingabeparameter auf valide Inhalte und geben Sie Feedback zurück, was möglicherweise falsch eingegeben wurde. Zum Beispiel, wenn irgendetwas anderes als eine Jahreszahl unter der Eingabemöglichkeit Jahr eingegeben wurde – weisen Sie den User darauf hin und geben Sie die Daten nicht einfach ohne Überprüfung an die Datenbank weiter.
  • Überprüfen Sie die eingegebenen Daten daraufhin, ob es sich um „Schadcode“ handelt, der Ihren Daten schaden könnte. Bei einer „SQL Injection“-Attacke wird zum Beispiel SQL-Code über das Formular eingeschleust, der von der Datenbank ausgeführt dann wird. Dies kann zum Beispiel dazu führen, dass private Daten ausgelesen werden oder die Datenbank nicht mehr erreichbar ist.

Zusammenfassung

Diese Folge unserer Tutorialreihe hat Ihnen demonstriert, wie Sie über den Browser Einträge zu Ihrer Datenbank hinzufügen können. In kommenden Folgen werden Sie sehen, wie Sie Daten über den Browser editieren oder löschen können.

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!