TP Template Blade

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>

<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>
<a class="nav-link"
href="produit">Produits</a>
</li>
<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>

<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
@section('content')
<h1>Ici c'est la page Contact</h1>
@stop
produit.blade.php
@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-
<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-
<td class="col-md-1 text-
<td class="col-md-1">
danger">
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-
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><h3>Total</h3></td>
<td class="text-
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td>
default">
shopping-cart"></span> Continuer vos achats
</button></td>
<td>
success">
Vérifier <span class="glyphicon
glyphicon-play"></span>
</button></td>
</tr>
</tbody>
</table>
</div>
@stop

TP Template Blade

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

TP Template Blade

Transféré par

Droits d'auteur :

Formats disponibles

TP Template Blade

1. Créer une structure de vues

2. Créer les routes de pages

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

<footer class = "row footer">

4. Créer la page layout

<div id = "main" class = "row" >

5. Créer les pages “de contenu”

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

Vous aimerez peut-être aussi