Créer Layout avec Laravel Blade
Sommaire
- 1- Objectifs
- 2- Présentation
- 3- Créer une structure de vues
- 4- Créer les routes de pages
- 5- Créer les pages "éléments"
- 5.1- head.blade.php
- 5.2- header.blade.php
- 5.3- footer.blade.php
- 6- Créer la page layout
- 7- Créer les pages "de contenu"
- 7.1- home.blade.php
- 7.2- contact.blade.php
- 7.3- produit.blade.php
- 7.3.1- Cours Laravel
Créer Layout avec Laravel Blade
-
Objectifs
- Etre capable de créer un Layout avec Laravel Blade
-
Présentation
- Les Layouts sont souvent le point de départ de nombreux projets de développement Web. Le moteur de modèles Laravel Blade permet au développeur de produire des designs et des thèmes élégants basés sur HTML.
- Toutes les vues de Laravel sont généralement intégrées au modèle de Blade. Le moteur Blade est rapide dans le rendu des vues car il met la vue en cache jusqu’à ce qu’elles soient modifiées. Tous les fichiers des
resources/viewsont l’extension.blade.php. -
Créer une structure de vues
- Avant de commencer la création des views, créer leur structure Views en créant les dossiers et les fichiers dans l’exemple suivant:
- – resources
- — views
- — layouts
- ——- default.blade.php
- — pages
- ——- home.blade.php
- ——- contact.blade.php
- — elements
- ——- head.blade.php
- ——- header.blade.php
- ——- footer.blade.php
-
Créer les routes de pages
- Tout d’abord, créer les routes pour accéder aux pages. Ouvrir
routes/web.phpet ajoutez-y les lignes suivantes: -
Créer les pages « éléments »
- Créez les éléments (ses pages sers comme des éléments des autres pages) suivantes, avec le code suivant:
-
head.blade.php
-
header.blade.php
-
footer.blade.php
-
Créer la page layout
- Utiliser
@includepour importer les parties du code (les pages )créés dans le dossier « éléments » et@yieldpour importer le contenu des pages individuelles à utiliser. -
Créer les pages « de contenu »
- Accéder à resources/views/pages et mettre le code suivant dans ces fichiers.
-
home.blade.php
-
contact.blade.php
-
produit.blade.php
Nous ne travaillons que sur les vues et n’avons donc pas besoin d’accéder aux contrôleurs. Pour en savoir plus sur les contrôleurs, consultez: Créer et utiliser un contrôleur Laravel
Route::get('/', function()
{
return View::make('pages.home');
});
Route::get('contact', function()
{
return View::make('pages.contact');
});
Route::get('produit', function()
{
return View::make('pages.produit');
});<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="Saquib" content="Blade">
<title>Checkout our layout</title>
<!-- load bootstrap from a cdn -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<style>
html {
position: relative;
min-height: 100%;
}
.footer {
position: absolute;
bottom: 0;
width: 82%;
height: 60px;
background: #000000;
color: #FFFFFF;
}
</style>
</head><body>
<div class = "container" >
<header class = "row" >
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="/">apcpedagogie</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="produit">Produits</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact">Contact</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</header><footer class = "row footer">
<div id="copyright text-right">© Copyright 2021 apcpedagogie </div>
</footer>
</div>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html> @include('elements.head' )
@include('elements.header' )
<div id = "main" class = "row" >
@yield('content' )
</div>
@include('elements.footer' )
@extends('layouts.default')
@section('content')
<h1>Ici c'est la page Home</h1>
@stop@extends('layouts.default')
@section('content')
<h1>Ici c'est la page Contact</h1>
@stop@extends('layouts.default')
@section('content')
<h1>Ici c'est la page Produit</h1>
<div class="col-sm-12 col-md-10 col-md-offset-1">
<table class="table table-hover">
<thead>
<tr>
<th>Product</th>
<th>Quantité</th>
<th class="text-center">Prix</th>
<th class="text-center">Total</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-8 col-md-6">
<div class="media">
<a class="thumbnail pull-left" href="#"> <img class="media-object" src="https://icons.iconarchive.com/icons/custom-icon-design/flatastic-2/72/product-icon.png" style="width: 72px; height: 72px;"> </a>
<div class="media-body">
<h4 class="media-heading"><a href="#">Nom du produit</a></h4>
<h5 class="media-heading"> Par <a href="#">Nom de marque</a></h5>
<span>Statut: </span><span class="text-success"><strong>en stock</strong></span>
</div>
</div></td>
<td class="col-sm-1 col-md-1" style="text-align: center">
<input type="email" class="form-control" id="exampleInputEmail1" value="3">
</td>
<td class="col-sm-1 col-md-1 text-center"><strong>$4.87</strong></td>
<td class="col-sm-1 col-md-1 text-center"><strong>$14.61</strong></td>
<td class="col-sm-1 col-md-1">
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-Supprimer"></span> Supprimer
</button></td>
</tr>
<tr>
<td class="col-md-6">
<div class="media">
<a class="thumbnail pull-left" href="#"> <img class="media-object" src="https://icons.iconarchive.com/icons/custom-icon-design/flatastic-2/72/product-icon.png" style="width: 72px; height: 72px;"> </a>
<div class="media-body">
<h4 class="media-heading"><a href="#">Nom du produit</a></h4>
<h5 class="media-heading"> Par <a href="#">Nom de marque</a></h5>
<span>Statut: </span><span class="text-warning"><strong>Quitte l'entrepôt dans 2 à 3 semaines</strong></span>
</div>
</div></td>
<td class="col-md-1" style="text-align: center">
<input type="email" class="form-control" id="exampleInputEmail1" value="2">
</td>
<td class="col-md-1 text-center"><strong>$4.99</strong></td>
<td class="col-md-1 text-center"><strong>$9.98</strong></td>
<td class="col-md-1">
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-Supprimer"></span> Supprimer
</button></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><h5>Sous total</h5></td>
<td class="text-right"><h5><strong>$24.59</strong></h5></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><h5>Fraisbde livraison estimés</h5></td>
<td class="text-right"><h5><strong>$6.94</strong></h5></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><h3>Total</h3></td>
<td class="text-right"><h3><strong>$31.53</strong></h3></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-shopping-cart"></span> Continuer vos achats
</button></td>
<td>
<button type="button" class="btn btn-success">
Vérifier <span class="glyphicon glyphicon-play"></span>
</button></td>
</tr>
</tbody>
</table>
</div>
@stop