Seiten und Templates

Seiten in Rocket erstellen

Gehe jetzt ins Rocket und erstelle deine erste Seite (Button 'add root branch', resp. 'hinzufügen' unten links). Jetzt kannst du eine neue Seite erstellen. Achte dich zuerst darauf, dass du rechts oben unter "Languages" die Sprachen wählen kannst, welche du bearbeiten willst.

Exkurs Locales

Rocket stellt dir die Sprachen zur Verfügung, welche unter [routing] im app.ini definiert sind:

[routing]
locales[] = "en"
locales[] = "de_CH"
locales[] = "fr_CH"

Mit dieser Konfiguration stehen drei Sprachen zur Verfügung.

Die Standardsprache und die Sprache fürs Rocket (Admin) wird unter [locales] definiert:

[locales]
default = "de"
admin = "de"

Passe die Sprachen so an, wie es dir beliebt.

Seiten erfassen

Erfasse jetzt eine Startseite. Wähle folgende Eigenschaften:

Wir fügen gleich eine zweite Page als Unterseite von Home hinzu. Dazu gibt es auf der Zeile von Home, drei Buttons:

• ^ fügt eine Seite VOR dieser Seite ein
• > fügt eine Seite UNTERHALB dieser Seite ein
• v fügt eine Seite NACH dieser Seite ein

Füge eine Seite unterhalb von Home ein. Wähle einen neuen Name und Titel. Den Path Part kannst du leer lassen. Als Controller wählst du Template Page Controller -> StandardPage und bei In Path TRUE. Alles andere ist gleich wie bei der Startseite. Nachdem du die Seite erstellt hast, stellst du fest, dass der Path Part automatisch aus dem Namen abgeleitet wurde. Editiere die Seite nochmals und ändere den Path Part zu "test".

Du kannst die beiden Seiten jetzt mal aufrufen:

http://localhost/[pfad-zu-deinem-projekt]/public/ und

http://localhost/[pfad-zu-deinem-projekt]/public/de/test (wenn du die Seite auf anderen Locales erstellt hast, musst du allenfalls das de anpassen).

Vielleicht fragst du dich, weshalb wir die zweite Seite über de und nicht de_CH aufrufen? Wir haben doch unter [routing] das Locale de_CH erfasst. Ein weiterer Blick in var/etc/app.ini zeigt folgendes:

[web]
locale_aliases[de_CH] = "de"
locale_aliases[fr_CH] = "fr"

/de_CH/test schaut deutlich hässlicher aus als de/test. Darum erlaubt n2n die Definition von Locale-Aliases. In diesem Beispiel ist Deutsch für die Schweiz also unter de erreichbar.

Ein Problem mit unserer Webseite ist natürlich noch, dass wir nicht zwischen den Seiten navigieren können. Dafür brauchen wir eine Navigation. Weil aber alle Seiten diese Navigation brauchen, legen wir die Navigation nicht in den Views fest, sondern erstellen ein Template dafür.

Template erstellen

Wie wir ein Template einbinden, haben wir bereits im n2n Quickstart gezeigt. Hier gehen wir noch ein bisschen weiter, indem wir zusätzliche CSS und Scripte einfügen.

In unserem Template möchten wir auf ein lokales CSS verlinken. Erstelle darum zuerst public/assets/template/css/styles.css mit diesem Inhalt:

@CHARSET "UTF-8";

#lang-navi {
    position: absolute;
    right: 1rem;
    top: 0.75rem;
}

#lang-navi .active > a {
    color: #ccc;
}

.navbar {
    border-radius: unset;
}

Erstelle jetzt app/template/view/boilerplate.html.php:

<?php
    use n2n\impl\web\ui\view\html\HtmlView;
    use n2n\web\ui\view\View;
    use page\ui\PageHtmlBuilder;
    use n2n\core\N2N;
    use page\ui\nav\Nav;
    use n2n\impl\web\ui\view\html\HtmlBuilderMeta;
 
    $view = HtmlView::view($this);
    $html = HtmlView::html($view);
    $request = HtmlView::request($view);
     
    $pageHtml = new PageHtmlBuilder($view);
    $pageHtml->meta()->applyMeta();
    
    $html->meta()->addMeta(array('charset' => N2N::CHARSET));
    // JQuery via Google
    $html->meta()->addJsUrl('https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js', false, false,
            array('integrity' => 'sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY',
            'crossorigin' => 'anonymous'), HtmlBuilderMeta::TARGET_BODY_END);
    // Tether CDN
    $html->meta()->addJsUrl('https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js', false, false,
            array('integrity' => 'sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB',  
            'crossorigin' => 'anonymous'), HtmlBuilderMeta::TARGET_BODY_END);
    // CSS und JS für Bootstrap über CDN
    $html->meta()->addLink(array('rel' => 'stylesheet', 'crossorigin' => 'anonymous',
            'integrity' => 'sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj',
            'href' => 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css' ));
    $html->meta()->addJsUrl('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js',
            false, false, array('crossorigin' => 'anonymous'), HtmlBuilderMeta::TARGET_BODY_END);

    // CSS File für individuelle Stile
    $html->meta()->addCss('css/styles.css');
    
?>
<!doctype html>
<html lang="<?php $html->out($request->getN2nLocale()->getId())?>">
    <?php $html->headStart() ?>
    <?php $html->headEnd() ?>
    <?php $html->bodyStart() ?>
        <nav class="navbar navbar-dark bg-inverse">
            <?php $html->linkToContext(null, $html->getImageAsset('img/logo.png', 'Logo'),
                    array('class' => 'navbar-brand')) ?>
            <?php $pageHtml->navigation(Nav::home(), array('class' => 'nav navbar-nav'), null,
                    array('class' => 'nav-item'), array('class' => 'nav-link')) ?>
            <div id="lang-navi">
                <?php $pageHtml->localeSwitch(array('class' => 'nav nav-inline'), array('class' => 'nav-item'),
                        array('class' => 'nav-link')) ?>
            </div>
        </nav>
     
        <div class="container">
            <?php $view->importContentView() ?>
        </div>
         
    <?php $html->bodyEnd() ?>
</html>

Zuerst holen wir auch hier den PageHtmlBuilder. Diesem teilen wir auch gleich mit, dass er die Meta Tags von der aktuellen Seite ableiten soll ($pageHtml->meta()->applyMeta()). PageHtmlBuilder berücksichtigt die Angaben von Se Title, Se Description und Se Keywords und erstellt die entsprechenden TITLE und META Tags. Diese werden dann automatisch innerhalb von HEAD ausgegeben.

Nach dem Setzen des korrekten Charsets holen wir uns externe JS und CSS Ressourcen. Wir importieren hier JQuery, Tether und BootstrapJS mit $html->addJsUrl(). Du kannst natürlich sämtliche JavaScript Ressourcen auch Lokal unter public/assets/template speichern und über $html->addJs() importieren. Die Parameter von addJsUrl() sollten mehrheitlich selbsterklärend sein. Speziell hinweisen wollen wir auf HtmlBuilderMeta::TARGET_BODY_END. So bestimmst du, dass die Scripts erst vor </body> geladen werden. CSS laden wir von extern mit $html->meta()->addLink(). Unser lokales CSS File binden wir mit $html->meta()->addCss() ein.

Im BODY Bereich sind v.a. die Navigationen neu. Als Label für $html->linkToContext() zeigen wir ein Logo an, welches unter public/assets/template/img/logo.png gespeichert sein muss.

Vergiss jetzt nicht, in allen Views das Template mit $view->useTemplate('\template\view\boilerplate.html'); aufzurufen.

Navigation

$pageHtml->navigation() gibt eine Navigation aus. Mit Nav::home() bestimmen wir, dass die Navigation von der Home-Seite ausgegeben werden soll. Alternativ stellt Nav noch weitere Methoden zur Erstellung einer Navigation zur Verfügung. Alle haben gemeinsam, dass Sie ein NavComposer Objekt zurückgeben. Über dieses kann mit weiteren Methoden die Ausgabe der Navigation genau definiert werden. Hier im Quickstart verzichten wir auf eine genauere Ausführung.

Nach der Hauptnavigation wird die Sprachnavigation ausgegeben. Dazu stellt der PageHtmlBuilder die Methode ->localeSwitch() zur Verfügung.

Zusammenfassung

In unserem Beispiel rufen wir viele JS und das Bootstrap-CSS von entfernten Servern auf. Grundsätzlich könnten diese Ressourcen auch in unserem public/asset Ordner gespeichert sein. Der public/asset Ordner ist für die Speicherung von Ressourcen (typischerweise CSS, JS und Bilder) gedacht, welche über das Web zugänglich sein müssen.

Die Navigation ist in unserem Beispiel hier nur sehr rudimentär. Sobald sie mehrstufig wird, reicht das Bootstrap Styling nicht mehr aus. Du hast aber gesehen, wie du selber CSS Files einbinden kannst. Entsprechend hast du alle Freiheiten hier genau die Navigation zu bauen, welche du brauchst.