Kaherecode

Créer un blog avec Symfony4 - Partie 2

Mamadou Aliou Diallo
@alioukahere 19 avr. 2019
0

Bienvenue dans la deuxième partie de cette série sur Symfony, dans la première partie, nous avons créer le projet et défini nos routes. Dans cette partie, nous allons définir les différentes vues pour chacune des routes que nous avons créées dans la partie précédente. Commençons donc tout de suite.

Le moteur de template Twig

Symfony utilise un moteur de template qui s'appelle Twig. L'intérêt d'utiliser un moteur de template c'est d'abord la clarté du code, on écrira pas du code PHP dans du HTML, mais aussi la rapidité de Twig, tous les templates sont compilés en PHP et mise en cache, seulement quand vous changez le code d'un template, Twig le recompile et le met encore en cache, ce qui est très pratique en production.

Pour utiliser Twig, il faut retenir ces trois syntaxes

En Symfony 4, les templates se trouvent dans le dossier templates qui se trouvent à la racine. Les fichiers Twig ont une extension .twig

Si vous ouvrez le dossier templates, vous verrez un dossier blog et un fichier base.html.twig. A l'intérieur du dossier blog se trouve un fichier index.html.twig, si vous vous rappelez bien, ce fichier et le dossier blog ont été généré lorsque nous avons créer le contrôleur BlogController. Pour le moment, on laisse tomber le fichier base.html.twig.

Ouvrez donc le fichier index.html.twig qui se trouve dans templates/blog, nous allons remplacer son contenu par ce qui suit:

<h1>Page d'accueil depuis une vue Twig</h1>

Nous avons notre vue, il faut maintenant faire le lien avec le contrôleur pour lui dire de retourner cette page à chaque fois l'utilisateur visite la page d'accueil de notre site.

Pour rappel, voici notre fichier BlogController.php:

<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;

class BlogController extends AbstractController
{
    public function index()
    {
        return new Response('<h1>Page d\'accueil</h1>');
    }

    public function add()
    {
        return new Response('<h1>Ajouter un article</h1>');
    }

    public function show($url)
    {
        return new Response('<h1>Lire l\'article ' .$url. '</h1>');
    }

    public function edit($id)
    {
        return new Response('<h1>Modifier l\'article ' .$id. '</h1>');
    }

    public function remove($id)
    {
        return new Response('<h1>Supprimer l\'article ' .$id. '</h1>');
    }
}

Nos contrôleurs retournent tous un objet Response, on va donc modifier cela en commençant par le contrôleur index qui retourne la page d'accueil, nous l'avons déjà créer une vue, nous allons donc l'utiliser (je vais juste écrire la méthode index, le reste du code ne change pas).

<?php

//...

class BlogController extends AbstractController {
    public function index()
    {
        return $this->render('blog/index.html.twig');
    }

    //...
}

Quand on actualise la page d'accueil de notre site, nous devons maintenant avoir ceci

La page d'accueil rendu avec Twig

Nous avons notre page qui s'affiche normal.

Ce que nous allons faire maintenant c'est de créer les autres vues de notre site. Je vais créer la vue pour l'affichage d'un article et je vous laisse gérer le reste, à savoir l'ajout et l'édition d'un article.

Première des choses à faire, créer le contrôleur. Mais nous avons déjà notre contrôleur et c'est la méthode show() dans src/Controller/BlogController.php, ce que nous allons donc faire c'est de dire à notre contrôleur de retourner une vue (une page, un fichier) twig en lieu et place de l'objet Response que nous avons actuellement. Notre méthode va donc ressembler à ça

<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;

class BlogController extends AbstractController
{
    // ...

    public function show($url)
    {
        return $this->render('blog/show.html.twig', [
            'slug' => $url
        ]);
    }

    // ...
}

C'est juste ce qu'il y a devant le return que nous avons changer, nous lui disons de retourner le fichier blog/show.html.twig, et en plus nous envoyons un deuxième paramètre à la fonction render(), un tableau qui contient les variables que nous envoyons à notre page et que nous pourrons afficher. Si on récupère par exemple un utilisateur avec notre contrôleur, nous devons l'envoyer à notre vue pour pouvoir afficher son nom, email, ...

Ce tableau n'a donc rien de magique, c'est du PHP, la clé (slug) c'est le nom de la variable que nous utiliserons sur la vue, et la valeur ($url) c'est la variable que l'on enregistre pour l'afficher sur la vue. Ce tableau peut contenir n'importe quel type de données, objet, nombres, booléen, ... C'est un tableau comme on a l'habitude de le voir en PHP.

Maintenant que nous avons notre contrôleur, nous allons donc créer notre vue, le fichier templates/blog/show.html.twig, voici son contenu

<h1>Affichage de l'article {{ slug }}</h1>

Et nous voilà, quand je navigue sur le lien http://127.0.0.1:8000/show/un-super-article, voilà ce que j'ai

Affichage d'un article

Sur la vue, je n'ai pas utiliser $url mais plutôt {{ slug }}, la clé que nous avions défini dans le tableau au niveau du contrôleur.

Et là vous pouvez voir l'intérêt du Twig, nous avons juste du HTML, pas besoin de balise PHP pour les variables. En PHP on aurait écrit:

<h1>Affichage de l'article <?php echo $slug ?></h1>

Ce qui peut très vite devenir du n'importe quoi.

Maintenant que nous avons ensemble créer nos deux vues pour l'accueil, je vais donc vous laisser créer les deux autres vues qui reste, à savoir, l'ajout d'un article et sa modification. On se retrouve après.

Si vous avez fini, retrouver ci-dessous les modifications que j'ai apportées.

Le fichier routes.yaml ne change pas

BlogController.php

// src/Controller/BlogController.php
<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;

class BlogController extends AbstractController
{
    public function index()
    {
        return $this->render('blog/index.html.twig');
    }

    public function add()
    {
        return $this->render('blog/add.html.twig');
    }

    public function show($url)
    {
        return $this->render('blog/show.html.twig', [
            'slug' => $url
        ]);
    }

    public function edit($id)
    {
        return $this->render('blog/edit.html.twig', [
            'slug' => $id
        ]);
    }

    public function remove($id)
    {
        return new Response('<h1>Delete article: ' .$id. '</h1>');
    }
}

Je n'ai pas toucher au contrôleur remove() parce que nous n'avons pas besoin d'une page pour supprimer un article.

add.html.twig

<h1>Ajout d'un article</h1>

edit.html.twig

<h1>Modification de l'article {{ slug }}</h1>

Il n'y a pas grand chose. Maintenant travaillons sur nos pages.

Voilà ceux à quoi va ressembler notre site quand on aura fini.

Si vous regardez bien, nos pages ont quelque chose en commun, c'est la barre de navigation, en tant normal c'est soit on la recrée sur toutes le pages en HTML ou on utilise PHP avec la fonction require(), mais nous, nous n'allons faire rien de ceux là.

L'intérêt avec les moteurs de templates comme Twig, c'est qu'un template peut hériter d'un autre, comme les classes, un template peut aussi inclure un ou plusieurs autres templates. L'héritage et l'inclusion sont totalement différents. Voyons cela tout de suite.

L'héritage de templates

Quand on travaille sur un projet, généralement nous avons des blocs de nos pages qui se ressemblent, c'est le cas de la barre de navigation ou du pied de page. Avec Twig, nous n'allons pas rédéfinir ces blocs sur toutes le pages, nous allons définir un template mère qui va contenir l'architecture de base de nos pages et dont les pages de notre site vont hérités. Le template mère va définir des blocs (block) dans lesquels on pourra rajouter du contenu spécifique pour chaque page. Cela fonctionne comme l'héritage en PHP, on peut redéfinir les variables et méthodes de la classe mère.

Dans notre cas, nous allons utiliser le fichier templates/base.html.twig comme template mère, il va donc contenir la barre de navigation de notre site et définir un bloc pour le contenu de nos pages.

{# templates/base.html.twig #}
<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}Symfony Blog{% endblock %}</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    {% block stylesheets %}
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    {% endblock %}
</head>
<body>
    <nav>
        <div class="nav-wrapper">
            <div class="container">
                <a href="#" class="brand-logo">Symfony Blog</a>
                      <ul id="nav-mobile" class="right hide-on-med-and-down">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Login</a></li>
                  </ul>
            </div>
        </div>
      </nav>

      {% block content %}

      {% endblock %}

    {% block scripts %}
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    {% endblock %}
</body>
</html>

Ce fichier défini le template de base de toutes les pages de notre site, toutes nos pages devront donc hériter de ce fichier. Nous définissons ici 4 blocs (block) à savoir title, stylesheets, content et scripts. Les blocs vont nous servir à quoi au juste? A pouvoir les remplacer dans les templates enfants, dites vous que ce sont les méthodes publics d'une classe. Tout le contenu qui ne se trouve pas dans un bloc est une méthode privé, on ne peut donc pas le modifier dans les templates enfants, ce qui veut donc dire qu'on ne peut pas modifier la barre de navigation dans les templates enfants. Maintenant pour pouvoir voir les modifications, nous allons faire hériter notre page d'accueil (index.html.twig) de ce template

{% extends "base.html.twig" %}

On utilise extends comme en PHP aussi. Nous mettons juste le nom du fichier, le chemin de base pour tout les templates c'est le dossier templates, le fichier base.html.twig se trouve directement dans ce dossier, pas dans un sous dossier, donc on ne spécifie aucun chemin ici. Si on actualise la page d'accueil on à ça

Nous avons bien la barre de navigation, avec le style par défaut de materialize. Une autre chose, tout en bas nous avons la debug bar de Symfony, cette barre est créer par Symfony et reste afficher quand nous sommes en mode développement, nous pouvons voir la bas la route sur laquelle on est, les requêtes qui sont faites a la BDD, le temps de chargement de la page, ...

La barre de navigation vient avec le style par défaut de materialize, pour changer cela on doit charger notre fichier de style.

Pour changer cela, télécharger le fichier de style ici si vous le voulez, ou je vous mets au défi de travailler vous même votre fichier de style, et après nous faire des capture pour nous montrer vos pages dans les commentaires ci-dessous.

Le fichier de style doit être placer dans le dossier public/assets/css/, mon fichier s'appelle app.css, son chemin complet c'est donc public/assets/css/app.css et je le charge dans le ficher base.html.twig

{# templates/base.html.twig #}
<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}Symfony Blog{% endblock %}</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    {% block stylesheets %}
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
        <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/app.css') }}">
    {% endblock %}
</head>
<body>
    <nav>
        <div class="nav-wrapper">
            <div class="container">
                <a href="#" class="brand-logo">Symfony Blog</a>
                      <ul id="nav-mobile" class="right hide-on-med-and-down">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Login</a></li>
                  </ul>
            </div>
        </div>
      </nav>

      {% block content %}

      {% endblock %}

    {% block scripts %}
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    {% endblock %}
</body>
</html>

Si nous actualisons la page, notre barre de navigation est maintenant bonne

Maintenant pour ajouter du texte à notre page d'accueil

{# templates/blog/index.html.twig #}
{% extends "base.html.twig" %}

{% block content %}
    <div class="container">
        <div class="row">
            <div class="col s12 m12 l12">
                <h1>Hello, c'est la page d'accueil</h1>
            </div>
        </div>
    </div>
{% endblock %}

On le fait dans le bloc content, si nous essayons d'écrire en dehors de ce bloc, on a une erreur qui dit qu'un template qui hérite d'un autre ne peut pas définir du contenu en dehors des blocs défini par le template parent. C'est assez clair je pense.

Et si vous définissez un autre bloc, en dehors du bloc content, le contenu de ce dernier ne sera pas afficher sur cette page.

{# templates/blog/index.html.twig #}
{% extends "base.html.twig" %}

{% block content %}
    <div class="container">
        <div class="row">
            <div class="col s12 m12 l12">
                <h1>Hello, c'est la page d'accueil</h1>
            </div>
        </div>
    </div>
{% endblock %}

{% block another_block %}
    <h2>Ce contenu ne sera pas afficher</h2>
{% endblock %}

Mais rien ne vous interdit de le définir à l'intérieur du bloc content

{# templates/blog/index.html.twig #}
{% extends "base.html.twig" %}

{% block content %}
    <div class="container">
        <div class="row">
            <div class="col s12 m12 l12">
                <h1>Hello, c'est la page d'accueil</h1>
            </div>
            <div class="col s12 m12 l12">
                    {% block another_block %}
                        <h2>Ce contenu sera afficher</h2>
                    {% endblock %}
            </div>
        </div>
    </div>
{% endblock %}

Vous pouvez imbriquer autant de bloc que vous voulez. Mais n'oublier pas, ça ne sert à rien de créer des blocs si ce n'est pour les redéfinir dans un bloc enfant.

Modifions maintenant le titre de notre page, au lieu de Symfony Blog, je veux avoir Accueil | Symfony Blog, on fait comment? On ajoute Accueil | 

{# templates/blog/index.html.twig #}
{% extends "base.html.twig" %}

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

{% block content %}
    <div class="container">
        <div class="row">
            <div class="col s12 m12 l12">
                <h1>Hello, c'est la page d'accueil</h1>
            </div>
            <div class="col s12 m12 l12">
                    {% block another_block %}
                        <h2>Ce contenu sera afficher</h2>
                    {% endblock %}
            </div>
        </div>
    </div>
{% endblock %}

Ce n'est pas bon, l'ancienne valeur a été écraser, l'autre solution c'est de réécrire tout le titre, mais on est trop paresseux pour cela.

La solution, on utilise une fonction de Twig (oui Twig aussi défini des fonctions) qui permet de récupérer la valeur qui se trouve dans le bloc de la classe mère

{# templates/blog/index.html.twig #}
{% extends "base.html.twig" %}

{% block title %}Accueil | {{ parent() }}{% endblock %}

{% block content %}
    <div class="container">
        <div class="row">
            <div class="col s12 m12 l12">
                <h1>Hello, c'est la page d'accueil</h1>
            </div>
            <div class="col s12 m12 l12">
                    {% block another_block %}
                        <h2>Ce contenu sera afficher</h2>
                    {% endblock %}
            </div>
        </div>
    </div>
{% endblock %}

On utilise la fonction parent(), elle nous permet de récupérer la valeur du bloc dans la classe mère.

On peut maintenant créer les autres pages de notre site. Tu peux essayer de les faire.

Voici nos vues avec du contenu temporaire.

index.html.twig

{# templates/blog/index.html.twig #}
{% extends "base.html.twig" %}

{% block title %}Accueil | {{ parent() }}{% endblock %}

{% block content %}
    <div class="container">
        <div class="row">
            <div class="col s12 m7 l9">
                <div class="article-card image-card" style="background: url('https://images.pexels.com/photos/276452/pexels-photo-276452.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');">
                    <h2><a href="">Another Title</a></h2>
                    <span class="date">14/01/2019</span>
                </div>
            </div>
            <div class="col s12 m5 l3">
                <div class="row">
                    <div class="col s12 m12 l12">
                        <div class="article-card image-card" style="background: url('https://images.pexels.com/photos/276452/pexels-photo-276452.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');">
                            <h2><a href="">Another Title</a></h2>
                            <span class="date">14/01/2019</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col s12 m4 l3">
                <div class="article-card">
                    <img src="https://images.pexels.com/photos/276452/pexels-photo-276452.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="responsive-img">
                    <h2><a href="">Another Title</a></h2>
                    <span class="date">14/01/2019</span>
                </div>
            </div>
            <div class="col s12 m4 l3">
                <div class="article-card">
                    <img src="https://images.pexels.com/photos/276452/pexels-photo-276452.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="responsive-img">
                    <h2><a href="">Another Title</a></h2>
                    <span class="date">14/01/2019</span>
                </div>
            </div>
            <div class="col s12 m4 l3">
                <div class="article-card">
                    <img src="https://images.pexels.com/photos/276452/pexels-photo-276452.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="responsive-img">
                    <h2><a href="">Another Title</a></h2>
                    <span class="date">14/01/2019</span>
                </div>
            </div>
            <div class="col s12 m4 l3">
                <div class="article-card">
                    <img src="https://images.pexels.com/photos/276452/pexels-photo-276452.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="responsive-img">
                    <h2><a href="">Another Title</a></h2>
                    <span class="date">14/01/2019</span>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

show.html.twig

{# templates/blog/show.html.twig #}
{% extends "base.html.twig" %}

{% block title %}{{ slug }}{% endblock %}

{% block content %}
    <article class="container">
        <div class="row">
            <div class="col s12 m12 l8 offset-l2">
                <h2>{{ slug }}</h2>
                <span>14/01/2019</span>
                <p>
                    <img src="https://images.pexels.com/photos/276452/pexels-photo-276452.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="responsive-img">
                </p>
                <span class="categories">php, html, css</span>
            </div>
        </div>
        <div class="row">
            <div class="col s12 m12 l8 offset-l2">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </div>
    </article>
{% endblock %}

add.html.twig

{# templates/blog/add.html.twig #}
{% extends "base.html.twig" %}

{% block title %}{{ parent() }} | Ajouter un article{% endblock %}

{% block content %}
    <div class="container">
        <div class="row">
            <div class="col s12 m12 l12">
                <h4>Ajout d'un article</h4>
            </div>
        </div>
        <div class="row">
            <div class="input-field col s12 m12 l12">
                <input type="file" name="">
            </div>
            <div class="input-field col s12 m6 l6">
                <input type="text" name="" placeholder="Titre de l'article">
            </div>
            <div class="input-field col s12 m6 l6">
                <input type="text" name="" placeholder="Cat&#xE9;gories (php, html, css)">
            </div>
            <div class="input-field col s12 m12 l12">
                <textarea class="materialize-textarea" placeholder="Contenu de l'article"></textarea>
            </div>
            <div class="input-field col s12 m12 l12">
                <p>
                    <label>
                        <input type="checkbox" class="filled-in" />
                        <span>Publier</span>
                      </label>
                  </p>
            </div>
            <div class="input-field col s12 m12 l12">
                <input type="submit" name="" value="Enregistrer" class="btn btn-primary btn-large">
            </div>
        </div>
    </div>
{% endblock %}

edit.html.twig

{# templates/blog/edit.html.twig #}
{% extends "base.html.twig" %}

{% block title %}Modifier{% endblock %}

{% block content %}
    <div class="container">
        <div class="row">
            <div class="col s12 m12 l12">
                <h4>Modifier l'article {{ slug }}</h4>
            </div>
        </div>
        <div class="row">
            <div class="input-field col s12 m12 l12">
                <input type="file" name="">
            </div>
            <div class="input-field col s12 m6 l6">
                <input type="text" name="" placeholder="Titre de l'article">
            </div>
            <div class="input-field col s12 m6 l6">
                <input type="text" name="" placeholder="Cat&#xE9;gories (php, html, css)">
            </div>
            <div class="input-field col s12 m12 l12">
                <textarea class="materialize-textarea" placeholder="Contenu de l'article"></textarea>
            </div>
            <div class="input-field col s12 m12 l12">
                <p>
                    <label>
                        <input type="checkbox" class="filled-in" />
                        <span>Publier</span>
                      </label>
                  </p>
            </div>
            <div class="input-field col s12 m12 l12">
                <input type="submit" name="" value="Enregistrer" class="btn btn-primary btn-large">
            </div>
        </div>
    </div>
{% endblock %}

Petit problème, on a du code dupliquer sur les vues add.html.twig et edit.html.twig, ce qui n'est pas bien, cela est du au formulaire qui est le même pour ajouter mais aussi modifier un article. Pour remédier à cela, nous allons voir l'inclusion des templates.

Inclure un template

L'inclusion de template va donc nous permettre d'éviter de dupliquer du code sur deux pages différentes. C'est différent de l'héritage dans le sens ou avec l'inclusion on injecte du code dans un bloc spécifique par exemple, et nous pouvons aussi envoyer des variables avec l'inclusion de template.

Dans notre cas, nous allons sortir le code du formulaire pour l'édition d'un article et le mettre dans templates/includes/article_form.html.twig

{# templates/includes/article_form.html.twig #}
<form class="row">
    <div class="input-field col s12 m12 l12">
        <input type="file" name="">
    </div>
    <div class="input-field col s12 m6 l6">
        <input type="text" name="" placeholder="Titre de l'article">
    </div>
    <div class="input-field col s12 m6 l6">
        <input type="text" name="" placeholder="Cat&#xE9;gories (php, html, css)">
    </div>
    <div class="input-field col s12 m12 l12">
        <textarea class="materialize-textarea" placeholder="Contenu de l'article"></textarea>
    </div>
    <div class="input-field col s12 m12 l12">
        <p>
            <label>
                <input type="checkbox" class="filled-in" />
                <span>Publier</span>
              </label>
          </p>
    </div>
    <div class="input-field col s12 m12 l12">
        <input type="submit" name="" value="Enregistrer" class="btn btn-primary btn-large">
    </div>
</form>

Nous avons juste le formulaire donc, et nous allons l'inclure dans nos vue edit.html.twig et add.html.twig comme suit

edit.html.twig

{# templates/blog/edit.html.twig #}
{% extends "base.html.twig" %}

{% block title %}Modifier{% endblock %}

{% block content %}
    <div class="container">
        <div class="row">
            <div class="col s12 m12 l12">
                <h4>Modifier l'article {{ slug }}</h4>
            </div>
        </div>
        {% include "includes/article_form.html.twig" %}
    </div>
{% endblock %}

add.html.twig

{# templates/blog/add.html.twig #}

Partage ce tutoriel


Merci à

Mamadou Aliou Diallo

Mamadou Aliou Diallo

@alioukahere

Développeur web fullstack avec une passion pour l’entrepreneuriat et les nouvelles technologies. Fondateur de Kaherecode.

Continue de lire

Discussion

Tu dois être connecté pour participer à la discussion. Me connecter.