2013

Support de révision Symfony2

UP WEB

ESPRIT
27/11/2013
- Introduction : Dans ce support, nous proposons une révision de la formation Symfony2 avec
l’environnement de travail suivant : Netbeans pour PHP + Wamp.
- Problématique : Gestion de plus en plus délicate des gros projets en entreprise en particulier
au niveau de la collaboration, la gestion du contenu, la maintenabilité et l’extensibilité.
 Solutions : les framework et CMS

- Framework (Fram+work => cadre de travail)

 Avantages : meilleur organisation du code souvent grâce au modèle MVC, facilite le travail
en groupe (facilite l’intégration d’un nouveau membre de l’équipe), facilite le référencement
(avec l’url rewriting), meilleur sécurité des applications, réutilisation de modules déjà prêts,
indépendant de l’SGBD => malgré que son apprentissage n’est pas toujours évident, il assure
une meilleure productivité et ça fini par rapporter sur le long terme!!
- CMS (Content management System, système de gestion de contenu, on travailler avec, avec
un min de connaissance en info) contrairement à un framework (un cadre de travail pour des
vrais développeurs).
- Définition Symfony : Framework français développé chez sensioLabs en 2005 suite à la
demande de Fabien Potencier son PDG.

 Mise en place de l’environnement

1- Installer jdk7 à partir du site web d’oracle
2- Installer Netbeans à partir de son site officiel : www.netbeans.org (choisissez la version pr
HTML5 & PHP)

3- Renseigner la variable d’environnement php dans le path comme le montre les étapes
suivantes :

2
 Ensuite aller à ordinateur => bouton droit propriété

3
 Création du projet sur netbeans :
1- Aller sur tools => Options

4
  Renseigner PHP5 Interpreter

 Pointer sur le fichier .zip de symfony (la version finalement complète est 2.3.7)

2- Aller sur File

5
Donner le nom du projet et préciser plutôt la version PHP 5.3 pour la compatibilité !

6
7
Attendre quelques secondes et c’est fait !! 

8
Après la création de votre projet ! La première chose à faire c’est de vérifier la configuration PHP.

http://localhost/Nom_Projet/web/config.php

 Sous mac ou linux php –v

 Liste des répertoires :

App : tout ce qui concerne le site sauf le code source, séparer le code source qui fait la logique du
reste. Fichier de Config, cache, logs

Src : le code source  …

Vender : toutes les bibliothèques externes de notre répertoire swift, doctrine, twig (c’est quoi une
bibliothèque ? boite noir qu’on sait utiliser mais pas forcement ce qu’il y a dedans ! exp : swiftMail :
permet l’envoie des emails)

Web : tt ce qui est fichier destinés pr les visiteurs  css JS … là où on trouve notre controleur frontal,
le point d’entré de notre appli

 Contrôleur frontale
Le contrôleur frontal (front controller, en anglais) est le point d'entrée de votre application. C'est le
fichier par lequel passent toutes vos pages. Vous devez surement connaître le principe d'index.php et
des pseudo-frames (avec des URL du type index.php?page=blog) ; eh bien, cet index.php est un

9
contrôleur frontal. Dans Symfony2, le contrôleur frontal se situe dans le répertoire /web, il s'agit de
app.php ou app_dev.php.

Pourquoi y a-t-il deux contrôleurs frontaux ? Normalement, c'est un fichier unique qui gère toutes les
pages, non ?

 travaillons maintenant avec Symfony2, et son objectif est de nous faciliter le développement.
C'est pourquoi Symfony2 propose un contrôleur frontal pour nos visiteurs, app.php, et un
contrôleur frontal lorsque nous développons, app_dev.php. Ces deux contrôleurs frontaux,
fournis par Symfony2 et prêts à l'emploi, définissent en fait deux environnements de travail.

Deux environnements de travail ?

 L'objectif est de répondre au mieux suivant la personne qui visite le site :

Un développeur a besoin d'informations sur la page afin de l'aider à développer. En cas d'erreur, il
veut tous les détails pour pouvoir déboguer facilement. Il n'a pas besoin de rapidité.
Un visiteur normal n'a pas besoin d'informations particulières sur la page. En cas d'erreur, l'origine de
celle-ci ne l'intéresse pas du tout, il veut juste retourner d'où il vient. Par contre, il veut que le site
soit le plus rapide possible à charger.

Vous voyez la différence ?

 À chacun ses besoins, et Symfony2 compte bien tous les remplir. C'est pourquoi il offre
plusieurs environnements de travail :
- L'environnement de développement, appelé « dev », accessible en utilisant le contrôleur
frontal app_dev.php. C'est l'environnement que l'on utilisera toujours pour développer.
- L'environnement de production, appelé « prod », accessible en utilisant le contrôleur frontal
app.php.

10
11
  Then ok ok ^^ and finally click on the button Run :D

http://localhost/testSymfony/web/config.php

12
 Création d’un Bundle :

13
Préciser le namespace, ensuite le nom du bundle ensuite yes, yml, yes, yes et c’est fait 

14
  Ce qui se passe lors de la création d’un bundle

1] Création de son code source, situé dans src/Application/Bundle, et dont le seul fichier
obligatoire est la classe à la racine
NomApplicationNomBundle.php (il y a rien de spécial dedans, mais n’y touchez pas !  )

2] Téléchargement du bundle au noyau de symfony dans le fichier AppKernel.php sous le

répertoire app à la ligne 19 pour un tout premier comme suit :

 Cette classe permet donc uniquement de définir quels bundles charger pour
l'application.

15
3] Création du routeur :

C’est au niveau du fichier indiquer dans

« resource : » là où on trouve les routes=URL !

Pour chaque Action du contrôleur, on associe

une page.html.twig.

Pour chaque Action, on a l’URL qui lui

correspond (voir figure d’après) et donc sa
route, autrement dit son URL !

 Le rôle du Routeur est de déterminer quel contrôleur exécuter (plus précisément

quelle Action du contrôleur) en fonction de l'URL appelée. Pour cela, il utilise les
routes.

4] Pour chaque Action, il faut qu’on lui crée son URL (sa route) dans le fichier
routing.yml situé dans le répertoire de notre bundle sous Ressources/config !

16
 Je propose ce schéma pour mieux expliquer tout cela !

I. Affichage d’un message (response) affichage d’une page (render)

 Au niveau du contrôleur :

Rappel du rôle du contrôleur :

- Il « utilise » tous les autres composants (base de données, formulaires,

templates, etc.) pour générer la réponse suite à notre requête ;
- C'est ici que résidera toute la logique de notre site.

Un contrôleur du framework Symfony peut rendre :

- Soit une Page via le .html.twig correspondant à l’Action en question
- Soit un simple massage via la classe Response (à importer si besoin de
l’utiliser), pour le message pas besoin d’un fichier .html.twig, il suffit de lui
préciser son URL au niveau du fichier routing.yml de notre bundle situé sous
le répertoire config sous Resources.

17
 Au niveau de la route :

Maintenant, il faut aller au fichier routing.yml, pour voir comment indiquer l’URL de
chaque Action (voir figure d’après) : ce qu’on renseigne dans « pattern : » c’est ce
qu’on va mettre dans notre URL :

18
  Au niveau du fichier .html.twig

Savez-vous ce qu'est un moteur de templates ?

 C'est un script qui permet d'utiliser des templates, c'est-à-dire des fichiers qui ont
pour but d'afficher le contenu de votre page HTML de façon dynamique, mais sans
PHP.
Comment ?
Avec leur langage à eux. Chaque moteur a son propre langage.

Dans un premier, testons notre page index.html.twig avec ce simple code

Hello {{ name }}

Ensuite ajoutons les balises html <!DOCTYPE html>

<html>
<head>
<title>Bienvenue </title>
</head>
<body>
<h1>Hello {{ name }}</h1>
</body>
</html>

En remarque l’ajout de la toolbar sur notre page

Par rapport au code : on remarque que le moteur de template twig renseigne ses variables
entre {{ variable }}
19
 Expliquer que la variable name est la variable rendu par notre controleur.

Repartir sur un autre exemple plus poussé :

Au niveau du contrôleur :

class DefaultController extends Controller

{
public function indexAction()
{
$Message="3aslema";
$T= array("Ameni","Wassim","Patron","Amine","Oussema","Haithem");
return $this->render('EspritEtudiantBundle:Default:index.html.twig', array("Msg" => $Message,
"Enseignants" => $T));
}
}

Au niveau du fichier .html.twig

<!DOCTYPE html>
<html>
<head>
<title>Bienvenue </title>
</head>
<body>
<center><h1> {{ Msg }} </h1><center>
<table border="1">
{% for Enseignant in Enseignants %}
<tr>
<td>{{ Enseignant }}</td>
</tr>
{% endfor %}
</table>
< /body>
</head>

 On remarque que twig insert son propre code entre des {% code ici %}
Pour conclure et à titre de révision pratique, vous pouvez reprendre la création d’un
bundle sur l’invite de commande.
Et pour une révision théorique reprendre la présentation power point en pièces jointes.

20
Maintenant, on propose la création d’un tout nouveau projet qu’on appelle Tp et :

- La génération d’un bundle EspritBundle sous l’application MyApp,

- La configuration de la connexion avec BDD via le fichier parameters.yml
- La génération d’une entité Classe ayant comme attributs : nom (string), module (string),
nbEtudiant (integer) et annee (date),
- La génération de la BDD tp (un choix de garder le même nom du projet mais rien ne nous y
oblige),
- La génération de la table Classe dans la BDD,
- La génération d’un formulaire,
- La génération des CRUD

21
  Création du projet Tp :

Après la création du projet, la première chose à faire c’est de renseigner le point d’entrée pour notre
application qui est le contrôleur frontal app_dev.php sous le répertoire web comme suit :

22
 Génération du bundle

23
Bundle namespace: MyApp\EspritBundle

In your code, a bundle is often referenced by its name. It can be the concatenation of all namespace parts but
it's really up to you to come up with a unique name (a good practice is to start with the vendor name). Based
on the namespace, we suggest MyAppEspritBundle.

Bundle name [MyAppEspritBundle]:

The bundle can be generated anywhere. The suggested default directory uses the standard conventions.

Target directory [C:/wamp/www/Tp/src]:

Determine the format to use for the generated configuration.

Configuration format (yml, xml, php, or annotation): yml

To help you get started faster, the command can generate some code snippets for you.

Do you want to generate the whole directory structure [no]? yes

Summary before generation

You are going to generate a "MyApp\EspritBundle\MyAppEspritBundle" bundle in

"C:/wamp/www/Tp/src/" using the "yml" format.

Do you confirm generation [yes]?

Bundle generation

Generating the bundle code: OK

Checking that the bundle is autoloaded: OK

Confirm automatic update of your Kernel [yes]?

Enabling the bundle inside the Kernel: OK

Confirm automatic update of the Routing [yes]?

Importing the bundle routing resource: OK

You can now start using the generated code!

Done.

24
  Configuration de la connexion avec la BDD :

--------------------------------------------------------------------------------------------------------------------------------------

# This file is auto-generated during the composer install

parameters:

database_driver: pdo_mysql

database_host: Localhost

database_port: null

database_name: tp

database_user: root

database_password: null

mailer_transport: smtp

mailer_host: Localhost

mailer_user: null

mailer_password: null

locale: fr

secret: ThisTokenIsNotSoSecretChangeIt

25
 Génération de l’entité Classe :

26
27
 Génération de la BDD tp :

 Génération de la table classe dans la BDD tp

28
 Génération d’un formulaire pour l’entité Classe :

29
 Résultat de la génération de l’entité et de du formulaire dans le répertoire src

 Génération des CRUD

30
 à copier ce dernier petit Bou de code en jaune dans le fichier routing.yml sous notre bundle.
 A la fin, nous aurons l’arborescence suivante :

31
  Testons le résultat :

Si on clique sur ce lien hypertexte, cela va nous amener à la page new

32
En cliquant sur le bouton Create, cela va nous amener à la page show

A partir de cette page, on peut soit retourner à la liste :

33
Soit Editer pour pouvoir modifier les donner dans la BDD :

Ou bien supprimer de la base en cliquant sur le bouton delete 

Maintenant, il ne reste qu’à aller expliquer le code des CRUD qui ressemble énormément à celui de
zend !

34
  Intégration d’un Template :
Il faut commencer bien sur par déziper le .zip du template :pp

Copier les fichiers CSS, les images et les fichiers JS s’il en existe comme le montre la figure
en dessous (1). Ensuite, copier le fichier layout.html.twig sous views (2) à partir de
l’application démo acme (vous le trouverez sous views aussi).

Maintenant, il faut aller au dossier du template téléchargé.

Et ouvrir index.html avec notepad++

Copier la ligne 19 contenant un lien css sur internet (sur d’autres templates, on pourrait en
trouver plusieurs donc il faudrait tout copier)

35
Maintenant, il faut aller au fichier layout.html.twig et :

- Supprimer la première ligne car il n’y en a plus besoin puisque sur ce tuto on n’hérite
pas du fichier base.html.twig étant donné que l’application démo acme hérite déjà de
ce fichier et ceci génère un conflit.
1- Coller la ligne 19 du fichier index.html (voir ligne 2 dans la figure ci-dessous)
2- Préciser le namespace (nom App + Bundle) et le nom du fichier css du template
(voir ligne 4 dans la figure ci-dessous)

Maintenant retour au fichier index.html et copier tout le contenu du body (balise body non
incluse).

Coller tout cela dans layout.html.twig en écrasant tout le code en dessous du block head
entre les lignes 0 et 5, comme le montre la figure ci-dessous.

36
Maintenant, sur le fichier layout.html.twig, on va renseigner qu’on va remplacer le contenu
de la division content du template par notre propre contenu, voir figure ci-dessous :

Maintenant, on va aller à la page que nous voulons intégrer avec ce template (exemple la page
edit.html.twig ) et on va indiquer que nous allons hériter du fichier layout.html.twig (voir
ligne 1 sur la figure ci-dessous).

Par la suite, il faut indiquer qu’il s’agit du « content » comme le montre la figure ci-dessous
entre les lignes 2 et 17.

37
A ce stade, il ne nous reste qu’à lancer la commande assets pour que tout cela prenne effet !
voir figures ci-dessous :

En testant, nous devons avoir cela :

38
39