LARAVEL (8-2021) – FRAMEWORK PHP 2

(1)

LARAVEL (8-2021) – FRAMEWORK PHP 2

SOMMAIRE

Sommaire ... 1

Etape 2 ... 3

0 - Bilan des commandes des étapes précédentes et objectifs de l’étape 2... 3

Principe du document ... 3

Bilan des commandes des étapes précédentes ... 3

Commandes ... 3

Fichier manipulés ... 3

Objectifs de l’étape 2 ... 3

1 – Installation du package ui (v5) ... 4

Présentation ... 4

Installation de l’application ... 4

Création du projet Laravel maTodolist ... 4

Base de données ... 5

Principes techniques pour l’authentification ... 7

Avant : ... 7

Maintenant: ... 7

Le package « ui » ... 7

Installation du package laravel ui ... 8

composer ... 8

php artisan ui ... 8

Installation de l’authentification dans notre projet : ... 8

Test de l’installation ... 9

Utilisation ... 9

Vérification en BD ...10

Routes ...10

Fichiers modifiés ... 11

Routes ...11

Controller ...12

View ...12

Synthèse : ... 13

Commande ...13

Fichiers modifiés ...13

2 – Création de la route apropos (v6) ...14

Sauvegarde de l’étape précédente ... 14

Copie ...14

Test de la copie ...14

Programmation de routes ... 15

(2)

MVC : Modèle - Vue - Contrôleur. ... 20

Le Modèle (SQL)... 21

La Vue (HTML) ... 21

Le Contrôleur (PHP) ... 22

Fonctionnement global... 23

MVC : design pattern tête la première ... 24

4 - Création d'un controller (v6) ...25

Le dossier des controller : App /Http /Controllers ... 25

Ajout « à la main » ... 25

Ajout « à la main » ...25

Test de la route « a-propos » ...25

Ajout avec php artisan make :controller ... 26

Ajout avec php artisan make :controller ...26

Test de la route « a-propos » ...26

5 - Création d'une vue (v6) ...27

Le dossier des vues : ressources / views ... 27

Première approche ...27

Deuxième approche ...27

Troisième approche : un fichier Bootstrap ...28

Petits paramétrages ... 30

Factorisation du code ... 31

On va pouvoir factoriser le code : ...31

Explication du fichier ressources/views/layout/app.blade.php ...31

Factorisation : notre vue apropos va utiliser le layout ...32

Pour retrouver la même mise en page ...33

Vérification ...33

6 – Synthèse et bilan des commandes et des fichiers modifiés ...34

Synthèse ... 34

Commandes et fichiers modifiés ... 34

Commandes ...34

Fichier manipulés ...34

(3)

ETAPE 2

0 - Bilan des commandes des étapes précédentes et objectifs de l’étape 2

Principe du document En bleu : les parties à réaliser.

Bilan des commandes des étapes précédentes

Commandes

>composer create-project laravel/laravel monApp

>composer global req laravel/install

>laravel new monApp

>$HOME/.composer/vendor/bin/laravel new monApp

>php artisan serve

>composer update

>php artisan config:clear

>php artisan serve

mysql>create database laraveltodo;

>php artisan migrate

Fichier manipulés

• .env

• Config/mail.php

Objectifs de l’étape 2

• On va créer une page en installant un package : ui. Ca installe plusieurs routes.

• On va créer une page « à la main » avec une seule route.

(4)

1 – Installation du package ui (v5)

Présentation

• On va installer un package pour l’authentification :ui.

• Pour ça, on va installer les tables de la BD.

 Vieille documentation sur la BD : certaines descriptions de tables peuvent encore correspondre, mais c’est la version 5.3 et on en est à la version 8 en 2021.

Installation de l’application

Création du projet Laravel maTodolist

• On repart d’une application vierge : « maTodolist » qu’on va créer :

>composer create-project laravel/laravel maTodolist

• Ou :

>$HOME/.composer/vendor/bin/laravel new maTodolist

• On teste le projet

>cd maTodolist

>php artisan serve

• On fait une copie du dossier «maTodolist » , sans le dossier vendor, dans le dossier

« maTodolist-base ».

(5)

Base de données

Mise à jour du fichier .env

• Dans le fichier .env, mettre à jour le DB_USERNAME et DB_PASSWORD si nécessaire.

Création de la BD « maTodolist »

• Dans le fichier .env, mettez le bon DB_DATABASE :

DB_DATABASE = matodolist

• Dans le fichier .env, mettez le bon DB_USERNAME et DB_PASSWORD:

DB_USERNAME=root DB_PASSWORD=

• Dans un client mysql, créez la BD maTodolist.

Mysql> create database matodolist Mysql> use matodolist

Mysql> show tables Empty set (0,00 sec)

Mise à jour de la BD

• Pour mettre à jour la BD et créer les tables correspondant à notre installation Laravel, il faut commencer par mettre à jour le fichier App/Providers/AppServicesProvider.php :

 On ajoute la ligne suivante juste après le 1^er use :

use Illuminate\Support\Facades\Schema; // juste après le 1^er use

 On ajoute la ligne suivante dans la fonction boot

Schema::defaultStringLength(191); // dans la fonction boot

• Ensuite, on peut créer la BD avec les commandes suivantes :

>php artisan config:cache # par prudence, on vide les caches

>php artisan cache:clear # par prudence, on vide les caches

(6)

Mise à jour de la BD

• A ce stade, ça crée 4 tables :

mysql> show tables;

+---+

| Tables_in_matodolist | +---+

| failed_jobs | -> vide

| migrations | -> 3 migrations

| password_resets | -> vide

| users | -> vide +---+

• La table migration enregistre les migrations effectuées : c’est la première table créée.

mysql> select * from migrations;

+----+---+---+

| id | migration | batch | +----+---+---+

| 1 | 2014_10_12_000000_create_users_table | 1 |

| 2 | 2014_10_12_100000_create_password_resets_table | 1 |

| 3 | 2019_08_19_000000_create_failed_jobs_table | 1 | +----+---+---+

• La table migration enregistre les migrations effectuées : c’est la première table créée.

En cas d’erreur Illuminate\Database\QueryException

• Il faudra peut-être supprimer la BD et la recréer (pour la vider) :

Mysql> drop database matodolist Mysql> create database matodolist Mysql> use matodolist

(7)

Principes techniques pour l’authentification

Avant :

php artisan make:hote # générait les vues nécessaire

Maintenant:

• Un package à installer : le package « ui »

Le package « ui »

• packagist.org : chercher ui

 laravel/ui : on trouve des informations sur l’installation.

• On peut aussi regarder sur github, on y trouve des informations sur le package ui

 https://github.com/laravel/ui : on trouve aussi des informations sur github : entre autres des packages pour remplacer ui.

(8)

Installation du package laravel ui

composer

• Pour installer le package ui, on tape la commande suivante (on trouve l’information sur packagist.org, ici : laravel/ui)

• Il faut passer une commande composer require en était dans le dossier « matodolist » :

> composer require --dev laravel/ui

 On utilise require --dev pour le développement. Pour la production on peut s’en passer.

php artisan ui

• php artisan montre de nouvelles commande : ui

> php artisan ...

ui

ui:auth Scaffold basic login and registration views and routes ui:controllers Scaffold the authentication controllers

...

• Aide

> php artisan ui --help

Installation de l’authentification dans notre projet :

• La commande suivante permet l’installation de ui :

> php artisan ui bootstrap --auth

• Il faut ajouter ces deux commandes pour compiler les éléments nécessaires à l'authentification et générer le css et js nécessaire à l'authentification, à passer plusieurs fois si nécessaire jusqu’à ce qu’il n’y ait plus d’erreurs.

> npm install && npm run dev

(9)

Test de l’installation

Utilisation

• On démarre le serveur et un client :

> php artisan serve

Starting Laravel development server: http://127.0.0.1:8000

 On a le log in et le register :

• On ajoute un utilisateur : on clique sur Register :

• On est logué :

− Le menu « Laravel » ramène à la page l’accueil.

− Le menu «bertrand » permet un logout.

− Sur la page d’accueil on a un menu « home ».

• Tester tous les usages possibles à ce stade.

(10)

Vérification en BD

• On peut vérifier la présence des utilisateurs créés dans la BD.

• Dans une console mysql :

mysql> select id, name, email, created_at from users;

+----+---+---+---+

| 1 | bertrand | bl@gmail.com | 2021-02-27 17:43:14 | +----+---+---+---+

1 row in set (0,00 sec)

Routes

Voir toutes les routes :

• La commande suivane permet d’afficher toutes les routes :

> php artisan route:list

• On a 2 routes GET. Une route GET veut dire une route accessible via l’URL du navigateur.

 La première route est de type « web », l’autre de type « api ».

 Les routes « web » permettent un usage public du site via un navigateur.

 Les routes « api » permettent une utilisation du site comme api pour une autre application.

• On ne s’intéresse pour le moment qu’aux routes GET de type web.

 La seule route est « / »

 Le / se place après l’url proposé par le serveur php artisan serve :

 La route d’entrée est donc : http://127.0.0.1:8000/ ou http://localhost:8000/

Fichier des routes : routes/web.php

• Le fichier contient une seule route : « / ».

Route::get('/', function () { return view('welcome');

});

• Cette route est associée à la vue « welcome ».

Fichier des vues : ressources/views/welcome.blade.php

• La vue « welcome » correspond au ficher « welcome.blade.php » dans le dossier

« ressources/views ».

 C’est un fichier « blade », c’est-à-dire un fichier template html avec du code php qui sera compilé par blade en pur html (comme babel traduit du html en javascript).

 On constate la présence de php précédé de « @ »

(11)

Fichiers modifiés

Routes

Voir toutes les routes :

• La commande suivane permet d’afficher toutes les routes :

> php artisan route:list

• Seuls les routes avec un méthode GET sont accessibles par l’URL : on peut toutes les tester :

 http://localhost:8000/register : amène sur la page de création d’un utilisateur si personne n’est logué, ou sur la page home de l’utilisateur logué.

 http://localhost:8000/login : amène sur la page de login

 http://localhost:8000/home : amène sur la page de login si personne n’est logué, ou sur la page home de l’utilisateur logué.

 http://localhost:8000/password/reset : amène sur une page de reset d’un password.

 http://localhost:8000/password/reset/1 : amène sur une page de changement de password.

 http://localhost:8000/logout : ne marche pas : c’est une route avec une méthode POST.

Fichier des routes : routes/web.php

• On a 2 nouvelles routes :

Route::get(

'/home',

[App\Http\Controllers\HomeController::class, 'index']

)->name('home');

Auth::routes();

 La route « '/home' » : c’est la page d’accueil une fois logué.

 Les routes de Auth : ce sont toutes les routes d’authentification. On retrouve le nom

« Auth » dans le dossier des actions des routes dans la commande php artisan routes :list.

(12)

Controller

Fichier App\Http\Controllers\HomeController.php

• C’est le controller appelé par la route « /home »

• Ce contrôleur appelle une vue (du HTML) :

return view('home');

Fichiers dans App\Http\Controllers\Auth

• Tous les fichiers dans ce dossier Auth sont les controllers pour l’authentification.

View

Fichier ressources/views/home.blade.php

• C’est la vue appelée par le controller.

• C’est un fichier « blade » : un template qui intègre du HTML et du PHP.

Fichier dans ressources/views/Auth

• Tous les fichiers dans ce dossier Auth sont les vues pour l’authentification.

(13)

Synthèse :

Commande

>composer create-project laravel/laravel maTodolist

>cd maTodolist

>php artisan serve

Mysql> create database matodolist

> # mettre à jour le fichier App/Providers/AppServicesProvider.php

>php artisan migrate Mysql> use matodolist Mysql> show tables

>composer require laravel/ui --dev

>php artisan ui bootstrap --auth // cf packagist.org

>npm install && npm run dev

>php artisan route:list

Fichiers modifiés

Route

− routes/web.php

Controller

− App\Http\Controllers\HomeController.php

− App\Http\Controllers\Auth\*

View

− ressources/views/home.blade.php

− ressources/views/Auth\*

node_modules

− on a créé un dossier node_modules

(14)

2 – Création de la route apropos (v6)

Sauvegarde de l’étape précédente

Copie

• On fait une copie du dossier «maTodolist » :

 sans le dossier vendor,

 sans le dossier node_module

• dans le dossier « maTodolist-2-1-authentification »

Test de la copie

• Pour tester la copie :

cd maTodolist-2-1-authentification Composer update

npm install && npm run dev php artisan serve

(15)

Programmation de routes

Route simple

Principes:

• On va modifier le fichier de routes : routes/web.php

Syntaxe :

Route:methode_http('/nom_route', action() )

Exemple

Route::get('/hello', function(){

return '<h1 style="color:red" >hello world</h1>';

});

Test

:8080/hello : ça marche

:8080/hello2 : ça ne marche pas

Consultation des routes

(16)

Paramètre dans l'url

Exemple

Route::get('/hello2/{name}', function($name){

return '<h1 style="color:red" >hello '.$name.'</h1>';

});

Test

:8080/hello2/toto : ça marche

:8080/hello2 : ça ne marche pas : le paramètre est obligatoire

Paramètre facultatif dans l'url

Syntaxe

• Paramètre par obligatoire : ? et valeur par défaut

Exemple

Route::get('/hello3/{name?}', function($name='nobody'){

return '<h1 style="color:red" >hello '.$name.'</h1>';

});

Test

:8080/hello3/toto : ça marche :8080/hello3 : ça marche

Attention : lecture du fichier routes/web.php

• Si on met 2 fois la même route, la 2ème écrase la 1^ère.

• Il faut donc faire attention à ne pas mettre 2 fois la même route.

(17)

Une page "a-propos" dans notre site

Objectifs

• Création d’une route « apropos »

 routes/web.php

• Création d’un contrôleur pour la route

 App \ http \ Controllers \ AproposController.php

• Création d’une vue pour le contrôleur

 ressources \ views \ apropos \ index.blade.php

(18)

Rappels : structure de la route de home :

Principes:

• Actuellement, on a une route home sur notre site :

Code de la route ‘/home’

Route::get(

'/home',

[App\Http\Controllers\HomeController::class, 'index']

)->name('home');

On y trouve :

• '/home' : c’est le nom de la route

• \HomeController : c’est le nom du fichier controller. Tous les controllers sont au même endroit : App\Http\Controllers

• index : c’est le nom de la méthode qui sera appelée dans le controller. Cette méthode affiche la vue. On l’appelle toujours « index ».

• ->name(‘home’) : permet de nommer ses routes

 On peut alors récupérer l'url avec la fonction route('nom_de_route')

 Ça permet de changer les routes sans changer le code.

• La syntaxe peut changer selon les versions. Cette autre syntaxe fonctionne :

Route::get('/home', 'App\Http\Controllers\HomeController@index');

Le controller : App\Http\Controllers\HomeController.php

• C’est une classe qui contient une méthode index() qui retourne une vue :

public function index() {

return view('home');

}

 La vue “home” est retournée : c’est le fichier « ressources/views/home.blade.php »/

La vue : ressources/views/home.blade.php

• C’est un fichier « blade » : un template qui intègre du HTML et du PHP.

(19)

Création de la route « a-propos »

• Dans le fichier routes/web.php, on reprend la même syntaxe que pour « home », mais on remplace par « a-propos »

Route::get(

'/a-propos',

[App\Http\Controllers\AproposController::class, 'index']

)->name('a-propos');

Test de la route « a-propos »

• La route « a-propos » appelle le controller : App\Http\Controllers\AproposController.

• La route a-propos plante : le controller n'est pas défini.

(20)

3 – Rappel : le MVC

• Avant de présenter la création d’un controller dans Laravel, on fait un rappel du MVC.

MVC : Modèle - Vue - Contrôleur.

• L’architecture MVC sépare la logique du code en trois parties, trois ensembles de fichiers :

− le modèle (qui correspond au SQL)

− la vue (qui correspond au HTML)

− le contrôleur (qui correspond au PHP faisant le lien entre les deux précédent).

• Cela rend le code plus facile à mettre à jour et permet d’organiser le travail en 3 parties et donc de travailler en parallèle.

• L’architecture MVC est une bonne pratique de programmation.

• La connaissance de l’architecture MVC rend capable de créer un site web de qualité et facile à maintenir.

• En pratique, les architectures MVC mises en œuvre s’appuient sur la théorie mais l’adaptent de façon pragmatique. Il y a donc plusieurs façons de mettre en œuvre le MVC.

• Les principaux framework sont développés en MVC : Laravel, Symfony, CodeIgniter, CakePHP, Zend Framework, etc.

(21)

Le Modèle (SQL)

• Le modèle gère les données du site : essentiellement les accès à la BD. Mais aussi la gestion de fichiers.

• Il propose des fonctions pour faire des Insert, des Update, des Delete, des Select.

• Ces fonctions peuvent renvoyer des tableaux de données.

• Les résultats seront exploités par le contrôleur mais aussi par le HTML.

 C’est une page pur PHP.

• Les framework permettent de mettre à jour à la BD facilement et de façon itérative grâce à la commande php artisan migrate.

La Vue (HTML)

• La vue affiche la page HTML. Elles récupèrent des variables du Contrôleur et/ou du Modèle pour savoir ce qu’elles doivent afficher.

• C’est une page HTML avec quelques boucles et conditions PHP très simples.

 Le php sert à afficher données issues du Modèle.

• La vue contient le DOCTYPE mais elle ne peut fonctionner qu’avec le contexte du contrôleur.

(22)

Le Contrôleur (PHP)

• Le contrôleur est la page appelée (le véritable index, autrement dit, le « main »).

• Il fonctionne en trois étapes :

1. Il utilise les fonctions du Modèle (include et appels aux fonctions).

2. Il analyse et traite les données issues du Modèle mais aussi celles passées en paramètre à l’appel de la page ($_GET, $_POST, $_SESSION). Il détermine par exemple si le visiteur a le droit de voir la page ou non.

3. En fonction de ses calculs, il appelle la vue correspondante par un include.

• C’est une page pur PHP.

• Le contrôleur est le « chef d’orchestre » :

 Il récupère la demande de l’utilisateur à travers la vue (la page HTML) par un href, un formulaire ou un header.

 Il échange des données avec le modèle,

 Il fait les calculs (qui peuvent être complexes)

 Il choisit une vue à afficher en lui fournissant les variables.

• Le rôle du contrôleur peut se limiter à faire le lien entre le modèle et la vue : de la colle !

(23)

Fonctionnement global

• Un utilisateur, à travers une page, fait appel à une autre page : un contrôleur (par un href ou un formulaire).

• Le contrôleur « include » un modèle et utilise une des fonctions du modèle.

• Il fait ensuite des calculs.

• Selon les résultats, il include une vue ou une autre et l’affiche à l’utilisateur.

• L’utilisateur pourra alors, à partir de la nouvelle page afficher, faire appel à une autre page et on recommence le processus.

(24)

MVC : design pattern tête la première

• La chanson du contrôleur :

Car si l’modèle - est essentiel Et si la vue - est magnifique J’suis p’têt feignant - oui mais c’est fou

Ces lignes de code - qui sont d’la colle Et c’code n’fait rien - d’vraiment magique Il n’fait qu’transmettre - que des valeurs

• Le contrôleur, c’est de la colle : il colle le modèle et la vue.

• On dit que le MCV est un design pattern (DP). C’est en réalité un assemblage de DP

élémentaires (un par lettre) : les DP « stratégie », « composite » et « observateur » (les DP ont des noms).

• Si on code réellement ces DP, alors on aura une mise à jour automatique des notifications (DP observateur).

(25)

4 - Création d'un controller (v6)

Le dossier des controller : App /Http /Controllers

• Il y a déjà un contrôleur : HomeController.php.

• On va ajouter le contrôleur : AproposController.php

Ajout « à la main »

• On peut créer ce contrôleur en partant du HomeControler :

 Dupliquer le HomeController

 Renommer en AproposController

• Mettre à jour par analogie :

 A noter que dans le HomeController, on trouve un constructeur qui fait appel à la méthode : middleware('auth');

 Il s’agit de la prise en compte de toutes les pages intermédiaires de l’authentification : c’est du « middleware » et c’est accessible par le nom « auth ».

 Ici, on n’a pas besoin de tout ça : on peut supprimer le constructeur dans notre Apropos.

• La route « a-propos » appelle le controller : App \ Http \ Controllers \ AproposController.php

• Le controller appelle la vue : ressources \ views \ apropos.blade.php

• La route a-propos plante : la vue n'est pas définie.

(26)

Ajout avec php artisan make :controller

• On peut créer ce contrôleur en utilisant la commande « php artisan make »

• Liste des commandes php artisan

> php artisan -> liste les commandes ...

make ...

make:controller Create a new controller class ...

• Aide php artisan make:controller

> php artisan make :controller –help ...

Arguments:

name The name of the class ...

• Création de la classe

> php artisan make:controller AproposController

 Dans le dossier App /Http /Controllers : AproposController.php

 C'est un squelette

• Dans le fichier AproposController.php appelle la vue :

 Dans la classe on ajoute la méthode index (par analogie avec HomeController.php) :

return view('apropos.index'); # fichier apropos/index.blade.php }

• La route « a-propos » appelle le controller : App \ http \ Controllers \ AproposController.

• Le controller appelle la vue : ressources \ views \ apropos \ index.blade.php

• La route a-propos plante : la vue n'est pas définie.

(27)

5 - Création d'une vue (v6)

Le dossier des vues : ressources / views

Première approche

• Dans le répertoire « views », on crée le dossier apropos et le fichier index.blade.php

 On peut faire ça d'un coup dans vs code : dans views : apropos/index.blade.php

• Dans ce fichier on met :

<h1 style="color:red">Hello world MVC Laravel</h1>

• La route a-propos fonctionne :8080/a-propos

 La route mène au controler qui mène à la vue

Deuxième approche

• On crée un fichier dans le répertoire « views » : apropos.blade.php

• Dans ce fichier on met :

<h1 style="color:blue">Hello world MVC Laravel</h1>

• On change le fichier AproposController.php :

return view('apropos'); # fichier apropos.blade.php }

 La route mène au controler qui mène à la vue

(28)

Troisième approche : un fichier Bootstrap

• Dans le fichier :

ressources/views/apropos/index.blade.php

• On recopie

ressources/views/layout/app.blade.php

• On remplace :

@yield('content')

</main>

• Par (chargeable <ici>) :

<h1 class="display-4">Your todolist with Laravel !</h1>

<p class="lead">A very simple todolist application to learn Laravel.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.

Expedita eos provident mollitia.

Nesciunt praesentium doloribus aliquam voluptatem aperiam nisi molestias culpa voluptate soluta?

Nemo incidunt exercitationem similique sequi id temporibus?</p>

<p class="bg-warning p-4"><span class="badge badge-primary mx-2">New</span>Lorem ipsum dolor sit

amet

consectetur, adipisicing elit. Optio, laudantium culpa facilis alias nihil ad autem. Libero cupiditate tempore, ipsa consectetur maxime quae quis

rem dignissimos nihil nisi necessitatibus voluptas.</p>

</div>

</main>

(29)

• On vérifie que le fichier AproposController.php contient bien :

return view('apropos.index'); # fichier apropos/index.blade.php }

 La route « a-propos » appelle le controller : App \ http \ Controllers \ AproposController.

 Le controller appelle la vue : ressources \ views \ apropos \ index.blade.php

 La route a-propos plante : la vue n'est pas définie.

(30)

Petits paramétrages

• Dans le .env, on met

APP_NAME="Laravel todo"

 A noter qu’il faudra peut-être relancer le serveur avec vidage des caches pour que ça soit pris en compte :

> php artisan cache:clear

> php artisan config:clear

> php artisan serve

 Sur la route « a-propos » on voit maintenant « Laravel-todo »

 Dans le fichier apropos/index.blade.php, on trouve :

• CSS : dans la navbar, on met (chercher « class="navbar » dans apropos/index.blade.php) :

navbar-dark bg-primary # à la place de navbar-light bg-white

• CSS : dans le paragraphe en jaune, on remplace bg-warning par bg-success :

• Quelques infos bootstrap :

 https://mdbootstrap.com/docs/standard/content-styles/colors/

 https://www.w3schools.com/bootstrap4/bootstrap_colors.asp

(31)

Factorisation du code

On va pouvoir factoriser le code :

• Actuellement, dans le code de notre vue, seul le main est spécifique.

• On va donc factoriser. Principe « don't repeat yourself » = « dry » Explication du fichier ressources/views/layout/app.blade.php

Répertoire Layout =mise en page

• Le dossier layout contient des fichiers de mise en page.

• Le fichier app.blade.php est un fichier blade : fichier de template qui comprend du HTML et du PHP

Syntaxe Blade (https://laravel.com/docs/8.x/blade) :

 Le PHP est entre {{ }}

 Le PHP est précédé de @

 @guest : teste les utilisateurs non authentifiés.

 Le @else donne donc les authentifiés.

• De façon plus générale :

 @section('nomSection') : définit une section de contenu

 @endsection -> termine sans afficher

 @show -> termine en affichant (= endsection + yield)

 @yield('nomSection') : afficher le contenu d'une section donnée.

(32)

Factorisation : notre vue apropos va utiliser le layout

• Notre fichier apropos/index.blade.php va inclure le layout autour de son main qui est spécifique.

• On peut s’appuyer sur le code de home.blade.php. On y voit :

@extends('layouts.app')

@section('content')

<div>

Le HTML

</div>

@endsection

 On fait ça, car dans le main de layout/app.blade.php, on yield content : @yield('content')

• Dans ressources/apropos/index.blade.php

 On ne garde que la div dans le main : on peut supprimer tout le reste qui correspond au layout (on ne garde pas le main).

 Au début du fichier on écrit :

@extends('layouts.app')

@section('content')

 on ferme avec @endsection

@section('content')

• On peut tester le nouveau code

 On a perdu quelques éléments de CSS

(33)

Pour retrouver la même mise en page

• Dans le fichier layout/app.blade.php

 <main class=""> : il faut supprimer py-4 (il contient un padding-top).

 <nav class="navbar ... navbar-dark bg-primary ..."> : il faut remplacer navbar-light bg- white par navbar-dark bg-primary

• On peut tester le nouveau code

 Tout marche !

Vérification

• On change du texte : Ma todolist avec Laravel

(34)

6 – Synthèse et bilan des commandes et des fichiers modifiés

Synthèse

• On a créé une page en installant un package : ui. Ca installe plusieurs routes.

• On a créé une page « à la main » avec une seule route.

Commandes et fichiers modifiés

Commandes

• Installation du package ui

>php artisan ui bootstrap --auth // cf packagist.org

>npm install && npm run dev

• Lister les routes

• Création d’un contrôleur pour la route a-propos

> php artisan make:controller AproposController

• Syntaxe Blade

Le PHP est entre {{ }}

Le PHP est précédé de @

Fichier manipulés

• Création d’une route « apropos »

 routes / web.php

• Création d’un contrôleur pour la route

 App / Http / Controllers / AproposController.php

• Création d’une vue pour le contrôleur : fichier blade

 ressources / views / apropos / index.blade.php