2.1 - Création du Bundle Blog
Nous allons créer notre bundle via la ligne de commande :
cd /var/www/symblog/ php app/console generate:bundle --namespace=Blogger/BlogBundle --format=yml Choisir les propositions par défaut.
La structure d'un bundle se résume de la façon suivante :
- - Le routage du bundle se trouve dans /var/www/symblog/app/config/routing.yml.
- - Les routes du bundle se trouvent dans /var/www/symblog/src/Blogger/BlogBundle/Resources/config/routing.yml. (attention le yaml est sensible à l'indentation)
- - Le controller "Defaut" se trouve dans /var/www/symblog/src/Blogger/BlogBundle/Controller/DefaultController.php
- - La vue twig associée au controller "Defaut" se trouve dans /var/www/symblog/src/Blogger/BlogBundle/Resources/views/Default/index.html.twig.
Suppression des fichier non-utilisés :
sudo rm /var/www/symblog/src/Blogger/BlogBundle/Resources/config/routing.yml
sudo rm /var/www/symblog/src/Blogger/BlogBundle/Controller/DefaultController.php
sudo rm -rf /var/www/symblog/src/Blogger/BlogBundle/Resources/views/Default/
sudo rm /var/www/symblog/app/Resources/views/base.html.twig
sudo rm -rf /var/www/symblog/src/Acme
Retirer le bundle Acme (demo) du kernel :
sudo nano /var/www/symblog/app/AppKernel.php Retirer la ligne suivante :
$bundles[] = new Acme\DemoBundle\AcmeDemoBundle(); Retirer les route du bundle acme dans /var/www/symblog/app/config/routing.dev :
# AcmeDemoBundle routes (to be removed)
_acme_demo:
resource: "@AcmeDemoBundle/Resources/config/routing.yml"
2.2 - Création d'un template Twigg
Nous allons créer un template à trois niveaux.
Pour cela nous allons commencer par le template de base en créeant les fichiers suivants :
- Le template de base :
sudo nano /var/www/symblog/app/Resources/views/base.html.twig Ajouter le code html suivant :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset=utf-8" />
<title>{% block title %}symblog{% endblock %} - symblog</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
{% 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="<h2> asset('css/screen.css') </h2>" type="text/css" rel="stylesheet" />
{% endblock %}
<link rel="shortcut icon" href="<h2> asset('favicon.ico') </h2>" />
</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>
- Le fichier de styles associé :
sudo mkdir /var/www/symblog/web/css sudo nano /var/www/symblog/web/css/screen.css Ajouter les styles suivants dans le fichier screen.css :
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,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
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; }
#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; }
- Le template du bundle :
sudo nano /var/www/symblog/src/Blogger/BlogBundle/Resources/views/layout.html.twig Ajouter le code html suivant :
{# src/Blogger/BlogBundle/Resources/views/layout.html.twig #} {% extends '::base.html.twig' %} {% block sidebar %} Sidebar content {% endblock %} 2.3 - Création du controller Page
Nous allons créer Le controller Page :
sudo nano /var/www/symblog/src/Blogger/BlogBundle/Controller/PageController.php Ajouter le code suivant :
{# src/Blogger/BlogBundle/Resources/views/layout.html.twig #}
{% extends '::base.html.twig' %}
{% block sidebar %}
Sidebar content
{% endblock %}
- La vue pour l'action "indexAction()" :
sudo mkdir /var/www/symblog/src/Blogger/BlogBundle/Resources/views/Page sudo nano /var/www/symblog/src/Blogger/BlogBundle/Resources/views/Page/index.html.twig Ajouter le code suivant :
{# src/Blogger/BlogBundle/Resources/views/Page/index.html.twig #}
{% extends 'BloggerBlogBundle::layout.html.twig' %}
{% block body %}
Blog homepage
{% endblock %}
2.4 - Création d'un route pour la home
Ajout d'un route :
sudo nano /var/www/symblog/src/Blogger/BlogBundle/Resources/config/routing.yml Ajouter le code suivant :
# src/Blogger/BlogBundle/Resources/config/routing.yml
BloggerBlogBundle_homepage:
pattern: /
defaults: { _controller: BloggerBlogBundle:Page:index }
requirements:
_method: GET