Views & Templates
Sämtliche Ausgaben erfolgen im MVC-Konzept über Views. In diesem Kapitel zeigen wir dir, wie in n2n mit Views gearbeitet werden kann!
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!
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 derHtmlView
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 einHtmlBuilder
. Ü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.
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.
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".
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!