Written by Yoann Pigné
Updated on 

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 jeudi 27 mars 2025 à 21h42 (CEST). L’évaluation aura lieu le vendredi 28 mars 2025.

Sujet 1

Il y a une seule tâches à réaliser pour les groupes ayant choisi le sujet n°1 : les 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 qui doit permettre la création de formulaires pour la création et la modification. Ces formulaires doivent être utilisés dans les contrôleurs pour les actions de création, de modification et de suppression. Il doivent valider le modèle objet avant de le persister en base. Les assertions de validation doivent être définies au niveau des entités. Enfin, les formulaires doivent être utilisés dans la création des vues et doivent permettre d’afficher correctement les erreurs de validation.

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

Une difficulté est la présentation des champs de type associations. Il est possible de les afficher sous forme de liste déroulante, de liste de cases à cocher, ou de liste de boutons radio. A vous de faire les bon choix lors de la création des formulaires.

Sujet 2

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

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 de votre projet (Etablissement et Commentaire).

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

Chaque entité du modèle doit posséder son propre type qui doit permettre la création de formulaires pour la création et la modification. Ces formulaires doivent être utilisés dans les contrôleurs pour les actions de création, de modification et de suppression. Il doivent valider le modèle objet avant de le persister en base. Les assertions de validation doivent être définies au niveau des entités. Enfin, les formulaires doivent être utilisés dans la création des vues et doivent permettre d’afficher correctement les erreurs de validation.

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... Et oui TWIG sait générer du javascript !
  */
];

draw_map(data);
</script>

Résultat :