Adding web pages to Symfony projects

When developing a complete Content Management System (CMS), the content for web pages is normally stored in the database. However, for our CIS-294 projects, we are taking a more hybrid approach where content is built into the Twig templates, with dynamic information added as needed.

This is covered somewhat in Part 4 of my TV Watchlist tutorial series, but this tutorial provides a simple approach for generating multiple different pages in your CIS-294 websites.

Understanding Twig templates

If you've followed Part 1 of the TV Watchlist series to get started, your project should now have a templates/app.html.twig file to generate the basic page layout, and a src/Controller/PagesController.php file to generate the frontpage route and render this template.

There are four basic things to remember when creating pages:

1. Every route path and name should be unique.
2. Every method in a controller needs a unique function name, which should match the route name in most cases.
3. The render() call should specify array keys for all variables used the Twig templates.
4. Twig templates are extensible, meaning you can use app.html.twig as a starting point and templates for each page should only include the portion that is different.

What does that mean?

Look at your app.html.twig file. There should be a section that begins with {% block body %} and ends with {% endblock %}. In most cases, this is the only block that needs to be included in templates for individual pages.

If you followed the previous tutorials, this section contains {{ content }}, which should be defined in the controller, too. The controller only needs to send content if your template uses it. In most cases, it won't!

A new frontpage template

Remember to create a new branch in the repository before starting. Only one member of the Front End Team needs to push these changes to the shared repository, but everyone is welcome to try it out with their own local branch if you'd like to understand it better.

Create a new templates/frontpage.html.twig file which include the following contents:

{# This template displays the front page. #}
{% extends 'app.html.twig' %}

{% block body %}
    <p>Front page content goes here!</p>
{% endblock %}

Now modify src/Controller/PagesController.php to render this template:

    #[Route('/', name: 'frontpage')]
    public function frontpage(): Response
    {
        return $this->render('frontpage.html.twig', [
            'title' => "Homepage Title",
        ]);
    }

Refresh the page in your browser and you should see the new page contents. It's as easy as that.

Add the "About Us" page

Now create a new templates/about.html.twig file:

{# This template displays the about page. #}
{% extends 'app.html.twig' %}

{% block body %}
    <p>About us page content goes here!</p>
{% endblock %}

Now add a new method to src/Controller/PagesController.php for this page:

    #[Route('/about', name: 'about')]
    public function about(): Response
    {
        return $this->render('about.html.twig', [
            'title' => "About Us",
        ]);
    }

Change the URL in your browser to add /about and you should see this new page.

Update the menu

We want users to be able to find this page, so let's add it to the menu.

Add this line to the <nav> section in the templates/app.html.twig file:

<a class="nav-link" href="{{ path('about') }}">About</a>

This link should now be in menu, and you should be able to navigate back and forth between pages.

That's it! Everything else is just adding the actual content to the templates and adding the css styles.