Webtechnologien Wintersemester 2024

Model View Controller

Sogar Google!!1

Golem - Google Inbox

Quelle: golem.de

Und es ward ihbahbah

<div class="users">
   <?php
      $link = mysqli_connect("localhost","root","root","database")
         or die("Error: " . mysqli_error($link));
      $query = "SELECT name FROM users"
         or die("Error: " . mysqli_error($link));
      $result = mysqli_query($link, $query); 
      while($row = mysqli_fetch_array($result))
         echo '<span class="user">', $row["name"], "</span>";
   ?>
</div>

Beherrschung von Komplexität

Quelle: Reddit

  • Wenn Software wächst, wird sie komplizierter und schwieriger zu verstehen
  • Gute Programmierung ist nicht, etwas zum Laufen zu bringen
  • Gute Programmierung ist Beherrschung von Komplexität

Beispiel

  • Firma hat einen Angestellten, der alles macht. Und es funktioniert.
  • Die Firma wächst und stellt weitere Mitarbeiter ein, die sich aber auch (horizontal) um alles kümmern
  • Jeder Mitarbeiter ist für Verkauf, Management und Lagerhaltung zuständig
  • Es kommt zu Inkonsistenzen, Fehlern etc
  • Firma wächst
  • Einer kümmert sich um den Verkauf (V), einer um alles andere (MC)
  • Firma wächst
  • Strukturiert um: Spezielle Mitarbeiter für Lagerhaltung (Model), Management (Controller) und Vertrieb (View)
  • Je nachdem, welcher Bereich mehr Mitarbeiter braucht, kann größer werden, ohne die anderen zu belasten (Erweiterbarkeit)
  • Alle Lagermitarbeiter können entlassen und die Abteilung outgesourced werden und trotzdem läuft alles weiter, ohne dass der Kunde es merkt.

Model View Controller

MVC

Model Datenmodell
View Präsentation
Controller Programmsteuerung
  • Grundlegender Gedanke: Logik und Darstellung sind getrennt.
  • Muster zur Strukturierung von Code / Architekturmuster / Entwurfsmuster
  • Je nach Kontext auch: HMVC (Hierarchical MVC), MVP (Presenter), MVVM (Model View ViewModel) und mehr
  • Trennung: Es können dadurch neue Views entworfen werden, ohne das Model zu verändern und vice versa.

Vorteile

  • Gute Architektur (Organisiert, Strukturiert, leicht verständlich)
  • Erleichtert Arbeitsteilung zwischen Designern und Entwicklern
  • Erhöht die Modularität
  • Verbessert die Verwaltbarkeit / Wartbarkeit und Erweiterbarkeit
  • Schnellere Änderbarkeit und weniger ungewollte Nebeneffekte

MVC in Java

MVC UML

Quelle: tutorialspoint.com

  • Controller kennt Model und View und ermöglicht Kommunikation

MVC im Web

  • Unter anderem Ruby on Rails hat MVC im Web populär gemacht und viele der heutigen PHP-Frameworks inspiriert
  • MVC funktioniert im Web komplexer, da es sich über Server und Browser erstreckt
  • Server kann nicht direkt auf Interaktion im Browser reagieren (wie im Observer-Muster), sondern ist an den Request-Response-Cycle gebunden
  • Konzept der Hyperlinks vermischt Concerns
  • Identifiziert Ziel und nicht Quelle
  • Abstrakt betrachtet übernimmt der Browser dabei die sichtbare Darstellung und unmittelbaren Nutzereingaben, sowie die nicht seitenspezifischen Funktionen von Controller und View.
  • Der Server steuert die Anzeige im Browser dabei, indem er über HTTP mit ihm kommuniziert.

MVC im Web

Model Für den Browser das HTML-Dokument. Gesamt aber nur eine weitere Schicht und das eigentliche Model liegt auf dem Server.
View Interpretation und Darstellung des HTMLs.
Controller Formulareingaben und letztlich das Absetzen neuer HTTP-Anfragen. Auf dem Server wird daraufhin die Erstellung einer neuen View angestoßen.

MVC im Web

Beispiel - normaler Weg

  • Anfrage sanitizen
  • Daten holen
  • Daten verarbeiten
  • HTML mit Daten rendern

Beispiel 2 - Web

HTTP Anfrage von einem Web-Client (Browser) zu einem Server und dem darauf laufenden Framework, um eine HTTP-Antwort zu erzeugen, die zurück an den Client geht

  1. HTTP-Anfrage geht ein (index.php), parst URL, beispielsweise für die Startseite, kreiert passenden Controller und ruft passende Methode auf
  2. Controller bekommt Anfrage und überlegt, was er dafür braucht
  3. Merkt, dass er Daten aller Artikel benötigt
  4. Erstellt ein Model, das ihm diese Daten gibt und verarbeitet diese
  5. Merkt, dass er diese Daten darstellen möchte und holt sich die passende View
  6. Gibt der View die anzuzeigenden Daten und bekommt den fertigen Code zurück
  7. Liefert alles aus
  8. Benutzer sieht gewünschte Website
  9. Profit!

JavaScript-Bibliotheken / AJAX

  • Laufen auf dem Client
  • Nehmen eine besondere Stellung ein, da zwischen Server und Nutzer
  • Observer-Pattern und andere möglich

Beispiel - moderne Webandwendung

  • früher waren alle Teile von MVC auf dem Server, der Client war nur dummer Anzeiger
  • heute wandern immer mehr Teile davon in den Client
  • Server nur noch als Daten-Verarbeiter und -lieferant
  • Alle MVC-Teile werden gleichzeitig auf dem Client gehalten

Code