Vous êtes sur la page 1sur 12

L2-DSI : Atelier Framework Coté Serveur-TP8

TP n°8
Les Formulaires avec Symfony 5

1- Rappel sur la création du projet “Etudiant”

Il s’agit de créer un formulaire qui sert à remplir quelques informations sur un étudiant.
Les données de ce formulaire doivent être envoyées vers la table « student » de la BD
« db_etudiant ».

2- Création du projet Symfony intitulé “Etudiant”

Créer un nouveau projet intitulé « etudiant » par la commande ci-dessous dans le terminal «
bash » :

$composer create-project symfony/website-skeleton etudiant

3- Configuration du de la base de données du projet « .env »

Il s’agit de modifier le fichier (caché) « .env » présent à la racine du projet, qui définit des
variables d’environnement, comme les paramètres d’accès à la base de données.

a. Ouvrez le fichier « .env » dans votre éditeur (exp : Visual Studio Code)
b. Modifiez la valeur de la variable DATABASE_URL pour prendre la valeur :

DATABASE_URL=mysql://root:@127.0.0.1:3306/db_etudiant

DATABASE_URL =Type de BD ://User :Pass @Serveur :Port /Nom de la BD


(pas de mot de
passe)

Remarque 1: Mysql utilise le port 3306 par defaut. Si votre environnement utilise un autre
port, il faut adapter la ligne ci-dessus.

Sami Melki-2020 1
L2-DSI : Atelier Framework Coté Serveur-TP8

Remarque 2 : Avant de continuer, il faut lancer le serveur du SGBD Mysql (apach + mysql)
avec Xampp.

Sami Melki-2020 2
L2-DSI : Atelier Framework Coté Serveur-TP8

4- Ajout de l’entité « Student »

4.1- Introduction :

Soit la base donnée contient une seule entité nommée « Student »

Student
id (auto)
name (string :255)
email (string :100)
birth (date)

Remarque : la clé « id » sera créée automatiquement.

4.2- Application :

Commençons par l’ajout de l’entité Student:

Remarque : n’oublier pas de lancer Apache et MySql dans Xampp.

Utiliser l’assistant make:entity, dans le terminal bash, depuis votre projet Symfony. Il va
servir à générer le code de classes PHP pour gérer notre entité « student ».

Répondez aux questions de l’assistant pour obtenir une interaction similaire à la trace
présentée ci-dessous :

$bin/console make:entity student


created: src/Entity/Student.php
created: src/Repository/StudentRepository.php

New property name (press <return> to stop adding fields):


> name

Field type (enter ? to see all types) [string]:


>

Field length [255]:


>

Can this field be null in the database (nullable) (yes/no) [no]:


>

updated: src/Entity/Student.php

Add another property? Enter the property name (or press <return> to stop
adding fie
lds):
> email

Field type (enter ? to see all types) [string]:


> 

Sami Melki-2020 3
L2-DSI : Atelier Framework Coté Serveur-TP8

Field length [255]:


> 100

Can this field be null in the database (nullable) (yes/no) [no]:


>

updated: src/Entity/Student.php

Add another property? Enter the property name (or press <return> to stop
adding fie
lds):
> birth

Field type (enter ? to see all types) [string]:


> date
date

Can this field be null in the database (nullable) (yes/no) [no]:


>

updated: src/Entity/Student.php

Add another property? Enter the property name (or press <return> to stop
adding fie
lds):
>

Success!

Sami Melki-2020 4
L2-DSI : Atelier Framework Coté Serveur-TP8

4.3- Vérification

Vérifier la création de l’entité « src/entity/student.php »

4.4- Créer la base de données et la table

Utiliser successivement les commandes suivantes pour créer la BD « db_etudiant » est la table
« Student » :

$bin/console doctrine:database:create

$bin/console doctrine:schema:create

5- Création du contrôleur « StudentController.php »

5.1- Création du contrôleur

Créer le contrôleur « StudentController.php » par la commande symfony suivante :

$bin/console make:controller StudentController

Remarque: cette commande crée automatiquement deux fichiers :

- Le contrôleur : src/controller/StudentController.php
- Le Twig du controlleur : templates/student/index.html.twig

Sami Melki-2020 5
L2-DSI : Atelier Framework Coté Serveur-TP8

5.2- Vérification de la création

Vous devez obtenir les deux fichiers comme le montre la capture suivante :

5.2- Modifier le code des deux fichiers générés

Remplacer le code du fichier « studentController.php » qui vient d’être généré


automatiquement par le code suivant :

<?php
namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Routing\Annotation\Route;
use App\Form\StudentType;
use App\Entity\Student;

class StudentController extends AbstractController


{
public function index(Request $request)
{
$student = new Student();
$form = $this->createForm(StudentType::class, $student);

Sami Melki-2020 6
L2-DSI : Atelier Framework Coté Serveur-TP8

$form->handleRequest($request);
if ($form->isSubmitted() && $form->isValid()) {
// $form->getData() holds the submitted values
// but, the original `$student` variable has also been updated
$student = $form->getData();

// saving the task to the database


$entityManager = $this->getDoctrine()->getManager();
$entityManager->persist($student);
$entityManager->flush();

//return $this->redirectToRoute('confirm');
}

return $this->render('student/index.html.twig', ['form' => $form-


>createView(),]);
}
}

Remarque :

- La dernière ligne du code va injecter le formulaire dans le fichier twig :

return $this->render('student/index.html.twig', ['form' => $form->createView(),]);

- Après l’enregistrement des données dans la BD, on va faire une redirection vers la page de
confirmation dont la route est « confirm » (pas encore créée) :

return $this->redirectToRoute('confirm');

Remplacer le code du fichier « student/index.html.twig » qui vient d’être généré


automatiquement par le code suivant :

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

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

{% block body %}
<style>
</style>

<div class="example-wrapper">
<h1>Hello!</h1>

{{ form(form) }}

</div>
{% endblock %}

Sami Melki-2020 7
L2-DSI : Atelier Framework Coté Serveur-TP8

Remarque : la balise {{ form(form) }} sera l’emplacement du formulaire.

6- Génération du formulaire « StudentType » par Symfony

Remarque : avant de continuer, il faut démarrer le serveur (Apache et MySql » (avec Xampp)

6.1- La commande de création des formulaires

$ bin/console make:form Form_Name

Remarque : après avoir lancer cette commande, Symfony va demander le nom de l’entité (table
de la base) pour laquelle le formulaire va être crée. Il faut donner le nom d’un fichier qui se
trouve dans le repertoire « src/Entity/* ».

6.2- Application

$ bin/console make:form Student

The name of Entity or fully qualified model class name that the
new form will be bound to (empty for none):

> Student

created: src/Form/StudentType.php

Success!

Sami Melki-2020 8
L2-DSI : Atelier Framework Coté Serveur-TP8

6.3- Vérification

6.4- Modification du code

Le principe de fonctionnement du code généré est la création des éléments du formulaire pour
chaque variable de l’entité « Student » qu’on a déjà créé. C’est-à-dire :

name (string :255)


email (string :100)
birth (date)

Cependant, vous devez ajouter manuellement le bouton « submit ». Pour cela insérer les deux
lignes suivantes dans les emplacements indiqués dans la capture ci-dessous :

use Symfony\Component\Form\Extension\Core\Type\SubmitType;

->add('OK', SubmitType::class)

Sami Melki-2020 9
L2-DSI : Atelier Framework Coté Serveur-TP8

7- Configuration des routes

Dans le fichier « config/routes.yaml, », ajouter la route « /std » comme ci-dessous :

#sami melki tp6 2020

#Route du formulaire Student


std:
path: /std
controller: App\Controller\StudentController::index

8- Donner un style « Bootstrap » au formulaire

Insérer la ligne 3 dans le fichier « config/packages/twig.yaml » pour donner un style au


formulaire « student » :

1 twig:
2 default_path: '%kernel.project_dir%/templates'
3 form_themes: ['bootstrap_4_layout.html.twig']

Sami Melki-2020 10
L2-DSI : Atelier Framework Coté Serveur-TP8

9- Test du projet

1. Lancer le serveur web de Symfony par la commande : «$symfony server:start »


2. Entrer l’adresse “localhost:8000/std” dans le navigateur.
3. Vous devez obtenir la page suivante :

4. Ouvrir le SGBD Mysql dont l’adresse est “http://localhost/phpmyadmin/index.php” et


vérifier que les données on étés bien enregistrées comme le montre la capture ci-
dessous :

Sami Melki-2020 11
L2-DSI : Atelier Framework Coté Serveur-TP8

10- Travail demandé :


Il s’agit de reproduire le même travail, mais avec un nouveau projet :

Livre
id (auto)
titre (string :120)
publication (date)
prix (integer)

Nom du Projet : Book


Base de données : à créer par Doctrine
 Nom : db_book
 SGBD : (Mysql)
 Schéma des données : voir table ci-dessus
 Insertion des données : par formulaire Symfony

Remarque :
Lorsque vous terminez le TP, Appelez l’enseignant pour valider votre travail.

Sami Melki-2020 12