Webtechnologien
Wintersemester 2024
<!DOCTYPE HTML> <html lang="de"> <head> <meta charset="utf-8"> <title>Model View Controller</title> <meta name="viewport" content="width=792, user-scalable=no"> <base target="_blank"> <link rel="stylesheet" href="/assets/styles/presentation.css"> </head> <body class="list"> <div class="notes"> <a href="text.html" target="_parent">♯</a> <a href="/notes/" target="_blank">♫</a> </div> <header class="caption"> <h1>Model View Controller</h1> </header> <section id="model-view-controller" class="slide cover"><div><h2>Model View Controller</h2> <footer> </footer> </div></section> <section class="slide" id="sogar-google1"><div><h2>Sogar Google!!1</h2> <p><img src="golem_google_inbox.png" alt="Golem - Google Inbox" class="center" /></p> <p class="note">Quelle: <a href="http://www.golem.de/news/transpiler-googles-inbox-zu-zwei-dritteln-plattformuebergreifender-code-1411-110761.html">golem.de</a></p> </div></section> <section class="slide" id="und-es-ward-ihbahbah"><div><h2>Und es ward ihbahbah</h2> <pre class="highlight language-php" data-lang="php"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"users"</span><span class="nt">></span> <span class="cp"><?php</span> <span class="nv">$link</span> <span class="o">=</span> <span class="nb">mysqli_connect</span><span class="p">(</span><span class="s2">"localhost"</span><span class="p">,</span><span class="s2">"root"</span><span class="p">,</span><span class="s2">"root"</span><span class="p">,</span><span class="s2">"database"</span><span class="p">)</span> <span class="k">or</span> <span class="k">die</span><span class="p">(</span><span class="s2">"Error: "</span> <span class="mf">.</span> <span class="nf">mysqli_error</span><span class="p">(</span><span class="nv">$link</span><span class="p">));</span> <span class="nv">$query</span> <span class="o">=</span> <span class="s2">"SELECT name FROM users"</span> <span class="k">or</span> <span class="k">die</span><span class="p">(</span><span class="s2">"Error: "</span> <span class="mf">.</span> <span class="nf">mysqli_error</span><span class="p">(</span><span class="nv">$link</span><span class="p">));</span> <span class="nv">$result</span> <span class="o">=</span> <span class="nf">mysqli_query</span><span class="p">(</span><span class="nv">$link</span><span class="p">,</span> <span class="nv">$query</span><span class="p">);</span> <span class="k">while</span><span class="p">(</span><span class="nv">$row</span> <span class="o">=</span> <span class="nf">mysqli_fetch_array</span><span class="p">(</span><span class="nv">$result</span><span class="p">))</span> <span class="k">echo</span> <span class="s1">'<span class="user">'</span><span class="p">,</span> <span class="nv">$row</span><span class="p">[</span><span class="s2">"name"</span><span class="p">],</span> <span class="s2">"</span>"</span><span class="p">;</span> <span class="cp">?></span> <span class="nt"></div></span> </code></pre> </div></section> <section class="slide" id="beherrschung-von-komplexität"><div><h2>Beherrschung von Komplexität</h2> <video class="center" src="software.mp4" autoplay="" loop=""></video> <p class="note">Quelle: <a href="https://www.reddit.com/r/gifs/comments/451xch/infinite_battlebest_gif_ever/">Reddit</a></p> <footer> <ul> <li>Wenn Software wächst, wird sie komplizierter und schwieriger zu verstehen</li> <li>Gute Programmierung ist nicht, etwas zum Laufen zu bringen</li> <li>Gute Programmierung ist Beherrschung von Komplexität</li> </ul> <h3 id="beispiel">Beispiel</h3> <ul> <li>Firma hat einen Angestellten, der alles macht. Und es funktioniert.</li> <li>Die Firma wächst und stellt weitere Mitarbeiter ein, die sich aber auch (horizontal) um alles kümmern</li> <li>Jeder Mitarbeiter ist für Verkauf, Management und Lagerhaltung zuständig</li> <li>Es kommt zu Inkonsistenzen, Fehlern etc</li> <li>Firma wächst</li> <li>Einer kümmert sich um den Verkauf (V), einer um alles andere (MC)</li> <li>Firma wächst</li> <li>Strukturiert um: Spezielle Mitarbeiter für Lagerhaltung (Model), Management (Controller) und Vertrieb (View)</li> <li>Je nachdem, welcher Bereich mehr Mitarbeiter braucht, kann größer werden, ohne die anderen zu belasten (Erweiterbarkeit)</li> <li>Alle Lagermitarbeiter können entlassen und die Abteilung outgesourced werden und trotzdem läuft alles weiter, ohne dass der Kunde es merkt.</li> </ul> </footer> </div></section> <section class="slide" id="model-view-controller-1"><div><h2>Model View Controller</h2> <div class="parts "> <div class="part"> <p><img src="Diagram.svg" alt="MVC" /></p> </div><div class="part"> <table> <tbody> <tr> <td>Model</td> <td>Datenmodell</td> </tr> <tr> <td>View</td> <td>Präsentation</td> </tr> <tr> <td>Controller</td> <td>Programmsteuerung</td> </tr> </tbody> </table> </div> </div> <ul> <li>Grundlegender Gedanke: Logik und Darstellung sind getrennt.</li> </ul> <footer> <ul> <li>Muster zur Strukturierung von Code / Architekturmuster / Entwurfsmuster</li> <li>Je nach Kontext auch: HMVC (Hierarchical MVC), MVP (Presenter), MVVM (Model View ViewModel) und mehr</li> <li>Trennung: Es können dadurch neue Views entworfen werden, ohne das Model zu verändern und vice versa.</li> </ul> </footer> </div></section> <section class="slide" id="vorteile"><div><h2>Vorteile</h2> <ul> <li>Gute Architektur (Organisiert, Strukturiert, leicht verständlich)</li> <li>Erleichtert Arbeitsteilung zwischen Designern und Entwicklern</li> <li>Erhöht die Modularität</li> <li>Verbessert die Verwaltbarkeit / Wartbarkeit und Erweiterbarkeit</li> <li>Schnellere Änderbarkeit und weniger ungewollte Nebeneffekte</li> </ul> </div></section> <section class="slide" id="mvc-in-java"><div><h2>MVC in Java</h2> <p><img src="mvc_pattern_uml_diagram.jpg" alt="MVC UML" class="center" /></p> <p class="note">Quelle: <a href="http://www.tutorialspoint.com/design_pattern/mvc_pattern.htm">tutorialspoint.com</a></p> <footer> <ul> <li>Controller kennt Model und View und ermöglicht Kommunikation</li> </ul> </footer> </div></section> <section class="slide" id="mvc-im-web"><div><h2>MVC im Web</h2> <ul> <li>Unter anderem Ruby on Rails hat MVC im Web populär gemacht und viele der heutigen PHP-Frameworks inspiriert</li> <li>MVC funktioniert im Web komplexer, da es sich über Server und Browser erstreckt</li> <li>Server kann nicht direkt auf Interaktion im Browser reagieren (wie im Observer-Muster), sondern ist an den Request-Response-Cycle gebunden</li> <li>Konzept der Hyperlinks vermischt Concerns</li> <li>Identifiziert Ziel und nicht Quelle</li> </ul> <footer> <ul> <li>Abstrakt betrachtet übernimmt der Browser dabei die sichtbare Darstellung und unmittelbaren Nutzereingaben, sowie die nicht seitenspezifischen Funktionen von Controller und View.</li> <li>Der Server steuert die Anzeige im Browser dabei, indem er über HTTP mit ihm kommuniziert.</li> </ul> </footer> </div></section> <section class="slide" id="mvc-im-web-1"><div><h2>MVC im Web</h2> <table> <tbody> <tr> <td>Model</td> <td>Für den Browser das HTML-Dokument. Gesamt aber nur eine weitere Schicht und das eigentliche Model liegt auf dem Server.</td> </tr> <tr> <td>View</td> <td>Interpretation und Darstellung des HTMLs.</td> </tr> <tr> <td>Controller</td> <td>Formulareingaben und letztlich das Absetzen neuer HTTP-Anfragen. Auf dem Server wird daraufhin die Erstellung einer neuen View angestoßen.</td> </tr> </tbody> </table> </div></section> <section class="slide" id="mvc-im-web-2"><div><h2>MVC im Web</h2> <p><img src="ash-mvc-architecture11.gif" alt="" class="full-height center" /></p> <footer> <h3 id="beispiel---normaler-weg">Beispiel - <q>normaler Weg</q></h3> <ul> <li>Anfrage sanitizen</li> <li>Daten holen</li> <li>Daten verarbeiten</li> <li>HTML mit Daten rendern</li> </ul> <h3 id="beispiel-2---web">Beispiel 2 - Web</h3> <p>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</p> <ol> <li>HTTP-Anfrage geht ein (index.php), parst URL, beispielsweise für die Startseite, kreiert passenden Controller und ruft passende Methode auf</li> <li>Controller bekommt Anfrage und überlegt, was er dafür braucht</li> <li>Merkt, dass er Daten aller Artikel benötigt</li> <li>Erstellt ein Model, das ihm diese Daten gibt und verarbeitet diese</li> <li>Merkt, dass er diese Daten darstellen möchte und holt sich die passende View</li> <li>Gibt der View die anzuzeigenden Daten und bekommt den fertigen Code zurück</li> <li>Liefert alles aus</li> <li>Benutzer sieht gewünschte Website</li> <li>Profit!</li> </ol> </footer> </div></section> <section class="slide" id="javascript-bibliotheken--ajax"><div><h2>JavaScript-Bibliotheken / AJAX</h2> <ul> <li>Laufen auf dem Client</li> <li>Nehmen eine besondere Stellung ein, da zwischen Server und Nutzer</li> <li>Observer-Pattern und andere möglich</li> </ul> <footer> <h3 id="beispiel---moderne-webandwendung">Beispiel - moderne Webandwendung</h3> <ul> <li>früher waren alle Teile von MVC auf dem Server, der Client war nur <q>dummer Anzeiger</q></li> <li>heute wandern immer mehr Teile davon in den Client</li> <li>Server nur noch als Daten-Verarbeiter und -lieferant</li> <li>Alle MVC-Teile werden gleichzeitig auf dem Client gehalten</li> </ul> </footer> </div></section> <section class="slide shout" id="code"><div><h2>Code</h2> </div></section> <div class="progress"><div></div></div> <script src="/assets/scripts/shower.js"></script> <script src="/assets/scripts/shower-notes.js"></script> <script src="/assets/scripts/editor.js"></script> <script> document.querySelectorAll('[bg]').forEach(el => el.style.backgroundImage = `url(${el.attributes.bg.value})`); </script> </body> </html>