Views & Templates

Html View Quickstart

Sämtliche Ausgaben erfolgen im MVC-Konzept über Views. In diesem Kapitel zeigen wir dir, wie in n2n mit Views gearbeitet werden kann!

  1. Aufrufen einer View
  2. Dein erstes Template

Aufrufen einer View

Bisher haben wir nur mit Controllern gearbeitet. Im MVC Konzept macht es keinen Sinn, Ausgaben direkt im Controller zu machen! Für die Ausgaben sind im MVC die Views zuständig. Als nächstes schauen wir uns darum an, wie Views aufgerufen werden.

Views erstellen

Zuerst erstellen wir unser Verzeichnis für die Views:

app/qs/view

Grundsätzlich ist es egal, in welchem Verzeichnis Views liegen. Wir empfehlen aber alle Views in einem /view  Verzeichnis abzulegen. Wenn du ein Modul mit vielen Views hast, kannst du Unterverzeichnisse anlegen.

Im angelegten Verzeichnis erstellen wir folgende Files:

app/qs/view/overview.html.php

<h1>Unsere Blogartikel</h1>
<p>Hier folgen die Artikel</p>

app/qs/view/detail.html.php

<h1>Detailansicht</h1>
<p>Hier kommt ein einzelner Artikel</p>

app/qs/view/thanks.html.php

<h1>Danke</h1>
<p>Danke für deinen Kommentar</p>
<a href="javascript:history.back()">Zurück</a>

Zu Views kann folgendes bemerkt werden. Views sind keine Klassen, sondern einfache PHP Files. Das Ausgabeformat wird vor der .php Endung gekennzeichnet. Weil wir überall HTML Ausgaben haben, enden alle unsere Views auf .html.php.

Views aufrufen

Jetzt kannst du deine Views über den Controller aufrufen. Ersetze die Methoden index(), detail() und doThanks() wie folgt:

    public function index() {
        // 1.) Aufruf mit relativem Pfad
        $this->forward('..\view\overview.html');
    }
    
    public function detail(string $urlPart) {
        // 2.) Aufruf vom Modulpfad aus
        $this->forward('~\view\detail.html');
    }
    
    public function doThanks() {
        // 3.) Aufruf über den vollständigen Namespace --> beginnt immer mit \
        $this->forward('\qs\view\thanks.html');
    }

Wie du siehst, ruft der Controller die Views mit $this->forward() auf. Es gibt drei Möglichkeiten, wie der Pfad angegeben werden kann: Entweder relativ vom aktuellen Namespace aus (1), vom Modulnamespace aus (2) oder absolut mit dem ganzen Namespace (3). Beim relativen Pfad gibst du den Pfad vom Ort des Controllers an. Beim absoluten Pfad beginnst du mit einem Backslash und gibst danach den vollständigen Namespace an. Beachte: wir bewegen uns im Namespace, deshalb benutzen wir den Backslash. Mit dem vollständigen Namespace können auch Views ausserhalb des Modules aufgerufen werden!

Wir empfehlen, Modul interne Views mit einem relativen Pfad oder vom Modulnamespace aus aufzurufen. Modul externe Views sollten immer mit führendem Backslash und vollständigem Namespace aufgerufen werden.
Im Quickstart zeigen wir nur HTML Views. n2n unterstützt aber auch diverse andere Views wie JSON, CSV, XML... etc. Es ist sogar möglich, eigene View-Typen zu definieren! n2n eignet sich darum nicht nur für Webseiten, sondern auch als Backend für Web-Apps!

Dein erstes Template

Natürlich erzeugt unsere bisherige View noch kein vollständiges HTML File. Dies wollen wir jetzt ändern, indem wir ein Template erstellen, welches wir für sämtliche Views verwenden.

In Anlehnung an HTML5-Boilerplate nennen wir die Datei \qs\view\boilerplate.html.php

<?php
    use n2n\impl\web\ui\view\html\HtmlView;
    use n2n\web\ui\view\View;
    use n2n\core\N2N;

    // 1. Objekte der View: nicht zwingend notwendig
    $view = HtmlView::view($this);
    $html = HtmlView::html($view);
    $request = HtmlView::request($view);
    
    // 2. Auslesen des Titels und der Beschreibung
    $title = $view->getParam('title', false, 'Example');
    $description = $view->getParam('description', false);
    
    // 3. Abfüllen der Tags im Header Bereich
    $html->meta()->setTitle($title);
    $html->meta()->addMeta(array('charset' => N2N::CHARSET));
    if (null !== $description) {
        $html->meta()->addMeta(array('name' => 'description', 'content' => $description));
    }
?>
<!doctype html>
<html lang="<?php $html->out($request->getN2nLocale()->getId())?>">
    <?php $html->headStart() ?>
    <?php $html->headEnd() ?>
    <?php $html->bodyStart() ?>
    
        <?php $view->importContentView() ?>
        
    <?php $html->bodyEnd() ?>
</html>

In jeder HTML-View stehen die Objekte $view, $html und $request automatisch zur Verfügung. Wir notieren die ersten drei Zeilen, damit deine IDE die Objekte erkennt und keine Warnings ausgibt.

  • $view stellt Methoden der HtmlView zur Verfügung. Typischerweise kannst du über $view auf die Parameter zugreifen, welche deiner View übergeben wurden oder kannst das Template bestimmen oder weitere Views importieren.
  • $html ist ein HtmlBuilder. Über $html kannst du HTML-Ausgaben erzeugen. So bestimmst du beispielsweise mit $html, wo <body> anfängt und aufhört. Du kannst $html auch externe Ressourcen mitgeben (z.B. JavaScripte oder CSS), welche geladen werden müssen. Ebenfalls ganz wichtig: $html hilft dir, Inhalte sicher auszugeben (zum Beispiel mit der Methode ->out()).
  • Über $request kannst du auf Informationen zum HTTP-Request zugreifen.

Mit $view->getParam() kannst du Parameter auslesen, welche einer View übergeben werden. Wir prüfen, ob für diese Seite ein Titel und eine Beschreibung übergeben wurden. Beide erwarten wir nicht zwingend (vgl. false beim zweiten Parameter). Beim Titel setzen wir mit 'Example' aber einen Default-Wert.

Im dritten Schritt setzen wir den Titel, lesen das Charset aus dem app.ini aus (indem wir auf die N2N Klasse zugreifen) und prüfen, ob eine Beschreibung übergeben wurde.

In n2n Views verwenden wir zuoberst einen PHP Block, welcher die Bausteine der View vorbereitet. Sobald dieser PHP Block geschlossen wurde, möchten wir keine komplizierten PHP Statements mehr in der View haben.

Im html Tag holen wir über $request das aktive n2n Locale. Das standard Locale wird übrigens in der app.ini der Applikation gesetzt und kann dort angepasst werden.

Wir verwenden in Views nie echo. Sämtliche Ausgaben, welche sicher sein sollen, werden über $html->out() gemacht. Den Unterschied stellst du fest, wenn du $html->out('<script>alert("test");</script>') ausprobierst.

Beachte, dass wir für das <head> und <body> Tag jeweils mit dem $html Objekt öffnen und schliessen. Der Grund dafür ist, dass andere Views Scripte und Tags für den Head- und Body-Bereich hinzufügen können und diese nur ausgegeben werden, wenn du die <head> und <body> Tags wie gezeigt öffnest und schliesst.

Mit $view->importContentView() wird die View eingebaut, welche das Template aufgerufen hat. Jetzt müssen wir das Template noch von den Views aus aufrufen.

Füge dazu bei allen bisherigen Views (overview.html.php, detail.html.php und thanks.html.php) folgenden PHP Code zuoberst ein:

<?php
    use n2n\impl\web\ui\view\html\HtmlView;
    use n2n\web\ui\view\View;

    // freiwillige Zeile
    $view = HtmlView::view($this);
    // Anweisung das Template zu nutzen
    $view->useTemplate('boilerplate.html', array('title' => 'Übersicht'));
?>

Achtung, im oben gezeigten Code, musst du natürlich für jede View einen geeigneten Titel übergeben. Sonst haben alle deine Seiten den Titel "Übersicht".

Views & Templates zum Download

Alle Views und das Template von diesem Kapitel zum Herunterladen

Den jetzigen Stand des Modules findest du vollständig im Modul qs2. Du kannst es mit http://localhost/[pfad-zum-public-folder-des-projektes]/blog2 aufrufen.

Jetzt kennst du die wichtigsten Dinge von Controllern und Views. Richtig spannend wird es aber erst, wenn du mit Daten arbeiten kannst! Deshalb schauen wir uns als nächstes die Business Objects an!

« Hello Controller Daten verwalten »

Kommentare

Du musst eingeloggt sein, damit du Beiträge erstellen kannst.

Fragen

Neue Frage stellen

Table of Contents