Laravel : utilisation (cas d’une page dynamique)

Route

Créons une route qui mènera à la page power (c'est-à-dire http://localhost/monprojet/public/power), et dont les opérations seront gérées par la méthode activate() de mon contrôleur TestController :


Route::get('power','TestController@activate');

 

Vues

Afin d'aller un peu plus loin dans la découverte de Blade, nous allons garder les vues default.blade.php et informations.blade.php, comme nous les avons créées précédemment, mais en y ajoutant un peu de contenu.

vues.png

1. Le gabarit default (vue générique / parent)

J'ai étendu le gabarit pour permettre de constater que @yield peut agréger autre chose que des sections nommées content :


<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Page de test</title>
</head>
<body>
<h1>Mon site test</h1>

@yield('header')
@yield('nav')
@yield('content')

</body>
</html>

Nous allons voir que les @yield('header') et @yield('nav') permettent d'agréger les sections nommées 'header' et 'nav' de la vue enfant, comme cela était le cas pour la section content.

2. La vue informations (vue spécifique / enfant)

Dans la page informations.blade.php sous mon dossier test, j'ai adapté le code pour quelque chose de plus complet, qui permette de jauger plus significativement le potentiel de Blade :


@extends('default')


@section('header')
    <form method="get">
        <input type="submit" name="etat" value="{{ $value }}">
    </form>
@endsection


@section('nav')
    <ul>
        @foreach($nav as $item)
            <li><a href="#">{{ $item }}</a></li>
        @endforeach
    </ul>
@endsection


@section('content')
@if($value !== 'Activer')
    @include('test.bonjour')
@endif
@endsection

Section "header"

Dans la section header, je crée un simple formulaire en méthode GET. Aucun changement n'est observable dans cette partie du code, à l'exception de la value du formulaire qui accueille une variable entre double accolades. Les double accolades permettent d'afficher le contenu d'une variable en l'échappant. {{ $value }} revient à écrire : <?php echo htmlentities($value); ?> Le contenu de cette variable n'est pas renseigné dans la vue puisqu'il est envoyé depuis le contrôleur – que nous créerons dans le point suivant – vers la vue.

Section "nav"

Dans la section nav, j'appelle un tableau envoyé par le contrôleur – voir plus loin – sur lequel je réalise une boucle foreach et affiche chaque élément du tableau en l'échappant : {{ }}. Bien sûr, le code est adapté à la sauce Blade, tant pour l'affichage du contenu des variables que pour la boucle itérative. S'il était produit en PHP, le script serait écrit comme ceci :


<ul>
   <?php
   foreach($nav as $item) {
   ?>
     <li><a href="#"><?php echo htmlentities($item); ?></a></li>
   <?php
   }
   ?>
</ul>

Le code est donc largement simplifié puisqu'il permet notamment de se passer des (rébarbatives) balises PHP.

Section "content"

Afin d'avoir fait un tour satisfaisant des options de Blade, j'ai créé dans la section content une condition spécifiant que si la variable $value (du header) est différente d' "Activer", j'inclus une autre page nommée bonjour.blade.php, située au même niveau que la présente vue, sous le dossier test. Le @if et le @include sont également propres à la syntaxe de Blade.

3. La vue bonjour : inclusion

Voici la vue bonjour.blade.php, qui sera embarquée quand le site sera établi comme "Activé" :


<p>Le service est activé ! Les épices, c'est bon.</p>
<hr>
<p>{{ "<strong>hibou</strong>" }}</p>
<p>{!! "<strong>hibou</strong>" !!}</p>
{{-- Un commentaire --}}

On y trouve : du contenu échappé, entre {{ }}, du contenu non échappé – qui sera donc interprété – entre {!! !!}, ainsi qu'un commentaire, entre {{-- --}}. Nous verrons ce que donne le résultat de ces trois lignes de code un peu plus bas.

Contrôleur

Comme prévu, nous voilà dans la méthode du contrôleur à laquelle menait la route.


<?php
namespace App\Http\Controllers;

use Illuminate\Http\RedirectResponse;
use Illuminate\Http\Request;

class TestController extends Controller {

	public function activate(Request $request) {
		$nav = ['aneth', 'bergamote', 'coriandre', 'estragon', 'fenouil']; ➊
		$etat = $request->etat;
		if($etat == 'Désactiver') {
			$value = 'Activer';
		} else {
			$value = 'Désactiver';
		} ➋
		return view('test.informations', compact('nav', 'value')); ➌
	}
}

➊ Nous pouvons trouver dans ce contrôleur le tableau $nav à 5 valeurs que nous avons déjà traité avec la boucle foreach (cf. point section nav de la vue 'informations').

➋ Ici, nous abordons les requêtes. Dans la ligne 11 du code ci-dessus, on affecte à la variable $etat la valeur du GET obtenue en cliquant sur le bouton (submit) du formulaire (cf. section header de la vue 'informations'). On demande en effet à Laravel d'établir une requête et d'aller chercher la valeur du GET auquel on a attribué l'attribut name, c'est-à-dire le submit lui-même.

⚠ Pour que $request->[name_du_get] fonctionne, il est nécessaire d'appeler le fichier Request au sommet du contrôleur (use Illuminate\Http\Request;) ainsi qu'en paramètre de la méthode (Request $request, Request servant à instancier l'existant). Ensuite j'établis une condition : si la variable $etat vaut "Désactiver", j'affecte à une variable nommée $value la valeur "Activer" ; mais pour toute autre valeur, la chaîne de caractères "Désactiver" sera affectée à ma variable $value.

➌ Enfin, on retourne la vue informations qui se trouve dans le dossier test, tout en passant à cette vue les variables $nav (➊) et $value (➋), de sorte qu'elles puissent y être exploitées, ce qui a été fait !

Résultat

Les vues ci-dessous varient en fonction qu'on clique sur le bouton en dessous du titre. Si l'on clique sur "Activer" (parce que le site est désactivé), on l'active, et le bouton prend alors dynamiquement la valeur "Désactiver" pour opérer dans le sens inverse (cf. Contrôleur). Par ailleurs, la vue bonjour n'est visible qu'à condition que le site soit établi comme actif (cf. Vue informations, section content).

active.png desactive.png

Conclusion

Désormais, nous avons fait un tour presque complet de Blade. @if @elseif @else, @for, @forelse, @isset – pour ne citer que celles-là – sont d'autres fonctions exploitables que vous pourrez découvrir sur la documentation officielle de Laravel. Le présent article nous a permis de voir comment communiquer des variables du contrôleur à la vue, ce qui est un premier pas vers l'élaboration d'un site ou d'une application plus dynamique. Dans le prochain article, nous verrons la gestion des formulaires en POST, Artisan (l'interface en ligne de commande) et les interactions avec une base de données. See you soon :) !