Registrazione del bundle ¶

Il tuo bundle BloggerBlogBundle è stato registrato nella kernel localizzata int app/AppKernel.php. Sy2 ci richiede di registrare tutti i bundle di cui abbiamo bisogno per far funzionare l'applicazione.Tu noterai che alcuni bundle sono registrati solo negli ambienti dev o test caricare questi nell'ambiente prod (production) porterebbe solo ad un sovraccarico per funzionalità non usate Il frammento di codice seguente mostra come il bundle BloggerBlogBundle è stato registrato.

// app/AppKernel.php
class AppKernel extends Kernel
{
    public function registerBundles()
    {
        $bundles = array(
        // ..
            new Blogger\BlogBundle\BloggerBlogBundle(),
        );
        // ..

        return $bundles;
    }

    // ..
}

Routing ¶

Con il comando precedente è stata creata anche la rotta principale dell'applicazione app/config/routing.yml. .

# app/config/routing.yml
BloggerBlogBundle:
    resource: "@BloggerBlogBundle/Resources/config/routing.yml"
    prefix:   /

L'opzione prefix ci permette di montare l'intero BloggerBlogBundle con un prefisso. Nel nostro caso abbiamo otato per montare il valore predefinito che è/. Se per esempio volete che tutti i percorsi siano preceduti da /blogger cambiate in prefix: /blogger. .

Struttura di default¶

Sotto la cartella SRC è stato creato un pacchetto predefinito.Questo inizia con il livello superiore alla cartella Blogger che mappa direttamente allo spazio dei nomi Blogger,sotto questo abbiamo BlogBundle che contiene il pacchetto vero e proprio .Il contenuto di questa cartella verra esaminato più avanti seguendo il tutorial.Se avete familiarità con MVC alcune cartelle saranno autoesplicative.

Routed ¶

BloggerBlogBundle file di rotta che si trova in src / Blogger / BlogBundle / Resources / config / routing.yml contiene la seguente regola di routing.

# src/Blogger/BlogBundle/Resources/config/routing.yml
BloggerBlogBundle_homepage:
    pattern:  /hello/{name}
    defaults: { _controller: BloggerBlogBundle:Default:index }#

      
        

Le rotte sono composte di un percorso e da alcune opzioni di default.Il percorso viene confrontato con l'URL e le opzioni di default se tutto coincide da il via all'eseguzione del controllore.Nel percorso ciao {nome} il valore nome corrisponderà come segnaposto in quanto non specificato .

Il controller ¶

Il controllore in questo esempio è molto semplice. La classe DefaultController estende la classel controller che fornisce alcuni metodi utili come il render metodo utilizzato qui di seguito. Nella rotta abbiamo definito un segnaposto questo viene passato all' azione come argomento $name . L'azione non fa altro che chiamare il render specificando il metodo index.html.twig nel modulo BloggerBlogBundle. Il formato del nome del modello è bundle: controller: template . Nel nostro esempio, questo è BloggerBlogBundle: Default: index.html.twig che corrisponde alla index.html.twig modello, nel predefinito cartella vista del BloggerBlogBundle , o fisicamente al file src / Blogger / BlogBundle / Resources / views / default / index.html.twig . Diverse varianti del formato modello può essere usato per rendere i modelli in diverse posizioni all'interno dell'applicazione e dei suoi bundle. Vedremo più avanti in questo capitolo.

Ora possiamo passare la variabile $name all'opzione array

<?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));
    }
}

Il templating (The View) ¶

Come potete vedere il templating è molto semplice. Viene stampato Ciao seguito dal nome argomento passato dal controllore.

{# Src / Blogger / BlogBundle / Resources / views / default / index.html.twig #}
Hello {{ name }}!

Template principale - Livello 1 ¶

Iniziamo creando il nostro template (blocco di base)per symblog. Abbiamo bisogno di 2 file qui, il template.html e il CSS. Symfony2 supporta HTML5 quindi andremo ad utilizzarlo.

<!-- app/Resources/views/base.html.twig -->
<!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="{{ 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>

Questo template rappresenta la struttura principale del nostro sito blogging. La maggior parte del template è costituito da HTML, con la strana Twig direttiva. Twig direttiva che esamineremo ora.

Inizieremo, concentrandosi sulla HEAD del documento. Vediamo il titolo:

<title>{% block title %}symblog{% endblock %} - symblog</title>

La prima cosa che noterete è l'alieno {% tag. Che non è HTML, e non è assolutamente PHP. Questo è uno dei 3 Twig tag. Questo tag è il Twig fare qualcosa di. Viene utilizzato per eseguire le istruzioni come le istruzioni di controllo e per la definizione di elementi di blocco. Un elenco completo delle strutture di controllo possono essere trovati nella documentazione Twig. Il Twig blocco che abbiamo definito nel titolo fa 2 cose, una imposta l'identificatore di blocco al titolo, due fornisce un output di default tra il blocco e la direttiva fineblocco . Con la definizione di un blocco si può usufruire di Twig come template peri l'ereditarietà. Per esempio, in una pagina per visualizzare un post vorremmo il titolo della pagina in modo da riflettere il titolo del blog. Siamo in grado di raggiungere questo obiettivo estendendo il modello e l'override del blocco del titolo.

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

{% block title %}The blog title goes here{% endblock %}

Nell'esempio precedente abbiamo ampliato la base delle applicazioni del template che prima avevamo definito per il blocco del titolo. Avrai notato che nella chiamata del template extends sono scomparse le parti bundle e controller.Per eliminarle abbiamo specificato l'uso del livello template in app / resources / views / .

Dopo abbiamo definito un altro title block e impostato alcuni contenuti ,in questo caso il titolo del blog.Cosi il parent template è pronto per contenere un block title che viene poi sovrascritto da quello figlio.Il titolo ora sarà "the blog title goes have symblog".Questa funzionalità di twig può essere usata per estenderla ad altri template

Nel blocco cssviene introdotto l'altro tag di twig .Il tag {{ è il tag "dici qualcosa"

<link href="{{ asset('css/screen.css') }}" type="text/css" rel="stylesheet" />

Questo tag viene utilizzato per stampare il valore della variabile o espressione. Nell'esempio di sopra di essa stampa il valore di ritorno della funzione asset .Che ci fornisce un modo portabile per collegare le attività dell' applicazione come css,javascrit,immagini

Il {{ tag possono anche essere combinati con dei filtri per manipolare l'output prima della stampa.

{{ blog.created|date("d-m-Y") }}

Per un elenco completo di filtri controllare la documentazione Twig .

L'ultimo tag twig, che non abbiamo visto nei template è il tag di commento {# . Il suo utilizzo è il seguente:

{# The quick brown fox jumps over the lazy dog #}

Non ci sono altri concetti introdotti in questo template. Esso fornisce il layout principale pronto per personalizzarlo dopo come abbiamo

Ora andiamo ad aggiungere alcuni stili. Creare un foglio di stile a web / css / screen.css e aggiungere il seguente contenuto. Questo aggiungerà stili per il template principale.

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; }

Template Bundle - Livello 2 ¶

Ora andiamo a creare un layout per il bundle Blog. Creare un file in src / Blogger / BlogBundle / resources / views / layout.html.twig e aggiungere il seguente contenuto.

{# src/Blogger/BlogBundle/Resources/views/layout.html.twig #}
{% extends ':: base.html.twig'%}

{% Block% sidebar}
    Sidebar contenuti
{% endblock %}

A prima vista questo modello può sembrare un po 'semplice, ma la sua semplicità è la chiave. In primo luogo si estende il base template che abbiamo creato in precedenza. In secondo luogo si sostituisce il blocco sidebar genitore con qualche contenuto fittizio. Come la barra laterale che sarà presente su tutte le pagine del nostro blog ha senso effettuare la personalizzazione a questo livello cI si può chiedere perché non mettere la personalizzazione del modello nell' applicazione in quanto sarà presente su tutte le pagine. Questo è semplice, l'applicazione non sa nulla della Bundle e non deve. Il bundle deve contenere tutte le sue funzionalità e rendere la barra laterale è parte di questa funzionalità. OK, allora perché non ci basta posizionare la barra laterale in ognuno dei modelli di pagina? Anche in questo caso è semplice, avremmo dovuto duplicare il sidebar ogni volta che andiamo ad aggiungere una nuova pagina. Inoltre questo template di livello 2 ci dà la flessibilità in futuro di aggiungere altre personalizzazioni che tutti i template i figli erediteranno. Per esempio, potremmo voler modificare la copia piè di pagina su tutte le pagine, questo sarebbe un ottimo posto per fare questo.

Modello di pagina - Livello 3 ¶

Finalmente siamo pronti per il layout controller. Questi layout sarà normalmente legato a una azione di controllo, vale a dire, l'azione show blog avrà un template blog show.

Iniziamo creando il controller per la homepage e il relativo template. Poiché questa è la prima pagina che stiamo creando è necessario per creare il controller. Creare il controller in src / Blogger / BlogBundle / Controller / PageController.php e aggiungere quanto segue:

<?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');      
} 
}

Ora creiamo il template per questa azione. Come si può vedere nella azione del controllore stiamo per rendere il template della homepage. Creiamo il template in src / Blogger / BlogBundle / Resources / views / Page / index.html.twig

{# Src / Blogger / BlogBundle / Resources / views / Page / index.html.twig #}
{% extends 'BloggerBlogBundle :: layout.html.twig'%}

{% Block% body}
    Blog homepage
{% endblock %}

Questo introduce il formato finale del template che possiamo specificare.

Ora andiamo ad aggiungere una route per la nostra homepage. Aggiornare il Bundle la configurazione di routing trova in src / Blogger / BlogBundle / Resources / config / routing.yml .

# src/Blogger/BlogBundle/Resources/config/routing.yml
BloggerBlogBundle_homepage:
    pattern:  /
    defaults: { _controller: BloggerBlogBundle:Page:index }
    requirements:
        _method:  GET

      
        
    
          

Infine abbiamo bisogno di rimuovere il percorso predefinito per la schermata di benvenuto Symfony2. Rimuovere ilpercorso _welcome nella parte superiore del dev file di routing che si trova in app / config / routing_dev.yml .

Siamo ora pronti per vedere il nostro template di blogger. Puntate il vostro browser per http://symblog.dev/app_dev.php/ .

Si dovrebbe vedere il layout di base del blog, con il contenuto principale e sidebar che riflette come abbiamo impostato i blocchi dei template.