Bien débuter avec le Framework Silex – La gestion des vues

13 décembre 2017 - : Pas de commentaire

Bien débuter avec le Framework Silex – La gestion des vues

Dans cet article, nous allons voir comment il est possible de diviser nos vues en différents fichiers en fonction des besoins.

En effet, il est courant que certaines parties de nos pages soient communes et redondantes.

Afin de faciliter leur maintenance, il sera pratique de « sortir » ce contenu redondant dans un autre fichier qui sera appelé par toutes les pages qui en auront besoin.

Dans l’exemple ci-dessous, nous allons diviser une vue utilisant le framework bootstrap.

Voici la page d’origine

<!DOCTYPE html>
<html>
    <head>
        <title>{% block title '' %} - My Silex Application</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.2, user-scalable=yes" />
        <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}" media="screen" />
        <link rel="stylesheet" href="{{ asset('css/style.css') }}" media="screen" />
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">Mon Blog</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="{{path('homepage')}}">Accueil <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{path('monblog')}}">Blog</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{path('inscription')}}">Inscription</a>
                    </li>
                </ul>
                <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                </form>
            </div>
        </nav>
        <main class="container">
			<section class="row">
				<div class="col-9">
					{% block content %}{% endblock %}
				</div>
				<aside class="col-3">
					<!-- Ici nous mettrons le contenu de la sidebar -->
				</aside>
			</section>  
        </main>
        <footer class="container-fluid">
            <div class="row" >
                <div class="col-12" >
                    <p>
                        © Nouvelle-Techno.fr
                    </p>
                </div>
            </div>
        </footer>
    </body>
</html>
Langage : HTML/Twig - Fichier : templates/layout.html.twig

Dans ce fichier, les lignes redondantes seraient probablement l’entête incluant le menu de navigation, la sidebar et le pied de page.

Nous allons donc séparer notre contenu en créant des fichiers « partiels » que nous allons inclure dans notre fichier principal.

Il n’y a pas de meilleure façon de faire, l’exemple ci-dessous n’en est qu’une parmi de nombreuses.

Nous pourrons par exemple créer un fichier header.html.twig qui sera stocké dans templates/partials et qui contiendra le code suivant

<!DOCTYPE html>
<html>
    <head>
        <title>{% block title '' %} - My Silex Application</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.2, user-scalable=yes" />
        <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}" media="screen" />
        <link rel="stylesheet" href="{{ asset('css/style.css') }}" media="screen" />
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">Mon Blog</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="{{path('homepage')}}">Accueil <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{path('monblog')}}">Blog</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{path('inscription')}}">Inscription</a>
                    </li>
                </ul>
                <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                </form>
            </div>
        </nav>
        <main class="container">
Langage : HTML/Twig - Fichier templates/partials/header.html.twig

Nous pourrons créer également un fichier pour le pied de page

        </main>
        <footer class="container-fluid">
            <div class="row" >
                <div class="col-12" >
                    <p>
                        © Nouvelle-Techno.fr
                    </p>
                </div>
            </div>
        </footer>
    </body>
</html>
Langage : HTML/Twig - Fichier templates/partials/footer.html.twig

Vous aurez certainement remarqué que nous avons extrait les deux extrémités de notre template. Nous allons également extraire la partie sidebar dans le fichier ci-dessous

<aside class="col-3">
	<!-- Ici nous mettrons le contenu de notre sidebar -->
</aside>
Langage : HTML/Twig - Fichier templates/partials/sidebar.html.twig

Une fois ces fichiers « séparés », nous allons mettre à jour notre « layout »

<!-- Nous appelons le fichier header.html.twig -->
{% include 'partials/header.html.twig' %}
        
{% block content %}{% endblock %}

<!-- Nous appelons le fichier footer.html.twig -->
{% include 'partials/footer.html.twig' %}
Langage : HTML/Twig - Fichier templates/layout.html.twig

Vous aurez certainement remarqué que nous n’avons pas appelé la sidebar.

En effet, pour nous laisser la possibilité d’insérer ou non la sidebar, nous allons l’inclure dans les fichiers de vues.

Ainsi, le fichier blog.html.twig ci-dessous inclut la sidebar

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

{% block content %}
	<section class="row">
		<div class="col-9">
			<h1>Bienvenue sur votre blog</h1>
			{% for ligne in articles %}
				<article class="row">
					<div class="col-12">
						<h2><a href="{{ path('monblog') }}/{{ ligne.id }}">{{ ligne.titre }}</a></h2>
						<p>Publié le {{ ligne.date_article|date('d/m/Y') }} par {{ ligne.pseudo }}</p>
						<p>{{ ligne.contenu }}</p>
					</div>
				</article>
			{% endfor %}
		</div>
		{% include 'partials/sidebar.html.twig' %}
	</section>
{% endblock %}
Langage : HTML/Twig - Fichier templates/blog.html.twig

Tandis que le fichier article.html.twig ci-dessous ne l’inclut pas

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

{% block content %}
	<section class="row">
		<div class="col-12">
			<h2>{{ article.titre }}</h2>
			<p>Publié le {{ article.date_article|date('d/m/Y') }} par {{ article.pseudo }}</p>
			<p>{{ article.contenu }}</p>
		</div>
		<div class="col-12">
			<h3>Voici les commentaires</h3>
			{% for comment in comments %}
			<p>{{comment.pseudo}} a écrit : {{comment.contenu}}</p>
			{% else %}
			<p>Pas de commentaires</p>
			{% endfor %}
		</div>
	</section>
	<p><a href="{{ path('monblog') }}">Liste des articles</a></p>
{% endblock %}
Langage : HTML/Twig - Fichier : templates/article.html.twig

Voilà, cet article est le 6ème d’une série permettant d’apprendre pas à pas l’utilisation de Silex.

: Tutoriel Framework MVC Silex Views

Commentaires

Pas encore de commentaire

Laisser un commentaire