OFPPT M205 : Développer en Back-end
ISTA TAFRAOUT Travaux Pratiques
TP 4 : Manipuler les routes et les vues
Le but de travail pratique est de comprendre les bases de routage et les bases de blade :
héritage, inclusion, gestion des blocs.
Avant de commencer le travail pratique, Créez votre projet « tp4-routes-vues ».
Le moteur de templates Blade permet de créer les pages web sous forme de composants.
Les pages d’une application utilisent généralement la même structure, seules les données
changes. En partant de ce principe, à l’aide de blade nous allons construire le squelette de la
page et y inclure des composants.
Plusieurs éléments à retenir :
la directive @section, comme son nom l'indique, crée une nouvelle section.
Directement utilisable dans layout mais également dans les templates enfants.
la directive @yield, crée une nouvelle section utilisable que par les enfants. Cela
permet, de se rendre compte tout de suite, visuellement de quels éléments devront
être hérité obligatoirement.
la directive @include permet de utiliser des vues partielles.
La plupart des sites web sont généralement découpés selon le schéma suivant.
Réalisé par NOUREDDINE ABABAR 7 / 14
OFPPT M205 : Développer en Back-end
ISTA TAFRAOUT Travaux Pratiques
1 - Créer dans resources/views un nouveau template [Link]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>@yield('title')</title>
<!-- Ajouter CDN Bootstrap CSS -->
</head>
<body>
@include('[Link]')
<div class="container">
@yield('content')
</div>
@include('[Link]')
@yield('script')
<!-- Ajouter CDN Bootstrap JS -->
</body>
</html>
2 - Créer dans resources/views un nouveau dossier includes et ajouter les vues
partielles [Link] et [Link]
Le fichier includes/[Link] :
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="/">Laravel</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/apropos">A Propos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/packages">Packages</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
Réalisé par NOUREDDINE ABABAR 8 / 14
OFPPT M205 : Développer en Back-end
ISTA TAFRAOUT Travaux Pratiques
et le fichier includes/[Link] :
<footer class="app-footer">
<div class="container">
<div class="container-fluid text-center">
Copyright © <?php echo date('Y'); ?>
<a href="[Link] target="_blank">
<b>Laravel</b></a>
</div>
</div>
</footer>
3 – Créer dans resources/views un nouveau dossier pages et ajouter les pages
[Link] et [Link]
Le fichier pages/[Link] :
@extends("layout")
@section('title', 'Page d\'accueil')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>TP 4 : Manipuler les routes et les vues</h1><hr>
</div>
</div>
</div>
@endsection
Le fichier pages/[Link] :
@extends("layout")
@section('title', 'A propos')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>The PHP Framework for Web Artisans</h1><hr>
<p>Laravel is a web application framework with expressive,
elegant syntax. We’ve already laid the foundation — freeing you to create
without sweating the small things.</p>
<p>Laravel values beauty. We love clean code just as much
as you do. Simple, elegant syntax puts amazing functionality at your
fingertips. Every feature has been thoughtfully considered to provide a
wonderful developer experience.</p>
</div>
</div>
</div>
@endsection
Réalisé par NOUREDDINE ABABAR 9 / 14
OFPPT M205 : Développer en Back-end
ISTA TAFRAOUT Travaux Pratiques
4 - Modifier le fichier des routes (le fichier routes/[Link])
Route::get('/', function () {
return view('[Link]');
});
Route::get('/apropos', function () {
return view('[Link]');
});
5 - Vérifier que les pages fonctionnent correctement.
« Page d’accueil »
« Page A propos »
6 - On souhaite maintenant créer la page packages/[Link] qui permet
d’afficher la liste des packages.
[
['id' => 1, 'title' => 'Spatie', 'slug' => 'spatie'],
['id' => 2, 'title' => 'No Captcha', 'slug' => 'no-captcha'],
['id' => 3, 'title' => 'SEOTools', 'slug' => 'seotools']
]
6 – 1 – Créer la route « /packages » qui envoie la liste des packages à la vue
« packages/[Link] »
Réalisé par NOUREDDINE ABABAR 10 / 14
OFPPT M205 : Développer en Back-end
ISTA TAFRAOUT Travaux Pratiques
6 – 2 – Créer la vue « packages/[Link] » pour afficher la liste des packages
sous forme des liens
7 - Créer la page packages/[Link] qui permet d’afficher un package en se
basant sur le slug.
Réalisé par NOUREDDINE ABABAR 11 / 14