Written by Yoann Pigné
Updated on January 30, 2024

TP Symfony - Gestion des formulaires

On continue le travail commencé lors du TP Précédent.

Suivre les instructions en fonction du n° de sujet choisi la semaine précédente.

Échéance (pour tous les sujets)

Cette dernière partie doit toujours être versionnée et faire l’objet de validations régulières de la part de tous les membres du groupe. Les dépôts GIT seront relevés le vendredi 29 mars 2024 à 21h42 (CEST), pour évaluation.

Sujet 1

Il y a une seule tâches à réaliser pour les groupes ayant choisi le sujet n°1 : les formulaires.

Gestion des formulaires

En suivant le cours créer des classes de type (e.g. MonEntitéType) dans le dossier src/Form/ qui permettent la création de formulaires pour créer/modifier les entités (e.g. MonEntité) de votre base.

Chaque entité du modèle doit posséder son propre type.

On peut s’aider de la commande : php bin/console make:form

Adapter les contrôleurs, les entités, et les vues pour utiliser correctement les formulaires Symfony et pour que tous les champs soient correctement validés lors de la saisie des formulaires.

La validation doit être gérée au niveau des entités, comme cela a été présenté en cours.

Sujet 2

Il y a deux tâches à réaliser pour les groupes ayant choisi le sujet n°2 :

Les formulaires
une vues cartographique

Gestion des formulaires

En suivant le cours créer une classe EtablissementType dans le dossier src/Form/ qui permet la création de formulaires pour créer/modifier les entités Etablissement.

Faire de même pour l’entité Commentaire.

On peut s’aider de la commande : php bin/console make:form

La validation doit être gérée au niveau des entités, comme cela a été présenté en cours.

Vue Cartographique

Ajouter une vue/route vers une visualisation des établissements sous forme d’un ensemble de marqueurs sur une carte.

Pour des raisons de performance, on se restreindra au filtre par commune avec, par exemple, une route du type :

etablissement/cartographieCommune/:idCommune

PHP et surtout TWIG sont capable de générer bien plus que des pages web. Il est tout a fait possible de générer du javascript.

Prenons l’exemple de la bibliothèque Leaflet. Le code suivant permet de créer une carte et d’y ajouter des markers.

En utilisant par exemple les blocs stylesheets et javascript par défaut du fichier TWIG base.twig.html il suffit d’ajouter la bibliothèque en référence dans la page web :

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
  integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
  crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
  integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
  crossorigin=""></script>

puis de définir un élément du markup dans le TWIG qui recevra la carte :

<div id="map" style="height: 500px;"></div>

enfin le script suivant (qu’il faut aussi placer dans le template TWIG) fera le reste. On Note qu’il suffit de modifier le tableau data (avec TWIG) pour afficher d’avantage de points.

<script>
const draw_map = (data) => {  
  const map = L.map('map')
    .fitBounds(data.map((d) => [d.lat,d.lon]))
    .addLayer(L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }));
  data.forEach((etablissement) => {
    L.marker([etablissement.lat, etablissement.lon]).addTo(map).bindPopup("<b>"+etablissement.nom+"</b>");
  });
};

const data = [
  {
    nom:'Ecole élémentaire Dauphine',
    lat:'49.48957543806298',
    lon:'0.11556983645413253'
  },
  {
    nom:'Collège Descartes',
    lat:'49.51941345248356',
    lon:'0.10888053221663069'
  },
  {
    nom:'Lycée général François Ier',
    lat:'49.49610537217045',
    lon:'0.1137094907033469'
  },
  /*
    TODO: à vous d'ajouter la suite dynamiquement avec TWIG...
  */
];

draw_map(data);
</script>

Résultat :