18 octobre 2021 170.178K

Formation Laravel : Architecture MVC

Nous voici donc sur la page d’accueil de notre application web. Super ! Mais que voit-on ? Quels sont les fichiers à l’origine de cette page ? Pour cela dirigeons nous vers le fichier web.php situé dans le dossier « routes ».

<?php
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

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

Nous pouvons voir que la route ‘/’ return une method view() avec comme paramètre 'welcome'. Qu’est-ce-que tout cela veut dire ? Cela veut dire que pour la route ‘/’ (donc la homepage) on retourne une vue (view) appelé welcome. Qui se trouve plus précisément dans resources/views/welcome.blade.php (Blade étant le moteur de template utilisé par Laravel, nous verrons cela plus tard).

Arborescence Laravel - fichier web.php

Si nous ouvrons le fichier nous pouvons voir le html et le style présent sur la page d’accueil. Avant d’aller plus loin voyons pourquoi nous parlons de « vues » (views).

1. L’architecture MVC

Laravel, comme une grande partie des autres framework php, a une architecture dite MVC (Model – View – Controller). Voici une illustration simple pour vous faire comprendre rapidement la logique de cette architecture.

MVC (Modèle View Controller) Illustration - walkerspider

Chaque action de l’utilisateur passe par le contrôleur (controller) qui envoie des demandes de manipulation d’un objet au modèle. Le modèle (model) effectue les changements de l’objet et le renvoie au contrôleur qui à son tour le passe à la vue (view). Ainsi ces trois pôles ont des responsabilités différentes :
• Le model contient les données et leur logique.
• La view contient la présentation graphique à renvoyer à l’utilisateur.
• Le controller traite les actions utilisateur (via des requêtes), demande au modèle d’effectuer les changements, puis passe les données à la vue.

Le controller a donc une place centrale dans cette architecture. Il est le pont entre les interactions utilisateur et les traitements de données. Tout passe par lui afin de pouvoir tout contrôler… d’où son nom. :p

2. Les assets

Le deuxième fonctionnement important à connaître pour débuter avec Laravel sont les assets. Ils se trouvent dans : /resources. Il s’agit des dossiers js et sass. Ces dossiers ont subi un léger changement d’emplacement depuis la 5.7 (avant ils se trouvaient dans resources/assets maintenant ils se trouvent directement dans /resources).

Arborescence Laravel - Dossier assets

Cette partie vous permettra d’organiser vos fichiers javascript (dans le dossier js) et vos feuilles de style (dans le dossier Sass). Pour ceux qui ne connaissent pas Sass pour vous expliquer brièvement cela vous permet d’avoir du code CSS :

  • Mieux écrit et moins dense avec un système d’indentation, créer des boucles (comme un foreach en php) etc…
  • Utiliser des variables. Même s’il est vrai que cela est possible en CSS également vous verrez que c’est tout de même plus « sexy » en Sass.
  • Utiliser des mixins, ce sont des sortes de fonctions qui peuvent renvoyer plusieurs lignes de code CSS. Elles peuvent donc prendre des paramètres et permettent de réutiliser du CSS en incluant votre mixin où vous le souhaitez.

Vous gagnerez en temps et en visibilité pour ceux qui aiment styliser eux-mêmes : mettez-vous-y vous allez vous régaler ! 😉

Pour ceux qui souhaitent en savoir plus sur le SASS je vous renvoie vers mon article Arrête le CSS et passez au SASS ! qui vous présente cette techno.

Attardons-nous donc un peu sur les assets Sass. De base, vous pouvez voir que vous avez un fichier app.scss et un fichier _variables.scss. Les fichiers commençant par « _ » sont des partials, c’est-à-dire que ce sont des portions de votre feuille de style globale.
app.scss est donc le fichier qui regroupera tous les partials via des import.

En l’ouvrant, vous voyez qu’il importe effectivement une font externe (la Nunito pour la 5.7), le fichier partial variables et Bootstrap. Donc, l’ensemble de la librairie Bootstrap est importée ici. Si vous voulez donc importer votre propre librairie CSS vous pouvez placer directement vos partials et votre app.scss dans ce dossier Sass.

3. Compiler nos assets grâce à npm

Nous allons maintenant installer npm qui est le gestionnaire de paquets officiel de Node.js. (Node est une plateforme de logiciel libre et événementielle en Javascript). Il nous permettra de compiler nos assets et d’envoyer la version compilée dans notre dossier « public ». Pour l’installer, ouvrez votre console et lancez :

npm install

Après le téléchargement vous retrouvez le colossale dossier node_modules dans votre dossier racine Laravel.

Ok mais comment il sait quels fichiers il doit regarder et où il doit les compiler ?

En lui indiquant dans le fichier webpack.mix.js à la racine de votre projet.

const mix = require('laravel-mix');

/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

C’est dans ce fichier que vous définissez les fichiers à compiler et où les envoyer.
Hormis si vous désirez une config différente vous n’avez rien à modifier dans ce fichier. Les assets app.js et app.scss sont déjà ciblés et leurs dossiers de destination respectifs également. Pour tester cela nous allons lancer le watcher avec la commande suivante :

npm run watch

Ouvrez ensuite votre fichier app.scss, effacez son contenu et mettez-y le style qui était présent dans la balise style de la vue. Écrivez-le avec l’indentation de Sass afin de tester rapidement la compilation).

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

$grey-laravel : #636b6f;

html, body {
    background-color: #fff;
    color: $grey-laravel;
    font-family: 'Nunito', sans-serif;
    font-weight: 200;
    height: 100vh;
    margin: 0;
    .full-height {
    height: 100vh;
    }
    .position-ref {
    position: relative;
    }
    .flex-center {
    align-items: center;
    display: flex;
    justify-content: center;
    .content {
        text-align: center;
        .title {
        font-size: 84px;
        }
        .links > a {
        color: $grey-laravel;
        padding: 0 25px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .1rem;
        text-decoration: none;
        text-transform: uppercase;
        }
        .m-b-md {
        margin-bottom: 30px;
        }
    }
    }
    .top-right {
    position: absolute;
    right: 10px;
    top: 18px;
    }
}

Enregistrez et allez voir votre fichier app.css dans /public :

Laravel - fichier app.scss

Vous pouvez voir que la valeur de notre variable $grey-laravel a été placée là où nous l’appelions, que l’indentation du Sass a été remplacée etc…

À chaque enregistrement du fichier Scss le watcher compile comme un grand tout ceci en CSS et réédite le fichier CSS se trouvant dans le dossier public. La console vous permet de voir si la compilation a correctement été effectuée mais également de débugger si jamais il y a une erreur. Pas besoin non plus de relancer la commande, il lancera la compilation à chaque sauvegarde de vos fichiers Sass (pas mal non).

Il ne vous reste plus qu’à ajouter le lien de votre style dans la vue comme ceci :

<link href="{{ asset('css/app.css') }}" rel="stylesheet">

Vos fichiers views se trouvent également dans le dossier « resources ».

Les {{ }} sont propres au moteur de template blade. Nous reviendrons sur blade plus tard car il nous faut voir encore un système important : le routing.

Besoin d'une formation personalisée ?

Avis

4,9
Rated 4.9 out of 5
Excellent93%
Splendide !7%
Sympa0%
Sans plus0%
Pas terrible0%

Pas de titre

Rated 5 out of 5
7 mars 2024

super

hajar

Pas de titre

Rated 5 out of 5
21 juin 2023

Merci énormément je suis sur exciter à cause de ce cours

Kassi Patrick

Pas de titre

Rated 5 out of 5
10 mai 2023

Excellente formation

abdo maroc

Pas de titre

Rated 5 out of 5
7 mai 2023

Merci

Ranaivoson (c'est malgache)

Pas de titre

Rated 5 out of 5
18 avril 2023

Merci

Anthea