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/views ont l’extension .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

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.php et ajoutez-y les lignes suivantes:

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');
});

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

<!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>

header.blade.php

<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.blade.php

<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>

Créer la page layout

Utiliser @include pour importer les parties du code (les pages )créés dans le dossier “éléments” et @yield pour importer le contenu des pages individuelles à utiliser.

   @include('elements.head' )
   @include('elements.header' )
  
   <div id = "main" class = "row" >
           @yield('content' )
   </div>
   
   @include('elements.footer' )

Créer les pages “de contenu”

Accéder à resources/views/pages et mettre le code suivant dans ces fichiers.
home.blade.php

@extends('layouts.default')
@section('content')
   <h1>Ici c'est la page Home</h1>
@stop

contact.blade.php

@extends('layouts.default')
@section('content')
   <h1>Ici c'est la page Contact</h1>
@stop

produit.blade.php

@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

Sommaire du cours Laravel

Contraintes d’expressions de route Laravel

Les cours

Les cours

Laravel

Créer Layout avec Laravel Blade

Créer Layout avec Laravel Blade

Objectifs

Présentation

Créer une structure de vues

Créer les routes de pages

Créer les pages “éléments”

head.blade.php

header.blade.php

footer.blade.php

Créer la page layout

Créer les pages “de contenu”

home.blade.php

contact.blade.php

produit.blade.php

Cours Laravel

Blade Templates

Laravel Blade les instructions conditionnelles

Laisser un commentaire Annuler la réponse

Cours informatique à domicile et à distance
Nous sommes là pour vous aider

Les cours

Les cours

Laravel

Créer Layout avec Laravel Blade

Objectifs

Présentation

Créer une structure de vues

Créer les routes de pages

Créer les pages “éléments”

head.blade.php

header.blade.php

footer.blade.php

Créer la page layout

Créer les pages “de contenu”

home.blade.php

contact.blade.php

produit.blade.php

Cours Laravel

Blade Templates

Laravel Blade les instructions conditionnelles

Ces articles pourraient aussi vous intéresser

Intégrer Google Charts dans Laravel

Générer un fichier PDF avec laravel dompdf

Laravel8 Ajax CRUD avec Yajra Datatables et Modal

Laisser un commentaire Annuler la réponse