Vues, templates et formulaires

Rappel d'un des principes du REST

Hypermedia As The Engine Of Application State (hay-dee-ous)

• Une application = diagramme d'états fini
• Transitions = hyperliens

Une page Web est un état de l'application

• Le client doit pouvoir suivre les liens
• Chaque réponse du serveur doit contenir les liens vers les prochaines requêtes

• 1 transition en entrée
• 32 transitions en sortie

On va ajouter un controleur dans src/AppBundle/Controller/CircuitController.php :

namespace AppBundle\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Symfony\Component\HttpFoundation\Request;
use AppBundle\Entity\Circuit;
use Symfony\Component\HttpFoundation\Response;

class CircuitController extends Controller
{
        /**
         * @Route("/circuit/")
         */
        public function indexAction()
        {
                $circuits = $this->getDoctrine()
                        ->getRepository('AppBundle:Circuit')
                        ->findAll();

                dump($circuits);
                return new Response(); 
        }

        /**
         * @Route("/circuit/{id}", name="circuit_show", requirements={
         *              "id": "\d+"
         *     })
         */
        public function showAction($id)
        {
                $circuit = $this->getDoctrine()
                        ->getRepository('AppBundle:Circuit')
                        ->find($id);

                dump($circuit);
                return new Response(); 
        }

}

Tester que ce controlleur basique fonctionne, et renvoie bien les valeurs de "debug" via dump(), en accédant avec le navigateur à :

• http://localhost:8000/app_dev.php/circuit/
• http://localhost:8000/app_dev.php/circuit/1

Rappel: on lance l'environnement de tests de Symfony avec :

php bin/console server:run

1. Ajouter un template Twig pour l'affichage de la liste des circuits, destiné à remplacer le dump($circuits);.

   Créer le fichier app/Resources/views/circuit/index.html.twig

   {% extends 'base.html.twig' %}
   
   {% block body %}
   
   <h1>Nos circuits</h1>
   
   {{ dump(circuits) }}
   
   {% endblock %}
   

2. Modifier la génération de la réponse dans le controleur pour générer le HTML obtenu par l'exécution du template :

   ...
   return $this->render('circuit/index.html.twig', array(
                                   'circuits' => $circuits));
   ...
   

   Tester que l'affichage des circuits renvoie bien le debug des objets du modèle passés à la vue

3. En s'inspirant des exemples de la documentation http://symfony.com/doc/current/book/templating.html, améliorer le template index.html.twig pour afficher une liste de circuits formatée en HTML. La liste des circuits devra ressemblera à ceci, dans un premier temps :

   ...
   <div class="circuit">
           <h2>1 : Andalousie</h2>
   
           <p>Départ de Grenade pour 1 j. de voyage à travers le Espagne, pour terminer à Séville.</p>
   </div>
   
   <div class="circuit">
           <h2>2 : Vietnam</h2>
   
           <p>Départ de Hanoi pour 3j. de voyage à travers le VietNam, pour terminer à Hô Chi Minh.</p>
   </div>
   ...
   

Ajouter un template circuit/circuit_show.html.twig affichant les attributs d'une instance de Circuit, qui sera affiché via CircuitController::showAction(). Dans un premier temps, on n'affichera pas les détails de toutes les étapes.

L'affichage du template donnera quelque chose du style :

<h1>Détails du circuit</h1>

<div class="circuit_details">

<p>Description: Andalousie</p>

<p>Départ de Grenade pour  j. de voyage à travers le Espagne, pour terminer à Séville.</p>

<p>Etapes :</p>
        <table>
          <tr>
            <th>Numéro</th>
            <th>Ville</th>
            <th>Nombre jours</th>
            <th></th>
          </tr>
</thead>
<tr>
  <td>1</td>
  <td>Grenade</td> 
  <td>1 j.</td>
</tr>
<tr>
  <td>2</td>
  <td>Cordoue</td> 
  <td>2 j.</td>
</tr>
<tr>
  <td>3</td>
  <td>Séville</td> 
  <td>1 j.</td>
</tr>
</table>

</div>

Modifier le template de liste des circuits pour ajouter un lien vers les détails du circuit.

Le lien s'appuiera sur l'utilisation de la route définie pour la consultation au niveau des annotations du controleur.

...
<a href="{{ path('circuit_show', { id: circuit.id }) }}"> {{
                        circuit.description }} </a>
...

Essayer de consulter les détails d'un circuit inexistant en base de données, par exemple sur http://localhost:8000/app_dev.php/circuit/5

Au lieu d'un plantage de l'application (erreur 500), on souhaiterait plutôt afficher un message d'erreur.

Modifier CircuitController::showAction() pour générer une exception, et vérifier qu'elle provoque bien un code de retour HTTP 404 Not Found (cf. http://symfony.com/doc/current/book/controller.html#managing-errors-and-404-pages).

...
throw $this->createNotFoundException('The circuit does not exist');
...

On devrait ensuite ajouter le template d'erreur correspondant, si l'on veut un message d'erreur plus explicite, via un template dans app/Resources/TwigBundle/views/Exception/error404.html.twig (cf. http://symfony.com/doc/current/cookbook/controller/error_pages.html), mais il est un peu délicat de tester cela, car on doit changer d'environnement, de dev à prod

Ajouter, en respectant l'arborescence des fichiers standard d'une application Symfony, le template admin/circuit/new.html.twig contenant le formulaire. On complétera ensuite le template pour générer une page HTML valide.

...
{{ form_start(form) }}
{{ form_widget(form) }}
{{ form_end(form) }}
...

On complètera le squelette de méthode suivant, pour gérer la dynamique d'affichage des pages à la soumission du formulaire.

$circuit = new Circuit();

$form = $this->createFormBuilder($circuit)
             ->add('description')
             ->add('save', SubmitType::class, array('label' => 'Create circuit'))
             ->getForm();

$form->handleRequest($request);

if ($form->isSubmitted() && $form->isValid()) {
        $em = $this->getDoctrine()->getManager();
        $em->persist($circuit);
        $em->flush();

        return $this->redirectToRoute(...A_COMPLETER..., array( 'id' => $circuit->getId()));
}

return $this->render(...A_COMPLETER..., array(
    'form' => $form->createView(),
));