• 20 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Itération 6 : intégration du framework Web Bootstrap

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Le but de cette itération est de rendre l'affichage de notre application plus conforme aux standards actuels.

Introduction au design web adaptatif

Commençons avec une image qui vaut mieux qu'un long discours.

This is the Web

De nos jours, un site web a plus de chances d'être consulté depuis un terminal mobile (smartphone, tablette, etc.) que depuis un classique poste fixe. Cette (r)évolution doit absolument être prise en compte pour qu'un utilisateur de terminal mobile puisse consulter et utiliser le site dans de bonnes conditions.

Il existe plusieurs réponses complémentaires à cette problématique, comme par exemple la création d'une version mobile d'un site ou encore le développement d'applications dédiées à chaque écosystème mobile (iOS, Android, Windows Phone...). La solution la moins coûteuse consiste à adapter l'affichage en détectant les caractéristiques du terminal client. C'est ce qu'on appelle le design web adaptatif, traduction de l'anglais responsive (web) design. Pour une introduction générale à ce concept, consultez Wikipedia.

Il existe plusieurs manières d'obtenir un design web adaptatif. On peut le réaliser "à la main" en utilisant des media queries (fournies par la norme CSS3) pour adapter la mise en page à l'environnement détecté. Il existe également des frameworks qui facilitent la mise en page adaptative. Nous allons utiliser le plus populaire d'entre eux : Bootstrap.

Présentation de Bootstrap

Bootstrap est un framework destiné à faciliter la création d'applications web. Il regroupe une collection d'outils fournis sous la forme de classes CSS et de librairies JavaScript. Bootstrap a été créé par deux développeurs du réseau social Twitter.

Logo Bootstrap

Il n'est pas nécessaire de connaître Bootstrap sur le bout des doigts pour suivre ce cours. Si vous n'avez jamais entendu parler de ce framework, je vous conseille tout de même de consulter le cours OpenClassrooms associé et d'étudier au minimum la partie 1 ("Premiers pas").

Installation de Bootstrap et de jQuery

Les fichiers de Bootstrap sont nécessaires au navigateur client pour afficher les pages HTML de notre application. Nous allons donc les installer dans le répertoireweb. Dans ce répertoire, créez un sous-répertoirelib puis un sous-répertoirebootstrap danslib. Téléchargez Bootstrap sur cette page puis décompressez le contenu de l'archive dans le répertoirebootstrap.

Pour fonctionner totalement, Bootstrap nécessite l'inclusion de la librairie JavaScript jQuery. Créez dans le répertoireweb/lib un sous-répertoirejquery. Ensuite, téléchargez la version "production" de jQuery sur cette page puis renommez le fichier téléchargé jquery.min.js. Déplacez ensuite ce fichier dans le répertoirejquery.

Afin de clarifier l'organisation deweb, créez dans ce répertoire un sous-répertoirecss puis déplacez-y le fichiermicrocms.css.

Vous devez obtenir dansweb une arborescence de la forme suivante.

Arborescence du répertoire web du projet
Arborescence du répertoire web du projet

Ajout de nouveaux composants Symfony

Nous devons modifier le fichier  composer.json  afin d'intégrer de nouveaux composants Symfony qui facilitent l'utilisation de Twig.‌

{
    "require": {
        ...,
        "symfony/twig-bridge": "~2.8|3.0.*",
        "symfony/asset": "~2.8|3.0.*"
    },
    ...
}

Lancez ensuite la commande  composer update  pour récupérer ces nouveaux composants.‌

composer update

Enfin, il faut ajouter dans le fichier  app/app.php  la déclaration du service AssetServiceProvider.

<?php

use Symfony\Component\Debug\ErrorHandler;
use Symfony\Component\Debug\ExceptionHandler;

// Register global error and exception handlers
ErrorHandler::register();
ExceptionHandler::register();

// Register service providers
$app->register(new Silex\Provider\DoctrineServiceProvider());
$app->register(new Silex\Provider\TwigServiceProvider(), array(
    'twig.path' => __DIR__.'/../views',
));
$app->register(new Silex\Provider\AssetServiceProvider(), array(
    'assets.version' => 'v1'
));

// Register services
$app['dao.article'] = function ($app) {
    return new MicroCMS\DAO\ArticleDAO($app['db']);
};

Réécriture de la vue avec Bootstrap

Nous allons modifier la vueindex.html.twig pour y intégrer Bootstrap. Au passage, nous allons en profiter pour ajouter à l'application une barre de navigation fixée en haut de la fenêtre. 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="{{ asset('/lib/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ asset('/css/microcms.css') }}" rel="stylesheet">
    <title>MicroCMS - Home</title>
</head>
<body>
    <div class="container">
        <nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-target">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="">MicroCMS</a>
                </div>
                <div class="collapse navbar-collapse" id="navbar-collapse-target">
                </div>
            </div><!-- /.container -->
        </nav>
        {% for article in articles %}
        <article>
            <h2>{{ article.title }}</h2>
            <p>{{ article.content }}</p>
        </article>
        {% endfor %}
        <footer class="footer">
            <a href="https://github.com/bpesquet/OC-MicroCMS">MicroCMS</a> is a minimalistic CMS built as a showcase for modern PHP development.
        </footer>
    </div>
</body>
</html>

Dans la partie<head> de cette page, nous avons ajouté les liens vers les feuilles de style de l'application et de Bootstrap en utilisant la fonction asset() de Symfony pour les charger. Cela permet de gérer tous les scenarii possibles de déploiement de l'application (plus de détails).

Dans le corps de cette page, nous avons introduit une barre de navigation (navbar) fixée en haut de la fenêtre (navbar-fixed-top). Tous les éléments du corps sont inclus dans un conteneur Bootstrap (container).

Le fait de fixer la barre de navigation en haut de la fenêtre nécessite de décaler vers le bas la balise<body> (explications). Il faut donc modifier la feuille stylemicrocms.css ainsi :‌

body { 
    padding-top: 50px; 
}

.footer {
    border-top: 1px solid #ccc;
    padding-top: 10px;
    text-align: center;
}

Accédez à l'URL http://microcms depuis votre navigateur Web. Vous obtenez à présent un résultat plus flatteur.

Page d'accueil avec Bootstrap

Le code source associé à cette itération est disponible sur une branche du dépôt GitHub

Bilan

Grâce à l'intégration de Bootstrap, les vues gérant l'affichage de notre application ont un aspect plus actuel et peuvent être écrites de manière adaptative. Leur rendu sera optimal quel que soit le terminal client utilisé.

Cette itération et les précédentes ont consisté en des améliorations techniques de l'application. La prochaine itération va (enfin !) lui ajouter une nouvelle fonctionnalité métier.

Exemple de certificat de réussite
Exemple de certificat de réussite