Cours - Symfony - Chapitre 02 - Ajouter des pages

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