A partir du projet construit dans la séance de TP précédent, nous allons ajouter une charte graphique qui utilise le framework bootstrap (N’oubliez pas de faire un commit/push de votre projet).
Symfony propose un outil qui permet d’intégrer facilement des librairies qui seront utilisées côté client : Encore. Pour l’ajouter dans votre projet utilisez les commandes suivantes :
La première commande installe un environnement de développement javascript qui utilise l’intégrateur de fichiers javascript webpack. Elle ajoute un fichier de configuration utilisé par webpack : webpack.config.js à la racine de votre projet et crée un répertoire assets qui contient les fichiers css et js qui seront utilisés dans votre application.
La deuxième commande récupère les librairies javascript nécessaires et les stocke dans le répertoire node_modules.
Nous allons maintenant utiliser le framework css bootstrap associé à la font fontawesome. Pour cela nous allons utiliser les commandes suivantes :
Les applications utilisent maintenant des extensions du langage css qui permettent de garantir la cohérence des styles d’un thème puis de générer un code css pour la grande majorité des navigateurs. Nous allons mettre en place un des compilateurs disponibles sass et post-traitement du css.
Certaines pages contiennent des images et/ou des ressources statiques, nous allons les intégrer de manière automatique dans notre projet
Ajouter les dépendances dans votre projet
npm install --save-dev sass-loader@^7.0.1 node-sass
npm install --save-dev postcss-loader autoprefixerLe fichier doit aussi contenir la liste des navigateurs cibles de notre application, voici un exemple de fichier package.json obtenu après toutes les modifications :
{
"devDependencies": {
"@fortawesome/fontawesome-free": "^5.5.0",
"@symfony/webpack-encore": "^0.21.0",
"autoprefixer": "^9.3.1",
"bootstrap": "^4.1.3",
"jquery": "^3.3.1",
"node-sass": "^4.10.0",
"popper.js": "^1.14.5",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"webpack-notifier": "^1.6.0"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production --progress"
},
"browserslist": [
"> 0.5%",
"last 2 versions",
"Firefox ESR",
"not dead"
]
}Modification du fichier webpack.config.js
var Encore = require('@symfony/webpack-encore');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
/*
* ENTRY CONFIG
*
* Add 1 entry for each "page" of your app
* (including one that's included on every page - e.g. "app")
*
* Each entry will result in one JavaScript file (e.g. app.js)
* and one CSS file (e.g. app.css) if you JavaScript imports CSS.
*/
.addEntry('app', './assets/js/app.js')
// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
.enableSingleRuntimeChunk()
/*
* FEATURE CONFIG
*
* Enable & configure other features below. For a full
* list of features, see:
* https://symfony.com/doc/current/frontend.html#adding-more-features
*/
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
// enables Sass/SCSS support
.enableSassLoader()
// Intégration des fichiers et images statiques
.copyFiles({
from: './assets/md',
to: './md/[name].[ext]'
})
.copyFiles({
from: './assets/images',
to: './images/[name].[ext]'
})
// Transformation du css pour l'ensemble des navigateurs
.enablePostCssLoader((options) => {
options.config = {
path: 'config/postcss.config.js'
};
})
;
module.exports = Encore.getWebpackConfig();Création du fichier config/postcss.config.js
Création du fichier assets/js/app.js
require('../css/global.scss');
// Need jQuery? Install it with "yarn add jquery", then uncomment to require it.
// var $ = require('jquery');
/**
* Début bootstrap
*/
const $ = require('jquery');
require('bootstrap');
$(document).ready(function() {
$('[data-toggle="popover"]').popover();
});
/**
* Fin bootstrap
*/Création du fichier assets/css/global.scss
// font awesome
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/brands';
// customize some Bootstrap variables
$primary: #a4c5fc;
$secondary: #85d2e0;
$success: #acfca4;
$info: #c3a4fc;
$warning: #fce4a4;
$danger: #fca5a4;
$dark: #454545;
$light: #d9d9d9;
// couleur de fond
//$body-bg: rgba(45, 240, 10, 0.18);
$body-bg: #f8fafc;
// the ~ allows you to reference things in node_modules
@import "~bootstrap/scss/bootstrap";Modification du fichier template twig
Pour que le travail produit par webpack soit pris en compte par le fichier twig, il faut modifier le fichier de base. Voici par exemple le template base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
{% endblock %}
</head>
<body>
{{ include('navbar.html.twig') }}
<div class="container">
{% block body %}{% endblock %}
{% block footer %}
<footer class="app-footer">
<div class="container">
<!--Copyright-->
<div>
<div class="container-fluid text-center">
Copyright © {{ "now"|date("Y") }} <a
href="http://www.iut-lens.univ-artois.fr/" target="_blank"><b>IUT Lens - département
Info.</b></a>
</div>
</div>
</div>
</footer>
{% endblock %}
</div>
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
{% endblock %}
</body>
</html>{{ encore_entry_link_tags('app') }} ajoute les fichiers css construits{{ encore_entry_script_tags('app') }} ajoute les fichiers javascript construitsnavbar/html.twg{% set current_path = app.request.get('_route') %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/">Locations de salles</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 {% if current_path == 'welcome' %} active {% endif %}">
<a class="nav-link" href="{{ path('welcome') }}">Accueil<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item {% if current_path == 'welcome_apropos' %} active {% endif %}">
<a class="nav-link" href="{{ path('welcome_apropos') }}">A Propos</a>
</li>
<li class="nav-item {% if current_path == 'welcome_contact' %} active {% endif %}" >
<a class="nav-link" href="{{ path('welcome_contact') }}">Contact</a>
</li>
<li class="nav-item {% if current_path == 'welcome_droits' %} active {% endif %}" >
<a class="nav-link" href="{{ path('welcome_droits') }}">Droits de l'homme</a>
</li>
</ul>
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="{{ path('salle_index') }}">Salles</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ path('location_index') }}">Locations</a>
</li>
<!-- PROFILE DROPDOWN - scrolling off the page to the right -->
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" id="navDropDownLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Profile
</a>
<div class="dropdown-menu" aria-labelledby="navDropDownLink">
<a class="dropdown-item" href="#">Preferences</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
Créez un contrôleur WelcomeController.
Ajoutez les autres pages de votre projet à la barre de menu.
Modifier les formulaires pour qu’ils utilisent le framework bootstrap.
IUT de Lens Département Informatique
2018
