Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Importer

Bienvenue sur Scribd !

  • 30 vues

    TP Template Blade

    Transféré par

    med
    Ce document décrit les étapes pour créer une structure de vues Blade en Laravel avec des pages, des éléments et un layout par défaut. Il montre comment créer des routes, des composants réutilisables et importer le contenu dans les pages.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd

    TP Template Blade

    Transféré par

    med
    30 vues7 pages
    Ce document décrit les étapes pour créer une structure de vues Blade en Laravel avec des pages, des éléments et un layout par défaut. Il montre comment créer des routes, des composants réutilisables et importer le contenu dans les pages.

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Ce document décrit les étapes pour créer une structure de vues Blade en Laravel avec des pages, des éléments et un layout par défaut. Il montre comment créer des routes, des composants réutilisables et importer le contenu dans les pages.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    30 vues7 pages

    TP Template Blade

    Transféré par

    med
    Ce document décrit les étapes pour créer une structure de vues Blade en Laravel avec des pages, des éléments et un layout par défaut. Il montre comment créer des routes, des composants réutilisables et importer le contenu dans les pages.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    sur 7

    TP Template Blade

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

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

    3. Créer les pages “éléments”


    a. 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/b
    ootstrap@5.0.0-
    beta1/dist/css/bootstrap.min.css"
    rel="stylesheet" integrity="sha384-
    giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9
    wjKHr8RbDVddVHyTfAAsrekwKmP1"
    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/bo
    otstrap@5.0.0-
    beta1/dist/js/bootstrap.bundle.min.j
    s" integrity="sha384-
    ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/
    t7LECLbyPA2x65Kgf80OJFdroafW"
    crossorigin="anonymous"></script>
    </body>
    </html>

    4. 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' )

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

    Vous aimerez peut-être aussi