Centre d'aide au développement d'applications web avec Symfony

Affichage de la page d'accueil

Mis à jour le 16/01/2022

Démarrage du serveur

Au cours de votre utilisation du framework, il est possible que le serveur se déconnecte de temps à autres. Il doit très certainement s'agir d'un bug. Dans ce cas, pour être certain de pouvoir le redémarrer dans de bonnes conditions, je vous conseille d'entrer d'abord la commande suivante afin d'arrêter le serveur :
symfony server:stop
puis celle-ci pour le redémarrer :
symfony server:start -d

Cette parenthèse étant fermée, assurez-vous à présent de vous placer dans le bon dossier de travail. Pour cela, vérifier le chemin de celui-ci dans le terminal, juste avant le curseur. Il devrait être C:\sites\boutique
Si vous ne voyez pas de terminal, ouvrez-en un nouveau via le menu du même nom.
Vérifiez également dans votre navigateur internet à l'adresse 127.0.0.1:8000 que la page de présentation s'affiche correctement, sans aucun message d'erreur.

Notre premier contrôleur

Si vous ne l'avez pas encore fait, ouvrez le dossier de vote projet depuis le menu Fichier de VsCode.
Vous allez pouvoir entrer la commande suivante dans le terminal de VsCode :
symfony console make:controller
Il va vous falloir rester dans ce terminal et saisir l'information que le programme vous demande. Vous devez choisir le nom que vous voulez donner à votre contrôleur. Nommons-le home par exemple.
Saisissez la valeur home dans le terminal et validez en appuyant sur la touche Entrée de votre clavier.
Le programme va alors automatiquement transformer le premier caractère du nom que vous avez choisi par une majuscule puis ajouter le terme Controller à celui-ci. Le fichier sera finalement nommé HomeController.php et il se situera dans le dossier /src/Controller de votre application, à savoir C:\sites\boutique\src\Controller

En plus du contrôleur, le programme a créé un template. Il s'agit du fichier Twig index.html.twig situé dans le dossier /templates/home de votre projet C:\sites\boutique\templates\home
et grâce auquel nous allons pouvoir afficher le rendu de notre page web ainsi que des variables dynamiques. Le programme a directement associé le contrôleur à une page html.twig. Nous verrons plus tard qu'un seul contrôleur peut gérer plusieurs fichiers Twig.

La route de notre page d'accueil

Dans le fichier /src/Controller/HomeController.php se trouve une route au début de la class HomeController. Il s'agit en fait de l'url du navigateur correspondante à votre page d'accueil. Le terme de route est employé pour définir ce système d'affichage des différentes adresses internet de votre site.

#[Route('/home', name: 'home')]

Le chemin pour accéder à votre page dans un navigateur internet est le suivant 127.0.0.1:8000/home
Faites le test et assurez du bon fonctionnement de la route. N'hésitez pas à changer la valeur dans votre contrôleur.

#[Route('/', name: 'exemple_de_route_1')]
#[Route('/shop', name: 'exemple_de_route_2')]
#[Route('/home', name: 'exemple_de_route_3')]

Vous pouvez constater que tous ces chemins vont exécuter la fonction que voyez un peu plus bas. On voit que cette fonction retourne une page au format Twig. En l'occurence, il s'agit du template qui a été créé lorsqu'on a mis en place le contrôleur. Le nom de la route, quant à lui, nous sera utile lorque nous mettrons en place des liens hypertextes. En l'occurence, ces liens seront placés sur la liste des produits en provenance de la base de données.

return $this->render('home/index.html.twig', [

Vous pouvez ouvrir le fichier /templates/home/index.html.twig dans Vs Code et tout remplacer comme ci-dessous.

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

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

{% block body %}

Ma page d'accueil

{% endblock %}

Testez votre propre code à l'intérieur de ce fichier comme ci-dessus, à l'intérieur du block body.

Etape suivante

Nous verrons comment configurer une base de données dans la prochaine étape.

Menu