Cours-Workshop1 Install MVC

Workshop n°1 : Préparation de l’environnement et Objectifs :
Premier projet Symfony  1.Préparer son environement

Symfony
 2.Creation d’un premier projet
Symfony
 3.Manipulation de la couche MVC
Suite de cours :
Première Partie : Préparation de l’environnement
Ci-dessous les différentes étapes pour préparer notre environnement de développement
afin de créer un projet Symfony.
1) Installer VS Code
2) Installer la dernière version de Wampserver.
3) Installer le plugin (wampserver3_x64_addon_php7.4.4.exe) suivant : lien drive :
https://drive.google.com/open?id=1HWh9rpwgpiNOYQsZCG8VEEJ1AzdUfppn
4) Cliquez sur l’icône de Wampserver et choisissez PHP 7.4.4
5) Vérifiez dans l’invite de commande cmd que le c’est bien la version 7.4.4 qui est utilisée et
ceci en tapant la commande php –v
6) Installer Composer (https://drive.google.com/open?id=1-
bovN1oBCYHQkVotF9j6KL1idyrDtM-S )
7) Vérifier que composer est bien installé en tapant la commande : Composer –v
Deuxième Partie : Création d’un premier projet

Placer vous sous un répertoire, par exemple « lab » et taper dans le terminal de VS Code la
commande suiavnte :
composer create-project symfony/website-skeleton premier_mvc "4.4.*"
Une fois c’est bon, taper la commande « cd premier_mvc » et lancer ensuite la commande
« composer req server » puis « php bin/console server:run».
Lancer votre navigateur et taper l’adresse http://127.0.0.1:8000
Tuto Symfony 4.4 – Workshop 1

Félicitation, votre environnement est prêt maintenant, commençant le dev  !
Remarquons présence de la barre de débogage en bas de la page web.

Vous pouvez également créer un projet Symfony avec une version précise :
composer create-project symfony/website-skeleton:^4.4 my_project_name
Troixième Partie : Manipulation de la couche MVC

Dans cette section, on va comprendre les concepts de base du framework Symfony à
savoir :
 Les controlleurs
 Les actions avec passage de paramètres
 Le routage dans des fichiers yml et en mode annotation
 L’affichage via twig et l’objet response
C’est la couche MVC du framework. Dans la suite de ce workshop, nous utilisons « Visual
Studio Code » comme IDE de développement.

1-Les controlleurs
Un controlleur n’est autre qu’une classe PHP contenant des méthodes qui
s’exécutent une fois elles « match » une url(« route »). Dans une prèmière étape, nous
créons un controller de façons manuelle, suite à ça nous allons installer un bundle externe
Créons notre premier controlleur « FirstController » sous le repertoire Controller.
La convention ici est que tout controlleur doit être préfixé par le mot clé Controller.
Src\Controller\FirstController.php :
<?php
namespace App\Controller;
use Symfony\Component\HttpFoundation\Response;
class FirstController
public function userID()

{
$id = random_int(0, 100);
return new Response(
'<html><body> Votre ID est : '.$id.'</body></html>'

);
Nous avons également utiliser l’objet Response pour afficher du contenu sur navigateur.
Dans une deuxième étape, il faut associer à cette action une route. Allez au fichier
« config/routes.yaml » et ajouter les 3 lignes suivantes
first_controller_userID_route:
path: /first/userid
controller: App\Controller\FirstController::userID

Une route est identifée par son nom, son path et enfin l’action associée. La tabulation c’est
quatre espace. Lancer votre navigateur en tapant «http://127.0.0.1:8000/first/userid »
Relancer avec un refresh et un nouvel ID apparaît.

2-Les actions avec passage de paramètres
On peut passer des paramètres à notre action comme suit :
public function info($formation, $formateur)
return new Response(

'<html><body> Formation : '.$formation.' Formateur
:'.$formateur.'</body></html>'
);

Lancer votre navigateur et tapez l’url :
127.0.0.1 :8000/first/symfony/Faycel
Vous obtenez l’affichage suivant dans votre navigateur :
On peut également faire un debug afin de lister les différentes routes disponibles dans
notre projet. Tapez la commande : php /bin/console debug :router
3-Le routage dans des fichiers yml et en mode annotation

La définition des routes ne se limite pas au fichier routes.yaml. L’annotation qui consiste
à définir les routes dans le fichier controller est desormais possible via le package
« annotations ».
Maintenant créons une action qui est accessible via les annotations :
1-Faites l’import suivant : use Symfony\Component\Routing\Annotation\Route;
2-Ajouter avant l’action l’annotation suivante :
/**
* @Route("/first/index")
*/

Taper l’url sur votre naviagateur
4-L’affichage via twig
Pour afficher un contenu issu d’une méthode, On peut également utiliser TWIG : c’est un
moteur de templating comme on l’appel permettant de gérer la partie vue du framework.

Créer une un fichier index.html.twig sous le dossier « templates/first/index.html.twig »
et apporter les changements suivants à votre controlleur.
Le contenu du fichier twig est le suivant :
Ainsi tout controlleur doit hériter de la classe AbstractControlleur est ceci afin de
bénificier de plusieur méthodes telque « render() ». Il est également conseiller de choir un
nom de dossier des vues comme celui du controlleur. Avec le moteur de template twig,
on peut faire plein de choses qu’on ne peut pas faire dans un fichier html classique :

a. Les structures conditionnelles et itératives
b. Les filtres via les pipes
c. L’héritage de templates via les blocks
d. Portabilité via la fonction asset()
e. Créer des liens entre pages
f. …
Tout d’abord, on peut remarquer que notre barre de débogage est disparue, ceci est due
au fait que notre vue est dépourvue de partie <body></body>. Pour ce faire on va
apporter les modifications suivantes à nos vues « index.html.twig » et « base.html.twig »
(qui représente le template père de toute l’application).
On remarque la présence de « block ». Au fait ce sont des zones qui pouvant être
remplacer par un template fils.

On peut se rendre compte, suite à un refresh que la barre de débogage apparait de
nouveau. 
On peut également boucler sur des collections qu’on récupère depuis les actions.
Exemple tableaux contenant la liste des candidats :

Maitenant, si la liste des candidats est nulle(vide), il vaut mieux afficher un message !
Apporter les modifications suivantes :

Ensuite, changer votre vue comme suit :
On peut également appliquer les pipes, exemple :
<li>{{candidat|upper}}</li> : c’est pour avoir les noms en majuscule.

Pour ajouter un effet css à votre page, on pourra également utiliser la méthode « asset() »
pour linker des ressources statiques dans votre page.
Ajouter asset via composer en tapant : composer require symfony/asset

Apporter les modifications suivantes à votre vue « index.html.twig »
Le fichier « style.css » aura comme contenu :

Enfin pour créer des liens vers d’autres vues, on utilise la fonction « path() ».
Apporter les modifications suivantes :

1-Au niveau du controlleur, ajouter une action « description »
2-Créer une route dans le fichier « routes.yaml »
3-Créer la page description « description.html.twig »

4-Ajouter un lien de la page « index.html.twig » vers la page « description.html.twig »
Et voici le résultat suite au clique sur « ici »

Pour finir, on rappel que symfony nous permet d’accéler le processus de génération de
code source via le composant « composer require symfony/maker-bundle –dev »
Nous pouvons créer notre premier contolleur avec le bundle Maker
Voici un screenshots des elements crées :

Le fichier index.html.twig
Et sur votre navigateur :

Exercice à faire (45 min)
1-Créer une nouvelle action « listCandidats » contenant un tableau de candidats.
2-Chaque candidats est caractérisé par : (id, nom, prénom, email, photo, adresse, age,
biographie)
3-Associer à cette action une route dans le fichier routes.yaml.
4-Créer une vue « list.html.twig » permettant d’afficher dans un tableau la liste des
candidats. Le tableau doit afficher seulement les informations (id, nom, prenom, email)
5-Ajouter la bibliothèque bootstrap 4 dans votre projet et apporter à votre vue un effet
responsive.
6-Créer une nouvelle action « public function showCandidat($id){…} ». Cette fonction
va nous permettre d’afficher le reste des informations (image, age, adresse, biographie)
d’un candidats données dans une autre vue « showCandidat.html.twig » si on clique sur
son id dans le tableau situé dans la page « listCandidats.html.twig »
Bon travail !

Cours-Workshop1 Install MVC

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours-Workshop1 Install MVC

Transféré par

Droits d'auteur :

Formats disponibles

Workshop n°1 : Préparation de l’environnement et Objectifs :

Premier projet Symfony  1.Préparer son environement

Deuxième Partie : Création d’un premier projet

Lancer votre navigateur et taper l’adresse http://127.0.0.1:8000

Tuto Symfony 4.4 – Workshop 1

Remarquons présence de la barre de débogage en bas de la page web.

composer create-project symfony/website-skeleton:^4.4 my_project_name

Troixième Partie : Manipulation de la couche MVC

Tuto Symfony 4.4 – Workshop 1

public function userID()

$id = random_int(0, 100);

return new Response(

'<html><body> Votre ID est : '.$id.'</body></html>'

Tuto Symfony 4.4 – Workshop 1

Relancer avec un refresh et un nouvel ID apparaît.

public function info($formation, $formateur)

return new Response(

Tuto Symfony 4.4 – Workshop 1

3-Le routage dans des fichiers yml et en mode annotation

2-Ajouter avant l’action l’annotation suivante :

Tuto Symfony 4.4 – Workshop 1

4-L’affichage via twig

Tuto Symfony 4.4 – Workshop 1

Le contenu du fichier twig est le suivant :

Tuto Symfony 4.4 – Workshop 1

Tuto Symfony 4.4 – Workshop 1

Tuto Symfony 4.4 – Workshop 1

Tuto Symfony 4.4 – Workshop 1

On peut également appliquer les pipes, exemple :

<li>{{candidat|upper}}</li> : c’est pour avoir les noms en majuscule.

Tuto Symfony 4.4 – Workshop 1

Ajouter asset via composer en tapant : composer require symfony/asset

Le fichier « style.css » aura comme contenu :

Tuto Symfony 4.4 – Workshop 1

Apporter les modifications suivantes :

2-Créer une route dans le fichier « routes.yaml »

3-Créer la page description « description.html.twig »

Tuto Symfony 4.4 – Workshop 1

Et voici le résultat suite au clique sur « ici »

Tuto Symfony 4.4 – Workshop 1

Nous pouvons créer notre premier contolleur avec le bundle Maker

Voici un screenshots des elements crées :

Tuto Symfony 4.4 – Workshop 1

Et sur votre navigateur :

Tuto Symfony 4.4 – Workshop 1

Tuto Symfony 4.4 – Workshop 1

Vous aimerez peut-être aussi