Unterstütze unsere Tutorials mit einem WerbeClick!

Symfony 4.4 Tutorial :: Teil 3 statische Seiten

Vorwort

Es lohnt sich immer im Vorfeld einen Blick in den Befehlsumfang des Symfony-Frameworks zu werfen. Das erreicht man in dem man das Kommando
php bin/console
aufruft. Es werden dann alle Befehle aufgelistet!

Jedes Kommando kann wiederum mit dem help Parameter zusätzlich inspiziert werden.

php bin/console help make:controller

 

1. Controller erstellen

 
Nun wollen wir Zwei neue Seiten erstellen. Dafür benutzen wir am besten einen neuen Controller.
php bin/console make:controller sites
Da wir aber zwei oder mehr Seiten haben wollen, müssen wir in dem Controller noch eine Funktion hinzufügen.
Um die Funktionen später besser zu erkennen, nennen wir sie seite1 und seite2.
Zudem ändern wir die Routen ab
<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Routing\Annotation\Route;

class SitesController extends AbstractController
{
    /**
     * @Route("/seite1", name="seite1")
     */
    public function seite1()
    {
        return $this->render('sites/seite1.html.twig');
    }

    /**
     * @Route("/seite2", name="seite2")
     */
    public function seite2()
    {
        return $this->render('sites/seite2.html.twig');
    }
}

 

2. View anlegen

 
Bei dem erstellen eines Controllers wird nur eine twig Datei angelegt, wir brauchen aber 2.
Dafür gehen wir in den Ordner templates/sites und ändern die bestehende index.html.twig in seite1.html.twig um.
Der Name bleibt jedem selbst überlassen, jedoch haben wir beim Controller bearbeiten die seite1.html.twig als zu aufrufende Datei festegelgt.
Zusätzlich erstellen wir eine seite2.html.twig Datei im gleichen Ordner.
Nun bearbeiten wir beide und machen sie etwas übersichtlicher:
{% extends 'base.html.twig' %}

{% block title %}Hello SitesController!{% endblock %}

{% block body %}

    <div>
        <h1>Ich bin Seite 1 !!!</h1>
    </div>

{% endblock %}
Bei seite2 sollte natürlich auch Seite 2 stehen.
 
Jetzt können wir diese 2 Seiten über testprojekt.localhost/seite1 bzw. seite2 erreichen.
 

3. Hyperlinks einfügen

 
Zum schluss wollen wir noch unsere Seiten miteinander verbinden.
Dazu gehen wir in die base.html.twig Datei und ändern den Body wie folgt ab.
            <ul class="nav nav-pills float-right">
                <li class="nav-item">
                    <a class="nav-link" href='{{ path('homepage') }}'>Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href='{{ path('seite1') }}'>Seite 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href='{{ path('seite2') }}'>Seite 2</a>
                </li>
            </ul>
 

4. prod, dev und test

 
Anders als in Symfony 3 können wir nun nicht mehr mit /app_dev auf unser dev environment zugreifen, sondern müssen dies in der .env Datei tun.
In der .env Datei gibt es folgenden Block.
###> symfony/framework-bundle ###
APP_ENV=dev
APP_SECRET=***
#TRUSTED_PROXIES=127.0.0.1,127.0.0.2
#TRUSTED_HOSTS='^localhost|example\.com$'
###< symfony/framework-bundle ###
Wichtig ! APP_SECRET muss IMMER vor anderen versteckt sein, denn durch diese Zeichenkombination wird das Projekt zusätzlich verschlüsselt.
Nun können wir ganz einfach das dev hinter APP_ENV durch prod oder test austauschen, um das environment zu wechseln
Unterstütze unsere Tutorials mit einem Werbeclick!

Über uns

Wir sind ein agiles Team von Softwareentwicklungen, UX-Designern und IT-Supporten und haben uns auf individuelle Softwarelösung für den Mittelstand spezialisiert. Unsere besondere Stärken sind  Web-Anwendungen mit dem Symfony Framework sowie individuelle Industrielösungen für Produktionslinien, Servicetechniker oder Inspekteure zu entwickeln. Eine weitere Stärke ist die Erweiterung von Content Management Systemen wie beispielsweise Wordpress, Typo3, Drupal und Joomla. Das entwickeln von Apps für Android, Windows und Apple OS Systemen ist selbstverständlich!