SOMMAIRE

---

Introduction

Dans le chapitre précédent, nous avons construit la page d’accueil du site. Nous allons maintenant créer quelques pages que nous retrouvons sur tous les sites. Voici ces pages :

• contact

• à propos

• mentions légales

Création de la page « Contact »

Ajouter un contrôleur

Je rappelle que nous sommes dans une architecture MVC (Modèle Vue Contrôleur). Par conséquent, nous allons dans le fichier « src/Controller:BaseController.php » et pour nous éviter de tout retaper, nous allons faire un copier-coller de notre bloc existant pour le mettre en dessous comme ceci :

        
class BaseController extends AbstractController
{
    #[Route('/index', name: 'index')]
    public function index(): Response
    {
        return $this->render('base/index.html.twig', [
            
        ]);
    }

    #[Route('/index', name: 'index')]
    public function index(): Response
    {
        return $this->render('base/index.html.twig', [
            
        ]);
    }
}
     

Puis, nous réalisons les étapes suivantes :

1. Modification de la route afin d’accéder à la page « contact » avec l’URL : « url ».

2. Modification du nom de la fonction pour la renommer en « contact ».

3. Modification du template à appeler en renommant  « index.html.twig » en « contact.html.twig ».

Voici le résultat :

class BaseController extends AbstractController
{
    #[Route('/index', name: 'index')]
    public function index(): Response
    {
        return $this->render('base/index.html.twig', [
            
        ]);
    }


    #[Route('/contact', name: 'contact')] // étape 1
    public function contact(): Response // étape 2
    {
        return $this->render('base/contact.html.twig', [ // étape 3
            
        ]);
    }

}

Création du template

Dans le répertoire « templates/base/ », créer le fichier « contact.html.twig ». Puis redéfinissons les éléments du template afin de personnaliser notre nouvelle page.

{% extends 'base.html.twig' %}

{% block title %}{{parent()}}Contact{% endblock %}

{% block body %}
    <h1 class="text-center text-primary mt-4 pt-4 display-1 fw-bold"> CONTACT</h1>
{% endblock %}

Commentaire : pour l’instant, nous personnalisons le titre de la fenêtre du navigateur et le titre de la page.

Vous pouvez visualiser le résultat en tapant l’URL suivante « /contact ».

Exemple :

https://s3-4400.nuage-peda.fr/share/public/contact

Modification du menu

Nous allons maintenant modifier notre menu afin de nous rendre sur la page « contact » plus facilement.

Dans « templates/base.html.twig », modifier votre « navbar » comme ceci :

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <div class="container-fluid">
    <a class="navbar-brand " href="{{path('index')}}">Share</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarColor01">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" href="{{path('index')}}">Accueil        
          </a>
        </li>
         <li class="nav-item">
          <a class="nav-link" href="{{path('contact')}}">Contact        
          </a>
        </li>
       </ul>
    </div>
  </div>
</nav>

Voici le rendu du menu modifié :

Entrainements 

Sur le même principe, vous avez maintenant les connaissances pour réaliser les pages « à propos » et « mentions légales ».

Informations complémentaires pour réaliser ce travail :

Les fonctions, le nom des routes ainsi que les URL ne peuvent pas contenir certains caractères spéciaux (accents, &, %, … ) et des espaces.

Voici le résultat attendu pour le menu :

Voici le résultat attendu pour la page « mentions légales » :

Voir le Chapitre 3