Symfony2 - Jobeet - Jour 04 - Le Contrôleur et la Vue

1 1 1 1 1 1 1 1 1 1 Rating 0.00 (0 Votes)
Submit to DeliciousSubmit to DiggSubmit to FacebookSubmit to Google PlusSubmit to StumbleuponSubmit to TechnoratiSubmit to TwitterSubmit to LinkedIn

Aujourd'hui, nous allons personnaliser le contrôleur Job que nous avons créé. Il possède déjà la plupart du code nous avons besoin pour Jobeet :

  • Une page pour lister toutes les offres
  • Une page pour créer une nouvelle offre
  • Une page pour mettre à jour une offre existante
  • Une page pour supprimer une offre

Bien que le code soit prêt à être utilisé tel quel, nous devons modifier les modèles pour correspondre à notre maquette Jobeet.

L'architecture MVC

Pour le développement web, la solution la plus courante pour organiser votre code est aujourd'hui le modèle de conception MVC. En bref, le modèle de conception MVC définit un moyen d'organiser votre code en fonction de sa nature. Ce modèle sépare le code en trois couches :

  • La couche du modèle (Model) définit la logique métier (la base de données appartient à cette couche). Vous savez déjà que symfony stocke toutes les classes et les fichiers liés au modèle dans les répertoire Entity/.
  • La Vue (View) est ce avec quoi l'utilisateur interagit (un moteur de template fait partie de cette couche). Dans Symfony2, la couche Vue est principalement faite de templates Twig. Ils sont stockés dans plusieurs répertoires Resources/views/ comme nous le verrons plus loin.
  • Le Contrôleur (Controller) est un morceau de code qui appelle le modèle pour obtenir certaines données qu'il passe à la Vue pour le rendre au Client. Lorsque nous avons installé Symfony au début de ce tutoriel, nous avons vu que toutes les demandes sont gérées par des contrôleurs frontaux (app.php et app_dev.php). Ces contrôleurs frontaux délèguent le réel travail à des actions.

La mise en page

Si vous regardez de plus près la maquette, vous remarquerez que beaucoup de pages se ressemblent. Vous savez déjà que la duplication de code est mauvais, si nous parlons de code HTML ou PHP, nous avons donc besoin de trouver un moyen d'empêcher ces éléments communs de se dupliquer.

Une façon de résoudre le problème est de définir une en-tête et un pied de page et de les inclure dans chaque modèle. Une meilleure solution est d'utiliser un autre modèle pour résoudre ce problème : le modèle décorateur. Le modèle décorateur résout le problème dans l'autre sens : le template est décoré après que le contenu soit rendu par un template global, appelé layout.

Contrairement à Symfony 1.x, Symfony2 n'a pas de layout par défaut, mais nous allons en créer un et l'utiliser pour décorer nos pages d'application.

Créez un nouveau fichier layout.html.twig dans le répertoire src/Erlem/JobeetBundle/Resources/views/ et ajoutez le code suivant :

Blocs Twig

Avec Twig, le moteur de template par défaut de Symfony2, vous pouvez définir des blocs comme nous l'avons fait ci-dessus. Un bloc Twig peut avoir un contenu par défaut (voir le bloc de titre par exemple) qui peut être remplacé ou étendu dans le template enfant comme vous le verrez dans un instant.

Maintenant, pour faire usage du nouveau layout que nous avons créé, nous avons besoin de modifier tous les modèles d'offres (edit, index, new et show à partir de src/Erlem/JobeetBundle/Resources/views/job/) afin d'étendre le template parent (layout) et pour remplacer le bloc de contenu, nous avons défini :

  •  src/Erlem/JobeetBundle/Resources/views/job/edit.html.twig
  • src/Erlem/JobeetBundle/Resources/views/job/index.html.twig
  • src/Erlem/JobeetBundle/Resources/views/job/new.html.twig
  • src/Erlem/JobeetBundle/Resources/views/job/show.html.twig
{% extends 'ErlemJobeetBundle::layout.html.twig' %}
 
{% block content %}
    <!-- original body block code goes here -->
{% endblock %}

Les feuilles de style, images, et javascripts

Comme ce tutoriel n'est pas sur le webdesign, nous avons déjà préparé toutes les ressources que nous utiliserons pour Jobeet : téléchargez l'archive des images et mettez-les dans le répertoire src/Erlem/JobeetBundle/Resources/public/images/ ; téléchargez l'archive des feuilles de style et mettez-les dans le répertoire src/Erlem/JobeetBundle/Resources/public/css/.

Maintenant, exécutez la commande 

php app/console assets:install web

pour dire à Symfony de les rendre accessibles au public.

Si vous regardez dans le dossier css, vous remarquerez que nous avons 4 fichiers css : admin.css, job.css, jobs.css et main.css. Le main.css est nécessaire dans toutes les pages Jobeet que nous avons inclus dans le layout, dans le bloc Twig des feuilles de style. Les autres fichiers css sont plus spécifiques et nous n'en n'avons besoin que dans certaines pages.

Pour ajouter un nouveau fichier CSS dans un template nous allons remplacer le bloc de feuilles de style, mais appeler le parent avant d'ajouter le nouveau fichier CSS (afin que nous ayons le fichier main.css et les fichiers CSS supplémentaires dont nous avons besoin).

  • src/Erlem/JobeetBundle/Resources/views/Job/index.html.twig
{% extends 'ErlemJobeetBundle::layout.html.twig' %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href={{ asset('bundles/erlemjobeet/css/jobs.css') }} type="text/css" media="all" />
{% endblock %}
  •  src/Erlem/JobeetBundle/Resources/views/Job/show.html.twig
{% extends 'ErlemJobeetBundle::layout.html.twig' %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href={{ asset('bundles/erlemjobeet/css/job.css') }} type="text/css" media="all" />
{% endblock %}

L'action de la page d'accueil des offres

Chaque action est représentée par une méthode d'une classe. Pour la page d'accueil des offres, la classe est JobController et la méthode est indexAction(). Elle récupère toutes les offres d'emploi de la BDD :

    public function indexAction()
    {
        $em = $this->getDoctrine()->getManager();

        $entities = $em->getRepository('ErlemJobeetBundle:Job')->findAll();

        return $this->render('ErlemJobeetBundle:Job:index.html.twig', array(
            'entities' => $entities,
        ));
    }

Nous allons examiner de plus près le code: la méthode indexAction() obtient l'objet de gestion de l'entité Doctrine, qui est responsable de la gestion du processus de la persistance et de la recherche des objets vers et à partir de la BDD, et puis le dépôt, qui permettra de créer une requête pour récupérer toutes les offres. Elle renvoie un Doctrine ArrayCollection d'objets Job qui sont passés au template (la Vue).

Le template de la page d'accueil des offres

Le template index.html.twig génère un tableau HTML pour toutes les offres. Nous allons nettoyer tout ça un peu pour n'afficher qu'un sous-ensemble des colonnes disponibles.

Voir la page http://jobeet.local/app_dev.php/job/

04-index

Le template d'une offre

Maintenant, nous allons personnaliser le template de la page d'offre.

Voir la page : http://jobeet.local/app_dev.php/job/1/show

04-show

L'action de la page des offres

La page des offres est générée par l'action show, définie dans showAction() de JobController :

    public function showAction($id)
    {
        $em = $this->getDoctrine()->getManager();

        $entity = $em->getRepository('ErlemJobeetBundle:Job')->find($id);

        if (!$entity) {
            throw $this->createNotFoundException('Unable to find Job entity.');
        }

        $deleteForm = $this->createDeleteForm($id);

        return $this->render('ErlemJobeetBundle:Job:show.html.twig', array(
            'entity'      => $entity,
            'delete_form' => $deleteForm->createView(),
        ));
    }

Comme dans l'action index, le dépôt ErlemJobeetBundle:job est utilisée pour récupérer une offre, cette fois en utilisant la méthode find(). Le paramètre de cette méthode est l'identifiant unique d'une offre, sa clé primaire. La section suivante explique pourquoi le paramètre $id de la fonction actionShow() contient la clé primaire de l'offre.

Si l'offre n'existe pas dans la BDD, nous voudrons renvoyer l'utilisateur vers une page d'erreur 404, ce que fait exactement throw $this->createNotFoundException().

En ce qui concerne les exceptions, la page affichée à l'utilisateur est différente dans l'environnement prod et dans l'environnement dev (http://jobeet.local/app_dev.php/job/120/show) :

04-no-find

Code source

Le code source est sur GitHub. Vous pouvez le télécharger en exécutant les commandes ci-dessous (prérequis Symfony2 - Jobeet - Jour 01 - Démarrage du projet) :

su
cd /var/www/
git clone https://github.com/erlem/jobeet.git
cd jobeet/
git checkout tags/v0.4.0
 
composer update
 
php app/console doctrine:database:create
php app/console doctrine:schema:update --force
php app/console doctrine:fixtures:load
 
php app/console assets:install web

chmod 777 -R app/cache/
chmod 777 -R app/logs/

Vous pouvez maintenant tester le contrôleur Job dans un navigateur: http://jobeet.local/job/ ou dans l'environnement de développement, http://jobeet.local/app_dev.php/job/.


Symfony2 - Jour 03 - Le Modèle de Données
[Sommaire] Symfony2 - Jour 05 - Le Routage >

Pour ce tutoriel, je me suis inspiré du tutoriel Symfony2 Jobeet du site IntelligentBee

Submit to DeliciousSubmit to DiggSubmit to FacebookSubmit to Google PlusSubmit to StumbleuponSubmit to TechnoratiSubmit to TwitterSubmit to LinkedIn