Symphoni PDF

Home Demo Source EN ES
symblog
creating a blog in Symfony2
[Partie 1] - Conguration de Symfony2 et utilisation des templates
Je propose galement des formations en petits groupes sur 2 3 jours, plus dinfos sur la page ddie. Nhsitez pas me
contacter (06.62.28.01.87 ou clement [@] keiruaprod.fr) pour en discuter !
Introduction
Ce chapitre va couvrir les premires tapes de la cration dun site web avec Symfony2. Nous allons tlcharger et congurer la
distribution standard de Symfony2, crer un bundle pour le Blog et construire le template HTML principal. A la n de ce chapitre, vous
aurez congur un site avec Symfony2 qui sera disponible une adresse locale, par exemple http://symblog.dev/. Le site web va
contenir la structure HTML principale du blog, ainsi que du contenu factice.
Les thmes suivants vont tre abords au cours de ce chapitre:
Mise en place dune application Symfony2 1.
Conguration dun domaine de dveloppement 2.
Les Bundles Symfony2 3.
Les routes 4.
Les contrleurs 5.
Les templates avec Twig 6.
Tlchargement et installation
Comme tabli ci-dessus, nous allons utiliser la distribution standard de Symfony2 (Symfony2 Standard Distribution). Cette
distribution est livre avec les librairies du moteur de Symfony2, ainsi quavec les principaux bundles ncessaires au dveloppement
dun site web. Vous pouvez tlcharger larchive correspondante sur le site de Symfony2. Comme je ne souhaite pas rpter le
contenu de lexcellente documentation propose dans le livre sur Symfony2, vous pouvez consulter le chapitre Installation et
conguration de Symfony2 pour des besoins spciques. Cela vous permettra de choisir quelle archive choisir, comment installer les
vendors requis, et enn comment assigner les permissions aux rpertoires qui le ncessitent.
Attention
Il est important daccorder un soin particulier la section Mise en place des permissions du chapitre dinstallation. Cela dtaille
les diverses manires daccorder des permissions aux rpertoires app/cache et app/logs an que les utilisateurs du serveur web
aient les droits daccs en criture.
Cration dun domaine de dveloppement
Pour ce tutorial, nous allons utiliser le domaine local http://symblog.dev/, nanmoins vous pouvez utiliser celui de votre choix. Ces
instructions sont spciques Apache et supposent quil est dj install et fonctionne sur votre machine. Si vous tes dj laise
avec la mise en place de domaines locaux ou bien si vous utilisez un serveur web dirent tel que nginx vous pouvez sauter cette
section.
Note
Ces tapes ont t ralises sur la distribution Linux Fedora. Il est donc possible que les chemins daccs puissent direr
si vous utilisez un autre systme dexploitation.
[Partie 1] - Conguration de Symfony2 et utilisati... http://keiruaprod.fr/symblog-fr/docs/conguration...
1 sur 13 28/10/2014 11:12
Commenons par crer un hte virtuel avec Apache. Dans le chier de conguration dApache, ajoutez les paramtres suivants en
prenant bien soin de changer les chemins de DocumentRoot et Directory correctement. Le chemin et le nom de votre chier de
conguration Apache peut fortement varier selon votre systme dexploitation. Avec Fedora, il est situ dans /etc/httpd/conf/httpd.conf.
Vous devrez diter ce chier avec les privilges sudo .
# /etc/httpd/conf/httpd.conf
NameVirtualHost 127.0.0.1
<VirtualHost 127.0.0.1>
ServerName symblog.dev
DocumentRoot "/var/www/html/symblog.dev/web"
DirectoryIndex app.php
<Directory "/var/www/html/symblog.dev/web">
AllowOverride All
Allow from All
</Directory>
</VirtualHost>
Ensuite ajoutez un nouveau domaine la n du chier hte situ dans /etc/hosts. A nouveau, vous devrez diter ce chier avec les
privilges sudo .
# /etc/hosts
127.0.0.1 symblog.dev
Finalement, noubliez pas de redmarrer le service Apache, an de mettre jour les paramtres de conguration avec les
informations que nous venons de spcier.
$ sudo service httpd restart
Tip
Si vous passez votre temps crer des domaines virtuels, vous pouvez simplier ce processus en utilisant des htes
virtuels dynamiques.
Vous devriez dsormais pouvoir visiter lurl http://symblog.dev/app_dev.php/.
2 sur 13 28/10/2014 11:12
Sil sagit de votre premire visite sur la page daccueil de Symfony2, prenez un peu de temps pour regarder les pages de
dmonstration. Sur chacune dentre elles vous pourrez trouver les bouts de code utiliss sous le capot.
Note
Vous pouvez galement remarquer une barre doutils au bas de lcran daccueil. Il sagit de la barre doutils pour les
dveloppeurs, qui fournit des informations prcieuses sur ltat de lapplication. Parmi ces informations, vous pourrez
trouver le temps dexcution de la page, lutilisation mmoire, les requtes eectues dans la base de donnes, ltat
dauthentication, et beaucoup plus. Par dfaut, la barre doutils est seulement visible dans lenvironnement dev, car
fournir la barre doutils dans lenvironnement de production serait une grosse faille de scurit: cel exposerait beaucoup
dinformations sur le fonctionnement interne de lapplication. Des rfrences cette barre doutils seront faites au cours
de ce tutoriel an de vous apprendre lutiliser.
Congurer Symfony2 : linterface web
Symfony2 propose une interface web pour congurer divers aspects du site web tels que les paramtres de la base de donnes. Nous
avons besoin dune base de donnes pour ce projet, commenons par utiliser loutil de conguration.
Rendez-vous ladresse http://symblog.dev/app_dev.php/ et cliquez sur le bouton Congure. Entrez les dtails pour paramtrer lusage de
votre base de donnes avec Symfony2 (ce tutorial suppose lutilisation de MySQL, mais vous pouvez choisir nimporte quelle base de
donnes laquelle vous avez accs). Sur la page suivante, poursuivez par la gnration dune cl CSRF. Vous seront ensuite
prsents les paramtres de Symfony2 que lapplication a gnr pour vous. Attention la remarque gurant sur cette page, il y a
des chances que votre chier app/paramaters.ini ne soit pas accessible en criture et que vous deviez copier/coller les paramtres dans
ce chier (Ces paramtres peuvent alors remplacer ceux dj existants).
Les bundles : Les briques lmentaires de Symfony2
les bundles sont les blocs de construction lmentaires de nimporte quelle application Symfony2, en fait le framework Symfony2 est
lui mme un bundle. Les bundles permettent de sparer le code en briques fonctionnelles et rutilisables. Ils encapsulent le
fonctionnement des diverses composantes telles que les contrleurs, le modle, les templates ainsi que les diverses ressources,
aussi bien images que CSS. Nous allons crer un bundle pour notre site web dans lespace de nom (namespace) Blogger. Si vous
ntes pas familier avec les espaces de nom en PHP vous devriez passer un peu de temps sur le sujet, car ils sont trs largement
utiliss. Dans Symfony2, toute portion de code se trouve lintrieur dun espace de nom. Regardez le chargement automatique des
classes Symfony2 pour explorer en dtail le chargement automatique des classes dans Symfony2.
Tip
Une bonne comprhension des espaces de nom peut liminer les problmes usuels auxquels vous pourriez faire face
quand les structures de rpertoires ne retent pas correctement les structures despaces de noms.
Cration du bundle.
Pour encapsuler les fonctionnalits utilises par le blog, nous allons crer le bundle du blog, qui va stocker tous les chiers requis et
pourrait alors tre dpos directement dans nimporte quelle autre application Symfony2. Symfony2 propose un large ventail de
tches pour nous assister dans la ralisation doprations courantes. Une de ces oprations courantes est la cration dun bundle.
Pour dmarrer le gnrateur de bundle, utilisez la commande suivante. Des informations permettant de congurer le bundle vous
seront demandes. Slectionner chaque fois la proposition par dfaut.
$ php app/console generate:bundle --namespace=Blogger/BlogBundle --format=yml
Une fois le travail du gnrateur achev, Symfony2 aura agenc pour vous les divers lments de base de la structure du bundle. Un
certain nombre de changements sont noter ici.
Tip
Vous ntes pas obliger dutiliser les gnrateurs que Symfony2 propose, ils sont seulement l pour vous guider. Vous
3 sur 13 28/10/2014 11:12
auriez pu crer manuellement la structure de rpertoires et de chiers du bundle. Bien quil nest pas obligatoire dutiliser
les gnrateurs, ils ont pour avantage dtre rapide utiliser et ralisent toutes les tches requises pour quun bundle
puisse fonctionner, par exemple lenregistrement du bundle.
Lenregistrement du bundle
Notre nouveau bundle BloggerBlogBundle a t enregistr dans le noyau (Kernel) situ dans app/AppKernel.php. Symfony2 a besoin que nous
enregistrions tous les bundles utiliss par lapplication. Bous pourrez galement remarquer que certains bundles sont seulement
enregistrs dans les environnements dev ou test. Charger ces bundles dans lenvironnement de production prod apporterait des calculs
supplmentaires pour des fonctionnalits qui ne seraient pas ncessaires. Le code suivant montre comment notre BloggerBlogBundle a
t enregistr
// app/AppKernel.php
class AppKernel extends Kernel
{
public function registerBundles()
{
$bundles = array(
// ..
new Blogger\BlogBundle\BloggerBlogBundle(),
);
// ..
return $bundles;
}
// ..
}
Les routes
Le routage du bundle a t import dans le principal chier de routage de lapplication, situ dans app/config/routing.yml.
# app/config/routing.yml
BloggerBlogBundle:
resource: "@BloggerBlogBundle/Resources/config/routing.yml"
prefix: /
Loption prefix nous permet dassocier le routage entier du BloggerBlogBundle avec un prxe. Dans notre cas, nous avons opt pour
utiliser le chemin par dfaut, qui est /. Si par exemple vous vouliez que toutes les routes soient prxes par /blogger, vous pouvez
changer le prxe pour prefix: /blogger.
Structure par dfaut
Larchitecture de rpertoire par dfaut du bundle a t cr dans le rpertoirre src. Cela commence par le rpertoire Blogger qui est
associe lespace de nom Blogger dans lequel nous avons cre notre bundle. Dans ce rpertoire se trouve le rpertoire BlogBundle qui
contient le bundle. Le contenu de ce dossier va tre dtaill mesure que nous avancerons dans ce tutoriel. Si vous tes familier
avec larchitecture MVC, certain des noms de rpertoires doivent parler deux mme.
Le contrleur par dfaut
Grce au gnrateur de bundle, Symfony2 a cr pour nous un contrleur par dfaut. Nous pouvons utiliser ce contrleur en allant
ladresse http://symblog.dev/app_dev.php/hello/symblog. Vous devriez voir une page trs simple. Essayez de remplacer le symblog la n de
ladresse par votre nom. Nous allons examiner comment cette page a t gnre.
Routage
Le chier de routage du BloggerBlogBundle situ dans src/Blogger/BlogBundle/Resources/config/routing.yml contient les rgles de routage par
dfaut
# src/Blogger/BlogBundle/Resources/config/routing.yml
BloggerBlogBundle_homepage:
pattern: /hello/{name}
defaults: { _controller: BloggerBlogBundle:Default:index }
4 sur 13 28/10/2014 11:12
Le routage est compos dun motif et de paramtres par dfaut. Le motif est compar lURL, les paramtres dsignent quel
contrleur excuter lorsque la route est ligible. Dans le motif /hello/{name}, le substitut {name} va correspondre nimporte quelle type
de valeur car rien de spcique na t prcis. Cette route ne prcise galement aucune culture, format ou mthode HTTP. Comme
aucune mthode HTTP nest prcise, les requtes de type GET, POST, PUT ou autre sont ligibiles lors de la comparaison du motif.
Si une adresse valide tous les critres prciss par une route, alors elle sera excute par le contrleur dcrit dans loption
_controller. Cette option contient le nom logique du contrleur qui permet Symfony2 de lassocier un chier spcique. Lexemple
ci-dessus va conduire lexcution de laction index du contrleur Default situ dans le chier src/Blogger/BlogBundle/Controller
/DefaultController.php.
Le contrleur
Le contrleur dans cet exemple est trs simple. La classe``DefaultController`` tend la classe Controller qui propose des mthodes
utiles telles que la mthode render utilise ci dessous. Comme notre route dnit un substitut, il est pass comme argument notre
action sous le nom $name. Laction ne fait rien de plus quappeler la mthode render en lui prcisant dutiliser le chier template
index.html.twig situ dans le dossier de vues (Views/) du contrleur Default de BloggerBlogBundle pour lachage. Le format du nom de
template est bundle:controlleur:template. Dans notre cas il sagit de BloggerBlogBundle:Default:index.html.twig, qui associe le template
index.html.twig, dans le chier de vues Default du BloggerBlogBundle, ou physiquement au chier src/Blogger/BlogBundle/Resources/views/Default
/index.html.twig. Un tel format de nommage pour les template permet de rfrer des bundles depuis nimporte o dans lapplication,
ou mme dans un autre bundle. Nous verrons cela plus tard dans le chapitre.
Nous passons galement la variable $name au template via le paramtre array fourni la mthode render.
<?php
// src/Blogger/BlogBundle/Controller/DefaultController.php
namespace Blogger\BlogBundle\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
class DefaultController extends Controller
{
public function indexAction($name)
{
return $this->render('BloggerBlogBundle:Default:index.html.twig', array('name' => $name));
}
}
Le template (la vue)
Comme vous pouvez le voir, le template est trs simple. Il ache Hello, suivi de largument name qui a t pass en paramtre par le
contrleur.
{# src/Blogger/BlogBundle/Resources/views/Default/index.html.twig #}
Hello {{ name }}!
Nettoyage
Comme nous navons pas besoin de certains des chiers par dfaut crs par le gnrateur, nous allons faire un peu de nettoyage.
Le chier du contrleur src/Blogger/BlogBundle/Controller/DefaultController.php peut tre supprim, ainsi que le rpertoire pour la vue et son
contenu src/Blogger/BlogBundle/Resources/views/Default/. Finalement, supprimez la route dnie dans src/Blogger/BlogBundle/Resources/config
/routing.yml
Template
Il y a 2 options par dfaut pour les templates lorsque lon utilise Symfony2; Twig et PHP. Vous pouvez bien sr nutiliser ni lun ni
lautre et opter pour une autre librairie. Cest possible grce au container dinjection de dpendances. Nous allons utiliser Twig
comme moteur de template pour un certain nombre de raisons.
Twig est rapide - Les templates twig sont compils en classes PHP, il y a donc trs peu de surcharge lors de lutilisation des
templates Twig.
1.
Twig est concis - Twig nous permet de raliser les fonctionnalits lies au templates en trs peu de code. Cest comparer avec le
PHP, qui peut parfois savrer trs verbeux.
2.
Twig supportes lhritage de template - Il sagit dune de mes prfres. Les templates ont la capacit dtendre et surcharger
dautres templates, ce qui permet aux templates enfants de remplacer ce qui t propos par dfaut par les parents.
3.
5 sur 13 28/10/2014 11:12
Twig est sr - Twig chappe par dfaut ce quil ache, et propose mme un environnement de type bac sable pour les templates
imports.
4.
Twig est extensible - Twig propose de base un certain nombre de fonctionnalits rcurrentes que vous tes en droit dattendre dun
moteur de template, mais pour les situations ou vous pourriez avoir des besoins spciques, il est facile dtendre Twig.
5.
Il sagit l de seulement quelques uns des bnces de Twig. Pour trouver plus de raisons pour lesquelles vous devriez utiliser Twig,
rendez vous sur le site ociel de Twig.
Structure de prsentation
Comme Twig supporte lhritage de template, nous allons mettre en place lapproche dhritage 3 niveaux. Cette approche nous
permet de modier la vue a 3 niveaux distincts lintrieur de lapplication, ce qui permet pas mal de personnalisation.
Template principal - Niveau 1
Commenons par crer le bloc de base du template pour Symblog. Nous avons pour cela besoin de 2 chiers, le template et son
chier CSS associ. Comme Symfony2 supporte lHTML5 nous allons galement nous en servir.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset=utf-8" />
<title>{% block title %}symblog{% endblock %} - symblog</title>

{% block stylesheets %}
<link href='http://fonts.googleapis.com/css?family=Irish+Grover' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=La+Belle+Aurore' rel='stylesheet' type='text/css'>
<link href="{{ asset('css/screen.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}
<link rel="shortcut icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
<section id="wrapper">
<header id="header">
<div class="top">
{% block navigation %}
<nav>
<ul class="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
{% endblock %}
</div>
<hgroup>
<h2>{% block blog_title %}<a href="#">symblog</a>{% endblock %}</h2>
<h3>{% block blog_tagline %}<a href="#">creating a blog in Symfony2</a>{% endblock %}</h3>
</hgroup>
</header>
<section class="main-col">
{% block body %}{% endblock %}
</section>
<aside class="sidebar">
{% block sidebar %}{% endblock %}
</aside>
<div id="footer">
{% block footer %}
Symfony2 blog tutorial - created by <a href="https://github.com/dsyph3r">dsyph3r</a>
{% endblock %}
</div>
</section>
{% block javascripts %}{% endblock %}
</body>
</html>
Note
6 sur 13 28/10/2014 11:12
Il y a 3 chiers externes utiliss par le template, 1 chier JavaScript et 2 chiers CSS. Le chier JavaScript rsoud le
problme du dfaut de support dHTML5 dans les navigateurs IE antrieurs la version 9. Les 2 chiers CSS importent des
polices de caractres web Google.
Ce template met en place la structure principale de notre site de blogging. La plupart du chier est compos de HTML, avec
dtranges commandes Twig. Cest ces directives Twig que nous allons nous intresser maintenant.
Commenons pour nous intresser la partie HEAD du document. Regardons la balise title:
<title>{% block title %}symblog{% endblock %} - symblog</title>
La premire chose que vous aller remarquer est ltrange tag {%. Ce ni du HTML, ni du PHP non plus. Il sagit dun des 3 tags de Twig.
Ce tag signie Fais quelque chose. Il est utilis pour executer des blocs de code tels que les structures de contrle, et pour dnir des
blocs. Une liste complte des structures de contrle est disponible dans la documentation de Twig. Le bloc Twig que nous avons dni
dans le titre fait 2 choses; Il cre un identicateur de block nomm title, et lui fournit une valeur de contenu par dfaut entre les
directives block et endblock. En dnissant un bloc, nous pouvons nous servir du modle dhritage de Twig. Par exemple, sur une
page qui sert acher un article, on peut souhaiter que le titre de la page rete le titre de larticle. Cela peut tre ralis en
tendant le template et en surchargeant le bloc title.
{% extends '::base.html.twig' %}
{% block title %}The blog title goes here{% endblock %}
Dans lexemple ci dessus, nous avons tendu le template de base de lapplication qui dnissait initialement le bloc title. Vous
pourrez remarquer que le format de template utilis dans la directive extends ne contient ni la partie Bundles ni la partie Controlleur que
nous avons voqus prcdemment: souvenez vous du format bundle:controller:template. En ne prcisant ni le Bundle ni le Controlleur, on
spcie lusage des templates au niveau de lapplication, cest dire ceux situs dans app/Resources/views/.
Ensuite nous avons dni un autre bloc de titre et avons mis dedans du contenu, dans le cas prsent le titre du blog. Comme le
template parent a dj dni un block title, il est remplac par le nouveau. Le titre serait dsormais The blog title goes here -
symblog. Cette fonctionnalit propose par Twig va tre largement utilise lors de la cration de templates.
Dans le bloc de la feuille de style, nous avons introduit le tag Twig suivant, {{, qui signie Dis quelque chose.
<link href="{{ asset('css/screen.css') }}" type="text/css" rel="stylesheet" />
Ce tag est utilis pour acher la valeur dune variable ou dune expression. Dans lexemple ci-dessus, il ache la valeur de la
fonction asset, qui nous fournit une manire portable de faire le lien avec les chiers manipuls par lapplication, tels que les chiers
CSS, JavaScript et les images.
Le tag {{ peut galement tre combin avec des ltres pour manipuler la sortie avant son achage.
{{ blog.created|date("d-m-Y") }}
Pour une liste complte des ltres, se rfrer la documentation de Twig.
Le dernier tag de Twig, que nous navons pas vu dans les templates, est le tag de commentaires {#. Son usage est le suivant :
{# The quick brown fox jumps over the lazy dog #}
Il ny a pas dautre concept introduit dans ce template. Il fournit la structure principale, prte tre personnalise selon nos besoins.
Ensuite, il est temps dajouter du style. Crez une feuille de style dans web/css/screen.css et ajoutez le contenu suivant. Cela va ajouter
du style pour le template principal.
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike
body { line-height: 1;font-family: Arial, Helvetica, sans-serif;font-size: 12px; width: 100%; height: 100%; color: #000; font-size: 14px; }
.clear { clear: both; }
#wrapper { margin: 10px auto; width: 1000px; }
#wrapper a { text-decoration: none; color: #F48A00; }
#wrapper span.highlight { color: #F48A00; }
#header { border-bottom: 1px solid #ccc; margin-bottom: 20px; }
#header .top { border-bottom: 1px solid #ccc; margin-bottom: 10px; }
7 sur 13 28/10/2014 11:12
#header ul.navigation { list-style: none; text-align: right; }
#header .navigation li { display: inline }
#header .navigation li a { display: inline-block; padding: 10px 15px; border-left: 1px solid #ccc; }
#header h2 { font-family: 'Irish Grover', cursive; font-size: 92px; text-align: center; line-height: 110px; }
#header h2 a { color: #000; }
#header h3 { text-align: center; font-family: 'La Belle Aurore', cursive; font-size: 24px; margin-bottom: 20px; font-weight: normal; }
.main-col { width: 700px; display: inline-block; float: left; border-right: 1px solid #ccc; padding: 20px; margin-bottom: 20px; }
.sidebar { width: 239px; padding: 10px; display: inline-block; }
.main-col a { color: #F48A00; }
.main-col h1,
.main-col h2
{ line-height: 1.2em; font-size: 32px; margin-bottom: 10px; font-weight: normal; color: #F48A00; }
.main-col p { line-height: 1.5em; margin-bottom: 20px; }
#footer { border-top: 1px solid #ccc; clear: both; text-align: center; padding: 10px; color: #aaa; }
Template du Bundle - Niveau 2
Nous allons maintenant avancer vers la cration de la prsentation pour le bundle Blog. Crez un chier dans src/Blogger/BlogBundle
/Resources/views/layout.html.twig et ajoutez-y le contenu suivant :
{# src/Blogger/BlogBundle/Resources/views/layout.html.twig #}
{% block sidebar %}
Sidebar content
{% endblock %}
A premire vue, ce template peut sembler un peu simple, mais sa simplicit est sa force. Tout dabord, il tend le template de base
de lapplication que nous avons cr prcdemment. Ensuite, il remplace le bloc de la barre latrale avec un contenu factice. Comme
la barre latrale va tre prsente dans toutes les pages de notre blog, il est logique de raliser la personnalisation ce niveau l.
Vous pourriez demander pourquoi nous ne faisons pas la personnalisation dans le chier de base de lapplication, car il est galement
prsent dans toutes les pages. Cest simple, lapplication ne connait rien propos dun bundle et cele ne devrait jamais tre le cas.
Le bundle devrait contenir toutes ses fonctionnalits et acher la barre latrale fait partie dune de ces fonctionnalites. Ok, dans ce
cas pourquoi ne plaons nous pas la barre latrale dans chacune des pages de template ? Cest nouveau trs simple, car il faudrait
dupliquer la barre latrale chaque fois que nous voudrions ajouter une page. Plus loin ce template du second tage va nous donner
de la exibilit pour ajouter de la personnalisation pour des besoins futurs et tous les templates enfants en hriteront. Par exemple,
nous pourrions vouloir acher le pied de page sur toutes les pages, et ce serait lendroit idal pour faire ceci.
Template de page - Niveau 3
Nous sommes enn prt pour la disposition du contrleur. Ces agencements vont rgulirement tre lis des actions du contrleur,
par exemple laction show va avoir un template show.
Commenons par crer le contrleur pour la page daccueil et son template. Comme cest la premire page que nous allons crer,
nous allons avoir besoin de crer le contrleur. Crez le contrleur dans src/Blogger/BlogBundle/Controller/PageController.php et ajoutez-y le
code suivant:
<?php
// src/Blogger/BlogBundle/Controller/PageController.php
namespace Blogger\BlogBundle\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
class PageController extends Controller
{
public function indexAction()
{
return $this->render('BloggerBlogBundle:Page:index.html.twig');
}
}
Maintenant nous allons crer le template pour cette action. Comme vous pouvez le voir dans ce contrleur Page, nous allons acher le
template index. Crez le template dans src/Blogger/BlogBundle/Resources/views/Page/index.html.twig
{# src/Blogger/BlogBundle/Resources/views/Page/index.html.twig #}
{% extends 'BloggerBlogBundle::layout.html.twig' %}
8 sur 13 28/10/2014 11:12
{% block body %}
Blog homepage
{% endblock %}
Cela prsente le format de template nal que nous pouvons spcier. Dans cet exemple, le template BloggerBlogBundle::layout.html.twig
est tendu l o la partie Controlleur du nom du template est omise. En excluant la partie Controlleur, nous prcisons lutilisation au
niveau du bundle du template cr dans src/Blogger/BlogBundle/Resources/views/layout.html.twig.
Maintenant ajoutons une route pour notre page daccueil. Mettez jour la conguration de routage du bundle situ dans src/Blogger
/BlogBundle/Resources/config/routing.yml.
BloggerBlogBundle_homepage:
pattern: /
defaults: { _controller: BloggerBlogBundle:Page:index }
requirements:
_method: GET
Finalement, nous devons supprimer la route par dfaut pour lcran daccueil de Symfony2. Supprimez la route _welcome en haut du
chier de routage de dev, situ dans le chier app/config/routing_dev.yml.
Nous sommes dsormais prt voir notre template pour le blog. Rendez vous avec votre navigateur ladresse http://symblog.dev
/app_dev.php/.
Vous devriez dsormais voir lagencement de base du blog, avec le contenu principal du blog, et la barre latrale qui rete lec blocs
que nous avons surchargs dans les templates adquats.
La page A propos
Notre dernire mission dans cette partie du tutorial est de crer une page statique pour la page A propos. Cela va montrer comment
crer un lien entre plusieurs pages, et renforcer un peu plus lapproche 3 niveaux que nous avons adopt.
9 sur 13 28/10/2014 11:12
La route
Lors de la cration dune nouvelle page, une des premires tches devrait tre la cration dune route. Ouvrez le chier de route du
BloggerBlogBundle situ dans src/Blogger/BlogBundle/Resources/config/routing.yml et ajoutez la rgle de routage suivante :
BloggerBlogBundle_about:
pattern: /about
defaults: { _controller: BloggerBlogBundle:Page:about }
requirements:
_method: GET
Le contrleur
Ouvrez ensuite le contrleur Page situ dans src/Blogger/BlogBundle/Controller/PageController.php et ajoutez laction pour grer la page A
propos.
// src/Blogger/BlogBundle/Controller/PageController.php
class PageController extends Controller
{
// ..
public function aboutAction()
{
return $this->render('BloggerBlogBundle:Page:about.html.twig');
}
}
La vue
Concernant la vue, crez un nouveau chier situ dans src/Blogger/BlogBundle/Resources/views/Page/about.html.twig et copiez-y le contenu
suivant.
{# src/Blogger/BlogBundle/Resources/views/Page/about.html.twig #}
{% extends 'BloggerBlogBundle::layout.html.twig' %}
{% block title %}About{% endblock%}
{% block body %}
<header>
<h1>About symblog</h1>
</header>
<article>
<p>Donec imperdiet ante sed diam consequat et dictum erat faucibus. Aliquam sit
amet vehicula leo. Morbi urna dui, tempor ac posuere et, rutrum at dui.
Curabitur neque quam, ultricies ut imperdiet id, ornare varius arcu. Ut congue
urna sit amet tellus malesuada nec elementum risus molestie. Donec gravida
tellus sed tortor adipiscing fringilla. Donec nulla mauris, mollis egestas
condimentum laoreet, lacinia vel lorem. Morbi vitae justo sit amet felis
vehicula commodo a placerat lacus. Mauris at est elit, nec vehicula urna. Duis a
lacus nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae.</p>
</article>
{% endblock %}
Cette page A propos ne contient rien de spectaculaire. Son seul rle est dacher un chier de template qui possde un contenu
factice. cela nous amne nanmoins notre prochaine tche.
Lier les pages
Nous avons dsormais la page A propos en tat de fonctionnement: rendez vous ladresse http://symblog.dev/app_dev.php/about pour vous
en assurer. Par contre, il ny a actuellement aucun autre moyen pour un utilisateur de voir la page A propos, que de taper ladresse
complte comme nous venons de le faire. Comme vous pouvez vous en douter, Symfony2 va nous permettre de crer un lien. Il
permet de de faire correspondre des adresses comme nous lavons dj vu, et peut galement gnrer des adresses pour ces routes.
Vous devriez toujours utiliser les fonctions de routage proposes par Symfony2. Ne soyez jamais tent, dans vos application, de faire
la chose suivante :
<a href="/contact">Contact</a>
10 sur 13 28/10/2014 11:12
<?php $this->redirect("/contact"); ?>
Vous vous demandez srement ce qui ne va pas avec cette approche, cest peut-tre la manire que vous avez toujours utilise pour
faire des liens entre les pages. Nanmoins, il y a un certain nombre de problmes avec cette approche :
Cela utilise un lien cod en dur et ignore tout du systme de routage de Symfony2. Si vous vouliez changer ladresse de la page de
contact nimporte quel moment, vous devriez trouver toutes les rfrences au lien en dur et les changer.
1.
Cela ignore le contrleur denvironnement. Les environnements sont quelque chose que nous navons pas vraiment expliqu
jusqu prsent, mais vous vous en tes servis. Le contrleur de faade app_dev.php nous donne accs notre application dans
lenvironnement dev. Si nous devions remplacer app_dev.php par app.php, alors nous ferions tourner lapplication dans lenvironnement
de production. La signication de ces environnements sera explique plus loin dans le tutoriel, mais pour le moment, il est
important de noter que les liens en dur ne maintiennent pas lenvironnement dans lequel nous sommes car le contrleur de faade
nest pas prx dans lURL.
2.
La manire correcte de faire des liens entre les pages est dutiliser les fonctions path et url proposes par Twig. Elles sont toutes les
deux trs proches, sauf que la fonction url renvoit une URL absolue. Mettons jour le template principal de notre application situ
dans app/Resources/views/base.html.twig pour faire le lien entre la page daccueil et la page d propos.
{% block navigation %}
<nav>
<ul class="navigation">
<li><a href="{{ path('BloggerBlogBundle_homepage') }}">Home</a></li>
<li><a href="{{ path('BloggerBlogBundle_about') }}">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
{% endblock %}
Maintenant mettez jour votre navigateur pour voir les liens vers la page daccueil (Home) et vers la page A propos (About)
fonctionner comme attendu. Si vous regardez le code source de ces pages, vous pourrez remarquer que les liens ont t prxs par
/app_dev.php/. Il sagit du contrleur de faade expliqu plus tt, et vous pouvez voir que lutilisation de path maintient sa prsence.
Finalement, mettons jour le lien sur le logo pour vous rediriger vers la page daccueil. Pour cela, mettez jour le template situ
dans app/Resources/views/base.html.twig.
<hgroup>
<h2>{% block blog_title %}<a href="{{ path('BloggerBlogBundle_homepage') }}">symblog</a>{% endblock %}</h2>
<h3>{% block blog_tagline %}<a href="{{ path('BloggerBlogBundle_homepage') }}">creating a blog in Symfony2</a>{% endblock %}</h3>
</hgroup>
Conclusion
Nous avons couvert les domaines de base dune application Symfony2, commencer par la conguration et la mise en place de
lapplication. Nous avons commenc explorer les concepts fondamentaux derrire une application Symfony2, en particulier le
routage et le moteur de template Twig.
Nous verrons par la suite la cration dune page de contact. Cette page est lgrement plus complique que la page A propos car elle
permet aux utilisateurs dintragir avec un formulaire pour envoyer des requtes. Le chapitre suivant va prsenter les concepts de
validateurs et de formulaires.
11 sur 13 28/10/2014 11:12
26 Comments Symblog Tutorial Login
Sort by Best Share
Join the discussion

Reply
diabgate 2 years ago
Merci beaucoup Monsieur moi je suis nouveau dans l'apprentissage de symfony
j'utilise netbeans
Mais quand j'ai fini le niveau 1, 2 et trois j'ai une erreur
Unable to find template "BloggerBlogBundle:Page:index.html.twig".
500 Internal Server Error - InvalidArgumentException
3 linked Exceptions:
Twig_Error_Loader
InvalidArgumentException
InvalidArgumentException
je vous prie de bien vouloir m'aider Merci
3
Reply
bibo 2 years ago > diabgate
salut diadgate ,as-tu trouv une sol pour cette exception ??
Reply
diabgate 2 years ago > bibo
OUI bibo Merci
Reply
ahmed 7 months ago > diabgate
i have the same prob what should i do ! diabgate
Reply
abdelaziz 2 years ago
merci pour ce tuto
j'utilise Wamp / Windows pour moi ladresse ----> http://symblog.dev/app_dev.php/
c'est ------> http://localhost/Symfony/web/app_dev.php/
1
Reply
Patrick 9 months ago
Merci pour la traduction, petite information pour la partie des templates o il est not :
Il n'y a pas d'erreur parce que le fichier est bien trouv par contre je ne sais pas pourquoi il n'inclut pas le contenu du fichier
base.html.twig.
Du coup, le seul affichage que j'avais tait "Blog homepage"
Corrig en mettant la place {% extends 'BloggerBlogBundle::base.html.twig' %} qui est la notation complte du chemin.
Alenore 19 days ago > Patrick
Un peu tard, mais bon... Ca pourrait servir une ventuelle personne qui viendrait ici.
Le base.html.twig ne doit pas tre enregistr dans src/Blogger/BlogBundle/Resources/views, mais dans app/Resources
/views.
Ce fichier est grosso modo le fichier de base du site, le squelette qui serait utilis par tout (ou presque) les bundles qui
Share
Share
Share
Favorite
Share
Share
Share
12 sur 13 28/10/2014 11:12
13 sur 13 28/10/2014 11:12

Symphoni PDF

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

Symphoni PDF

Transféré par

Droits d'auteur :

Formats disponibles

Home Demo Source EN ES

Sort by Best Share

Join the discussion

Vous aimerez peut-être aussi