Créer une application avec Symfony2 et Doctrine2 (étape 2)

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

Nous avons vu dans la première partie comment créer notre bundle et comment configurer notre application, nous allons commencé cette nouvelle partie du tutoriel en se penchant sur la partie controller et sur le routing.

Ce qui va nous amener à nous tourner vers la gestion du templating sur twig, c’est à dire la partie « vue ».

Allons, Vamos ! nous avons du travail sur la planche… ;-)

Introduction

Lorsque nous avons créé notre bundle, une structure a été générée avec un controller d’action par défaut : src/Application/BlogBundle/Controller/DefaultController.php Vous pouvez l’ouvrir et voir comment il est constitué mais pour notre projet on en aura pas besoin.

Nous avons besoin de créer notre propre controller d’action pour notre projet, c’est ce que nous allons faire dans le répertoire Controller.

Création du Controller d’action

On veut que notre page d’accueil qui sera géré par une méthode indexAction() nous affiche la liste de tous les articles.

On va y aller doucement, n’ayant pas encore vu la partie « Model », on va pour le moment créer un controller d’action basique générant une vue au travers de twig.

// Application\BlogBundle\Controller\BlogController.php
namespace Application\BlogBundle\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\Controller;

class BlogController extends Controller
{
    public function indexAction()
    {
        return $this->render('ApplicationBlogBundle:Blog:index.html.twig');
    }
}

Nous allons donc demandé à notre controller d’action de générer une vue au travers de notre bundle ApplicationBlogBundle qui pointera sur le répertoire de la partie vue views/Blog et appellera le fichier index.html.twig.

Vous avez donc compris qu’il nous faut créer ce fichier de notre partie « vue ».

Création de la vue

On va commencer par créer un nouveau répertoire Blog dans le répertoire views et à l’intérieur de ce nouveau répertoire, on va créer le fichier index.html.twig et pour le moment on va juste y écrire ces quelques lignes :

// Application\BlogBundle\Resources\views\Blog\index.html.twig
{% extends "::base.html.twig" %}
    {% block title %}Accueil{% endblock %}

    {% block body %}
        

Liste des articles

{% endblock %}

Twig supporte l’héritage multiple, pour le moment nous allons étendre en partant du fichier de base : app\Resources\views\base.html.twig.

Alors, pour faire fonctionner tout cela il nous manque la route pointant vers notre controller d’action.

Le routing

Ce qu’il faut bien comprendre c’est que notre fichier principal de routage se situe dans app\config\routing.yml, c’est à dire à l’extérieur de notre bundle.

C’est dans ce fichier que nous allons importer les routes de notre bundle, mais il y a plusieurs façons de traiter les routes.

Nous pouvons faire pointer vers le fichier de routing de notre bundle src\Application\BlogBundle\Resources\config\routing.yml.

Mais il existe une autre approche du routing, assez intéressante, c’est de définir les routes à l’intérieur de notre controller d’action grâce au bundle SensioFrameworkExtraBundle, il suffit alors d’utiliser les annotations devant nos méthodes de notre controller d’action, c’est de cette façon que fonctionne la partie demo, pour plus d’infos cliquez ici (sachez néanmoins que cela reste, pour l’heure, à titre expérimental).

En ce qui nous concerne on va utiliser, dans ce tutoriel, la façon traditionnelle. Effectuons la liaison entre nos fichiers routing.yml dans un premier temps.

// app\config\routing.yml
Blog:
    resource: "@ApplicationBlogBundle/Resources/config/routing.yml"
// ...

Attention ! N’oubliez pas que le système de routage va s’arrêter à la première route trouvée correspondant au pattern désiré, comme nous avons déjà les routes de la demo, veillez à placer l’import DEVANT les autres routes. On n’oublie pas non plus, de ne jamais utiliser de tabulation dans un fichier yml, toujours des espaces !

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

Voilà, nous pouvons désormais définir notre route principale dans notre bundle, il sera bien pris en compte :

// src\Application\BlogBundle\Resources\config\routing.yml
homepage:
    pattern:  /
    defaults: { _controller: ApplicationBlogBundle:Blog:index }

Bon voila, nous pouvons désormais testé si notre route, notre controller ainsi que notre vue fonctionnent correctement en tapant sur notre navigateur :


http://localhost/symfony2blog/web/app_dev.php/

Vous devriez alors voir apparaître le texte « Liste des articles » et en titre du navigateur « Accueil ».

Template & resources web

Bon rien de bien palpitant pour le moment, on va enjoliver tout cela en ajoutant des feuilles de styles mais également un layout qui sera la base commune de toutes nos vues générées dans nos actions. Je vous ai préparé tout cela en réadaptant un thème pour ce tutoriel, à télécharger ici.

On va maintenant mettre à disposition de notre application les ressources téléchargées.

Pour commencer le fichier layout.html.twig qu’on va copier dans : src\Application\BlogBundle\Resources\views\. Ce layout pourrait étendre le fichier de base de twig, donc un héritage sur 3 niveaux, mais ce ne sera pas le cas, quoiqu’il en soit toutes nos vues devront étendre ce layout désormais.

le répertoire public quant à lui contient nos CSS et nos images, on va va placer le répertoire entier dans le répertoire « resources » src\Application\BlogBundle\Resources\.

Comme on le sait déjà ces ressources (CSS et images) devront se trouver dans le répertoire « web » de notre application pour être disponibles, pour cela nous allons taper cette ligne de commande :

> php app/console assets:install web

Je vous invite à regarder la nouvelle structure créée dans votre répertoire « web ».

Bon voila, il nous reste plus qu’à refactoriser notre vue index.html.twig.

// src\Application\BlogBundle\Resources\views\Blog\index.html.twig
{% extends "ApplicationBlogBundle::layout.html.twig" %}

    {% block title %}Accueil{% endblock %}

    {% block content %}
               

Liste des articles

{% endblock %}

Comme vous pouvez le constater, cette fois-ci, on va étendre le layout fourni dans ce tutoriel et je vous invite à l’analyser de plus près car il est riche en enseignement sur certaines fonctionnalités du moteur de template twig, je n’ai pas trop le temps de m’étaler sur le sujet dans ce tutoriel.

Quant au contenu de nos vues, il sera inséré dans le block content contenu lui-même à l’intérieur de la balise body, vous devriez, désormais, obtenir ceci :

Évidemment, vous pouvez remanier ce template comme bon vous semble, par contre faîtes attention, afin que les modifications soient bien prises en compte, il vous faudra ne pas oublier d’effectuer ces deux opérations en ligne de commande :

Mettre les ressources à jour CSS, JS, images en tapant :

> php app/console assets:install web

Et bien sûr vider le cache :

> php app/console cache:clear



Conclusion

C’est la fin de la deuxième partie, on a pu mettre en place notre controller d’action, notre route et notre vue, lors de la prochaine partie (dédiée à la partie « Model ») on va attaquer les choses vraiment sérieuses en abordant les principes de Doctrine2, on va également voir comment générer des données grâce aux fixtures et refactoriser certaines parties de code pour prendre en compte ces nouvelles données…

En attendant, testez et assimilez ces quelques notions abordées et reposez bien votre cerveau en attendant la partie 3. ;-)


Créer une application avec symfony2 et doctrine2 (étape 1)

Créer une application avec symfony2 et doctrine2 (étape 3)

Tags: , , , ,


22 553 commentaires pour le sujet “Créer une application avec Symfony2 et Doctrine2 (étape 2)”

  1. Joachim :

    Merci pour cette article :)

    Vite la suite avec du lourd comme doctrine qui a pas mal changer apparemment!

    PS: J’ai eu une petite difficulté avec le fait d’utiliser Application à la place de Acme, j’avais remplacé « new Acme\DemoBundle\AcmeDemoBundle() » par « new Application\BlogBundle\ApplicationBlogBundle » mais des routes n’existait plus alors j’avais une page blanche, utiliser app_dev.php pour voir l’erreur!

    Miciiiii

  2. Emmanuel PEREIRA :

    oui effectivement écraser AcmeDemoBundle() n’est pas recommandé pour ce tutoriel.

    Si vous souhaitez supprimer ce bundle vous avez la démarche à effectuer dans le fichier readme :
    * Supprimer les routes dans `app/config/routing.yml`
    * Supprimer toutes les références au bundle dans `app/config/config.yml`
    * Supprimer AcmeBundle dans app/Appkernel.php
    * Supprimer son namespace dans ‘app/autoload.php’
    * (option) supprimer le répertoire Acme.

    Sans cela ou en ne faisant pas toutes les étapes vous aurez des messages d’erreur.

  3. Val :

    Très bon article, on attend la suite avec impatience !

    Mais j’ai une question, j’ai créé une autre page (nouveau controller, nouvelle vue) mais impossible d’y accéder !
    Voila ce que j’ai mis dans mon Routing.yml :
    _user:
    resource: « @ApplicationBlogBundle/Controller/UserController.php »
    type: annotation
    prefix: /user

    Mais quand je tape l’adresse de mon site « /user » j’obtiens alors l’erreur suivante : No route found for « GET /user »

    Sauriez vous d’où cela vient et comment résoudre ce problème ?
    Merci d’avance

  4. Val :

    Désolé, j’ai trouvé la solution tout seul,
    en fait je copié ce que je voyais dans les différents exemple sur symfony mais ce qui a fonctionné pour moi c’est :

    user:
    resource : « @ApplicationBlogBundle/Controller/UserController.php »
    type: annotation
    prefix: /user

    il ne s’agissait que du « _ » qui géné avant « user » !

    Sinon j’ai du mal à saisir les formulaires, j’ai donc hâte que tu continues ton tuto, qui au passage est vraiment plus clair que les autres !! :)

Laissez un commentaire :

*


created By ooyes.net