Zum Inhalt

Benutzerdefiniertes Frontend

Routing

Im Standard wird beim Aufruf des Root-Ordners der Installation über den Webserver (z.B. https://yourdomain.de) das Contentfly CMS User Interface (siehe Architektur mit dem Login-Fenster aufgerufen. Dieses Standard-Verhalten kann aber angepasst werden und ein benutzerdefiniertes Frontend ausgegeben werden. Dazu muss das Contentfly CMS User Interface auf eine andere URL-Route "verlegt" werden. Ein benutzerdefiniertes Frontend kann beispielsweise sein:

  • Eine komplette Website, die sich Daten aus dem Contentfly CMS zieht
  • Eine Landing-Page, die sich dynamische Inhalte aus dem Contentfly CMS zieht
  • Eine separate Oberfläche über z.B. das React Framework
  • Eine Webapp über jQuery Mobile mit Anbindung an die Contentfly CMS API
  • ...

Das Contentfly CMS als Web-CMS

Mit einem benutzerdefinierten Frontend kann das Contentfly CMS auch als Web-CMS eingesetzt werden. Denn wenn es primär um die Verwaltung und Anzeige strukturierter Daten geht (z.B eine Produktdatenbank /-katalog) ist das Contentfly CMS auf Grund der strukturierten Datenhaltung und den flexiblen Anpassungsmöglichkeiten oftmals klassischen CMS-Lösungen wie TYPO3 oder Wordpress überlegen.

Contentfly CMS UI Route

Das Umstellen der URL-Route für das Contentfly CMS UI erfolgt in der Konfigurationsdatei.

/custom/config.php

1
2
<?php
$configDefault->FRONTEND_URL  = "admin";

Hinweis

Das AngularJS-Backend ist damit unter yourdomain.de/admin erreichbar.

Benutzerdefinierte Standard-Route

Nach Umstellung der URL-Route des Contentfly CMS UI kann die Ausgabe auf der Standard-Route beliebig angepasst werden.

/custom/app.php

1
2
3
4
5
6
<?php
$app->get('/', function () use ($app) {
    return $app['twig']->render('index.twig', array(
        'foo' => 'bar'
    ));
});

Weitere benutzerdefinierte Routen

Es können zudem beliebige URL-Routen-/Controller definiert werden.

/custom/app.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
$app->get('/test', function () use ($app) {
    return $app['twig']->render('test.twig', array(
        'foo' => 'bar'
    ));
});

$app->get('/hello/{name}', function ($name) use ($app) {
    return $app['twig']->render('test.twig', array(
        'title' => "Hallo $name"
    ));
});

Auslagerung in Controller

Alternativ zu den obigen Methoden, um ein benutzerdefiniertes Frontend auszugeben, kann die Logik auch in Controller-Klassen ausgelagert werden.

Templates und Systemfunktionen

Twig Template Engine

Die HTML-Templates müssen relativ zum Ordner /custom/Views gespeichert sein und basieren auf der Twig Template-Engine und dem Twig Silex Service Provider

Zugriff auf Systemfunktionen

Authentifizierung

Im PHP-Code können Sie die integrierte Authentifizierung des Contentfly CMS verwenden. Die Authentifizierung erfolgt im Hintergrund über Sessions*

Methoden

$app['auth']->login($alias, $pass)
Ist der Login nicht erfolgreich werden Exceptions mit dem Fehlercode 401 und der entsprechenden Meldung ($exception->getMessag()) geworfen.

Parameter Typ Optional Beschreibung
$alias String nein Benutzername
$pass String nein Passwort

Rückgabe: Areanet\PIM\Entity\User

$app['auth']->logout();
Logout des Benutzers und Beenden der Session.

$app['auth']->getUser();
Rückgabe des eingeloggten Benutzers. Gibt null zurück, wenn kein Benutzer eingeloggt ist.

Rückgabe: Areanet\PIM\Entity\User

Beispiel

/custom/app.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?php
$app->get('/secure', function () use ($app) {
    if(!$app['auth']->getUser()){
        return $app->redirect('/login');    
    }

    return $app['twig']->render('secure.twig');
});

$app->get('/login', function () use ($app) {
    return $app['twig']->render('login.twig');
});

$app->post('/login', function ($user, $alias) use ($app) {

    try{
        $app['auth']->login($user, $alias)
    }catch(Exception $e){
        return $app['twig']->render('login.twig', array(
            'message' => $e->getMessage()
        ));
    }

    return $app->redirect('/secure'); 
});

Statische Ressourcen

Statische Ressourcen wie Bilder, Javascript oder CSS können/müssen im Ordner 'custom/Frontend abgelegt. Dieser ist über einen Symlink mit dem Ordner appcms/public/custom/Frontend verlinkt. Alle dort abgelegten Ressourcen können also auf der Webseite über www.domain.de/custom/Frontend/RESSOURCE.css aufgerufen und erreicht werden.