Tuto Symfony 3 : les vues et le routage avec symfony 3
Les vues ou views en anglais sont la couverture de votre site web.Quelque soit sa puissance et ses fonctionnalités , la première chose jugée par le client c'est l'interface , nous avons vu dans l'un des tutoriels Symfony3 comment installer bootstrap, cela était seulement pour la préparation de nos outils ou bibliothèques qu'on va utiliser, mais nous n'avons pas évoqué clairement le sujet de la création des templates. D’autre part nous savons qu'un site web Symfony3 se base sur les trois piliers vue, contrôleur et modèle mais nous nous ne savons pas encore comment appeler une vue a partir d'un contrôleur et comment savoir quelle contrôleur appeler et quelle fonction exécuter a partir d'un url de notre site .Dans cet article je vais répondre a ces questions et appliquer les nouvelles acquis sur notre projet FoodCorner.
Les vues avec symfony 3
Pour créer des templates, le framework symfony3 utilise le moteur de template twig. Twig est donc un moteur de template moderne conçu pour PHP. Grace à twig nous n'avons plus besoind d’intégrer du php dans les pages html pour dynamiser les templates. Il a de nombreux avantages étant flexible, rapide et sécurisé twig répond à de nombreux besoins.Visitez le site officiel de Twig vous allez y trouvez une documentation claire et facilement lisible.
Création de base.html.twig
Pour créer la première vue du site Food Corner allez sous le répertoire resources/views et créez un nouveau fichier base.html.twig.
Ensuite copiez le code suivant:
<html>
<head>
<meta charset="utf-8">
<title>{% block title %}Food Coner{% endblock %}</title>
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('css/bootstrap.css') }}">
<link rel="stylesheet" href="{{ asset('bundles/resto/css/mystyle.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('bundles/bmatznerfontawesome/css/font-awesome.min.css') }}" />
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/bootstrap.js') }}"></script>
{% endblock %}
</head>
<body>
<div class="row">
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="{{ asset('bundles/resto/images/brand.png') }}" class="img-responsive brand"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Accuiel</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Reservation</a></li>
<li><a href="#">Commande</a></li>
<li><a href="#">A propos</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!--/.nav-collapse -->
<!--/.container-fluid -->
</nav>
<!-- Main component for a primary marketing message or call to action -->
</div>
<div class="container block">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-8 col-xs-8 pull-left ">
{% block body %}
<p class=" text-justify presentation lead">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at tortor a urna ultricies sagittis ut sed dui. Vivamus non mollis libero, a tincidunt felis. Etiam augue libero, congue a velit nec, feugiat aliquam turpis. Integer id aliquet ante. Curabitur vulputate lectus vel sem vulputate convallis dapibus quis justo. Nulla sit amet tortor ac ante iaculis ultricies nec in ex. Fusce sit amet nisi neque. Aenean rutrum efficitur efficitur. In hac habitasse platea dictumst.
</p>
{% endblock %}
</div>
</div>
</div>
<footer>
<div class="footer" id="footer">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<i class="fa fa-map-marker fa-2x info" aria-hidden="true"></i><br/> 13 RUE X TUNIS
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 ">
<i class="fa fa-envelope fa-2x info" aria-hidden="true"></i><br/>foodcorner@gmail.com
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 ">
<i class="fa fa-phone fa-2x info" aria-hidden="true"></i><br/>12356712
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<ul class="social">
<li>
<a href="#"> <i class="fa fa-facebook"> </i> </a>
</li>
<li>
<a href="#"> <i class="fa fa-twitter"> </i> </a>
</li>
<li>
<a href="#"> <i class="fa fa-google-plus"> </i> </a>
</li>
<li>
<a href="#"> <i class="fa fa-pinterest"> </i> </a>
</li>
</ul>
</div>
</div>
<!--/.row-->
</div>
<!--/.container-->
</div>
<!--/.footer-->
<div class="footer-bottom">
<div class="container">
<p class="text-center"> Copyright @MDEV 2017. All right reserved. </p>
</div>
</div>
<!--/.footer-bottom-->
</footer>
</body>
</html>
Fichier css et images
Nous avons déjà installer bootstrap dans le 3 ème tutoriel mais ça n’empêche que nous pouvons créer d'autre fichiers css ou js .Nous avons aussi besoin des images pour personnaliser nos templates. Pour cela il faut créer un dossier public sous le répertoire ressources.Ensuite créez trois dossier css , js , et images.
Créez le fichier mystyle.css et y ajoutez ce code:
.full {
width: 100%;
}
.gap {
height: 30px;
width: 100%;
clear: both;
display: block;}
.footer {
height: auto;
padding-bottom: 30px;
position: relative;
width: 100%;
border-bottom: 1px solid #CCCCCC;
border-top: 1px solid #DDDDDD;
}
.footer p {
margin: 0;
}
.footer img {
max-width: 100%;
}
.footer ul {
font-size: 13px;
list-style-type: none;
margin-left: 0;
padding-left: 0;
margin-top: 15px;
color: #7F8C8D;
}
.footer ul li a {
padding: 0 0 5px 0;
display: block;
}
.footer a {
color: #F76B00;
}
.supportLi h4 {
font-size: 20px;
font-weight: lighter;
line-height: normal;
margin-bottom: 0 !important;
padding-bottom: 0;
}
.bg-gray {
background-image: linear-gradient(center bottom, #BBBBBB 0%, #F0F0F0 100%);
box-shadow: 0 1px 0 #B4B3B3;
}
.social li {
background: none repeat scroll 0 0 #F76B00;
border: 2px solid #ED9C40;
border-radius: 50%;
border-radius: 50%;
border-radius: 50%;
border-radius: 50%;
border-radius: 50%;
float: left;
height: 36px;
line-height: 36px;
margin: 0 8px 0 0;
padding: 0;
text-align: center;
width: 36px;
transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
.social li:hover {
transform: scale(1.15) rotate(360deg);
transform: scale(1.1) rotate(360deg);
transform: scale(1.1) rotate(360deg);
transform: scale(1.1) rotate(360deg);
transform: scale(1.1) rotate(360deg);
}
.social li a {
color: #EDEFF1;
}
.social li:hover {
border: 2px solid #C65600;
background: #C65000;
}
.social li a i {
font-size: 16px;
margin: 0 0 0 5px;
color: #EDEFF1 !important;
}
.footer-bottom {
background: #F0AF7E;
border-top: 1px solid #DDDDDD;
padding-top: 10px;
padding-bottom: 10px;
}
.info {
color: #F76B00;
margin-top: 15px;
}
.info:hover {
color: #C65600;
}
.navbar-default {
background-color: #F76B00;
border-color: #F69526;
}
.navbar-default .navbar-nav>li>a {
color: #ffffff;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
color: #ffffff;
background-color: #C65600;
}
.brand {
margin-top: -5px;
}
.block {
background-image: url('../../resto/images/restaurant.jpg');
background-repeat: no-repeat;
height: 640px;
background-position: center;
}
.presentation {
color: #ffffff;
margin-top: 120px;
}
@media (max-width: 767px) {
.block {
background-size: cover;
}
.presentation {
margin-top: 80px;
}
}
Ajouter une image background "restaurant.jpg"et une image pour le logo
"brand.png" dans le dossier images.
Pour télécharger des images gratuites:
Pour télécharger des icones gratuites:
Pour les icones socila media j'ai utlisé les icônes FonAwesome.Pour installer ce bundle visitez ce lien:
Installer les assets
$ php bin/console asset:install
Lier le contrôleur avec la template twig
Maintenant nous devons appeler cette vue à partir de la fonction index de DefaultController.
namespace RestoBundle\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
class DefaultController extends Controller
{
public function indexAction ()
{
return $this->render('RestoBundle::base.html.twig');
}
}
Le routage
Enfin il nous faut un url pour exécuter la fonction indexAction() et afficher la template. Pour cela Symfony utilise le système de routage .Ce dernier sert à construire et analyser les routes afin de savoir quel contrôleur appeler et quelle fonction exécuter.Les routes se trouvent sous le fichier routing.yml.
La route resto_homepage est déjà créé par défaut mais vous pouvez la modifier.
resto_homepage
path/
defaults _controllerRestoBundleDefaultindex
Path c'est le chemin d'url qu'n va entrer dans le navigateur , dans ce cas c'est la racine "/"
dans la deuxième ligne vous remarquez il ya le nom de bundle ensuite le contrôleur et enfin la fonction.Dans d'autre cas vous pouvez trouvez des routes avec paramètres c'est le cas où la fonction nécessite un paramètre
exemple:
blog_show
path/article/id
defaults _controllerBlogBundleArticleshow
requirements
id\d+
dans cet exemple nous avons besoin de l'id de l’article pour savoir quel article afficher , donc le paramètre c'est l'id .
Il est temps de tester notre travail.Lancez wamp server et testez cet url:
http://localhost/FoodCorner/web/app_dev.php/
Voila donc la Template de base du site est prête et vous êtes maintenant capables de créer des templates twig et de construire des urls en utilisant les routes.
Commentaires
Enregistrer un commentaire